:root {
    --gap: 12px;
    --min-item: 80px;
    --max-cols: 8;
    --max-cols-main: 2;
    --min-main-item: 500px;
    --font-07em: 0.7em;
    --font-1em: 1.3em;
    --pd-red: #E13E35;
    --pd-green: #2C9169;
    /*--pd-orange: #F0DF51;*/
    --pd-orange: #f5db00;
    --pd-purple: #581C63;
    --calendar-item-bg: none;
    --calendar-wraper-bg: #e6eef2;
}

.bg-red {
    background-color: var(--pd-red);
}
.bg-green {
    background-color: var(--pd-green);
}
.bg-orange {
    background-color: var(--pd-orange);
}
.bg-purple {
    background-color: var(--pd-purple);
}
.color-white {
    color: white!important;
}
.text-center {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.wrap-text {
    white-space: normal;
    overflow-wrap: break-word; /* новое */
    word-wrap: break-word;     /* старое (fallback) */
}
.grid-wrapper {
    display: grid;
    gap: var(--gap);
    background: var(--calendar-wraper-bg);
    /* auto-fit columns with min width 100px, each expands to fill */
    /*grid-template-columns: repeat(auto-fit, minmax(var(--min-item), 1fr));*/
    grid-template-columns: repeat(7, 1fr);
    /* Prevent the grid from becoming wider than 7 columns:
       width = 7 * min-item + 6 * gap (for 7 columns there are 6 gaps) */
    max-width: calc(
            var(--max-cols) * var(--min-item) + (var(--max-cols)) * var(--gap)
    );

    padding: 8px;
    box-sizing: border-box;
}
.calendar-item {
    height: var(--min-item);
    max-width: calc(
            var(--max-cols) * var(--min-item) / 7
    );
    display: flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    font-size: var(--font-1em);
    border: 1px solid black;
}
.weak-item {
     font-size: var(--font-1em);
}
.calendar-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    gap: 20px;
}

.right {
    flex-grow: 1;
}
.left {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}


.p-day-calendar {
    font-size: var(--font-07em);
    text-wrap: wrap;
}
.calendar-bread-crumb {
    /*height: 60px;*/
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    max-width: 100%;
    /*padding: 8px;*/
    box-sizing: border-box;
}
.calendar-bread-crumb:hover {
    background: white;
}
.date-controls {
    height: 60px;
    gap: var(--gap);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.date-element {
    display: flex;
    height:40px;
    padding: 0 10px;
    background: #e6eef2;
    border-radius: 5px;
    border: gainsboro 1px solid;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.7em;
    font-weight: 500;
}
.control-element {
    width: 40px;
    /*text-shadow: 2px 2px 3px rgba(0,0,0,0.5);*/
    text-shadow: 0 0 5px #ffffff, 0 0 5px #ffffff, 0 0 5px #ffffff, 0 0;
}
.month-select {
    option {

    }
}
.month-select {
    height: 60px;
    color: black;
    font-size: 1.7em;
    font-weight: 500;
    padding: 6px 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
    position: relative;
    background-size: 40px;
    padding-right: 25px;
    border: black 1px solid;
    flex-grow: 1;
}


/* Опционально: стилизуем выпадающий список */
.month-select option {
    /*background-color: white;*/
    color: black;
}

.today {
    box-shadow: inset rgb(255 255 255 / 80%) 0px 0px 14px 4px;
}
.selected-day {
    border: rgb(255 141 0) 2px solid;
    box-shadow: inset rgb(255 255 255 / 80%) 0px 0px 14px 4px
}
.another-month {
    background: none;
    border: none;
}



.le-peronal {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 1.4em;
}
.plus-minus {
    padding: 10px;
    border-radius: 10px;
}
.plus {
    background: rgba(0, 128, 0, 0.16);
    border: green 1px solid;
    h3 {
        color: green;
    }
}
.minus {
    background: #ffb3b3;
    border: darkred 1px solid;
    h3 {
        color: darkred;
    }
}
.to-do-not {
    display: flex;
    flex-direction: column;
    .list {
        display: flex;
        flex-direction: column;
    }
}

.year-desc-container {
    background: #818181cc;
    position: fixed;
    z-index: 200;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    /*opacity: 70%;*/
    display: flex;
    align-items: center;
    justify-content: center;
    .year-desc {
        width: 80%;
        height: 100%;
        background: #F0ECE0;
        z-index: 2000;
        .desc-nav {
            width: 100%;
            height: 40px;
            background: black;
            color: white;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .close {
                float: right;
                width: 40px;
                height: 40px;
                background: red;
                color: white;
                align-items: center;
                justify-content: center;
                display: flex;
                font-size: 2em;
                cursor: pointer;
            }
        }
        .content {
            padding: 10px;
            height: calc(100% - 40px);
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 20px;
            overflow-y: auto;
            .text {
                font-size: 1.5em;
            }
        }
    }
}
.le-header {
    text-shadow: 
            0 0 5px #581C63,
            0 0 5px #ffffff,
            0 0 5px #ffffff,
            0 0 5px #ffffff;
}

.container-c {
    width: 100%;
    display: flex;
    flex-direction: column;
}
.color-desc {
    background: var(--calendar-wraper-bg);
    li {
        font-size: 1.3em;
    }
}
@media (max-width: 720px){
    .calendar-content {
        flex-direction: column;
        .left {
            width: 100%;
        }
        .right {
            width: 100%;
        }
        .grid-wrapper {
            overflow-y: auto;
            width: 100%;
            max-width: 100%;
            grid-template-columns: repeat(7, minmax(40px, 1fr));
            .calendar-item {
                width: 100%;
                max-width: 100%;
                height: 50px;
                .p-day-calendar .text {
                    display: none;
                }
            }
            .weak-item {
                font-size: 0.6em;
            }
        }
    

    }
    .le-peronal {
        flex-direction: column-reverse;
    }
    .year-desc-container {
        .year-desc {
            width: 100%;
            height: 100%;
            .desc-nav {
                height: fit-content;
            }
        }
    }
    .calendar-bread-crumb {
        flex-direction: column;
    }
    .container-c {
        flex-direction: column-reverse;
    }
    :root {
        --gap: 2px;
        --min-item: 40px;
        --font-1em: 0.9em;
        --max-cols: 8;
        --max-cols-main: 2;
        --min-main-item: 500px;
        --font-07em: 0.6em;
    }
}