.mobile-menus{
    padding: 5px;
    vertical-align: top;
    display: flex;
    flex-wrap: wrap;
    padding-left: 2%;
    padding-right: 2%;

}

.mobile-menus .btn.btn-md{
    padding-top:10px;
    padding-bottom:10px;
    border:0px solid #fff2d8;
    color: #0153cc ;
    line-height: 1.2 !important;
    margin:3px;
    margin-bottom: 10px; 
    border-radius: 5px;
    background: #0153cc ;
}

.mobile-menus .btn.btn-sm {
    padding-top: 10px;
    /* border:1px solid rgb(228, 108, 10); */
    margin:2px;
    
    min-height: 110px;
    max-height: 110px;
    border-radius: 10px;
    transform: translateY(5px); /* Move button down */
    box-shadow: 0 0 0 #0056b3, /* Remove the "3D" part */
                0 2px 3px rgba(0, 0, 0, 0.1); /* Smaller shadow */        
}
.mobile-menus .btn.btn-sm.btn-sm-12 {
    min-width: 12% !important;
    max-width: 12% !important;
    margin:10px;

}
.mobile-menus .btn.btn-sm i{
    background: none ;
    color: #0153cc ;
}
.mobile-menus .btn span{
    /* text-wrap: wrap; */
    /* white-space: pre-wrap; */
    color: #0153cc ;
}

.btn .alert-count .item-count  {
    position: relative;
    top: -80px;
    left: 40px;
    padding: 2px 5px 2px 5px;
    font-weight: normal !important;
    font-size: 11px !important;
    background-color: rgb(213, 6, 6);
    border-radius: 50%;
    color: white;
}

.mobile-menus .btn:hover{
 
    background: white ;
    color: rgb(228, 108, 10);
}
.mobile-menus .btn:hover > span {
    color: rgb(228, 108, 10);
}
.mobile-menus .btn:hover i {
    background: none ;
    color: rgb(228, 108, 10);
}
.mobile-menus .btn:hover {
    border:2px solid #0153cc ;
    margin:2px;
}

.sm-view-hidden{
    display: block;
}
.sm-view-hidden.isMobile{
    display: none;
}
.show-on-mobile{
    display: none;
}
.show-on-mobile.isMobile{
    display: block;
}
.group-menu{
    background: rgb(228, 108, 10);
    background: linear-gradient(43deg, rgb(228, 108, 10) 0%, rgba(201,91,24,1) 50%, rgba(255,162,43,1) 100%); 
    color: #fff;
    width: 100%;
    padding:  5px 10px 5px 10px;
    letter-spacing: normal;
    border-radius: 5px;
}
.group-menu i{
    margin-right: 10px;
}
 
.top-mobile-nav{
    /* min-width: 500px; */
    margin-top:-15px !important;
}
 
.top-mobile-nav .btn i{
    color: #0153cc;
}
.top-mobile-nav .btn {
    background: none ;
    box-shadow: none;
    color: #0153cc;
    line-height: 1.2 !important;
    margin: 4px;
    border: none !important;
    width: 85px !important;
    height: 60px !important;
    padding : 10px !important;
    border: 2px solid    white  !important;

}
.top-mobile-nav .btn:hover:active, .top-mobile-nav .btn:focus, .top-mobile-nav .btn.active,  .top-mobile-nav .open >  .btn:hover:active, .top-mobile-nav .open > .btn:focus, .top-mobile-nav .open > .btn.active{
    background: none ;
    box-shadow: none;
    color:    rgb(228, 108, 10)  !important;
}
.top-mobile-nav .btn:hover:active i, .top-mobile-nav .btn:focus i, .top-mobile-nav .btn.active i, .open > .top-mobile-nav .btn:hover:active i, .top-mobile-nav .open > .btn:focus i, .top-mobile-nav .open > .btn.active i{
    /* color: white !important; */

    color:  rgb(228, 108, 10)  !important;
}
.top-mobile-nav  .btn:hover{
    border: 2px solid rgb(228, 108, 10)  !important;
    border-radius: 20px;
}

@media only screen and (max-width: 768px) {
    .top-mobile-nav{
        position:fixed;
        display: grid;
        grid-template-columns: auto auto auto auto auto ;

        bottom: 0px;
        padding: 0px 10px 5px 0px !important;
        left: 0px;
        width: 100% !important;
        float: none !important;
        background: #fff !important;
        box-shadow: 0 0 20px 2px rgba(159, 159, 159, 0.3);
        
    }
    .page-content, .page-content .container {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .top-mobile-nav .btn {
        padding: 0px !important;
        width: auto !important;
        font-size: 12px;
        letter-spacing: -.06em;
        height: 50px !important;
    }
    .top-mobile-nav .btn:hover{
        border: 0px solid rgb(228, 108, 10)  !important;
        /* padding: 10px; */
        border-radius: 5px;
    }
}



@media only screen and (max-device-width: 991px  )   {
    .mobile-menus .btn.btn-sm {
        min-width: 90px !important;
        min-height: 100px !important;
        max-width: 90px !important;
        max-height: 100px !important;
        margin: 5px;
    }
    .mobile-menus .btn.btn-sm.btn-sm-12 {
        min-width: 15% !important;
        max-width: 15% !important;
        margin:10px;
    
    }
}

@media only screen and (max-device-width: 767px  )   {
    .mobile-menus .btn.btn-sm {
        min-width: 110px !important;
        min-height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
        margin: 5px;
    }
    .mobile-menus .btn.btn-sm.btn-sm-12 {
        min-width: 18% !important;
        max-width: 18% !important;
        margin:10px;
    
    }
}
@media only screen and (max-device-width: 571px  )   {
    .mobile-menus .btn.btn-sm {
        min-width: 100px !important;
        min-height: 100px !important;
        max-width: 100px !important;
        max-height: 100px !important;
        margin: 8px;
    }
    .mobile-menus .btn.btn-sm.btn-sm-12 {
        min-width: 20% !important;
        max-width: 20% !important;
        margin:10px;
    }    
}
@media only screen and (max-device-width: 555px  )   {
    .mobile-menus .btn.btn-sm {
        margin: 5px;
    }
}
@media only screen and (max-device-width: 543px  )   {
    .mobile-menus .btn.btn-sm {
        min-width: 29% !important;
        min-height:110px !important;
        max-width: 29% !important;
        max-height: 110px !important;
        margin: 2%;
    }
    .mobile-menus .btn.btn-sm.btn-sm-12 {
        min-width: 24% !important;
        max-width: 24% !important;
        margin:10px;
    }        
}
@media only screen and (max-device-width: 412px  )   {
    .mobile-menus .btn.btn-sm {
        margin: 1%;
    }
    .mobile-menus .btn.btn-sm.btn-2x {
        margin: 1%;
        width: 31% !important;
        max-width: 31% !important;
        min-width: 31% !important;
    }
    
    .btn .alert-count .item-count  {
        left: 25px;
    }
    .mobile-menus .btn span{
        font-size: 10px;
    }
}

/* 
@media only screen and (max-device-width: 600px  )   {
    .mobile-menus .btn.btn-sm {
        padding:0px !important;
        padding-top:10px !important;
        padding-bottom:10px !important;
        border:0px solid #fff2d8;
        min-width: 78px !important;
        min-height: 78px !important;
        max-width: 78px !important;
        max-height: 78px !important;
        color: rgb(228, 108, 10);
        line-height: 1.2 !important;
        margin:2px;
        margin-bottom: 10px; 
        border-radius: 5px;
    }

    .mobile-menus .btn.btn-sm i{
        background: rgb(228, 108, 10);
        background: linear-gradient(to top, rgb(228, 108, 10) 32%, #FFE76E 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
    }

    .mobile-menus .btn span{
        text-wrap: wrap;
        white-space: pre-wrap;
        color: #333 !important;
        font-size: 10px;
    }

    .btn .alert-count .item-count {
        top: -65px !important;
        left: 23px;
        padding: 3px;
        font-weight: 700 !important;
        font-size: 12px !important;
        color: rgb(255, 255, 255);
    }
    
    .mobile-footer-nav{
        height: 60px;
        background: #ffffff;
        border-top: 1px solid #dfe4ed;
        z-index: 110;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        background: #ffffff;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 3px, rgba(0, 0, 0, 0.06) 1px 1px 2px 2px;
    }
    .mobile-footer-nav a.btn{
        color: rgb(228, 108, 10);
        font-size: 12px;
        letter-spacing: .8;
        width: 22%;
        margin:0px !important;
        margin-left:1% !important; 
        margin-right:1% !important; 
        border:0px;
        padding: 5px 0px 5px  0px;
    }
    .show-on-mobile {
        display: block;
    }
    .mobile-menus{
        letter-spacing: 0 !important;
    }
    .mobile-menus .btn::selection     {
        background: rgb(228, 108, 10) !important;
        color: white !important;
    }   

    .mobile-menus .btn:hover{
        background: rgb(228, 108, 10);
        color: white !important;
    }
    .mobile-menus .btn:hover i {
        
        background: #FFFFFF;
        background: linear-gradient(to bottom, #FFFFFF 0%, #FFE1CF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 5px;
        border: 0px;
    }
    .mobile-menus .btn span:hover{
        color: white;
    }

    .sm-view-hidden{
        display: none;
    }
    
}


@media only screen and (max-width: 420px)  {
    .mobile-menus .btn.btn-sm {
        min-width: 90px !important;
        min-height: 90px !important;
        max-width: 90px !important;
        max-height: 90px !important;
        padding-left: 10px ;
        padding-right: 10px ;
    }
    .mobile-menus{
        padding-left: 10px ;
        padding-right: 10px ;
    }
}

@media only screen and (max-width: 380px) {
    .mobile-menus .btn.btn-sm {
        min-width: 80px !important;
        min-height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
        padding-left: 3px ;
        padding-right: 3px ;
    }
    .mobile-menus{
        padding-left: 10px ;
        padding-right: 10px ;
    }
}

@media only screen and (max-width: 412px) {
    .mobile-menus .btn.btn-sm {
        min-width: 82px !important;
        min-height: 82px !important;
        max-width: 82px !important;
        max-height: 82px !important;
        padding-left: 3px ;
        padding-right: 3px ;
    }
    .mobile-menus{
        padding-left: 10px ;
        padding-right: 10px ;
    }
}

@media only screen and (max-width: 360px) {
    .mobile-menus .btn.btn-sm {
        min-width: 75px !important;
        min-height: 75px !important;
        max-width: 75px !important;
        max-height: 75px !important;
        padding-left: 3px ;
        padding-right: 3px ;
    }
    .mobile-menus{
        padding-left: 10px ;
        padding-right: 10px ;
    }
} */



.btn-lbl{
    /* width: 60px !important; */
}
.label-light{
    color: #6b6b6b !important;
    background: #fafafa !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
    border: 1px solid #ccc;
    
}

.label-light-success{
    /* color: #000; */
    color: #036643 !important;

    background: #f1ffe4 !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
    border: 1px solid #e4ffca ;

}
.label-success{
    color: #fff;
    background: #3dbd3a!important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
}
.label-light-warning{
    color: #000;
    background: #facea7 !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
    width: 100% !important;
}
.label-warning{
    color: #fff;
    background: #f76902 !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
}
.label-light-danger{
    color: #000;
    background: #fc8383 !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
}
.label-danger{
    color: #fff;
    background: #ff4545 !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
}
 
.label-primary{
    color: #fff;
    background: #0347ad  !important; 
    padding:1px 5px 1px 5px ;
    border-radius: 10px;
    font-weight: normal;
}
.p-0{padding: 0;}
.p-1{padding: 10px;}
.p-2{padding: 20px;}
.p-3{padding: 30px;}
.p-4{padding: 40px;}

.pt-1 {padding-top: 10px !important;}
.pt-2 {padding-top: 20px !important; }
.pt-3 {padding-top: 30px !important;}
.pt-4 {padding-top: 40px !important;}

.pr-1{padding-right: 10px;}
.pr-2{padding-right: 20px;}
.pr-3{padding-right: 30px;}
.pr-4{padding-right: 40px;}

.pl-1{padding-left: 10px;}
.pl-2{padding-left: 20px;}
.pl-3{padding-left: 30px;}
.pl-4{padding-left: 40px;}

.m-0{margin: 0;}
.m-1{margin: 10px;}
.m-2{margin: 20px;}
.m-3{margin: 30px;}
.m-4{margin: 40px;}

.mr-1{margin-right: 10px;}
.mr-2{margin-right: 20px;}
.mr-3{margin-right: 30px;}
.mr-4{margin-right: 40px;}

.ml-1{margin-left: 10px;}
.ml-2{margin-left: 20px;}
.ml-3{margin-left: 30px;}
.ml-4{margin-left: 40px;}
.text-btn{
    color: rgb(228, 108, 10);
}
 

.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

.flex-container   .flex-inside {
    text-align: center;
    padding: 5px; 
    padding-right: 20px;
}
.bell-count{
    position: absolute;
    padding: 2px 5px 2px 5px;
    font-weight: normal !important;
    font-size: 10px !important;
    background-color: rgb(213, 6, 6);
    border-radius: 50%;
    color: white !important;
    margin-left: -10px !important;
    margin-top: -5px !important;
}
.slidingClockMethod {
    position: absolute;
    background-color: white;
    top:0px;
    padding-top:70px;
    /* height: 100%; */
    right: 0%;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.recent-time-logs tbody tr td{
    padding:5px 2px !important;
}
 
.modal-xl {
    width: 90%;
    max-width: 95%;
}
@media (min-width: 900px) {
.modal-xl {
    width: 90%;
    max-width: 95%;
}
}