@media (min-width:480px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.container {
    max-width: 95%;
}

th {
    text-align: center;
}

td,
th {
    vertical-align: middle;
}

.underline:after {
    background: #308bd1;
}

.turno {
    max-width: 80%;
}

.anticipo {
    max-width: 15%;
}

tr.domenica {
    border-color: black;
    border-bottom: 2px;
}

.ele {
    width: 50%;
}

input.checklist {
    width: 100%;
}

input.checkbox{
    height: 1.5rem;
}

input.presenze {
    width: 50%;
}

.btn-color-1 {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: #F8E71C;
    --bs-btn-border-color: #F8E71C;
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: #F8E71C;
    --bs-btn-hover-border-color: #F8E71C;
}

.btn-color-2 {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: #50E3C2;
    --bs-btn-border-color: #50E3C2;
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: #50E3C2;
    --bs-btn-hover-border-color: #50E3C2;
}

.btn-color-3 {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: #FFB84D;
    --bs-btn-border-color: #FFB84D;
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: #FFB84D;
    --bs-btn-hover-border-color: #FFB84D;
}

.btn-color-4 {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: #4A90E2;
    --bs-btn-border-color: #4A90E2;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #4A90E2;
    --bs-btn-hover-border-color: #4A90E2;
}

.btn-color-5 {
    --bs-btn-color: var(--bs-black);
    --bs-btn-bg: #B6AEEB;
    --bs-btn-border-color: #B6AEEB;
    --bs-btn-hover-color: var(--bs-black);
    --bs-btn-hover-bg: #B6AEEB;
    --bs-btn-hover-border-color: #B6AEEB;
}


.autocomplete-items {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
    border-top: none;
    background-color: #fff;

    z-index: 99;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: rgba(0, 0, 0, 0.1);
}

.autocomplete-items .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: rgba(0, 0, 0, 0.1);
}