* {
    /* border: 1px solid red; */
}

:root {
    --primary: #fa8420;
}

body {
    margin: 0;
    font-family: 'AptosX', Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.prevent-select,
.blocked {
    cursor: not-allowed !important;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
  }
.is-invalid {
    border-color: rgba(250, 69, 53, 1);
    box-shadow: 0 0 0 0.2rem rgba(250, 69, 53, .25);
}
.show {
    display: block !important;
}

.dim {
    opacity: 0.2;
}

.dim2 {
    opacity: 0.1;
}

#legendDetail .dim2,
#legendFeatureDetail .dim2 {
    opacity: 0.5;
}

.container>#store-booking-map {
    max-width: 100% !important;
}

.support-always-on-top.map-view {
    top : 110px;
    z-index : 1040;
    bottom : auto;
    background-color : white!important;
    color : var(--primary)!important;
}

.map {
    background: rgb(253, 249, 243);
    /* background: rgb(225 225 225); */
    padding: 15px 0px 15px 0px;
    height: 100%;
    width: 100%;
    box-shadow: 0px 2px 4px 4px #dee2e6 inset;
}
#main-svg-pan-zoom_viewport {
    /* background: rgb(253, 249, 243); */
    background: rgb(225 225 225);
}

#g-pan-zoom_viewport {
    background: rgb(253, 249, 243);
}

#top-left-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100vw - 480px);
    height: 100px;
    z-index: 41;
}

#top-right-container {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 480px;
    height: 100px;
    z-index: 40;
    padding: 1rem;
}

#bottom-left-container {
    position: absolute;
    top: 100px;
    left: 0px;
    width: calc(100vw - 480px);
    height: calc(100vh - 259px);
    z-index: 40;
    overflow-y: hidden;
    overflow-x: hidden;
}

#bottom-left-container.full-screen{
    top: 0px;
    width: calc(100vw);
    height: calc(100vh - 159px);
}

#right-container {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 480px;
    height: calc(100vh - 159px);
    z-index: 40;
    padding: 1rem;
    overflow-y: hidden;
    overflow-x: hidden;
}

#bottom-right-container.full-height {
    top: 0px;
    height: calc(100vh - 159px);
}

#bay-booking-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 94px;
    height: 65px;
    width: 100vw;
    overflow: hidden;
    background-color: #fa8420DD !important;
    transition: all 0.2s ease-in-out;
}

#bay-booking-header h2 {
    padding: 0px;
    color: white;
    font-weight: 700;
}

#bay-booking-details {
    /* display: flex; */
    /* flex-direction: row; */
    position: relative;
    /* top: calc(94px); */
    height: 100px;
    width: 100%;
    background-color: #ffffff !important;
}

#bay-booking-details .bay-booking-details__inner {
    z-index: 101;
    /* position: relative; */
    /* absolute; */
    height: 100%;
    width: 100%; /* calc(100% - 480px); */
    padding: 1rem 1rem;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.8rem;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
    color: #000000;
    /* float: left; */
    border: none;
}

#bay-booking-details .bay-booking-details__inner>div>div {
    padding: 0.15rem 0rem;
}

#bay-booking-details.expanded .bay-booking-details__inner {
    height: 300%;
    overflow: auto;
}

#top-left-container-expand-down-arrow {
    float: right;
    position: relative;
    top: -2.1rem;
    background-color: #ffffff;
    border: none;
    padding: 0.5rem;
    margin: 0rem 0rem 0.5rem 0.5rem;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    font-size: 1rem;
    color: var(--primary);
    box-shadow: 0px -3px 3px 3px #21202021;
}

#bottom-left-container-left-arrow {
    position: absolute;
    float: left;
    background-color: #ffffff;
    border: none;
    padding: 0.5rem;
    margin: 0rem;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
    font-size: 1rem;
    color: var(--primary);
    box-shadow: 0px 5px 3px 3px #21202021;
    z-index: 2;
}

.bay-booking-details__label {
    font-weight: 700;
}
.bay-booking-details__value {
    color: #888;
}

#bay-booking-details .bay-booking-details__filter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* align-items: center; */
    height: 100%;
    width: 473px;
    padding: 0.5rem 0.5rem;
    background-color: #abadad22;
    float: left;
    font-size: 0.8rem;
    border: none;
}

#master-map-container {
    position: relative;
    display: flex;
    top: 94px;
    z-index: 11;
    width: 100vw;
    height: calc(100vh - 94px - 65px);
    background-color: #ffffff;
    /* above footer */
    ::-webkit-scrollbar {
        width: 5px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 4px rgb(173, 173, 173); 
        border-radius: 2px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: var(--primary); 
        border-radius: 2px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: var(--primary); 
      }
}

#bay-container {
    width: 100%;
    height: 100%;
}

#map-container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    width: auto;
    height: inherit;
    overflow: hidden;
}

#map__nav {
    width: 480px;
    height: calc(100vh - 259px);
    padding: 15px 0px 54px 0px;
    overflow-y: auto;
    background: white;
}

.zoomer__controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
}

.zoomer__control--disabled .reset, 
.zoomer__control--disabled .zoomout,
.zoomer__control--disabled .zoomin {
    opacity: .25;
}

.zoomer__control--reset, .zoomer__control--zoomout {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 0 5px;
    border: 1px solid #ccc;
    background: #fff;
}

.zoomer__control--zoomin {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 0 0px;
    border: 1px solid #ccc;
    background: #fff;
}

/* .zoomer__controls button {
    width: 40px;
    padding: 6px;
} */
.zoomer__control--reset svg,
.zoomer__control--zoomin svg,
.zoomer__control--zoomout svg {
    display: inline-block;
    width: 26px;
    height: 22px;
    vertical-align: bottom;
    fill: #fa8420;
}

.zoomer__control--reset,
.zoomer__control--zoomin,
.zoomer__control--zoomout {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

#zoomer__map {
    /* transform: translate3d(0px, 0px, 1px) scale3d(1, 1, 1); */
    /* width: 500%; */
    height: calc(100vh - 289px);
}

#zoomer__map.full-screen {
    /* transform: translate3d(0px, 0px, 1px) scale3d(1, 1, 1);
    width: 500%; */
    height: calc(100vh - 189px);
}

#map-legend {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: auto;
}

#map-feature-legend {
    position: absolute;
    right: 12rem;
    bottom: 1rem;
    left: auto;
}

g:hover > rect:not(.sidecapArea, .hotelAreaSpace, .floorAreaSpace, .disabled, .xblockArea, .blocked) {
    fill: rgba(0, 196, 0, 0.5) !important;
}

.exteriorwall {
    fill: var(--dark);
    stroke: rgb(0 123 255 / 28%);
    stroke-width: 8px;
}

.interiorwall {
    fill: var(--dark);
    stroke: #535353;
    stroke-width: 4px;
}

.separatingwall {
    fill: none; /* var(--dark); */
    stroke-dasharray: 20,10,5,5,5,10;
    stroke: #959595;
    stroke-width: 3px;
}

.mapLabel {
    fill: #4f4c6b;
    font-size: 5rem;
    font-weight: 500;
    opacity: 0.5;
}
.mapLabel-small {
    fill: #4f4c6b;
    font-size: 2.4rem;
    font-weight: 500;
    opacity: 0.9;
}
.mapLabel.number {
    font-size: 6rem;
    font-weight: 700;
}

.bay {
    stroke: #ffffff;
    stroke-width: 1px;
}

.selected.edit-mode {
    fill: rgb(0, 189, 0) !important;
    animation: blinker 1s linear infinite;
}
  
@keyframes blinker {
50% {
    opacity: 0;
}
}

.bay.selected {
    fill: rgb(0, 196, 0) !important;
}

.always-available.selected {
    fill: rgb(0, 196, 0) !important;
}

/* .always-available { fill: var(--light); } */
.hotelAreaSpace { fill: #f92df733; }
.floorAreaSpace { fill: #ffe4c5; }
.sidecapArea { fill: #007bff40; }

.power { fill: #2d8cf9aa; }

.corewall,
.core.wall,
.core-wall { fill: #f92df7aa; }

.half-corewall,
.half.core.wall,
.half-core-wall { fill: #f92df780; }

.slotwall,
.slot.wall,
.slot-wall { fill: #cadd00c9; }

.lockupcage,
.lock.up.cage,
.lock-up-cage { fill: #45bd01c9; }

.available { fill: var(--primary); }
/* .available { fill: #0b851b; } */

.booked { 
    opacity: 0.5;
    fill: var(--dark);
}

.blocked {
    fill: var(--dark);
}

.future {
    fill: #9b948b;
}

/* .expired { fill: #f7f5f5; stroke: #000; stroke-width: 1px; } */
.expired { fill: #e00404; stroke: #ffffff; stroke-width: 1px; }

.active { fill: #ffc99c; }
/* .active { fill: #ffd82d; stroke: #000000; stroke-width: 1px; } */

.bay~text {
    font-size: 1rem;
    font-weight: 700;
    fill: white;
}

.expired~text { fill: #000; }
/* .expired~text { fill: #fff; } */
.active~text { fill: #000; }
.available~text { fill: #fff; }

.floor~text {
    fill: #fff;
    font-size: 1.3rem;
}

.floor.addPlusSign~text {
    fill: #fff;
    font-size: 13rem;
}

.floor.addPlusSign.selected~text {
    font-size: 9rem;
}

rect {
    /* transition: all 0.2s ease-in-out; */
    filter: drop-shadow(1px 1px 2px rgb(220 180 0 / 0.4));
}

.blockArea~text {
    fill: #fff;
    font-size: 7rem;
}

/*** MAP LEGEND ***/
.map-legend-outer .map-legend-content {
    padding: 0rem 1rem;
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    border-color: rgb(235, 235, 235);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 12px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
}

.ml-header {
    display: flex;
    -webkit-box-align: center;
    align-items: flex-start;
    flex-direction: column;
}

.map-legend-content .ml-button {
    padding: 8px;
}

.ml-button-content {
    background: transparent;
    border: none;
    border-radius: 0px;
    display: block;
    padding: 0px;
    text-align: left;
    width: 100%;
}

.ml-button-detail {
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

/*
.klBHCp {
    width: 100%;
}
*/
.ml-button-legend {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-transform: none;
    color: rgb(38, 38, 38);
}

.ml-item-container {
    height: 0px;
    display: flex;
    -webkit-box-align: end;
    align-items: end;
    flex-direction: column;
    width: 100%;
    /* transition: all 0.15s ease-in-out; */
}

.ml-item-container.open {
    height: 100%;
}

#legendDetailArrow {
    transition: all 0.2s ease-in-out;
    transform: rotate(180deg);
}

#legendDetailArrow.rotate-180 {
    transition: all 0.2s ease-in-out;
    transform: rotate(0deg);
}


.ml-item {
    padding: 8px 0px;
    margin: 0px;
    width: 100%;
    list-style: none;
    border-top: 1px solid rgb(235, 235, 235);
}

.ml-item-li {
    padding: 4px 0px;
}
.ml-item-li:hover {
    cursor: pointer;
    font-weight: 600;
}

.ml-item-li>div {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
    line-height: 1.5;
}

.ml-item-li-bullet {
    align-self: center;
}

.ml-item-li-bullet svg {
    width: 16px;
    height: 16px;
    /* fill: rgb(255, 255, 255); */
}

#map-popup {
    width: 25rem;
    position: absolute;
    /* top: 20rem;
    left: 20rem; */
    background: white;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 12px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
    border-radius: 0.5rem;
    z-index: 2050;
    border-color: transparent;
}

#map-popup .popup__value {
    font-weight: 600;
    color: black;
}

#map-popup .popup__label {
    font-weight: 400;
    color: #a8a8a8;
}

#bay-booking-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bay-booking-history-item {
    padding: 0.75rem;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 12px 12px 0px, rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
}

.popup__close {
    position: absolute;
    right: 20px;
    top: 15px;
}

/* MAP__NAV */
.bay-list-slider {
    height: calc(100vh - 259px - 110px);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: inset 0px 0px 5px 3px #e9e9e9;
}

.bay-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.bay-list-header-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid #d3d3d3;
    font-weight: 600;
}

.bay-list-body-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
    border-bottom: 1px solid #d3d3d3;
    font-weight: 400;
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 0px 2px 0px; */
}

.bay-list-body-item>div:nth-child(3) {
    text-align: end;
}

.bay-list-body-item i {
    font-size: 1.2rem;
}

.bay-list-body-item .bay-dimensions {
    /* font-size: 0.8rem; */
    color: #a8a8a8;
}

.bay-list-body-item i.fa-circle-plus {
    font-size: 1.4rem;
}

.bay-list-body-item i.fa-circle-check {
    font-size: 1.6rem;
    font-weight: 500;
}

.bay-list-header-item.active,
.bay-list-header-item:hover {
    color: #ff7300;
    border-bottom: 3px solid #ff7300;
}

.bay-list-body {
    padding: 0rem;
    display: grid;
    gap: 0.1rem;
}

.selected-bay-type {
    color: darkorange;
}

#removalDate.form-control ,
#setupDate.form-control {
    padding-right: 12px;
}

.button-form-control {
    display: block;
    background-color: #ffffff;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.175rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--primary);
    background-clip: padding-box;
    border: 1px solid var(--primary) !important;
    border-radius: 0.25rem;
    transition: all .15s ease-in-out;
}

.button-form-control:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: #ffffff;
}

.filter-form-control {
    display: block;
    background-color: #ffffff;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.175rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ff7300;
    /* round-color: #fff; */
    background-clip: padding-box;
    border: 1px solid #ff7300;
    /* #ced4da; */
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#map__nav-filter-container.open {
    right: 0px;
    box-shadow: 0px 9px 4px 6px #7575753d;
}
#map__nav-filter-container {
    position: fixed;
    width: 500px;
    right: -500px;
    height: calc(100vh - 94px - 65px);
    /* top: 0px; */
    z-index: 102;
    background-color: #f5f5f5;
    transition: right 0.3s ease-in-out;
    box-shadow: 0px 9px 4px 6px #75757500;
}

.map__nav-filter-header-title {
    padding: 1rem;
    font-size: 2rem;
    padding-top: 2rem;
}

.map__nav-filter-body-item {
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 400;
}

.map__nav-filter-body-item .switch {
    scale: 0.7;
}

#booking-request-details-sidebar-header,
#bay-list-header2 {
    height: 2rem;
    position: sticky;
}

#booking-request-details-sidebar-body{
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 259px - 8rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.loading-map {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222;
    opacity: 0.98;
    transition: all 0.2s ease-in-out;
}

.booking-tab-link {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 259px - 4rem);
    overflow-y: auto;
    overflow-x: hidden;
    background: #e5e5e573;
}

.booking-tab-link .tab-pane {
    padding: 0.5rem;
}

.Tab-Project-Title {
    font-size: 1.1rem;
}

.Tab-Project-Dates {
    font-size: 0.8rem;
}

#expired-booking-details-sidebar-header,
#edit-bay-details-sidebar-header {
    height: 40px;
    position: sticky;
}

#expired-booking-details-sidebar-tabs,
#edit-bay-details-sidebar-tabs {
    height: 50px;
    position: sticky;
}

#expired-booking-details-sidebar .nav-link,
#edit-bay-details-sidebar .nav-link {
    color: var(--primary)!important;
    background-color: white!important;
    border-color: #e9ecef #e9ecef #dee2e6;
    opacity: 0.7;
}

#expired-booking-details-sidebar .nav-link.active,
#edit-bay-details-sidebar .nav-link.active {
    background-color: var(--primary)!important;
    color: white!important;
    opacity: 1.0;
}

#expired-booking-details-sidebar-body {
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 159px - 8rem);
    overflow-y: auto;
    overflow-x: hidden;
}

#booking-request-details-sidebar-footer,
#expired-booking-details-sidebar-footer {
    background-color: white;
    padding: 1rem 1rem 0rem 1rem;
    height: 3rem;
    position: absolute;
    bottom: 1rem;
    left: 0rem;
    width: -webkit-fill-available;
    box-shadow: 0px -4px 5px 0px #e9e9e9;
}

#expired-booking-details-sidebar .tab-pane .card,
#edit-bay-details-sidebar .tab-pane .card {
    border: none;
    box-shadow: 0px 0px 2px 3px #efefef;
    background-color: #FFF !important;
    margin-top: 0.25rem;
}

.popup__header {
    height: 16px;
}

.fa-circle-xmark {
    color: var(--primary);
    scale: 1.5;
}

.map__nav-filter-body {
    padding: 1rem;
}

.map__nav-filter-body-item {
    padding: 1rem;
}

.floor-area-font-lg { font-size: 1.5rem; }
.floor-area-font-md { font-size: 1.2rem; }
.floor-area-font-sm { font-size: 1rem; }
.floor-area-font-x-sm { font-size: 0.75rem; }