/* Colors */
:root {
    --blue-1: #E6F0FD;
    --blue-9: #1F7CEA;
    --black-1: #FAFAFA;
    --black-2: #F2F2F2;
    --black-3: #E6E6E6;
    --black-5: #A9A9A9;
    --black-6: #8C8C8C;
    --black-7: #6F6F6F;
    --black-8: #4C4C4C;
    /* Colors */
        /* Blacks */
        --clr-k-100: #f7f7f7;
        --clr-k-200: #f2f2f2;
        --clr-k-300: #e6e6e6;
        --clr-k-400: #d2d2d2;
        --clr-k-500: #afafaf;
        --clr-k-600: #919191;
        --clr-k-700: #787878;
        --clr-k-800: #505050;
        --clr-k-900: #191919;

        /*Navy*/
        --clr-navy: #010D1F;

        /*Blues*/
        --clr-b-900: #1F7CEA;
        --clr-b-800: #398BEC;
        --clr-b-700: #549BEF;
        --clr-b-600: #6EABF1;
        --clr-b-500: #88BAF3;
        --clr-b-400: #A2CAF6;
        --clr-b-300: #BCD9F8;
        --clr-b-200: #D7E9FB;
        --clr-b-100: #F1F8FD;


}

/* Paddings / Sizes */
:root {
    --size-050: 8px;
    --size-100: 16px;
    --size-200: 20px;
    --size-300: 24px;
    --size-400: 32px;
    --size-500: 48px;
    --size-600: 56px;
    --size-650: 64px;
    --size-700: 96px;
    --size-800: 128px;
    --size-900: 160px;

    @media screen and (max-width: 1366px) {
        & {
            --size-500: 40px;
            --size-600: 48px;
            --size-650: 56px;
            --size-700: 80px;
            --size-800: 112px;
            --size-900: 128px;
        }
    }

    @media screen and (max-width: 1024px) {
        & {
            --size-100: 12px;
            --size-200: 16px;
            --size-300: 20px;
            --size-400: 24px;
            --size-500: 32px;
            --size-600: 40px;
            --size-650: 48px;
            --size-700: 72px;
            --size-800: 96px;
            --size-900: 112px;
        }
    }

    @media screen and (max-width: 768px) {
        & {
            --size-050: 4px;
            --size-100: 8px;
            --size-200: 12px;
            --size-300: 20px;
            --size-400: 24px;
            --size-500: 28px;
            --size-600: 32px;
            --size-650: 40px;
            --size-700: 64px;
            --size-800: 80px;
            --size-900: 96px;
        }
    }

    @media screen and (max-width: 480px) {
        & {
            --size-050: 4px;
            --size-100: 8px;
            --size-200: 12px;
            --size-300: 16px;
            --size-400: 20px;
            --size-500: 24px;
            --size-600: 28px;
            --size-650: 32px;
            --size-700: 56px;
            --size-800: 64px;
            --size-900: 80px;
        }
    }
}

/*Fonts*/
:root {
    /*Fonts Sizes*/
    --fs-050: 0.5rem;
    --fs-100: 0.75rem;
    --fs-200: 1rem;
    --fs-300: 1.25rem;
    --fs-400: 1.375rem;
    --fs-500: clamp(1.375rem, 1.75vw, 1.5rem);
    --fs-600: clamp(1.5rem, 2.5vw, 1.75rem);
    --fs-700: clamp(1.75rem, 3vw, 2rem);
    --fs-800: clamp(2rem, 3.5vw, 2.5rem);
    --fs-900: clamp(2.5rem, 6vw, 4rem);

    /*Fonts Weights*/
    --fw-100: 100;
    --fw-200: 300;
    --fw-300: 400;

    /*Fonts Families*/
    --ff-primary: Sora;
    --ff-secondary: Figtree;
}

::-webkit-scrollbar-track {
    background: transparent;
}

body{
    overflow-x: hidden;
}
/*Text Style*/
.txt-1 {
    font-family: Figtree;
    font-size: 20px;
    font-weight: 100;
}

.txt-1-bold {
    font-family: Figtree;
    font-size: 20px;
    font-weight: 500;
}

.txt-2 {
    font-family: Figtree;
    font-size: 18px;
    font-weight: 100;
}

.txt-2-bold {
    font-family: Figtree;
    font-size: 18px;
    font-weight: 500;
}

.txt-3 {
    font-family: Figtree;
    font-size: 16px;
    font-weight: 100;
}

.txt-3-bold {
    font-family: Figtree;
    font-size: 16px;
    font-weight: 500;
}

.txt-nowrap {
    text-wrap: nowrap;
}

/* Text Colors*/
.txt-white {
    color: white;
}

.txt-black-5 {
    color: var(--black-5);
}

.txt-black-6 {
    color: var(--black-8);
}

.txt-black-7 {
    color: var(--black-8);
}

.txt-black-8 {
    color: var(--black-8);
}

.txt-blue-9 {
    color: var(--blue-9);
}

/* Shadow */
.shadow{
    filter: drop-shadow(0 0 50px #0000000D);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
*:focus{
    outline: none;
}
.main-wrapper{
    height: 100vh;
    width: 100vw;
    position: relative;
}
.content-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-between;
    pointer-events: none;

    & > .nav-wrapper{
        padding:var(--size-300);

        & > .nav-cont{
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: var(--size-100);
        column-gap: var(--size-200);
        z-index: 1;
        pointer-events: auto;
        border-radius:4px;

        & > img.sk-logo{
            width: 180px;
            cursor: pointer;
        }

        @media only screen and (max-width: 768px) {
            .sk-logo {
                display: none;
            }
        }

        & > .search-cont{
            width: 100%;
            position: relative;
            min-height:40px;
        }
    }
    
        & > .nav-cont{
            background-color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: var(--size-100);
            column-gap: var(--size-200);
            z-index: 1;
            pointer-events: auto;

            & > img.sk-logo{
                width: 180px;
                cursor: pointer;
            }

            & > .search-cont {
                width: 100%;
                position: relative;
                min-height: 40px;
            }
        }
    }   

    & > .body-cont {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: end;
        justify-content: space-between;
        overflow: hidden;

        & > .sidebar-wrapper{
            height: auto;
            max-height: 100%;
            width: 100%;
            padding: var(--size-300);
            display: none;
            flex-direction: column;
            row-gap: var(--size-100);

            @media (max-width: 1024px) {
                & {
                    flex-direction: row;
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                    column-gap: 16px;
                    max-height: none;
                    flex-shrink: 0;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    scroll-padding: 36px;
                }
            }

            & > .sidebar-cont{
                width:90%;
                max-width:400px;
                overflow-y: scroll;

                & > .sidebar-item{
                    border-radius: 4px;
                }
            }
        }

        & > .legend-wrapper{
            margin:var(--size-300);

            @media (max-width: 1024px){
                &{
                    display:none;
                }
            }

            & > .legend-cont{
                background-color: white;
                padding: var(--size-300);
                display: flex;
                flex-direction: column;
                row-gap: 24px;
                z-index: 1;
                pointer-events: auto;
                border-radius:4px;

                & > .headline{
                    font-size:var(--fs-300);
                    font-family:var(--ff-secondary);
                }

                & > form{
                    display:flex;
                    flex-direction:column;
                    gap:var(--size-050);

                    & > .input-cont{
                        display: flex;
                        flex-direction:row;
                        width: 100%;
                        justify-content: space-between;
                        cursor: pointer;
                        gap: var(--size-100);
                        cursor: pointer;

                        &:not(:last-child){
                            border-bottom: 1px solid var(--clr-k-200);
                            padding-bottom: var(--size-100);
                        }

                        & > label {
                            display: flex;
                            flex-direction: row;
                            gap: var(--size-050);
                            align-items: center;
                            cursor: pointer;

                            & > img{
                                width: 32px;
                            }

                            & > p{
                                font-size: var(--fs-200);
                                font-family: Figtree;
                                color: var(--clr-k-800);
                                text-wrap:nowrap;
                            }
                        }
                    }
                }
            }
        } 
    }
}


#map{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.nav-search-cont{
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    justify-content: end;
    position: relative;
    width: 100%;
}
.search-cont{
    width: 100%;
    position: relative;
}
.nav-search{
    width: 100%;
    position: relative;
    background: var(--black-2) url("/img/searchbar-icon.svg") no-repeat 13px;
    padding-left: 40px;
    border-radius: 2px;
    height: 100%;
    border: none;
}
.nav-search::placeholder{
    font-family: Figtree;
    font-size: 18px;
    color: var(--black-7);
}
/*Search Dropdown*/
.search-dropdown {
    position: absolute;
    width: 100%;
    height: 0;
    background-color: white;
    top: calc(100% + 24px);
    left: 0;
    overflow-y: scroll;
    transition: height 0.5s ease;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}
.search-dropdown.active {
    max-height: 350px;
    height: auto;
    opacity: 1;
    pointer-events: auto;
}
.search-dropdown .full {
    padding: 8px 8px;
}
.dropdown-item{
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    margin: 0 8px;
    padding: 24px 16px;
    border-bottom: 1px solid var(--clr-k-200);
    transition: all .2s linear;
    cursor: pointer;
}
.dropdown-item:last-child{
    border: none;
}
.dropdown-item:hover{
    background-color: var(--clr-k-100);
    padding-left: 24px;
}
.dropdown-info{
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}



.btn-main{
    display: flex;
    flex-direction: row;
    column-gap: 8px;
    padding: 10px 16px;
    background-color: var(--blue-9);
    cursor: pointer;
    border-radius: 2px;
    align-items: center;
}
.filter-icon{
    width: 16px;
}
/*Filter Dropdown*/
.filter-dropdown{
    position: absolute;
    right: -16px;
    top: calc(100% + 24px);
    background-color: white;
    padding: 24px;
    width: 500px;
    height: 0;
    opacity: 0;
    pointer-events: none;
}
.filter-dropdown.active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
}
.power-station-type-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 8px;
    padding-top: 24px;
}
.power-station-type-active {
    padding: 8px 16px;
    background-color: var(--blue-9);
    color: white;
    border-radius: 2px;
    cursor: pointer;
}
.power-station-type {
    padding: 8px 16px;
    background-color: var(--clr-k-100);
    border: 1px solid var(--clr-k-300);
    color: var(--clr-k-700);
    border-radius: 2px;
    cursor: pointer;
}
.checkbox{
  cursor: pointer;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
}



/*Sidebar*/


.sidebar-cont{
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}
.sidebar-item {
    background-color: white;
    padding: 16px 32px 32px 32px;
    cursor: pointer;
    align-self: flex-end;
    width: 100%;
    overflow-y: visible;
    flex-shrink: 0;
    pointer-events: auto;
}
.sidebar-item-open {
    background-color: white;
    padding: 16px 32px 32px 32px;
    cursor: pointer;
    align-self: flex-end;
    width: 100%;
    overflow-y: visible;
    flex-shrink: 0;
    pointer-events: auto;
}

.sidebar-open{
    background-color: white;
    padding: 32px;
    cursor: auto;
}
.sidebar-header-closed{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}

.sidebar-control {
    display: flex;
    flex-direction: row;
    column-gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-k-300);
    justify-content: end;
}

.sidebar-control-icon {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: -8px;
}

    .sidebar-control-icon:hover {
        background-color: var(--clr-k-200);
    }

.sidebar-header-closed {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 20px;
}

 .sidebar-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--clr-k-200);
}
.sidebar-btn-cont {
    width: 100%;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-k-200);
}

.sidebar-btn {
    background-color: var(--blue-9);
    color: white;
    padding: 8px 24px;
    display: flex;
    justify-content: center;
}
.item-icon{
    width: 52px;
    height: 52px;
}
.sidebar-section{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    border-bottom: 1px solid var(--clr-k-200);
}
.sidebar-section:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.sidebar-row{
    display: flex;
    flex-direction: row;
}
.sidebar-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.sidebar-info-icon::after {
    content: url(../img/ext-link-icon.svg);
    padding-left: 8px;
}



/*Book Station */
.book-station-container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #a9a9a980;
    z-index: 1;
    display: none;
    justify-content: center;
    align-items: center;
}

.book-station-form {
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 800px;
    background-color: white;
    padding: 32px;
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    overflow-y: scroll;
}

.book-station-control {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-k-200);
}

.book-station-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    column-gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--clr-k-200);
}

.book-form-section {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--clr-k-200);
}

.book-form-row {
    display: flex;
    flex-direction: row;
    column-gap: 24px;
    width: 100%;
}

.input-cont {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;

    &.checkbox{
        flex-direction: row;
        align-items: center;
        gap:12px;
    }
}

.input {
    height: 36px;
    background-color: var(--clr-k-100);
    border: 1px solid var(--clr-k-200);
    padding: 4px;
    font-size: 16px;
    color: var(--clr-k-800);
    font-family: Figtree;
}

.input-text {
    height: 80px;
    width: 100%;
    background-color: var(--clr-k-100);
    border: 1px solid var(--clr-k-200);
    padding: 4px;
    resize: none;
    font-size: 16px;
    color: var(--clr-k-800);
    font-family: Figtree;
}

.book-form-btn-cont {
    display: flex;
    flex-direction: row;
    column-gap: 32px;
    justify-content: end;
    align-items: center;
}

.book-btn {
    padding: 16px 24px;
    background-color: var(--blue-9);
    color: white;
    cursor: pointer;
    border: none;
}

.cancel {
    cursor: pointer;
}

.text-danger.field-validation-error {
    font-family: 'Figtree';
    font-size: 12px;
    color: #FF6B6B;
}

.alert {
    width: fit-content;
    margin-top: 8px;
    background-color: white;
    display: flex;
    padding: 16px;
    z-index: 1;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1920px) {
    .nav-search::placeholder{
        font-size: 16px;
    }
    .nav-search{
        background-size: 16px;
    }

}
@media only screen and (max-width: 1024px) {
    .filter-dropdown{
        top: calc(100% + 16px);
    }
    .sidebar-wrapper{
        flex-direction: row;
        width: 100%;
        height: 100%;
        padding: 0 36px;
        background-color: transparent;
        column-gap: 16px;
        max-height: none;
        flex-shrink: 0;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 36px;

    }
    .sidebar-wrapper::-webkit-scrollbar {
        display: none;
    }
    .sidebar-cont{
        display: flex;
        flex-direction: row;
        column-gap: 8px;
    }
    .sidebar-item {
        max-width: 400px;
        height: auto;
        align-self: flex-end;
        flex-shrink: 0;
        scroll-snap-align: start;
        max-height: 100%;
        overflow-y: scroll;
        padding: 16px 24px 24px 24px;
    }
    .sidebar-control-icon {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {


    /*Text Style*/
.txt-1{
    font-size: 18px;
}
.txt-1-bold{
    font-size: 18px;
}
.txt-2{
    font-size: 16px;
}
.txt-2-bold{
    font-size: 16px;
}
.txt-3{
    font-size: 14px;
}

    .nav-search::placeholder{
        font-family: Figtree;
        font-size: 16px;
        color: var(--clr-k-700);
    }
    .search-cont{
        position:initial;
    }
    .search-dropdown{
        width: calc(100% + 32px);
        top: calc(100% + 16px);
        left: -16px;
    }
    .filter-btn > p{
        display: none;
        padding: 12px;
    }
    .filter-dropdown{
        width: calc(100% + 32px);
        padding: 16px;
    }
    .sidebar-wrapper{
        padding: 0 16px;
        scroll-padding: 16px;
    }
    .sidebar-open{
        max-height: 500px;
        overflow-y: scroll;
        width: 100%;
    }
    .sidebar-wrapper{
    column-gap: 8px;
    }
}

.marker-cluster-small {
    background-color: #33DD88aa !important;
    color: #6F6F6F;
}

    .marker-cluster-small div {
        background-color: #33DD88 !important;
    }

.marker-cluster-medium {
    background-color: #FFC120aa !important;
    color: #6F6F6F;
}

    .marker-cluster-medium div {
        background-color: #FFC120 !important;
    }

.marker-cluster-large {
    background-color: #FF6B6Baa !important;
    color: #6F6F6F;
}

    .marker-cluster-large div {
        background-color: #FF6B6B !important;
    }

.marker-cluster-small-admin {
    background-color: #33DD88aa !important;
    color: #FFFFFF;
}

.marker-cluster-medium-admin {
    background-color: #FFC120aa !important;
    color: #FFFFFF;
}

.marker-cluster-large-admin {
    background-color: #FF6B6Baa !important;
    color: #FFFFFF;
}

.dropdown-item-icon {
    width: 28px;
}

.input-date-row {
    display: flex;
    flex-direction: row;
    column-gap: 8px;
}

.input-field-section {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--clr-k-200)
}

.input-radio-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.input-radio-cont input {
    opacity: 0;
    width: 0;
}

.input-label-cont {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.radio-label {
    color: var(--clr-k-500);
    cursor: pointer;
}

.checkmark {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 2px solid var(--clr-k-500);
    display: flex;
}

.input-radio-cont {
    display: flex;
    flex-direction: row-reverse;
    gap: 4px;
    padding: 0 10px 0px 4px;
    align-items: center;
    cursor: pointer;
    font-family: Figtree;
    font-size: 16px;
    font-weight: 500;
}

    .input-radio-cont.active {
        background-color: #1F7CEA;
    }

        .input-radio-cont.active > .radio-label {
            color: white;
        }

        .input-radio-cont.active > .checkmark {
            border: 2px solid white;
        }

.input-radio-wrapper-multiple {
    gap: 4px;
    display: flex;
    flex-wrap: wrap;
}

.sidebar-info-location {
    display: flex;
    justify-content: space-between;
}

.info-icon {
    width: 15px;
    height: 15px;
    position: relative;
    background-image: url("../img/info_icon.svg");
    background-repeat: no-repeat;
    cursor: pointer;
}

.info-txt {
    position: absolute;
    right: 0;
    top: 36px;
    width: 350px;
    background-color: white;
    border: 1px solid var(--k-300);
    border-radius: 10px;
    filter: drop-shadow(0 0 20px var(--k-100));
    color: #8C8C8C;
    padding: 30px;
    display: none;
    flex-direction: column;
    row-gap: 20px;
    z-index: 50;
}

@media (max-width: 1024px) {
    .info-txt {
        top: -75px;
        right: -20px;
    }
}

    .info-headline {
        font-family: LatoMedium;
        font-size: 18px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--k-300);
    }

    .info-p {
        font-family: "LatoLight";
        font-size: 16px;
    }

    .info-txt-b {
        font-family: "LatoMedium";
    }

    .info-txt-block {
        display: flex;
        flex-direction: column;
        row-gap: 5px;
    }

    .info-icon:hover > .info-txt {
        display: flex;
    }