:root {
    /* --default: #6c757d; */
    --default: #494a4b;
    --default-dark: #283241;
    --font-dark: #0D0D0D;
    --font-light: #FFFFFF;
    --font-brand: #266dad;
    --font-warning: #FF1111;
    --font-success: green;
    --color-offGray: #EFEFEF;
    --color-map: #FFBBBB;
    --main-radius: 5px;
    --main-padding: 10px;
    /* theme--------- */
    /* --background: #EFEEEE; */
    --background: #EFEEEF;
    --hover: rgba(255, 255, 255, .2);
    --Active: rgba(240, 240, 240, 0.6);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-light: rgba(255, 255, 255, 0.6);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', Tahoma, sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--font-dark);
    padding: 0;
    margin: 0;
    overflow: auto;
    background-color: var(--background);
    color: var(--default);
}

input, textarea, button, select, a, div, img {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}

p {
    text-align: justify;
}

Link {
    color: var(--font-brand);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c4c4c4;
}

/* ::-webkit-scrollbar-track {
    border: .2px solid #9a9a9b;
} */

.centerPara {
    text-align: center;
}

.conetnt-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2%;
    padding-top: .53in;
}

.content-Grid {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-auto-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px; */
}

.btn {
    cursor: pointer;
    background-color: var(--background);
    box-shadow: 3px 3px 3px var(--shadow-dark), -5px -5px 5px var(--shadow-light);
    border-radius: var(--main-radius);
    color: var(--default);
    font-weight: 500;
}

.btn:hover {
    background-color: var(--hover);
}

.btn:active {
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
    color: var(--font-brand);
}

.btnNavigation {
    cursor: pointer;
    background-color: var(--background);
    box-shadow: 1px 1px 1px var(--shadow-dark), -2px -2px 2px var(--shadow-light);
    color: var(--default);
    font-weight: 500;
    border: .1px solid #d3d1d1;
}

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

.btnNavigation:active {
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
    color: var(--font-brand);
}

.btn2:hover {
    background-color: var(--hover);
}

.btn2:active {
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
    color: var(--font-brand);
}

.txt {
    box-shadow: 2px 2px 2px var(--shadow-dark) inset, -2px -2px 2px var(--shadow-light) inset;
    background-color: var(--font-light);
    border-radius: var(--main-radius);
    display: flex;
    align-items: center;
}

.noDisplay {
    display: none!important;
}

.all-center {
    display: grid;
    place-items: center;
}

.flex-adjust{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.flex-adjust-max{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between!important;
    padding: 0!important;
}
.text-center {
    text-align: center;
}

.vert-center {
    display: flex;
    align-content: center;
}

.text-left {
    text-align: left;
    position: relative;
    left: 0;
    width: auto;
}

.header {
    z-index: 1001;
    position: absolute;
    width: 100%;
    height: .53in;
    left: 0;
    top: 0;
    box-shadow: 0 3px 3px var(--shadow-dark), 0 -5px 5px var(--shadow-light);
    background-color: var(--background);
}

.incluhead {
    position: relative;
    float: left;
    height: 100%;
    padding: 10px;
    padding-left: .53in;
    /* grid-area: 1 / 2 / 2 / 15;  */
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--default);
}

.incluhead-right {
    position: relative;
    float: right;
    height: 100%;
    padding: 10px;
    padding-right: .53in;
    /* grid-area: 1 / 2 / 2 / 15;  */
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--default);
}

.incluHome {
    position: relative;
    float: left;
    height: 100%;
    padding: 12px;
    padding-left: .53in;
    /* grid-area: 1 / 2 / 2 / 15;  */
    display: flex;
    align-items: center;
    content: url("../images/icons/iconset/home.svg");
    opacity: .8;
}

.pointer:hover {
    cursor: pointer;
}

.incluheadlogo {
    position: absolute;
    left: 64px;
    height: 25px;
    top: 7.5px;
}

.headRightControls {
    position: absolute;
    height: 100%;
    right: .53in;
    width: auto;
}

.profile {
    float: right;
    height: 100%;
    width: 1.5in;
    padding: 10px;
    /* grid-area: 1 / 27 / 2 / 31;  */
    cursor: pointer;
    z-index: 1;
    text-align: center;
    font-weight: 600;
}

.profile:hover {
    background-color: var(--font-light);
}

.help {
    float: left;
    height: 100%;
    width: 1.5in;
    padding: 10px;
    /* grid-area: 1 / 25 / 2 / 27;  */
    cursor: pointer;
    z-index: 1;
    text-align: center;
    font-weight: 600;
}

.help:hover {
    background-color: var(--font-light);
}

.profileCard {
    position: absolute;
    right: .53in;
    top: .56in;
    width: 1.5in;
    background-color: var(--font-light);
    z-index: 2;
    box-shadow: 2px 3px 3px var(--shadow-dark), -2px 0 5px var(--shadow-dark);
    border-radius: 0 0 5px 5px;
    z-index: 3;
}

.helpCard {
    position: absolute;
    z-index: 2;
    top: .56in;
    right: 2.03in;
    width: 1.5in;
    background-color: var(--font-light);
    z-index: 99;
    background-color: var(--font-light);
    z-index: 55;
    box-shadow: 2px 3px 3px var(--shadow-dark), -2px 0 5px var(--shadow-dark);
    border-radius: 0 0 5px 5px;
    z-index: 3;
}

.helpcardDiv {
    width: 100%;
    padding: 12px;
    cursor: pointer;
    text-align: center;
}

.helpcardDiv:hover {
    background-color: var(--color-offGray);
}

/* -------------------------- */

.dashContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: .53in;
    display: flex;
}

.dashLeftPan {
    position: relative;
    left: 0;
    top: 0;
    /* width: 20%; */
    width: 2.56in;
    height: 100%;
    background-image: url("../images/pics/paper.png");
}

.dashRightPan {
    position: relative;
    top: 0;
    /* width: 80%; */
    width: calc(100% - 2.53in);
    height: 100%;
    background-color: var(--font-light);
    overflow-y: auto;
    overflow-x: auto;
    background-image: url("../images/pics/paper.png");
}

.addNew {
    /* grid-area: 3 / 2 / 6 / 5; */
    font-size: 16px;
    padding: 20px;
    height: 1.5in;
    width: 1.5in;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: .5in;
}

.addNew2 {
    /* grid-area: 3 / 2 / 6 / 5; */
    font-size: 16px;
    padding: 20px;
    height: 1in;
    width: 2.5in;
    text-align: center;
    position: relative;
    left: 0;
    top: .5in;
}

.dashRightSubPan {
    position: absolute;
    top: 2.25in;
    width: 2.5in;
    max-height: calc(100% - 2.25in);
    display: grid;
    place-items: center;
    overflow: auto!important;
    border: .1px solid #d3d1d1;
}

.dashRightSubPanEditor {
    /* position: absolute;
    top: .5in;
    width: 2in;
    height: auto;
    max-height: calc(100% - .5in);
    overflow-y: auto;
    overflow-x: auto;
    display: grid;
    place-items: center;
    overflow: auto!important;
    border-top: .1px solid #d3d1d1;
    border-right: .1px solid #d3d1d1; */
    position: absolute;
    top: .5in;
    width: 2in;
    height: auto;
    max-height: calc(100% - .5in);
    overflow-y: auto;
    overflow-x: auto;
    display: grid;
    place-items: center;
    overflow: auto!important;
    border-top: .5px solid #494a4b;
    border-right: .5px solid #494a4b;
    border-radius: 5px;
}

/* .dashRightSubPan::-webkit-scrollbar {
    width: 0;
    background: transparent;
} */

/* .dashRightSubPanEditor::-webkit-scrollbar {
    width: 0;
    background: transparent;
} */

.navDivPrimary {
    position: relative;
    width: 100%;
    height: .75in;
    text-align: center;
    padding: 10px;
    border-radius: 0!important;
}

.navDivPrimaryEditor {
    position: relative;
    width: 100%;
    height: .75in;
    text-align: center;
    padding: 10px;
    border: .2px solid#bcbcbd;
    border-radius: 0!important;
}

.navDivPrimaryEditor:hover {
    background-color: var(--background);
}

.navDivSecondary {
    position: relative;
    width: 99%;
    height: .5in;
    text-align: center;
    margin-bottom: 1px;
    border: .1px solid #e2e2e2;
}

.navDivSecondaryEditor {
    position: relative;
    width: 99.9%;
    height: .5in;
    text-align: center;
    border: .2px solid#bcbcbd;
    border-radius: 0!important;
}

.navDivSecondaryEditor:hover {
    background-color: var(--background);
}

.btn2 {
    background-color: #faf9f9;
    border-radius: 0!important;
}

.cardRowContainer {
    width: calc(100% - .5in);
    height: 3.5in;
    display: flex;
    justify-content: space-around;
}

.cardDiv {
    position: relative;
    float: left;
    height: 2.5in!important;
    width: 2.5in!important;
    border-radius: 10px 10px 2px 2px;
    top: 50%;
    transform: translateY(-50%);
}

.cardDivVisible {
    cursor: pointer;
    background-color: #faf9f9;
    box-shadow: 2px 2px 5px var(--shadow-dark), -1px -1px 5px var(--shadow-dark);
}

.cardBtnDiv {
    position: absolute;
    height: .5in;
    width: 100%;
    bottom: 0;
}

.mapBtnDiv {
    position: relative;
    height: .5in;
    width: 100%;
    bottom: 0;
}

.cardBtnLabelDiv {
    position: absolute;
    height: 2in;
    width: 80%;
    left: 10%;
    top: 0;
    display: grid;
    place-items: center;
    text-align: center;
}

.card {
    background-color: var(--font-light);
    border-radius: 10px;
}

.cardBtn {
    position: relative;
    top: 0;
    float: left;
    height: 98%;
    width: 31%;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 2px;
}

.cardBtnVenue {
    position: relative;
    top: 0;
    float: left;
    height: 98%;
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 2px;
}

.mapBtnVenue {
    position: relative;
    top: 0;
    float: left;
    height: 49%;
    width: 24%;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 2px;
}

.cardBtn3D {
    box-shadow: 2px 2px 2px var(--shadow-dark), -2px -2px 2px var(--shadow-light);
}

.cardRow {
    position: relative;
    width: 100%;
    height: 20%;
    top: 31%;
    cursor: pointer;
}

.cardRowLeft {
    position: relative;
    float: left;
    width: 60%;
    height: 100%;
    display: grid;
    place-content: center;
}

.cardRowRight {
    position: relative;
    float: right;
    margin-right: 10%;
    width: 20%;
    height: 100%;
    margin-bottom: 0;
    margin-top: 0;
}

.cardRowFullDiv {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.publicAccessDiv {
    height: .25in;
    width: .25in;
}

.publicAccessControl {
    display: flex;
    justify-content: space-around;
    width: 1.5in;
    align-items: center;
}

.floorThumbPic {
    height: 1.2in;
}

.brdr {
    border: 1px solid black;
}

.textureBack {
    background-image: url(../images/pics/paper.png);
}

.req {
    /* color: var(--font-warning); */
    padding-left: 5px;
}

/* ------------------------------------------- */

.modalDiv {
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--default-dark);
    opacity: 0.7;
}

.loaderDiv {
    z-index: 1001;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--color-offGray);
    opacity: 0.8;
}

.loader {
    height: 1.5in;
    content: url("../images/logo/inclunav.gif");
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loaderText {
    position: absolute;
    left: 50%;
    top: calc(50% + .5in);
    transform: translateX(-50%);
    padding: .25in;
    font-size: 25px;
    color: var(--font-brand);
    opacity: 1!important;
}

.modalMsg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80vh;
    width: 40%;
    background-color: var(--background);
    border-radius: 10px;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 1000;
}

.modalMsgStatus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 5in;
    width: 4in;
    background-color: var(--background);
    border-radius: 10px;
    padding-left: 5%;
    padding-right: 5%;
    z-index: 1000;
    display: grid;
    place-items: center;
}

.modalMsgDiv {
    position: relative;
    top: 10%;
    height: 60%;
    width: 80%;
    left: 10%;
    text-align: center;
    font-size: 16px;
    padding-top: 20px;
    display: grid;
    place-items: center;
}

.modalBtn {
    position: relative;
    float: left;
    top: 20%;
    height: .5in;
    width: 25%;
    margin-left: 4%;
    margin-right: 4%;
    display: grid;
    place-items: center;
    border: none;
}

.modalPassError {
    color: var(--font-warning);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    top: 25%;
}

.modalPassAlign {
    text-align: center;
}

.warning {
    font-size: 22px;
}

/* ------------------ */

#userProfileMain {
    position: absolute;
    background-color: var(--background);
    border-radius: 10px;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 6in;
    width: 6in;
    padding: 2%;
    /* display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(11, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px; */
}

.userProfileSubcontainer {
    position: relative;
    width: 4.5in;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.userProfContentRow {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#successStatus {
    height: 1in;
    width: 1in;
    content: url("../images/icons/tick.png");
}

#profileHead {
    /* grid-area: 1 / 1 / 2 / 12; */
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 22px;
    height: .75in;
}

.profileControlLabel {
    height: .5in;
    width: 45%;
    padding: 10px;
}

#profileFirst {
    /* grid-area: 4 / 2 / 5 / 6; */
    padding: 10px;
    border: none;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
}

#profileLast {
    /* grid-area: 4 / 7 / 5 / 11; */
    padding: 10px;
    border: none;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
}

#profileMail {
    /* grid-area: 7 / 2 / 8 / 6; */
    padding: 10px;
    border: none;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
}

#profileOrg {
    /* grid-area: 7 / 7 / 8 / 11; */
    padding: 10px;
    border: none;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
}

#profileMsgDiv {
    height: .5in;
}

#profileSave {
    /* grid-area: 10 / 2 / 11 / 6; */
    display: grid;
    place-content: center;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
    margin-top: .25in;
}

#profileCancel {
    /* grid-area: 10 / 7 / 11 / 11; */
    display: grid;
    place-content: center;
    height: .5in;
    width: 45%;
    margin-bottom: .25in;
    margin-top: .25in;
}

#nameOneHead {
    grid-area: 3 / 2 / 4 / 6;
    margin-left: 20px;
    padding-top: 20px;
}

#nameLastHead {
    grid-area: 3 / 7 / 4 / 11;
    margin-left: 20px;
    padding-top: 20px;
}

#mailProf {
    grid-area: 6 / 2 / 7 / 6;
    margin-left: 20px;
    padding-top: 20px;
}

#orgProf {
    grid-area: 6 / 7 / 7 / 11;
    margin-left: 20px;
    padding-top: 20px;
}

#req20 {
    grid-area: 4 / 6 / 5 / 7;
}

#req22 {
    grid-area: 7 / 6 / 8 / 7;
}

/* ------------------------ */

.conetnt-main-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: .53in;
}

.dashLeftPan2 {
    position: relative;
    left: 0;
    top: 0;
    /* width: 20%; */
    width: 2in;
    height: 100%;
    background-image: url("../images/pics/paper.png");
}

.leaflet-container {
    height: 100%!important;
}

.mapHolder {
    position: absolute;
    top: 1.25in;
    height: calc(100% - 2.25in);
    left: 1.5in;
    width: calc(100% - 1.5in);
    background-image: url("../images/icons/chess.png");
}

.mapSubHolder {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mapEditControls {
    position: relative;
    top: 0;
    left: 1.5in;
    width: calc(100% - 1.5in);
    height: 1.25in;
    display: flex;
    justify-content: space-around;
}

.planEdit {
    height: .5in;
    width: 1in;
    margin-top: .5in;
}

.planLeft {
    position: absolute;
    top: 1.25in;
    height: calc(100% - 2.25in);
    left: 0;
    width: 1.5in;
}

.planBottom {
    position: absolute;
    bottom: 0;
    height: 1in;
    left: 1.5in;
    width: calc(100% - 1.5in);
}

.mapLength {
    width: 1in;
    height: .5in;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    text-align: center;
}

.mapWidth {
    width: 1in;
    height: .5in;
    position: relative;
    top: .25in;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    text-align: center;
}

.planArrowRight {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(50% - .75in);
    height: .2in;
    content: url(../images/icons/arrowR.png);
    opacity: .4;
}

.planArrowLeft {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(50% - .75in);
    height: .2in;
    content: url(../images/icons/arrowL.png);
    opacity: .4;
}

.planArrowTop {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    height: calc(50% - .5in);
    width: .2in;
    content: url(../images/icons/arrowT.png);
    opacity: .4;
}

.planArrowBottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: calc(50% - .5in);
    width: .2in;
    content: url(../images/icons/arrowB.png);
    opacity: .4;
}

.mapContainer {
    position: relative;
    top: 0;
    float: left;
    height: 100%;
    width: 70%;
}

.mapContainer-lvl {
    position: relative;
    top: 0;
    float: left;
    height: 100%;
    width: 25%;
}

.global-map-div {
    position: absolute;
    top: 1.25in;
    height: calc(100% - 2.25in);
    left: .25in;
    width: calc(100% - .35in);
}

.global-map-container {
    position: relative;
    top: 0;
    float: left;
    height: 100%;
    width: 50%;
}

.mapControlsContainer {
    position: relative;
    float: right;
    top: 0;
    height: 100%;
    width: 30%;
}

.mapControlsContainer-lvl {
    position: relative;
    float: right;
    top: 0;
    height: 100%;
    width: 25%;
}

.mapControlsSubContainer {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
    width: 3in;
}

.mapcontrolsrow {
    width: 100%;
}

.editorElementAdd {
    width: 100%;
    height: .75in;
    margin-top: .25in;
    margin-bottom: .25in;
    border: none;
    padding: 10px;
}

.editorElementAddShort {
    width: calc(100% - 15px);
    height: .7in;
    margin-top: .1in;
    margin-bottom: .1in;
    border: none;
    padding: 10px;
    font-family: 'Noto Sans', Tahoma, sans-serif !important;
}

.reqIcon {
    padding-top: 10px;
    width: 10px;
}

.editorElementLabel {
    width: 100%;
    height: .25in;
    margin-top: .25in;
    border: none;
    padding: 10px;
}

.labelHelp {
    font-size: 12px;
}

.infoIcon {
    height: 20px;
    padding-left: 10px;
    opacity: .6;
    cursor: pointer;
}

.editorElementLabelShort {
    width: 100%;
    margin-top: .1in;
    border: none;
    padding-left: 10px;
}

.editorElement {
    width: 100%;
    height: .5in;
    margin-top: .25in;
    margin-bottom: .25in;
    border: none;
    padding: 10px;
}

.editorElementShort {
    width: calc(100% - 15px);
    height: .4in;
    margin-top: .1in;
    margin-bottom: .1in;
    border: none;
    padding: 10px;
}

.newElMsg {
    padding: 10px;
}

.newElMsgBuilding {
    padding: 1px;
}

.editorSave {
    position: relative;
    float: left;
    height: .5in;
    width: 45%;
    margin-top: .25in;
}

.editor-btn-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.editorSaveBuilding {
    position: relative;
    float: left;
    height: .4in;
    width: 45%;
    margin-top: .1in;
    border: none;
}

.editorCancel {
    position: relative;
    float: right;
    height: .5in;
    width: 45%;
    margin-top: .25in;
}

.editorNext {
    position: relative;
    /* float: right; */
    margin:auto;
    height: .5in;
    width: 45%;
    margin-top: .25in;
}

.editorCancelBuilding {
    position: relative;
    float: right;
    height: .4in;
    width: 45%;
    margin-top: .1in;
}

.multipleEl {
    display: flex;
    justify-content: space-between;
}

/* ---------------------------- */

.modalDivFill {
    grid-area: 14 / 10 / 18 / 22;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.modalInput {
    height: 50px;
    border: 0;
    padding: 5%;
}

.selectInput {
    width: 100%;
    height: 40px;
    padding: 5%;
}

.selectInputSingle {
    width: 100%;
    /* height: 50px; */
    padding: 1%;
}

.img-thumbnail {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.disabled {
    background-color: var(--background);
    color: var(--shadow-dark);
    cursor: none;
}

.TypeAheadDropDown {
    width: 100%;
    border: 1px solid gray;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 1px rgba(0, 0, 0, .18);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.73);
}

.TypeAheadDropDown input {
    width: 100%;
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.73);
    padding: 10px 5px;
    box-sizing: border-box;
    outline: none;
}

.TypeAheadDropDown ul::before {
    content: '';
}

.TypeAheadDropDown ul {
    list-style-type: none;
    text-align: left;
    margin: 0;
    padding: 0;
    border-top: 1px solid gray;
}

.TypeAheadDropDown li {
    padding: 10px 5px;
    cursor: pointer;
}

.TypeAheadDropDown li:hover {
    background: lightgray;
    text-decoration: underline;
}

/* ----------------------------- */

.viewMenu {
    position: fixed;
    z-index: 2;
    right: 0;
    top: 1in;
    padding: 10px;
    padding-bottom: 0;
    background-color: var(--background);
    box-shadow: 2px 2px 3px var(--shadow-dark), -1px -1px 3px var(--shadow-dark);
    border-radius: var(--main-radius) 0 0 var(--main-radius);
}

.viewControl {
    width: .5in;
    height: .5in;
    margin-bottom: 10px;
    padding: 5px;
}

.listViewOff {
    content: url("../images/icons/iconset/list-off.svg");
}

.listViewOn {
    content: url("../images/icons/iconset/list-on.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}

.landmarkListViewOn {
    content: url("../images/icons/iconset/landmarkListOn.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}
.landmarkListViewOff {
    content: url("../images/icons/iconset/landmarkListOff.svg");
    

}
.polygonListViewOn {
    content: url("../images/icons/iconset/polygonListOn.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}
.polygonListViewOff {
    content: url("../images/icons/iconset/polygonListOff.svg");
   
}

.gridsOn {
    content: url("../images/icons/iconset/grid_on.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}

.gridsOff {
    content: url("../images/icons/iconset/grid_off.svg");
}

.iconViewOff {
    content: url("../images/icons/iconset/icon-off.svg");
}

.iconViewOn {
    content: url("../images/icons/iconset/icon-on.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}

.mapViewOff {
    content: url("../images/icons/iconset/map-off.svg");
}

.mapViewOn {
    content: url("../images/icons/iconset/map-on.svg");
    opacity: .8;
    background-color: var(--Active);
    box-shadow: 3px 3px 3px var(--shadow-dark) inset, -3px -3px 3px var(--shadow-light) inset;
}

.listViewTable {
    position: absolute;
    top: .5in;
    left: .5in;
    width: calc(100% - 1.75in);
    max-height: 90%;
    overflow-y: auto;
}

.editorTable {
    /* width: 100%; */
    height: 85%;
    z-index: 3;
    overflow-y: auto;
}

table, td, th {
    border: 1px solid #ddd;
    text-align: left;
}

th {
    z-index: 1;
    position: sticky;
    top: 0;
    background-color: var(--background);
}

table {
    border-collapse: collapse;
    width: 100%;
    background-color: #faf9f9;
    box-shadow: 2px 2px 5px var(--shadow-dark), -1px -1px 5px var(--shadow-dark);
}

th, td {
    padding: 15px;
}

.tableNumeric {
    width: .75in;
    text-align: right;
}
.tableCheck{
    width: .5in;
    text-align: center;
}

.tableImg {
    width: 1.25in;
    height: .75in;
}

.tableLink {
    cursor: pointer;
}

.tableLink:hover {
    background-color: #ffffff;
}

.tableActionControl {
    width: 2.5in;
    text-align: center;
}

.tableCheckControl {
    width: 2in;
    text-align: center;
    justify-content: center;
}

.tableIcons {
    display: flex;
    justify-content: space-around;
    border-bottom: none;
}

.tableTool {
    border: none;
    height: .25in;
    width: .25in;
    opacity: .8;
    cursor: pointer;
}

.tableCheckBox {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: .25in;
    width: .25in;
    border: 2px solid var(--default);
    border-radius: 5px;
}

.tableEdit {
    content: url("../images/icons/iconset/edit.svg");
}

.tableCorrect {
    content: url("../images/icons/iconset/correct.svg");
}

.tableBin {
    content: url("../images/icons/iconset/bin.svg");
}

/* ---------------------------------------- */

.mapViewSearch {
    width: 100%;
    height: .5in;
    border: 2px solid var(--default);
    border-radius: 10px;
    padding: 10px;
}

.mapViewContainer {
    position: relative;
    left: .25in;
    /* top: .25in; */
    /* height: calc(100% - .75in); */
    height: 100%;
    width: 100%;
    box-shadow: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-dark);
}

.mapViewDiv {
    position: absolute;
    top: .5in;
    width: calc(100% - 1.25in);
    height: calc(100% - .5in);
}

/* --------------------------------- */

.noData {
    /* background-color: var(--default);
    opacity: .6;
    color: var(--font-light); */
    /* border: 1px dashed var(--default); */
    font-size: 14px;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%);
    border-radius: 5px;
    width: 5in;
}

.ml-2 {
    margin-left: 1%;
}

.pickup-div {
    position: absolute;
    z-index: 999;
    margin-top: 124px;
    margin-left: 5px;
}

.pickup-btn {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background: black;
}
.refGlobal{
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 1.5rem;
}
/* --------------------------------------------------- */

#loaderDiv {
    position: absolute;
    z-index: 100;
    height: 100%;
    width: 100%;
    background-color: var(--background);
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid var(--default);
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
.dimention-div {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    width: 35px;
    height: 10px;
   }
   .dimention-div p {
    font-weight: 700 ;
   }