@font-face {
  font-family: Icons;
  src: url('../assets/fonts/icomoon.ttf');
}
#calendar__popup_wrapper span.icon {
  display: inline;
  font-family: Icons;
  color: white;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
}
.calendar__container input {
height:auto;
}

/* mobile_calendar.css */

.mobile_view .calendar__calendar{
    max-height: calc(90dvh - 8dvh - 15dvh - 5dvh - 7.5dvh);
    --height: calc(8vh * var(--scale));
	--height: calc(7.813340068133368vh * var(--scale));
    overflow-y: scroll;
    top: calc(100% + 0.14vh);
}

.mobile_view .calendar__date_from_container .calendar__calendar{
    max-height: calc(100dvh - 8dvh - 15dvh - 5dvh);
}


.mobile_view .calendar__calendar__calendar{
    grid-template-rows: repeat(6, calc(98vw / 7));
}

.mobile_view .calendar__calendar__days_of_week{
    grid-template-rows: var(--height);
}

.mobile_view .calendar__error_container{
    top: max(110%, 5.5rem);
    align-items: center;
}

.mobile_view .calendar__error_container div{
    width: 1.5rem;
    height: 1.5rem;
}

.mobile_view .calendar__upper:has(*[data-openpopup="true"]) .calendar_controller__actions{
    display: none;
}

.mobile_view .calendar__container{
    width: 98vw;
    box-sizing: border-box;
}

.mobile_view .calendar__container .calendar__upper{
    
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: var(--height) var(--height);
    gap: 0;
    
}

.mobile_view .calendar__calendar{
    width: calc(100% + 2px);
    left: -1px;
    z-index: 3000;
}

.mobile_view .calendar_controller__actions{
    top: calc(var(--height) * 11.4);
}

.mobile_view .calendar__year_popup{
    position: fixed;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}

.mobile_view .calendar__year_popup .calendar__years_grid{
    height: unset;
    gap: 1.5rem;
    flex-grow: 1;
    border-bottom: none;
}

.mobile_view .calendar__year_popup > *:last-child{
    box-sizing: border-box;
    flex-shrink: 0;
    flex-basis: 16vh;
    display: flex;
    align-items: stretch;
    flex-direction: column-reverse;
    width: 100%;
    padding: 1em 1.5em;
    background: white;
    box-shadow: none;
    gap: 0.5em;
}

.mobile_view .calendar__year_popup > *:last-child button{
    padding-block: 15px;
    /* font-size: 1em; */
}

.mobile_view .calendar__year_popup .calendar__reset_btn{
    border: 1px solid var(--action-color);
}

.mobile_view .calendar__month_popup_mobile,
.mobile_view .calendar__year_popup__mobile{
    padding: 0.1em 1.5em;
    display: flex;
    height: calc(var(--height));
    justify-content: space-between;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
}

.mobile_view .calendar__month_popup_mobile .calendar__year_popup__mobile__close,
.mobile_view .calendar__year_popup__mobile .calendar__year_popup__mobile__close{
    width: 2em;
    height: 2em;
}

.mobile_view .calendar__month_popup_mobile .calendar__year_popup__mobile__close svg,
.mobile_view .calendar__year_popup__mobile .calendar__year_popup__mobile__close svg{
    width: 100%;
    height: 100%;
}

.mobile_view .calendar__month_popup_mobile span,
.mobile_view .calendar__year_popup__mobile span{
    font-family: Roboto-Bold;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
}

.mobile_view .search_mobile_icon{
    display: block;
    width: calc(var(--height) / 2);
    height: calc(var(--height));
}

.mobile_view .search_mobile_icon svg{
    width: 100%;
    height: 100%;
}

.mobile_view .calendar__year_popup__input{
    position: relative;
    display: flex !important;
    box-sizing: border-box;
    padding: 1em 1.2em;
    align-items: center;
    background: var(--calendar-light-blue);
}

.mobile_view .calendar__year_popup__input section{
    z-index: 1000;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
}

.mobile_view .calendar__year_popup__input section svg{
    width: 100%;
    height: 100%;
}

.mobile_view .calendar__year_popup__input label{
    display: none !important;
}

.mobile_view .calendar__year_popup__input input{
    text-align: left !important;
    background-color: var(--calendar-light-blue);
    font-size: 1.2rem !important;
}
.mobile_view .calendar__year_popup__input input::placeholder{
    font-family: Roboto-Bold;
    color: black;
    font-size: 1.2rem;
}

.mobile_view .calendar__year_popup__input:has(input:not(:placeholder-shown)) section{
    display: flex;
}


.mobile_view .calendar__year_popup__input:has(input:focus){
    background-color: white;
}



.mobile_view .calendar__year_popup__input:has(input:focus) .search_mobile_icon{
    display: none;
}

.mobile_view .calendar__year_popup__input input:focus{
    background-color: white;
}

input:focus::placeholder{
    opacity: 0;
}

.mobile_view .calendar__month_popup{
    position: fixed;
    width: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgb(255, 255, 255);
    grid-template-rows: repeat(auto-fill, var(--height));
    gap: 1.5rem;
    box-sizing: border-box;
    padding: 0 1.5rem;
}
.mobile_view .calendar__month_popup .calendar__month_popup_mobile{
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    position: relative;
}

.mobile_view .calendar__month_popup_mobile div{
    position: absolute;
}

.mobile_view .calendar__month_popup_mobile div:first-child{
    left: 0;
}

.mobile_view .calendar__month_popup_mobile div:last-child{
    right: 0;
}

.mobile_view .calendar__month_popup > div{
    border-width: 1px;
}

.mobile_view .calendar__calendar__calendar{
    border-width: 1px;
    overflow-x: hidden;
    grid-template-rows: repeat(6, var(--height));
}

.mobile_view .calendar__calendar__days_of_week span,
.mobile_view .calendar__calendar__calendar div{
    width: 100%;
    border-width: 1px;
}

.mobile_view .calendar__reset_helper_text{
    display: none !important;
}

.mobile_view .calendar__calendar__days_of_week .day_of_week,
.mobile_view .calendar__calendar__calendar div,
.mobile_view .calendar__year_popup .calendar__year_popup__input,
.mobile_view .calendar__years_grid,
.mobile_view .calendar__years_grid > div,
.mobile_view .calendar__month_popup,
.mobile_view .calendar__month_popup > div,
.mobile_view .calendar__upper > div{
    border-width: 1.2px;
}

.mobile_view .calendar__calendar .calendar__calendar__title:first-of-type{
    border-bottom-width: 0.14vh;
}

.mobile_view .calendar__calendar .calendar__calendar__title{
    flex-shrink: 0;
}

.mobile_view .calendar__container .calendar__date_from_container{
    border-bottom: none;
}

.mobile_view .calendar_controller__actions{
    position: fixed;
    top: unset;
    width: 100%;
    height: 16vh;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    align-items: stretch;
    padding-right: 0;
}

.mobile_view .calendar_controller__actions button{
    width: 100%;
    padding: 2vh 0;
}
.mobile_view .calendar_controller__actions button.calendar__reset_btn{
    border: 1px solid var(--action-color);
}


.mobile_view .calendar__upper__date_part{
    padding: 0 calc(50 * var(--main-font-size) * var(--text-scale))!important;
}

.mobile_view .calendar__container{
    margin: 1vw;
}

.mobile_close_btn .calendar__popup_close,   
.mobile_view .calendar__popup_close{
    top: -100vh;
    opacity: 0;
}

.mobile_view .calendar__popup_close button{
    font-size: 24px;
}

.mobile_view .calendar__popup_close span{
    color: white !important;
}

.mobile_view .calendar__container:has(.calendar__calendar[data-hide="true"]) .calendar__close_btn{
    display: block;
    padding: 2.5vh;
    font-size: var(--header-font-size) !important;
}

.mobile_close_btn:not(.mobile_view) .calendar__container .calendar__close_btn,
.mobile_close_btn .calendar__container .calendar__close_btn.open {
    display: block;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2))!important;
    position: absolute;
    top: calc(var(--height)* 10.16);
    left: 2vh;
    padding: 1vh;
    height: 6.619743109699742vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9990;
    width: calc(var(--header-font-size) * 8);
}

.mobile_view .calendar__year_popup .calendar__year_popup__input input,
.mobile_view .calendar__year_popup .calendar__year_popup__input input::placeholder,
.mobile_view .calendar__year_popup__mobile{
    font-size: var(--header-font-size) !important;
}

.hide_calendar_icon .calendar__calendar_icon{
    display: none !important;
}

.hide_calendar_icon .calendar__container{
    --width: calc(90lvh * var(--aspect-ratio) * var(--scale) * 0.7);
	--width: calc(88.3lvh * var(--aspect-ratio) * var(--scale) * 0.7);
}
.hide_calendar_icon .calendar__upper__date_part{
    padding: 0 !important;
}
.hide_text
.calendar__upper__date_part .calendar__upper__help_text:first-of-type{
    display: none;
}

.mobile_close_btn .calendar__close_btn{
    transition: background 0.1s ease;
}

.mobile_close_btn .calendar__close_btn:hover{
    background: #6fa6ff !important;
    /* border: none; */
}

/* mobile_calendar.css end */

/* calendar.css */

:root{
    --calendar-primary-text: #434C4E;
    --calendar-secondary-text: #B2B4B4;
    --calendar-black: #000000;
    --calendar-empty-color: #B2B4B4;
    --calendar-light-gray: #969FA8;
    --calendar-gray-white: #F1F1F1;
    --calendar-light-blue: #D4F6FF;
    --calendar__blue: #2879FF;
    --calendar-white: #FFFFFF;
    --calendar-error: #C80000;

    --calendar-gray: #F6F6F6;
    --calendar-blue: #6CA3FE;
    --calendar-range-text: #2961FE;

    --calendar-black: #4fa95d;
	
	--calendar-color1: #bebebe;
	--calendar-color2: #9cd1ff;
	--calendar-color3: #0087fc;	
	--calendar-color4: #665800;
	--calendar-color5: #64590c;
	--calendar-color6: #b2b4b4;
	--calendar-color7: #fcf8df;
	--calendar-color8: #fede31;
	--calendar-color9: #f4f4f4;
	--calendar-color10: #ffff99;
	--calendar-color11: #ceb632;
	--calendar-color12: #e3dcb2;
}
@font-face {
font-family: 'Roboto-Thin';
src: local('Roboto-Thin'),
url('../fonts/Roboto-Thin.woff2') format('woff2'),
url('../fonts/Roboto-Thin.woff') format('woff'),
url('../fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto-ExtraLight';
src: local('Roboto-ExtraLight'),
url('../fonts/Roboto-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Light';
src: local('Roboto-Light'),
url('../fonts/Roboto-Light.woff2') format('woff2'),
url('../fonts/Roboto-Light.woff') format('woff'),
url('../fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Regular';
src: local('Roboto-Regular'),
url('../fonts/Roboto-Regular.woff2') format('woff2'),
url('../fonts/Roboto-Regular.woff') format('woff'),
url('../fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Bold';
src: local('Roboto-Bold'),
url('../fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

.calendar__container {
    position: relative;

    --scale: 1.049;

    --aspect-ratio: 5 / 4;
    --width: calc(88.3vh * var(--aspect-ratio) * var(--scale));
    width: var(--width);

    --height: calc(8vh * var(--scale));
	--height: calc(7.813340068133368vh * var(--scale));
    height: var(--height);
    --header-font-size: calc(3vh * var(--scale));
	
	--main-proportion: 1.279620853080569;
	--main-font-size: calc(0.0925926vh * var(--main-proportion));

    z-index: 3000;
}

.calendar__container * {
    font-family: Roboto-Regular;
    font-style: normal;
}

.calendar__upper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    justify-content: space-between;
    gap: 1vh;
    height: 100%;
    position: relative;

    --header-font-size: 3vh;
	--main-proportion: 1.279620853080569;
	--main-font-size: calc(0.0925926vh * var(--main-proportion));

}

.calendar__upper > div{
    border-right: none;
}

.calendar__upper > div[data-bg="gray"]{
    background-color: #F6F6F6;
}

.calendar__upper > div[data-bg="white"]{
    background-color: var(--calendar-white);
}

.calendar__upper > div[data-color="none"] > div{
    background: none;
}

.calendar__upper > div[data-color="blue"] > div{
    background: var(--calendar-color7);
}

.calendar__upper > div{
    /* width: calc(50% - 0.5vh); */
    height: var(--height);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 0.7vh;
    border: 0.15vh solid var(--calendar-color12);
	box-shadow: 0 calc(6 * var(--main-font-size)) calc(21 * var(--main-font-size)) 0 rgba(0, 0, 0, 0.1);
}

.calendar__upper > div > div{
    align-items: center;
}

.calendar__upper > div > div{
    background-color: white;
}

.calendar__upper > div > div.calendar__upper__date_part{
    box-sizing: border-box;
    padding: 0 0 0 3.5%;
	white-space: nowrap;
}

.calendar__upper .calendar__date_from_container[data-reset-btn="false"] > div.calendar__upper__date_part,
.calendar__upper .calendar__date_to_container[data-reset-btn="false"] > div.calendar__upper__date_part {
	padding: 0 6% 0 3.5%;
}

.calendar__date_from_container[data-reset-btn="false"], .calendar__date_to_container[data-reset-btn="false"] {
background-color: var(--calendar-color9)!important;
}

.calendar__upper .calendar__upper__help_text{
    font-family: Roboto-Light;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    color: var(--calendar-color1);
}

.calendar__upper .calendar__date_from_container[data-view-type="full"] .calendar__upper__help_text,
.calendar__upper .calendar__date_to_container[data-view-type="full"] .calendar__upper__help_text {
	font-family: Roboto-ExtraLight;
	color: var(--calendar-color4);
}

.calendar__upper_dotted_formated_date{
    position: relative;
    font-size: 0;
    color: var(--calendar-black);
    font-family: Roboto-Bold;
    font-weight: bold;
	line-height: 100%;
}

.calendar__upper__full_date{
    position: relative;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    color: var(--calendar-color3);
    font-family: Roboto-Bold;
    text-transform: uppercase;
}

.calendar__upper_dotted_formated_date > span{
    position: relative;
}

.calendar__upper_dotted_formated_date > input{
    position: relative;
}

.calendar__upper_dotted_formated_date > span[data-empty="true"]{
    color: var(--calendar-empty-color);
}

.calendar__upper_dotted_formated_date__day__input__container, 
.calendar__upper_dotted_formated_date__month__input__container{
    position: relative;
}

.calendar__upper_dotted_formated_date .calendar__upper_dotted_formated_date__day__input__container::after,
.calendar__upper_dotted_formated_date .calendar__upper_dotted_formated_date__month__input__container::after{
    position: relative;
    content: ".";
    bottom: 0;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    font-family: Roboto-Bold;
    top: 100%;
    color: var(--calendar-color3);
}

.calendar__upper > div[data-view-type="full"] .calendar__upper__full_date{
    display: inline;
}
.calendar__upper > div[data-view-type="full"] .calendar__upper_dotted_formated_date{
    display: none;
}

.calendar__upper > div[data-view-type="dotted"] .calendar__upper__full_date{
    display: none;
}
.calendar__upper > div[data-view-type="dotted"] .calendar__upper_dotted_formated_date{
    display: inline;
}

.calendar__upper > div > div{
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.calendar__upper [data-view-type="full"] .calendar__upper__date_part {
	align-items:center;
	justify-content:center;
	padding:0;
}
.calendar__upper [data-view-type="full"] .calendar__upper__date_part .calendar__upper__full_date {
	flex-grow:0;
}

.calendar__upper > div > div > .calendar__upper_dotted_formated_date,
.calendar__upper > div > div > .calendar__upper__full_date{
    flex-grow: 1;
}

.calendar__calendar_icon{
    width: 5.175vh;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar__date_from_container[data-view-type="full"] .calendar__calendar_icon,
.calendar__date_to_container[data-view-type="full"] .calendar__calendar_icon {
	display:none;
}

.calendar__calendar_icon svg{
    width: 100%;
    height: 100%;
}

.calendar__upper .calendar__reset_icon{
    position: relative;
    flex-grow: 0;
    flex-basis: 3.76vh;
    width: 3.76vh;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1vh;
}

.calendar__upper > div{
    position: relative;
}

.calendar__upper > div[data-error="true"]{
    border-color: var(--calendar-error);
}

.calendar__reset_helper_text{
    display: none;
    position: absolute;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    right: 0;
    top: 118%;
    box-sizing: border-box;
    padding: 2vh 3.5vh;
    background-color: var(--calendar-color7);
    color: var(--calendar-primary-text);
    border: 0.15vh solid var(--calendar-color12);
    z-index: 2001;
}

.calendar__reset_helper_text::before{
    position: absolute;
    content: "";
    width: 3vh;
    aspect-ratio: 1;
    transform: rotate(45deg);
    background-color: var(--calendar-color7);
    border: 0.15vh solid var(--calendar-color12);
    border-right: none;
    border-bottom: none;
    right: 2.2vh;
    top: -1.67vh;
}
.calendar__upper .calendar__reset_icon svg{
	display:block;
	position:absolute;
    width: 85%;
    height: 85%;
	top:7.5%;
	right:7.5%;
}

.calendar__upper > div > div{
    margin: 0.7vh;
}

.calendar__upper > div > .calendar__reset_icon{
    margin-left: 0;
}

.calendar__upper > div > .calendar__upper__date_part{
    margin-right: 0;
}

.calendar__upper_dotted_formated_date input {
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    width: 7vh;
    font-family: Roboto-Bold;
    border: none;
    outline: none;
    text-align: right;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--calendar-color3);
}

.calendar__upper_dotted_formated_date input[placeholder="ДД"] {
	width: 6.2vh;
}

.calendar__upper_dotted_formated_date input::-webkit-outer-spin-button,
.calendar__upper_dotted_formated_date input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calendar__upper_dotted_formated_date input:not(:placeholder-shown){
    width: 4.6vh;
}

.calendar__upper_dotted_formated_date .calendar__upper_dotted_formated_date__year__input {
    width: calc(7vh * var(--main-proportion));
}

.calendar__upper_dotted_formated_date .calendar__upper_dotted_formated_date__year__input:not(:placeholder-shown){
    width: calc(7.5vh * var(--main-proportion));
}

.calendar__upper_dotted_formated_date input::placeholder{
    font-family: Roboto-Regular;
    color: var(--calendar-color2);
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
}

.calendar__upper > div[data-reset-btn="true"] .calendar__reset_icon{
    display: block;
}
.calendar__upper > div[data-reset-btn="false"] .calendar__reset_icon{
    display: none;
}

/** calendar **/

.calendar__calendar{
    left: -0.1vh;
    position: absolute;
    width: calc(100% + 0.2vh * var(--scale));
    top: calc(100% + 0.15vh * var(--scale));
    display: flex;
    flex-direction: column;
	box-shadow: 0 calc(6 * var(--main-font-size)) calc(21 * var(--main-font-size)) 0 rgba(0, 0, 0, 0.1);
}

.calendar__calendar .calendar__calendar__title{
    display: flex;
    justify-content: space-between;
    height: var(--height);
    align-items: center;
    border: 0.15vh solid var(--calendar-color12);
    box-sizing: border-box;
    border-top: none;
}

.calendar__calendar .calendar__calendar__title button{
    border: none;
}

.calendar__calendar .calendar__calendar__title span{
    font-family: Roboto-Light;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    color: var(--calendar__blue);
}

.calendar__calendar .calendar__calendar__year.calendar__calendar__title span,
.calendar__calendar .calendar__calendar__month.calendar__calendar__title span {
color: var(--calendar-color4);
}

.calendar__calendar .calendar__calendar__title button{
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5vh;
    height: 5vh;
    background: none;
    padding: 0;
}

.calendar__calendar .calendar__calendar__title button > svg{
    width: 100%;
    height: 100%;
}

.calendar__calendar .calendar__calendar__title button.disabled{
    opacity: 0.5;
}

.calendar__calendar .calendar__calendar__title > section{
    display: flex;
    gap: 1vh;
    user-select: none;
}

.calendar__calendar .calendar__calendar__title > section > div{
    width: 5vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar__calendar .calendar__calendar__title > section > div > svg{
    width: 100%;
    height: 100%;
}


.calendar__calendar .calendar__calendar__title > section > span{
    display: flex;
    align-items: center;
}

.calendar__calendar__days_of_week{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: var(--height);
}

.calendar__calendar__days_of_week .day_of_week,
.calendar__calendar__calendar div{
    /* aspect-ratio: 1; */
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    font-family: Roboto-Regular;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.15vh solid var(--calendar-color12);
    border-top: none;
    border-right: none;
    box-sizing: border-box;
}

.calendar__calendar__days_of_week .day_of_week {
	font-family: Roboto-Light;
	color: var(--calendar-color5);
}

.calendar__calendar__days_of_week .day_of_week:last-child{
    border-right: 0.15vh solid var(--calendar-color12);
}

.calendar__calendar__calendar{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, var(--height));
    width: 100%;
    height: calc(var(--height) * 6);
    box-sizing: border-box;
    overflow: -moz-scrollbars-none;
    overflow-y: scroll;

    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.calendar__calendar__calendar::-webkit-scrollbar{
    display: none;  /* Safari and Chrome */
}

.calendar__calendar__calendar div{
    border: 0.15vh solid var(--calendar-color12);
    border-top: none;
    border-right: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--calendar-white);
    user-select: none;
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.calendar__calendar__calendar div[data-status="active"]{
    background-color: var(--calendar-color7);
    color: var(--calendar-color4);
}

.calendar__calendar__calendar div[data-status="empty"]{
    border-inline: none;
}

.calendar__calendar__calendar div[data-status="today"],
.calendar__calendar__calendar div[data-range="point"] {
    background-color: var(--calendar-color8);
    color: var(--calendar-white);
}

.calendar__calendar__calendar div[data-status="today"]:hover,
.calendar__calendar__calendar div[data-range="point"]:hover {
    background-color: var(--calendar-color11);
}

.calendar__calendar__calendar div[data-range="range"] {
    background-color: var(--calendar-color10);
    color: var(--calendar-color4);
}

.calendar__calendar__calendar div:nth-child(7n){
    border-right: 0.15vh solid var(--calendar-color12);
}

.calendar__calendar__calendar div:nth-child(7n + 1){
    border-left: 0.15vh solid var(--calendar-color12);
}

.calendar__calendar__calendar div[data-last="last"]{
    border-left: 0.15vh solid var(--calendar-color12);
}

.bg_white{
    background-color: var(--calendar-white);
}

.calendar__container *[data-hide="true"] {
    display: none;
}

.calendar__year_popup .calendar__year_popup__input{
    position: relative;
    height: var(--height);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 0.15vh solid #969FA8;
    border-top: none;
}

.calendar__year_popup .calendar__year_popup__input input{
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    border: none;
    width: 100%;
    text-align: center;
    padding: 0;
    font-family: Roboto-Regular;
    color: var(--calendar__blue);
}

.calendar__year_popup .calendar__year_popup__input input:focus,
.calendar__year_popup .calendar__year_popup__input input:active
{
    outline: none;
}

.calendar__year_popup .calendar__year_popup__input .floating_label{
    position: absolute;
    top: 0;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-family: Roboto-Regular;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    color: var(--calendar-light-gray);
    pointer-events: none;
    transition: top 0.3s, font-size 0.3s;
}

.calendar__year_popup__input input:focus + .floating_label,
.calendar__year_popup__input input:not(:placeholder-shown) + .floating_label{
    top: 15%;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
}

.calendar__years_grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(9, calc(var(--height) * 1.1));
    align-items: start;
    box-sizing: border-box;
    padding: 1.5vh;
    gap: 3vh;
    height: calc(var(--height) * 8);
    overflow-y: scroll;
    border: 0.15vh solid #969FA8;
    border-top: none;
}

.calendar__years_grid::-webkit-scrollbar{
    display: none;
}

.calendar__years_grid > div{
    width: 100%;
    height: calc(var(--height) * 1.1);
    font-family: Roboto-Regular;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.15vh solid #969FA8;
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;
}

.calendar__years_grid > div[data-active="true"]{
    background-color: var(--calendar__blue);
    color: var(--calendar-white);
}

.calendar_controller__actions,
.calendar__actions{
    display: flex;
    justify-content: flex-end;
    height: var(--height);
    align-items: center;
    margin-top: 0.5vh;
    box-sizing: border-box;
    padding-right: 2vh;
    gap: 3vh;
    background-color: var(--calendar-color7);
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1);
}

.calendar__actions{
    position: relative;
    z-index: 5;
}

.calendar_controller__actions button,
.calendar__actions button{
    position: relative;
    padding: 1vh;
    border: none;
    background: none;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    --action-color: var(--calendar-color8);
    color: var(--action-color);
    cursor: pointer;
    font-family: Roboto-Regular;
}

.calendar_controller__actions button:hover {
color: var(--calendar-color11);
}

.calendar_controller__actions button.calendar__apply_btn,
.calendar__actions button.calendar__apply_btn{
    color: white;
    background-color: var(--action-color);
    transition: background-color 0.1s ease;
}

.calendar_controller__actions button:not(:disabled):hover,
.calendar__actions button:not(:disabled):hover{
    --action-color: var(--calendar-color11);
}

.calendar_controller__actions button.calendar__reset_btn:not(:disabled):hover::after,
.calendar__actions button.calendar__reset_btn:not(:disabled):hover::after{
    content: '.................';
    position: absolute;
    bottom: 0;
    left: 8%;
    color: var(--calendar-color11)!important;
}

.calendar_controller__actions button.calendar__reset_btn {
font-family: Roboto-Light;
}

.calendar_controller__actions button:disabled,
.calendar__actions button:disabled{
    --action-color: var(--calendar-color6);
}

.calendar__month_popup{
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--height) * 7);
    padding: 1.5vh;
    gap: 2vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, calc(var(--height) * 1.1));
    border: 0.15vh solid #969FA8;
    border-top: none;
    overflow-y: scroll;
}

.calendar__month_popup::-webkit-scrollbar{
    display: none;
}

.calendar__month_popup > div{
    width: 100%;
    height: calc(var(--height) * 1.1);
    font-family: Roboto-Regular;
    font-size: calc(35 * var(--main-font-size) * var(--text-scale2));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.15vh solid #969FA8;
    box-sizing: border-box;
    user-select: none;
    cursor: pointer;
}


.calendar_controller__actions{
    position: absolute;
    width: 100%;
    top: calc(var(--height) * 10);
    z-index: 1;
	box-shadow: 0 calc(6 * var(--main-font-size)) calc(21 * var(--main-font-size)) 0 rgba(0, 0, 0, 0.1);
}

.calendar__upper__full_date{
    text-wrap: nowrap;
}

.calendar__year_popup__mobile{
    display: none;
}

.search_mobile_icon{
    display: none;
}

.calendar__month_popup_mobile{
    display: none;
}

.calendar__error_container{
    display: none;
    position: absolute;
    top: calc(1.1 * var(--height));
    left: 0;
    align-items: center;
    gap: calc(var(--header-font-size) * 0.2);
    width: 100%;
    box-sizing: border-box;
    padding: 0 1%;
    z-index: -1;
}

.calendar__container[data-error="true"] .calendar__error_container{
    display: flex;
}

.calendar__error_container div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--header-font-size) * 1.2);
    height: calc(var(--header-font-size) * 1.2);;
}

.calendar__error_container div svg{
    width: 100%;
    height: 100%;
}

.calendar__error_container span{
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    color: var(--calendar-error);
    flex-grow: 1;
}

.calendar__year_popup__input section{
    display: none;
}

@media (hover: hover) and (width > 640px) {
    .calendar__upper > div:hover{
        background-color: var(--calendar-white);
    }

    .calendar__upper .calendar__reset_icon:hover{
        background-color: var(--calendar-color8);
    }
    
    .calendar__upper .calendar__reset_icon:hover + .calendar__reset_helper_text,
    .calendar__reset_helper_text:hover{
        display: block;
    }
    
    .calendar__upper .calendar__reset_icon:hover svg path{
        stroke: #FF0000;
    }
    
    .calendar__calendar__calendar div[data-status="active"]:hover{
		background-color: var(--calendar-color11);
        color: var(--calendar-white);
    }

    .calendar__years_grid > div:hover{
        background-color: var(--calendar-gray);
    }


    .calendar__month_popup > div:hover{
        background-color: var(--calendar-gray);
    }
}

body:has(#calendar__popup_wrapper[data-active="true"]){
    overflow: hidden;
}


@media (max-width: 500px){

    .calendar__calendar{
        max-height: calc(100dvh - 0.2886 * 100vw - 128px);
        overflow-y: scroll;
        top: calc(100% + 0.14vh);
        --height: calc(98vw / 7) !important;
    }

    .calendar__date_from_container .calendar__calendar{
        max-height: calc(100dvh - 0.15135 * 100vw - 128px);
    }


    .calendar__calendar__calendar{
        grid-template-rows: repeat(6, calc(98vw / 7));
        height: calc(98vw / 7 * 6);
    }

    .calendar__calendar__days_of_week{
        grid-template-rows: calc(98vw / 7);
    }

    .calendar__error_container{
        top: max(110%, 5.5rem);
        align-items: center;
    }

    .calendar__error_container div{
        width: 1.5rem;
        height: 1.5rem;
    }

    .calendar__upper:has(*[data-openpopup="true"]) .calendar_controller__actions{
        display: none;
    }

    .calendar__container{
        width: 98vw;
        --height: calc(98vw / 7);
        height: calc(2 * var(--height));
        box-sizing: border-box;
    }
    
    .calendar__container .calendar__upper{
        --header-font-size: 1.4rem;
        --height: calc(98vw / 7);
        
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: var(--height) var(--height);
        gap: 0;
        
    }

    .calendar__calendar{
        width: calc(100% + 2px);
        left: -1px;
        z-index: 3000;
    }

    .calendar_controller__actions{
        top: calc(var(--height) * 11.4);
    }

    .calendar__year_popup{
        position: fixed;
        width: 100%;
        height: 100dvh;
        top: 0;
        left: 0;
        z-index: 1000;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
    }

    .calendar__year_popup .calendar__years_grid{
        height: unset;
        flex-grow: 1;
        grid-template-rows: repeat(auto-fill, 3em);
        gap: 1em;
        padding: 1em 1.5em;
        border-bottom: none;
    }

    .calendar__year_popup > *:last-child{
        box-sizing: border-box;
        flex-shrink: 0;
        flex-basis: 9em;
        display: flex;
        align-items: stretch;
        flex-direction: column-reverse;
        width: 100%;
        padding: 1em 1.5em;
        background: white;
        box-shadow: none;
        gap: 0.5em;
    }

    .calendar__year_popup > *:last-child button{
        padding-block: 15px;
        font-size: 1em;
    }

    .calendar__year_popup .calendar__reset_btn{
        border: 1px solid var(--action-color);
    }

    .calendar__years_grid > div{
        font-size: 1em;
        height: 3em;
    }

    .calendar__month_popup_mobile,
    .calendar__year_popup__mobile{
        padding: 0.1em 1.5em;
        display: flex;
        height: var(--height);
        justify-content: space-between;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .calendar__month_popup_mobile .calendar__year_popup__mobile__close,
    .calendar__year_popup__mobile .calendar__year_popup__mobile__close{
        width: 2em;
        height: 2em;
    }

    .calendar__month_popup_mobile .calendar__year_popup__mobile__close svg,
    .calendar__year_popup__mobile .calendar__year_popup__mobile__close svg{
        width: 100%;
        height: 100%;
    }

    .calendar__month_popup_mobile span,
    .calendar__year_popup__mobile span{
        font-family: Roboto-Bold;
        font-size: 1.2em;
    }

    .search_mobile_icon{
        display: block;
        width: 2em;
        height: 4em;
    }

    .search_mobile_icon svg{
        width: 100%;
        height: 100%;
    }

    .calendar__year_popup__input{
        position: relative;
        display: flex !important;
        box-sizing: border-box;
        padding: 1em 1.2em;
        align-items: center;
        background: var(--calendar-light-blue);
    }

    .calendar__year_popup__input section{
        z-index: 1000;
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        height: 2rem;
        width: 2rem;
        align-items: center;
        justify-content: center;
    }

    .calendar__year_popup__input section svg{
        width: 100%;
        height: 100%;
    }

    .calendar__year_popup__input label{
        display: none !important;
    }

    .calendar__year_popup__input input{
        text-align: left !important;
        background-color: var(--calendar-light-blue);
        font-size: 1.2rem !important;
    }
    .calendar__year_popup__input input::placeholder{
        font-family: Roboto-Bold;
        color: black;
        font-size: 1.2rem;
    }
    
    .calendar__year_popup__input:has(input:not(:placeholder-shown)) section{
        display: flex;
    }

    
    .calendar__year_popup__input:has(input:focus){
        background-color: white;
    }

    

    .calendar__year_popup__input:has(input:focus) .search_mobile_icon{
        display: none;
    }

    .calendar__year_popup__input input:focus{
        background-color: white;
    }

    input:focus::placeholder{
        opacity: 0;
    }

    .calendar__month_popup{
        position: fixed;
        width: 100%;
        height: 100dvh;
        top: 0;
        left: 0;
        z-index: 100;
        background-color: rgb(255, 255, 255);
        grid-template-rows: repeat(auto-fill, 3rem);
        gap: 1.5rem;
        box-sizing: border-box;
        padding: 0 1.5rem;
    }
    .calendar__month_popup .calendar__month_popup_mobile{
        display: flex;
        justify-content: center;
        grid-column: 1 / -1;
        position: relative;
    }

    .calendar__month_popup_mobile div{
        position: absolute;
    }

    .calendar__month_popup_mobile div:first-child{
        left: 0;
    }

    .calendar__month_popup_mobile div:last-child{
        right: 0;
    }

    .calendar__month_popup > div{
        border-width: 1px;
        font-size: 1.2rem;
        height: 3rem;
    }

    .calendar__calendar__calendar{
        border-width: 1px;
        height: calc(98vw / 7 * 6);
        overflow-x: hidden;
    }

    .calendar__calendar__days_of_week span,
    .calendar__calendar__calendar div{
        font-size: 1.3rem !important;
        width: 100%;
        height: calc(98vw / 7);
        border-width: 1px;
    }

    .calendar__reset_helper_text{
        display: none !important;
    }

    .calendar__calendar__days_of_week .day_of_week,
    .calendar__calendar__calendar div,
    .calendar__year_popup .calendar__year_popup__input,
    .calendar__years_grid,
    .calendar__years_grid > div,
    .calendar__month_popup,
    .calendar__month_popup > div,
    .calendar__upper > div{
        /*border-width: 1.2px;*/
    }

    .calendar__calendar .calendar__calendar__title:first-of-type{
        border-bottom-width: 0.14vh;
    }

    .calendar__calendar .calendar__calendar__title{
        flex-shrink: 0;
    }

    .calendar__container .calendar__date_from_container{
        border-bottom: none;
    }

    .calendar_controller__actions{
        position: fixed;
        top: unset;
        width: 100%;
        height: 8rem;
        bottom: 0;
        left: 0;
        z-index: 99;
        display: flex;
        flex-direction: column-reverse;
        gap: 0.5rem;
        align-items: stretch;
        padding-right: 0;
    }

    .calendar_controller__actions button{
        width: 100%;
        padding: 1rem 0;
    }
    .calendar_controller__actions button.calendar__reset_btn{
        border: 1px solid var(--action-color);
    }

    .calendar__calendar_icon,
    .calendar__reset_icon,
    .calendar__calendar__title button,
    .calendar__calendar__title div{
        width: 1.8rem !important;
    }

    .calendar__upper__date_part{
        padding: 0 calc(50 * var(--main-font-size) * var(--text-scale))!important;
    }

    .calendar__reset_icon{
        flex-basis: 1.8rem !important;
        width: 1.8rem !important;
    }
}

@media (max-width: 630px){
    .calendar__upper__date_part .calendar__upper__help_text:first-of-type{
        display: none;
    }
}

@media (max-width: 400px){
    .calendar__month_popup div{
        font-size: 4vw;
    }
}

/* popup */

#calendar__popup_wrapper{
    position: fixed;
    width: 100%;
    height: 100lvh;
    top: 0;
    left: 0;
    z-index: 5000;
    background-color: rgba(65, 79, 81, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
}


#calendar__popup_wrapper[data-active="false"]{
    display: none;
}

.calendar__wrapper .calendar__close_btn{
    margin: 0;
    font-style: normal;
    background: none;
    font-size: calc(33 * var(--main-font-size) * var(--text-scale2));
    --action-color: var(--calendar__blue);
    background-color: var(--action-color);
    color: white;
    cursor: pointer;
    font-family: Roboto-Regular;
    width: 100%;
    padding: 1rem 0;
    border: 1px solid var(--action-color);
    position: fixed;
    bottom: 3px;
    left: 0;
    display: none;
    border: none;
}
.calendar__wrapper{
    position: relative;
    height: 100%;
    background-color: #fffef4;
    padding-inline: 10%;
    width: fit-content;
}

.calendar__container{
    margin: 5vh 0;
}

.calendar__popup_close{
    position: fixed;
    top: 3vh;
    right: 3vh;
    z-index: 9999;
}

.calendar__popup_close button{
    background: none;
    border: none;
    padding: 0;
    font-size: calc(5vh * var(--text-scale2));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calendar__popup_close button span{
    color: #c1c1c1;
}

.calendar__popup_close button span::after{
    content: "";
    width: 0.5vh;
    height: 0.5vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #c1c1c1;
}

.calendar__popup_close button span:hover{
    color: white;
}
.calendar__popup_close button span:hover::after{
    background-color: white;
}

.calendar__popup_close button[data-inverse="true"] span{
    color: rgb(107, 107, 107) !important;
}

.js-from-date .btn__menu_value,
.js-to-date .btn__menu_value{
    font-family: Inter-Bold;
    text-transform: uppercase;
}


@media (max-width: 500px){
.calendar__container{
    margin: 1vw;
}
}

@media (max-height: 640px) and (width > 640px),
    (orientation: landscape) {
    .mobile .calendar__container{
        margin: 1.5vh 0;
        --scale: 1.096;
    }
}

@media (max-width: 500px){
    .calendar__popup_close{
        display: none;
    }

    .calendar__popup_close button{
        font-size: 24px;
    }

    .calendar__popup_close span{
        color: white !important;
    }

    .calendar__container:has(.calendar__calendar[data-hide="true"]) .calendar__close_btn{
        display: block;
    }
}

/* calendar.css end */