:root {
    --color-light-green: #F2F9F2;
    --color-regular-green: #45B645;
    --color-light-yellow: #FDF9E8;
    --color-regular-yellow: #F0B000;
}

.u-color--green {
    color: var(--color-regular-green);
}

.u-color--yellow {
    color: var(--color-regular-yellow);
}

.p-box--light-green {
    background-color: var(--color-light-green);
}

.p-box--light-yellow {
    background-color: var(--color-light-yellow);
}

.p-css-modal__checkbox:checked+.p-css-modal__modal {
    max-width: 90%;
    min-width: 50%;
    padding: 5px 10px;
    max-height: calc(100vh);
}

/* #button-modal.disabled,
.p-css-modal__modal .disabled { */
.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.month-header {
    font-size: 1.5em;
    margin-bottom: 10px;

}

.flex-container {
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.row {
    display: flex;
    justify-content: space-between;
    background-color: white;
}

.row:nth-child(2n+1) {
    display: flex;
    justify-content: space-between;
    background-color: #f1fafd;
}

.cell {
    border: 1px solid #00a8d8;
    border-collapse: collapse;
    flex: 1;
    cursor: pointer;
}

.cell:hover,
.cell:active {
    background-color: #fad9dd;
}

.cellcol {
    border: 1px solid #00a8d8;
    border-collapse: collapse;
    text-align: center;
    flex: 0.7;
    background-color: #eee;
    color: #00a8d8;
    cursor: default;
    font-weight: 600;
}

.weekName {
    background-color: #00a8d8;
    color: #eee;
    cursor: default;
}

.weekName:hover {
    background-color: #00a8d8;
}

.prev {
    border: 1px solid #00a8d8;
    background-color: #f1fafd;
    padding: 10px 10px;
    cursor: pointer;
    font-size: 150%;
    display: flex;
    align-items: center;
}

.prev:hover {
    background-color: #00a8d8;
    cursor: pointer;
    color: #eee;
}

.next {
    border: 1px solid #00a8d8;
    background-color: #f1fafd;
    padding: 10px 10px;
    cursor: pointer;
    font-size: 150%;
    display: flex;
    align-items: center;
}

.next:hover {
    background-color: #00a8d8;
    cursor: pointer;
    color: #eee;
}

.advice {
    text-align: center;
    padding: 3px;
}

.advice .sub {
    display: inline-block;
    padding: 3px;
}

.advice #verde {
    color: darkgray;
}

.advice #rojo {
    color: #ff991d;
}


.cross {
    color: darkgray;
    cursor: not-allowed;
    opacity: 0.7;
}

.cross:hover {
    background-color: darkgrey;
    color: #eee;
}

.triangle {
    cursor: not-allowed;
    color: darkorange;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.triangle:hover {
    background-color: darkgrey;
    color: #eee;
}

@media (min-width: 992px) {
    .sm {
        display: none;
    }
}

@media (max-width: 991px) {
    .lg {
        display: none;
    }

    .mae {
        display: none;
    }

    .ato {
        display: none;
    }

    .p-css-modal__checkbox:checked+.p-css-modal__modal {
        max-width: 98%;
        max-height: 100%;
        padding: 5px 5px;
        margin: 5px 5px;
        overflow: hidden;
    }

    #verde,
    #rojo,
    .cell {
        /* font-size: small; */
        padding: none;
    }

    .prev,
    .prev2,
    .next,
    .next2 {
        font-size: 100%;
    }

}