.load-display-checkin-duration{
    border-bottom: solid 0.1px #C0C0C0;
    margin-bottom: 30px; padding-bottom: 20px;

}

.d-c-d-top-section{
    width: 100%; display: flex;
    justify-content: space-between;

}


.d-c-d-top-section-img{
    display: none;
    cursor: pointer;
}

.d-c-d-ifo-container{
    margin-top: 10px;

}

.d-c-d-duration-info{
    font-size: 20px; font-weight: 500;

}

.d-c-d-duration-date{
    color: #999999;
}



.d-c-d-load-calender{
    width: 300px; margin-top: 20px;
}

.d-c-d-button-section{
    display: none; 
    justify-content: center;
    width: 300px;
    margin-top: 20px;
}

#d-c-d-button-okay{
    width: 100px; height: 40px;
    border:none; background-color: #BF2829;
    color: #fff; font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
}

.d-c-d-dummie-calender{
    width: 100%; padding-bottom: 20px;
    background-color: #fff;
    border-radius: 20px; 
    box-shadow: 0px 0px 3px 3px #00000009;
}

.d-c-d-dummie-calendar-header{
    width: 100%; display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: solid 0.1px #e2e2e23a;
   

}

.d-c-d-dummie-calendar-header div{
    width: 70px; height: 10px;
    background-color: #e2e2e23a;
    
}

.d-c-d-dummie-calendar-header section{
    width: 30px; height: 30px;
    background-color: #e2e2e23a;
     margin: 10px; border-radius: 15px;
}


.d-c-d-dummie-days-divs div{
    width: 50%; height: 10px;
    background-color: #e2e2e23a;

    
}

.d-c-d-dummie-topdays{
    margin-left: 40%; margin-bottom: 10px;
    
}

.d-c-d-dummie-days-divs section{
    width: 80%; height: 10px;
    background-color: #e2e2e23a;
    margin: 10px 10%;
}



/* dummy callender animaton section */

.d-c-d-dummie-calendar-header div,
.d-c-d-dummie-calendar-header section,
.d-c-d-dummie-days-divs div,
.d-c-d-dummie-days-divs section{
    position: relative;
    overflow: hidden;
    background: #ececec;
}

.d-c-d-dummie-calendar-header div::after,
.d-c-d-dummie-calendar-header section::after,
.d-c-d-dummie-days-divs div::after,
.d-c-d-dummie-days-divs section::after{
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer{
    100%{
        transform: translateX(100%);
    }
}



/* dummy callender animaton section end */

@media (max-width:500px) {
    .d-c-d-top-section-img{
        width: 15px; height: 15px;
       
    }

    .load-display-checkin-duration, .d-c-d-load-calender{
        width: 100%; max-width: 500px;

    }



    .d-c-d-dummie-calender{
        width: 100%; 
    }

    .d-c-d-button-section{
        width: 100%;
    }


}