/*  VIEWER */
/* ----------------------------------------------------------------------------- */
.viewer-message {
    display         : none;
    flex-flow       : column;
    gap             : 10px;
    justify-content : center;
    text-align      : center;
    /* height          : 100%; */
}
.viewer-message > .icon {
    color       : var(--color-blue-500);
    font-size   : 56px;
    font-weight : 200;
}
.no-viewer-cube .viewcubeWrapper {
    z-index : -10;
}


/*  STANDARD APS VIEWER OVERRIDES*/
/* ----------------------------------------------------------------------------- */
#guiviewer3d-toolbar > div {
    background : transparent;
    box-shadow : none !important;
    margin     : 0px 4px !important;
}

body.dark-theme  #guiviewer3d-toolbar #toolbar-measureTool-done.adsk-button:hover,
#toolbar-measureTool-done, 
#toolbar-measureTool-done > label,
#toolbar-measureTool-done > label:hover,
#toolbar-measureTool-done:hover {
    background  : var(--color-blue-500) !important;
    border-color  : var(--color-blue-500) !important;
    
}
#toolbar-measureTool-done, #toolbar-measureTool-done > label {
    padding : 6px 10px;
}
#toolbar-panTool,
#toolbar-zoomTool { display : none !important; }
#modelTools .explode-slider {
    border : none !important;
    box-shadow : none !important;
}
.adsk-control-tooltip {  
    font-family : 'Artifakt Element';
    padding : 8px 16px !important;
}
.adsk-toolbar .adsk-control-group { margin : 0px !important; }
.adsk-viewing-viewer.dark-theme .adsk-control-tooltip { background : black !important; }
.adsk-viewing-viewer .adsk-button { margin : 2px ! important; }


/* #my-custom-toolbar-views{ margin-left : 20px !important; } */
[class*=" adsk-icon-"]:before, [class^=adsk-icon-]:before, [data-icon]:before { font-weight : 100; }
#guiviewer3d-toolbar .adsk-button .adsk-button-icon::before { font-weight : 300; }

.adsk-toolbar .measure-toolbar-seperator {
    margin : 14px 10px !important;
}


/*  APS VIEWER CUSTOM TOOLBARS */
/* ----------------------------------------------------------------------------- */
#customSelectionToolbar.hide-selectd  #button-toggle-hide-selected  { 
    background   : var(--color-blue-500) !important; 
    border-color : var(--color-blue-500) !important; 
}
#customSelectionToolbar.hide-selectd #button-toggle-hide-selected .icon-remove::before { color : white !important; }
#hidden-instances {
    font-family     : 'ArtifaktElement';
    border-radius   : 3px;
    color           : white;
    cursor          : pointer;
    font-size       : 14px;
    gap             : 4px;
    height          : 38px;
    justify-content : space-between;
    line-height     : 38px;
    margin          : auto;
    max-width       : 420px;
    position        : relative;
    padding         : 0px;
    top             : 10px;
    white-space     : nowrap;
    width           : 420px;
    z-index         : 4;
}
#hidden-instances-label {
    background      : var(--color-yellow-500);
    border          : 1px solid transparent;
    border-radius   : 2px;
    display         : flex;
    flex-grow       : 1;
    gap             : 8px;
    margin-right    : 4px;
    padding         : 0px 12px;
}
#hidden-instances-counter {
    font-weight : 800;
    text-align  : right;
    width       : 20px;
}
#hidden-instances-list {
    display         : flex;
    flex-direction  : column;
    gap             : 2px;
    margin          : auto;
    max-height      : 168px;
    overflow-y      : auto;
    position        : relative;
    top             : 18px;
    width           : 420px;
    z-index         : 2;
}
.hidden-instance {
    display         : flex;
    gap             : 2px;
    line-height     : 28px;
    justify-content : space-between;
}
.hidden-instance-label {
    background  : var(--color-surface-level-3);
    display     : flex;
    flex-grow   : 1;
    max-width   : 356px;
    min-width   : 356px;
    gap         : 8px;
    padding     : 0px 12px;
    width       : 356px;
}
.hidden-instance-name {
    overflow        : hidden;
    text-overflow   : ellipsis;
    white-space     : nowrap;
}
.hidden-instance-remove.button.icon {
    font-size       : 20px;
    height          : 26px;
    line-height     : 26px;
}

#button-toggle-ghosting-enable { 
    background : var(--color-blue-500) !important; 
    border-color : var(--color-blue-500) !important; 
}
#button-toggle-ghosting-enable .icon-hide::before { color : white !important; }
#button-toggle-ghosting-disable  { display : none; }
#customSelectionToolbar.ghosting #button-toggle-ghosting-disable  { display : block; }
#customSelectionToolbar.ghosting #button-toggle-ghosting-enable  { display : none; }

#button-toggle-highlight-on { 
    background   : var(--color-blue-500) !important; 
    border-color : var(--color-blue-500) !important; 
}
#button-toggle-highlight-on .icon-highlight::before { color : white !important; }
#customSelectionToolbar.highlight-on  #button-toggle-highlight-off { display : none; }
#customSelectionToolbar.highlight-off #button-toggle-highlight-on  { display : none; }



/*  FILE BROWSER */
/* ----------------------------------------------------------------------------- */
#viewer-file-browser {
    background      : rgba(33, 33, 33, 0.6);
    display         : none;
    position        : absolute;
    top             : 0px;
    right           : 0px;
    bottom          : 0px;
    left            : 0px;
    z-index         : 2;
    align-content   : unset;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
}
#viewer-file-browser-panel {
    border-radius   : 4px;
    border-width    : 40px;
    max-width       : 500px;
    min-width       : 250px;
    width           : 500px;
}
#viewer-file-browser-header {
    display         : flex;
    justify-content : space-between;
    margin          : 0px 10px 20px;
}
#viewer-file-browser-title {
    color       : white;
    font-size   : 18px;
    font-weight : 800;
    line-height : 40px;
}
#viewer-file-browser-list {
    margin-bottom : 20px;
}
#viewer-file-browser-list .tile-title {
    line-height : 22px;
}
#viewer-file-browser-list .tile-details {
    gap        : 2px;
    margin-top : 14px;
}


/*  APS VIEWER MARKUP */
/* ----------------------------------------------------------------------------- */
#viewer-markup-button {
    line-height : 30px;
}
#viewer-markup-image {
    height : 800px;
    width  : 800px;
}
#viewer-note-toolbar {
    position: absolute;
    bottom: 98px;
    left: calc(50% - (var(--width-viewer-note) / 2));
    width: var(--width-viewer-note);
    z-index: 5;
}
#viewer-note {
    background: #222;
    border-radius: 3px;
    padding: var(--spacer-xs);
    width: calc(100% - (2 * var(--spacer-xs)));
    border: 1px solid white;
    color: white;
}
.viewer-markup-toolbar {
    display : flex;
    gap : 8px;
    justify-content : center;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    z-index: 5;
}
.viewer-markup-toolbar-group {
    background      : var(--color-dark);
    border-radius   : 3px;
    overflow        : auto;
    padding         : 8px 12px 12px;
}
.viewer-markup-toolbar-group-label {
    color : white;
    font-size : 12px;
    font-weight : 800;
    padding-bottom : 8px;
    text-align : center;
}
.viewer-markup-toggle, .viewer-markup-button {
    background      : transparent;
    border          : 1px solid var(--color-surface-level-1);
    border-radius   : 2px !important;
    color           : white;
    cursor          : pointer;
    height          : 36px;
    line-height     : 36px;
    text-align      : center;
}
.viewer-markup-toggle:hover, .viewer-markup-button:hover { border-color : var(--color-blue-500) !important; }
.viewer-markup-toggle { width : 36px; }
.viewer-markup-toggle.selected { border-color : white !important; }
.viewer-markup-button { width : 76px; }

.light-theme .viewer-markup-toggle, 
.light-theme .viewer-markup-button {
    border-color : var(--color-gray-800);
}

.viewer-markup-toolbar-group-toolbar {
    display : grid;
    gap     : 4px;
}

#markup-toolbar-colors > div {
    border-color : transparent;
}

#markup-toolbar-colors  { grid-template-columns: repeat(4, 1fr); }
#markup-toolbar-sizes   { grid-template-columns: repeat(6, 1fr); }
#markup-toolbar-shapes  { grid-template-columns: repeat(6, 1fr); }
#markup-toolbar-actions { grid-template-columns: 1fr 1fr 2fr 2fr; }
#markup-toolbar-actions.with-save-button { grid-template-columns: repeat(4, 1fr) 2fr; }
#markup-toolbar-actions.with-save-button > .viewer-markup-button { 
    background: var(--color-blue-500);
    border-color: var(--color-blue-500);
}



#viewer-markup-toolbar {
    container-type : inline-size;
}
@container (max-width: 1080px) {

    #markup-toolbar-colors {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    #markup-toolbar-sizes {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    #markup-toolbar-shapes {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    #markup-toolbar-actions {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    #markup-toolbar-actions > div { width : 60px; }
    #markup-toolbar-actions.with-save-button {
        grid-template-columns: repeat(3, 1fr);;
        grid-template-rows: repeat(2, 1fr);
    }
    #markup-toolbar-actions.with-save-button > .viewer-markup-button { 
        grid-column : span 2;
        width : 80px; 
    }

}