/*.calendar {*/
/*    height: 25rem;*/
/*    width: max-content;*/
/*    background-color: white;*/
/*    border-radius: 25px;*/
/*    overflow: hidden;*/
/*    padding: 35px 50px 0px 50px;*/
/*}*/

/*.calendar {*/
/*    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
/*}*/

/*.calendar-header {*/
/*    background: #333333;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    border-radius: 7px;*/
/*    align-items: center;*/
/*    font-weight: 700;*/
/*    color: #ffffff;*/
/*    padding: 10px;*/
/*}*/

/*.calendar-body {*/
/*    padding: 10px;*/
/*}*/

/*.calendar-week-days {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(7, 1fr);*/
/*    font-weight: 600;*/
/*    cursor: pointer;*/
/*    color: rgb(104, 104, 104);*/
/*}*/

/*.calendar-week-days div:hover {*/
/*    color: black;*/
/*    transform: scale(1.2);*/
/*    transition: all .2s ease-in-out;*/
/*}*/

/*.calendar-week-days div {*/
/*    display: grid;*/
/*    place-items: center;*/
/*    color: #ffa81e;*/
/*    height: 32px;*/
/*}*/

/*.calendar-days {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(7, 1fr);*/
/*    gap: 2px;*/
/*    color: #0A0921;*/
/*}*/


/*.calendar-days div {*/
/*    width: 56px;*/
/*    height: 33px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    padding: 5px;*/
/*    position: relative;*/
/*    cursor: pointer;*/
    /* animation: to-top 1s forwards; */
/*}*/

/*.month-picker {*/
/*    padding: 5px 10px;*/
/*    border-radius: 10px;*/
/*    cursor: pointer;*/
/*}*/

/*.year-picker {*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/*.year-change {*/
/*    height: 30px;*/
/*    width: 30px;*/
/*    border-radius: 50%;*/
/*    display: grid;*/
/*    place-items: center;*/
/*    margin: 0px 10px;*/
/*    cursor: pointer;*/
/*}*/

/*.year-change:hover {*/
/*    background-color: #9796f0;*/
/*    transition: all .2s ease-in-out;*/
/*    transform: scale(1.12);*/
/*}*/

/*.calendar-footer {*/
/*    padding: 10px;*/
/*    display: flex;*/
/*    justify-content: flex-end;*/
/*    align-items: center;*/
/*}*/

/*#year:hover {*/
/*    cursor: pointer;*/
/*    transform: scale(1.2);*/
/*    transition: all 0.2 ease-in-out;*/
/*}*/

/*.calendar-days div span {*/
/*    position: absolute;*/
/*}*/

/*.calendar-days div:hover {*/
/*    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;*/
/*    background-color: #fbc7d4;*/
/*    border-radius: 20%;*/
/*    color: #f8fbff;*/
/*}*/

/*.calendar-days div.current-date {*/
/*    color: #f8fbff;*/
/*    background-color: #333333;*/
/*    border-radius: 12%;*/
/*}*/

/*.calendar-days div.blocked-date {*/
/*    color: #f8fbff;*/
/*    background-color: red;*/
/*    border-radius: 12%;*/
/*}*/

/*.month-list {*/
/*    position: relative;*/
/*    left: 0;*/
/*    top: -130px;*/
/*    background-color: #ebebeb;*/
/*    color: #151426;*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, auto);*/
/*    gap: 5px;*/
/*    border-radius: 20px;*/
/*}*/

/*.month-list>div {*/
/*    display: grid;*/
/*    place-content: center;*/
/*    margin: 5px 10px;*/
/*    transition: all 0.2s ease-in-out;*/
/*}*/

/*.month-list>div>div {*/
/*    border-radius: 15px;*/
/*    padding: 10px;*/
/*    cursor: pointer;*/
/*}*/

/*.month-list>div>div:hover {*/
/*    background-color: #9796f0;*/
/*    color: #f8fbff;*/
/*    transform: scale(0.9);*/
/*    transition: all 0.2s ease-in-out;*/
/*}*/

/*.month-list.show {*/
/*    visibility: visible;*/
/*    pointer-events: visible;*/
/*    transition: 0.6s ease-in-out;*/
/*    animation: to-left .71s forwards;*/
/*}*/

/*.month-list.hideonce {*/
/*    visibility: hidden;*/
/*}*/

/*.month-list.hide {*/
/*    animation: to-right 1s forwards;*/
/*    visibility: none;*/
/*    pointer-events: none;*/
/*}*/

/*.date-time-formate {*/
/*    height: 4rem;*/
/*    width: 100%;*/
/*    font-family: Dubai Light, Century Gothic;*/
/*    position: relative;*/
/*    display: flex;*/
/*    top: 50px;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.day-text-formate {*/
/*    font-family: Microsoft JhengHei UI;*/
/*    font-size: 1.4rem;*/
/*    padding-right: 5%;*/
/*    border-right: 3px solid #9796f0;*/
/*}*/

/*.date-time-value {*/
/*    display: block;*/
/*    position: relative;*/
/*    text-align: center;*/
/*    padding-left: 5%;*/
/*}*/

/*.time-formate {*/
/*    font-size: 1.5rem;*/
/*}*/

/*.time-formate.hideTime {*/
/*    animation: hidetime 1.5s forwards;*/
/*}*/

/*.day-text-formate.hidetime {*/
/*    animation: hidetime 1.5s forwards;*/
/*}*/

/*.date-formate.hideTime {*/
/*    animation: hidetime 1.5s forwards;*/
/*}*/

/*.day-text-formate.showtime {*/
/*    animation: showtime 1s forwards;*/
/*}*/

/*.time-formate.showtime {*/
/*    animation: showtime 1s forwards;*/
/*}*/

/*.date-formate.showtime {*/
/*    animation: showtime 1s forwards;*/
/*}*/

/*@keyframes to-top {*/
/*    0% {*/
/*        transform: translateY(0);*/
/*        opacity: 0;*/
/*    }*/

/*    100% {*/
/*        transform: translateY(100%);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*@keyframes to-left {*/
/*    0% {*/
/*        transform: translatex(230%);*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        transform: translatex(0);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*@keyframes to-right {*/
/*    10% {*/
/*        transform: translatex(0);*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        transform: translatex(-150%);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*@keyframes showtime {*/
/*    0% {*/
/*        transform: translatex(250%);*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        transform: translatex(0%);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*@keyframes hidetime {*/
/*    0% {*/
/*        transform: translatex(0%);*/
/*        opacity: 1;*/
/*    }*/

/*    100% {*/
/*        transform: translatex(-370%);*/
/*        opacity: 1;*/
/*    }*/
/*}*/


.calendar {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    width: 92%;
    margin: 0 auto;
}

.month {
     flex: 1 0 30%; 
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
}

.month h2 {
    margin-top: 0;
    text-align: center;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day {
    padding: 10px;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    background-color: green;
    color: #fff;
}

.blocked {
    background-color: red;
    color: #fff;
    pointer-events: none;
    /*opacity: 0.5;*/
}
.selected {
    background-color: lightblue;
}

.reserved-date {
    background-color: #ffa200;
    color: white;
}

.blocked-date {
    background-color: red;
    color: white;
    pointer-events: none;
}

.btn-container {
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    max-width: 200px;
}

.btn {
    padding: 10px 20px;
    /*background-color: #5185a8;*/
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn-container {
    display: flex;
    justify-content: end;
    margin-top: 25px;
    margin-left: 6rem;
    /* max-width: 197px; */
    text-align: -webkit-right;
    width: 14%;
}
.planingSection .btn-container {
    margin-left: 18rem;
}

.btn-container .btn-bg {
    position: relative;
    z-index: 1;
    font-size: 18px;
    text-align: center;
    padding: 4px 2px;
    text-transform: none;
    transition: all ease-in-out .5s;
    background: #333333;
    color: #fff;
    display: inline-block;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
    overflow: hidden;
}

.bg-title-new{
    background: #333333ad!important;
}

.descriptif-text {
    margin-left: 54px;
    font-size: 16px;
    font-weight: 600;
}

.descriptif{
    display: flex;
}

.rectangle{
    display: flex;
}

.descriptif .rectangle-gris:after {
  display: block;
  width: 18px;
  height: 18px;
  content:"";
  background: #8b8b8c;
}
.descriptif .rectangle-red:after {
  display: block;
  width: 18px;
  height: 18px;
  content:"";
  background: red;
}
.descriptif .rectangle-green:after {
  display: block;
  width: 18px;
  height: 18px;
  content:"";
  background: green;
}
.descriptif .rectangle-orange:after {
  display: block;
  width: 18px;
  height: 18px;
  content:"";
  background: #ffa200;
}
.descriptif .rectangle-white:after {
  display: block;
  width: 18px;
  height: 18px;
  content:"";
  background: #fff;
}

.comment-response {
    position: absolute;
    bottom: 35px;
    right: 0;
    background: #343a40;
    border: 2px solid #343a40;
    padding: 10px;
    z-index: 999;
    width: 250px;
    border-radius: 0.2rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
.calendar h3{
    text-align: center; 
}

@media(max-width: 600px) {
    .calendar {
        display: flex;
        flex-wrap: wrap;
        max-width: 90%;
        width: 740px;
        margin: 0 auto;
    }
    .btn-container {
        display: flex;
        justify-content: end;
        margin-top: 124px;
        margin-left: -3rem;
        text-align: -webkit-right;
        width: 44%;
        height: 34px;
    }
    .descriptif-text {
        margin-left: 0px;
        font-size: 14px;
        font-weight: 600;
    }
    .planingSection .btn-container {
        margin-left: 9rem !important;
        display: flex;
        justify-content: end;
        margin-top: 35px;
        margin-left: -3rem;
        text-align: -webkit-right;
        width: 60%;
        height: 34px;
    }
    .planingSection .descriptif {
        display: block;
    }
}