/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

pre, code, kbd, samp, tt { font-family: inherit; }

.rotated { 
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.clock {
    position:relative; 
    width: 180px;
    text-align:center;
    background-color: #333;
    border-radius: 10px 10px 0px 0px;
    padding: 10px;
    cursor: pointer;
    z-index:1;
    pointer-events:auto;
    zoom: var(--sc, 1);
}

.clock:hover {
    background-color: #555;
}

.datepicker {
    position:relative;
    width:180px;
    height:175px;
    padding:15px 15px 10px 15px;
    background-color:#333;
    border-radius:10px 10px 0px 0px;
    display:none;
    z-index:0;
    pointer-events:auto;
    zoom: var(--sc, 1);
}

.datepicker_separator {
    position:absolute;
    left:17px;
    bottom:45px;
    width:166px;
    height:2px;
    background-color:#c0c0c0
}

.rightmeet_now {
    height: 100%; 
    width: 175px; 
    padding-left:100px;
    float:left; 
    margin:0px;
}

.rightmeet_next {
    height: 100%; 
    width: 215px; 
    float:right; 
    margin:0px;
}

.meettext {
    padding: 10px;
    font-size: 1.1em;
    line-height: 155%;
}

.leftmeet_now {
    height: 100%; 
    width: 215px; 
    float:left; 
    margin:0px;
}

.leftmeet_next {
    height: 100%; 
    width: 175px; 
    padding-right: 100px;
    float:right; 
    margin:0px;
}


/* Pulsating for meeting rooms */

@keyframes green-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 255, 0, 0.9);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
     }
}

@keyframes blue-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 187, 255, 1);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(0, 187, 255, 0);
     }
}

@keyframes red-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.9);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
     }
}

@keyframes orange-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 127, 0, 0.9);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(255, 127, 0, 0);
     }
}

@keyframes orange-teampulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 127, 0, 0.9);
     }
     100% {
          box-shadow: 0 0 0 100px rgba(255, 127, 0, 0);
     }
}

@keyframes orange-jumppulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(255, 127, 0, 0.9);
     }
     100% {
          box-shadow: 0 0 0 30px rgba(255, 127, 0, 0);
     }
}

/* Search results sidebar (Google-Maps-style) */

.page_content {
    transition: left 300ms ease-in-out;
}

.search_sidebar {
    position: fixed;
    left: 0;
    top: 69px;
    bottom: 0;
    height: auto;
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #2b2b2b;
    z-index: 4;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.45);
    transition: width 300ms ease-in-out;
}

.search_sidebar_title {
    flex: 0 0 auto;
    width: 340px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 44px 14px 18px;
    color: #fff;
    background: #2b2b2b;
}

.search_sidebar_close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    z-index: 5;
    opacity: 0.7;
    transition: opacity 120ms ease-in-out;
}

.search_sidebar_close:hover {
    opacity: 1;
}

.search_sidebar.open {
    width: 340px;
}

.search_sidebar_inner {
    flex: 1 1 auto;
    width: 340px;
    overflow-y: auto;
    color: #fff;
    box-sizing: border-box;
    padding-bottom: 90px;
}

.searchsidebar_header {
    font-size: 20px;
    font-weight: bold;
    padding: 18px 18px 10px 18px;
    color: #fff;
}

.searchsidebar_section {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a9a9a;
    padding: 14px 18px 6px 18px;
}

.searchsidebar_empty {
    padding: 6px 18px 12px 18px;
    color: #888;
    font-size: 14px;
}

.searchsidebar_row {
    display: flex;
    align-items: center;
    padding: 9px 18px;
    cursor: pointer;
    transition: background-color 120ms ease-in-out;
}

.searchsidebar_row:hover {
    background-color: #3a3a3a;
}

.searchsidebar_row.selected,
.searchsidebar_row.selected:hover {
    background-color: #FF7F00;
}

.searchsidebar_row.selected .searchsidebar_name,
.searchsidebar_row.selected .searchsidebar_sub {
    color: #fff;
}

.searchsidebar_avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    margin-right: 12px;
    background: #444;
    /* Ignore EXIF orientation so the photo matches the (EXIF-agnostic) deskball
       and admin review grid; otherwise <img> auto-rotates a tagged avatar. */
    image-orientation: none;
}

.searchsidebar_mapicon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-right: 12px;
    background: #0979D8;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchsidebar_text {
    min-width: 0;
    flex: 1 1 auto;
}

.searchsidebar_name {
    font-size: 15px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.searchsidebar_sub {
    font-size: 13px;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search: dim non-matching desks so the results stand out on the map. */
.deskball.searchdim {
    opacity: 0.2;
    filter: grayscale(0.85);
    transition: opacity 200ms ease-in-out, filter 200ms ease-in-out;
}

/* Search: fog spotlight that darkens the map except the focused desk. The
   element lives inside the zoomed map content (so it tracks scroll/zoom with
   the desks) and is itself the transparent circular hole; its huge box-shadow
   forms the surrounding fog. It paints above the map image but below the
   deskballs, and the opaque header/sidebar paint above it. */
.search_fog {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
}

.search_fog.visible {
    opacity: 1;
}

/* Edit palette sidebar (mirrors the search sidebar, anchored on the right).
   Holds draggable item tiles; slides in when edit mode is enabled. */
.edit_sidebar {
    position: fixed;
    right: 0;
    top: 69px;
    bottom: 0;
    height: auto;
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #2b2b2b;
    z-index: 4;
    box-shadow: -2px 0 14px rgba(0, 0, 0, 0.45);
    transition: width 300ms ease-in-out, transform 300ms ease-in-out;
}

.edit_sidebar.open {
    width: 340px;
}

/* Temporarily slid off the right edge while a header dropdown (Extras /
   settings, address book, notifications) is open, so those panels aren't
   blocked. Transform only, so the map layout/scale stays put. */
.edit_sidebar.pushed {
    transform: translateX(calc(100% + 20px));
}

.edit_sidebar_inner {
    flex: 1 1 auto;
    width: 340px;
    overflow-y: auto;
    color: #fff;
    box-sizing: border-box;
    padding-bottom: 16px;
}

/* Empty footer that reserves bottom space so the palette never renders behind
   the floating bottom-right edit-mode toggle and health icon (which overlap the
   sidebar from outside). Its height is set at runtime by resize.js to track the
   scaled toggle. */
.edit_sidebar_footer {
    flex: 0 0 auto;
    width: 340px;
    box-sizing: border-box;
    background: #2b2b2b;
}

/* Property form panel: shown in place of the palette while a new item is being
   placed (draft) or an existing item is selected. */
.edit_sidebar_form {
    display: none;
    flex: 1 1 auto;
    width: 340px;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 12px 14px 24px;
    color: #eee;
    flex-direction: column;
}

.editsidebar_form_head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.editsidebar_back {
    background: #444;
    color: #eee;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}

.editsidebar_back:hover {
    background: #555;
}

.editsidebar_form_title {
    font-size: 1.05em;
    font-weight: bold;
}

.sbrow {
    display: block;
    overflow: hidden;
    margin-bottom: 7px;
}

.sblabel {
    float: left;
    width: 34%;
    line-height: 30px;
    font-size: 0.9em;
    color: #cfcfcf;
}

.sbinput {
    float: left;
    width: 66%;
    height: 30px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #555;
    background: #1f1f1f;
    color: #eee;
    padding: 0 6px;
}

.sbadv_divider {
    clear: both;
    margin: 14px 0 8px;
    padding-top: 8px;
    border-top: 1px solid #454545;
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8f8f8f;
}

.editsidebar_form_actions {
    clear: both;
    margin-top: 14px;
}

.sbbtn {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    opacity: 1;
}

/* Compound selectors (two classes) so these win over the generic
   input[type=submit] rule (orange, higher specificity than a single class). */
.sbbtn.sbbtn_save {
    background: #0979D8;
    opacity: 1;
}

.sbbtn.sbbtn_save:hover {
    background: #0a87f0;
    opacity: 1;
}

.sbbtn.sbbtn_delete {
    background: #d01317;
    margin-top: 10px;
    opacity: 1;
}

.sbbtn.sbbtn_delete:hover {
    background: #e0242a;
    opacity: 1;
}

/* Ring around the desk/item currently open in the sidebar editor. */
.deskselected {
    outline: 3px solid #4aa3ff;
    outline-offset: 2px;
}

.edit_sidebar_trash {
    flex: 1 1 0;
    height: 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 6px 4px;
    border: 2px dashed #5a5a5a;
    border-radius: 16px;
    color: #9a9a9a;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out;
}

.edit_sidebar_trash_icon {
    width: 24px;
    height: 24px;
    background-image: url('images/trash.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    pointer-events: none;
}

.edit_sidebar_trash_label {
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

/* Highlighted while an item is dragged over the trash zone. */
.edit_sidebar_trash.dragover {
    background: rgba(208, 19, 23, 0.18);
    border-color: #d01317;
    color: #ff6b6e;
}

.edit_sidebar_trash.dragover .edit_sidebar_trash_icon {
    opacity: 1;
}

.editsidebar_section {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9a9a9a;
    padding: 16px 18px 6px 18px;
}

.editsidebar_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 14px 6px 14px;
}

.editsidebar_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px 10px 8px;
    background: #353535;
    border: 1px solid #3f3f3f;
    border-radius: 10px;
    cursor: grab;
    user-select: none;
    transition: background-color 120ms ease-in-out, border-color 120ms ease-in-out, transform 120ms ease-in-out;
}

.editsidebar_tile:hover {
    background: #404040;
    border-color: #0979D8;
}

.editsidebar_tile:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.editsidebar_tile_icon {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: 0 0 auto;
    pointer-events: none;
}

.editsidebar_tile_name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    pointer-events: none;
}

.editsidebar_tile_desc {
    font-size: 11px;
    color: #9a9a9a;
    line-height: 1.25;
    margin-top: 3px;
    pointer-events: none;
}

/* Floating preview that follows the cursor while dragging a palette item. */
.editsidebar_dragghost {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    opacity: 0.85;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Cluster ghost: a zero-size anchor at the cursor whose child dots are
   positioned around it (so the cluster is centred on the pointer). */
.editsidebar_dragghost_cluster {
    transform: none;
    width: 0;
    height: 0;
    background: none;
    opacity: 0.9;
}

/* Multi-dot cluster preview inside a palette tile. */
.editsidebar_tile_icon_cluster {
    position: relative;
}

.editsidebar_clusterdot {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* Top toolbar in the edit sidebar (auto-align, etc.). */
.editsidebar_tools {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px 4px 14px;
}

.editsidebar_toolbtn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 60px;
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #555;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.editsidebar_toolbtn_icon {
    width: 24px;
    height: 24px;
    background-image: url('images/align.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.editsidebar_toolbtn_icon_lasso {
    background-image: url('images/lasso.png');
}

.editsidebar_toolbtn_label {
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

.editsidebar_toolbtn:hover {
    background: #666;
}

/* Active while the auto-align tool is engaged (selecting a box or previewing):
   turn blue and pulse (mirrors the faulty-desk health ring, in blue). */
.editsidebar_toolbtn.active {
    background: #0979D8;
    box-shadow: 0 0 0 2px rgba(9, 121, 216, 0.9), 0 0 12px 4px rgba(9, 121, 216, 0.7);
    animation: alignBtnPulse 1.2s ease-in-out infinite;
}

@keyframes alignBtnPulse {
    0%   { box-shadow: 0 0 0 2px rgba(9, 121, 216, 0.9), 0 0 8px 2px rgba(9, 121, 216, 0.45); }
    50%  { box-shadow: 0 0 0 4px rgba(9, 121, 216, 1.0), 0 0 16px 6px rgba(9, 121, 216, 0.7); }
    100% { box-shadow: 0 0 0 2px rgba(9, 121, 216, 0.9), 0 0 8px 2px rgba(9, 121, 216, 0.45); }
}

.editsidebar_toolbtn.active:hover {
    background: #0a87f0;
}

/* Desk-type selector shown under the "Desk clusters" section header. */
.editsidebar_clustertype {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 18px 8px 18px;
}

.editsidebar_clustertype label {
    font-size: 12px;
    color: #9a9a9a;
    white-space: nowrap;
}

.editsidebar_clustertype select {
    flex: 1;
    padding: 4px 6px;
    font-size: 12px;
    color: #eee;
    background: #353535;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    cursor: pointer;
}

/* Auto-align preview: ghost markers shown at each desk's target position. They
   live inside #content so they share the map's CSS zoom (positioned in the same
   1600px content space as the real desks). */
#autoalign_preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 90;
}

.autoalign_ghost {
    position: absolute;
    border: 2px dashed #19c37d;
    background: rgba(25, 195, 125, 0.25);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Rubber-band rectangle drawn while the editor selects an area to auto-align.
   Positioned in viewport (fixed) coordinates so it tracks the cursor 1:1
   regardless of the map's CSS zoom. */
#autoalign_select {
    position: fixed;
    border: 2px dashed #19c37d;
    background: rgba(25, 195, 125, 0.12);
    z-index: 99999;
    pointer-events: none;
    box-sizing: border-box;
}

/* Freeform lasso path drawn while the editor loops around desks to auto-align.
   Full-viewport SVG overlay in fixed coordinates so it tracks the cursor 1:1
   regardless of the map's CSS zoom. */
#autoalign_lasso {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
}

.autoalign_lasso_path {
    fill: rgba(25, 195, 125, 0.12);
    fill-rule: evenodd;
    stroke: #19c37d;
    stroke-width: 2;
    stroke-dasharray: 6 4;
}

/* Confirm/Cancel bar for an auto-align preview. */
#autoalign_bar {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.autoalign_bar_msg {
    font-size: 14px;
    color: #fff;
}

#autoalign_bar button {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.autoalign_apply {
    background: #19c37d;
    color: #fff;
}

.autoalign_apply:hover {
    background: #1bd488;
}

.autoalign_cancel {
    background: #4a4a4a;
    color: #fff;
}

.autoalign_cancel:hover {
    background: #585858;
}

/* Transient, non-interactive message shown at the selected area when auto-align
   finds nothing. Fades out on its own so it never has to be dismissed. */
.autoalign_toast {
    position: fixed;
    transform: translate(-50%, -50%);
    z-index: 100000;
    max-width: 260px;
    padding: 10px 14px;
    background: #2b2b2b;
    border: 1px solid #444;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 13px;
    text-align: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 600ms ease-in-out;
}

.autoalign_toast.fadeout {
    opacity: 0;
}

/* Type label shown in the item editor in place of the legacy type dropdown
   (the type is now chosen from the palette). */
.np-typelabel {
    font-size: 1.1em;
    font-weight: bold;
    color: #0979D8;
    text-align: center;
    margin-bottom: 8px;
}

/* Right mapplate */

.rightmapplate {
    height:200px; 
    width:600px;
    background-color: #333;
    color: #fff;
    border-radius: 100px 100px 100px 100px;
    position: absolute;
    z-index:101;
    overflow: hidden;
}

.rightmapplate_top {
    position: absolute; 
    right: 86px; 
    top:2px; 
    left:100px;
    height:50px; 
    overflow:hidden;
    background-color:#999; 
    text-align: center;
    line-height: 50px;
    padding-left:100px;
    font-size:24px;
    border-radius: 0px 5px 0px 0px;
}

.rightmapplate_avatar {
    position: absolute; 
    top:2px; 
    left: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
}

.rightmapplate_close {
    position: absolute; 
    top:2px; 
    left: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    opacity: 0;
}

.rightmapplate_close:hover {
    opacity: 1;
}

.rightmapplate_textbox {
    position: absolute; 
    right: 86px; 
    top:52px; 
    bottom:2px;
    width: 300px; 
    padding-left:5px; 
    padding-right: 5px;
    padding-top: 10px;
    overflow:hidden; 
    font-size: 14px;
    line-height:155%;
    background: #333;
    border-radius: 0px 0px 5px 0px;
}

.rightmapplate_goto {
    position: absolute; 
    right: 2px; 
    bottom:2px; 
    top: 2px;
    width: 100px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center;  
    line-height: 196px; 
    border-radius:0px 100px 100px 0px; 
    font-size: 16px; 
    background:#111;
    opacity:0.7;
}

.rightmapplate_goto:hover {
    opacity: 1;
}

.rightmapplate_copy {
    position: absolute; 
    right: 85px; 
    bottom:2px; 
    width: 30px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center;  
    line-height: 30px; 
    border-radius:10px 0px 10px 0px; 
    font-size: 16px; 
    opacity: 0.7;
    cursor: pointer;
}

.rightmapplate_copy:hover {
    opacity: 1.0;
}

/* Left mapplate */

.leftmapplate {
    height:200px; 
    width:600px;
    background-color: #333;
    color: #fff;
    border-radius: 100px 100px 100px 100px;
    position: absolute;
    z-index:101;
    overflow: hidden;
}

.leftmapplate_top {
    position: absolute; 
    left: 86px; 
    top:2px; 
    right:100px;
    height:50px; 
    overflow:hidden;
    background-color:#999; 
    text-align: center;
    line-height: 50px;
    padding-right:100px;
    font-size:24px;
    border-radius: 5px 0px 0px 0px;
}

.leftmapplate_avatar {
    position: absolute; 
    top:2px; 
    right: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
}

.leftmapplate_close {
    position: absolute; 
    top:2px; 
    right: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    opacity: 0;
}

.leftmapplate_close:hover {
    opacity: 1;
}

.leftmapplate_textbox {
    position: absolute; 
    left: 86px; 
    top:52px; 
    bottom:2px;
    width: 300px; 
    padding-left:5px; 
    padding-right: 5px;
    padding-top: 10px;
    overflow:hidden; 
    font-size: 14px;
    line-height:155%;
    background: #333;
    border-radius: 0px 0px 0px 5px;
}

.leftmapplate_goto {
    position: absolute; 
    left: 2px; 
    bottom:2px; 
    top: 2px;
    width: 100px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center;  
    line-height: 196px; 
    border-radius:100px 0px 0px 100px; 
    font-size: 16px; 
    background:#111;
    opacity:0.7;
}

.leftmapplate_goto:hover {
    opacity: 1;
}

.leftmapplate_copy {
    position: absolute; 
    left: 85px; 
    bottom:2px; 
    width: 30px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center; 
    line-height: 30px; 
    border-radius:0px 10px 0px 10px; 
    font-size: 16px; 
    opacity: 0.7;
    cursor: pointer;
}

.leftmapplate_copy:hover {
    opacity: 1.0;
}

/* SharedDesk */

.shareddeskname {
    background:#0564C8; 
    width:100px; 
    padding-left:5px;
    margin-bottom:3px; 
    border-radius:5px;
    cursor: pointer;
    opacity:0.7;
}

.shareddeskname:hover {
    opacity:1.0;
}

/* Right nameplate */

.rightnameplate {
    height:200px; 
    width:600px;
    background-color: #333;
    color: #fff;
    border-radius: 100px 10px 10px 100px;
    position: absolute;
    z-index:101;
    overflow: hidden;
}

.rightnameplate_top {
    position: absolute; 
    right: 2px; 
    top:2px; 
    width: 400px; 
    height:50px; 
    overflow:hidden;
    background-color:#999; 
    border-radius:0px 10px 0px 0px;
    text-align: center;
    line-height: 50px;
    padding-left:100px;
    font-size:24px;
}

.rightnameplate_avatar {
    position: absolute; 
    top:2px; 
    left: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    image-orientation: none;
}
/* Shared-desk avatars are child <img>s inside the avatar container. */
.rightnameplate_avatar img, .leftnameplate_avatar img { image-orientation: none; }

.rightnameplate_close {
    position: absolute; 
    top:2px; 
    left: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    opacity: 0;
}

.rightnameplate_close:hover {
    opacity: 1;
}

.rightnameplate_textbox {
    position: absolute; 
    right: 2px; 
    top:62px; 
    width: 376px; 
    height:136px; 
    padding-left:5px; 
    padding-right: 5px;
    overflow:hidden; 
    border-radius:0px 0px 10px 0px; 
    font-size: 14px;
    line-height:155%;
}

.rightnameplate_number {
    position: absolute; 
    right: 2px; 
    bottom:2px; 
    width: 150px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center;  
    line-height: 30px; 
    border-radius:10px 0px 10px 0px; 
    font-size: 16px; 
    background:#555;
}

.rightnameplate_copy {
    position: absolute; 
    right: 158px; 
    bottom:2px; 
    width: 30px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center;  
    line-height: 30px; 
    border-radius:10px 0px 10px 0px; 
    font-size: 16px; 
    opacity: 0.7;
    cursor: pointer;
}

.rightnameplate_copy:hover {
    opacity: 1.0;
}

/* Directory-source badge shown on occupied desk plates (LDAP / EntraID / Robin).
   Solid black pill for every source; the source is told apart by text color. */
.sourcebadge {
    position: absolute;
    bottom: 2px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: #000;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}
.sourcebadge.src-robin   { color: #d93e94; }
.sourcebadge.src-ldap    { color: #6cb6ff; }
.sourcebadge.src-entraid { color: #7ee787; }

/* Sit the badge just past the desk-number badge on each mirrored plate. */
.leftnameplate .sourcebadge { left: 168px; }
.rightnameplate .sourcebadge { right: 168px; }

/* Footer action row on sticky nameplates: copy, optional report and the source
   badge share one flex row next to the desk-number badge. The row is anchored
   at the inner edge and the buttons flow outward, mirrored per plate side. */
.nameplate_actions {
    position: absolute;
    bottom: 2px;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.leftnameplate .nameplate_actions { left: 168px; flex-direction: row; }
.rightnameplate .nameplate_actions { right: 168px; flex-direction: row-reverse; }

.nameplate_action {
    width: 30px;
    height: 30px;
    opacity: 0.7;
    cursor: pointer;
}
.nameplate_action:hover {
    opacity: 1.0;
}

/* Inside the action row the badge is a normal flex item, not absolute. */
.nameplate_actions .sourcebadge {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
}

/* Used by both nameplates */
.nameplate_edit {
    position: absolute; 
    width:490px;
    height:auto;
    background:#444;
    border-radius:0px 0px 10px 10px;
    z-index:100;
}

/* New-map editor form: label/input rows kept vertically aligned via flex. */
#formspace .createItem .np-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
#formspace .createItem .np-label {
    flex: 0 0 32%;
    padding-right: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}
#formspace .createItem .np-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Latitude/longitude rows sit next to the "Get from address" button, which
   shrinks the inputs to make room and spans both rows. */
#formspace .createItem .np-coordwrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}
#formspace .createItem .np-coordwrap .np-coords {
    flex: 1 1 auto;
    min-width: 0;
}
#formspace .createItem .np-coordwrap .np-coords .np-row {
    margin-bottom: 6px;
}
#formspace .createItem .np-coordwrap .np-coords .np-row:last-child {
    margin-bottom: 0;
}
#formspace .createItem .np-geo {
    flex: 0 0 auto;
    width: 120px;
    margin: 0;
    padding: 8px 6px;
    white-space: normal;
    cursor: pointer;
}
#formspace .createItem .np-msg {
    font-size: 0.85em;
    color: #ccc;
}

/* Left nameplate */

.leftnameplate {
    height:200px; 
    width:600px;
    background-color: #333;
    color: #fff;
    border-radius: 10px 100px 100px 10px;
    position: absolute;
    z-index:101;
    overflow:hidden;
}

.leftnameplate_top {
    position: absolute; 
    left: 2px; 
    top:2px; 
    width: 400px; 
    height:50px; 
    overflow:hidden;
    background-color:#999; 
    border-radius:10px 0px 00px 0px;
    text-align: center;
    line-height: 50px;
    padding-right:100px;
    font-size:24px;
}

.leftnameplate_avatar {
    position: absolute; 
    top:2px; 
    right: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    image-orientation: none;
}

.leftnameplate_close {
    position: absolute; 
    top:2px; 
    right: 2px; 
    width:196px; 
    height: 196px;
    overflow:hidden; 
    border-radius: 50%;
    opacity: 0; 
}

.leftnameplate_close:hover {
    opacity: 1;
}

.leftnameplate_textbox {
    position: absolute; 
    left: 2px; 
    top:62px; 
    width: 376px; 
    height:136px; 
    padding-left:5px; 
    padding-right: 5px;
    overflow:hidden; 
    border-radius:10px 0px 0px 0px; 
    font-size: 14px;
    line-height:155%;
}

.leftnameplate_number {
    position: absolute; 
    left: 2px; 
    bottom:2px; 
    width: 150px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center; 
    line-height: 30px; 
    border-radius:0px 10px 0px 10px; 
    font-size: 16px; 
    background:#555;
}

.leftnameplate_copy {
    position: absolute; 
    left: 158px; 
    bottom:2px; 
    width: 30px; 
    height:30px; 
    overflow:hidden; 
    padding-left:5px; 
    padding-right: 5px;
    text-align: center; 
    line-height: 30px; 
    border-radius:0px 10px 0px 10px; 
    font-size: 16px; 
    opacity: 0.7;
    cursor: pointer;
}

.leftnameplate_copy:hover {
    opacity: 1.0;
}

.announceplate {
    position: relative;
    width: 550px; 
    height: 140px; 
    border-radius: 10px; 
    background-color: #707070;
    opacity: 0.9;
    margin: 10px 10px 10px 20px;
}

.announceplate:hover {
    opacity:1.0;
}

.announceavatar {
    position:absolute; 
    top:30px;
    left:10px;
    width:100px;
    height: 100px;
    border-radius: 10px;
    background-size: cover;
}

.announcetextbox {
    position:absolute; 
    top:30px;
    left:120px;
    width:420px;
    height: 100px;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.announcetext {
    margin: 10px; 
    width:400px;
}

.announcedate {
    position:absolute; 
    top:0px;
    right:80px;
    width:200px;
    height:30px;
    text-align:center;
    line-height:30px;
    border-radius:0px 0px 0px 10px;
    background-color: #393a3c;
}

.announcetype {
    position:absolute; 
    top:0px;
    right:0px;
    width:80px;
    height:30px;
    text-align:center;
    line-height:30px;
    border-radius:0px 10px 0px 0px;
}

/* ── Avatar crop / rotate dialog (Cropper.js) ─────────────────── */
.crop-modal {
    position: fixed;
    inset: 0;
    z-index: 6100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.crop-modal-inner {
    display: flex;
    flex-direction: column;
    width: 92vw;
    max-width: 560px;
    max-height: 88vh;
    background: rgba(28, 28, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
    color: #fff;
    overflow: hidden;
}

.crop-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.crop-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.crop-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
}
.crop-close:hover { opacity: 1; }

.crop-modal-body {
    position: relative;
    padding: 16px 20px;
    overflow: auto;
}

.crop-stage {
    width: 100%;
}

/* Constrain the working image so Cropper can size its crop box. */
.crop-stage img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.crop-busy {
    padding: 24px 0;
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.crop-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.crop-btn {
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    cursor: pointer;
}
.crop-btn:hover { background: rgba(255, 255, 255, 0.16); }

.crop-btn-primary {
    background: #0979d8;
    border-color: #0979d8;
}
.crop-btn-primary:hover { background: #0a86ee; }

/* ── Recent changes modal (changes API) ──────────────────────── */
.changes-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: Roboto, Arial, Helvetica, sans-serif;
}

.changes-modal-inner {
    display: flex;
    flex-direction: column;
    width: 92vw;
    max-width: 780px;
    height: 88vh;
    background: rgba(28, 28, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
    color: #fff;
    overflow: hidden;
}

.changes-modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.changes-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.changes-search {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-sizing: border-box;
}

.changes-search::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.changes-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: 0.7;
}

.changes-close:hover {
    opacity: 1;
}

.changes-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.changes-modal-foot {
    padding: 12px 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.changes-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    padding: 40px 0;
    font-size: 15px;
}

.changerow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: #fff;
}

.changerow:hover {
    background: rgba(255, 255, 255, 0.10);
}

.changerow-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.changerow-main {
    flex: 1;
    min-width: 0;
}

.changerow-name {
    font-weight: 600;
    font-size: 15px;
}

.changerow-value {
    font-size: 14px;
    color: #e0e0e0;
}

.changerow-old {
    font-size: 13px;
    color: #9a9a9a;
    text-decoration: line-through;
}

.changerow-meta {
    flex: 0 0 auto;
    text-align: right;
}

.changerow-date {
    font-size: 12px;
    color: #b0b0b0;
    white-space: nowrap;
}

.changerow-type {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    border-radius: 10px;
}

.changerow-type-title {
    background-color: #0000CC;
}

.changerow-type-new {
    background-color: #00A000;
}

.notifybadge {
    position: relative; 
    width: 140px;
    height: 40px;
    display: inline;
    float: left;
    line-height: 40px;
    background-color:#FF7F00;
    text-align: center;
    border-radius: 20px;
    margin-right: 2px;
    opacity: 0.7;
    pointer-events: auto;
}

.notifybadge:hover {
    opacity: 1.0;
}

/* Login icon button: white icon on a colour-switching circle (no image swap). */
.loginicon {
    width: 50px;
    height: 50px;
    background-color: #333;
    background-image: url("images/login.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    transform: scale(var(--sc, 1));
    transform-origin: 0% 100%;
}

.loginicon:hover {
    background-color: #559F35;
}

/* ── UI scale system ─────────────────────────────────────────
   Every piece of chrome that scales with the viewport reads a single
   CSS custom property `--sc` (the UI scale factor). resize.js updates
   `--sc` on <html> on load and on every resize; the server sets its
   initial value inline on <html> so the first paint is already correct.
   This is the SINGLE source of truth for these layouts — do NOT re-add
   per-element sizing in resize.js or the template inline styles. */
.control_background {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 69px;
    background: #333333; z-index: 1;
    transform-origin: 50% 0%;
    transform: scaleY(var(--sc, 1));
}
.control_container {
    position: fixed; left: 0; top: 0;
    width: 100%; height: calc(69px * var(--sc, 1));
    background-color: #333333; opacity: 1; z-index: 1;
    transition: all 300ms ease-in-out !important;
    display: flex; justify-content: center; align-items: flex-start;
}
.control_content {
    position: relative; top: 0;
    width: 1600px; height: 69px; z-index: 2;
    background-color: #333333;
    zoom: var(--sc, 1);
}
.notify_container {
    position: fixed; left: 0; width: 100%; height: 40px;
    top: calc(72px * var(--sc, 1));
    background-color: transparent; z-index: 1;
    pointer-events: none;
    transition: all 300ms ease-in-out !important;
    display: flex; justify-content: center;
}
.notify_content {
    position: relative; top: 0;
    width: 1600px; height: 0px; z-index: 2;
    background-color: transparent; pointer-events: none;
    zoom: var(--sc, 1);
}
.buttons_left_anchor {
    position: fixed; left: 10px; z-index: 5;
    bottom: calc(10px * var(--sc, 1));
}
.buttons_left {
    position: relative; height: 60px; background: transparent;
    zoom: var(--sc, 1);
}
.buttons_right_anchor {
    position: fixed; right: 10px; z-index: 5;
    bottom: calc(10px * var(--sc, 1));
}
.buttons_right {
    position: relative; width: auto; background: transparent;
    display: flex; flex-direction: row;
    align-items: center; justify-content: flex-end; gap: 8px;
    zoom: var(--sc, 1);
}
.adressbook_margin {
    width: 100%; margin-bottom: 5px; background: none;
    height: calc(69px * var(--sc, 1));
}
.announcementbar_margin {
    width: 100%; margin-bottom: 5px; background: none;
    height: calc(69px * var(--sc, 1));
}
.announcementbar {
    position: fixed; right: 0; top: 0;
    width: 590px; height: 100%;
    background: #333333; opacity: 0.95; display: none;
    transform-origin: 100% 0%;
    transform: scaleX(calc(var(--sc, 1) * 0.7));
}
.announcementbar_body {
    width: 610px; font-size: 20px; overflow-y: scroll;
    height: calc(131.56% / var(--sc, 1));
    transform-origin: 100% 0%;
    transform: scaleY(calc(var(--sc, 1) * 0.7));
}

#avatarbutton {
    position:absolute; 
    left: 20px; 
    bottom: 20px; 
    width:60px; 
    height:60px;
    border-radius:50%;
    cursor:pointer;
    background: #000000;
    overflow:hidden;
    z-index:1;
}

/* Dynamic-Island-style open animation: the menu grows out of the avatar pill
   with a springy overshoot. The transform-origin is pinned to the avatar's
   centre (60px in from the left, 60px up from the bottom) so it appears to
   expand from the avatar rather than from a corner. */
#personal_menu {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: 50px calc(100% - 50px);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.18s ease-out,
        visibility 0s linear 0.42s;
}
#personal_menu > * {
    opacity: 0;
    transition: opacity 0.14s ease-out;
}
#personal_menu.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.12s ease-out,
        visibility 0s;
}
/* Fade the contents in once the shape has mostly expanded, so it reads as the
   container morphing first and the controls settling in afterwards. */
#personal_menu.open > * {
    opacity: 1;
    transition: opacity 0.2s ease-out 0.16s;
}

.avatarbutton_row {
    position:absolute;
    left:57px;
    bottom: 20px;
    display:flex;
    align-items:center;
    gap:10px;
}

.avatarbutton_username {
    position:relative;
    width:auto; 
    height:60px;
    line-height: 60px; 
    vertical-align: middle;
    white-space: nowrap;
    cursor:pointer;
    background-color:#333; 
    font-size:1.3em;z-index:0;
    padding-left:50px;
    padding-right:24px;
    border-radius:0px 30px 30px 0px;
}

.avatarbutton_username:hover {
    background-color:#555;
}

canvas {
    width: 100% !important;
    max-width: 1600px;
    height: auto !important;
}

#container{
  position:absolute;
  left:0px;
  top:0px;
  right:0px;
  bottom:0px;
  font-family:Arial, sans-serif;
  color:#fff;
  background: none;
}
.page_content{
  width:1600px;
  /* 1200px by default; detail maps publish a taller --content-height from
     resize.js so the fixed bottom overlay buttons clear the floor plan. */
  height:var(--content-height, 1200px);
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: left 500ms ease-in-out, top 500ms ease-in-out !important;
  transition: left 300ms ease-in-out, top 300ms ease-in-out !important;
  position: absolute;
  z-index: 0;
  /* Map layout = single source of truth: resize.js publishes these vars and the
     server seeds them for first paint. `zoom` re-rasterizes desk labels crisply;
     since zoom also scales offsets, resize.js pre-divides left/top by the zoom. */
  zoom: var(--content-sc, 1);
  left: calc(var(--content-left, 0) * 1px);
  top: calc(var(--content-top, 0) * 1px);
}

a {color: white;text-decoration: none;}

tr:hover {
  background-color: #555;
}

td a{width:100%;display:block;}

table { border-collapse:collapse }

body {
    font-family: Roboto, Arial, Helvetica;
    background-color:#000; 
    color:#ffffff;
}

/* Real background lives on a dedicated fixed layer behind all content so it can
   be desaturated/dimmed on its own (e.g. while placing a new desk) without
   affecting the page content. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("images/background.png");
    transition: filter 300ms ease-in-out;
}

/* Add-item ("blackprint") mode: desaturate and dim the real background instead
   of swapping in a separate image. */
body.addmode::before {
    filter: grayscale(1) brightness(0.5);
}

/* ── Unified login overlay (login.js cmapsLogin) ────────── */
.cmaps-login-overlay {
    position: fixed; inset: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cmaps-login-card {
    width: 340px; max-width: 90vw;
    background: rgba(28, 28, 30, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px; padding: 28px 26px;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.55);
    color: #fff; font-family: Roboto, Arial, Helvetica, sans-serif;
}
.cmaps-login-card h1 { font-size: 1.35em; margin: 0 0 4px; font-weight: 600; }
.cmaps-login-sub { color: #aaa; font-size: 0.85em; margin: 0 0 22px; }
.cmaps-login-logo { display: block; max-width: 70%; max-height: 56px; margin: 4px auto 24px; }
.cmaps-login-field {
    width: 100%; padding: 11px 12px; margin: 7px 0; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
    background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 1em;
}
.cmaps-login-field::placeholder { color: #8a8a8e; }
.cmaps-login-field:focus { outline: none; border-color: #0a66c2; background: rgba(255, 255, 255, 0.1); }
.cmaps-login-btn {
    width: 100%; padding: 12px; margin-top: 14px; border: 0; border-radius: 8px;
    background: #0a66c2; color: #fff; font-size: 1em; font-weight: 600; cursor: pointer;
}
.cmaps-login-btn:hover { background: #0959a8; }
.cmaps-login-btn-sso { background: #2e7d32; margin-top: 10px; }
.cmaps-login-btn-sso:hover { background: #276b2b; }
.cmaps-login-or {
    display: flex; align-items: center; text-align: center;
    color: #888; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.08em;
    margin: 16px 0 4px;
}
.cmaps-login-or::before, .cmaps-login-or::after {
    content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.14);
}
.cmaps-login-or span { padding: 0 12px; }
.cmaps-login-err { color: #ff6b6b; font-size: 0.9em; margin: 10px 0 0; min-height: 1.1em; }
.cmaps-login-cancel {
    width: 100%; padding: 10px; margin-top: 10px; border: 0; border-radius: 8px;
    background: transparent; color: #aaa; cursor: pointer; font-size: 0.9em;
}
.cmaps-login-cancel:hover { color: #fff; }


.mapflag {
    position: absolute;
	opacity: 0.7; 
	overflow: hidden;
	border-radius: 50%;
	width: 100px;
	height: 100px;
    background-size: 100% 100%;
    cursor: zoom-in;
    /*transition: transform .2s;  Animation */
}

/* Placeholder shown for maps that exist but have no image yet (nomap). */
.nomap-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    box-sizing: border-box;
}
.nomap-placeholder .nomap-card {
    max-width: 640px;
    padding: 40px 48px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    text-align: center;
}
.nomap-placeholder .nomap-text {
    white-space: pre-line;
    font-size: 22px;
    line-height: 1.5;
    color: #333;
}
.nomap-placeholder .nomap-link {
    margin-top: 18px;
    font-size: 18px;
}
.nomap-placeholder .nomap-link a {
    color: #0979D8;
    text-decoration: none;
}
.nomap-placeholder .nomap-link a:hover {
    text-decoration: underline;
}

/* World map markers (dynamic overview placed by lat/lon) */
.worldlines {
    z-index: 40;
}

/* Vector world map rendered from raw country polygons (Natural Earth GeoJSON).
   Sits beneath the lines/pins/flags. Borders are transparent so the land reads
   as one continuous landmass like the old PNG, but each country is its own
   <path> and can be coloured individually (e.g. on hover). */
.worldcountries {
    z-index: 30;
    pointer-events: none;
}
.worldcountry {
    fill: #333333;
    stroke: none;
    pointer-events: auto;
}

/* Small, non-interactive pin marking the exact geo location of a bubble that
   had to be nudged away to avoid overlapping its neighbours. */
.worldpin {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #0979D8;
    border: 1px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 60;
}

/* Country-flag bubble: a circular flag with the location name overlaid. */
.worldflag {
    position: absolute;
    width: 66px;
    height: 66px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    z-index: 70;
}

.worldflag_img {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55);
    transition: transform .15s ease-in-out;
    overflow: hidden;
}

/* Kept as a sibling of (not a child of) .worldflag_img: the image has a
   transition/transform that promotes it to a GPU layer, and composited layers
   are not re-rasterized by the content `zoom`, which blurs any text inside
   them. Keeping the label outside that layer lets zoom render it crisply. */
.worldflag_label {
    position: relative;
    width: 100%;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    background: rgba(50,50,50,0.8);
    padding: 1px 0;
}

.worldflag:hover {
    opacity: 1.0;
    z-index: 100;
}

.worldflag:hover .worldflag_img {
    transform: scale(1.12);
}

.mapflag_results {
    position: absolute;
	opacity: 1.0; 
	overflow: hidden;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	left: 30px;
	bottom: 0px;
	background-color: rgba(255, 127, 0, 1);	
	font-size:1.5em;
	line-height: 40px;
    visibility: hidden;
    text-align: center;
}

.mapflag:hover{
    opacity: 1.0;
    transform: scale(1.5); /* (150% zoom */
    z-index: 100;
}

.mapflag_address {
    position: absolute;
	opacity: 0.9; 
	overflow: hidden;
	border-radius: 3px;
	width:300px;
	background:#333333;
    text-align: left; padding: 5px;  
    z-index:99; 
    display:none;
}

.headeritem {
    position: relative;
    height: 65px;
    width: 200px;
    margin-top:2px; 
    margin-left: 4px;
    margin-right:4px;
    float:left; 
    display:inline;
    border-radius:5px;
}

.headeritem_text {
    line-height:65px;
    float:left; 
    display:inline;
    margin-left:5px;
    margin-right:5px;
}

.headeritem_floors {
    width:45px; 
    height:45px; 
    margin-top:10px;
    margin-left:5px; 
    border-radius:5px;
    background-color:#0979D8;
    line-height:45px;
    text-align:center;
    color: #FFFFFF;
    font-size:24px;
    font-weight:bold;
    float:left; 
    display:inline;
    opacity: 0.6;
}

.headeritem_floors:hover {
    opacity: 1.0;
}

.headeritem_maps {
    width:140px; 
    height:45px; 
    margin-top:5px;
    margin-bottom:5px;
    margin-left:10px; 
    border-radius:5px;
    background-color:#0979D8;
    line-height:45px;
    text-align:center;
    color: #FFFFFF;
    float:left; 
    display:inline;
    opacity: 0.6;
}

.headeritem_maps:hover {
    opacity: 1.0;
}

/* Location dropdown laid out as columns: real maps on the left, placeholder
   maps (no floor plan yet) in their own column on the right. Each column wraps
   into sub-columns when taller than the viewport (max-height set in JS). */
#mapspanel {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding-right: 10px;
    /* Dynamic-Island-style open animation: the dropdown grows out of the
       location button with a springy overshoot, matching the user menu. The
       transform-origin sits at the top, under the "Göppingen" button. */
    visibility: hidden;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: 80px 0;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.18s ease-out,
        visibility 0s linear 0.42s;
}
#mapspanel.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.12s ease-out,
        visibility 0s;
}
.maps-col {
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
}
/* A column section with its own header (kept outside the wrapping flow so it
   never drifts into a sub-column). */
.maps-section {
    display: flex;
    flex-direction: column;
}
.maps-section-header {
    color: #cfd3d8;
    font-size: 13px;
    text-align: center;
    margin: 6px 10px 2px 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #5f6368;
}
/* Placeholder maps use a muted grey button to signal they have no map yet. */
.headeritem_maps_nomap {
    background-color: #5f6368;
}

.headeritem_picture {
    width:45px; 
    height:45px; 
    margin-top:10px;
    margin-left:5px;
    line-height:65px;
    float:left; 
    display:inline;
    opacity: 0.6;
}

.headeritem_picture:hover {
    opacity: 1.0;
}

.settingsitem {
    position: relative;
    height: 65px;
    width: 90%;
    margin-top:2px; 
    margin-left: 12px;
    margin-right:12px;
    float:left; 
    display:inline;
    border-radius:5px;
}

.settingsitem_linkbutton {
    line-height:45px;
    width:45%;
    float:left; 
    display:inline;
    margin-left:5px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 10px; 
    color: rgb(255, 255, 255); 
    text-align: center;
    background-color: #757975; 
    opacity: 0.8;
}

.settingsitem_linkbutton:hover {
    opacity: 1.0;
}

.settingsitem_text {
    line-height:65px;
    float:left; 
    display:inline;
    margin-left:5px;
    margin-right:5px;
}

.settingsitem_option {
    width:90px; 
    height:45px; 
    margin-left:5px;
    margin-top: 10px;
    line-height:65px;
    float:right; 
    display:inline;
    opacity: 1.0;
}

.settingsitem_option:hover {
    opacity: 1.0;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 80px;
  height: 40px;
  background-color: #dddddd;
  border-radius: 40px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #555;
  border-radius: 40px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 35px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #0979D8;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 40px;
  background-color: #0979D8;
}


.logo {
	position: fixed;
        z-index: 2;
        width: 120px;
        height: 120px;
        padding: 8px;
        opacity:0.8;
}

.logo:hover{
	opacity: 1.0;
}

.zoom {
	position: fixed;
        z-index: 2;
        width: 40px;
        height: 40px;
        padding: 8px;
        opacity:0.6;
}

.zoom:hover{
	opacity: 1.0;
}

.deskball {
 display: inline;
 border-radius: 50%;
 opacity: 1.0;
 position: absolute;
 z-index: 99;
}

/* Health highlight: desks flagged by the consistency check (duplicate names)
   get a pulsing red ring so an editor can locate and fix them. Editor-only —
   the ring is gated on body.editmode so end users never see it. The ring is
   drawn with box-shadow (no layout impact) and outranks the resting state. */
body.editmode .deskball.health_flag {
 box-shadow: 0 0 0 3px rgba(242, 0, 0, 0.9), 0 0 10px 4px rgba(242, 0, 0, 0.6);
 animation: healthFlagPulse 1.2s ease-in-out infinite;
 z-index: 100;
}
@keyframes healthFlagPulse {
 0%   { box-shadow: 0 0 0 2px rgba(242, 0, 0, 0.9), 0 0 6px 2px rgba(242, 0, 0, 0.45); }
 50%  { box-shadow: 0 0 0 4px rgba(242, 0, 0, 1.0), 0 0 14px 6px rgba(242, 0, 0, 0.7); }
 100% { box-shadow: 0 0 0 2px rgba(242, 0, 0, 0.9), 0 0 6px 2px rgba(242, 0, 0, 0.45); }
}

.occupied {
 width: 20px;
 height: 20px;
 background-color:rgba(0, 0, 255, 0.7);
}

.occupiedldap {
    width: 20px;
    height: 20px;
    background-color:rgba(0, 0, 255, 0.7);
   }

.shareddesk {
    width: 20px;
    height: 20px;
    background-color:rgba(0, 0, 255, 0.7);
}

.free {
 width: 20px;
 height: 20px;
 background-color: rgba(180, 180, 180, 0.7);
}

.booking_free {
    width: 20px;
    height: 20px;
    background-color: rgba(61, 173, 30, 0.7);
   }

.booking_booked {
 width: 20px;
 height: 20px;
 background-color: rgba(61, 173, 30, 0.7);
 background-image: url("images/dot.png");
 background-size: cover;
}

.hotseat {
 width: 20px;
 height: 20px;
 background-color: rgba(208, 19, 23, 0.7);
}

.hotseat_free {
    width: 20px;
    height: 20px;
    background-color: rgba(208, 19, 23, 0.7);
   }

.hotseat_booked {
 width: 20px;
 height: 20px;
 background-color: rgba(208, 19, 23, 0.7);
 background-image: url("images/dot.png");
 background-size: cover;
}

.newdesk {
    width: 20px;
    height: 20px;
    background-color: rgba(189, 39, 42, 0.7);
   }

.newmap {
    /* Match the size of the real world-map flag bubbles (.worldflag). */
    width: 66px;
    height: 66px;
    background-color: rgba(189, 39, 42, 0.7);
    background-size: cover;
    /* Sit above the world-map country layer and the .worldflag bubbles
       (z-index 70) so the new-map placeholder marker is always visible. */
    z-index: 80;
}

.blocked {
 width: 20px;
 height: 20px;
 background-color: rgba(180, 180, 180, 0.7);
}

.meeting {
 width: 50px;
 height: 50px;
 background-color: rgba(137, 26, 183, 0.7);
 background-image: url("images/meeting.png");
 background-size: cover;
}

.meeting_indicator {
    width: 50px;
    height: 25px;
    border-radius: 0px 0px 25px 25px;
    background-color: transparent;
}

.printer {
 width: 36px;
 height: 36px;
 background-color: rgba(50,50,50,0.7);
 background-image: url("images/printer.png");
 background-size: cover;
}

.firstaid {
 width: 36px;
 height: 36px;
 background-color: rgba(220,50,50,0.7);
 background-image: url("images/firstaid.png");
 background-size: cover;
}

.restroom {
 width: 50px;
 height: 50px;
 background-color: rgba(78, 81, 100, 0.7);
 background-image: url("images/restroom.png");
 background-size: cover;
}

.food {
 width: 36px;
 height: 36px;
 background-color: rgba(215, 125, 40, 0.7);
 background-image: url("images/food.png");
 background-size: cover;
}

.service {
 width: 36px;
 height: 36px;
 background-color: rgba(70, 190, 190, 0.7);
 background-image: url("images/service.png");
 background-size: cover;
}

.exit {
 width: 50px;
 height: 50px;
 background-color: rgba(84, 185, 72, 0.7);
 background-image: url("images/exit.png");
 background-size: cover;
}

.keycardlock {
 width: 36px;
 height: 36px;
 background-color: rgba(240, 220, 0, 0.7);
 background-image: url("images/keycardlock.png");
 background-size: cover;
}

.keylock {
 width: 36px;
 height: 36px;
 background-color: rgba(240, 220, 0, 0.7);
 background-image: url("images/keylock.png");
 background-size: cover;
}

.floor {
 width: 100px;
 height: 100px;
 background-color: #d017a8b3;
}

/* Floor navigation rail (right edge of the map) and its marker tabs. */
.floor_rail {
    position: absolute;
    top: 0;
    width: 3px;
    background: rgba(208, 23, 168, 0.45);
    z-index: 90;
    display: none;
}
.floor_rail.visible {
    display: block;
}
.floor_tab {
    position: absolute;
    z-index: 91;
    min-width: 26px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #d017a8;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    border-radius: 5px 0 0 5px;
    box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    user-select: none;
    /* Floor markers are an editor-only affordance: hidden for end users, shown
       only while editing (body.editmode is set in applyUsermodeUI). Use
       visibility (not display:none) so the marker keeps its geometry in view
       mode; otherwise getBoundingClientRect() returns zeros and the header
       floor links can't scroll to the anchor. */
    visibility: hidden;
    pointer-events: none;
}
body.editmode .floor_tab {
    visibility: visible;
    pointer-events: auto;
}
.floor_tab:hover {
    background-color: #ec2bbf;
}
.floor_tab_label {
    pointer-events: none;
}

.caption {
    top:100%; 
    left:50%;
    margin-left:-50px; 
    position:absolute; 
    z-index: 100; 
    width:100px;
    border-radius: 3px;
    color:#FF7F00;
    background:rgba(51, 51, 51, 0.7);
    text-align:center;
    visibility: hidden;
    font-size: 8px;
}

.consistency {
    display: inline;
    position: relative;
    margin: 0px;
}

/* Left tooltip (for most right items only) */
.consistency .tooltiptext_left {
    visibility: hidden;
    width: 600px;
    min-height: 220px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    margin: 10px;
    border-radius: 6px;
    bottom:70px;
    right: -200px; 
    /* Position the tooltip text - see examples below! */
    position: absolute;
}

/* Show the tooltip text when you mouse over the tooltip container */
.consistency:hover .tooltiptext_left {
    visibility: visible;
}

.consistency .tooltiptext_left::after {
    content: " ";
    position: absolute;
    bottom: 0%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
    visibility: hidden;
}

input[type=text], input[type=password], select {
    -webkit-appearance:none;
    -webkit-border-radius: 0px;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: Roboto, Arial, Helvetica;
    font-size: 14px;
    opacity: 0.8;
}

select:hover {
    opacity: 1.0;
}

input[type=submit], input[type=button] {
    -webkit-appearance:none;
    -webkit-border-radius: 0px;
    width: 100%;
    background-color: #FF7F00;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: Roboto, Arial, Helvetica;
    font-size: 14px;
    opacity: 0.8;
}

input[type=submit]:hover, input[type=button]:hover {
    background-color: #ffa200;
    font-family: Roboto, Arial, Helvetica;
    font-size: 14px;
    opacity: 1.0;
}

.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 12px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}

/* Active state */

.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

.deskstats {
    width:490px;
    margin:10px;
    padding:10px;
    float:left;
    background-color:#333333;
    border-radius:10px;
    /*visibility:hidden;*/
}

.calendar {
    width:180px;
    border-radius:5px;
    overflow:hidden;
    float:left;
}

.calendar_label {
    width:36px;
    height:16px;
    background-color:#333;
    float:left;
    text-align: center;
    line-height:16px;
    margin-bottom:2px;
}

.calendarday_neutral {
    width:36px;
    height:27px;
    background-color:#333;
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color:#fff;
    cursor:pointer;
}

.calendarday_neutral:hover {
    color:rgba(255, 127, 0, 1);
}

.calendarday_userdate {
    width:36px;
    height:27px;
    background-color:#333;
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color: rgb(216, 196, 22);
    cursor:pointer;
}

.calendarday_userdate:hover {
    color:rgba(255, 127, 0, 1);
}

.calendarday_free {
    width:36px;
    height:27px;
    background-color:rgba(61, 173, 30,1.0);
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color:#fff;
    cursor:pointer;
}

.calendarday_free:hover {
    background-color:#fff;
    color:#000;
}

.calendarday_booked {
    width:36px;
    height:27px;
    background-color:rgb(163, 13, 13);
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color:white;
    cursor:not-allowed;
}

.calendarday_userbooked {
    width:36px;
    height:27px;
    background-color:rgb(216, 196, 22);
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color:white;
    cursor:not-allowed;
}

.calendarday_past {
    width:36px;
    height:27px;
    background-color:#606060;
    float:left;
    text-align: center;
    line-height:27px;
    font-weight: bold;
    color:white;
    cursor:not-allowed;
}

.editbutton {
    float:right; 
    margin:5px; 
    width:80px; 
    height:80px;
    background-color: #333;
    background-size: cover;
    border-radius:50%;
}

/* Adminpanel button in the left control row: sized to match the 60px
   usermode toggle instead of the classic 80px edit buttons. */
#adminpanel_button {
    width:60px;
    height:60px;
}

.editbutton:hover {
    background-color: #559F35;
}

#adminpanel_button.menu-open {
    background-color: #444;
}

#adminpanel_button.menu-open:hover {
    background-color: #559F35;
}

/* Modern world-map "add location" plus button: matches the adminpanel button
   colour (#333) instead of the classic red add.png image. */
.worldmap-add-btn {
    width: 80px;
    height: 80px;
    background-color: #333;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

/* Add button in the bottom-right control row: matches the health/edit boxes
   and turns green on hover. */
#inputgrid {
    background-color: #333;
    transition: background-color 0.15s ease;
}
#inputgrid:hover {
    background-color: #559F35;
}
.worldmap-add-btn:hover {
    background-color: #559F35;
}
.worldmap-add-btn::before,
.worldmap-add-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    border-radius: 2px;
}
.worldmap-add-btn::before {
    width: 10px;
    height: 40px;
    transform: translate(-50%, -50%);
}
.worldmap-add-btn::after {
    width: 40px;
    height: 10px;
    transform: translate(-50%, -50%);
}

/* Login / logout icon buttons: a white icon centred on a circle whose
   background colour switches on hover (replaces the old regular/hover image
   swap). Sizing is supplied per-instance via width/height. */
.iconbtn-circle {
    background-color: #333;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 55%;
    border-radius: 50%;
    cursor: pointer;
}
.iconbtn-circle:hover {
    background-color: #559F35;
}
.iconbtn-login {
    background-image: url("images/login.png");
}
.iconbtn-logout {
    background-image: url("images/logout.png");
}
.iconbtn-upload {
    background-image: url("images/avatar-upload2.png");
}
.iconbtn-remove {
    background-image: url("images/avatar-delete2.png");
}
/* Colour variants for the user-menu action buttons: the avatar upload/remove
   buttons use the app blue, the logout button is red. */
.iconbtn-blue {
    background-color: #0979D8;
}
.iconbtn-blue:hover {
    background-color: #0563b0;
}
.iconbtn-red {
    background-color: #EA4335;
}
.iconbtn-red:hover {
    background-color: #c5221f;
}
/* Plain (no circle) icon button: just the icon image, dimmed by default and
   fully opaque on hover. */
.iconbtn-plain {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    opacity: 0.7;
}
.iconbtn-plain:hover {
    opacity: 1.0;
    /* Tint the white icon red on hover (#e74c3c). The leading
       brightness(0) normalises the white source to black so the
       following sepia/saturate/hue-rotate chain lands on true red
       instead of orange. */
    filter: brightness(0) saturate(100%) invert(36%) sepia(51%) saturate(2878%) hue-rotate(335deg) brightness(91%) contrast(89%);
}

/* Edit/user mode toggle switch (replaces the old text button). When "on"
   (edit mode) the track turns green and the knob slides right; when off
   (user mode) it is grey and the editor-only plus button is hidden. */
.usermode-toggle {
    float: right;
    margin: 5px;
    width: 80px;
    background-color: #333;
    border-radius: 16px;
    cursor: pointer;
    text-align: center;
    padding: 8px 0;
    box-sizing: border-box;
    user-select: none;
}
.usermode-toggle .usermode-toggle-label {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 6px;
}
.usermode-toggle .usermode-toggle-track {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 22px;
    border-radius: 11px;
    background-color: #777;
    transition: background-color 0.15s ease;
}
.usermode-toggle .usermode-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #fff;
    transition: left 0.15s ease;
}
.usermode-toggle.on .usermode-toggle-track {
    background-color: #559F35;
}
.usermode-toggle.on .usermode-toggle-knob {
    left: 24px;
}

/* Slide-in "Add map" panel for the dynamic world-map overview */
.worldmap-add-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    background: #2b2b2b;
    color: #eee;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    z-index: 6;
    /* Dynamic-Island-style open: grow out of the + button with a springy
       overshoot. The transform-origin is set dynamically in openWorldMapAdd()
       to point at the add button's position. */
    visibility: hidden;
    opacity: 0;
    transform: scale(0.2);
    transform-origin: top right;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.18s ease-out,
        visibility 0s linear 0.42s;
    overflow: hidden;
}
.worldmap-add-panel > * {
    opacity: 0;
    transition: opacity 0.14s ease-out;
}
.worldmap-add-panel.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition:
        transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1),
        opacity 0.12s ease-out,
        visibility 0s;
}
/* Fade the contents in once the shape has mostly expanded. */
.worldmap-add-panel.open > * {
    opacity: 1;
    transition: opacity 0.2s ease-out 0.16s;
}
.worldmap-add-panel .wma-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #333;
    border-bottom: 1px solid #444;
}
.worldmap-add-panel .wma-title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.worldmap-add-panel .wma-close {
    background: none;
    border: none;
    color: #bbb;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.worldmap-add-panel .wma-close:hover {
    color: #fff;
}
.worldmap-add-panel .wma-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 18px;
}
.worldmap-add-panel .wma-label {
    display: block;
    font-size: 13px;
    color: #cfd3d8;
    margin: 12px 0 4px;
}
.worldmap-add-panel .wma-label:first-child {
    margin-top: 0;
}
.worldmap-add-panel .wma-optional {
    color: #8a9099;
    font-weight: normal;
}
.worldmap-add-panel .wma-input {
    width: 100%;
    box-sizing: border-box;
    background: #1f1f1f;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 9px 10px;
    outline: none;
}
.worldmap-add-panel .wma-input:focus {
    border-color: #0979D8;
}
.worldmap-add-panel .wma-textarea {
    resize: vertical;
    min-height: 56px;
}
.worldmap-add-panel select.wma-input {
    cursor: pointer;
}
.worldmap-add-panel .wma-file {
    padding: 7px 10px;
    font-size: 13px;
}
.worldmap-add-panel .wma-namerow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.worldmap-add-panel .wma-flag {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px #555;
}
.worldmap-add-panel .wma-msg {
    font-size: 12px;
    margin-top: 6px;
    min-height: 16px;
    color: #ccc;
}
.worldmap-add-panel .wma-advanced-toggle {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: #7fb6ff;
    font-size: 13px;
    cursor: pointer;
    padding: 14px 0 4px;
}
.worldmap-add-panel .wma-advanced-toggle:hover {
    color: #a9d0ff;
}
.worldmap-add-panel .wma-advanced-toggle.open {
    color: #a9d0ff;
}
.worldmap-add-panel .wma-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    background: #333;
    border-top: 1px solid #444;
}
.worldmap-add-panel .wma-btn {
    flex: 1 1 0;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 0;
    cursor: pointer;
    color: #fff;
}
.worldmap-add-panel .wma-btn-cancel {
    background: #555;
}
.worldmap-add-panel .wma-btn-cancel:hover {
    background: #666;
}
.worldmap-add-panel .wma-btn-create {
    background: #559F35;
}
.worldmap-add-panel .wma-btn-create:hover {
    background: #63b840;
}
.worldmap-add-panel .wma-btn-create:disabled {
    background: #444;
    color: #888;
    cursor: default;
}