.mobile_view .calendar__calendar{
    max-height: calc(100dvh - 8dvh - 15dvh - 5dvh - 7.5dvh);
    --height: calc(8vh * 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 span{
    font-size: 1rem;
}

.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: var(--header-font-size);
}

.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 20px !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{
    display: block;
    font-size: var(--header-font-size) !important;
    position: absolute;
    top: calc(var(--height)* 10.25);
    left: 2vh;
    padding: 1vh;
    height: 5.5vh;
    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(100lvh * 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; */
}