/*КАЛЕНДАРЬ*/
:root{
  --main_fon: #eedbce54; /*Общий фон календаря*/
  --header-color: #626261; /*Цвет заголовков*/
  --background-day: #A09792; /*Цвет фона при наличии события или текущего дня*/
  --color-date-info: #626261; /*Цвет дат без событий или текущего дня*/
  --color-date: #A09792; /*Цвет дней недели, даты и обводка событий*/
  --color-date_day: #fff; /*Цвет даты событий*/
  --background-info: #eeddd2; /*Цвет всплывающего события*/
  --box-shadow-calendar:10px 5px 10px 2px rgba(0, 00, 00, 0.2); /*Тень календаря*/

  --color-navigation: #A09792; /*Фон кнопок навигации по месяцам*/
  --check-color: #fff; /* Цвет стрелок месяца */

}


/*** Шапка календаря ***/
.body_calendar_des,
.body_calendar_mob{
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
    padding: 25px 10px; /*Внутренний отступ*/
    background: var(--main_fon)!important; /*Общий фон календаря*/
    border-radius: 20px; /*Скругление углов календаря*/
    border: 0.77 solid var(--main_fon)!important;
    -webkit-box-shadow: var(--negnost-box-shadow);
    box-shadow: var(--negnost-box-shadow);
}


.month {
    position: relative;
    margin: 0;
    padding: 1rem 2rem;
    text-align: center;
    width: 100%;
    list-style: none;
    margin-bottom: 25px;
}

/*** Заголовок календаря ***/
.calendar-title {
    font-family: var(--negnost-font-header-family)!important;
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 30px;
    text-align: center;
    color: var(--header-color);
    margin-bottom: 25px;
}


/*Название месяца*/
.month li {
    position: relative;
    padding: 0;
    margin: 0;
    letter-spacing: 0.1rem; /*Межбуквенное расстояние*/
    font-family: var(--negnost-font-family)!important;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    color: var(--color-date-info)!important;
}

/*Год*/
.month li.year-name {
    font-family: var(--negnost-font-family)!important;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
}

/*Стрелочки для переключения по месяцам*/
.month li.prev,
.month li.next {
    cursor: pointer;
}
.month li.prev:before,
.month li.next:before {
    content: '';
    position: absolute;
    top: 20px;
    width: 15px;
    height: 15px;
    border-top: 3px solid var(--check-color)!important;
    border-right: 3px solid var(--check-color)!important;
    z-index:3;
}

.month li.prev:before {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 0.001rem;
}

.month li.next:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 0.001rem;
}

.month li.prev:after,
.month li.next:after {
    content: '';
    position: absolute;
    top: 10px;
    width: 36px;
    height: 36px;
    background: var(--color-navigation)!important;
    border-radius:50%;
    z-index:1;
}

.month li.prev:after {
    left: -1.5rem;
}

.month li.next:after {
    right: -1.5rem;
}

/*** Тело календаря ***/

/* Дни недели */
.weekdays {
    font-family: var(--negnost-font-header-family)!important;
    font-style: normal;
    font-weight: 400;;
    margin: 0;
    padding-top: 1rem;
    padding-right: 5px;
    padding-bottom: 6px;
    padding-left: 5px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    padding-bottom: 6px;
}
.weekdays li {
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% / 7);
    flex: 0 0 calc(100% / 7);
    text-align: center;
    font-family: var(--negnost-font-header-family)!important;
    font-style: normal;
    font-weight: 400;
    font-size: 15px; /* Размер шрифта */
    line-height: 12px;
    text-align: center;
    color: var(--color-date)!important; /* Цвет */
    text-transform: uppercase;
}
/* дни */
.days {
    margin: 0;
    padding: 1rem;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    font-family: var(--negnost-font-family)!important;
    font-style: normal;
    font-weight: 400;
    background: transparent; /* Фон */
}
.days li {
    position: relative;
    padding: 12px 0px;
    margin-bottom: 2px;
    list-style: none;
    display: inline-block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% / 7);
    flex: 0 0 calc(100% / 7);
    text-align: center;
    line-height: 2rem;
    font-family: var(--negnost-font-family)!important;
    font-style: normal;
    font-weight: 400;
    font-size: 15px; /* Размер шрифта */
    line-height: 14px;
    text-align: center;
    color: var(--color-date-info) !important; /* Цвет даты */
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
/* Текущая дата */
.days li.date-now {
    color: var(--color-date)!important; /*Цвет */
    background: var(--main_fon)!important;
    border-radius:50px;
    border: 1px solid var(--color-date)!important;
}


/* Всплывающие окна с названием события */
.days li.lesson:after {
    content: attr(data-title);
    position: absolute;
    width: auto;
    min-width: 165px;
    height: auto;
    font-size: 13px; /* Размер шрифта */
    line-height: 14px; /* Высота строки */
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    background: var(--background-info);
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 2.62743px 6.56856px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px 2.62743px 6.56856px rgba(255, 255, 255, 0.5);
    color: var(--color-date-info); /* Цвет текста */
    bottom: calc(100% + 7px);
    right: -60px;
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    pointer-events: none;
}


.days li.lesson:hover:after{
    opacity: 1;
}


/* Стили для даты с событием типа lesson */
li.lesson {
    color: var(--color-date_day)!important;  /*Цвет */
    background: var(--background-day)!important;
    border-radius:50px;
}

li.lesson.date-now {
    background: var(--background-day)!important;
}


@media (max-width: 1400px){
    .days li {padding: 8px 0px;
    }
}


@media (max-width: 1200px){
    .body_calendar_des,
    .body_calendar_mob {
        padding: 4px 10px;
        padding-top: 20px !important;
        padding-bottom: 4px;
    }
}


@media (max-width: 1150px){
    .days {padding: 0.5rem;}
    .days li {padding: 5px 0px;
    }
}


@media (max-width: 991px) {
    .body_calendar_des,
    .body_calendar_mob {margin-top: 20px;}
    .days li {padding: 12px 0px;}
    .days {padding: 1rem;
    }

    .wrap_calendar{
        max-width: 400px;
        margin: 10px auto;
    }

    .days li.lesson:after {
        min-width: 115px;
    }
}