.leaflet-left.left-0 {
    right: 0 !important;
}

.top-container {
    top: 0;
    right: 0;
    position: fixed;
    z-index: 999;
}

.top-toolbar {
    /*position: sticky;*/
    gap: 3px;
    padding: 0 5px 2px 5px;
    background-color: white;
    font-size: smaller;
    direction: rtl;
    border-radius: 5px;
    display: flex;
}

/* USED FOR LEFT TABLE*/
.offcanvas-start {
    width: 460px;
}

.previous-next-container {
    width: 300px;
}

#datatable-interactivity {
    /*width: 420px;*/
}

#fetched-assets {
    /*position: absolute;*/
    /*z-index: 999;*/
    /*left:10px;*/
    /*bottom:0;*/
}

.top-toolbar button {
    margin: 7px 0 5px;
}

.vertical {
    border-left: 1px solid black;
    /*top: 50%;*/
    /*vertical-align: center;*/
    height: 50%;
    margin-top: 15px;
}

p.rtl {
    direction: rtl;
}

.input-ltr {
    direction: ltr;
    /*unicode-bidi: bidi-override;*/
    text-align: right;
    width: 6em;
}

.text-ltr {
    direction: ltr;
    unicode-bidi: bidi-override;
    /*text-align: right;*/
}

.text-rtl {
    direction: rtl;
    /*unicode-bidi: bidi-override;*/
    /*text-align: right;*/
}

.rc-slider-with-marks { /* for RangeSlider*/
    direction: ltr;
}

/*https://stackoverflow.com/questions/36469631/how-to-get-leaflet-for-r-use-100-of-shiny-dashboard-height?rq=1*/
#big-map {
    height: calc(100vh - 0vh) !important;
}

/* Media query for mobile devices */
@media only screen and (max-width: 500px) {
    .leaflet-control-zoom {
        display: none;
    }
}

#main-alert {
    position: absolute;
    z-index: 1001;
    direction: rtl;
    right: 0;
    top: 50px;
}

#search-input {

}


.price-diff-table {
    font-size: 70%;
    margin: 5px;
    overflow: auto;
    width: 100%;

}

.price-diff-table td, .price-diff-table th {
    border: 1px solid black;
}

.tooltip-icon {
    width: 28px;
    height: 28px;
}

.tooltip-image {
    /*max-width: 150px;*/
    max-height: 100px;
    width: 150px;
    opacity: 1 !important;
    object-fit: cover
}

.marker-div-image {
    width: 28px;
    height: 28px;
}

.marker-div-span {
    background-color: white;
    color: black;
    padding: 3px;
    /*border: 1px solid black;*/
}

.sidebar-info-text {
    font-size: small;
}

.sidebar-info-links-container {
    margin-top: 30px;
    text-align: center;
}

.sidebar-right-col {

}

.small-margin-bottom {
    margin-bottom: 10px;
}

.sidebar-left-col {
    padding: 0;
}

.sidebar-info-links {
    text-decoration: none;
    text-align: center;
    color: black;
    background: lightgreen;
    padding: 5px 20px 5px 20px;
    border-radius: 15px;
    height: 100%;
    width: 100%;
    display: block;
}

.nopadding {
    padding: 0;
}

.sidebar-info-links img {
    width: 32px;
    height: 32px;
}

.sidebar-info-graphs-header {
    display: block;
    margin: 20px 4px 5px;
}

.modal-time-graphs {
    margin-top: 30px;
}

/* Problematic, needs fix*/
.asset-dropdown .Select-control {
    max-height: 200px;
    /*!*display: flex;*!*/
    overflow-y: scroll;
}

#table-container {
    top: 100px;
    font-size: 0.875em;
    /*width: 10em;*/
    height: 100%;
}

.grid-container {
    /*margin: auto;*/
    /*display:flex;*/
    /*gap: 10px;*/
    /*padding: 10px;*/
    /*display: grid;*/
    /*grid-template-columns: 1fr 1fr;*/
    /*!*grid-*!*/
    /*grid-gap: 0px*/
}


.left-container {
    float: left;
    /*width: 22%;*/
    /*overflow: scroll;*/
}

.right-container {
    /*margin-left: 22%;*/

    /*float: left;*/
    /*width: 85%;*/
}

.marker-div {
    /*border: black 1px solid;*/

    /*display:grid;*/
    /*font-size: small;*/
    font-weight: bold;
    padding: 2px;
    /*Add the fadeIn class for marker div to work*/
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#button-clear {
    width: 100%;
}

#hello-modal .modal-content {
    direction: rtl;
    line-height: 1.7em;
}

#hello-modal .modal-title {
    width: 100%;
    font-weight: 600;
}

#hello-modal .modal-content button {
    margin: 0;
}

#hello-modal .modal-body ul {
    list-style-type: disc;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

.marker-div-span {
    /*text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;*/
    padding: 3px;
    color: white;
    border-radius: 25px;
}

.dash-spreadsheet-menu { /*used to remove toggle columns in table*/
    display: None !important;
}

.slider-container {
    width: 12%;
    text-align: center;
    direction: ltr;
    min-width: 100px;
}

.slider-container-drop {
    padding-bottom: 15px;
}


.dropdown-container {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 80vh;
    width: 280px;
    direction: rtl;
    min-width: 150px;
    text-align: right;
    padding: 0px 10px 0 10px;
}

.dropdown-bottom-label {
    margin-bottom: .5rem;
    text-align: center;
    direction: ltr;
}

.subtext-help {
    font-size: 0.6em;
    color: grey;
}

.rounded-checkbox {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid black;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.rounded-checkbox:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
    background-color: blue;
}

/*#marker-type {*/
/*  float: left;*/
/*  margin: 0 5px 0 0;*/
/*  width: 100px;*/
/*  height: 40px;*/
/*  position: relative;*/
/*}*/
#marker-type input[type="radio"] {
    opacity: 0.011;
    z-index: 100;
}

#marker-type input[type="radio"]:checked + label {
    background: #0d6efd;
    color: white;
}

#marker-type label {
    text-align: center;
    cursor: pointer;
    z-index: 90;
    /*line-height: 1.8em;*/
    width: 40px;
    border: black solid 1px;
    background-color: white;
    border-radius: 5px;
}

#marker-type .form-check {
    padding-left: 0;
}

#marker-type .form-check-inline {
    margin-right: 0.5rem;
}

/*Used for limit multi dropdown*/
/*TODO: Fix this element with using multicheck box dropdown menu*/
/*#status-asset .Select-multi-value-wrapper {*/
/*    max-height: 50px;*/
/*    width: 10%;*/
/*    overflow: scroll;*/
/*}*/

.dash-options {
    font-size: smaller;
    display: flex;
    justify-content: space-evenly;
}

.dash-dropdown {
    padding: 10px;
    /*width: 7%;*/
    font-size: smaller;
    min-width: 100px;
    direction: rtl;
}

.price-modal {
    font-size: 1.5em;
    font-weight: 600;
}

.span-color-pct {
    font-size: 0.9em;
    padding: 5px;
    color: white;
    border-radius: 10px;
}

.labels-multiselect {
    display: grid;
    direction: rtl;
    text-align: right;
    padding: 5%;
}

.offcanvas-body {
    padding: 0;
    overflow-x: hidden;
}

.sidebar-info-container {
    padding: 25px 10px 25px 10px;
}

.sidebar-info-container .row {
    margin-bottom: 0.5em;
}

.asset-images {
    width: 100%;
    margin-top: 5px;
    direction: ltr;
    /*float: right;*/
}

.asset-images .carousel-item {
    border-radius: 10px;
}

.asset-images-img {
    width: 100%;
    height: 300px;
    /*max-height: 220px;*/
    /*object-fit: contain;*/
    object-fit: cover;
    vertical-align: bottom;
    /*border-radius: 10px;*/
}

/* ANALYSIS PAGE*/

.analysis-main {
    direction: rtl;
    overflow: hidden;
    margin: 10px auto auto;
    max-width: 1000px;
}

.analysis-main h3 {
    margin-top: 2%;

}

.analysis-main-multi-grid {
    /*margin: 15px;*/
    padding: 15px;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

svg {
    animation: fadeIn 0.5s;
}

.form-group {
    display: grid;
}

.form-group col {
    margin: 25px;
}

.analysis-main .Select-input {
    background-color: grey;
    color: black !important;
}

/* register */
.noselect {
    -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 */
}

.collapse-cont label {
    margin-bottom: 5px;
    margin-top: 5px;
}

.register-container {
    max-width: 700px;
}

.register-submit-row {
    margin-bottom: 150px;
}


/* register */