/* Color Palette https://colorhunt.co/palette/83571 */

body {
    background: #282828;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    margin-bottom: 3rem;
    color: #fff;
}

/* Top */

#top {
    max-width: 1320px;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
    margin-right: auto;
    margin-left: auto;
}

.navbar-brand {
    margin: 0.5rem 0;
}

.title {
    font-family: 'Dancing Script';
    font-size: 3.5rem;
    font-weight: 700;
    color: #fb4934;
    transform: rotate(-3deg);
}

/* Menu */

.nav-link {
    color: #98971a;
}

.nav-link:hover {
    color: #fabd2f;
}

.active {
    color: #fabd2f;
}

/* Tabellone */

#tabellone .container,
#cartelle .container {
    background: #cc241d;
    border-radius: 20px;
    border: 4px solid #d79921;
    margin-top: 1rem;
}

.circle {
    border: 2px solid #d79921;
    color: #fabd2f;
    width: 40px; 
    height: 40px;
    border-radius: 50%;
    display: inline-flex; /* or flex */
    align-items: center; 
    justify-content: center;
    font-weight: bold;
    /* margin-top: 1.5rem; */
}

.circle-selected {
    background-color: #fabd2f;
    color: #cc241d;
}

#tabellone .n21, #tabellone .n26, #tabellone .n51, #tabellone .n56, #tabellone .n81, #tabellone .n86 {
    margin-bottom: 1.5rem;
}

#tabellone .circle {
    margin-top: 1rem;
}

#nuovo-tabellone-button {
    margin-top: 1rem;
}

#tabellone .container.notes {
    background: none;
    border-radius: 0px;
    border: 0 ;
    margin-top: 1rem;
}

/* Modal */

#nuovoTabelloneModal .modal-content {
    background: #282828;
}

#nuovoTabelloneModal .modal-header {
    border-bottom: 1px solid #4e4e4e;
}

#nuovoTabelloneModal .modal-footer {
    border-top: 1px solid #4e4e4e;
}

/* Buttons */

.btn-green {
    color: #fff;
    background-color: #98971a;
    border-color: #b8bb26;
}

.btn-green:hover {
    background-color: #b8bb26;
    border-color: #98971a;
}

.btn-green:active {
    background-color: #b8bb26;
    border-color: #98971a;
}

.btn-green:focus {
    background-color: #b8bb26;
    border-color: #98971a;
    box-shadow: 0 0 0 0.25rem #98971a00;
}

.btn-green:active:focus {
    box-shadow: 0 0 0 0.25rem #98971a80;
}

/* Guida */

#guida {
    margin-top: 3rem;
}

.accordion-button {
    color: #fff;
    background-color: #424242;
}


.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #424242;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    transform: rotate(180deg);
}


.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.accordion-button:focus {
    z-index: 3;
    border-color: #ffffff00;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 25%);
}


/* Bottom */

.estratto {
    /* height: 2rem; */
    color: #fabd2f;
    font-size: 2rem;
}

.smorfia {
    font-size: 1rem;
}

/* Footer */

#footer {
    color: #7d7d7d;
}

#bottom .navbar-dark {
    background: #282828;
    border-top: 1px #4a4a4a solid;
}

/* Containers */

#footer .container-fluid {
    padding: 2rem 15%;
}

#footer .logo {
    width: 250px;
    margin-bottom: 1rem;
}

#footer .tree {
    width: 50px;
    margin-bottom: 1rem;
}

#footer p {
    font-size: 0.9rem;
}

/* Pag. Cartelle */

#cartellaDropdown {
    padding: 2rem 1rem;
}

.dropdown-item.disabled, .dropdown-item:disabled {
    color: #b5b5b5;
}

#cartelle h3 {
    text-align: left;
    padding-top: 1rem;
    padding-left: calc(var(--bs-gutter-x)/ 2);
    color: #fabd2f;
}

#cartelle p {
    text-align: right;
    padding-top: 1rem;
    padding-right: calc(var(--bs-gutter-x)/ 2);
    color: #fabd2f;
}

#cartelle .container {
    margin-bottom: 2rem;
    max-width: 800px;
}

#cartelle .number-cell {
    border: 1px solid #fabd2f30;
}

#cartelle .number-cell.n0 .circle {
    border: 0px;
}

#cartelle input {
    background-color: #cc241d;
    border: 0px;
    color: #fabd2fBB;
    border-bottom: 0px solid #fabd2f90;
    padding-top: 1.3rem;
    border-radius: 0;
}

#cartelle .form-control::placeholder {
    color: #fabd2f90;
}

#cartelle .form-control:focus {
    box-shadow: 0 0 0 0;
}

#cartelle .circle {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

/* Media Queries */

/* 
    Tablet and mobile sizes
    Screen smaller than 1028px 
*/
@media (max-width: 1028px) { 
    .row-breaker {
        flex: none;
    }

    .navbar-brand,
    #menu {
        margin: 0.5rem auto;
    }

}

@media (max-width: 576px) { 
    #cartelle .circle {
        width: 27px;
        height: 27px;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }

    #cartelle .number-cell {
        padding: 0;
        font-size: 0.9rem;
    }

    #tabellone .circle {
        width: 30px;
        height: 30px;
    }

    #cartelle h3 {
        font-size: 0.9rem;
        padding-left: 0;
        padding-top: 1.4rem;
    }

    #cartelle input {
        font-size: 0.9rem;
    }
    
    #cartelle .form-control::placeholder {
        font-size: 0.9rem;
    }

    a.nav-link.tabellone {
        padding: .5rem .5rem;
    }

    #footer .logo {
        width: 200px;
    }
}