* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    transition: background-color .3s;
}

:root{
    --color-warning: #FF2943;
    --color-warning-lighter: #ffdee2;
    
    --color-dark-green: #064420;
    --color-dark-green-lighter: rgba(6, 68, 32, 0.28);
    --color-green: #6E8F77;
    --color-light-green: #BBD1C1;
    --color-light-green-lighter: #c9d8cd;
    --color-attention: #CA8601;
    --color-attention-lighter: rgba(202, 135, 1, 0.28);
    --color-placeholder: #999187;
    --color-beige:  #FAF1E6;
    --color-white: #FDFAF6;
}

html.light{
    --accent: var(--color-dark-green);
    --background-primary: var(--color-beige);
    --background-secondary: var(--color-white);
    --text-primary: var(--color-dark-green);
    --text-secondary: black;

    --button-primary: var(--color-light-green);
    --button-primary-hover: #80ac8c;

    --button-secondary: var(--color-white);
    --button-secondary-hover: #c5c5c5bb;

    --color-userblock: #f7f5f1;
    --color-warning-bar: var(--color-warning-lighter);
}

html.dark{
    --accent: rgb(75, 187, 81);
    --background-primary: #2B2A33;
    --background-secondary: #42414d;
    --text-primary: white;
    --text-secondary: #dddddd;

    --button-primary: var(--accent);
    --button-primary-hover: rgb(59, 145, 63);;

    --button-secondary: var(--background-secondary);
    --button-secondary-hover: rgba(255, 255, 255, 0.24);;

    --color-userblock: #5b5a6b;
    --color-warning-bar: #855157;
}

h1 , h2, h3, a, summary{
    color: var(--text-primary);
}

html.dark h1{
    color: var(--accent);
}

p, span, label, div{
    color:var(--text-secondary);
}

.accent{
    color: var(--accent);
}

strong{
    font-weight: 500;
}

html.light svg{
    filter: invert(18%) sepia(8%) saturate(5489%) hue-rotate(99deg) brightness(103%) contrast(95%);
}

html.light .hoverEffect svg:hover{
    filter: invert(30%) sepia(10%) saturate(300%) hue-rotate(80deg) brightness(120%) contrast(110%);
}

html.dark svg:not(.green svg) {
    filter: invert(100%) brightness(100%) contrast(100%);
}

html.dark .hoverEffect svg:not(.green svg):hover{
    filter: invert(100%) brightness(50%) contrast(50%);
}

svg.warning, svg.warningOnHover:hover{
    filter: invert(36%) sepia(73%) saturate(5810%) hue-rotate(337deg) brightness(101%) contrast(105%) !important;
}

h1{
    /* font-family: 'Lexend Mega'; */
    font-weight: 700;
    letter-spacing: 0px;
}

h2{
    font-weight: 500;
}

html{
    background-color: var(--background-primary);
}

.body-container{
    margin: 6em 0 6em 5em;
}

.body-container.noBack{
    margin: 3em 0 0 5em;
}

/* NAV */

nav {
    position:fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 5px;
    left: 5px;
    height: calc(100% - 10px);
    background-color: var(--background-secondary);
    width: 70px;
    border-radius: 12px;
    overflow-x: hidden;
    padding: 10px;
    transition: .3s all ease-in-out;
    z-index: 2;
}

nav span {
    color: var(--text-primary);
}

nav a {
    display: block;
}

.topNav {
    user-select: none;
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 5px 0px 5px 8px;
    font-size: 1.7em;
    overflow: hidden;
}

.topNav > a {
    text-decoration: none;
    text-wrap: nowrap;
}

.arrow{
    height: 32px;
    margin-right: 20px;
    cursor: pointer;
}

nav.opened {
    width: 250px;
}

.arrow.opened:not(.arrowPhone), .arrow.opened .arrowSymbol {
    transform: rotate(180deg);
    transform-origin: center;
}

.arrowSymbol{
    display: block;
    transition: 0.3s;
    height: 32px;
}

.hidden {
    margin-left: 100px;
    opacity: 0;
}

.hidden.opened {
    margin-left: 0;
    opacity: 1;
}

ul:not(.rules) {
    padding: 0 15px;
    list-style: none;
}

#middleNav{
    margin: 2em 0;
}

#middleNav a {
    display: inline-flex;
    text-align: center;
    text-decoration: none;
    line-height: 2;
    font-size: 1.5em;
}

#middleNav a:hover{
    padding-left: 5px;
}

nav.opened #middleNav a:hover {
    padding-left: 10px;
}

.navIcon{
    margin-left: -5px;
}

.navIcon svg{
    margin-top: -2px;
}

.user {
    align-items: center;
    display: flex;
    border-radius: 10px;
    transition: .2s;
    padding-bottom: 5px;
    user-select: none;
}

.user.opened {
    padding: 5px;
}

.userBlock{
    position: relative;
}

.userBlock:hover .user {
    background-color: var(--color-userblock) !important;
    cursor: pointer;
}

.user:hover {
    box-shadow: 7px 7px 4px -6px rgba(0,0,0,0.08);
    -webkit-box-shadow: 7px 7px 4px -6px rgba(0,0,0,0.08);
    -moz-box-shadow: 7px 7px 4px -6px rgba(0,0,0,0.08);
}

.navCredentials {
    padding-left: 15px;
}

#navName {
    font-size: clamp(1em, 1.3em, 1.3em);
    color: var(--text-primary);
}

#navRole {
    font-size: 1em;
}

#userOptions {
    display: none;
    position: absolute;
    top: -105px;
    width: 100%;
    background-color: var(--color-userblock);
    border-radius: 10px;
    padding: 10px;
}

#settings {
    margin-bottom: 10px;
    width: fit-content;
}

#logout, #settings, #middleNav a, .hidden, .arrow {
    transition: .3s;
}

#middleNav a, #userOptions a {
    width: 100%;
}

#logout {
    margin-top: 10px;
    color: var(--color-warning);
    width: fit-content;
}

#logout:hover, #settings:hover {
    padding-left: 10px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: var(--text-primary);
}

#userOptions a {
    padding: 5px;
    text-decoration: none;
}

/* KONEC NAV */

.iconWithText{
    display: flex;
    gap: .4em;
    align-items: center;
    width: fit-content;
    justify-content: center;
}

.closeTopRight{
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}

summary {
    cursor: pointer;
}

.success{
    color: var(--accent);
}

.warning{
    color: var(--color-warning) !important;
}

.popups{
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.popup{
    background-color: var(--background-secondary);
    padding: 1.5em 2em;
    width: fit-content;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1em;
    margin-bottom: 1em;
    border-radius: 1em;
    position: relative;
    
}

.popup > div, .popup > svg:not(.close) {
    flex-shrink: 0;
}

.popup svg:not(.close){
    width: 45px;
    height: 45px;
}

.back{
    position: absolute;
    left: 6em;
    top: 2.5em;
    padding: .5em 1em;
    border-radius: 2em;
    text-decoration: none;
    transition: .5s;
}

body.navOpened .back{
    left: 16.5em;
}

.container{
    margin: 4em auto 2em auto;
    max-width: 65em;
    width: 96%;
    display: grid;
    align-items: center;
}

.arrowPhone {
    display: none;
    position: absolute;
    height: fit-content;
    left: 240px;
    top:5px;
    padding: 10px 10PX 10px 20px;
    background-color: var(--background-secondary);
    z-index: 1;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
}

.navMain {
    position: fixed;
    top: 5px;
    left: 0px;
    height: calc(100% - 10px);
    z-index: 555;
    transition: .5s;
}

.avatar{
    border-radius: 50%;
    transition: .2s;
}

nav .avatarMain{
    margin-left: -10px;
}

nav.opened .avatarMain{
    margin-left: 0px;
}

/* Spolecnej kontent */

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

.buttons{
    display: grid;
    gap: 1em;
    margin-block: 1em;
}

.buttonsRow{
    display: flex;
    align-items: center;
    gap: 1em;
}

.buttonsRow.toRight{
    justify-content: right;
}

.button{
    padding: .7em 2em;
    border-radius: 2em;
    width: fit-content;
    text-decoration: none;
    background-color: var(--button-secondary);
    cursor: pointer;
    border: none;
    font-size: 1em;
    transition: background-color .15s;
    color: var(--text-secondary);
    transition: .3s;
}

.button.disabled, .button:disabled{
    opacity: .6;
    cursor: not-allowed;
}

.button:not(.disabled, :disabled):hover{
    background-color: var(--button-secondary-hover);
}
.button.warning:not(.disabled, :disabled):hover{
    background-color: var(--color-warning-lighter);
}

.button.green{
    background-color: var(--button-primary);
    color: black;
}

.button.green:not(.disabled, :disabled):hover{
    background-color: var(--button-primary-hover);
}

/* FANCY INPUTS */

.fancy input, .fancy textarea, .fancy select {
    margin: 0 auto;
    border: var(--color-light-green) solid 2px;
    padding: .95em 1.75em;
    border-radius: 2em;
    background-color: var(--background-secondary);
    width: 100%;
    outline: none;
    font-size: 1em;
}

input, textarea, select{
    background-color: var(--background-secondary);
    color: var(--text-secondary);
    accent-color: var(--text-secondary);
}

.labels{
    margin-top: 1em;
    display: flex;
}

.labels > span{
    display: block;
}
.label1{
    flex-basis: 22em;
}
.label2{
    flex-basis: 8em;
}
/* .label3{
    flex-basis: 40%;
} */


textarea{
    resize: vertical;
    min-height: 150px;
    max-height: 500px;
}

.fancy select{
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 1em top 50%;
    background-size: 0.65rem auto;
    cursor: pointer;
    width: fit-content;
    padding-right: 3em;
}

html.dark .fancy select{
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

input[type="number"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: #999187;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #ffeddd inset !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border: var(--color-green) solid 2px;
}

.fancy label {
    display: block;
    width: fit-content;
}

.fancy .field{
    margin-bottom: .5em;
}

.fancy #test_tasks > div{
    display: flex;
    margin-bottom: 1em;
    gap: 1em;
}

.fancy .buttons{
    display: flex;
    gap: .5em;
    margin-bottom: 1em;
}

.fancy button[type="button"] {
    border-radius: 50%;
    background-color: var(--button-primary);
    border: 0px;
    color: var(--color-dark-green);
    display: block;
    user-select: none;
    width: 50px;
    height: 50px;
    font-size: 24px;
    cursor: pointer;

    transition: background-color ease-in-out .05s;
}

.fancy button[type="button"]:not(:disabled, .disabled):hover {
    background-color: var(--button-primary-hover);
}

.fancy input[type="radio"] {
    /* accent-color: var(--color-dark-green); */
    appearance: none;
    background-color: var(--background-primary);
    border-radius: 50%;
    margin-right: 7px;
    height: 13px; /* muze byt 12px */
    width: 13px;
    border: 2px solid var(--accent);
    background-clip: content-box;
    padding: 2px;
    /* aspect-ratio: 1; */
}

.fancy input[type="radio"]:checked{
    background-color: var(--accent);
}

/* END OF FANCY INPUTS */

.mt05{
    margin-top: .5em;
}
.mt1{
    margin-top: 1em;
}
.mt2{
    margin-top: 2em;
}
.mt3{
    margin-top: 3em;
}
.mb05{
    margin-bottom: .5em;
}
.mb1{
    margin-bottom: 1em;
}
.mb2{
    margin-bottom: 2em;
}

.right{
    display: block;
    margin-left: auto;
}


div.switch{
    margin: .5em 2em;
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: 1.2em;
    padding-bottom: 4px;
}
.switch input{
    visibility: hidden;
    display: none;
}
.theme{
    display: block;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: var(--color-white);
    cursor: pointer;
    border-radius: 20px;
    transition: .5s ease-in;
    border: var(--color-light-green) solid 2px;;
}
.theme::before{
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: var(--color-green);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(0px , -2px);
    transition: .5s;
}
.switch input:checked ~ .theme::before{
    transform: translate(28px , -2px);
    background-color: var(--accent);
}
.switch input:checked ~ .theme{
    background-color: var(--background-secondary);
}

@media screen and (width <= 768px) {
    .topNav .arrow {
        display: none;
    }
    .arrowPhone {
        display: block;
    }

    nav {
        width: 250px;
        position: relative;
        height: 100%;
    }

    .navMain {
        left: -255px;
        height: 100%;
        top: 0;
    }

    body.navOpened .navMain{
        left: 0;
    }

    .hidden {
        margin-left: 0;
        opacity: 1;
    }
    .user {
        padding: 5px;
    }

    .topNav {
        display: block;
        text-align: center;
    }

    .topNav > a{
        text-align: left;
        padding-left: .5em;
    }

    .body-container{
        margin: 6em 0 6em 0; 
    }

    .body-container.noBack{
        margin: 3em 0 6em 0;
    }

    .container{
        justify-content: center;
    }

    h1{
        text-align: center;
    }

    .buttonsRow:not(.stayInRow){
        flex-direction: column;
        align-items: flex-start;
    }

    #test_tasks > div{
        flex-wrap: wrap;
    }

    #test_tasks > div input[type="number"] {
        width: fit-content;
    }
}