:root {
    --toggle-accent: rgb(0, 120, 215);
    --toggle-off: rgb(128 130 133);
}

input[type="checkbox"] {
    accent-color: var(--toggle-accent);

}


html, body {
    font-family: Arial;
    font-size: 13px;
    line-height: 1.3;
}


div.clear {
    clear: both;
}

/*** TABS AND BUTTONS ***/

.button:disabled {
    filter: grayscale(90%);
}

a.tab,
a.button, input.button, .button {
    text-transform: uppercase;
    font-size: 11px;
    display: inline-block;
    line-height: 14px;
    color: White;
    padding: 5px 15px;
}

    a.tab:hover,
    a.button:hover {
        text-decoration: none;
    }

a.button, input.button, .button {
    background-color: #f26634;
    border-radius: 3px;
    font-size: 12px;
    border: 1px solid #AF5230;
    padding: 4px 14px;
}

    a.button:hover, input.button:hover, .button:hover {
        background-color: #FF8F66;
    }

    .button.save, .button.insert {
        background-color: #338844;
        border-color: #26502F;
    }

        .button.save:hover, .button.insert:hover {
            background-color: #49B75F;
        }


        .button.save.report.error {
            /*background-image: url('images/alert.svg'); /*used https://yoksel.github.io/url-encoder/ to convert it */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg%3E%3Ccircle cx='256' cy='256' r='246' stroke='darkred' stroke-width='20' fill='yellow' /%3E%3C/g%3E%3Cg%3E%3Crect x='214.3' y='63.08' style='fill:%23F92814;' width='83.4' height='226.29' /%3E%3Crect x='214.3' y='365.52' style='fill:%23F92814;' width='83.4' height='83.4' /%3E%3C/g%3E%3Cg%3E%3Crect x='256' y='63.08' style='fill:%23DB0404;' width='41.702' height='226.29' /%3E%3Crect x='256' y='365.52' style='fill:%23DB0404;' width='41.702' height='83.4' /%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: 98% 10%;
            background-origin: border-box;
            background-size: 10px;
        }

        .button.save.report.fatal.error {
            background-color: red;
            color: white;
        }

    .button.new, .button.delete {
        background-color: #FF3322;
    }

        .button.new:hover, .button.delete:hover {
            background-color: #FD7C71;
        }

    a.button.view {
        background-image: url(/content/images/map/view16.png);
        background-repeat: no-repeat;
        background-position: 5px 3px;
        padding-left: 24px;
    }

    a.button.disabled,
    a.button.disabled:hover {
        background-color: #888;
        color: #111;
        border-color: #888;
    }

    a.button.header {
        font-size: 11px;
    }

    a.button.tabbed {
        float: right;
        padding: 1px 5px;
        font-size: 11px;
        border: 1px solid #AF5230;
        margin-left: 2px;
    }

.input.tabbed {
    color: white;
    float: right;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 14px;
    border: 1px solid #AF5230;
    border-radius: 3px;
    background-color: #f26634;
    text-transform: uppercase;
}

label.tabbed input[type="checkbox"] {
    height: 11px;
    width: 11px;
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: text-bottom;
}


.button.tiny {
    padding: 0px 3px;
    font-size: 11px;
}

.button.small {
    padding: 1px 5px;

    margin-left: 1px;
}

    .button.small:hover {
        
    }

.button.right {
    float: right;
}


div.display-box {
    background-color: #E6E7E9;
}

#search-window .display-box .collapsible {
    border: 1px solid #809020;
}

    #search-window .display-box .collapsible .collapsible-header {
        background-color: #809020;
    }

    #search-window .display-box .collapsible .collapsible-content {
        background-color: #E7ECBE;
        padding: 5px;
    }




#property-window .display-box .collapsible {
    margin-bottom: 12px;
}

    #property-window .display-box .collapsible .collapsible-header {
        background-color: #eee;
        color: #333;
        font-weight: bold;
    }

        #property-window .display-box .collapsible .collapsible-header .expander {
            color: #333;
            border-color: #999;
            margin-left: 1px;
            margin-top: 1px;
        }

    #property-window .display-box .collapsible .collapsible-toggle:checked + .collapsible-header > .collapsible-label .expander:before {
        content: "᠆"; /* (U+1806), not a normal minus */
    }

    #property-window .display-box .collapsible .collapsible-content {
        border: none;
    }

    #property-window .display-box .collapsible .collapsible-content {
    }

#main div.tab_container {
}

a.tab {
    margin-right: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: #808285;
}

    a.tab:hover {
        background-color: #A2A3A6;
    }

    a.tab.selected {
        background-color: #e6e7e9;
        color: #707275;
    }

/* CHECKBOXES */
a.checkbox,
label.radio-button {
    display: inline-block;
}


.checkbox {
    color: Black;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 22px;
    border: 1px solid #abd;
    border-radius: 4px;
}


input[type="checkbox"] {
    vertical-align: text-top;
}

label input[type="checkbox"], .checkbox.label input {
    margin: 2px 2px 1px 0;
}


label.radio-button {
    position: relative;
    background-color: white;
    padding-left: 22px;
    padding-right: 5px;
    line-height: 22px;
    border: 1px solid #abd;
    border-radius: 4px;
    color: Black;
    background-repeat: no-repeat;
    background-position: 4px 2px;
}


label.radio-button {
    background-image: url(/content/images/ui/rbv-16.png);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

.checkbox:hover,
.radio-button:hover {
    border: 1px solid #4DAFFF;
    text-decoration: none;
    background-position: 4px -46px;
}


.radio-button.checked {
    background-position: 4px -22px;
}

    .checkbox.checked:hover,
    .radio-button.checked:hover {
        background-position: 4px -70px;
    }




label.radio-button input {
    position: absolute;
    left: -999px;
}

div.display-box {
    padding: 7px;
    overflow: hidden;
}

div.table-box {
    overflow: auto;
}

/* */
fieldset {
    border: 1px solid black;
    margin-top: 5px;
    padding: 5px;
}

    fieldset .row {
        padding: 2px;
    }



.searchslider {
    height: 2px !important;
    margin: 5px 0 !important;
    background-color: #24aae1 !important;
    border-top: 1px solid #025c73 !important;
    border-bottom: 1px solid #4AF !important;
}

.customhandle {
    border: 1px solid black !important;
    border-radius: 9px !important;
    top: -9px !important;
    background: white !important;
    outline: none !important;
}

    .customhandle:hover {
        border-color: #4DAFFF !important;
    }


.toggle {
    background-color: white;
    padding-left: 22px;
    padding-right: 5px;
    line-height: 22px;
    color: Black;
    background-repeat: no-repeat;
    background-position: 4px 2px;
    background-image: url(/content/images/ui/cbv-16.png)
}

    .toggle.checked {
        background-position-y: -22px;
    }

/*
    popup message
*/
/* Popup container */
.popup {
    position: relative;
    display: inline-block;
}

    /* The actual popup (appears on top) */
    .popup .popuptext {
        visibility: hidden;
        width: 220px;
        background-color: white;
        border: 2px solid red;
        color: red;
        text-align: center;
        border-radius: 6px;
        padding: 0px 0px 8px 0px;
        position: absolute;
        z-index: 20;
        bottom: 150px;
        left: 50%;
        margin-left: -110px;
    }


        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -8px;
            border-width: 8px;
            border-style: solid;
            border-color: red transparent transparent transparent;
        }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* A panel that can be clicked.*/
.hyperlinkbox {
    border: 1px solid whitesmoke;
    border-radius: 10px;
    background-color: transparent;
    margin: 8px;
    padding: 4px;
    text-align: center;
}

    /* A panel that can be clicked.*/
    .hyperlinkbox:hover {
        border-color: blue;
    }

    .hyperlinkbox a {
        color: black;
    }

.edited label {
    font-weight: bold;
}

/* Selects any invalid <input> */
input:invalid {
    background-color: pink;
}


/* File Upload Drop Box */

.dropbox .uploading,
.dropbox .success,
.dropbox .error {
    display: none;
}


.dropbox.draghover {
    background-color: white;
}


.dropbox {
    background-color: #c8dadf;
    outline: 1px dashed black;
    outline-offset: -0px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 75px;
}


/*************************************************
    Loading spinner
**************************************************/
.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

    .loader.big {
        width: 96px;
        height: 96px;
    }

    .loader.small {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.loader.center {
    margin: auto auto auto auto; /* horizontal center if width: and height: set */
    text-align: center;
}
/**************************************************/


/**************************************************
    highlight the sort-order radio button labels
**************************************************/
.sortorderblock
{
    display:inline-block;
}

    .sortorderblock input[type='radio'] + label {
        color: grey;
        margin: 0 -2px 0 -2px;
        display: inline-block;
    }

.sortorderblock input[type='radio']:checked + label {
    color: black;
}



input[list] {
    cursor: default;
    caret-color: transparent;
}



/*******************************************************/


/**********************************************************
    Style checkboxes to look like android toggle switches
**********************************************************/

/* visually hide checkbox but keep it accessible */
.md-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* label wrapper */
.md-switch-block .md-switch-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle
}

    /* track */
    .md-switch-block .md-switch-label .track {
        position: relative;
        width: 24px;
        height: 12px;
        background: var(--toggle-off);
        border-radius: 999px;
        transition: background-color 180ms cubic-bezier(.4,0,.2,1);
    }

        /* thumb */
        .md-switch-block .md-switch-label .track::before {
            content: "";
            position: absolute;
            top:1px;
            left:1px;
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.15);
            transition: transform 180ms cubic-bezier(.4,0,.2,1), width 180ms cubic-bezier(.4,0,.2,1);
        }

/* checked */

.md-switch-block .md-switch-input:checked ~ .md-switch-label .track {
    background: var(--toggle-accent);
}

.md-switch-block .md-switch-input:not(:checked) ~ .md-switch-target {
    
}


.md-switch-block .md-switch-input:checked ~ .md-switch-label .track::before {
    transform: translateX(12px);

}

/* disabled */
.md-switch-block .md-switch-input:disabled ~ .md-switch-label,
.md-switch-block .md-switch-input:disabled ~ .md-switch-target {
    opacity: 0.38;
    cursor: not-allowed;
}




/**********************************************************************************
    patch to make old checkboxes look like android toggles



**********************************************************************************/


/* base label as switch */
label.md-switch.form-control:has(input[type="checkbox"]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    padding-left: 26px; /* space for switch */
    padding-right: 0.25rem; /* steal some more space from the right */
}

/* visually hide checkbox but keep it accessible */
label.md-switch.form-control > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* track */
label.md-switch.form-control:has(input[type="checkbox"])::before {
    content: "";
    position: absolute;
    left: 1px;
    width: 24px;
    height: 12px;
    background: var(--toggle-off);
    border-radius: 999px;
    transition: background-color 180ms cubic-bezier(.4,0,.2,1);
}

/* thumb */
label.md-switch.form-control:has(input[type="checkbox"])::after {
    content: "";
    position: absolute;
    left: 2px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.15);
    transition: transform 180ms cubic-bezier(.4,0,.2,1);
}

/* checked state */
label.md-switch.form-control:has(input[type="checkbox"]:checked)::before {
    background: var(--toggle-accent);
}

label.md-switch.form-control:has(input[type="checkbox"]:checked)::after {
    transform: translateX(12px);
}

/* disabled */
label.md-switch.form-control:has(input[type="checkbox"]:disabled) {
    opacity: 0.38;
    cursor: not-allowed;
}