:root {
    --noHeight: 0%;
    --mySmallHeight: 40%;
    --myMediumHeight: 60%;
    --myLargeHeight: 100%;
    --bottomPanelHeightOffset: 30px;
    --viewerSmallHeight: calc(
        var(--mySmallHeight) - var(--bottomPanelHeightOffset)
    );
    --viewerMediumHeight: calc(
        var(--myMediumHeight) - var(--bottomPanelHeightOffset)
    );
    --panelSmallHeight: calc(
        var(--mySmallHeight) + var(--bottomPanelHeightOffset)
    );
    --panelMediumHeight: calc(
        var(--myMediumHeight) + var(--bottomPanelHeightOffset)
    );
    --viewerHeight: 100%;
    --myTopicsHeight: 0%;
    --myIdssHeight: 0%;
    --myQtoHeight: 0%;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    touch-action: none;
    overflow: hidden;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 13px; /*Pierpaolo*/
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    overflow: hidden;
}

/*bootbox modal*/
.bootbox.modal {
    z-index: 999999 !important;
}

.bootbox-input-textarea:focus {
    outline: none !important;
    border: 1px solid var(--hoverColor);
    box-shadow: none;
}

.modal-content {
    border-radius: 2px;
}

.modal-content button {
    outline: none !important;
    border-radius: 2px;
}

.modal-content button:hover {
    background-color: var(--hoverColor);
}

.modal-backdrop {
    z-index: 999998 !important;
}

#orientationOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2000000;
    padding: 24px;
    box-sizing: border-box;
}
#orientationOverlay .orientation-content {
    max-width: 360px;
    background: rgba(0, 0, 0, 0.6);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
#orientationOverlay h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
}
#orientationOverlay p {
    margin: 0;
    font-size: 14px;
}

/*splash loading*/
.splash {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999999999;
}

#myViewer {
    display: flex;
    --left: 0;
    --right: 0;
    width: calc(100% - (var(--left) + var(--right)));
    height: var(--viewerHeight);
    align-items: stretch;
    z-index: 10000;
    position: absolute;
    /*overflow: hidden;*/
    left: 0;
    right: 0;
    transition: all 300ms ease-in-out;
}

#myToolbar {
    min-width: 400px;
    top: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 100000;
    pointer-events: none;
    position: fixed;
    left: 95px;
    transition: all 300ms ease-in-out;
}

#myCanvas {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    cursor: default;
    pointer-events: all;
    margin: 0;
    position: relative;
}

#myNavCubeCanvas {
    position: absolute;
    width: 200px;
    height: 200px;
    bottom: 0;
    right: 0;
    z-index: 200000;
}

#myExplorer {
    position: fixed;
    height: 100%;
    color: #fff;
    background: #ffffff;
    border-right: 2px solid #202121;
    padding: 0 0 0 15px;
    overflow-y: hidden;
    user-select: none;
    top: 0;
    left: -400px;
    z-index: 10000;
    width: 400px;
    transition: all 300ms ease-in-out;
    z-index: 100000;
}

input {
    cursor: pointer;
    margin: 0 5px;
}

#explorer_toggle {
    display: none;
}

.explorer_toggle_label {
    position: absolute;
    top: 10px;
    left: 20px;
    --left: 20px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    color: var(--primaryColor);
    background-color: white;
    text-align: center;
    vertical-align: middle;
    border: 2px solid var(--primaryColor);
    padding: 0.375rem 0.75rem;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 0;
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 100000;
    transition: all 300ms ease-in-out;
}

.explorer_toggle_label:hover {
    cursor: pointer;
    opacity: 0.6;
    outline: none;
    border-color: var(--primaryColor) !important;
}

#explorer_toggle:checked + .explorer_toggle_label {
    left: 420px;
    color: #fff;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

#explorer_toggle:checked ~ #myExplorer {
    left: 0;
}

#explorer_toggle:checked ~ #myViewer {
    left: 400px;
    --left: 400;
}

#explorer_toggle:checked ~ #myToolbar {
    left: 500px;
}

#explorer_toggle:not(:checked) + .explorer_toggle_label {
    left: 20px;
    color: var(--primaryColor);
    background-color: #ffffff;
    border-color: #202121;
}

#explorer_toggle:not(:checked) ~ #myExplorer {
    /*left: -400px;*/
}

#explorer_toggle:not(:checked) ~ #myViewer {
    left: 0;
    --left: 0;
}

#explorer_toggle:not(:checked) ~ #myToolbar {
    left: 95px;
}

#explorer_toggle:not(:checked) ~ #myTopics {
    --left: 0;
    left: 0px;
}

#explorer_toggle:checked ~ #myTopics {
    --left: 400 !important;
    left: 400px !important;
}

#explorer_toggle:not(:checked) ~ #myIdss {
    --left: 0;
    left: 0;
}

#explorer_toggle:checked ~ #myIdss {
    --left: 40 !important;
    left: 400px !important;
}

#explorer_toggle:not(:checked) ~ #myQto {
    --left: 0;
    left: 0;
}

#explorer_toggle:checked ~ #myQto {
    --left: 40 !important;
    left: 400px !important;
}

#myTopics {
    z-index: 100000;
    --right: 0;
    --left: 0;
    position: absolute;
    height: var(--myTopicsHeight);
    width: calc(100% - (var(--left) + var(--right)));
    bottom: 0;
    transition: all 300ms ease-in-out;
}

#myIdss {
    z-index: 100001;
    position: absolute;
    left: 80px;
    --left: 80px;
    height: var(--myIdssHeight);
    width: calc(100% - (var(--left) + var(--right)));
    bottom: 0;
    transition: all 300ms ease-in-out;
}

#myQto {
    z-index: 100002;
    position: absolute;
    left: 160px;
    --left: 160px;
    height: var(--myQtoHeight);
    width: calc(100% - (var(--left) + var(--right)));
    bottom: 0;
    transition: all 300ms ease-in-out;
}

.showMyTopics {
    height: 40% !important;
}

.hideMyTopics {
    height: 0 !important;
}

.showMyIdss {
    height: 40% !important;
}

.hideMyIdss {
    height: 0 !important;
}

.showMyQto {
    height: 40% !important;
}

.hideMyQto {
    height: 0 !important;
}

/* default positions for inspector */
#myInspector {
    position: absolute;
    height: 100%;
    color: #202121;
    background: #ffffff;
    overflow: hidden;
    border-left: 2px solid #202121;
    padding: 5px 5px 5px 5px;
    top: 0;
    right: 0;
    z-index: 100000;
    width: var(--inspector-width);
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -webkit-animation: all 300ms ease-in-out;
    -moz-animation: all 300ms ease-in-out;
    /*su richiesta di marcouser-select: none;*/
}

#inspector_toggle {
    display: none;
}

.inspector_toggle_label,
.properties_editor_label,
.classifications_editor_label,
.document_references_editor_label,
.overview_editing_requests_label,
.viewpoints_toggle_label {
    position: absolute;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    /* FIXME */
    border-radius: 0.25rem;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 0;
    /* FIXME */
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
}

.properties_editor_label,
.classifications_editor_label,
.document_references_editor_label,
.overview_editing_requests_label,
.viewpoints_toggle_label {
    padding: 0 0.48rem;
}

.inspector_toggle_label {
    top: 10px;
    padding: 0.375rem 0.75rem;
}
.properties_editor_label {
    top: 71px;
}
.classifications_editor_label {
    top: 115px;
}
.document_references_editor_label {
    top: 160px;
}
.overview_editing_requests_label {
    top: 205px;
}
.viewpoints_toggle_label {
    top: 267px;
}

.viewer-mode-public .viewpoints_toggle_label {
    top: 71px;
}

.inspector_toggle_label:hover,
.properties_editor_label:hover,
.classifications_editor_label:hover,
.document_references_editor_label:hover,
.overview_editing_requests_label:hover,
.viewpoints_toggle_label:hover {
    cursor: pointer;
}

#inspectorPropertiesTitle {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #202121;
    flex: 0 0 auto;
}

#inspectorPropertiesTitle h4 {
    color: var(--primaryColor);
    font-weight: bold;
    margin-bottom: 10px;
}

#inspectorDefaultExplanation,
#inspectorPropertiesContent,
#inspectorMaterialPropertiesContent {
    color: #848484;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
}

#inspectorPropertiesContent iframe,
#inspectorMaterialPropertiesContent iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#overview_editing_requests_toggle {
    display: none;
}

#myOverviewEditingRequests {
    position: absolute;
    height: 100%;
    color: #202121;
    background: #ffffff;
    overflow: hidden;
    border-left: 2px solid #202121;
    padding: 5px;
    top: 0;
    right: 0;
    z-index: 100000;
    width: var(--inspector-width);
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -webkit-animation: all 300ms ease-in-out;
    -moz-animation: all 300ms ease-in-out;
    display: flex;
    flex-direction: column;
}

#overview_editing_requests_toggle:not(:checked) ~ #myOverviewEditingRequests {
    right: calc(-1 * var(--inspector-width));
}

#overview_editing_requests_toggle:not(:checked) ~ #myViewer,
#overview_editing_requests_toggle:not(:checked) ~ #myTopics,
#overview_editing_requests_toggle:not(:checked) ~ #myIdss,
#overview_editing_requests_toggle:not(:checked) ~ #myQto {
    --right: 0;
    right: 0;
}

#overviewEditingRequestsTitle {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #202121;
    flex: 0 0 auto;
}

#overviewEditingRequestsTitle h4 {
    color: var(--primaryColor);
    font-weight: bold;
    margin-bottom: 10px;
}

#overviewEditingRequestsContent {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
}

#overviewEditingRequestsContent iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

#overview_editing_requests_toggle:checked ~ #myViewer,
#overview_editing_requests_toggle:checked ~ #myTopics,
#overview_editing_requests_toggle:checked ~ #myIdss,
#overview_editing_requests_toggle:checked ~ #myQto {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

#overview_editing_requests_toggle:checked ~ #myOverviewEditingRequests {
    right: 0;
}

#overview_editing_requests_toggle:checked ~ #myInspector,
#overview_editing_requests_toggle:checked ~ #myViewpoints {
    right: calc(-1 * var(--inspector-width));
}

.quantitiesTable table {
    border-collapse: collapse;
    width: 100%;
}

.quantitiesTable table th,
td {
    text-align: left;
    height: 28px;
    font-size: 11px;
}

.quantitiesTable table th:last-child,
.quantitiesTable table tr td:last-child {
    text-align: center;
}

/* Selects every third element among any group of siblings */
/* .quantitiesTable table th:nth-child(2), .quantitiesTable table tr td:nth-child(2) {

} */

.quantitiesTable table tr td img {
    color: #848484;
    cursor: pointer;
}

.quantitiesTable table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.layersTable table {
    border-collapse: collapse;
    width: 100%;
}

.layersTable table th,
td {
    text-align: left;
    height: 28px;
    font-size: 11px;
}

.layersTable table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.properties table {
    border-collapse: collapse;
    width: 100%;
}

.properties table th,
td {
    text-align: left;
    height: 28px;
    font-size: 11px;
}

.properties table tr td img {
    color: #202121;
    cursor: pointer;
}

.properties table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.properties table th:last-child,
.properties table tr td:last-child {
    text-align: center;
}

/* Selects every third element among any group of siblings */
.properties table th:nth-child(2),
.properties table tr td:nth-child(2) {
}

.materialProperties table {
    border-collapse: collapse;
    width: 100%;
}

.materialProperties table th,
td {
    text-align: left;
    height: 28px;
    font-size: 13px;
}

.materialProperties table tr td img {
    color: #202121;
    cursor: pointer;
}

.materialProperties table tr:nth-child(odd) {
    background-color: #f5f5f5;
}

.materialProperties table th:last-child,
.materialProperties table tr td:last-child {
    text-align: center;
}

/* Selects every third element among any group of siblings */
.materialProperties table th:nth-child(2),
.materialProperties table tr td:nth-child(2) {
}

.pset strong:hover {
    color: var(--hoverColor);
}

.materialPset strong:hover {
    color: var(--hoverColor);
}

.quantities strong:hover {
    color: var(--hoverColor);
}

.layers strong:hover {
    color: var(--hoverColor);
}

/* menage overflow rows of tables */
.col-name {
    min-width: 165px;
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-value {
    min-width: 72px;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.col-type {
    min-width: 70px;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-style: italic;
}

.col-info {
    min-width: 26px;
    max-width: 28px;
}

/* default positions for viewpoints */
#myViewpoints {
    position: absolute;
    height: 100%;
    color: #202121;
    background: #ffffff;
    overflow: auto;
    border-left: 2px solid #202121;
    padding: 5px 5px 5px 5px;
    top: 0;
    right: 0;
    z-index: 100000;
    width: var(--inspector-width);
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -webkit-animation: all 300ms ease-in-out;
    -moz-animation: all 300ms ease-in-out;
}

#viewpointsTemplateTitle h4 {
    font-weight: bold;
}

#viewpointsTemplateTitle {
    color: var(--primaryColor);
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #202121;
}

/* quando inspector toggle not checked */
#inspector_toggle:not(:checked) ~ #myInspector {
    right: calc(-1 * var(--inspector-width));
}

#inspector_toggle:not(:checked) ~ #myViewer {
    --right: 0;
    right: 0;
}

#inspector_toggle:not(:checked) ~ #myTopics {
    --right: 0;
    right: 0;
}

#inspector_toggle:not(:checked) ~ #myIdss {
    --right: 0;
    right: 0;
}

#inspector_toggle:not(:checked) ~ #myQto {
    --right: 0;
    right: 0;
}

/* quando viewpoints toggle not checked */
#viewpoints_toggle:not(:checked) ~ #myViewpoints {
    right: calc(-1 * var(--inspector-width));
}

#viewpoints_toggle:not(:checked) ~ #myViewer {
    --right: 0;
    right: 0;
}

#viewpoints_toggle:not(:checked) ~ #myTopics {
    --right: 0;
    right: 0;
}

#viewpoints_toggle:not(:checked) ~ #myIdss {
    --right: 0;
    right: 0;
}

#viewpoints_toggle:not(:checked) ~ #myQto {
    --right: 0;
    right: 0;
}

/* quando inspector toggle è checked */
#inspector_toggle:checked ~ #myTopics {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

/* quando inspector toggle è checked */
#inspector_toggle:checked ~ #myIdss {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

/* quando inspector toggle è checked */
#inspector_toggle:checked ~ #myQto {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

#inspector_toggle:checked ~ #myViewer {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

#inspector_toggle:checked ~ #myInspector {
    right: 0;
}

#inspector_toggle:checked ~ #myViewpoints {
    right: calc(-1 * var(--inspector-width));
}

/* quando viewpoints toggle è checked */
#viewpoints_toggle:checked ~ #myTopics {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

/* quando viewpoints toggle è checked */
#viewpoints_toggle:checked ~ #myIdss {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

/* quando viewpoints toggle è checked */
#viewpoints_toggle:checked ~ #myQto {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

#viewpoints_toggle:checked ~ #myViewer {
    --right: var(--inspector-width) !important;
    right: var(--inspector-width) !important;
}

#viewpoints_toggle:checked ~ #myViewpoints {
    right: 0;
}

#viewpoints_toggle:checked ~ #myInspector {
    right: calc(-1 * var(--inspector-width));
}

/* bottone salva BCF */
.saveBCF {
    position: absolute;
    left: 80px;
    --left: 80px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 20px;
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
    padding: 0.375rem 0.93rem;
}

/* bottone aggiungi viewpoint */
.addViewpoint {
    position: absolute;
    left: 140px;
    --left: 140px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    padding: 0.22rem 0.6rem;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 20px;
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
}

#manage_topics_toggle {
    display: none;
}

.manage_topics_label {
    position: absolute;
    left: 20px;
    --left: 20px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    padding: 0.375rem 0.9rem;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 0;
    /* FIXME */
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
}

.manage_topics_label:hover {
    cursor: pointer;
}

#manage_idss_toggle {
    display: none;
}

.manage_idss_label {
    position: absolute;
    left: 100px;
    --left: 100px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    padding: 0.375rem 0.9rem;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 0; /* FIXME */
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
}

.manage_idss_label:hover {
    cursor: pointer;
}

#manage_qto_toggle {
    display: none;
}

.manage_qto_label {
    position: absolute;
    left: 180px;
    --left: 180px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    flex: 1 1 auto;
    text-align: center;
    vertical-align: middle;
    padding: 0.375rem 0.9rem;
    border-radius: 2px;
    -webkit-appearance: button;
    overflow: visible;
    margin: 0 2px 0 0; /* FIXME */
    box-sizing: border-box;
    align-items: flex-start;
    pointer-events: all;
    z-index: 110000;
    transition: all 300ms ease-in-out;
}

.manage_qto_label:hover {
    cursor: pointer;
}

/* gestione comportamento pulsanti viewpoint e inspector */
.toggleColorsOpen {
    color: #fff;
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
}

.toggleColorsClose {
    color: #202121;
    background-color: white;
    border: 2px solid #202121;
}

.togglePositionOpen {
    right: 552px;
}

.togglePositionClose {
    right: 10px;
}

.viewer-floating-toggle.viewer-floating-toggle-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.viewer-floating-toggle.viewer-floating-toggle-disabled img {
    filter: grayscale(100%);
}

/* gestione comportamento pulsanti explorer, manage topics, save bcf e add viewpoint */
.shiftToTopPosition {
    bottom: calc((100% - var(--viewerHeight)) + 10px);
}

.shiftToBottomPosition {
    bottom: 10px;
}

.shiftToRightPosition {
    left: calc(400px + var(--left));
}

.shiftToLeftPosition {
    left: calc(var(--left));
}

/* Ensure outer Bootstrap row never scrolls */
body > .row.h-100.w-100 {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#object-info {
    margin-top: 10px;
}

#material-info {
    margin-top: 10px;
}

/* varie */
#inspectorDefaultExplanation p:first-child {
    margin-top: 10px;
}

#viewpointsDefaultExplanation p:first-child,
#viewpointsDefaultExplanationWithTopicSelected p:first-child {
    margin-top: 10px;
}

#inspectorDefaultExplanation > img {
    width: 100%;
    border-radius: 2px;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid #202121;
}

#viewpointsDefaultExplanation > img,
#viewpointsDefaultExplanationWithTopicSelected > img {
    width: 100%;
    border-radius: 2px;
    object-fit: cover;
    margin-bottom: 1rem;
    border: 2px solid #202121;
}

.sideViewpoint > img {
    margin: 7px 0 0px 30px;
    width: 276px;
    height: 150px;
    background-color: #ffffff;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-radius: 2px;
    object-fit: cover;
    border: 2px solid #202121;
}

.sideViewpoint > img:hover {
    box-shadow: 0 0 8px #333333;
    -webkit-box-shadow: 0 0 8px var(--hoverColor);
    border-color: var(--hoverColor);
    opacity: 0.8;
}

.noViewpoints {
    position: absolute;
    top: 300px;
    left: 75px;
}

.remove {
    display: inline;
    margin: 0;
    cursor: pointer;
    position: relative;
    right: 45px;
    top: 55px;
}

.remove img:hover {
    opacity: 0.6;
}

#titleTopic {
    top: 40px;
    word-break: break-all;
    margin: 7px 0 0 0;
}

.object_display_none {
    display: none !important;
}

/* Full-screen root for the Angular modal iframe; left transparent so Angular can draw the modal */
.properties-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200000;
    background: transparent;
    pointer-events: none;
}

/* Angular draws the modal inside the iframe; we let it fill the viewport without borders */
.properties-editor-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    pointer-events: auto;
}

.viewer-lock-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.viewer-lock-modal {
    width: min(700px, 100%);
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.viewer-lock-modal__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 64px;
}

.viewer-lock-modal__title {
    margin: 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #202121;
}

.viewer-lock-modal__close {
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 36px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.viewer-lock-modal__close:hover {
    color: #202121;
}

.viewer-lock-modal__body {
    padding: 16px 42px 18px;
    color: #202121;
    line-height: 1.6;
    text-align: center;
}

.viewer-lock-modal__body p {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

.viewer-lock-modal__footer {
    display: flex;
    justify-content: flex-end;
    padding: 8px 22px 10px;
}

.viewer-lock-modal__confirm {
    background-color: transparent;
    border: none;
    border-radius: 2px;
    color: var(--primaryColor);
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
    min-height: 0;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}

.viewer-lock-modal__confirm:hover {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #ffffff;
    box-shadow: none;
}

.viewer-lock-modal__confirm:focus,
.viewer-lock-modal__confirm:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--primaryColor);
    box-shadow: none;
    outline: none;
}

.viewer-lock-modal__confirm:focus:hover,
.viewer-lock-modal__confirm:active:hover {
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    color: #ffffff;
}

.orange {
    color: var(--primaryColor);
}

.font16 {
    font-size: 16px;
}

.font11 {
    font-size: 11px;
}

.font10 {
    font-size: 10px;
}

.font13 {
    font-size: 13px;
}

.container-button {
    position: absolute;
    right: 5px;
}

.viewer-ruler-label {
    z-index: 21000;
}

.viewer-ruler-dot {
    z-index: 20002;
}

.viewer-ruler-wire {
    z-index: 20001;
}

/*scrollbar*/
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #a0a0a0 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 14px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 4px;
    border: 4px solid #ffffff;
}

.opacityAddViewpoint {
    opacity: 0.3;
}

/* SELECTION OF TEXT HIGHLIGHTS */
input.e-input::selection,
textarea.e-input::selection,
.e-input-group input.e-input::selection,
.e-input-group.e-control-wrapper input.e-input::selection,
.e-float-input input::selection,
.e-float-input.e-control-wrapper input::selection,
.e-input-group textarea.e-input::selection,
.e-input-group.e-control-wrapper textarea.e-input::selection,
.e-float-input textarea::selection,
.e-float-input.e-control-wrapper textarea::selection {
    background: var(--primaryColor);
    color: #fff;
}

::-moz-selection {
    /* Code for Firefox */
    background: var(--primaryColor);
    color: #fff;
}

::selection {
    background: var(--primaryColor);
    color: #fff;
}

.xeokit-tabs .xeokit-tab-content {
    background: #fff;
}

.xeokit-tabs .xeokit-tab-btn {
    font-size: 15px; /*Pierpaolo*/
}

@media (min-width: 40em) {
    .xeokit-tabs .xeokit-tab-btn {
        font-size: 15px; /*Pierpaolo*/
    }
}

.xeokit-tabs .xeokit-btn {
    font-size: 14px; /*Pierpaolo*/
}

.property-panel {
    font-size: 14px;
    color: #2c2c2c;
    padding-left: 0.25rem;
    padding-right: 1rem;
}

#modelSettingsContent {
    padding-left: 0;
    padding-right: 0;
}

#modelSettingsContent > .inspector-scrollable {
    padding-left: 0.25rem;
    padding-right: 1rem;
}

#inspectorDefaultExplanation {
    padding-left: 0;
    padding-right: 0;
}

#inspectorDefaultExplanation > .inspector-scrollable {
    padding-left: 0.25rem;
    padding-right: 1rem;
}

.property-panel__objectName {
    font-size: 15px;
    font-weight: 700;
    margin: 0.5rem 0;
}

.property-panel__sectionTitle {
    margin: 0 0 8px 0;
    font-weight: 600;
}

.property-groups-stack {
    margin-top: 8px;
}

.property-group {
    border: 1px solid #ddd;
    margin-bottom: 16px;
    background: var(--listAlt1Depth1BG);
}

.property-group__header {
    font-weight: 400;
    font-size: 15px;
    padding: 8px 12px 8px 16px;
    background: var(--listAlt2Depth1BG);
    border-bottom: 1px solid #ddd;
    color: var(--listSelectedDepth1Text);
}

.property-group:hover .property-group__header,
.property-group:focus-within .property-group__header {
    background: var(--listHoverDepth1BG);
}

.property-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 6px;
    border-bottom: 1px solid var(--borderColor);
    gap: 8px;
    margin: 0;
}

.property-field:last-child {
    border-bottom: 0;
}

.property-field.last-visible {
    border-bottom: 0;
}

.property-field span {
    flex: 1;
    font-size: 13px;
}

.property-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primaryColor);
}

.property-field--stacked {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.property-slider {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
}

.property-slider input[type="range"] {
    flex: 1;
    accent-color: var(--primaryColor);
}

.property-slider input[type="number"] {
    width: 60px;
    padding: 4px;
    border: 1px solid var(--borderColor);
    border-radius: 2px;
}

.property-slider input[type="number"]:hover,
.property-slider input[type="number"]:focus,
.property-slider input[type="number"]:active {
    border-color: var(--primaryColor);
    outline: none;
}
.property-reset-btn {
    padding: 4px 6px;
    border: 1px solid var(--borderColor);
    border-radius: 2px;
    background: var(--listAlt1Depth1BG);
    color: var(--listAlt1Depth1Text);
    cursor: pointer;
    font-size: 12px;
    text-transform: lowercase;
}

.property-reset-btn:hover {
    border-color: var(--primaryColor);
    color: var(--primaryColor);
}

.property-reset-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.inspector-scrollable {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 6px;
}

.inspector-body {
    flex: 1 1 auto;
    overflow: auto;
}

:root {
    --inspector-width: 540px;
}

.btnNavigation {
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: none;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%);
    box-sizing: border-box;
    border-radius: 2px;
    background: var(--primaryColor);
    color: #ffffff;
}

.btnNavigation[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.btnNavigation:focus {
    box-shadow: none;
}

.btnNavigation:hover {
    background: var(--hoverColor);
    color: #ffffff;
}

.property-group--flush {
    margin-bottom: 0;
}

.inspector-action-row {
    display: flex;
    gap: 8px;
}

.inspector-action-row .btnNavigation {
    flex: 1 1 0;
    width: auto;
}