/*  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      : 0px;
    bottom   : 0px;
    left     : 0px;
}
.split-right {
    position : absolute;
    top      : 0px;
    right    : 0px;
    bottom   : 0px;
}
.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% - 710px); overflow-y : auto; }
.split.left-350 > .split-divider { left : 350px; }

.split-left.padding-80   { border-width :  80px  80px  80px  80px; }
.split-left.padding-100  { border-width : 100px 100px 100px 100px; }
.split-right.padding-80  { border-width :  80px  80px  80px  80px; }
.split-right.padding-100 { border-width : 100px 100px 100px 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; }



/*  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; }



/*  TILES */
/* ----------------------------------------------------------------------------- */
.tiles {
    align-content   : flex-start;
    display         : flex;
    flex-wrap       : wrap;
    justify-content : normal;
    overflow-y      : auto;
}
.tiles.list {
    /* flex-direction : column; */
    flex-flow : wrap;
}
.tile { 
    border      : 1px solid transparent;
    cursor      : pointer; 
    overflow    : hidden;
}

.tiles > .tile:hover .tile-image { opacity : 0.8; }

.tiles.xxl        { gap : var(--spacer-xl); }
.tiles.xl         { gap : var(--spacer-l); }
.tiles.l          { gap : var(--spacer-l); }
.tiles.m          { gap : var(--spacer-l); }
.tiles.s          { gap : var(--spacer-s); }
.tiles.xs         { gap : var(--spacer-xs); }
.tiles.xxs        { gap : var(--spacer-xxs); }
.tiles.list.xxl   { gap : var(--spacer-s); }
.tiles.list.xl    { gap : var(--spacer-s); }
.tiles.list.l     { gap : var(--spacer-xs); }
.tiles.list.m     { gap : var(--spacer-xs); }
.tiles.list.s     { gap : var(--spacer-xs); }
.tiles.list.xs    { gap : var(--spacer-xxxs); }
.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.wide.s     { gap : var(--spacer-s); padding-top : var(--spacer-s); }
.tiles.wide.m     { gap : var(--spacer-s); }

.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.xs  > .tile { height : 200px; width :  86px; }
.tiles.xxs  > .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.xs  .tile-image { height :  48.38px; width :  86px; }
.tiles.xxs .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 : 500px; }
.tiles.wide.s   > .tile { height :  64px; width : 350px; }
.tiles.wide.xs  > .tile { height :  48px; width : 300px; }

.tiles.list.xxl   > .tile { height : 96px; width : calc(100% - 2px); }
.tiles.list.xl    > .tile { height : 96px; width : calc(100% - 2px); }
.tiles.list.l     > .tile { height : 96px; width : calc(100% - 2px); }
.tiles.list.m     > .tile { height : 64px; width : calc(100% - 2px); }
.tiles.list.s     > .tile { height : 64px; width : calc(100% - 2px); }
.tiles.list.xs    > .tile { height : 48px; width : calc(100% - 2px); }
.tiles.list.xxs   > .tile { height : 36px; width : calc(100% - 2px); }
.tiles.list.xxxs  > .tile { height : 26px; width : calc(100% - 2px); }
.tiles.list.files > .tile { height : 58px; width : calc(100% - 2px); }

.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.l   .tile-details { width : calc(100% - 188px); }
.tiles.wide.m   .tile-image { height :  96px; width :  96px; } .tiles.wide.m   .tile-details { width : calc(100% - 156px); } .tiles.wide.m .tile-image > span { font-size : 54px; line-height : 96px; }
.tiles.wide.s   .tile-image { height :  64px; width :  64px; } .tiles.wide.s   .tile-details { gap : 2px; margin : 16px 20px 12px; width : calc(100% -  102px); }

.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-toggle {
    text-align  : center;
    width       : 30px;
}
.tile-toggle:hover {
    color : var(--color-blue-500);
}
.tile.expanded > .tile-toggle::before {
    content : '\e5cf';
}
.tiles.xxl .tile-toggle { line-height : 200px; }
.tiles.xl  .tile-toggle { line-height : 200px; }
.tiles.l   .tile-toggle { line-height : 128px; }
.tiles.m   .tile-toggle { line-height :  96px; }
.tiles.s   .tile-toggle { line-height :  64px; }
.tiles.xs  .tile-toggle { line-height :  64px; }
.tiles.xxs .tile-toggle { line-height :  64px; }

.tiles.list.xxl  .tile-toggle { line-height : 96px; }
.tiles.list.xl   .tile-toggle { line-height : 96px; }
.tiles.list.l    .tile-toggle { line-height : 96px; }
.tiles.list.m    .tile-toggle { line-height : 64px; }
.tiles.list.s    .tile-toggle { line-height : 64px; }
.tiles.list.xs   .tile-toggle { line-height : 48px; }
.tiles.list.xxs  .tile-toggle { line-height : 36px; }
.tiles.list.xxxs .tile-toggle { line-height : 26px; }

.tiles.list.xxl .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.xl  .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.l   .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.m   .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.s   .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.xs  .tile-details { gap : var(--spacer-xxxs); }
.tiles.list.xxs .tile-details { gap : var(--spacer-xxxs); }


.tile-image {
    text-align: center;
}
.tile-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow : hidden;
    margin: 20px 30px 18px;
    gap: 10px;
}
.tiles.list .tile-details {
    font-size : 12px;
    line-height : 14px;
    overflow : hidden;
    white-space : nowrap;
    text-overflow: ellipsis;
}
.tile-title {
    align-self  : stretch;
    flex        : none;
    flex-grow   : 0;
    font-weight : bold;
    font-size   : 16px;
    line-height : 18px;
    order       : 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); }


.surface-level-1 > .tile, .surface-level-1 > .tiles > .tile { background : var(--color-surface-level-3); border-color : var(--color-surface-level-1); }
.surface-level-2 > .tile, .surface-level-2 > .tiles > .tile { background : var(--color-surface-level-4); border-color : var(--color-surface-level-2); }
 .dark-theme .surface-level-3 > .tile,  .dark-theme .surface-level-3 > .tiles > .tile { background : var(--color-surface-level-1); border-color : var(--color-surface-level-3); }
.black-theme .surface-level-3 > .tile, .black-theme .surface-level-3 > .tiles > .tile { background : var(--color-surface-level-1); border-color : var(--color-surface-level-3); }
.light-theme .surface-level-3 > .tile, .light-theme .surface-level-3 > .tiles > .tile { background : var(--color-surface-level-4); border-color : var(--color-surface-level-3); }
.surface-level-4 > .tile, .surface-level-4 > .tiles > .tile  { background : var(--color-surface-level-1); border-color : var(--color-surface-level-4); }
.surface-level-5 > .tile, .surface-level-5 > .tiles > .tile  { background : var(--color-surface-level-1); border-color : var(--color-surface-level-5); }

.surface-level-1 > .tile > .tile-image, .surface-level-1 > .tiles > .tile > .tile-image { background : var(--color-surface-level-4); }
.surface-level-2 > .tile > .tile-image, .surface-level-2 > .tiles > .tile > .tile-image  { background : var(--color-surface-level-5); }
 .dark-theme .surface-level-3 .tile-image,  .dark-theme .surface-level-3 > .tiles > .tile > .tile-image { background : var(--color-surface-level-2); }
.black-theme .surface-level-3 .tile-image, .black-theme .surface-level-3 > .tiles > .tile > .tile-image { background : var(--color-surface-level-2); }
.light-theme .surface-level-3 .tile-image, .light-theme .surface-level-3 > .tiles > .tile > .tile-image { background : var(--color-surface-level-5); }
.surface-level-4 > .tile > .tile-image, .surface-level-4 > .tiles > .tile > .tile-image  { background : var(--color-surface-level-2); }
.surface-level-5 > .tile > .tile-image, .surface-level-5 > .tiles > .tile > .tile-image  { background : var(--color-surface-level-2); }

.tile:hover { 
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-hover-border) !important;
 }
 .tile:hover  > .tile-image { 
    background-color : var(--color-hover-image) !important;
 }
 .tile.selected { 
    background-color : var(--color-selected-background) !important;
 }
 .tile.selected  > .tile-image { 
    background-color : var(--color-selected-image) !important;
 }

.tiles-group {
    border-bottom   : 1px solid transparent;
    padding         : 36px 12px 12px;
    width           : 100%;
}
.tiles-group.first { padding-top : 16px; }
.tiles-group-title {
    font-weight : 800;
    font-size   : 20px;
}
.tiles-group-subtitle {
    padding-top : 6px;
}

@keyframes highlight {
    from { background  : var(--color-yellow-500); } 
      to { background  : var(--color-yellow-200); }
}
.highlight {
   animation: highlight 1s ease;
}


.surface-level-1 .tiles-group { border-color : var(--color-surface-level-3); }
.surface-level-2 .tiles-group { border-color : var(--color-surface-level-4); }
.surface-level-3 .tiles-group { border-color : var(--color-surface-level-5); }
.surface-level-4 .tiles-group { border-color : var(--color-surface-level-1); }
.surface-level-5 .tiles-group { border-color : var(--color-surface-level-2); }


/*  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 {
    display     : flex;
    height      : 28px;
    padding     : 20px 56px 20px; 
    position    : absolute;
    top         : 0px;
    right       : 0px;
    left        : 0px;
}
#header-logo {
    background-image    : url(../../images/autodesk-logo-white.png);
    background-size     : 66px;
    cursor              : pointer;
    height              : 28px;
    width               : 48px;
    position            : absolute;
    top                 : 18px;
    left                : 8px;
}
.light-theme #header-logo {
    background-image: url(../../images/autodesk-logo-black.png);
}
#header-title {
    cursor      : pointer;
    font-size   : 22px;
    font-weight : 800;
    line-height : 28px;
    margin-left : 10px;
}
#header-subtitle {
    border-left     : 1px solid var(--color-font);
    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;
    gap         : var(--spacer-xs);
    position    : absolute;
    top         : 13px;
    right       : 32px;
    height      : 42px;
}
#header-toolbar select {
    height  : 38px;
    padding : 0px 16px;
}
#header-search {
    background    : var(--color-surface-level-3);
    border-bottom : 1px solid var(--color-surface-level-5);
    font-size     : 14px;
    height        : 30px;
    line-height   : 30px;
    margin-top    : 3px;
    padding       : 3px 16px 3px 42px;
    width         : 140px;
}
#header-search-icon {
    font-weight : 200;
    position    : relative;
    left        : 42px;
    top         : 8px;
}
#header .button {
    margin-top : 2px;
}
#header-avatar {
    background    : var(--color-surface-level-4);
    display       : inline-block;
    border-radius : 50%;
    margin-left   : var(--spacer-xl);
    height        : 42px;
    width         : 42px;
}



#header.dark #header-logo {
    background-image: url(../../images/autodesk-logo-white.png);
}
#header.dark #header-subtitle {
    border-color : white;
}
.light-theme #header.dark #header-search {
    background   : var(--color-gray-900);
    border-color : white;
}
.dark-theme #header-search {
    border-color : white;
}

 .dark-theme #header.dark { background : var(--color-surface-level-5); }
.black-theme #header.dark { background : var(--color-surface-level-5); }
.light-theme #header.dark { background : black; color : white; }

 .dark-theme #header.dark .button { background : var(--color-surface-level-3); border-color : var(--color-surface-level-3); }
.black-theme #header.dark .button { background : var(--color-surface-level-3); border-color : var(--color-surface-level-3); }
.light-theme #header.dark .button { background : none; color : white; }

#header.dark .button:hover { box-shadow : none; }

 .dark-theme #header.dark .button:hover { background : var(--color-surface-level-4); border-color : var(--color-surface-level-4); }
.black-theme #header.dark .button:hover { background : var(--color-surface-level-4); border-color : var(--color-surface-level-4); }
.light-theme #header.dark .button:hover { border-color : var(--color-blue-500);  color : var(--color-blue-500); }

#header.dark .button.default { 
    background   : var(--color-blue-500) ; 
    border-color : var(--color-blue-500); 
    color        : white; 
}
#header.dark .button.default:hover { 
    background   : var(--color-blue-600);  
    border-color : var(--color-blue-600); 
    color        : white; 
}

#header.dark .button.disabled,
#header.dark .button.disabled:hover {
    border-color : rgba(128, 128, 128, 0.5);
    color : #808080;
}





@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.2s;
}
.screen-divider {
    background : var(--color-surface-level-2);
    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 var(--color-surface-level-5);
    display         : flex;
    gap             : var(--spacer-s);
    justify-content : space-between;
}
 .dark-theme .panel-header { border-color : var(--color-surface-level-4); }
.black-theme .panel-header { border-color : var(--color-surface-level-4); }
.dark-theme .surface-level-1  > .panel-header { border-color : var(--color-surface-level-5); }
.dark-theme .surface-level-2  > .panel-header { border-color : var(--color-surface-level-5); }
.dark-theme .surface-level-3  > .panel-header { border-color : var(--color-surface-level-5); }
.dark-theme .surface-level-4  > .panel-header { border-color : var(--color-surface-level-1); }
.dark-theme .surface-level-5  > .panel-header { border-color : var(--color-surface-level-1); }
.black-theme .surface-level-1 > .panel-header { border-color : var(--color-surface-level-5); }
.black-theme .surface-level-2 > .panel-header { border-color : var(--color-surface-level-5); }
.black-theme .surface-level-3 > .panel-header { border-color : var(--color-surface-level-5); }
.black-theme .surface-level-4 > .panel-header { border-color : var(--color-surface-level-1); }
.black-theme .surface-level-5 > .panel-header { border-color : var(--color-surface-level-1); }
.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 var(--color-font);
    padding     : 0px 10px;
}
.panel-subtitle > span:first-of-type {
    border-left  : none;
    padding-left : 0px;
}
.panel-title {
    flex-grow       : 1;
    font-size       : 18px;
    font-weight     : 800;
    height          : 18px;
    line-height     : 18px;
    overflow        : hidden;
    padding         : 10px 14px 20px;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
.centered > .panel-header > .panel-title {
    text-align : center;
    width : 100%;
}
.panel-header.with-toggle {
    cursor : pointer;
}
.panel-header.with-toggle > .panel-title {
    padding-left : 0px;
}
.panel-header.collapsed { border-color : transparent;}
.panel-header-toggle {
    padding : 7px 0px 0px 10px;
}



.panel-toolbar {
    display : flex;
    gap : var(--spacer-xs);
    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;
    padding: 0px 8px;
}

.panel-toolbar-spacer {
    width       : 1px;
    background  : var(--color-font);
    margin      : 0px var(--spacer-s);
    height      : 38px;
}
.dark-theme.surface-level-1  .panel-toolbar-spacer {  background : var(--color-surface-level-4); }
.dark-theme.surface-level-2  .panel-toolbar-spacer {  background : var(--color-surface-level-4); }
.dark-theme.surface-level-3  .panel-toolbar-spacer {  background : var(--color-surface-level-5); }
.dark-theme.surface-level-4  .panel-toolbar-spacer {  background : var(--color-surface-level-1); }
.dark-theme.surface-level-5  .panel-toolbar-spacer {  background : var(--color-surface-level-2); }
.black-theme.surface-level-1 .panel-toolbar-spacer {  background : var(--color-surface-level-4); }
.black-theme.surface-level-2 .panel-toolbar-spacer {  background : var(--color-surface-level-4); }
.black-theme.surface-level-3 .panel-toolbar-spacer {  background : var(--color-surface-level-5); }
.black-theme.surface-level-4 .panel-toolbar-spacer {  background : var(--color-surface-level-1); }
.black-theme.surface-level-5 .panel-toolbar-spacer {  background : var(--color-surface-level-2); }

.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 {
    display  : flex;
    gap      : var(--spacer-xs);
    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 transparent;
    border-radius   : 3px;
    display         : flex;
}
.panel-toggles > div {
    border-right : 1px solid transparent;
    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.selected {
    font-weight : bold;
}
.surface-level-1 .panel-toggles { border-color : var(--color-surface-level-3); }
.surface-level-1 .panel-toggles > div { border-color : var(--color-surface-level-3); }
.surface-level-1 .panel-toggles > div.selected { background : var(--color-surface-level-3);  }
.surface-level-1 .panel-toggles > div:hover { background : var(--color-surface-level-4);  }
.surface-level-2 .panel-toggles { border-color : var(--color-surface-level-4); }
.surface-level-2 .panel-toggles > div { border-color : var(--color-surface-level-4); }
.surface-level-2 .panel-toggles > div.selected { background : var(--color-surface-level-4); }
.surface-level-2 .panel-toggles > div:hover { background : var(--color-surface-level-5); }
.surface-level-3 .panel-toggles { border-color : var(--color-surface-level-4); }
.surface-level-3 .panel-toggles > div { border-color : var(--color-surface-level-4); }
.surface-level-3 .panel-toggles > div.selected { background : var(--color-surface-level-4);  }
.surface-level-3 .panel-toggles > div:hover { background : var(--color-surface-level-5);  }
.surface-level-4 .panel-toggles { border-color : var(--color-surface-level-2); }
.surface-level-4 .panel-toggles > div { border-color : var(--color-surface-level-2); }
.surface-level-4 .panel-toggles > div.selected { background : var(--color-surface-level-2);  }
.surface-level-4 .panel-toggles > div:hover { background : var(--color-surface-level-3);  }
.surface-level-5 .panel-toggles { border-color : var(--color-surface-level-2); }
.surface-level-5 .panel-toggles > div { border-color : var(--color-surface-level-2); }
.surface-level-5 .panel-toggles > div.selected { background : var(--color-surface-level-2); }
.surface-level-5 .panel-toggles > div:hover { background : var(--color-surface-level-3);  }

 .dark-theme .panel-toggles > div.selected
 .dark-theme .panel-toggles > div:hover { color : white; }
.black-theme .panel-toggles > div.selected
.black-theme .panel-toggles > div:hover { color : white; }




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


/*  TABS */
/* ----------------------------------------------------------------------------- */
.tabs {
    border-bottom : 2px solid var(--color-surface-level-5);
    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    : var(--color-surface-level-1); 
    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 */
/* ----------------------------------------------------------------------------- */
.button {
    border-radius   : 2px;
    border          : 1px solid transparent;
    color           : var(--color-font);
    cursor          : pointer;
    font-weight     : 600;
    font-size       : 14px;
    height          : 20px;
    line-height     : 20px;
    min-width       : 80px;
    padding         : 8px 16px;
    text-align      : center;
    white-space     : nowrap;
}
.button.disabled {
    border-color : var(--color-surface-level-4) !important;
    color        : var(--color-surface-level-4) !important;
    cursor       : not-allowed;
}
.button.default.disabled {
    color   : #ffffff;
    opacity : 0.4;
}
.button.disabled:hover {
    box-shadow : none !important;
}

 .dark-theme .button,
.black-theme .button { background : var(--color-surface-level-4); border-color : var(--color-surface-level-4); }
.light-theme .button { background : var(--color-surface-level-1); border-color : var(--color-gray-600);        }

.light-theme .button:hover {  box-shadow:  0 0 0 3px #e3e3e3; }
 .dark-theme .button:hover,
.black-theme .button:hover,
 .dark-theme .button:hover input,
.black-theme .button:hover input { 
    background   : var(--color-surface-level-5);
    border-color : var(--color-surface-level-5);
} 

.button.default {
    background   : var(--color-blue-500); 
    border-color : var(--color-blue-500); 
    color        : white; 
}
.button.default:hover {
    background   : var(--color-blue-600); 
    border-color : var(--color-blue-600); 
    color        : white; 
}

 .dark-theme .surface-level-5 .button { background : var(--color-surface-level-1); border-color : var(--color-surface-level-1); }
.black-theme .surface-level-5 .button { background : var(--color-surface-level-1); border-color : var(--color-surface-level-1); }
 .dark-theme .surface-level-5 .button:hover { background : var(--color-surface-level-2); border-color : var(--color-surface-level-2); }
.black-theme .surface-level-5 .button:hover { background : var(--color-surface-level-2); border-color : var(--color-surface-level-2); }


 .dark-theme .button.disabled,
.black-theme .button.disabled {
    background  : var(--color-surface-level-3) !important;
    color       : var(--color-surface-level-1) !important;
}

.button.icon {
    font-family : 'Material Symbols Sharp';
    font-size   : 24px;
    font-weight : 300;
    height      : 36px;
    line-height : 36px;
    min-width   : auto;
    padding     : 0px;
    width       : 36px;
    text-rendering          : optimizeLegibility;
    -webkit-font-smoothing  : antialiased;
}
.button.with-icon { 
    display : flex;
 }
.button.with-icon > input {
    border-color : transparent;
}
.button.with-icon > input:focus {
    box-shadow : none;
}
.button.with-icon::before {
    font-size   : 24px;
    font-weight : 200;
    line-height : 19px; 
}
.button > span {
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
.button.red {
    background   : var(--color-status-red) !important;
    border-color : var(--color-status-red) !important;
    color        : white;
}
.button.red:hover {
    background   : var(--color-status-red-bright) !important;
    border-color : var(--color-status-red-bright) !important;
}

 .dark-theme .button input { background : var(--color-surface-level-4); }
.black-theme .button input { background : var(--color-surface-level-4); }
 .dark-theme .button input:hover { background : var(--color-surface-level-5); }
.black-theme .button input:hover { background : var(--color-surface-level-5); }

 .dark-theme .surface-level-4 .button input { background : var(--color-surface-level-1); }
 .dark-theme .surface-level-5 .button input { background : var(--color-surface-level-1); }
.black-theme .surface-level-4 .button input { background : var(--color-surface-level-1); }
.black-theme .surface-level-5 .button input { background : var(--color-surface-level-1); }
 .dark-theme .surface-level-4 .button input:hover { background : var(--color-surface-level-2); }
 .dark-theme .surface-level-5 .button input:hover { background : var(--color-surface-level-2); }
.black-theme .surface-level-4 .button input:hover { background : var(--color-surface-level-2); }
.black-theme .surface-level-5 .button input:hover { background : var(--color-surface-level-2); }



/*  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);
}



/*  STARTUP */
/* ----------------------------------------------------------------------------- */
#startup {
    position    : absolute;
    top         : 0px;
    right       : 0px;
    bottom      : 0px;
    left        : 0px;
    z-index     : 10;
}
#startup-logo {
    background-image    : url(../../images/autodesk-logo-black.png);
    background-size     : 390px;
    height              : 258px;
    width               : 390px;
    position            : absolute;
    top                 : calc(50% - 160px);
    left                : calc(50% - 195px);
}
.dark-theme #startup-logo {
    background-image    : url(../../images/autodesk-logo-white.png);
}



/*  OVERLAY */
/* ----------------------------------------------------------------------------- */
#overlay, .overlay {
    display     : none;
    position    : absolute;
    top         : 0px;
    right       : 0px;
    bottom      : 0px;
    left        : 0px;
    z-index     : 9;
    transition  : transform .25s ease;
}



/*  PROGRESS INDICATOR */
/* ----------------------------------------------------------------------------- */
.processing {
    position : absolute;
    top : calc(50% - 15px);
    left:calc(50% - 38px);
    z-index : 9;
}
.processing > div {
    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 & SUCCESS MESSAGE */
/* ----------------------------------------------------------------------------- */
#message {    
    color       : white;
    cursor      : pointer;
    display     : none;
    padding     : 20px 40px 20px 100px;
    position    : absolute;
    right       : 40px;
    bottom      : 40px;
    left        : 40px;
    z-index     : 100;
}
#message.error   { background : var(--color-status-red);   border : 12px solid var(--color-status-red-bright);   }
#message.success { background : var(--color-status-green); border : 12px solid var(--color-status-green-bright); }
#message::after {
    font        : normal normal normal 14px/1 'Material Symbols Sharp';
    font-size   : 40px;
    margin-right: 8px;
    position    : absolute;
    top         : 20px;
    left        : 30px;
}
#message.error::after   { content: '\e82a'; }
#message.success::after { content: '\e2e6'; }
.message-title {
    font-weight : 800;
    font-size   : 20px;
}
.message-text {
    font-size   : 14px;
    line-height : 18px;
    padding     : 6px 0px 18px 0px;
}
.message-footer {
    font-size : 12px;
}


/*  PREVIEW */
/* ----------------------------------------------------------------------------- */
/* #preview {
    z-index : 8;
}
#preview-header {
    display         : flex;
    gap             : 20px;
    justify-content : space-between;
    padding         : 20px 40px;
    position        : absolute;
    top             : 0px;
    right           : 0px;
    left            : 0px;
}
#preview-title {
    font-size   : 22px;
    font-weight : 800;
}
#preview-frame {
    border : 20px solid var(--color-surface-level-3);
    position        : absolute;
    top             : 80px;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
} */