@import '/css/fonts.css';
@import '/css/normalize.css';

:root {
    /*Fonts*/
    --font_family_headline: 'Roboto', Arial, sans-serif;
    --font_family_body: 'Roboto', Arial, sans-serif;

    /*Font sizes*/
    --font_size_h1:46px;
    --font_size_h2:35px;
    --font_size_h3:26px;
    --font_size_h4:20px;
    --font_size_h5:18px;
    --font_size_h6:15px;
    --font_size_subheading:15px;
    --font_size_body:14px;

    /*Colors*/
    --color_black: #000000;
    --color_white: #ffffff;

    /* Greys */
    --color_grey_1: #d8d9da;
    --color_grey_2: #b4b5b6; /*grey text on black bg*/
    --color_grey_3: #67757c;
    --color_grey_4: #757576;
    --color_grey_6: #585858;
    --color_grey_8: #3c4043;
    --color_grey_9: #323232; /*borders*/
    --color_grey_10: #17181b; /*black backgrounds*/

    /* Reds */
    --color_red_1: #dc0707; /*Form validation errors*/
    --color_red_2: #ed1b24; /*Map tools color*/
    --color_red_3: #f50057; /*Dialog cancel button*/
    --color_red_4: #c51162; /*Dialog cancel hover button*/

    /* Greens */
    --color_green_1: #00ff01;
    --color_green_2: #008000; /*Map tools color*/
    --color_green_3: #46b8da;
    --color_green_4: #117a8b; /*button hover */
    --color_green_5: #10707f; /*button hover border - not used now*/

    /* Blues */
    --color_blue_1: #2196f3; /*Menu titles*/
    --color_blue_2: #1f88e5; /*Active menu color*/
    --color_blue_3: #428bca; /*Link color*/
    --color_blue_4: #3071a9; /*Link hover color*/
    --color_blue_5: #3C78FA; /*Dialog confirm button*/

    /* Yellows */
    --color_yellow_1: #ffff01; /*Map tools color*/

    /* Oranges */
    --color_orange_1: #fe7e01; /*Map tools color*/

    /*Reference Colors*/
    --color_primary: var(--color_blue_1);
    --color_secondary: var(--color_red_1);
    --color_tertiary: var(--color_orange_1);
    --color_grey: var(--color_grey_2);
    --color_error: var(--color_red_1);

    /* Links */
    --color_link: var(--color_blue_3);
    --color_link_hover: var(--color_blue_4);

    /* Buttons */
    --color_button_background: var(--color_grey_9);
    --color_button_border: var(--color_grey_9);
    --color_button_foreground: var(--color_white);


    /* UPDATE VARIABLES ON LARGE SCREENS */
    @media screen and (min-width: 600px) {
        :root{
            /*Font sizes*/
            --font_size_h1:56px;
            --font_size_h2:45px;
            --font_size_h3:26px;
        }
    }

}

/* ________________________________________ HEADINGS _____________________________________ */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{ font-family: var(--font_family_headline); font-weight:700; line-height: 1.15; margin:0;}
h1, .h1 {font-size:var(--font_size_h1);}
h2, .h2 {font-size:var(--font_size_h2);}
h3, .h3 {font-size:var(--font_size_h3);}
h4, .h4 {font-size:var(--font_size_h4);}
h5, .h5 {font-size:var(--font_size_h5);}
h6, .h6 {font-size:var(--font_size_h6);}
.small {font-size: small;}


/* ________________________________________ BASE STYLES __________________________________ */
body { overflow:hidden; background-color:var(--color_black);color:var(--color_white); font-family: var(--font_family_body); font-size: var(--font_size_body); font-style: normal; font-weight: 400; line-height: 1.5;}
p{ margin: 0 0 18px 0; }

.container{
    margin: 0 auto;
    max-width: var(--container_width);
    padding-inline: var(--container_padding);
}
p strong, p b {font-weight:700;}
svg, path{
    /* fill:currentColor; */
    pointer-events:none;
}
img{
    pointer-events: none;
}
* {scrollbar-width: thin; scrollbar-color: var(--color_grey_6) var(--color_grey_10);}


/* ________________________________________ LISTS ______________________________ */
ul
{
    margin: 0;
    padding:0;
}
ul li
{
    margin:0;
    padding:0;
}


/* ________________________________________ LINKS & BUTTONS ______________________________ */
/*Normal Links*/
:is(p, li) a{
    position:relative;
    display:inline-flex;
    gap: 10px;
    font-weight:600;
    color:var(--color_link);
    justify-content: center;
    text-decoration: none;
}
:is(p, li) a:hover{
    --color_link:var(--color_link_hover);
}

button > * {
    pointer-events: none;
}
/*Normal Buttons*/
button, a.button{
    background: var(--color_button_background);
    border: 2px solid var(--color_button_border);
    color: var(--color_button_text);
    border-radius: var(--button_border_radius);
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    outline: none;
    padding: 10px 30px;
    text-decoration: none;
    width: fit-content;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    line-height: 1;
    user-select: none;
}
button:hover, a.button:hover{
    --color_button_background: var(--color_green_4);
    --color_button_border: var(--color_green_4);
    --color_button_text: var(--color_white);
}

/*Outline Button*/
button.outline, a.button.outline{
    --color_button_background:transparent;
    --color_button_border:var(--color_white);
    --color_button_text:var(--color_white);
}
button.outline:hover, a.button.outline:hover{
    --color_button_background:var(--color_green_4);
    --color_button_border:var(--color_green_4);
    --color_button_text:var(--color_white);
}
/*Dialog Cancel Button*/
button[value=cancel], button[value=close]{
    --color_button_background:var(--color_red_3);
    --color_button_border:var(--color_red_3);
    --color_button_text:var(--color_white);
}
button[value=cancel]:hover, button[value=close]:hover{
    --color_button_background:var(--color_red_4);
    --color_button_border:var(--color_red_4);
    --color_button_text:var(--color_white);
}
/*Dialog Confirm Button*/
button[value=confirm]{
    --color_button_background:var(--color_blue_3);
    --color_button_border:var(--color_blue_3);
    --color_button_text:var(--color_white);
}
button[value=confirm]:not([disabled]):hover{
    --color_button_background:var(--color_blue_4);
    --color_button_border:var(--color_blue_4);
    --color_button_text:var(--color_white);
}
/* Buttons as links */
button.link{
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color_link);
    font-weight: 600;
    cursor: pointer;
    font-size: inherit;
}
button.link:hover{
    --color_link:var(--color_link_hover);
}



/* ________________________________________ FORMS ______________________________ */
label{
    width:100%;
    display:grid;
    gap:5px;
}
label > span{
    font-weight:500;
    font-size:17px;
    color:var(--color_white);
}

input, input[type=text], textarea, select
{
    background: transparent;
    width:100%;
    padding:10px;
    color: var(--color_white);
    border: 1px solid var(--color_grey_9);
    font-weight: 500;
    color-scheme: dark;
}

input:autofill, input[type=text]:autofill,
input[type=email]:autofill, input[type=password]:autofill
textarea:autofill, select:autofill,
input:-webkit-autofill, input[type=text]:-webkit-autofill,
input[type=email]:-webkit-autofill, input[type=password]:-webkit-autofill
textarea:-webkit-autofill, select:-webkit-autofill
{
    -webkit-background-clip: text !important;
}


option{
    background-color: var(--color_black);
    color: var(--color_white);
}

/**
    Custom "Checkbox"
*/
.checkboxes{
    display:grid;
    gap:10px;
}
label.checkbox{
    display: flex;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
}
label.checkbox input[type=checkbox]{
    position:absolute;
    width:0;
    height:0;
    opacity: 0;
}
label.checkbox input + span {
    background-color: var(--color_grey_4);
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    position: relative;

}
label.checkbox input + span + span {
    flex:1 1 0;
}
label.checkbox input:checked + span:after {
    content: 'x';
    position: absolute;
    font-weight: 700;
    color: var(--color_white);
}

/**
    Custom "Radio"
*/
.radios{
    display:grid;
    gap:10px;
}
label.radio{
    display: flex;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
}
label.radio input[type=radio]{
    position:absolute;
    width:0;
    height:0;
    opacity: 0;
}
label.radio input + span {
    background-color: var(--color_grey_4);
    width: 21px;
    height: 21px;
    display: grid;
    border-radius: 999px;
    place-items: center;
    position: relative;
}
label.radio input:checked + span:after {
    content:'';
    width: 17px;
    height: 17px;
    background: var(--color_white);
    border-radius: 999px;
    position: absolute;
    font-weight: 700;
}

/**
    Custom Secondary "Radio"
*/
label.radio-secondary{
    display: flex;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    position: relative;
}
label.radio-secondary input[type=radio]{
    position:absolute;
    width:0;
    height:0;
    opacity: 0;
}
label.radio-secondary input + span {
    align-items: center;
    display: flex;
    gap: 10px;
}
label.radio-secondary input + span:before 
{
    border: 2px solid #9e9e9e;
    border-radius: 50%;
    content: '';
    height: 22px;
    width: 22px;
}
label.radio-secondary input:checked + span:before 
{
    background-color: #f50057;
    border-color: #f50057;
    box-shadow: inset 0px 0px 0px 3px var(--color_grey_10);
}

/**
    Custom "Switch"
*/
label.switch {
    cursor: pointer;
    align-items: center;
    user-select: none;
    width: 100%;
    position: relative;
    display: grid;
    grid-template: "switch message" auto / 45px auto;
    padding: 7px 6px;
}
label.switch input {
    position: absolute;
    opacity: 0;
    top:0;
    left:0;
}
label.switch span {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
label.switch > span:first-of-type {
    display: inline-block;
    background: var(--color_black);
    width: 44px;
    height: 22px;
    border-radius: 15px;
    border: 2px solid var(--color_grey_6);
    margin-right: 10px;
    position: relative;
    transition: background 0.5s;
    grid-area: switch;
}

label.switch > span:first-of-type:after {
    content: "";
    display: block;
    background: var(--color_grey_8);
    width: 18px;
    height: 18px;
    left: 0;
    border-radius: 50%;
    transition: left .25s;
    position: relative;
    border: 2px solid var(--color_grey_8);
}
label.switch .message{
    font-weight:400;
    grid-area: message;
    line-height: 1.2;
}
/*When "Switch" is checked*/
label.switch input:checked + span {
    background: var(--color_black, inherit);
}
label.switch input:checked + span:after {
    left:calc(100% - 18px);
    background: var(--color_primary);
    border-color: var(--color_primary);
}
/*Disabled Switch*/
label.switch input:disabled + span:after {
    background: var(--color_grey_6);
}
/*Focused Switch*/
label.switch input:focus-visible + span{
    outline: 2px solid var(--color_grey_5);
}

/**
    Custom "Switch" secondary
*/
.switch-secondary 
{   
    input[type=checkbox] 
    {   
        position: absolute;
        opacity: 0;
        top:0;
        left:0;
    }

    span 
    {
        cursor: pointer;
        font-size: inherit;        
        padding-left: 48px;
        position: relative; 
        user-select: none;
    }

    span:before 
    {
        background-color: #9e9e9e;
        border-radius:10px;        
        content: '';
        height: 10px;
        left: 4px;
        opacity: 0.5;
        position: absolute;         
        top: 50%;
        transform: translateY(-50%); 
        width: 30px;     
    }    
            
    span:after 
    {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius:50%;
        background-color: #9e9e9e;
        top: 50%;
        transform: translateY(-50%); 
        left: 0;
        transition: all 0.3s;
    }

    input:checked + span:before 
    {
        background-color: #f50057;
    }

    input:checked + span:after 
    {
        background-color: #f50057;
        left : 20px;
    }
}


/* Checkbox toggle style */
.toggle 
{
    input[type=checkbox] 
    {   
        display: none;    
        opacity: 0;
    }

    input[type=checkbox] + label 
    {
        cursor: pointer;
        display: inline-block;
        height: 13px;
        position: relative;
        width: 40px;
    }

    input[type=checkbox] + label:before 
    {
        background-color: #9e9e9e;
        border-radius:10px;        
        content: '';
        height: 10px;
        left: 4px;
        opacity: 0.5;
        position: absolute;         
        top: 4px;        
        width: 30px;     
    }    
            
    input[type=checkbox] + label:after 
    {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius:50%;
        background-color: #9e9e9e;
        top: 0;
        left: 0;
        transition: all 0.3s;
    }

    input[type=checkbox]:checked + label:before 
    {
        background-color: #f50057;
    }

    input[type=checkbox]:checked + label::after 
    {
        background-color: #f50057;
        left : 20px;
    }
}




/* ________________________________________ ACCORDION ______________________________ */
/* .accordion{
    display: grid;
    list-style:none;
}
.accordion .item{
    border-bottom: 1px solid var(--color_grey_4);
    padding: 10px 0;
}
.accordion .header{
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
}
.accordion .header:before{
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg   xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23b4b5b6'><path d='M480-357.85 253.85-584 296-626.15l184 184 184-184L706.15-584 480-357.85Z'   /%3E%3C/svg%3E");
    background-size: contain;
    width:25px;
    height:25px;
}
.accordion .item:not(.selected) .body{
    height: 0;
    overflow: hidden;
}
.accordion .item.selected .header:before{
    transform: rotate(180deg);
} */

.hide
{
    display: none !important;
}