/* COOKIES */
#cookies-modal__overlay { display: none; background: rgb(0 0 0 / 70%); width: 100%; height: 100vh; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9020; place-items: center; padding: 10px; overflow: auto; }
#cookies-modal__overlay.cm_active { display: grid; }
#cookies-modal__overlay.anitamte { animation: fadeOut 500ms 400ms forwards; }
.n-cookies-info { position: fixed; bottom: 0; left: 0; right: 0; height: auto; background: #fff; color: #fff; z-index: 1000; font-size: 14px; padding-bottom: 0em; border-top: 1px solid #eee; }
.n-cookies-info.anitamte { animation: fadeOut 500ms forwards; }
.n-cookies-info.d-none { display: none; }
.n-cookies-info .wrapper { display: grid; grid-template-columns: 1fr 0.4fr; align-items: center; padding: 25px 10%; max-width: 100%; }
.n-cookies-info p { margin: 1em 2em 1em; font-size: 14px; line-height: 1.2; color: #000; text-align: left; }
.n-cookies-info a.pp { color: #000; text-decoration: underline; }
.n-cookies-info .wrapper_buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; }
button.btn-cookies { font-size: 12px; line-height: 1.3; outline: none; border: 1px solid #000; background: #fff; color: #000; padding: 7px 20px; border-radius: 30px; margin: 0 15px; }
button.btn-cookies.dark { background: #000; color: #fff; }
button.btn-cookies:hover { cursor: pointer; }

#cookies-modal { display: none; position: relative; z-index: 3000; background: #fff; width: calc(100% - 10px); max-width: 612px; max-height: calc(100vh - 56px); min-height: 200px; border-radius: 8px; height: auto; animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal none running slideUp; overflow: auto; }
#cookies-modal a.pp { text-decoration: underline; color: #00BCD4; }
#cookies-modal.cm_active { display: block; }
#cookies-modal.anitamte { animation: fadeOut 500ms 200ms forwards; }
#cookies-modal .cookied-modal--wrapper { max-height: calc(100vh - 56px); }
#cookies-modal .cookies-modal_header { background-color: #f8f8f8; padding: 8px 12px 8px 16px; min-height: 56px; display: flex; align-items: center; border-radius: 8px 8px 0 0; border-bottom: 1px solid rgb(221, 221, 221); }
#cookies-modal .cookies-modal_header h1 { font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; color: #000; }
#cookies-modal .cookies-modal_header h1 img { display: inline; width: 25px; height: 25px; transform: translateY(-2px); }
#cookies-modal .cookies-modal_body { padding: 24px 24px 16px; max-height: 420px; overflow: auto; }
#cookies-modal .cookies-modal_body--header { display: grid; grid-template-columns: 1fr 72px; gap: 40px; align-items: center; }
#cookies-modal .cookies-modal_body--header p { text-align: justify; font-size: 14px; }
#cookies-modal .cookies-modal_body--header img { width: 72px; height: 72px; }
#cookies-modal .cookies-modal_body .item { padding: 15px 40px 15px 70px; border-bottom: 2px solid #e5e5e5; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
#cookies-modal .cookies-modal_body .item p { font-size: 14px; line-height: 1.4; margin: 0; color: #000; }
#cookies-modal .cookies-modal_body .item p:first-child { font-weight: 600; }

#cookies-modal .cookies-modal_fotter { background-color: rgb(245, 245, 245); display: flex; -webkit-box-pack: end; justify-content: flex-end; padding: 13px 24px; position: relative; border-top: 1px solid rgb(221, 221, 221);}

#cookies-modal .switch { position: relative; display: inline-block; width: 36px; height: 20px; margin: 0; }
#cookies-modal .switch input { opacity: 0; width: 0; height: 0; }
#cookies-modal .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #808080; -webkit-transition: .2s; transition: .2s; margin: 0; width: auto; height: auto; }
#cookies-modal .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .2s; transition: .2s; }
#cookies-modal input:checked + .slider { background-color: #bada55; }
#cookies-modal input:focus + .slider { box-shadow: 0 0 1px #bada55; }
#cookies-modal input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); }
#cookies-modal .slider.round { border-radius: 10px; }
#cookies-modal .slider.round:before { border-radius: 50%; }

@keyframes slideUp {
    0% {
        transform: translateY(100vh);
        opacity: 0.48; 
    }
}


@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (max-width: 1366px) { 
    .n-cookies-info .wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 991.98px) { 
    .n-cookies-info p { font-size: 12px; margin: 0 0 15px; } 
}
@media (max-width: 767.98px) {
    #cookies-modal .cookies-modal_header { padding: 15px 35px; }
    #cookies-modal .cookies-modal_header h1 { font-size: 18px; line-height: 1.4; }
    #cookies-modal .cookies-modal_body .item { padding: 10px 20px 10px 35px; }
    #cookies-modal .cookies-modal_body .item p { font-size: 12px; }
    #cookies-modal .cookies-modal_fotter { padding: 15px 20px 15px 35px; }

    #cookies-modal .cookies-modal_body--header { grid-template-columns: 1fr; }
    #cookies-modal .cookies-modal_body--header img { display: none; }
}
@media (max-width: 575.98px) { 
    .n-cookies-info .wrapper { padding: 15px; }
    .n-cookies-info .wrapper_buttons { display: grid; grid-template-columns: 1fr; row-gap: 10px; }

    #cookies-modal .cookies-modal_header h1 { font-size: 16px; line-height: 1.4; }
    #cookies-modal .cookies-modal_header { padding: 10px 20px; }
    #cookies-modal .cookies-modal_body .item { padding: 10px 10px 10px 20px; }
    #cookies-modal .cookies-modal_fotter { display: grid; grid-template-columns: 1fr; row-gap: 10px; padding: 15px 10px 15px 20px; }

    /* #cookies-modal .switch { width: 40px; height: 15px; } */
    /* #cookies-modal .slider:before { height: 13px; width: 13px; bottom: 1px; } */
    /* #cookies-modal input:checked + .slider:before { -webkit-transform: translateX(23px); -ms-transform: translateX(23px); transform: translateX(23px); } */
}


/* Accordion styles */
#cookies-modal .accordion { margin-top: 20px; display: none; }
#cookies-modal .accordion.show {display: block; }
#cookies-modal .accordion input { display: none; }
#cookies-modal .box { position: relative; padding: 13px 16px; cursor: pointer; border-radius: 8px; border: 1px solid rgb(221, 221, 221); transition: all .15s ease-in-out; margin-bottom: 8px; }
#cookies-modal .box .item-checkbox { height: 20px; position: relative; z-index: 100; }
#cookies-modal .box::before { content: ''; position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
#cookies-modal header.box { background: #00BCD4; z-index: 100; cursor: initial; }
#cookies-modal header .box-title { margin: 0; font-weight: normal; font-size: 16pt; color: white; cursor: initial; }
#cookies-modal .box-title { cursor: pointer; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; margin: 0; font-size: 14px; line-height: 24px; font-weight: 500; }

#cookies-modal .box-header { display: grid; grid-template-columns: 1fr 36px 1px 18px; gap: 10px; align-items: center; } #cookies-modal .box-line { height: 100%; width: 1px; background: rgb(221, 221, 221); }

#cookies-modal .box-content { padding: 16px 0 0; font-size: 14px; line-height: 24px; color: rgba(0,0,0,.54); display: none; }
#cookies-modal .box-open { position: absolute; height: 58px; width: 100%; top: 0; left: 0; cursor: pointer; display: inline-block; z-index: 10; }
#cookies-modal .box-close { position: absolute; height: 58px; width: 100%; top: 0; left: 0; cursor: pointer; display: none; z-index: 10; }
#cookies-modal input:checked + .box { height: auto; }
#cookies-modal input:checked + .box .box-header { border-bottom: 1px solid rgb(221, 221, 221); padding-bottom: 13px; }
#cookies-modal input:checked + .box .box-content, #cookies-modal input:checked + .box .box-close { display: inline-block; }
#cookies-modal input:checked + .box .box-open { display: none; }
#cookies-modal input:checked + section.box .box-arrow { transform: rotate(180deg); }


#cookies-modal #btn_settings.hide { display: none; }
#cookies-modal #btn_save.hide { display: none; }
/* END COOKIES */