/* Note: html rtl is set in public input component via js hack for now */
/* Notes: https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/RTL_Guidelines */

html[dir=rtl] .child-content p,
html[dir=rtl] .child-content h1,
html[dir=rtl] .child-content h2,
html[dir=rtl] .child-content h3,
html[dir=rtl] .child-content h4,
html[dir=rtl] .child-content h5,  
html[dir=rtl] select,
html[dir=rtl] span,
html[dir=rtl] .controls div.control,
html[dir=rtl] .school-dropdown-container label, 
html[dir=rtl] form label {
    text-align: start;
    direction: rtl; 
}

html[dir=rtl] .home-inline-buttons-item:first-child {
    margin-right: 0px !important;
}

.school-dropdown-container label {
    display: inherit !important;
}

html[dir=rtl] .leaflet-pane.leaflet-popup-pane * {
    direction: rtl;
    text-align: start;
}

html[dir=rtl] .modal, html[dir=rtl] .modal * {
    direction: rtl;
    text-align: start;
}

html[dir=rtl] .leaflet-popup-close-button {
    padding: 10px 8px 10px 10px;
}


html[dir=rtl] .pull-right {
    float: left !important;
}

/* mirroring transform: scaleX(-1); */




html[dir=rtl] .content-arrow,
html[dir=rtl] .content-close {
    left: unset;
    right: 450px;
    margin-left: -80px;
    border-left: 1px solid var(--secondary);
    border-right: none;
    border-radius: 50px 0 0 50px;
}

.content-arrow img, .content-close img {
    transform: scaleX(-1);
}


html[dir=rtl] .checkbox-inline input[type=checkbox], 
html[dir=rtl] .checkbox input[type=checkbox], 
html[dir=rtl] .radio-inline input[type=radio], 
html[dir=rtl] .radio input[type=radio] {
    margin-left: unset;
    position: unset !important;
    margin-top: 4px;
}

/* swap tooltip arrow */
html[dir=rtl] .leaflet-draw-tooltip:before {
    border-right: 0px solid #000;
    border-left: 6px solid #000;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
    display: none;

}

html[dir=rtl] .leaflet-draw-tooltip:after {
    border-right: 0px solid #000;
    border-left: 6px solid #000;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: "";
    position: absolute;
    top: 7px;
    right: -7px;
    
}

home[dir=rtl] .leaflet-draw-tooltip {
    margin-right: 10px !important;
}

html[dir=rtl] input[type="checkbox"][name="hide_name"] {
    float: right;
}


@media only screen and (min-width: 768px) {
        
    html[dir=rtl] .content-root.animated.fadeInLeft {
        left: unset !important;
        right: 0px !important;
    }
    
    html[dir=rtl] div#content-root {
        left: unset;
        right: 0px;
    }
    
    html[dir=rtl] div#map {
        left: unset;
        right: 380px;
    }
    
    html[dir=rtl] #content-root.swipe {
        right: -380px !important;
    }
    
    html[dir=rtl] #map.swipe {
        left: 0px !important;
        right: 0px !important;
        width: 100%;
    }
    
    html[dir=rtl] #content-root:not(.swipe) .content-arrow img {
        transform: rotate(0deg) !important;
    }
    
    html[dir=rtl] #content-root.swipe .content-arrow img {
        transform: rotate(180deg) !important;
    }
    
    html[dir=rtl] .leaflet-popup.leaflet-zoom-animated .leaflet-popup-content {
        min-width: 260px;
    }
}



/* modified language / nav buttons on home 
 */ 
 
html[dir="rtl"]  .home-inline-buttons.buttons-with-languages {
    display: flex;
    justify-content: space-between;
}

html[dir="rtl"]  .home-inline-buttons.buttons-with-languages .last {
    justify-self: flex-end;
    flex-grow: 0;
    margin-right: auto;
}

html[dir="rtl"] .home-inline-buttons.buttons-with-languages .first {
    justify-self: flex-start;
    flex-grow: 0;
}

html[dir="rtl"] .home-inline-buttons:not(:has(.first)):not(:has(.last)) .home-inline-buttons-item:first-child {
    margin-right: auto;
    margin-left: unset !important;
}

html[dir="rtl"] .home-inline-buttons {
    flex-direction: row-reverse !important;
}



html[dir="rtl"] .large p {
    text-align: right;
}


html[dir="rtl"] .large p {
    text-align: right;
}

html[dir="rtl"] .form-group:not(.matrix-item) span.label-text,
html[dir="rtl"] .form-group:not(.matrix-item) label.radio-inline, 
html[dir="rtl"] .form-group:not(.matrix-item) label.checkbox-inline {
    margin: 0 !important;
    text-align: right;
}

html[dir="rtl"] input[type="radio"] {
    margin-left: 1rem;
    top: 3px;
}

html[dir="rtl"] .form-group:not(.matrix-item) span.label-text {
    margin-right: 1.25rem !important;
}

html[dir="rtl"] .form-group label {
    text-align: right;
}

html[dir="rtl"] button[data-layer-is-visible="true"] {
    border-right: 2px solid rgb(0 88 0 / 59%) !important;
    border-left: none !important;
}

html[dir="rtl"] button[data-layer-is-visible="false"] {
    border-right: 2px solid #ccc!important;
    border-left: none !important;
}

html[dir="rtl"] img.legend-close {
    right: unset !important;
    left: 0px !important;
}


html[dir="rtl"] .large label,
html[dir="rtl"] .large ul li,
html[dir="rtl"] .large p {
    text-align: right !important;
}

html[dir="rtl"] .form-group:not(.matrix-item) span.label-text {
    margin-right: .25rem !important;
}


html[dir="rtl"] .form-group:not(.matrix-item) span.label-text {
    margin-right: .25rem !important;
}

html[dir="rtl"] .checkbox {
    text-align: right !important;
}


html[dir="rtl"] .home-block-bar img {
    float: left !important;
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .child-content ul {
    margin-right: 0rem;
    padding-right: .5rem;
}

html[dir="rtl"] .mini-legend.visible {
    left: 50px;
    right: unset;
}

html[dir="rtl"] .mini-legend {
    left: 50px;
    right: unset;
}

html[dir="rtl"] .controls[role="navigation"] {
    right: unset;
    left: 0;
}

html[dir="rtl"] div#map {
    right: unset !important;
    left: unset !important;
}

html[dir="rtl"] body:has(.content-root.fadeInLeft) div#map {
    left: 0 !important;
}