:root {
    --primary: #32A7A7;
    --primary-rgb: 50,167,167;
    --primary-dark: #076873;
    --primary-darker: #065d67;
    --primary-darkest: #05535c;
    --secondary: #153456;
    --secondary-rgb: 21,52,86;
    --secondary-dark: #122e4d;
    --secondary-darker: #102944;
    --secondary-darkest: #0e243c;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.asterisk::after {
    content: '*';
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-select:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--primary);
    border-color: var(--primary);
}

html {
    position: relative;
    min-height: 100%;
}

#eventNotification {
    position: relative;
}

    #eventNotification.ringing i {
        color: var(--primary) !important;
        -webkit-animation: ring 4s .7s ease-in-out infinite;
        -moz-animation: ring 4s .7s ease-in-out infinite;
        animation: ring 4s .7s ease-in-out infinite;
        -webkit-transform-origin: 50% 0;
        -moz-transform-origin: 50% 0;
        transform-origin: 50% 0;
    }

    #eventNotification.ringing::after {
        content: attr(data-count);
        position: absolute;
        right: -5px;
        bottom: 2px;
        color: var(--secondary);
        font-size: 0.8rem;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 1em;
        border: 1px solid var(--primary);
        padding: 0.2em;
        line-height: 1em;
    }

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

    nav a.selected {
        color: var(--primary);
    }

    nav a:hover {
        color: var(--primary);
    }

    nav a i {
        font-size: min(9vw, 2.5rem) !important
    }

@media (max-width: 767.98px) {
    main {
        padding-bottom: 70px;
    }

    #scrollCurrentDay {
        bottom: 70px !important;
    }

    nav {
        box-shadow: 0 -0.125rem .25rem rgba(0, 0, 0, .1) !important;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

        nav > div {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
        }
}

@media (max-width: 575.98px) {
    main {
        padding-bottom: 45px;
    }

    #scrollCurrentDay {
        bottom: 55px !important;
    }
}

@media (min-width: 768px) {
    nav {
        box-shadow: 0 0.125rem .25rem rgba(0, 0, 0, .1) !important;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

        nav > div {
            max-width: 1200px;
            height: 100%;
            display: flex;
            justify-content: space-around;
        }
}

@media (max-width: 1399.98px) {
    #scrollCurrentDay {
        bottom: 10px;
    }
}

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.25;
}

#disponibiliteTimes .btn-check:checked + .btn-secondary {
    background-color: var(--primary);
}

.text-clip {
    -webkit-background-clip: text;
    color: transparent;
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    border-color: var(--primary);
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}

.agenda-day .form-check-input {
    /*width: 1.75em !important;
    margin-left: -2.25em !important;*/
    height: 1.15em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e") !important;
    background-color: var(--secondary);
    border: none;
}

    .agenda-day .form-check-input:checked {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e") !important;
        background-color: white !important;
        border: 1px solid rgba(0,0,0,.25);
    }




.service-list {
    border: 1px solid var(--primary);
    border-radius: 0 .25rem .25rem .25rem;
}

.hidden {
    display: none !important;
}

.service-date {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.service-line {
    /*    gap: 0.5rem;*/
    margin: 0;
    padding: 0.5rem;
    border: 1px solid var(--secondary);
    border-radius: 0.25rem;
}

    .service-line.cancelled {
        background-color: rgba(var(--secondary-rgb), 0.1);
    }


.button-radio {
    display: inline-flex;
    font-size: 1.25em;
}

    .button-radio * {
        border-radius: 0 0 0 0;
        border-bottom: 0;
    }

        .button-radio *:first-child {
            border-top-left-radius: 0.25rem;
            border-bottom: 0;
        }

        .button-radio *:last-child {
            border-top-right-radius: 0.25rem;
            border-bottom: 0;
        }

        .button-radio *.selected {
            background-color: var(--primary-dark);
        }

        .button-radio * + * {
            border-left-color: var(--primary-darkest);
        }


.btn-check:focus + .btn-primary, .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb),.5) !important;
}

.btn-check:focus + .btn-secondary, .btn-secondary:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--secondary-rgb),.5) !important;    
}

thead.bg-primary {
    color:#f2e3d5;
}

.btn-primary,
.btn-secondary,
.btn-danger {
    color: #f2e3d5 !important;
    font-weight:bold;
}
.btn-outline-success {
    color: #32A7A7 !important;
    border-color: #32A7A7 !important;
}

.customConfirmBtn {
    background-color: red !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}
    .customConfirmBtn:hover {
        background-color: darkred !important;
    }

.swal2-cancel {
    background-color: #6c757d !important;
    color: white;
}
h3, h4, h5 {
    margin-top: 15px;
    margin-bottom: 15px;
}