/* ============================================================
TITULOS
============================================================ */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6 {
    color: var(--primary);
    font-family: var(--headings-font-family);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--spacer-2);
    margin-top: 0;
}

/* Desktop (≥ 992px) */
h1,
.h1 {
    font-size: var(--h1-font-size, 3.5rem);
}

h2,
.h2 {
    font-size: var(--h2-font-size, 2.75rem);
}

h3,
.h3 {
    font-size: var(--h3-font-size, 2rem);
}

h4,
.h4 {
    font-size: var(--h4-font-size, 1.5rem);
}

h5,
.h5 {
    font-size: var(--h5-font-size, 1.25rem);
}

h6,
.h6 {
    font-size: var(--h6-font-size, 1rem);
}

/* Tablet (768px – 991px) */
@media (max-width: 991px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-md, 3rem);
    }

    h2,
    .h2 {
        font-size: var(--h2-font-size-md, 2.375rem);
    }

    h3,
    .h3 {
        font-size: var(--h3-font-size-md, 1.75rem);
    }

    h4,
    .h4 {
        font-size: var(--h4-font-size-md, 1.375rem);
    }

    h5,
    .h5 {
        font-size: var(--h5-font-size-md, 1.125rem);
    }

    h6,
    .h6 {
        font-size: var(--h6-font-size-md, 0.9375rem);
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {

    h1,
    .h1 {
        font-size: var(--h1-font-size-sm, 2.5rem);
    }

    h2,
    .h2 {
        font-size: var(--h2-font-size-sm, 2rem);
    }

    h3,
    .h3 {
        font-size: var(--h3-font-size-sm, 1.5rem);
    }

    h4,
    .h4 {
        font-size: var(--h4-font-size-sm, 1.25rem);
    }

    h5,
    .h5 {
        font-size: var(--h5-font-size-sm, 1rem);
    }

    h6,
    .h6 {
        font-size: var(--h6-font-size-sm, 0.875rem);
    }
}

/* ============================================================
COLOR TEXTOS 
============================================================ */
body {
    color: var(--body-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.8;
}

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

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


/* ==========================================
Enlaces
========================================== */

.portlet-cookies-banner-configuration a,
.portlet-cookies-banner-configuration a:any-link,
a.mut-link,
a.mut-link:any-link,
*:where(a.mut-link) {
    color: var(--primary) !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
    cursor: pointer;
}

.portlet-cookies-banner-configuration a:hover,
.portlet-cookies-banner-configuration a:focus,
.portlet-cookies-banner-configuration a:focus-visible,
a.mut-link:hover,
a.mut-link:focus,
a.mut-link:focus-visible,
*:where(a.mut-link):hover,
*:where(a.mut-link):focus {
    color: var(--mut-green) !important;
    text-decoration-color: var(--mut-lime) !important;
    text-decoration-thickness: 2px !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-underline-position: left;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.portlet-cookies-banner-configuration a:visited,
a.mut-link:visited {
    color: var(--mut-green) !important;
}

.portlet-cookies-banner-configuration a:active,
a.mut-link:active {
    color: var(--mut-green-dark-01) !important;
}

.portlet-cookies-banner-configuration a:focus-visible,
a.mut-link:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}


/* ============================================================
LISTAS
============================================================ */

/* ul */
ul li::marker {
    color: var(--mut-pink);
}

/* ul sub-lista */
ul ul li::marker {
    color: var(--mut-pink);
    opacity: 0.65;
}

/* ol */
ol li::marker {
    color: var(--mut-green-light-01);
    font-weight: var(--font-weight-bold);
}

/* ol sub-lista */
ol ol li::marker {
    color: var(--mut-green-light-02);
    opacity: 0.75;
}

/* dl */
dl {
    margin: 0.5em 0 1.1em;
}

dt {
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-top: 0.75em;
}

dd {
    margin-left: 1.5em;
    margin-bottom: 0.4em;
    line-height: 1.65;
    color: var(--body-color);
}

/* ============================================================
TABLAS
============================================================ */

table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-family-base);
    font-size: 0.9375em;
    margin: 1.75em 0;
}

/* Cabecera */
table thead tr {
    border-bottom: 2px solid var(--table-border-color);
}

table thead th {
    padding: var(--table-cell-padding);
    text-align: left;
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    border: 1px solid var(--mut-grey);
}

/* Cuerpo */
table tbody td {
    padding: var(--table-cell-padding);
    color: var(--body-color);
    vertical-align: top;
    line-height: 1.55;
    border: 1px solid var(--mut-grey);
}

table tbody th {
    padding: var(--table-cell-padding);
    font-weight: var(--font-weight-bold);
    vertical-align: top;
    border: 1px solid var(--mut-grey);
}

/* Caption */
table caption {
    caption-side: bottom;
    padding: var(--spacer-2) var(--spacer-1);
    font-size: 0.8125em;
    color: var(--mut-green-light-01);
    text-align: left;
    font-style: italic;
}

/* Modificador: tabla compacta */
table.table--compact thead th,
table.table--compact tbody td,
table.table--compact tbody th,
table.table--compact tfoot td {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
}

/* ============================================================
FOOTER
============================================================ */

.footer a {
    display: block;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    color: white;
}

.footer .btn-link {
    padding: 0;
    color: var(--mut-lime);
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
    text-align: left;
}

.footer .btn-link:hover {
    color: white;
}

/* Subfooter */
.subfooter .footer-nav li {
    margin-right: 1rem;
}

/* Footer Navigation Menu — Row */
.footer-nav.navbar-nav li {
    margin-right: 1.5rem;
}

.footer-nav.navbar-nav a.nav-link {
    color: var(--mut-lime);
    font-size: 15px;
    font-weight: bold;
    padding: 0;
}

.footer-nav.navbar-nav a.nav-link:hover {
    color: white;
}

/* Footer Navigation Menu — Column */
.footer-nav.footer-nav-column.navbar-nav {
    flex-direction: column;
    gap: var(--spacer-3);
}

/* ============================================================
NAVEGACIÓN
============================================================ */

.navbar-underline .navbar-toggler-link::after {
    background-color: var(--mut-pink);
}

.navigation-bar-light {
    background-color: transparent !important;
}

/* Tabs Fragment */
.component-tabs .navbar-nav {
    gap: 1.5rem;
}

.component-tabs .navigation-bar-light .nav-link {
    color: var(--primary);
    font-weight: normal;
}

.component-tabs .navigation-bar-light .nav-link.active {
    color: var(--mut-pink);
    font-weight: bold;
}

/* ============================================================
MUT BUTTON
============================================================ */

.mut-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    border-radius: 100px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    outline: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Elemento <a> */
a.mut-btn {
    display: inline-flex;
    text-decoration: none;
}

a.mut-btn:hover {
    text-decoration: none;
    color: var(--primary);
}

/* Tamaño standard */
.mut-btn--standard {
    padding: 12px 24px;
    font-size: 16px;
    line-height: 24px;
    min-height: 48px;
}

.mut-btn--standard .mut-btn__icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.mut-btn--standard:not(:has(.mut-btn__text)) {
    padding-left: 12px;
    padding-right: 12px;
}

/* Tamaño small */
.mut-btn--small {
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    min-height: 36px;
}

.mut-btn--small .mut-btn__icon {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.mut-btn--small:not(:has(.mut-btn__text)) {
    padding-left: 8px;
    padding-right: 8px;
}

/* Tipo primary */
.mut-btn--primary {
    background-color: var(--primary);
    color: var(--mut-lime, #B9EDAA);
    border-color: var(--primary);
}

.mut-btn--primary:hover:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--mut-green-light-01, #336053);
    border-color: var(--mut-green-light-01, #336053);
    color: var(--mut-lime, #B9EDAA);
}

.mut-btn--primary:focus:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--primary);
    border-color: var(--mut-lime, #B9EDAA);
}

.mut-btn--primary:active:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Tipo secondary */
.mut-btn--secondary {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.mut-btn--secondary .mut-btn__icon {
    color: var(--primary);
}

.mut-btn--secondary:hover:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--mut-lime-light-01, #E3F8DD);
    border-color: var(--primary);
    color: var(--primary);
}

.mut-btn--secondary:focus:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--mut-lime-light-01, #E3F8DD);
    border: 2px solid var(--mut-pink-dark-01, #9D7B93);
    box-shadow: 0px 0px 0px 1px var(--mut-green-dark-01, #003828);
}

.mut-btn--secondary:active:not(.mut-btn--disabled):not([aria-disabled="true"]) {
    background-color: var(--mut-lime-light-01, #E3F8DD);
    border-color: var(--mut-green-dark-01, #163929);
    color: var(--mut-green-dark-01, #163929);
}

.mut-btn--secondary.mut-btn--disabled,
.mut-btn--secondary[aria-disabled="true"] {
    background-color: transparent;
    color: var(--mut-green-light-01, #1f4d3d);
    border-color: var(--mut-grey-dark-01, #DADADA);
}

/* Estado deshabilitado */
.mut-btn--disabled,
.mut-btn[aria-disabled="true"] {
    background-color: var(--mut-grey-dark-01, #DADADA);
    color: var(--mut-green-light-01);
    border-color: var(--mut-grey-dark-01, #DADADA);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.mut-btn--disabled .mut-btn__icon,
.mut-btn[aria-disabled="true"] .mut-btn__icon {
    color: var(--mut-green-light-01);
}

/* Solo icono (sin texto) */
.mut-btn:not(:has(.mut-btn__text)) {
    gap: 0;
    padding-left: 12px;
    padding-right: 12px;
}

/* Nueva ventana */
.mut-btn--blank::after {
    content: ' ↗';
    font-size: 0.875em;
    margin-left: 4px;
}

.mut-btn--blank:has(.mut-btn__icon--right)::after {
    content: none;
}

/* Accesibilidad */
.mut-btn:focus-visible {
    outline: 2px solid var(--mut-green-light-01, #1f4d3d);
    outline-offset: 2px;
}

/* Iconos */
.mut-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mut-btn__icon--left {
    margin-right: -4px;
}

.mut-btn__icon--right {
    margin-left: -4px;
}

/* Texto */
.mut-btn__text {
    display: inline-block;
}

/* ============================================================
UTILIDADES
============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================================
MEDIA QUERIES
============================================================ */

@media (min-width: 768px) {
    .component-tabs .navbar-expand-md .navbar-collapse {
        justify-content: center;
    }

    .component-tabs .navigation-bar-light.navbar-expand-md.navbar-underline .navbar-nav .nav-link.active::after {
        background-color: var(--mut-pink);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
}

@media (max-width: 767px) {
    .mut-btn--standard {
        padding: 10px 20px;
        font-size: 15px;
    }

    .mut-btn--small {
        padding: 7px 14px;
        font-size: 13px;
    }
}

@media (prefers-contrast: high) {
    .mut-btn {
        border-width: 3px;
    }
}



/* ============================================================
 BANNER COOKIES
============================================================ */

div.cookies-banner.cookies-banner-bottom[role="dialog"] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacer-3);
    background: var(--mut-green);
    font-family: var(--font-family-base);
    color: var(--mut-white);
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] .portlet-cookies-banner {
    max-width: var(--container-max-xl);
    margin: 0 auto;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] .container-view {
    background-color: var(--mut-green);
    border: none;
    box-shadow: none;
    color: var(--mut-white);
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] p {
    color: var(--mut-white);
    font-family: var(--font-family-base);
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] .text-5,
div.cookies-banner.cookies-banner-bottom[role="dialog"] p.text-5 {
    color: var(--mut-lime);
    font-family: var(--headings-font-family);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--spacer-2);
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] a {
    color: var(--mut-lime);
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] a:hover,
div.cookies-banner.cookies-banner-bottom[role="dialog"] a:focus {
    color: var(--mut-white);
}

/* ============================================================
 2) BOTONES DEL BANNER
============================================================ */

div.cookies-banner.cookies-banner-bottom[role="dialog"] .btn,
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="configurationButton"],
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="acceptAllButton"],
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="declineAllButton"] {
    border: 2px solid transparent !important;
    border-radius: 100px !important;
    font-family: var(--font-family-base) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: none;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] .btn.btn-sm,
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="configurationButton"],
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="acceptAllButton"],
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="declineAllButton"] {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="configurationButton"] {
    background-color: transparent !important;
    color: var(--mut-white) !important;
    border-color: var(--mut-white) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="configurationButton"]:hover,
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="configurationButton"]:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--mut-white) !important;
    border-color: var(--mut-white) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="acceptAllButton"] {
    background-color: var(--mut-lime) !important;
    color: var(--mut-green-dark-01) !important;
    border-color: var(--mut-lime) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="acceptAllButton"]:hover,
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="acceptAllButton"]:focus {
    background-color: var(--mut-lime-light-01) !important;
    color: var(--mut-green-dark-01) !important;
    border-color: var(--mut-lime-light-01) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="declineAllButton"] {
    background-color: transparent !important;
    color: var(--mut-white) !important;
    border-color: var(--mut-white) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="declineAllButton"]:hover,
div.cookies-banner.cookies-banner-bottom[role="dialog"] button[id$="declineAllButton"]:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--mut-white) !important;
    border-color: var(--mut-white) !important;
}

div.cookies-banner.cookies-banner-bottom[role="dialog"] .btn:focus-visible,
div.cookies-banner.cookies-banner-bottom[role="dialog"] a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--mut-green-dark-01), 0 0 0 3px var(--mut-pink) !important;
}

/* ============================================================
 3) MODAL EXTERIOR DE CONFIGURACIÓN
============================================================ */

.cadmin .modal-backdrop.show {
    background-color: rgba(0, 28, 20, 0.72);
    opacity: 1;
}

.cadmin #cookiesBannerConfiguration .modal-content {
    background-color: var(--mut-white);
    border: none;
    border-radius: 24px;
    box-shadow: var(--box-shadow-lg);
    overflow: hidden;
    font-family: var(--font-family-base);
}

#cookiesBannerConfiguration a {
    color: var(--mut-green) !important;
}

.cadmin #cookiesBannerConfiguration .modal-header {
    background-color: var(--mut-green);
    border-bottom: 1px solid var(--mut-green-dark-01);
}

.cadmin #cookiesBannerConfiguration .modal-title,
.cadmin #cookiesBannerConfiguration h1.modal-title {
    color: var(--mut-lime);
    font-family: var(--headings-font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--h2-font-size);
    line-height: 1.2;
    margin: 0;
}

.cadmin #cookiesBannerConfiguration .modal-header .close,
.cadmin #cookiesBannerConfiguration .modal-header .btn-unstyled {
    color: var(--mut-white);
    opacity: 1;
}

.cadmin #cookiesBannerConfiguration .modal-header .close:hover,
.cadmin #cookiesBannerConfiguration .modal-header .btn-unstyled:hover,
.cadmin #cookiesBannerConfiguration .modal-header .close:focus,
.cadmin #cookiesBannerConfiguration .modal-header .btn-unstyled:focus {
    color: var(--mut-lime);
}

.cadmin #cookiesBannerConfiguration .modal-header .lexicon-icon {
    fill: currentColor;
}

.cadmin #cookiesBannerConfiguration .modal-body,
.cadmin #cookiesBannerConfiguration .modal-body iframe {
    background-color: var(--mut-white);
}

.cadmin #cookiesBannerConfiguration .modal-footer {
    background-color: var(--mut-white);
    border-top: 1px solid var(--mut-grey);
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn {
    border: 2px solid transparent !important;
    border-radius: 100px !important;
    font-family: var(--font-family-base) !important;
    font-weight: 700 !important;
    min-height: 48px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(1),
.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(2) {
    background-color: transparent !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(1):hover,
.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(2):hover,
.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(1):focus,
.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(2):focus {
    background-color: var(--mut-lime-light-01) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(3) {
    background-color: var(--primary) !important;
    color: var(--mut-lime) !important;
    border-color: var(--primary) !important;
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(3):hover,
.cadmin #cookiesBannerConfiguration .modal-footer .btn-group-spaced .btn:nth-child(3):focus {
    background-color: var(--mut-green-light-01) !important;
    color: var(--mut-lime) !important;
    border-color: var(--mut-green-light-01) !important;
}

.cadmin #cookiesBannerConfiguration .modal-footer .btn:focus-visible,
.cadmin #cookiesBannerConfiguration .modal-header .close:focus-visible,
.cadmin #cookiesBannerConfiguration .modal-header .btn-unstyled:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--mut-green-dark-01), 0 0 0 3px var(--mut-pink) !important;
}

/* ============================================================
 4) TOGGLE SWITCH DE LIFERAY
============================================================ */

.portlet-cookies-banner-configuration .toggle-switch {
    font-family: var(--font-family-base);
}

.portlet-cookies-banner-configuration .toggle-switch-check~.toggle-switch-bar::before {
    background-color: var(--mut-grey-dark-01);
    border-color: var(--mut-grey-dark-01);
    border-radius: 999px;
    border-style: solid;
    border-width: 1px;
    bottom: 0;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
    transition:
        background-color 100ms ease-in,
        border-color 100ms ease-in,
        box-shadow 150ms ease-in-out,
        color 100ms ease-in,
        left 100ms ease-in,
        opacity 100ms ease-in,
        right 100ms ease-in;
}

.portlet-cookies-banner-configuration .toggle-switch-check:checked~.toggle-switch-bar::before {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 999px;
}

.portlet-cookies-banner-configuration .toggle-switch-check~.toggle-switch-bar::after {
    background-color: var(--mut-white);
    border-color: var(--mut-grey-dark-01);
    border-radius: 999px;
    border-style: solid;
    border-width: 1px;
    bottom: 0;
    content: "";
    display: block;
    height: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 25px;
    transition:
        background-color 100ms ease-in,
        border-color 100ms ease-in,
        box-shadow 150ms ease-in-out,
        color 100ms ease-in,
        left 100ms ease-in,
        opacity 100ms ease-in,
        right 100ms ease-in;
}

.portlet-cookies-banner-configuration .toggle-switch-check:checked~.toggle-switch-bar::after {
    background-color: var(--mut-white);
    border-color: var(--primary);
    border-radius: 999px;
    left: calc(50px - 25px);
}

.portlet-cookies-banner-configuration .toggle-switch-check:focus~.toggle-switch-bar::before,
.portlet-cookies-banner-configuration .toggle-switch-check:focus-visible~.toggle-switch-bar::before {
    box-shadow: 0 0 0 1px var(--mut-green-dark-01), 0 0 0 3px rgba(209, 164, 196, 0.55);
}

.portlet-cookies-banner-configuration .toggle-switch:hover .toggle-switch-check:not(:checked)~.toggle-switch-bar::before {
    background-color: var(--mut-grey);
    border-color: var(--mut-green-light-02);
}

.portlet-cookies-banner-configuration .toggle-switch:hover .toggle-switch-check:checked~.toggle-switch-bar::before {
    background-color: var(--mut-green-light-01);
    border-color: var(--mut-green-light-01);
}

.portlet-cookies-banner-configuration .toggle-switch-check:disabled~.toggle-switch-bar::before {
    background-color: var(--mut-grey);
    border-color: var(--mut-grey-dark-01);
    opacity: 0.7;
}

.portlet-cookies-banner-configuration .toggle-switch-check:disabled~.toggle-switch-bar::after {
    background-color: var(--mut-white);
    border-color: var(--mut-grey-dark-01);
    opacity: 0.7;
}