:root {
    --premise-gold: #ccb338;
    --premise-silver: #818181;
    --premise-blue: #0D6EFD;
    --premise-grey: #3C3C3C;
    --premise-backdrop: #7E7E7E;
    --min-panel-width: 310px;
}

* {
    box-sizing: border-box;
}

p {
    color: darkslategray;
}

.navbar-bg-premise {
    background-color: #212529 !important;
}

/* Enlarge and highlight hamburger */
span.navbar-toggler-icon {
    background-color: #ede7cc;
    border-radius: 3px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")!important;
    width: 2em;
    height:2em;
}

/* Mobile Devices */
@media (max-width: 480px), (max-height: 480px) {
    .navbar-brand > img {
        width: 208px;
        height: 28px
    }
    span.navbar-toggler-icon {
        width: 1em;
        height: 1em;
    }
    #search-navbar-toggler {
        padding: .1rem .5rem;
        /*width: 1em;
        height: 1em;*/
    }
    span.fa-search {
        font-size: 1rem;
    }
}

span.notification-icon {
    display: inline-block;
    padding: 0.2rem !important;
    border-radius: 50% !important;
    background-color: #dc3545 !important;
    border: 1px solid #f8f9fa !important;
}
    span.notification-icon.hamburger {
        transform: translate(260%, -130%) !important;
    }
    span.notification-icon.menu {
        transform: translate(20%, -70%) !important;
    }

.bottom-yellow_border {
    border-bottom: 1px solid var(--premise-gold);
}

.drag-container {
    display: flex;
    padding-right: 0px;
}

.panel-one {
    /*width: 50%;*/
    /*width: max(30%, var(--min-panel-width));*/
    background-color: #22252A;
    overflow-y: scroll;
}

.panel-two {
    flex: 1;
    /*width: 100%;*/
}

@media only screen and (min-width: 320px) {
    .panel-one {
        width: 50%;
    }
}
@media only screen and (min-width: 768px) {
    .panel-one {
        width: 30%;
    }
}

/*@media only screen and (min-width: 768px) {
.panel-one {
    width: 30%;
}

.panel-two {
    width: 70%;
}
}*/

    .dragbar {
        padding: 3px;
        cursor: col-resize;
        background-color: silver;
    }

    body {
        font-family: "Lato", sans-serif;
    }

    button.btn-close-white {
        color: transparent !important;
    }

    /* Info pane details table */
    .info-table > tbody > tr > td:first-child {
        width: 130px;
        /*color: var(--premise-gold);*/
    }

    .info-table td {
        color: white;
        text-align: left;
        padding: 1px !important;
    }

    #sidebarTools {
        background-color: var(--premise-grey) !important;
        border: 2px solid white;
        width: 17rem;
        top: 76px;
    }

    /* Highlight last-selected sidebar menu link */
    .gold-link {
        color: var(--premise-gold) !important;
    }
    /*.gold-link:hover {
        color: yellow !important;
    }*/

    .modal-backdrop {
        background-color: var(--premise-backdrop) !important;
    }

    #sidebarFilter {
        top: 76px;
    }

        #sidebarFilter .accordion-body {
            background-color: #212529;
        }

        #sidebarFilter .accordion-button {
            /*background-color: inherit;*/
            color: var(--premise-silver);
            border: 1px solid rgb(33, 37, 41);
        }

            #sidebarFilter .accordion-button:not(.collapsed) {
                color: #f1f1f1;
                font-weight: bold;
            }

            #sidebarFilter .accordion-button.collapsed {
                background-color: #465869;
            }

            #sidebarFilter .accordion-button:focus {
                box-shadow: none !important;
                border: 1px solid var(--premise-silver) !important;
            }

    .offcanvas-title {
        color: var(--premise-silver);
    }

    .sidenav {
        height: 100%;
        width: 100%;
        /*position: fixed;*/
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        /*padding-top: 20px;*/
    }

        .sidenav a {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            color: white;
            display: block;
        }

            .sidenav a:hover {
                color: var(--premise-gold);
            }


        .sidenav .input-group {
            padding-right: 1em;
        }

            .sidenav .input-group .form-control,
            .sidenav .input-group .btn,
            .sidenav .input-group .input-group-text {
                font-size: inherit;
                padding: 0px 3px;
            }


        /* Hide the spinners from numeric input boxes in Chrome, Safari, Edge, Opera */
        .manual-scale-input::-webkit-outer-spin-button,
        .manual-scale-input::-webkit-inner-spin-button,
        .sidenav input::-webkit-outer-spin-button,
        .sidenav input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Hide the spinners from numeric input boxes in Firefox */
        .sidenav input[type=number], .manual-scale-input {
            appearance: textfield;
        }




    .main {
        margin-left: 160px; /* Same as the width of the sidenav */
        font-size: 28px; /* Increased text to enable scrolling */
        padding: 0px 10px;
    }

    @@media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }

            .sidenav a {
                font-size: 18px;
            }
    }

    #drag-right {
        display: flex;
    }

    /* Collapse info pane by clicking eye and show tip to reveal */
    #hide-details {
        float: right;
        margin-top: 5px;
        margin-right: 5px;
    }

    /*a[href="#layers"]:not(.collapsed) {
    color: var(--premise-gold);
}*/

    .blackeye {
        color: #111;
        font-size: 1.5rem;
    }

    .whiteeye {
        color: white;
        font-size: 1.5rem;
    }

    .whiteicon {
        color: white;
    }

    .popover-header {
        background: #212529;
        color: white;
    }

    .popover .popover-arrow::before, .popover .popover-arrow::after {
        border-color: #212529 !important;
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
    }

    /* "Show Details Eye" popover */
    div.black-arrow > .popover-arrow::before, div.black-arrow > .popover-arrow::after {
        border-color: black !important;
        border-top-color: transparent !important;
        border-bottom-color: transparent !important;
    }

    /* Mobile devices */
    @media (max-width: 480px) {
        .popover-header > span {
            font-size: .7em;
        }
    }

    .popover-close {
        float: right;
        font-size: 22px;
        color: white;
        text-decoration: none;
        position: relative;
        bottom: 5px;
    }

        .popover-close:hover {
            color: var(--premise-gold);
        }

    /* Spinner */
    #spinner {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        top: 0;
    }

    /* Search control */
    #navbarSearch {
        max-width: 800px;
    }

    #search-navbar-toggler:focus {
        box-shadow: none !important;
    }

    #search-bar {
        width: 100%;
    }

    #search-type {
        width: 30%;
        min-width: 200px;
        font-size: smaller;
    }

    #search_text {
        border-left-color: white !important;
        box-shadow: none !important;
        font-size: smaller;
    }

    .search-suggestions {
        color: white;
        background-color: var(--premise-silver);
        padding: 2px;
        border-radius: 3px;
        text-align: center;
    }

    /* Search box suggestion drop-down */
    .popover-body .list-group .list-group-item {
        padding: unset;
        border: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mobile Devices */
@media (max-width: 480px), (max-height: 480px) {
    #search-type {
        width: auto;
        min-width: auto;
        font-size: .7rem;
    }

    #search_text {
        font-size: .7rem;
    }

    .search-suggestions {
        font-size: .8rem;
    }

    .list-group.suggestions {
        font-size: .7rem;
    }
}

    /*Layer section controls*/
    label.form-check-label {
        color: white;
    }

        label.form-check-label:hover {
            color: var(--premise-gold);
        }

    /* Accordion */
    .accordion-item {
        background-color: inherit;
        /*border: 1px solid rgba(35, 65, 100, .15);*/
        border: none;
    }

    .accordion-header {
        /*border: 1px solid rgba(35, 65, 100, .15);*/
    }

    .accordion-button {
        padding: 5px;
        color: black;
        background-color: #ede7cc;
        font-weight: normal;
        border: 1px solid rgba(35, 65, 100, .15);
    }

        .accordion-button:not(.collapsed) {
            background: var(--premise-gold);
            color: black;
            font-weight: bold;
        }

    .accordion-body {
        color: white;
        background-color: #22252A;
        font-size: .80em;
        padding-left: .5rem;
        padding-right: 0px !important;
    }

        .accordion-body a {
            color: #3599ff;
        }

            .accordion-body a:hover {
                color: #204066;
            }

    .accordion-button:after {
        /*filter: brightness(0%) invert(70%);*/
    }

    .accordion-button:focus {
        box-shadow: black !important;
        border: 1px solid black !important;
    }

    /* Info pane primer message */
    #info-pane-primer {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        top: 0;
        background-color: inherit;
        color: inherit;
        font-size: .85em;
    }

    /* Mobile devices */
    @media (max-width: 480px) {
        #info-pane-primer {
            font-size: .7em;
        }
    }

    /* Propert Details */
    .property-heading {
        text-align: center;
        padding-top: 5px;
        line-height: 20px;
    }

    .header {
        padding-top: 5px;
    }

    .property-details {
        border: 1px solid black;
        display: inline-block;
        vertical-align: top;
    }

    .survey-property-details {
        overflow: auto;
        height: calc(100vh - 230px);
    }

    #property-details {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

        #property-details td, #property-details th {
            border: 1px solid #ddd;
            padding: 4px;
        }

        #property-details tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #property-details tr:hover {
            background-color: #ddd;
        }

        #property-details th {
            /* padding-top: 12px;
        padding-bottom: 12px;*/
            text-align: left;
            font-weight: bold;
            /*background-color: #04AA6D;*/
            /*color: white;*/
        }

    table.info {
        border: none;
    }

    /* Layer Filters */
    .layer-filter, .layer-symbology {
        /*color: #var(--premise-silver);*/
        color: var(--premise-gold);
    }

        .layer-filter:hover, .layer-symbology:hover {
            color: #f1f1f1;
        }

    .fa-filter {
        color: var(--premise-gold);
    }

    #marksFilter .modal-dialog {
        max-width: 410px;
    }

        #marksFilter .modal-dialog .modal-content {
            background-color: var(--premise-grey);
            color: white;
            border: 2px solid white;
            font-size: .85em;
        }

            #marksFilter .modal-dialog .modal-content .modal-header .modal-title {
                /*color: var(--premise-silver);*/
                color: #E8E8E8;
            }

    #marksFilter .modal-dialog {
        margin-left: 200px;
        /*margin-top: 460px;*/
    }

    #marks-filter-reset {
        background-color: var(--premise-blue);
        color: white;
    }

    #vectorsFilter .modal-dialog {
        max-width: 400px;
    }

        #vectorsFilter .modal-dialog .modal-content {
            background-color: var(--premise-grey);
            color: white;
            border: 2px solid white;
            font-size: .85em;
        }

            #vectorsFilter .modal-dialog .modal-content .modal-header .modal-title {
                color: #E8E8E8;
            }

    #vectorsFilter .modal-dialog {
        margin-left: 200px;
        /*margin-top: 460px;*/
    }

    #vector-filter-reset {
        background-color: var(--premise-blue);
        color: white;
    }

    #appellationFilter .modal-dialog {
        max-width: 400px;
        margin-left: 200px;
    }

        #appellationFilter .modal-dialog .modal-content {
            background-color: var(--premise-grey);
            color: white;
            border: 2px solid white;
            font-size: .85em;
        }

            #appellationFilter .modal-dialog .modal-content .modal-header .modal-title {
                color: #E8E8E8;
            }

    #appellation-filter-reset {
        background-color: var(--premise-blue);
        color: white;
    }

    .modal-header {
        border-bottom: 1px solid var(--premise-gold) !important;
    }

    /* Export dialog */
    #exportoptions .modal-dialog .modal-content {
        background-color: var(--premise-grey);
        border: 2px solid white;
        font-size: .85em;
    }

        #exportoptions .modal-dialog .modal-content select option {
            font-size: .85em;
        }

        #exportoptions .modal-dialog .modal-content input {
            font-size: .85em;
        }

        #exportoptions .modal-dialog .modal-content .modal-header .modal-title {
            /*color: var(--premise-silver)*/
            color: #E8E8E8;
        }

    #exportoptions .modal-dialog {
        margin-left: 240px;
    }

    #exportoptions .form-label {
        color: white;
    }

    /* Goto dialog */
    #gotooptions .modal-dialog {
        margin-left: 240px;
        max-width: 354px;
    }

        #gotooptions .modal-dialog .modal-content {
            background-color: var(--premise-grey);
            border: 2px solid white;
            font-size: .85em;
        }

            #gotooptions .modal-dialog .modal-content select option {
                font-size: .85em;
            }

            #gotooptions .modal-dialog .modal-content input {
                font-size: .85em;
            }

            #gotooptions .modal-dialog .modal-content .modal-header .modal-title {
                /*color: var(--premise-silver)*/
                color: #E8E8E8;
            }

    #gotooptions .form-label {
        color: white;
    }


    @media (max-width: 767px) {

        #gotooptions .modal-dialog {
            margin-left: auto;
            margin-right: auto;
        }
    }






    /* Symbology dialog */
    #symbologyoptions .modal-dialog .modal-content {
        background-color: var(--premise-grey);
        border: 2px solid white;
        font-size: .85em;
    }

        #symbologyoptions .modal-dialog .modal-content select option {
            font-size: .85em;
        }

        #symbologyoptions .modal-dialog .modal-content input {
            font-size: .85em;
        }

        #symbologyoptions .modal-dialog .modal-content .modal-header .modal-title {
            /*color: var(--premise-silver)*/
            color: #E8E8E8;
        }

    #symbologyoptions .modal-dialog {
        margin-left: 240px;
    }

    #symbologyoptions .form-label {
        color: white;
    }

    .lightbox-close {
        line-height: 15px;
    }

    /* Coordinates Display */
    #coordsContainer {
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 5;
    }

    #coords {
        min-height: unset;
        font-size: .7rem;
        max-width: 150px;
    }

    #srid {
        font-size: .7rem;
        width: 160px;
        max-width: 160px;
    }

    /* Logged out */
    div.document h2 {
        color: var(--premise-silver);
    }

    div.document p {
        color: #bcbcbc;
    }

    div.document ul li {
        color: #bcbcbc;
    }

    div.document a {
        color: #9fc5e8;
    }

    #plan-info .alert {
        background-color: #ede7cc;
        color: black;
    }


    /**************************************
    suggest_dropdown
***************************************/

    .popover.suggest_dropdown_popover {
        max-width: none;
    }

    .suggest_dropdown {
        width: 320px;
    }



        .suggest_dropdown .matches {
            min-height: 200px;
        }



        .suggest_dropdown .loader {
            visibility: hidden;
            position: absolute;
            left: 10px;
            top: 25px;
            opacity: 0;
            transition: opacity 0.2s;
            transition-delay: 0.8s;
            box-sizing: content-box;
        }

        .suggest_dropdown.searching .loader {
            visibility: visible;
            opacity: 1;
        }
    /* go 2 column for the owner search if its not a skinny screen*/
    @media (min-width: 1024px) {

        .suggest_dropdown[data-searchtype=owner] {
            width: 440px;
        }

            .suggest_dropdown[data-searchtype=owner] .matches,
            .suggest_dropdown[data-searchtype=owner] .filters {
                display: inline-block;
                vertical-align: top;
            }

            .suggest_dropdown[data-searchtype=owner] .matches {
                width: 58%;
            }

            .suggest_dropdown[data-searchtype=owner] .filters {
                width: 42%;
            }
    }