@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(fonts/montserrat-medium/montserrat-medium.woff) format("woff"), 
    url(fonts/montserrat-medium/montserrat-medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(fonts/montserrat-semibold/montserrat-semibold.woff) format("woff"), 
    url(fonts/montserrat-semibold/montserrat-semibold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: Montserrat;
    font-display: swap;
    src: url(fonts/montserrat-bold/montserrat-bold.woff) format("woff"), 
    url(fonts/montserrat-bold/montserrat-bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
}

:root {
  --font-cookie: "Montserrat", sans-serif;
  --bg-color: #39623e;
  --bg-opacity: rgba(255, 255, 255, 0.27);
  --color-link: #c1ffba;
  --color-link-dark: #32a517;
  --border-radius: 99px;
  --btn-hover-opacity: .8;
}

.cookie-overlay {
    background: rgba(24, 24, 24, 0.7);
    display: none;
    inset: 0;
    position: fixed;
    z-index: 100;
}

.cookie-overlay.is-active {
    display: block;
}

#cookie-banner .cookie {
    align-items: center;
    bottom: 0;
    display: flex;
    font-family: var(--font-cookie);
    font-weight: 500;
    font-size: 15px;
    grid-gap: 40px;
    left: 0;
    padding: 20px 30px;
    position: fixed;
    right: 0;
    z-index: 90;
}

@media (max-width: 992px) {
    #cookie-banner .cookie {
        flex-direction: column;
        grid-gap: 20px;
    }
    
}

#cookie-banner .--bg-color {
    background: var(--bg-color);
}

#cookie-banner .cookie__desc {
    color: #fff;
    line-height: 150%;
}

#cookie-banner .cookie__desc a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-skip-ink: none;
}

#cookie-banner .cookie__btns {
    display: flex;
    grid-gap: 20px;
}

#cookie-banner .btn-cookie { 
    align-items: center;
    display: flex;
    font-family: var(--font-cookie);
    font-weight: 600;
    font-size: 15px;
    opacity: 1;
    padding: 20px 30px;
    text-align: center;
    transition: .4s;
    text-decoration: none;
    white-space: nowrap;
}

#cookie-banner .btn-cookie:hover {
    opacity: var(--btn-hover-opacity);
}

#cookie-banner .btn--white {
    background: #fff;
    border-radius: var(--border-radius);
    color: #000;
}

#cookie-banner .btn--border {
    background: transparent;
    border: 1px solid #fff;
    border-radius: var(--border-radius);
    color: #fff;
}

#cookie-banner .btn--icon {
    align-items: center;
    background: var(--bg-opacity);
    border-radius: var(--border-radius);
    color: #fff;
    display: flex;
    grid-gap: 10px;
    padding: 10px 30px;
}

#cookie-banner .btn--icon img, #cookie-banner .btn--icon svg {
    /* fill: #fff; */
    flex-shrink: 0;
    height: 24px;
    width: 24px;
}

.cookie-popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, 0.25);
    display: none;
    /* display: grid; */
    font-family: var(--font-cookie);
    grid-template-columns: 190px 1fr;
    left: 50%;
    max-height: 90vh;
    max-width: 994px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 101;
}

.cookie-popup.is-active {
    display: grid;
}

#cookie-popup .cookie-popup__title {
    color: #000;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}

#cookie-popup .cookie-popup__nav {
    background: #fafafa;
    display: flex;
    flex-direction: column;
    height: 90vh;
    overflow-y: auto;
    padding: 30px 20px 50px 30px;
}

#cookie-popup .cookie-popup__nav-bottom {
    margin-top: auto;
}

@media (max-width: 767px) {
    #cookie-popup.cookie-popup {
        grid-template-columns: 1fr;
    }
    #cookie-popup .cookie-popup__nav {
        display: none;
    }
    #cookie-popup .cookie-popup {
        max-height: 100vh;
        height: 100vh;
    }
    #cookie-popup .cookie-popup__content {
        height: 100vh;
    }
}

#cookie-popup .cookie-popup__menu {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

#cookie-popup .cookie-popup__menu:nth-last-of-type(1) {
    border-bottom: 0;
}

#cookie-popup .cookie-popup__menu li {
    margin-bottom: 10px;
}

#cookie-popup .cookie-popup__menu li:last-child {
    margin-bottom: 0;
}

#cookie-popup .cookie-popup__menu li a {
    color: #383838;
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-decoration: none;
}

#cookie-popup .cookie-popup__item {
    color: #000;
    font-size: 15px;
    line-height: 150%;
}

#cookie-popup .cookie-popup__item-title {
    font-weight: 700;
    font-size: 18px;
    color: #000;
}

#cookie-popup .cookie-popup__content {
    height: 90vh;
    overflow-y: auto;
    padding: 30px 30px 50px 40px;
}

#cookie-popup .checkbox-cookie {
    display: none;
}

#cookie-popup .checkbox-cookie:checked + .cookie-popup__label:after {
    background: var(--bg-color);
}

#cookie-popup .cookie-popup__label {
    color: #000;
    cursor: pointer;
    display: block;
    font-weight: 700;
    font-size: 15px;
    margin-top: 20px;
    padding-left: 30px;
    position: relative;
}

#cookie-popup .cookie-popup__label:after {
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    content: '';
    height: 20px;
    left: 0;
    position: absolute;
    transition: .4s;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    z-index: 1;
}

#cookie-popup .cookie-popup__label:before {
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: '';
    height: 5px;
    left: 4px;
    position: absolute;
    top: calc(50% - 5px);
    transform: rotate(-45deg);
    transition: .4s;
    width: 12px;
    z-index: 2;
}

#cookie-popup .cookie-popup__item p {
    margin-top: 20px;
}

#cookie-popup .cookie-popup__item + .cookie-popup__item {
    border-top: 1px solid #d8d8d8;
    margin-top: 20px;
    padding-top: 20px;
}

#cookie-popup .cookie-popup__nav-bottom, #cookie-popup .cookie-popup__nav-top {
    font-size: 12px;
    line-height: 1.3;
}

#cookie-popup .cookie-popup__nav-bottom a, #cookie-popup .cookie-popup__nav-top a {
    color: var(--color-link-dark);
}

#cookie-popup .cookie-popup__btn {
    background: var(--bg-color);
    bottom: 0;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    left: 0;
    padding: 13px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    width: 100%;
    z-index: 3;
}

#cookie-popup .cookie-popup__content::-webkit-scrollbar-button,
#cookie-popup .cookie-popup__nav::-webkit-scrollbar-button {
    width: 5px;
    height:0px
}

#cookie-popup .cookie-popup__content::-webkit-scrollbar-track,
#cookie-popup .cookie-popup__nav::-webkit-scrollbar-track 
 {
    background-color:#e3e3e3;
}

#cookie-popup .cookie-popup__content::-webkit-scrollbar-thumb,
#cookie-popup .cookie-popup__nav::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--bg-color);
}

#cookie-popup .cookie-popup__content::-webkit-scrollbar-thumb:hover, 
#cookie-popup .cookie-popup__nav::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-color);
}

#cookie-popup .cookie-popup__content::-webkit-resizer,
#cookie-popup .cookie-popup__nav::-webkit-resizer {
    width: 5px;
    height:0px
}

#cookie-popup .cookie-popup__content::-webkit-scrollbar,
#cookie-popup .cookie-popup__nav::-webkit-scrollbar {
    width: 5px;
}

#cookie-popup .cookie-popup__close {
    cursor: pointer;
    height: 24px;
    position: absolute;
    right: 20px;
    top: 16px;
    width: 24px;
}

@media (max-width: 567px) {
    #cookie-banner .btn {
        font-size: 14px;
        padding: 10px 15px;
    }
    #cookie-banner .cookie__btns {
        flex-wrap: wrap;
        justify-content: center;
    }
    #cookie-banner .btn-cookie {
        padding: 10px 15px;
    }
}

#smartCookieControl .cookie-btn {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    /* bottom: 0; */
    color: var(--color-link-dark);
    display: inline-flex;
    font-family: var(--font-cookie);
    font-size: 12px;
    /* left: 0; */
    padding: 10px 15px;
    /* position: absolute; */
    transition: .4s;
}

#smartCookieControl .cookie-btn:hover {
    opacity: var(--btn-hover-opacity);
}

.hidden-scroll {
    overflow: hidden;
}