body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: none;
}

/* Set padding to keep content from hitting the edges */
.body-content {
   /* padding-left: 15px;
    padding-right: 15px;*/
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

.filter {
    position: relative;
    height: 80px;
    margin-top: 9px;
}

#map-canvas {
    background: silver;
    display: block;
    position: absolute;
    height: auto;
    bottom: 0px;
    top: 25px;
    left: 0px;
    right: 0px;
    margin-top: 40px; /* adjust top margin to your header height */
    z-index: 1;
    /*border-bottom: solid;
    border-bottom-color: #4E5D6C;
    border-top: solid;
    border-top-color: #4E5D6C;
    border-left: solid;
    border-left-color: #4E5D6C;
    border-right: solid;
    border-right-color: #4E5D6C;*/
}


#small-map-canvas {
    position: relative;
    height: 600px;
    width: 600px;
}

#detail-map-canvas {
    position: relative;
    height: 300px;
    width: 300px;
}

#confirm-map {
    position: relative;
    width: 300px;
    height: 200px;
}




#over_map {
    position: absolute;
    top: 45px;
    left: 80px;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    color: white;
    border-radius: 4px;
}

#map_search {
    position: absolute;
    bottom: 135px;
    left: 80px;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
    color: white;
    border-radius: 4px;
}

#showimagescontainer {
    height: 105px;
    white-space: nowrap;
    background: transparent;
    text-align: left;
}

    .showimages {
        position: absolute;
        left: 32px;
        right: 0;
        margin-top: 4px;
        box-sizing: border-box;
        height: 98px;
        overflow-x: auto;
        overflow-y: auto;
        box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 10px -1px;
        background: var(--background);
        border-radius: 2px;
    }

    .showimages::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        color: var(--secondary);
    }

    .showimages::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 4px;
    }

.showimages.item0 {
    right: 50.5%;
}

    .showimages.item1 {
        left: 50.5%;
        right: 0;
    }




.compareimagesleft .compareimagesright {
    bottom: 10px;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    max-height: 95px;
}

.comparetext {
    width: auto;
    /*overflow-x:hidden;
    overflow-y: hidden;
    white-space:nowrap;
    height:38px;*/
}



option {
    color: black;
}

.labels {
    color: black;
    background-color: rgba(255,255,255,1.0);
    font-family: "Lato", "Lucida Grande", "Arial", sans-serif;
    font-size: 8px;
    text-align: center;
    width: 15px;
    white-space: nowrap;
    border-radius: 3px;
}

label {
    display: inline-block;
    margin-bottom: 0.1rem;
}


#addresspanel {
    position: absolute;
    top: 50px;
    right: 10%;
    margin-left: -20px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

.gm-style-iw {
    color: black;
}


    .form-control:disabled, .form-control[readonly] {
        background-color: var(--background-faded);
        opacity: 1;
        color: var(--primary-faded);
    }

.h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 5px;
}

.form-group {
    margin-bottom: 3px;
}
.control-label {
    font-size: 0.85rem;
    padding-bottom: 3px;
    color: var(--secondary-darken);
}

.form-horizontal .control-label {
    padding-top: 0px;
}

#side-panel {
    display: block;
    position: relative;
    overflow-y: hidden;
    width: 100%;
    z-index: 1;
    padding: 11px;
    padding-bottom: 0px !important;
    font-family: var(--font-family-sans-serif) !important;
}

    #side-panel .ms-options {
        max-height: 50% !important;
    }

    .side-panel-parent::-webkit-scrollbar {
        width: 5px;
        margin-top: 10px;
        color: var(--secondary);
        border-radius: 15px;
    }

    .side-panel-parent::-webkit-scrollbar-track {
        color: var(--primary);
    }

    .side-panel-parent::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 4px;
    }
    .side-panel-header {
        font-size: 16px;
        font-weight: bolder;
        color: var(--primary);
    }
    .side-panel-subheader {
        font-size: 16px;
        font-weight: bolder;
        color: var(--primary);
    }

    .ms-options::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        color: var(--secondary);
    }

    .ms-options::-webkit-scrollbar-thumb {
        background-color: var(--accent);
        border-radius: 4px;
    }


    .ms-options-wrap button {
        height: 30px;
        border-radius: 4px !important;
        font-size: 16px !important;
        color: var(--background);
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .ms-options-wrap span {
        height: 100%;
        display: flex !important;
        align-items: center !important;
    }

#side-panel input[type=checkbox] {
    height: 13px;
}

    #side-panel label {
        margin: 0;
    }


#right-panel {
    background: #2B3E50;
    position: absolute;
    height: auto;
    bottom: 0;
    top: 0px;
    width: 20px;
    z-index: 1;
}

.thumbimage {
    margin: 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    border: 1px solid lightgray;
    border-radius: 2px;
}

.helpdiv ul {
    margin-top: 20px;
}

.helpdiv ol {
    margin-top: 20px;
}

.helpdiv ul li {
    padding-bottom: 10px;
}

.helpdiv ol li {
    padding-bottom: 10px;
}

#loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: var(--accent-hover);
    text-align: center;
    opacity: .85;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    z-index: 99999;
    transform: translate(-50%, -50%)
}


.ms-options-wrap > .ms-options > ul label {
    white-space: nowrap;
}

#side-panel .form-control {
    border: 1.5px solid var(--primary-lighten-3) !important;
    height: 34px !important;
    margin-bottom: 5px;
}


.ms-options-wrap > button {
    border: 1.5px solid var(--primary-lighten-3) !important;
    height: 36px !important;
    margin-bottom: 5px;
}


.ms-options-wrap.ms-has-selections > button {
    color: var(--primary);
}


.container.compare #map-canvas {
    left: 320px;
}

.container.compare #side-panel {
    width: 310px;
}


.ms-options-wrap > button > span {
    overflow: hidden;
    width: 100%;
}




/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
    float: left;
    padding-right: 30px;
    margin-right: 10px;
}


    /* Hide default HTML checkbox */
    .switch input {
        display: none;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary);
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--accent);
}

input.default:checked + .slider {
    background-color: #444;
}

input.primary:checked + .slider {
    background-color: #2196F3;
}

input.success:checked + .slider {
    background-color: #8bc34a;
}

input.info:checked + .slider {
    background-color: #3de0f5;
}

input.warning:checked + .slider {
    background-color: #FFC107;
}

input.danger:checked + .slider {
    background-color: #f44336;
}

input:focus + .slider {
    box-shadow: none;
}

input:checked + .slider:before {
    -webkit-transform: translateX(14px);
    -ms-transform: translateX(14px);
    transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.switch-label {
    margin-bottom: 0;
    font-size: inherit;
    cursor: pointer;
    vertical-align: middle;
}



#imagesGridContainer .k-grid {
    position: absolute;
    top: 150px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    height: auto !important;
}
#imagesGridContainer .k-grid-toolbar {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0px;
}
#imagesGridContainer .k-grid-header {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0px;
}

#imagesGridContainer .k-grid-content {
    position: absolute;
    top: 86px;
    bottom: 38px;
    height: auto !important;
}

#imagesGridContainer .k-grid-pager {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0px;
}

#imagesGridContainer * {
    font-size: 12px;
}

#imagesGridContainer tbody td {
    padding-top: 0;
    padding-bottom: 0;
}

#imagesGridContainer thead tr th:last-child,
#imagesGridContainer tbody tr td:last-child {
    width: 50px;
    text-align: center;
}

.section-wrapper {
    background-color: var(--secondary);
    border-radius: 0px;
    padding: 20px 20px !important;
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
}
.section-title {
    color: var(--primary);
    padding: 0 15px;
    font-size: 28px !important;
}
.section-content {
    padding: 15px !important;
    padding-top: 0px !important;
}

.help-tab p, .help-tab li, .help-tab span, .help-tab h1, .help-tab h2, .help-tab h3, .help-tab h4 {
    color: var(--primary) !important;
}


.help-tab .k-tabstrip .k-content.k-state-active {
    background-color: var(--secondary) !important;
    border: none !important;
    border-radius: 0px;
    margin-top: 5px;
    padding: 20px 30px;
}

.help-tab .k-tabstrip .k-content {
    background-color: var(--secondary) !important;
    border: none !important;
    border-radius: 0px;
    margin-top: 5px;
    padding: 20px 30px;
}
.help-tab .k-link {
    border: none;
    font-weight: 510 !important;
    color: var(--primary) !important;
}
.help-tab .k-tabstrip-items .k-loading.k-complete {
    display: none;
}
.help-tab .k-tabstrip-top > .k-tabstrip-items .k-state-active {
    background-color: var(--accent) !important;
    border: none;
    border-radius: 4px;
}
.help-tab .k-tabstrip-top > .k-tabstrip-items .k-state-default {
    background-color: var(--secondary);
    border: none;
    border-radius: 4px;
    margin:5px;
}
.help-tab .k-tabstrip-top > .k-tabstrip-items .k-state-default:hover {
    background-color: var(--primary) !important; 
    border: none;
    border-radius: 4px;
}

.help-tab .k-tabstrip:focus {
    border: none !important;
    box-shadow: none !important;
}
.help-tab .k-tabstrip-items .k-state-active .k-link {
    color: var(--primary) !important;
}
.help-tab .k-tabstrip-items .k-state-default .k-link:hover {
    color: var(--secondary) !important;
}

.k-state-selected {
    color: var(--primary) !important;
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.k-picker-wrap.k-state-default {
    border: none !important;
}

.user-remove {
    color: var(--primary) !important;
}
.user-remove :hover {
    color: var(--accent) !important;
}
.carousel-icon {
    color: var(--accent);
    display: flex;
    background-color: var(--primary);
    justify-content: center;
    border-radius: 50px;
    padding: 15px 23px;
}

.carousel-icon.fa-chevron-right:before {
    margin-left: 4px;
}

    .carousel-icon.fa-chevron-left:before {
        margin-right: 4px;
    }

.carousel-icon-small {
    color: var(--accent);
    display: flex;
    background-color: var(--primary);
    justify-content: center;
    border-radius: 50px;
    padding: 7px 14px;
}

.carousel-icon-small.fa-chevron-right:before {
    margin-left: 2px;
}

.carousel-icon-small.fa-chevron-left:before {
    margin-right: 2px;
}
.details-wrapper {
    padding: 15px;
    overflow-x: hidden;
}

.custom-radio-btn {
    cursor: pointer;
    margin-bottom: 0px !important;
}

.custom-radio-btn:after {
    width: 13px;
    height: 13px;
    border-radius: 15px;
    top: 8px;
    left: 0px;
    position: relative;
    background-color: var(--background);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1px solid var(--primary);
}

.custom-radio-btn:checked:after {
    background-color: var(--accent);
}
.radio-btn-text {
    font-size: 14px;
    align-self: center;
    padding: 0;
    margin-left: 2px;
    margin-bottom: 2px;
}
.filter-checkbox {
   position: relative;
   top:2px;
   width:15px;
   height: 15px;
   margin: 1px;
}
.edit-image-date-picker span.k-widget.k-datetimepicker {
    max-width: 226px;
}

.compare-image {
   object-fit: contain;
   border-radius: 0px !important;
}
.admin-user-edit-table-cell {
    padding: 5px 10px;
    vertical-align: top;
}

.estimator-grid-text {
    line-height: 1.2em;
}
.estimator-grid tr {
    padding: 5px 0px;
    display: flex;
}

.estimator-grid td {
    padding: 0px 5px;
    align-items: center;
    display: flex;
}
.estimator-grid td:nth-child(1) {
    width: 5%;
}
.estimator-grid td:nth-child(2) {
    width: 55%;
}
.estimator-grid td:nth-child(3) {
    width: 30%;
}
.estimator-grid td:nth-child(4) {
    width: 10%;
}
.disabled-field {
    background-color: var(--background-faded);
}
.step-circle {
    font-size: 12px;
}
.trash-icon {
    font-size: 22px;
    padding: 0 10px;
    cursor: pointer;
}
.trash-icon:hover {
    color: var(--accent)
}
.delete-image-icon {
    font-size: 26px;
    padding: 10px;
    cursor: pointer;
    background-color: var(--primary);
    border-radius: 50px;
    color: var(--accent);
    position: absolute;
    bottom: 10px;
    right: 15px;
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
    .delete-image-icon:hover {
        background-color: var(--primary-hover);
    }
.vertical-estimator-dashed-line {
    border-left: 1px dashed var(--accent);
    height: 100px;
}
.foldable-estimator-wrapper {
    border: 2px solid var(--primary);
   border-radius: 20px;
}
.foldable-survey-estimator-wrapper {
    border: 2px solid var(--primary);
    border-radius: 20px;
}
.foldable-estimator-arrow {
    font-size: 14px;
    color: var(--accent);
    align-self: center;
}
.estimator-row-title {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 3px;
    color: var(--primary) !important;
}
.estimator-grid-container {
    display: grid;
    grid-template-columns: 5%, 65% 20% 10%;
    grid-row-gap: 10px;
    grid-column-gap: 12px;
    align-items: center;
    margin-left: -6px;
}
.spaced-grid-row {
    margin-top: 20px;
}
.estimator-container {
    border-left: 2px dashed var(--accent);
    margin: 20px 20px 20px 30px;
}
.estimator-yield-text {
    color: var(--accent);
    font-weight: bold;
    margin-right: 10px;
}
.deleted-dropdown {
    display: none !important;
}
.edit-page.carousel-image {
    max-height: 400px;
    object-fit: contain;
}

.edit-page.carousel-inner {
    height: 400px;
    display: flex;
    align-items: center;
}
.edit-page.carousel-item-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%
}
.edit-page.carousel-item-content {
    position: relative;
}
.edit-page.carousel-item {
    height: 400px;
}
.hidden-carousel {
    display: none !important;
}
@keyframes rotateSpinner {
    to {
        transform: rotate(360deg);
    }
}

#btnUseCurrentLocation {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

#btnLocationSearch {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
}
#btnGoToLocation {
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
}
input#address {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px var(--primary-faded) inset !important;
    -webkit-text-fill-color: var(--primary);
}

    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 50px var(--primary-faded) inset !important; /*your box-shadow*/
        -webkit-text-fill-color: var(--primary);
    }