.calendar {
    border-radius: 28px;
    border: 4px solid #bdbec0;
    margin: 0 auto;
    width: 100% !important;
    max-width: 1350px !important;
    margin-bottom: 20px;
    position: relative;
    padding: 16px;
    background: white;
    box-shadow: 0px 0px 75px -30px #000;
}
.next-prev-box{
    max-width: 1350px !important;
    margin: auto;
}

.month-year {
    text-align: center;
    position: absolute;
    font-size: 2rem;
    margin-bottom: 20px;
    right: 37px !important;
    top: 65%;
    transform: translateY(-50%) rotate(90deg) !important; /* Rotate and center vertically */
    transform-origin: right center !important; /* Ensure rotation happens from the right */
    white-space: nowrap !important;
    position: absolute;
    bottom: 50%;
    line-height: 1;
    font-weight: 500;
    color: #717e91;
}
.year {
    margin-left: 4px;
    color: #CBD5E1;
}

.days, .calendar-dates {
    display: flex;
    flex-wrap: wrap;
    margin-right: 46px;
}
.calendar-dates {
    /* row-gap: 3px; */
    column-gap: 3px;
}
.days {
    margin-right: 46px;
}

.day-label, .day-box {
    flex: 1 0 14.28%;
    /* text-align: center; */
    /* padding: 10px; */
}
.day-label {
    position: relative;
    flex-basis: calc(14.286% - 2px);
    margin: 1px 1px 12px 1px;
    font-weight: 500;
    font-size: 22px;
    text-transform: capitalize;
    color: #bdbec0;
    text-align: center;
    font-family: arial !important;
}

.day-box {
    /* border: 1px solid #ccc; */
    height: 100px;
    position: relative;
    /* background-color: #bdbec0; */
    cursor: pointer;
    max-width: 175px;
}
.day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
    background-color: #bdbec0;
    margin: 3px 0px;
    border-radius: 15px;
    padding: 15px;
    height: 48px;
    text-align: left !important;
    font-family: arial !important;
    color: #3a3a3c;
    font-weight: 300 !important;
}
.day-box div,.day-box.full{
    /* color: #fff; */
}

.day-box.dull {
    background-color: #fff !important;
}

.day-box.today {
    background-color: #ffd700;
}

.day-box span.day {
    display: block;
    line-height: inherit !important;
    font-family: arial !important;
    color: #3a3a3c;
    font-weight: 300 !important;
}
    

/* Responsive styling for devices 1074px to 992px */
@media (max-width: 1618px){
    .day-box {
        max-width: 174px;
        height: 129px !important;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 63px;
    }
}
@media (max-width: 1611px){
    .day-box {
        max-width: 173px;
    }
}
@media (max-width: 1604px){
    .day-box {
        max-width: 171px;
    }
}
@media (max-width: 1590px){
    .day-box {
        max-width: 170px;
    }
}
@media (max-width: 1583px){
    .day-box {
        max-width: 169px;
    }
}
@media (max-width: 1576px){
    .day-box {
        max-width: 168px;
    }
}
@media (max-width: 1569px){
    .day-box {
        max-width: 167px;
    }
}
@media (max-width: 1562px){
    .day-box {
        max-width: 166px;
    }
}
@media (max-width: 1555px){
    .day-box {
        max-width: 165px;
    }
}
@media (max-width: 1548px){
    .day-box {
        max-width: 164px;
    }
}
@media (max-width: 1541px){
    .day-box {
        max-width: 163px;
    }
}
@media (max-width: 1534px){
    .day-box {
        max-width: 162px;
    }
}
@media (max-width: 1527px){
    .day-box {
        max-width: 161px;
    }
}
@media (max-width: 1520px){
    .day-box {
        max-width: 160px;
    }
}
@media (max-width: 1513px){
    .day-box {
        max-width: 159px;
    }
}

@media (max-width: 1074px){
    .days, .calendar-dates {
        margin-right: 43px;
    }
    .day-box {
        max-width: 88px;
        height: 80px !important;
    }
    .day-label {
        font-size: 27px;
        padding-right: 10px;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        padding: 8px;
        height: 38.5px;
    }
    /* .col-md-10.text-right.next-prev-box {
        justify-content: space-between !important;
    } */
}
@media (max-width: 1006px){
    .day-box {
        max-width: 87px;
    }
}
@media (max-width: 999px){
    .day-box {
        max-width: 86px;
    }
}
@media (max-width: 992px){
    .day-box {
        max-width: 85px;
    }
    .days {
        display: flex !important;
    }
}
@media (max-width: 991px){
    .day-box {
        max-width: 119px;
    }
}
@media (max-width: 983px){
    .day-box {
        max-width: 118px;
    }
}
@media (max-width: 976px){
    .day-box {
        max-width: 117px;
    }
}
@media (max-width: 969px){
    .day-box {
        max-width: 116px;
    }
}
@media (max-width: 962px){
    .day-box {
        max-width: 115px;
    }
}
@media (max-width: 958px){
    .day-label {
        flex-basis: calc(13.286% - 2px);
    }
}
@media (max-width: 955px){
    .day-box {
        max-width: 114px;
    }
}
@media (max-width: 948px){
    .day-box {
        max-width: 113px;
    }
}
@media (max-width: 941px){
    .day-box {
        max-width: 112px;
    }
}
@media (max-width: 934px){
    .day-box {
        max-width: 111px;
    }
}
@media (max-width: 927px){
    .day-box {
        max-width: 110px;
    }
}
@media (max-width: 920px){
    .day-box {
        max-width: 109px;
    }
}
@media (max-width: 913px){
    .day-box {
        max-width: 108px;
    }
}
@media (max-width: 906px){
    .day-box {
        max-width: 107px;
    }
}

/* Responsive styling for devices 992px to 768px */
@media (max-width: 992px) and (min-width: 768px) {
    .days {
        display: flex !important;
    }
}
@media (max-width: 899px){
    .day-box {
        max-width: 106px;
    }
}
@media (max-width: 892px){
    .day-box {
        max-width: 105px;
    }
}
@media (max-width: 885px){
    .day-box {
        max-width: 104px;
    }
}
@media (max-width: 878px){
    .day-box {
        max-width: 103px;
    }
}
@media (max-width: 871px){
    .day-box {
        max-width: 102px;
    }
}
@media (max-width: 864px){
    .day-box {
        max-width: 101px;
    }
}
@media (max-width: 857px){
    .day-box {
        max-width: 100px;
    }
}
@media (max-width: 850px){
    .day-box {
        max-width: 99px;
    }
}
@media (max-width: 843px){
    .day-box {
        max-width: 98px;
    }
}
@media (max-width:836px){
    .day-box {
        max-width: 97px;
    }
}
@media (max-width:829px){
    .day-box {
        max-width: 96px;
    }
}
@media (max-width:822px){
    .day-box {
        max-width: 95px;
    }
}
@media (max-width: 820px) {
    .days, .calendar-dates {
        margin-right: 42px;
    }
    .day-box {
        max-width: 93px;
    }
}
@media (max-width:800px){
    .day-box {
        max-width: 92px;
    }
}
@media (max-width:793px){
    .day-box {
        max-width: 91px;
    }
}
@media (max-width:786px){
    .day-box {
        max-width: 90px;
    }
}
@media (max-width:779px){
    .day-box {
        max-width: 89px;
    }
}
@media (max-width:772px){
    .day-box {
        max-width: 88px;
    }
}
@media (max-width:745px){
    .day-box {
        max-width: 87px;
    }
}
@media (max-width:738px){
    .day-box {
        max-width: 86px;
    }
}
@media (max-width:731px){
    .day-box {
        max-width: 85px;
    }
}
@media (max-width:724px){
    .day-box {
        max-width: 84px;
    }
}
@media (max-width:717px){
    .day-box {
        max-width: 83px;
    }
}
@media (max-width:710px){
    .day-box {
        max-width: 82px;
    }
}
@media (max-width:703px){
    .day-box {
        max-width: 81px;
    }
}
@media (max-width:696px){
    .day-box {
        max-width: 80px;
    }
}
@media (max-width:689px){
    .day-box {
        max-width: 79px;
    }
}
@media (max-width:682px){
    .day-box {
        max-width: 78px;
    }
}
@media (max-width:675px){
    .day-box {
        max-width: 77px;
    }
}
@media (max-width:670px){
    .day-box {
        max-width: 76px;
        height: 75px !important;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 35.5px;
    }
}
@media (max-width:661px){
    .day-box {
        max-width: 75px;
    }
}
@media (max-width:654px){
    .day-box {
        max-width: 74px;
    }
}
@media (max-width:647px){
    .day-box {
        max-width: 73px;
    }
}
@media (max-width:640px){
    .day-box {
        max-width: 72px;
    }
}
@media (max-width:633px){
    .day-box {
        max-width: 71px;
    }
}
@media (max-width:626px){
    .day-box {
        max-width: 70px;
    }
}
@media (max-width:619px){
    .day-box {
        max-width: 69px;
        height: 70px !important;
        font-size: 12px;
        border-radius: 10px;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 33px;
        font-size: 12px;
        border-radius: 10px;
        padding: 4px;
        /* text-; */
    }
}
@media (max-width:612px){
    .day-box {
        max-width: 68px;
    }
}
@media (max-width:605px){
    .day-label {
        font-size: 15px;
    }
    .day-box {
        height: 60px !important;
        font-size: 10px;
        max-width: 67px;
        font-weight: 400;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 29px;
        font-size: 10px;
        font-weight: 400;
    }
}
@media (max-width:598px){
    .day-box {
        max-width: 66px;
    }
}
@media (max-width:591px){
    .day-box {
        max-width: 65px;
    }
}
@media (max-width:584px){
    .day-box {
        max-width: 64px;
    }
}
@media (max-width:577px){
    .day-box {
        max-width: 63px;
    }
}
@media (max-width:570px){
    .day-box {
        max-width: 62px;
    }
}
@media (max-width:563px){
    .day-box {
        max-width: 61px;
    }
}
@media (max-width:556px){
    .day-box {
        max-width: 60px;
    }
}
@media (max-width:549px){
    .day-box {
        max-width: 59px;
    }
}
@media (max-width:542px){
    .day-box {
        max-width: 58px;
    }
}
@media (max-width:535px){
    .day-box {
        max-width: 57px;
    }
}
@media (max-width:528px){
    .day-box {
        max-width: 56px;
    }
}
@media (max-width:521px){
    .day-box {
        max-width: 55px;
    }
}
@media (max-width:514px){
    .day-box {
        max-width: 54px;
    }
}
@media (max-width:507px){
    .day-box {
        max-width: 53px;
    }
}
@media (max-width:500px){
    .day-box {
        max-width: 52px;
    }
}
@media (max-width:493px){
    .day-box {
        max-width: 51px;
    }
}
@media (max-width:486px){
    .day-box {
        max-width: 50px;
    }
}
@media (max-width:486px){
    .day-box {
        max-width: 50px;
    }
}

@media (max-width:479px){
    .day-box {
        max-width: 49px;
    }
    .day-box {
        height: 55px !important;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 25px;
    }
}

@media (max-width:472px){
    .day-box {
        max-width: 48px;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 26px;
    }
}
@media (max-width:465px){
    .day-box {
        max-width: 47px;
    }
}
@media (max-width:458px){
    .day-box {
        max-width: 46px;
    }
}
@media (max-width:451px){
    .day-box {
        max-width: 45px;
    }
}
@media (max-width:444px){
    .day-box {
        max-width: 44px;
    }
}
@media (max-width:437px){
    .day-box {
        max-width: 43px;
    }
}


@media (max-width:430px){
    .day-label {
        font-size: 15px;
    }
    .day-box {
        max-width: 42px;
        height: 52px !important;
        font-size: 8px;
        font-weight: 400;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 24px;
        font-size: 8px;
        font-weight: 400;
    }
}

@media (max-width:423px){
    .day-box {
        max-width: 41px;
    }
}
@media (max-width:416px){
    .day-box {
        max-width: 40px;
        height: 43px !important;
        border-radius: 8px;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        height: 20px;
        font-size: 8px;
        border-radius: 8px;
    }
}
@media (max-width:409px){
    .day-box {
        max-width: 39px;
    }
}
@media (max-width:406px){
    .day-label {
        font-size: 13px;
    }
}
@media (max-width:402px){
    .day-box {
        max-width: 38px;
    }
}
@media (max-width:395px){
    .day-box {
        max-width: 37px;
    }
}
@media (max-width:388px){
    .day-box {
        max-width: 36px;
        font-size: 6px;
    }
    .day-box div.morning, .day-box div.afternoon, .day-box.full_day, .day-box.full {
        font-size: 6px;
    }
}
@media (max-width:381px){
    .day-box {
        max-width: 35px;
    }
}
@media (max-width:378px){
    .day-label {
        font-size: 10px;
    }
}
@media (max-width:374px){
    .day-box {
        max-width: 34px;
    }
}
@media (max-width:367px){
    .day-box {
        max-width: 33px;
    }
}
@media (max-width:360px){
    .day-box {
        max-width: 32px;
    }
}
@media (max-width:353px){
    .day-box {
        max-width: 31px;
    }
}
@media (max-width:346px){
    .day-box {
        max-width: 30px;
    }
}
@media (max-width:339px){
    .day-box {
        max-width: 29px;
    }
}
@media (max-width:332px){
    .day-box {
        max-width: 28px;
    }
}
@media (max-width:335px){
    .day-label {
        font-size: 8px;
    }
}
@media (max-width:820px){
    .month-year {
        top: 69%;
    }
}
@media (max-width:604px){
    .month-year {
        top: 71%;
        font-size: 25px;
    }
}
@media (max-width:375px){
    .month-year {
        top: 71%;
        font-size: 21px;
    }
}



/* Responsive styling for devices under 540px */
@media (max-width: 540px) {
    
}