.checkin-calender-card{
            margin-left: 5%;
            border-radius: 40px;
            background-color: #fff;
            box-shadow: 0px 0px 10px #00000059;
            padding: 20px;
        }

        .checkin-calender-title{
            font-weight: 700; font-size: 18px;
        }

        .checkin-calender-card small{
            font-size: 11px; color: #999999;
        }

        .c-c-ifo-container{
            margin-top: 20px; 
        }

        .c-c-load-calender{
            width: 100%; padding-top: 20px;
           
        }

        .c-c-check-in-out-container{
            width: 90%;  margin-top: 20px;
            margin-left: 5%;
            border: solid 0.1px #C0C0C0;
            display: flex;   border-radius: 28px;
            justify-content: center;
             
        }

        .c-c-check-in-out-innercontainer{
            width: 98%; height: 56px;
            font-size: 12px; 
            display: flex;
            align-items: center;  
             
        }

        .c-c-check-in-out-divs{
            width: 45%; height: 48px;
            padding-left: 7%;
            display: flex; align-items: center;
            cursor:default;

        }

       

         .c-c-check-out-btn{
            width: 54%; height: 44px;
            display: flex; align-items: center;
           
        }

        #c-c-check-out-btn{
            width: 100%; height: 48px;
            cursor: default;
            display: flex; align-items: center;
            padding-left: 10%;
        }

       

        .c-c-check-in-out-txt{
            font-weight: 600; 
            font-size: 9.5px;
            margin-bottom: 5px; 

        }

        .c-c-check-in-out-subtxt{
            color: #999999;
            font-size: 14px; 
        }

        .c-c-check-in-out-divide{
            height: 60%; width: 1%;
            margin-right: 4%;
            border-right: solid 0.1px #C0C0C0;
        }

        .applyBorder{
            border-radius: 25px; 
            border: solid 0.1px #1C1B1F;
            
        }


        .c-c-foot-btn-section{
           width: 100%; display: flex;
           justify-content: center;
           margin-top: 20px;
        }


        .c-c-foot-btn-section div{
            cursor: pointer;
            width: 140px; height: 40px;
            border-radius: 20px;
            display: flex; align-items: center;
            justify-content: center;
            color: #F3F3F3;
            background-color: #BF2829;
            font-size: 12px;
        }
        

        #clear_duratiion, #select_yr{
            display: none;
        }

        .c-c-report-div{
            margin-top: 20px;
            width: 100%; display: flex;
            justify-content: center;

        }


        .c-c-report-div section{
            width: 140px; border-radius: 20px;
            height: 40px;
            display: flex; align-items: center;
            justify-content: center;
            font-size: 12px; cursor: pointer;


         }


        .c-c-report-div img{
        width: 15px; margin-right: 5px;
        }

        #report_listenBtn:hover{
            background-color: #bf28284e;

        }


    @media (max-width:500px) {
        .select-checkin-main{
           width: 95%; margin-top: 30px;
        }
        .load-checkin-calender_report{
            width: 100%; 
        }

        .checkin-calender-card{
            margin-left: 0%; border-radius: 40px;
            background-color: #fff;
            box-shadow:none;
            padding: 0px;

        }

         .checkin-calender-title,  .checkin-calender-card small{
            margin-left: 5%;
        }

         #report_listenBtn:hover{
            background:none;

        }

        .c-c-spaceheight-div{
            height: 70px;
        }

  
    }