: root {
    --color-blue: #428BFF;
    --color-red: #FF4A53;
    --color-dark: #333;
    --color-white: #efefef;
    --tabs-font-family: "Raleway";
}

/* ############################################### General ############### */
body.blurring-ui {
    overflow: hidden;
}

.notification-red {
    background-color: #9e2f3c;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 0.2rem;
    color: white;
}

.notification-green {
    background-color: #3bb32b;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 0.2rem;
    color: white;
}


a {
    text-decoration: none;
}

/* ############################################### leaflet ############### */
.marker-cluster {
    background-color: rgba(241, 128, 23, 0.6);
    border-radius: 2rem;
    text-align: center;
    color: green;
    font-size: 20px;
}



/* ############################################### General ############### */


.delete__description {
    text-transform: none;
    text-align: center;
}

.project_cards {
    text-transform: none;
    text-align: center;
    min-height: 300px;
    border-color: #0080ff;
}

.card-text {
    padding-top: 10px;
}

.project__card__number {
    color: #0080ff;

    font-size: 1.5rem;
}

.download__card {
    color: black;
    width: 100%;
    min-height: 100px;
}

.software__icons {
    width: 5em;
    height: 5em;
    padding-bottom: 10px;
}

.upload__icons {
    padding-bottom: 20px;
}

.viewer__pointer {
    padding-top: 5em;
}

.software_logging-container {
    padding-bottom: 10px;

}

.software_logging {
    background: #dadcf2;
    border-radius: 0.5rem;
    text-align: center;
}

/* ----------------------------------------Main Top navabr --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.navbar-left input[type="checkbox"] {
    margin-right: 5px;
}

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.navbar-right {
    text-align: right;
    padding-right: 1%;
}

ul.topnav li {
    list-style-type: none;
}

ul.topnav li a,
ul.topnav li .navbar-left {
    display: block;
    text-decoration: none;
    min-height: 14px;
    padding: 10px;
    text-transform: uppercase;
}

ul.topnav li a:hover {
    background-color: #0080ff;
    color: #fff;
}

.operation__tab__active {
    color: #fff;
    background-color: #0d6efd;
    padding-bottom: 15px;
    padding-top: 15px;
    border-radius: 5px;
    min-width: 250px;
    width: 100%;
    text-align: left;
    text-indent: 2em;

}

.operation__tab {
    padding-bottom: 15px;
    padding-top: 15px;
    border-radius: 5px;
    min-width: 250px;
    width: 100%;
    text-align: left;
    text-indent: 2em;
    background-color: white;
    color: black;
}


.operation__content {
    display: none;
}

.operation__content__active {
    display: grid;
}

/* ----------------------------------------Login- Signup--------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/

.user-interface {
    margin-top: 10%;
}

.user-interface-desc {
    padding: 0;
}

.user-interface-desc img {
    max-width: 40%;
    display: block;
    margin-bottom: 3rem;
}

.feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.signin-form input {
    width: 100%;
    height: 50px;
}

button.signin-btn {
    width: 100%;
    background-color: #d64829;
    color: #ffffff;
    margin-bottom: 1rem;
}

.create-account {
    margin: auto;
}

button.create-account {
    background-color: #0ac940;
}

/* ---------------------------------------- General --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/

.clickable-icon {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----------------------------------------Group panel--------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
#group_table {
    padding-top: 10px;
}

#group_members_table {
    padding-top: 10px;
}

#add_group_member {
    padding: 20px;
    padding-bottom: 75px;
}

/* ----------------------------------------Admin panel--------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/


.add-user {
    margin-top: 10px;
}

button.add-user-button {
    width: 100%;
}

button.cancel-command {
    width: 100%;
    margin-top: 10px;
}

.new-user-confirm {
    text-align: left;
}

#admin_table {
    padding-top: 10px;
}

/* ----------------------------------------Project summary --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.project_summary_left_navbar {
    padding: 20px;
    background-color: #2e2d2d;
}

.upload-modal-box {
    padding: 30px 5px;
    text-align: center;
}

#CreateProject {
    width: 80%;
}

.create-new-project-title {
    margin-top: 30px;
}

.create-new-project-form {
    margin-top: 10px;
}

.projectsummary-createProject-userinputs {
    margin-bottom: 10px;
}

.projectsummary-createProject-createbtn {
    text-align: center;
}

.projectsummary-createProject-createbtn button {
    padding-left: 30px;
    padding-right: 30px;
}



/* ----------------------------------------Project dashboard --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/*
---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/

.project-dashboard-delete-project p {
    display: block;
    margin: auto;
    text-align: center;
}

.project-dashboard-delete-project {
    background-color: red;
    border-radius: 0.2rem;
    padding: 20px;
}

.project-dashboard-delete-project:hover {
    cursor: pointer;
    opacity: 0.85;

}


/* ----------------------------------------Project Edit --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.border-row {
    padding: 10px;
    border-radius: 0.2rem;
    margin: 10px 0 20px;
}

.border-row p {
    margin: auto;
}

.project-edit {
    margin-left: 5%;
    margin-right: 5%;
}


/* ----------------------------------------blurring UI  --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.inside__canvas__card {
    width: 200px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: black;
}

.inside__canvas__card__invisible {
    display: none
}

.inside__canvas__card img {
    max-width: 60px;
    max-height: 60px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: 10px;
}

.inside__canvas__card button {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.blurring_ui_left_navbar {
    background: rgb(92, 92, 92);
    padding: 8px;
    display: flex;
    flex-flow: column;
    width: 307px;
}

.gallery li.selected {
    background-color: #929191;
}

.map_left_navbar {
    background: rgb(92, 92, 92);
    padding: 8px;
    display: flex;
    flex-flow: column;
    display: none;
}

#map {
    width: 99%;
    height: 99%;
}

.blurring_ui_left_navbar_container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.blurring_ui_top_navbar {
    display: flex;
}

.blurring_ui_top_navbar li:hover {
    cursor: pointer;
}

.blurring_main {
    display: flex;

    width: 100%;
    height: 95vh
}

/* To set things in Hz order */

.blurring_ui_image_src_selector_label {
    display: block;
    margin: auto;
    color: #eee;

}


.functions-list-container ul {
    padding-left: 0;
    list-style-type: none;
}

.functions-list-container li {
    padding: 0.5rem;
    list-style: none;
    text-align: left;
    font-size: 20px;
    cursor: pointer;
    line-height: 200%;
}

.functions-list-container li:hover {
    background-color: #a3a0a0;
}

/* --- sidebar submenus -----------------------------------------------------
   Two row shapes coexist in this sidebar. A top-level item is
   <a href><li>...</li></a> — the anchor wraps the whole row, so the two rules
   above work as intended. A submenu instead looks like

     <li class="has-submenu">
       <a class="dropdown-toggle">Help</a>
       <ul class="collapse"><li><a>View Online</a></li> ... </ul>
     </li>

   and that shape broke both of them:

   - the parent <li>'s box encloses the entire open submenu, so `li:hover` greyed
     the toggle and every entry at once instead of the single row under the
     cursor;
   - a submenu entry's <a> is inline inside its <li>, so it covered only its own
     text — clicking the padding beside the label did nothing, unlike every
     top-level row.

   The fix hands both jobs to the anchors: they become full-width blocks that
   carry the padding and the highlight, while the enclosing <li>s stop doing
   either. A new submenu needs `class="has-submenu"` on its parent <li> to pick
   this up. */
.functions-list-container li.has-submenu,
.functions-list-container li.has-submenu:hover,
.functions-list-container .has-submenu ul li:hover {
    background-color: transparent;
}

.functions-list-container li.has-submenu,
.functions-list-container .has-submenu ul li {
    padding: 0;
}

/* Each anchor is now the row: full width, so all of it is clickable, and the
   thing that highlights, so exactly one entry lights up at a time. */
.functions-list-container li.has-submenu > a {
    display: block;
    padding: 0.5rem;
}

/* Entries are indented so they read as children of the toggle above them. */
.functions-list-container .has-submenu ul li > a {
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 1.75rem;
}

.functions-list-container li.has-submenu > a:hover,
.functions-list-container .has-submenu ul li > a:hover {
    background-color: #a3a0a0;
}

.project_summary_left_navbar {
    color: white;
}

.project_summary_info_main_col {
    padding: 30px;
}

.table-container {
    width: 100%;
    display: block;
    text-align: center;
    color: black;

}

.responsive-table {
    color: black;
    text-align: center;
    margin-left: 0;
    padding-left: 0;
}

.responsive-table li {
    border-radius: 3px;
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

}

.responsive-table a {
    color: black;
}

.table-header {
    background-color: #95A5A6;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.table-header-project-summary {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 22px 20px;
}

.table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}


.table-edit-version {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    border-radius: 3px;
    padding: 30px 20px 120px;
    display: block;
    justify-content: space-between;
    margin-bottom: 25px;
    min-height: 400px;
}

.table-edit-version a {
    text-decoration: none;
    text-align: center;
}


.table-row:hover {
    border: 1px solid rgb(0, 160, 80);
}




.icons {
    color: black;
    margin-top: 20px;
    cursor: pointer;
    text-decoration: none;

}

.selected-icon {
    margin-bottom: 30px;
    padding: 10px;
    border-radius: 3px;
    text-align: center;
}

.upload_container {
    background-color: white;
    color: black;
    border-radius: 3px;
    text-align: center;
    padding: 60px;
}

.upload_container form {
    margin-top: 50px;
}

.upload_container_msg {
    margin-top: 30px;
    margin-bottom: 20px;
}


#hambergur_bar,
#detectionMenu,
#blurringMenu {
    cursor: pointer;
}


.detection_menu,
.blurring_menu {
    margin: 30px;
    padding: 30px;
}

.detection_menu button,
.blurring_menu button {
    width: 100%;
}

.function_button button {
    cursor: pointer;
}

.function_button button:hover {
    opacity: 0.7;
}


.bar-container {
    background: #f0f0f0;
    height: 30px;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 20px;
}

.blurring-ui-object-selector-radio-btns {
    display: flex;
    text-align: center;

}

.blurring-ui-object-selector-radio-btns label {
    margin-right: 20px;
    margin-left: 5px;
}

.blurring-ui-object-selector-radio-btns input {
    margin-right: 0;
}


.imageListContainer {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.blurring_ui_right_navbar {
    background: rgb(92, 92, 92);
    padding: 8px;
    display: flex;
    flex-flow: column;
    width: 130px;
}

.right_navbar_container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.classListContainer {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.classListContainer ul {
    padding-left: 0;
    display: block;
    text-align: left;
    font-size: 14px;
}


.ImageList ul {
    padding-left: 0;

}

.ImageList li {
    display: block;
    padding: 0.5rem;
    list-style: none;
    text-align: left;
    color: #eee;
    font-size: 14px;
    cursor: pointer;
    line-height: 150%;
}

.ImageList li:hover {
    background-color: #262626;
    color: white;
}

.ImageList_id_name {
    display: flex;
    color: #eee;
    font-size: 14px;
}

.ImageList_id_name span {
    padding-top: 0.6rem;
}

.search_class {
    margin-bottom: 5px;
}

.ImageList_id_name label {
    margin-left: 4px;
}

.ImageSection {
    margin: 5px;
    width: calc(100% - 437px);
    display: block;

}

.Imagesection-top-nav {
    margin-bottom: 5px;
    display: flex;
    background-color: #ebe5d5;
}

.imageSection-project-and-total-images {
    text-align: center;
    margin: auto;
    font-size: 16px;
    padding: 5px;

}

.imageSection-arrow-left {
    text-align: right;
    margin: auto;
    font-size: 20px;
}

.imageSection-arrow-left button {
    border-radius: 0.4rem;
}

.imageSection-arrow-right {
    text-align: left;
    margin: auto;
    font-size: 20px;
}

.imageSection-arrow-right button {
    border-radius: 0.4rem;
}


.imageSelection-selected-name-and-id {
    text-align: center;
    margin: auto;
    background-color: #ebe5d5;
    padding: 5px;
    border-radius: 0.2rem;
}


.SrcSelctor,
.objectSelector,
.status {
    text-align: left;
    margin-top: 0;
    color: #eee;
}

.radio_b {
    display: flex;
}

.radio_b label {
    margin-right: 10px;
}

.logoImage img {
    border-radius: 1rem;
}




#canvas_controls {
    border: 0.5px solid black;

}

#canvas_wrapper {
    max-width: 100%;
    height: 83vh;
    overflow: auto;
    position: relative;

}

.buttom_navbar {
    display: flex;
    margin: auto;
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
    background-color: #ebe5d5;
    padding: 5px;
}

#controls {
    float: left;
}

.pointer_coord {
    text-align: left;
    margin-top: 9px;
}

.scale_buttom_navbar {
    margin-top: 9px;
}


.function_modal_description_center {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ----------------------------------------Loader  --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}

.loader_row {
    margin-top: 10px;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ----------------------------------------project UI Modals  --------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/

.upload-modal-form button {
    margin-top: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

/* ...but a button GROUPED with an input is not a standalone action: the rule above
   pushed it 10px down and 50px wide, so "Load layers" beside the OGC Service URL
   field sat out of line with it and read as a second, differently-sized control.
   An input-group draws one joined control, so its button takes the input's own
   metrics instead. */
.upload-modal-form .input-group > button {
    margin-top: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


.road_assessment_icons {
    display: none;
}

.camPos_icons {
    display: none;
}

/* 3d viewer */

div#ViewerKeyPanel {
    position: absolute;
    top: 10px;
    left: 17px;
    z-index: 99999;
}

div#ViewerSecondKeyPanel,
.second-key-panel .second-switch-pointcloud-wrap {
    position: absolute;
    top: 46px;
    left: 0px;
    z-index: 99999;
}

div#ViewerSecondKeyPanelParallel,
.second-key-panel .second-pointcloud-layers-wrap {
    position: absolute;
    top: 46px;
    left: 44px;
    z-index: 99999;
}

#showPointcloudLayersWindow,
.second-key-panel .second-pointcloud-layers {
    margin-top: 0px !important;
}

/* The 3D point-cloud-layers window opens ADJACENT to its key-panel layers button
   (at the button's height, offset right of the left key-panel column so those
   controls stay visible), mirroring the 2D layers modal's anchored placement. The
   primary is a fixed modal whose top/left are computed from the trigger button's
   rect on open (handlePointcloudLayersWindow → anchorFlyoutToTrigger), so it tracks
   the button rather than a static pixel top; the spawned twin below anchors to the
   SAME render-area-relative spot inside its own pane, so both sides land alike. */
/* Shared frame dimensions for BOTH 3D-layers windows — the primary (id-keyed,
   JS-anchored fixed modal) and every spawned twin (class-keyed, absolute inside
   its own pane). Single-sourced here so the two can't drift; the per-context
   positioning lives in each (primary below, spawned in pcl3dPanelController's
   injected .pcl3d-panel-embed style). */
div#pointcloudLayersModal,
.pcl3d-panel-embed {
    width: 400px;
    /* Both 3D-layers windows mount INSIDE their own 3D pane and position the SAME
       way — absolute, near the pane's top-left — so neither is a page-global fixed
       modal. Single-sourced here (was split: the primary anchored to <body>, the
       spawned to an injected .pcl3d-panel-embed rule) so left/right can't drift. */
    display: block !important;
    position: absolute;
    top: 56px;
    left: 100px;
    height: auto;
    max-height: calc(100% - 66px);
    overflow-y: auto;
    /* Both 3D-layers windows must sit ABOVE their own key panel (z 99999) so an
       expanded settings row can't occlude them. Single-sourced here for both sides —
       the spawned twin previously carried z-index:10004 (below .second-key-panel), so
       the settings buttons painted over it; the primary already used this value. */
    z-index: 9999999999;
}

div#pointcloudLayersModal .modal-dialog,
.pcl3d-panel-embed .modal-dialog {
    margin: 0;
    max-width: 100%;
}

/* The shared per-side dock's floating controls (dock-out / dock-in / move handle,
   built in mountDock with these data-surface-role hooks) now mount INSIDE the 3D
   pane (#potree_render_area), the same stacking context as the pane's 3D-layers
   window. This value keeps them above the pane's own canvas/compass while staying
   BELOW that window (z 9999999999), so the window is never occluded by a control.
   They reuse .analytics-nav-item (whose shared chrome pins the low --circular-btn-z);
   this higher-specificity !important lifts them above the pane on BOTH sides
   (one builder, one rule; ADR-0010). */
.analytics-nav-item[data-surface-role="dockOut"],
.analytics-nav-item[data-surface-role="dockIn"],
.analytics-nav-item[data-surface-role="dockDrag"],
.analytics-nav-item[data-surface-role="viewOrientationTrigger"],
.analytics-nav-item[data-surface-role="viewOrientationButton"] {
    z-index: 100000 !important;
}

/* ONE clipping contract for EVERY potree render area — the primary
   (#potree_render_area) and each spawned side's own pane both carry
   data-surface-role="potree" (mainViewerPartialView.html / surfaceView.js), so
   this single rule keeps them identical instead of each side patching itself.
   A viewer's #potree_annotation_container is position:absolute; without a
   clipping containing block its off-viewport pins spill into the neighbouring
   pane. Two properties are needed, and BOTH belong in CSS on purpose:
     • overflow:hidden — the clip. It MUST live here, not as an inline style on
       the pane: the per-side dock/layout writes the pane's inline style in bulk
       (position/left/top/width/height/z-index) and would clobber an inline
       overflow (the bug that let a spawned pane keep bleeding after an inline
       patch). That bulk inline style never sets `overflow`, so this CSS wins.
     • position:relative — guarantees the pane is a containing block even if it
       is ever NOT absolutely positioned by its own layout. In practice the pane
       already gets position:absolute (primary: #potree_render_area in
       potree.css; spawned: the dock's inline layout), which overrides this — so
       this is a defensive floor, not the normal path. */
[data-surface-role="potree"] {
    position: relative;
    overflow: hidden;
}

/* The mirror contract for EVERY 2D map pane — the primary (#map) and each spawned
   side's map element both carry data-surface-role="map" (mainViewer.html /
   surfaceView.js). This ONE rule confines BOTH sides' 2D chrome (toolbar, search,
   dashboards, compare cluster — all mounted inside the map pane) to the map region,
   so none can paint over the sibling 3D pane. Same reasoning as the potree rule
   above: overflow lives in CSS (not inline) so the dock's bulk inline geometry
   writes can't clobber it, and position:relative is the defensive containing-block
   floor for any pre-dock state. */
[data-surface-role="map"] {
    position: relative;
    overflow: hidden;
}

/* Both sides' search-by-name widget shares the button layer (primary: static markup;
   spawned: secondSideController) so neither carries its own divergent inline z. */
[data-surface-role="searchByName"] {
    z-index: var(--circular-btn-z);
}

/* Per-side bottom toolbar (secondSideController buildSideBottomToolbar): the
   cloned global items (language / screenshot / markers) keep their flyout markup
   but lose their ids, so the primary's id-based hover reveal (#btm-btn-*:hover
   .group) no longer matches. This one scoped rule restores the reveal for every
   flyout in the side toolbar — a group is the .position-absolute child of its
   .position-relative trigger, shown on hover exactly like the primary. */
[data-surface-role="sideBottomToolbar"] .position-relative:hover > .position-absolute {
    display: block !important;
}

#activate_pms_view_btn.disabled::after {
    content: '';
    position: absolute;
    top: 30%;
    left: -20%;
    width: 140%;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#switchPointcloud.disabled::after,
.second-switch-pointcloud.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -20%;
    width: 140%;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#selectNearbyCameras.disabled::after,
.second-select-nearby.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: 35px; */
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#keepDirection.disabled::after,
.second-keep-direction.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    left: -8px;
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#invertCameraControls.disabled::after,
.second-invert-camera.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: 78px; */
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

/* The OFF strike for the confirm-before-delete toggle. These rules are written PER ID
   (plus the .second-* twin class) rather than generically, so a new settings toggle flips
   its flag and its .disabled class correctly and still looks completely inert -- nothing on
   screen changes and the user cannot tell on from off. Same geometry as its neighbour,
   which is the same shape and size and sits beside it. */
#confirmBeforeDelete.disabled::after,
.second-confirm-before-delete.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#cameraSyncEnabled.disabled::after,
.second-camera-sync-enabled.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#openContrastDiv.disabled::after,
.second-open-contrast.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: 121px; */
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#seperateNumbers.disabled::after,
.second-seperate-numbers.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: 163px; */
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#openSingleImages.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    /* left: 208px; */
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

/* Solid-surfaces (issue 47) and hide-occluded (issue 46) are on/off settings-row
   toggles, so they carry the same red-cross OFF-state overlay as the other toggles
   (keep-direction / invert-camera / …), on both the primary id and the spawned twin. */
#solidSurfacesToggle.disabled::after,
.second-solid-surfaces.disabled::after,
#hideOccludedToggle.disabled::after,
.second-hide-occluded.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

/* MSV-PATCH BEGIN: the point-size and EDL toggles were the last settings-row toggles
   without the shared red-cross OFF-state overlay; give them the same one on both the
   primary id and the spawned twin so every settings toggle reads uniformly. */
#openPointcloudSizeDiv.disabled::after,
.second-open-pointsize.disabled::after,
#openEdlDiv.disabled::after,
.second-open-edl.disabled::after {
    content: '';
    position: absolute;
    top: 18px;
    width: 62px;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}
/* MSV-PATCH END */

#switchPointcloud,
.second-key-panel .second-switch-pointcloud {
    margin-top: 0px !important;
}


div#ViewerTherdKeyPanel,
.second-key-panel .second-switch-pano-wrap {
    position: absolute;
    top: 92px;
    left: 0px;
    z-index: 99999;
}

#switchPanoImage.disabled::after,
.second-switch-pano.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -20%;
    width: 140%;
    height: 2px;
    background-color: red;
    transform: translateY(-50%) rotate(-45deg);
}

#switchPanoImage,
.second-key-panel .second-switch-pano {
    margin-top: 0px !important;
}


div#collapseViewerKeyPanel,
.second-key-panel .second-collapse-card {
    position: absolute;
    top: 0;
    left: 39px;
}

div#collapseViewerKeyPanel a,
.second-collapse-card a {
    margin-left: 3px;
}

#collapseViewerKeyPanel .card.card-body,
.second-collapse-card .card.card-body {
    padding: 0px;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: row;
}

#collapseViewerKeyPanel .card.card-body a,
.second-collapse-card .card.card-body a {
    width: 34px;
    display: inline-block;
}

.measurement_value_table tr.selected {
    background: #2d8cff !important;
    color: white !important;
}

#collapseViewerKeyPanel .card.card-body a img,
.second-collapse-card .card.card-body a img {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 6px;
}

#collapseViewerKeyPanel .card.card-body a i,
.second-collapse-card .card.card-body a i {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border-radius: 6px;
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 6px;
}

#ViewerKeyPanelCollapser::before,
.second-measure-collapser::before {
    content: "-";
    color: black;
    display: inline-block;
    margin-right: -3px;
    font-size: x-large;
    font-weight: bolder;
    background-color: rgba(255, 255, 255, 0.8);
    width: 32px;
    height: 32px;
    padding: 3px;
    border-radius: 6px;
    line-height: 28px;
    padding-left: 11px;
}

#ViewerKeyPanelCollapser.collapsed::before,
.second-measure-collapser.collapsed::before {
    content: "+";
    padding-left: 9px !important;
    padding: 2px;
}


div#settingViewerKeyPanel,
.second-key-panel .second-setting-collapse {
    position: absolute;
    top: 138px;
    left: 39px;
}

div#settingViewerKeyPanel a,
.second-setting-collapse a {
    margin-left: 3px;
}

#settingViewerKeyPanel .card.card-body,
.second-setting-collapse .card.card-body {
    padding: 0px;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: row;
}

#settingViewerKeyPanel .card.card-body a,
.second-setting-collapse .card.card-body a {
    width: 34px;
    display: inline-block;
}

.second-setting-collapse .card.card-body .analytics-nav-item {
    margin-top: 0px !important;
}

/* PointcloudMaterialType.svg sits slightly right-of-centre in its viewBox, so its
   trigger carries a 2px right nudge to optically centre it. Shared by both sides
   (primary id + spawned class) so the twin can't drift — the historical inline
   nudge lived only on the primary block. */
#openPointcloudMaterialTypeDiv,
.second-open-material {
    padding-right: 2px;
}

#settingViewerKeyPanel .card.card-body a img,
.second-setting-collapse .card.card-body a img {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 6px;
}

#settingViewerKeyPanel .card.card-body a i,
.second-setting-collapse .card.card-body a i {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    color: black;
    border-radius: 6px;
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 6px;
}

#settingKeyPanelCollapser::before,
.second-setting-collapser::before {
    content: "-";
    color: black;
    display: inline-block;
    margin-right: -3px;
    font-size: x-large;
    font-weight: bolder;
    background-color: rgba(255, 255, 255, 0.8);
    width: 32px;
    height: 32px;
    padding: 3px;
    border-radius: 6px;
    line-height: 28px;
    padding-left: 11px;
}

#settingKeyPanelCollapser.collapsed::before,
.second-setting-collapser.collapsed::before {
    content: "\f013";
    font-family: "Font Awesome 5 Free";
    padding-left: 7px !important;
    padding: 2px;
    font-size: large;
}

#settingKeyPanelCollapser,
.second-key-panel .second-setting-collapser {
    position: absolute;
    top: 138px;
    left: 0px;
    z-index: 99999;
}

/* Spawned side's 3D key-panel ROOT. Every spawned key-panel rule shares its
   declarations with the primary's page-global-id rule above (the spawned class is
   co-targeted in the same selector list, so the offsets live in ONE place) — the
   root included: it uses the SAME origin scheme as the primary's #ViewerKeyPanel
   (position:absolute, top 10 / left 17), resolving against its own pane (mountDock
   places the pane's potree area position:absolute, so it is a positioning context).
   Anchoring the root the same way both sides makes the shared settings/measure child
   offsets land identically; an absolute root also shrinks to its collapser, so the
   17px inset can't push a full-width row past the pane's right edge. The 17px left
   matches the 2D pane's left rail (zoom/search) so both panes' button columns align. */
.second-key-panel {
    position: absolute;
    top: 10px;
    left: 17px;
    z-index: 99999;
}

/* 3d viewer */


/* ----------------------------------------project UI popup notifications  ---------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
.notification-popup {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px;
    background-color: #3767cc;
    color: white;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.notification-popup.show {
    display: block;
    animation: fade-in 0.5s ease-out;
}

.close-btn {
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
}

div#mouse-position,
div[data-surface-role="mousePosition"] {
    position: absolute;
    top: auto;
    bottom: 9px;
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    width: max-content;
    border-radius: 5px;
    margin-left: 9px;
    padding-left: 3px;
    padding-right: 3px;
    z-index: var(--map-readout-z);
}

/* Spawned-side mouse-position cluster (readout + CRS toggle). The wrapper is
   display:contents so the readout keeps the exact absolute placement the primary's
   has. The CRS toggle is single-sourced here for BOTH sides — the primary
   (#mousePositionCrsToggle) and the spawned twin co-target one rule (as the readout
   above does), a clean borderless translucent pill (no Bootstrap .btn-secondary
   chrome) on --map-readout-z — the SAME layer as the coordinate readout beside it, one
   step below the button circles so both pass under them on a tiny map; #map's clip
   keeps them off the 3D pane. */
div[data-surface-role="mousePositionWrapper"] {
    display: contents;
}

#mousePositionCrsToggle,
div[data-surface-role="mousePositionWrapper"]>button {
    position: absolute;
    top: auto;
    bottom: 11px;
    right: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
    width: max-content;
    border-radius: 5px;
    padding: 2px 6px;
    line-height: 1;
    font-size: 10pt;
    z-index: var(--map-readout-z);
    border: none;
}

/* The map's source note: one small line on a light backing in the top-right corner,
   in the strip above the home button, clear of the bottom-right readout and buttons.
   The `.ol-viewport` prefix outranks ol.css's uncollapsible placement wherever ol.css
   loads later. The licences want it visible, so it wraps rather than being cut off. */
.ol-viewport {
    container: olmap / inline-size;
}

.ol-viewport .ol-control.ol-attribution,
.ol-viewport .ol-control.ol-attribution:hover {
    top: 1px;
    bottom: auto;
    right: 18px;
    max-width: calc(100cqw - 36px);
    /* under every map button, so it can never cover or catch a button's click */
    z-index: calc(var(--circular-btn-z) - 1);
    padding: 1px 4px;
    border-radius: 3px;
    /* !important: the main viewer clears every .ol-control's background that way */
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.ol-viewport .ol-control.ol-attribution ul {
    padding: 0;
    font-size: 10px;
    line-height: 1.2;
    text-align: right;
}

.ol-viewport .ol-control.ol-attribution a {
    white-space: nowrap;
}

/* Too narrow for one line: wrap beside the home button (40px wide at right 18px),
   clear of the top-left row of three buttons (about 160px). */
@container olmap (max-width: 440px) {
    .ol-viewport .ol-control.ol-attribution,
    .ol-viewport .ol-control.ol-attribution:hover {
        top: 17px;
        right: 64px;
        max-width: max(80px, calc(100cqw - 224px));
    }
}

.ol-viewport .ol-control.ol-attribution li:not(:last-child):after {
    content: " \00B7  ";
}

/* MSV-PATCH BEGIN: auto-stacking bottom-left control cluster.
   One flex column, anchored bottom-left, per side (the primary emits its own; each
   spawned side mounts its own into that side's render container). Open slider panels
   stack upward and recompact on close — column-reverse keeps the first-in-DOM panel
   at the bottom anchor — so no panel needs a hardcoded bottom offset and none can
   collide (the "Enable brightness" + "Point cloud size" overlap). The material
   flyout and prev/next controls stay OUTSIDE this cluster. */
.viewer-control-cluster {
    position: absolute;
    left: 5px;
    bottom: 6px;
    z-index: 9999999;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8px;
}

.tour-panel {
    width: 300px;
    min-width: 240px;
    max-width: 680px;
    resize: horizontal;
    overflow: auto;
    background: #fff;
    color: #3b4652;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tour-panel-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-panel .tour-select {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    border-radius: 6px;
    padding: 0 6px;
    font-size: 12px;
    border: 1px solid #cfd6dc;
    background: #fff;
    color: #222;
}

.tour-panel .tour-ibtn {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    transition: background .12s, color .12s, opacity .12s;
}

.tour-panel .tour-ibtn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.tour-panel .tour-ibtn:hover {
    background: #eef2f5;
}

.tour-panel .tour-ibtn.on {
    background: #5AB2FF;
    color: #fff;
}

.tour-panel .tour-ibtn.rec-btn {
    color: #e5484d;
}

.tour-panel .tour-ibtn.disabled {
    opacity: .3;
    pointer-events: none;
}

.tour-rec-ind {
    display: none;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    color: #e5484d;
}

.tour-rec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e5484d;
    animation: tourBlink 1s steps(2, start) infinite;
}

@keyframes tourBlink {
    50% { opacity: .25; }
}

.oriented-photo-control {
    width: 377px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px 8px;
    border-radius: 10px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oriented-photo-control .oriented-photo-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oriented-photo-control .oriented-photo-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.oriented-photo-control button {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: #ddd;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}

.oriented-photo-control button:hover {
    color: #fff;
}

.oriented-photo-control .oriented-photo-opacity-label {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
}

.oriented-photo-control .oriented-photo-opacity {
    flex: 1 1 auto;
    cursor: pointer;
}

.oriented-photo-control .oriented-photo-opacity-value {
    flex: 0 0 auto;
    width: 36px;
    text-align: right;
    font-size: 12px;
}

div#brightnessContrastDiv,
.second-brightness-contrast {
    width: 377px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 10px;
}


div#pointcloudSizeDiv,
.second-pointsize {
    width: 377px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 10px;
}

div#edlControlDiv,
.second-edl {
    width: 377px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 10px;
}

div#occlusionControlDiv,
.second-occlusion {
    width: 377px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 5px;
    border-radius: 10px;
}
/* MSV-PATCH END */

/* top/left are computed from the material-toggle button's rect on open (shared
   anchorFlyoutToTrigger, both sides), so the flyout reads as anchored below its
   trigger instead of being pinned to a static pixel offset. */
div#pointcloudMaterialTypeDiv,
.second-material {
    position: absolute;
    z-index: 9999999;
    padding: 5px;
    border-radius: 10px;
}

#pointcloudMaterialTypeDiv a,
.second-material a {
    margin-left: 5px;
    padding: 3px;
}

/* ----------------------------------------Multiple Checkbox selection for config (layers)  ---------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/
/* ---------------------------------------------------------------------------------------------*/

.list-input-container {
    width: 100%;
    position: relative;
}

.list-input-container .toggle-next {
    width: 100%;
    background: white;
    border: 1px solid #ced4da;
    text-align: left;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-input-container .checkboxes {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: white;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.list-input-container .checkbox-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
    width: 100%;
}

.list-input-container .checkbox-item:hover {
    background-color: #f8f9fa;
}

.list-input-container .checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    margin-top: 0;
    width: 16px;
    height: 16px;
    transform: none;
}

.list-input-container .checkbox-item span {
    flex: 1;
}
/* ---- 3D key panel: no gaps where a role has no buttons ------------------------------
   The settings button (and its card) sit under three fixed slots: the cloud + layers row
   (46px), the images row (92px) and settings itself (138px). A role without a slot's
   buttons (reader: all three) leaves a hole, so the rows below move up. The roles are
   named by <html data-role-deny="..."> (project/templates/role_features.js.html). */

/* No cloud + layers row, no images row: settings take the first slot. */
html[data-role-deny~="3d.pointcloud_toggle"][data-role-deny~="3d.layers"][data-role-deny~="3d.images_toggle"]
    :is(#settingKeyPanelCollapser, div#settingViewerKeyPanel,
        .second-key-panel .second-setting-collapser, .second-key-panel .second-setting-collapse) {
    top: 46px;
}

/* No cloud + layers row, images row kept: images move up, settings follow. */
html[data-role-deny~="3d.pointcloud_toggle"][data-role-deny~="3d.layers"]:not([data-role-deny~="3d.images_toggle"])
    :is(div#ViewerTherdKeyPanel, .second-key-panel .second-switch-pano-wrap) {
    top: 46px;
}
html[data-role-deny~="3d.pointcloud_toggle"][data-role-deny~="3d.layers"]:not([data-role-deny~="3d.images_toggle"])
    :is(#settingKeyPanelCollapser, div#settingViewerKeyPanel,
        .second-key-panel .second-setting-collapser, .second-key-panel .second-setting-collapse) {
    top: 92px;
}

/* Cloud + layers row kept, images row gone: settings follow the first row. */
html:not([data-role-deny~="3d.pointcloud_toggle"][data-role-deny~="3d.layers"])[data-role-deny~="3d.images_toggle"]
    :is(#settingKeyPanelCollapser, div#settingViewerKeyPanel,
        .second-key-panel .second-setting-collapser, .second-key-panel .second-setting-collapse) {
    top: 92px;
}