/*  DEFAULT COLORS AND SPACERS */
/* ----------------------------------------------------------------------------- */
:root {

    --spacer-xxxs :  2px;
    --spacer-xxs  :  4px;
    --spacer-xs   :  8px;
    --spacer-s    : 12px;
    --spacer-m    : 16px;
    --spacer-l    : 24px;
    --spacer-xl   : 32px;
    --spacer-xxl  : 48px;

    --width-viewer-note : 946px;

}


/*  DEFAULT CLASSES */
/* ----------------------------------------------------------------------------- */
.clear {
    clear : both;
}
.left {
    float : left;
}
.right {
    float : right;
}
.align-right {
    text-align : right;
}
.nowrap {
    overflow : hidden;
    text-overflow: ellipsis;
    white-space : nowrap;
}
.hidden { display : none !important; }
.invisible.hide-left {
    left : -100%;
    right : 100%;
}
.invisible.hide-right {
    left : 100%;
    right : -100%;
}
.columns { display : flex; }



/*  LAYOUT : SPLIT (Landing Page) */
/* ----------------------------------------------------------------------------- */
.split {
    position : absolute;
    top : 0px;
    right : 0px;
    bottom : 0px;
    left : 0px;
}
.split-left {
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 60px;
}
.split-right {
    position: absolute;
    top: 60px;
    right: 60px;
    bottom: 60px;
}
.split-divider {
    position : absolute;
    top : 0px;
    bottom : 0px;
}
.split.left-250 > .split-left  { width : 250px; }
.split.left-250 > .split-right { width : calc(100% - 520px); overflow-y : auto; }
.split.left-250 > .split-divider { left : 250px; }
.split.left-300 > .split-left  { padding : 40px; width : 300px; }
.split.left-300 > .split-right { width : calc(100% - 450px); overflow-y : auto; }
.split.left-300 > .split-divider { left : 300px; }
.split.left-350 > .split-left  { width : 350px; }
.split.left-350 > .split-right { width : calc(100% - 620px); overflow-y : auto; }
.split.left-350 > .split-divider { left : 350px; }

.split-left.padding-80  { top :  80px; bottom :  80px; left :  80px; }
.split-left.padding-100 { top : 100px; bottom : 100px; left : 100px; }
.split-right.padding-80  { top :  80px; bottom :  80px; right :  80px; }
.split-right.padding-100 { top : 100px; bottom : 100px; right : 100px; }




/*  AVATARS */
/* ----------------------------------------------------------------------------- */
.avatar {
    border-radius : 50%;
}
.avatar.xl { height : 64px; width : 64px; }
.avatar.l  { height : 48px; width : 48px; }
.avatar.m  { height : 32px; width : 32px; }
.avatar.s  { height : 24px; width : 24px; }
.avatar.xs { height : 16px; width : 16px; }



/*  SURFACE COLORS */
/* ----------------------------------------------------------------------------- */
.surface-level-1   { background : #ffffff; }
.surface-level-2   { background : #f5f5f5; }
.surface-level-2-5 { background : #eeeeee; }
.surface-level-3   { background : #d9d9d9; }
.surface-level-3-5 { background : #cccccc; }

.blue-theme .surface-level-1   { background : #454f61; }
.blue-theme .surface-level-2   { background : #3b4453; }
.blue-theme .surface-level-2-5 { background : #2e3440; }
.blue-theme .surface-level-3   { background : #222933; }
.blue-theme .surface-level-3-5 { background : #1a1f26; }

.dark-theme .surface-level-1   { background : #535353; }
.dark-theme .surface-level-2   { background : #474747; }
.dark-theme .surface-level-2-5 { background : #373737; }
.dark-theme .surface-level-3   { background : #2a2a2a; }
.dark-theme .surface-level-3-5 { background : #202020; }



/*  DIVIDERS */
/* ----------------------------------------------------------------------------- */
.divider.horizontal { height : 1px; width : 100%; }
.divider.vertical { width : 1px; }
.divider.light { background: rgba(60, 60, 60, 0.1); }
.divider.heavy { background: rgba(60, 60, 60, 0.25); }
.divider.color { background: #0696D7; }

.blue-theme .divider.light { background: rgba(209, 222, 238, 0.1); }
.blue-theme .divider.heavy { background: rgba(209, 222, 238, 0.25); }
.blue-theme .divider.color { background: #0696D7; }

.dark-theme .divider.light { background: rgba(255, 255, 255, 0.1); }
.dark-theme .divider.heavy { background: rgba(255, 255, 255, 0.25); }
.dark-theme .divider.color { background: #0696D7; }



/*  TILES */
/* ----------------------------------------------------------------------------- */
.tiles {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y : auto;
}
.tile { 
    background: rgba(128, 128, 128, 0.15);
    border : 1px solid transparent;
    cursor : pointer; 
    overflow : hidden;
}
.tile:hover { background: rgba(128, 128, 128, 0.25); }
.tile.selected {
    background : var(--color-selected) !important;
    border-color : var(--color-selected-border);
}

.surface-level-1   > .tiles > .tile { background: rgba(128, 128, 128, 0.15); }
.surface-level-2   > .tiles > .tile { background: rgba(128, 128, 128, 0.15); }
.surface-level-2-5 > .tiles > .tile { background: rgba(255, 255, 255, 0.5);  }
.surface-level-3   > .tiles > .tile { background: rgba(255, 255, 255, 0.5);  }
.surface-level-3-5 > .tiles > .tile { background: rgba(255, 255, 255, 0.5);  }

.surface-level-1   > .tiles > .tile:hover { background: rgba(128, 128, 128, 0.25); }
.surface-level-2   > .tiles > .tile:hover { background: rgba(128, 128, 128, 0.25); }
.surface-level-2-5 > .tiles > .tile:hover { background: rgba(255, 255, 255, 0.7);  }
.surface-level-3   > .tiles > .tile:hover { background: rgba(255, 255, 255, 0.7);  }
.surface-level-3-5 > .tiles > .tileiv:hover { background: rgba(255, 255, 255, 0.7);  }

.tiles > .tile:hover img { opacity : 0.9; }

.tiles.xxl        { gap : var(--spacer-xl); }
.tiles.xl         { gap : var(--spacer-l); }
.tiles.wide.s     { gap : var(--spacer-s); }
.tiles.list.l     { gap : var(--spacer-s); }
.tiles.list.m     { gap : var(--spacer-xs); }
.tiles.list.s     { gap : var(--spacer-xs); }
.tiles.list.xs    { gap : var(--spacer-xs); }
.tiles.list.xxs   { gap : var(--spacer-xxxs); }
.tiles.list.xxxs  { gap : var(--spacer-xxxs); }
.tiles.list.files { gap : var(--spacer-xs); } /* DESIGN REVIEWS, CLASS BROWSER */

.tiles.xxl > .tile { height : 344px; width : 384px; }
.tiles.xl  > .tile { height : 440px; width : 228px; } .tiles.xl  .tile-details { height : 270px; }
.tiles.l   > .tile { height : 300px; width : 171px; }
.tiles.m   > .tile { height : 300px; width : 114px; }
.tiles.s   > .tile { height : 200px; width :  86px; }

.tiles.xxl .tile-image { height :    216px; width : 384px; }
.tiles.xl  .tile-image { height : 128.25px; width : 228px; } 
.tiles.l   .tile-image { height :  96.19px; width : 171px; }
.tiles.m   .tile-image { height :  64.12px; width : 114px; }
.tiles.s   .tile-image { height :  48.38px; width :  86px; }

.tiles.wide.xxl > .tile { height : 200px; width : 800px; }
.tiles.wide.xl  > .tile { height : 200px; width : 500px; }
.tiles.wide.l   > .tile { height : 128px; width : 600px; }
.tiles.wide.m   > .tile { height :  96px; width : 600px; }
.tiles.wide.s   > .tile { height :  64px; width : 350px; }

.tiles.list.l     > .tile { height : 96px; width : 100%; }
.tiles.list.m     > .tile { height : 64px; width : 100%; }
.tiles.list.s     > .tile { height : 64px; width : 100%; }
.tiles.list.xs    > .tile { height : 48px; width : 100%; }
.tiles.list.xxs   > .tile { height : 36px; width : 100%; }
.tiles.list.xxxs  > .tile { height : 26px; width : 100%; }
.tiles.list.files > .tile { height : 58px; width : 100%; } /* DESIGN REVIEWS APP */

.tile-image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
} 
.tile-image > span {
    font-size : 42px;
    font-weight : 200;
    line-height : 64px;
}

.tiles.wide.xxl .tile-image { height : 200px; width : 356px; } .tiles.wide.xxl .tile-details { width : calc(100% - 416px); } .tiles.wide.xxl .tile-image > span { font-size : 96px; line-height : 200px; }
.tiles.wide.xl  .tile-image { height : 200px; width : 200px; } .tiles.wide.xl  .tile-details { width : calc(100% - 260px); }
.tiles.wide.l   .tile-image { height : 128px; width : 128px; }
.tiles.wide.m   .tile-image { height :  96px; width :  96px; }
.tiles.wide.s   .tile-image { height :  64px; width :  64px; } .tiles.wide.s   .tile-details { gap : 2px; margin : 16px 20px 12px; width : calc(100% -  88px); }

.tiles.list.l    .tile-image { height :  96px; width :  96px; } .tiles.list.l    .tile-details { margin : 12px 20px; width : calc(100% - 136px); } .tiles.list.l .tile-image > span { font-size : 54px; line-height : 96px; }
.tiles.list.m    .tile-image { height :  64px; width :  64px; } .tiles.list.m    .tile-details { margin : 12px 20px; width : calc(100% - 104px); }
.tiles.list.s    .tile-image { height :  64px; width :  64px; } .tiles.list.s    .tile-details { margin : 10px 20px; width : calc(100% - 104px); }
.tiles.list.xs   .tile-image { height :  48px; width :  48px; } .tiles.list.xs   .tile-details { margin :  8px 16px; width : calc(100%  - 98px); } .tiles.list.xs   .tile-title { font-size : 14px; line-height : 16px; text-overflow : ellipsis; white-space : nowrap; } .tiles.list.xs   .tile-image span { font-size : 36px; line-height : 48px; }
.tiles.list.xxs  .tile-image { height :  36px; width :  36px; } .tiles.list.xxs  .tile-details { margin :  6px 14px; width : calc(100%  - 64px); } .tiles.list.xxs  .tile-title { font-size : 12px; line-height : 12px; text-overflow : ellipsis; white-space : nowrap; } .tiles.list.xxs  .tile-image span { font-size : 24px; line-height : 36px; } .tiles.list.xxs  .tile-subtitle { font-size : 10px; line-height : 10px; }
.tiles.list.xxxs .tile-image { height :  26px; width :  26px; } .tiles.list.xxxs .tile-details { margin :  6px 10px; width : calc(100%  - 46px); display : unset; } .tiles.list.xxxs .tile-title { font-size : 12px; line-height : 14px; text-overflow : ellipsis; white-space : nowrap; font-weight : normal; } .tiles.list.xxxs .tile-image span { font-size : 20px; line-height : 26px; font-weight : 400; } .tiles.list.xxxs .tile-subtitle { font-size : 10px; line-height : 10px; }

.tiles.wide > .tile,
.tiles.list > .tile {
    display : flex;
}
.tiles.reverse > .tile { flex-direction: reverse; }
.tiles.wide.reverse > .tile { flex-direction: row-reverse; }
.tiles.no-title-wrap .tile-title {
    text-overflow: ellipsis;
    white-space : nowrap;
}

.tile-image {
    background : var(--color-gray-400);
    color : black;
    text-align: center;
}

.tiles > .selected .tile-image { background : var(--color-selected-border); }
.tile-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow : hidden;
    margin: 20px 30px 20px;
    gap: 10px;
}
.tiles.list .tile-details {
    font-size : 12px;
    gap : 3px;
    line-height : 14px;
    overflow : hidden;
    white-space : nowrap;
    text-overflow: ellipsis;
}
.tile-title {
    font-weight: 800;
    font-size: 16px;
    line-height: 18px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    overflow : hidden;
}
.tile-subtitle {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    flex: none;
    margin-bottom : 3px;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    overflow : hidden;
}
.tile-subtitle p {
    margin : 0px;
    padding : 0px;
}
.tile-data {
    display : flex;
    flex-direction: column;
    font-size : 12px;
    line-height : 12px;
    gap : var(--spacer-xxxs);
    margin-top : var(--spacer-xxxs);
    order : 2;
}
.tile-data > div > .ms {
    font-size : 12px;
    line-height : 12px;
    margin-right : var(--spacer-xxs);
}
.tile-description p {
    margin : 0px !important;
    padding : 0px !important;
}
.tile-link {
    color : #006EAF;
    cursor : pointer;
    flex: none;
    order: 2;
    align-self: stretch;
    flex-grow: 0;
}
.tile-status {
    width : 26px;
}
.tile-status-label {
    color: white;
    display: inline-block;
    font-size: 12px;
    position: relative;
    top: 37px;
    left: -35px;
    text-align: center;
    text-overflow: ellipsis;
    transform: rotate(90deg);
    width: 96px;
}
.tiles.wide.s .tile-title { 
    font-size : 14px;
    font-weight : 700;
}
.tiles.wide.s .tile-title,
.tiles.wide.s .tile-subtitle {
    overflow : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tiles.wide.xxl .tile-data { gap : var(--spacer-xs); }

.tiles-group {
    border-bottom : 2px solid black;
    padding : 30px 30px 10px;
    width : 100%;
}
.tiles-group:first-of-type { padding-top : 0px; }
.tiles-group-title {
    font-weight : 800;
    font-size : 20px;
}
.tiles-group-subtitle {
    padding-top : 4px;
}

.surface-level-2 .tiles-group { border-color : rgba(60, 60, 60, 0.25); }


/*  Tree BOM */
/*  Used by Explorer and Product Configuator */
/* ----------------------------------------------------------------------------- */
.bom-view-selector {
    margin-left : 8px;
}
#bom-search-input {
    border : none !important;
    box-shadow : none !important;
    font-size : 14px;
    padding : 4px 10px;
    width: 100px;
}
.bom-tree-nav {
    cursor: pointer;
    font-size : 22px;
    /* line-height : 4px; */
    padding-right: 9px;
    width: 16px;
    position : relative;
    top : 5px;
}
.bom-tree-nav:before { content: '\e5cf'; }
.bom-tree-nav.collapsed:before { content: '\e5cc'; }
.bom-first-col {
    white-space: nowrap;
    overflow : hidden;
    text-overflow: ellipsis;
}
.bom-tree-color {
    width : 12px;
    background : transparent;
}
#bom-tree.no-colors .bom-tree-color {
    width : 0px;
}
.bom-tree-number {
    min-width: 28px;
    padding : 5px;
    font-weight: bold;
    display: inline-block;
}
.bom-tree-title {
    padding : 5px;
}
.bom-quantity {
    font-weight : bold;
    text-align : right;
}

.bom-level-1,  .bom-level-1 >  .bom-first-col { background : #ffffff; }
.bom-level-2,  .bom-level-2 >  .bom-first-col { background : #f8f8f8; }
.bom-level-3,  .bom-level-3 >  .bom-first-col { background : #f1f1f1; }
.bom-level-4,  .bom-level-4 >  .bom-first-col { background : #e8e8e8; }
.bom-level-5,  .bom-level-5 >  .bom-first-col { background : #e1e1e1; }
.bom-level-6,  .bom-level-6 >  .bom-first-col { background : #d8d8d8; }
.bom-level-7,  .bom-level-7 >  .bom-first-col { background : #d1d1d1; }
.bom-level-8,  .bom-level-8 >  .bom-first-col { background : #c8c8c8; }
.bom-level-9,  .bom-level-9 >  .bom-first-col { background : #c1c1c1; }
.bom-level-10, .bom-level-10 > .bom-first-col { background : #b8b8b8; }

.bom-level-1  .bom-tree-color { margin-right :  30px; }
.bom-level-2  .bom-tree-color { margin-right :  55px; }
.bom-level-3  .bom-tree-color { margin-right :  80px; }
.bom-level-4  .bom-tree-color { margin-right : 105px; }
.bom-level-5  .bom-tree-color { margin-right : 130px; }
.bom-level-6  .bom-tree-color { margin-right : 155px; }
.bom-level-7  .bom-tree-color { margin-right : 180px; }
.bom-level-8  .bom-tree-color { margin-right : 205px; }
.bom-level-9  .bom-tree-color { margin-right : 230px; }
.bom-level-10 .bom-tree-color { margin-right : 255px; }

tr.node.bom-level-1 .bom-tree-color  { margin-right :   5px; }
tr.node.bom-level-2 .bom-tree-color  { margin-right :  30px; }
tr.node.bom-level-3 .bom-tree-color  { margin-right :  55px; }
tr.node.bom-level-4 .bom-tree-color  { margin-right :  80px; }
tr.node.bom-level-5 .bom-tree-color  { margin-right : 105px; }
tr.node.bom-level-6 .bom-tree-color  { margin-right : 130px; }
tr.node.bom-level-7 .bom-tree-color  { margin-right : 155px; }
tr.node.bom-level-8 .bom-tree-color  { margin-right : 180px; }
tr.node.bom-level-9 .bom-tree-color  { margin-right : 205px; }
tr.node.bom-level-10 .bom-tree-color { margin-right : 230px; }


/*  Flat BOM */
/*  Used by Design Review and Product Portfolio */
/* ----------------------------------------------------------------------------- */
.bom-item {
    border-top : 1px solid transparent;
    border-bottom : 1px solid var(--color-gray-100);
    border-left : 1px solid transparent;
    border-right : 1px solid transparent;
    cursor : pointer;
    display : flex;
    padding : 4px 15px;
}
.bom-item:last-of-type {
    border-bottom : none;
}
.bom-item:hover {
    background-color : var(--color-hover) !important;
}
.bom-item.selected {
    background-color : var(--color-selected);
    border : 1px solid var(--color-selected-border);
}
.bom-item-title {
    line-height : 26px;
    overflow : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width : calc(100% - 90px);
}
.bom-item-qty {
    line-height : 26px;
    text-align : right;
    width : 50px;
}
.bom-item.unread { font-weight : bold; }
.bom-item-actions > span {
    border: 1px solid #808080;
    border-radius : 2px;
    color: #3C3C3C;
    display : none;
    float: right;
    line-height: 24px;
    margin-left: var(--spacer-s);
    text-align: center;
}
.bom-item:hover .bom-item-actions > span {
    display : block;
}
.no-actions .bom-item-title { width : calc(100% - 50px); }



/*  THUMBNAILS */
/* ----------------------------------------------------------------------------- */
.thumbnail-square-xl    { height:    128px; width: 128px; }
.thumbnail-square-l     { height:     96px; width:  96px; }
.thumbnail-square-m     { height:     64px; width:  64px; }
.thumbnail-square-s     { height:     48px; width:  48px; }
.thumbnail-square-xs    { height:     32px; width:  32px; }
.thumbnail-square-xxs   { height:     24px; width:  24px; }
.thumbnail-43-xl        { height:  127.5px; width: 170px; }
.thumbnail-43-l         { height:     96px; width: 128px; }
.thumbnail-43-m         { height:  63.75px; width:  85px; }
.thumbnail-43-s         { height:     48px; width:  64px; }
.thumbnail-43-xs        { height:   31.5px; width:  42px; }
.thumbnail-43-xxs       { height:     24px; width:  32px; }
.thumbnail-wide-xl      { height: 128.25px; width: 228px; }
.thumbnail-wide-l       { height:  96.19px; width: 171px; }
.thumbnail-wide-m       { height:  64.12px; width: 114px; }
.thumbnail-wide-s       { height:  48.38px; width:  86px; }
.thumbnail-wide-xs      { height:  32.06px; width:  57px; }
.thumbnail-wide-xxs     { height:  24.19px; width:  43px; }
.thumbnail-32-xl        { height: 126.67px; width: 190px; }
.thumbnail-32-l         { height:  94.67px; width: 142px; }
.thumbnail-32-m         { height:  63.33px; width:  95px; }
.thumbnail-32-s         { height:     48px; width:  72px; }
.thumbnail-32-xs        { height:     32px; width:  48px; }
.thumbnail-32-xxs       { height:     24px; width:  36px; }



/*  HEADER */
/* ----------------------------------------------------------------------------- */
#header {
    background : white;
    display : flex;
    height : 28px;
    padding : 20px 56px 20px; 
    position : absolute;
    top : 0px;
    right : 0px;
    left : 0px;
}
#header-logo {
    background-image: url(../../images/autodesk-logo-black.png);
    background-size: 66px;
    cursor : pointer;
    float: left;
    height: 28px;
    width: 48px;
    position: absolute;
    top: 18px;
    left: 8px;
}
#header-title {
    cursor : pointer;
    font-size : 22px;
    font-weight : 800;
    line-height : 28px;
    margin-left : 10px;
}
#header-subtitle {
    border-left : 1px solid black;
    cursor : pointer;
    font-size : 20px;
    line-height : 28px;
    margin-left : 24px;
    padding-left : 24px;
}
#header-descriptor {
    font-size : 18px;
    font-weight : 700;
    line-height : 16px;
}
#header-description {
    font-size : 12px;
    line-height : 18px;
}
#header-toolbar {
    display : flex;
    position: absolute;
    top: 13px;
    right: 32px;
    height: 42px;
}
#header-toolbar select {
    height: 38px;
    padding: 0px 16px;
}
#header-toolbar .material-symbols-sharp,
#header-toolbar .ms {
    font-weight : 200;
}
#header-search {
    border-bottom: 1px solid var(--color-gray-500);
    background: var(--color-gray-100);
    font-size : 16px;
    height : 30px;
    padding : 6px 16px 2px 42px;
    width : 150px;
}
#header-search-icon {
    position : relative;
    left : 34px;
    top : 8px;
}
#header-avatar {
    background : rgb(33, 33, 33);
    display: inline-block;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-left : var(--spacer-xl);
}
#header .button {
    margin-top : 2px;
}
#header.dark {
    background : black;
    border-color : black;
    color : white;
}
#header.dark #header-logo {
    background-image: url(../../images/autodesk-logo-white.png);
}
#header.dark #header-subtitle {
    border-color : white;
}
#header.dark #header-toolbar {
    background : black;
}
#header.dark .button {
    background : none;
    border-color : white;
    color : white;
}
#header.dark .button:hover {
    color : var(--color-blue-500) ;
    border-color : var(--color-blue-500);
    box-shadow : none;
}
#header.dark .button.disabled,
#header.dark .button.disabled:hover {
    border-color : rgba(128, 128, 128, 0.5);
    color : #808080;
}
#header.dark .button.default {
    background : #0696D7;
    border-color : transparent;
}
#header.dark .button.default:hover {
    color : white;
}
#header.dark #header-search {
    background : var(--color-gray-900);
    border-color : white;
    color : white;
}


@media (max-width : 1440px)  {

    #header-toolbar .button.with-icon {
        min-width : unset;
        max-width : 22px;
        overflow : hidden;
    }

    #header-toolbar .button.with-icon::before {
        margin-right : 20px;
    }

}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1900px)  {

    #header-toolbar .button.with-icon {
        min-width : unset;
    }
    #header-toolbar .button.with-icon > span {
        display : none;
    }
    #header-toolbar .button.with-icon > span.material-symbols-sharp {
        display : block;
        margin : 0px;
    }


}




/*  SCREENS */
/* ----------------------------------------------------------------------------- */
.screen {
    padding : 0px;
    position : absolute;
    top : 68px;
    right : 0px;
    bottom : 0px;
    left : 0px;
}
.screen > div {
    position : absolute;
    transition: all ease 0.25s;
}
.screen-divider {
    background : var(--color-gray-100);
    position : absolute;
}
.screen-divider.vertical {
    top : 0px;
    bottom : 0px;
    width : 4px;
}
.screen-divider.horizontal {
    left : 0px;
    right : 0px;
    height : 4px;
}



/*  PANELS */
/* ----------------------------------------------------------------------------- */
.panel-header {
    border-bottom : 2px solid black;
    display : flex;
    justify-content: space-between;
}
.panel.with-subtitle .panel-header {
    flex-direction: column;
}
.panel.with-subtitle .panel-toolbar {
    position : absolute;
    top : 12px;
    right : 0px;
}
.panel-subtitle { 
    height : 20px; 
    padding : 0px 14px;
}
.panel-subtitle > span {
    border-left : 2px solid black;
    padding : 0px 10px;
}
.panel-subtitle > span:first-of-type {
    border-left : none;
    padding-left : 0px;
}
.panel-title {
    font-size : 18px;
    font-weight : 800;
    height : 18px;
    line-height : 18px;
    overflow : hidden;
    white-space: nowrap;
    padding : 10px 14px 20px;
    text-overflow : ellipsis;
}
.panel-title.centered {
    text-align : center;
    width : 100%;
}



.panel-toolbar {
    display : flex;
    padding-right : 14px;
}
.panel-toolbar > .button.material-symbols-sharp {
    line-height: 36px;
    width: 36px;
    height: 36px;
    min-width : auto;
    padding: 0px;
    margin: 0px 0px 0px 8px;
    text-align : center;
}
.panel-toolbar > select {
    font-size : 14px;
    font-weight : 600;
    height: 38px;
    line-height: 38px;
    margin-left: var(--spacer-s);
    padding: 0px 8px;
}

.panel-toolbar-spacer {
    width: 1px;
    background: #808080;
    margin-left: var(--spacer-s);
    height: 38px;
}

.panel-content {
    overflow-y : auto;
    position : absolute;
    top : 56px;
    right : 0px;
    bottom : 0px;
    left : 0px;
}
.panel-content.tab {
    display : none;
}.panel.with-toggles .panel-content {
    top : 90px;
}.panel.with-subtitle.with-toggles .panel-content {
    top : 120px;
}
.panel-content.with-toolbar {
    overflow : hidden;
}
.panel-content-toolbar {
    position: absolute;
    bottom : 4px;
    right : 4px;
}
.panel-content-data {
    overflow-y : auto;
    position: absolute;
    top : 0px;
    right : 0px;
    bottom : 56px;
    left : 0px;
}
.panel-content-empty {
    color: var(--color-gray-800);
    display : none;
    font-style: italic;
    padding: 100px 20% 0%;
    text-align: center;
}

/* .processing {
    margin: 0 auto;
    left : calc(50% - 50px);
    text-align: center;
    position : absolute;
    top : calc(50% - 12px);
    width: 100px;
    z-index : 20;
}
.processing > div {
    background-color: var(--color-blue-500);
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bounced 1.4s infinite ease-in-out both;
    animation: bounce 1.4s infinite ease-in-out both;
} */
/* .panel-header-main {
    font-size: 24px;
    font-weight: 800;
    line-height: 24px;
    margin-top: var(--spacer-xs);
} */
/* .no-subheader > .panel-header-main { margin-top : 0px; } */

/* ENABLE PANEL TOGGLES */
.panel.with-toggles .panel-header {
    border-bottom : none;
}
.panel-toggles {
    border: 1px solid var(--color-gray-200);
    border-radius: 3px;
    display: flex;
}
.panel-toggles > div {
    border-right : 1px solid var(--color-gray-200);
    cursor: pointer;
    flex-grow: 1;
    line-height: 32px;
    padding : 0px 8px;
    text-align: center;
    width: 100%;
}
.panel-toggles > div:first-of-type { border-radius: 3px 0px 0px 3px; }
.panel-toggles > div:last-of-type { 
    border-radius: 0px 3px 3px 0px; 
    border-right : none;
}
.panel-toggles > div:hover { font-weight : bold;}
.panel-toggles > div.selected {
    background : black;
    color : white;
    font-weight : bold;
}



/*  NO DATA */
/* ----------------------------------------------------------------------------- */
.no-data {
    background: transparent !important;
    color : var(--color-blue-500);
    cursor: unset !important;
    display : flex;
    flex-direction: column;
    height : unset !important;
    text-align : center;
}
.no-data:hover {
    background : transparent !important;
}
.no-data-icon {
    font-size : 68px;
    padding : 10px 10px 0px;
}
.no-data-text {
    padding : 0px 10px 10px 10px;
}


/*  TABS */
/* ----------------------------------------------------------------------------- */
.tabs {
    border-bottom : 2px solid black;
    display : flex;
    font-size : 18px;
    line-height : 18px;
    padding : 10px 0px 0px;
}
.tabs > div {
    border-bottom : 4px solid transparent;
    cursor : pointer;
    flex-grow : 1;
    flex-basis: 0;
    height : 34px;
    overflow : hidden;
    text-align : center;
    text-overflow: ellipsis;
    transition : all .25s ease;
    white-space : nowrap;
}
.tabs > .selected {
    border-color : var(--color-blue-500);
    font-weight : 800;
}
.tabs.dark > .selected {
    border-color : black;
}



/*  DASHBOARD */
/*  (Projects Dashboard, Tenant Insighes Reports Dashboard) */
/* ----------------------------------------------------------------------------- */
.dashboard {
    align-content: flex-start;
    display : flex;
    flex-wrap: wrap;
    gap : 20px;
    overflow-y : auto; 
    padding : 40px;
    position : absolute;
    top : 68px;
    right : 0px;
    bottom : 0px;
    left : 0px;
}
.dashboard > div {
    background : white;
    border-radius : 4px;
}
.dashboard > div > .title {
    font-size : 18px;
    font-weight : 800;
    padding : 0px 0px 20px;
    text-align : center;
}




/*  FOOTER */
/* ----------------------------------------------------------------------------- */
#footer {
    position : absolute;
    right : 0px;
    bottom : 0px;
    left : 0px;
    padding : 20px 40px;
}



/*  BUTTONS */
/* ----------------------------------------------------------------------------- */
div.button {
    background: #fff;
    border-radius : 2px;
    border: 1px solid #808080;
    color: #3C3C3C;
    cursor : pointer;
    float : right;
    font-weight : 600;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-left : var(--spacer-s);
    min-width : 80px;
    padding : 8px 16px;
    text-align : center;
    white-space: nowrap;
}
div.button.default {
    background : #0696D7;
    border-color : transparent;
    color : white;
}
div.button:hover {
    box-shadow:  0 0 0 3px #e3e3e3;
}
div.button.disabled {
    border-color : rgba(128, 128, 128, 0.5);
    color : #808080;
    cursor : not-allowed;
}
div.button.default.disabled {
    color : #ffffff;
    opacity : 0.4;
}
div.button.disabled:hover {
    box-shadow : none !important;
}
div.button.material-symbols-sharp {
    font-weight : 400;
    padding : 0px;
}
.button.icon {
    font-family: 'Material Symbols Sharp';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-weight: 300;
    padding: 0px;
    min-width: auto;
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 24px;
}
.button.with-icon { display : flex; }
.button.with-icon > input {
    border-color : transparent;
}
.button.with-icon::before {
    font-size : 24px;
    font-weight : 200;
    line-height : 20px; 
}
.button > span {
    overflow : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/*  PANEL ELEMENTS (MBOM Editor) */
/* ----------------------------------------------------------------------------- */
.panel-nav {
    border-left : 2px solid transparent;
    cursor : pointer;
    font-size : 14px;
    font-weight : 700;
    line-height : 20px;
    margin-bottom : var(--spacer-m);
}
.panel-nav:hover {
    color : var(--color-blue-500);
}
.panel-nav.selected {
    color : var(--color-blue-500);
    border-color : var(--color-blue-500);
}
/* .panel-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 18px;
} */
/* .panel-contents {
    overflow-y: auto;
    position: absolute;
    top: 58px;
    left: 28px;
    right: 28px;
    bottom: 0px;
}
.panel-left {
    padding : 28px 0px 28px 28px;
    position : absolute;
    top : 0px;
    bottom : 0px;
    left : 0px;
    overflow-y : auto;
}
.panel-left.nav {
    border-right : 1px solid var(--color-gray-100);
    width : 250px;
}

.panel-right {
    overflow-y : auto;
    padding: 28px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 280px;
} */



/*  DIALOGS */
/* ----------------------------------------------------------------------------- */
#overlay, .overlay {
    background : rgba(0,0,0,0.5);
    display : none;
    position : absolute;
    top : 0px;
    right : 0px;
    bottom : 0px;
    left : 0px;
    z-index : 9;
    transition : transform .25s ease;
}
#overlay .processing > div {
    background : white;
} 
.dialog {
    background : #fff;
    border-radius : 4px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
    display: none;
    position : absolute;
    transition : transform .25s ease;
    z-index : 10;
}
.dialog > div { background : white; }
.dialog-arrow-up {
    background : none !important;
    width: 0; 
    height: 0; 
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position : relative;
}
.dialog-header {
    border-bottom : 1px solid var(--color-gray-200);
    border-radius : 4px 4px 0px 0px;
    display : flex;
    font-size : 22px;
    font-weight : 800;
    height : 22px;
    padding : 24px 40px 24px;
    position : absolute;
    top : 0px;
    right : 0px;
    left : 0px;
    white-space : nowrap;
}
.dialog-subheader {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 14px;
}
.dialog-close {
    color : #0a131c;
    cursor : pointer;
    font-size : 32px !important;
    position : absolute;
    top : 18px;
    right : 36px;
}
.dialog-content {
    position : absolute;
    top : 71px;
    right : 0px;
    bottom : 98px;
    left : 0px;
    overflow-y : auto;
    padding : 30px 40px;
}
.dialog.no-footer .dialog-content {
    bottom : 0px;
}
.dialog-footer {
    border-radius : 0px 0px 4px 4px;
    height: 38px;
    padding : 30px 40px;
    position : absolute;
    right : 0px;
    bottom : 0px;
    left : 0px;
}
.dialog-footer > div {
    float : right;
    margin-left : 10px;
}
.dialog-footer.single-button > div {
    float : none;
    margin : 0px;
}



/*  PROGRESS INDICATOR */
/* ----------------------------------------------------------------------------- */
.processing {
    position : absolute;
    top : calc(50% - 15px);
    left:calc(50% - 38px);
    z-index : 9;
}
.processing > div {
    background-color: var(--color-blue-500);
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bounced 1.4s infinite ease-in-out both;
    animation: bounce 1.4s infinite ease-in-out both;
}
.surface-level-2 > .processing > div { background-color : black; }
.bounce1 {
    -webkit-animation-delay: -.32s !important;
    animation-delay: -.32s  !important;
}
.bounce2 {
    -webkit-animation-delay: -.16s  !important;
    animation-delay: -.16s  !important;
}
@-webkit-keyframes bounce{
   0%,80%,to{
       -webkit-transform:scale(0)
   }40%{
       -webkit-transform:scale(1)
   }
}
@keyframes bounce{
    0%,80%,to{
        -webkit-transform:scale(0);
        transform:scale(0)
    } 40% {
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}



/*  ERROR MESSAGE */
/* ----------------------------------------------------------------------------- */
#error {
    background : var(--color-status-red);
    border : 12px solid var(--color-status-red-bright);
    color : white;
    cursor : pointer;
    display : none;
    padding: 20px 40px 20px 100px;
    position : absolute;
    right : 40px;
    bottom : 40px;
    left : 40px;
    z-index: 100;
}
#error::after {
    content: '\e82a';
    font: normal normal normal 14px/1 'Material Symbols Sharp';
    font-size : 18px;
    margin-right : 8px;
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 40px;
}
.error-title {
    font-weight : 800;
    font-size : 20px;
}
.error-message {
    font-size : 16px;
    padding : 4px 0px 8px 0px;
}
.error-footer {
    font-size : 12px;
}