/*****************************************************************
1.  Homepage
    1.1. Header
    1.2. Hero section blog
    1.3. Blog Grid
    1.3. Footer
2.  About Us

******************************************************************/
:root{
	--primary: #1d8523;
    --tertiary: #08ef14;
	--secondary: #1e1e1e;
	--body-text-color: #585858;
	--white: #ffffff;
    --black: #000000;
    --light-gray-color: #e6e6e6;
    --gray-color: #dad9d9;
    --dark-gray-color: #747474;
    --red-color: #f00;
    --border-color: #b0b0b0;

	--heading-1: 32px;
	--heading-2: 26px;
	--heading-3: 22px;
	--heading-4: 20px;
	--heading-5: 18px;
	--heading-6: 16px;

	--fw-300: 300;
	--fw-400: 400;
	--fw-500: 500;
	--fw-600: 600;
	--fw-700: 700;
	--fw-800: 800;

	--body-font-size: 15px;
	--font-Poppins: 'Poppins', sans-serif;

	--ease-transition: all 0.4s ease-in-out;
}
body{
	margin: 0;
    font-family: var(--font-Poppins);
    font-size: var(--body-font-size);
    font-weight: var(--fw-400);
    line-height: 20px;
    color: var(--body-text-color);
}
a{
    text-decoration: none;
	/* transition: var(--ease-transition); */
	color: var(--secondary);
}
/* a:hover{
	color: var(--primary);
} */
h1, h2, h3, h4, h5, h6{
	color: var(--secondary);
}
h1{
	font-size: var(--heading-1);
	line-height: normal;
	font-weight: var(--fw-700);
    color: var(--body-text-color);
}
h2{
	font-size: var(--heading-2);
	line-height: normal;
	font-weight: var(--fw-700);
    color: var(--body-text-color);
}
h3{
	font-size: var(--heading-3);
	line-height: normal;
	font-weight: var(--fw-700);
    color: var(--black);
}
h4{
	font-size: var(--heading-4);
	line-height: normal;
	font-weight: var(--fw-600);
}
h5{
	font-size: var(--heading-5);
	line-height: normal;
	font-weight: var(--fw-600);
}
h6{
	font-size: var(--heading-6);
	line-height: 22px;
	font-weight: var(--fw-500);
}
ul{
    padding: 0;
    margin: 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea{
    background: var(--gray-color);
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    padding: 10px 15px;
    width: 100%;
    color: var(--secondary);
    font-family: var(--font-Poppins);
    border: none;
    border-radius: 40px;
    min-height: 60px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus{
    outline: none;
    box-shadow: none;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
select:disabled,
textarea:disabled{
    color: #4c4c4c !important;
}
p,span{
    word-break: break-word;
}
.text-truncate2{
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/*==============================
    Global Elements
==============================*/
.patb-100{
    padding-top: 100px;
    padding-bottom: 100px;
}
.patb-50{
    padding-top: 50px;
    padding-bottom: 50px;
}
.pat-100{
    padding-top: 100px;
}
.pab-100{
    padding-bottom: 100px;
}
.pat-50{
    padding-top: 50px;
}
.pab-50{
    padding-bottom: 50px;
}
.form-label:not(:last-child){
    margin-bottom: 16px;
}
.form-label{
    margin-bottom: 0;
}
.cbtn{
    border-radius: 28px;
    background-color: var(--primary);
    text-transform: uppercase;
    font-size: var(--body-font-size);
    color: var(--white);
    font-weight: var(--fw-600);
    display: inline-block;
    border: none;
    min-width: 219px;
    text-align: center;
    padding: 14px;
}
.cbtn:hover{
    background-color: var(--black);
}
.white-bg{
    background-color: var(--white);
}
.green-bg,
.swal2-container .swal2-confirm{
    background-color: var(--primary);
}
.red-bg,
.swal2-container .swal2-deny{
    background-color: #ee4242;
}
.sky-bg{
    background-color: #35b3ee;
}
.blue-bg{
    background-color: #5f7bd2;
}
.yellow-bg{
    background-color: #e8a411;
    color: var(--black) !important;
}
.lyellow-bg{
    background-color: #d2d830;
    color: var(--black) !important;
}
.yellow-bg:hover,
.lyellow-bg:hover{
    color: var(--white) !important;
}
.yellow-bg:hover img,
.lyellow-bg:hover img{
    filter: invert(1);
}
.yellow-bg:hover svg path{
    fill: #fff;
}
.yellow-bg img,
.yellow-bg svg{
    height: auto !important;
    width: 20px;
}
.yellow-bg[title="Cancel"] img,
.yellow-bg[title="Cancel"] svg{
    width: 12px;
}
.yellow-bg svg{
    height: 16px !important;
}
.color-blue{
    color: #1e50cf;
}
.radius-50{
    border-radius: 50px;
}
.space-30{
    padding: 30px;
}
.size-22{
    font-size: 18px !important;
}
.fw-600{
    font-weight: 600;
}
.fw-bold strong{
    font-weight: var(--fw-700) !important;
}
.mw-1027{
    max-width: 1027px;
}
.mw-820{
    max-width: 820px;
}
.mw-300{
    min-width: 300px !important;
}
.mw-160{
    min-width: 160px;
}
.mw-140{
    min-width: 140px;
}
.mw-110{
    min-width: 110px !important;
}
.mw-auto{
    min-width: auto !important;
}
.mw-90{
    min-width: 100px;
}
th.mw-250{
    min-width: 250px;
}
.white-space-normal{
    white-space: normal !important;
}
.min-h-100{
    min-height: 100%;
}
.text_ellipsis{
    text-overflow: ellipsis;
}
.mt-20{
    margin-top: 20px;
}
/*.table-responsive{
    overflow-y: hidden;
    padding-bottom: 10px;
    margin-bottom: 50px;
}
.table-responsive::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
    border-radius: 10px;
    background-color: transparent;
}
.table-responsive::-webkit-scrollbar{
    height: 8px;
    background-color: transparent;
}
.table-responsive::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #b0b0b0;
}*/
#shift-table .mw-110,
#shiftTable .mw-110
{
    min-width: 120px;
}

/* Splash Screen */
.splash-screen{
    min-height: 100vh;
    overflow: hidden;
    padding: 20px;
}
.splash-screen::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -90px;
    width: 100%;
    height: 50%;
    background-color: var(--black);
}
.spalsh-carea .logo{
    max-width: 120px;
}
.login-form{
    max-width: 474px;
    border-radius: 50px;
    background-color: var(--light-gray-color);
    padding: 80px 72px;
    margin-top: 60px;
    z-index: 1;
    position: relative;
}
.login-form input:not(input[type="submit"]){
    padding-left: 110px;
}
.login-form input::-webkit-input-placeholder{
    color: var(--dark-gray-color);
    opacity: 1;
}
.login-form input::-moz-placeholder{
    color: var(--dark-gray-color);
    opacity: 1;
}
.login-form input::placeholder{
    color: var(--dark-gray-color);
    opacity: 1;
}
.input-icon{
    background-color: #b2b2b2;
    min-height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    border-radius: 40px 0 0 40px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.input-icon img{
    height: 25px;
}
.login-form .cbtn{
    margin-top: 14px;
}
.shape-design{
    position: absolute;
    right: 0;
    top: 10px;
    text-align: right;
}
.shape-design img{
    width: 75%;
}

/* Dashboard Page */
.main-dashboard{
    background-color: var(--black);
    position: relative;
    padding-top: 122px;
}
/* Dashboard Header */
.header{
    background-color: var(--white);
    padding: 15px 40px;
    border-radius: 0 0 28px 28px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}
.header-inner ul>li{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}
.header-inner ul>li>a{
    font-size: var(--body-font-size);
    color: var(--dark-gray-color);
    font-weight: var(--fw-600);
    padding: 15px 22px;
    display: inline-block;
    position: relative;
    border-radius: 28px;
    transition: all 350ms ease-in-out;
}
.header-inner ul>li>a:focus-visible,
.common-table tbody td .small-btn:focus-visible{
    outline: none;
}
.header-inner ul>li>a.active,
.header-inner ul>li>a.show,
.header-inner ul>li>a:hover{
    color: var(--secondary);
}
.header-inner ul>li>a.dropdown-toggle::after{
    display: none;
}
.header-inner ul>li>a.show{
    background-color: var(--gray-color);
    border-radius: 28px 28px 0 0;
}
.header-inner .dropdown-menu{
    border: none;
    border-radius: 0 0 28px 28px;
    background-color: var(--gray-color);
    width: calc(100% - 10px);
    opacity: 0;
    visibility: hidden;
    display: block;
    transform: inherit !important;
    top: 100% !important;
    left: 5px !important;
    transition: all 350ms ease-in-out;
}
.header-inner .dropdown-menu.show{
    opacity: 1;
    visibility: visible;
    transition: all 350ms ease-in-out;
}
.header-inner .menu-left .dropdown-menu{
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 20px;
    padding-right: 14px;
    width: calc(100% + 70px);
}
.header-inner .menu-left .dropdown-menu .notifications_area::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	border-radius: 10px;
	background-color: var(--gray-color);
}
.header-inner .menu-left .dropdown-menu .notifications_area::-webkit-scrollbar{
	width: 6px;
	background-color: var(--gray-color);
}
.header-inner .menu-left .dropdown-menu .notifications_area::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	background-color: #858484;
}
.header-inner .dropdown-menu>li{
    display: block;
    width: 100%;
    padding: 0;
}
.header-inner .dropdown-menu>li a{
    padding: 10px 22px;
    width: 100%;
}
.header-inner .has_noti{
    padding-left: 52px;
    padding-right: 52px;
}
.has_noti::before{
    content: '';
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background-color: var(--tertiary);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.header-inner .menu-left>ul li.dropdown .has_noti{
    border-radius: 28px 0 0 0;
}
.header-inner .menu-left>ul li.dropdown .has_noti::after{
    content: '';
    position: absolute;
    right: -80px;
    top: 0;
    width: 80px;
    height: 100%;
    background-color: var(--gray-color);
    display: block !important;
    margin: 0;
    border: none;
    border-radius: 0 28px 0 0;
    opacity: 0;
    visibility: hidden;
    transition: all 350ms ease-in-out;
}
.header-inner .menu-left>ul li.dropdown .has_noti.show::after{
    opacity: 1;
    visibility: visible;
}
.header-inner .notifications_area{
    max-height: 370px;
    overflow-y: auto;
}
.header-inner .notifications_area>li,
.header-inner .notifications_area>li>a{
    display: block;
    width: 100%;
}
.notifications_area>li>a{
    background-color: var(--white);
    border-radius: 28px !important;
    padding: 15px 20px !important;
    position: relative;
    margin-bottom: 12px;
}
.notifications_area>li:last-child>a{
    margin-bottom: 0;
}
.notifications_area>li>a::before{
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    /* background-color: var(--tertiary); */
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.notifications_area>li h6{
    color: var(--black);
    font-size: 14px;
    font-weight: var(--fw-600);
    margin-bottom: 3px;
    line-height: 16px;
    word-break: break-all;
}
.notifications_area>li p{
    margin: 0;
    color: #858484;
    font-size: 12px;
    line-height: 14px;
    font-weight: var(--fw-400);
}
.read{
    opacity: 0.55;
}
.logo-area img{
    max-width: 100px;
}
.header .menu-icon{
    width: 45px;
    height: 45px;
    line-height: 38px;
    text-align: center;
    background-color: var(--primary);
    border-radius: 50%;
    display: inline-block;
    margin-left: 7px;
    overflow: hidden;
     border: 2px solid var(--primary);
}
.header .menu-icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header .menu-icon img.default-image{
    filter: invert(1);
    -webkit-filter: invert(1);
    transform: scale(1.12);
    -webkit-transform: scale(1.12);
}
.menu-right>ul>li:last-child a{
    background-color: var(--gray-color);
    border-radius: 28px;
    padding: 12px 26px;
}
.menu-right>ul>li:last-child a:hover{
    background-color: var(--black);
    color: var(--white);
}
.menu-right .dropdown-toggle{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.menu-right .dropdown .dropdown-toggle>span:first-child{
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.content-area{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    padding-top: 0;
    position: relative;
}
.content-area.dashboard-page{
    z-index: 1;
}
.dashboard-page::before{
    content: '';
    position: absolute;
    left: 0;
    top: -60px;
    width: 100%;
    height: 140px;
    background-color: var(--primary);
    z-index: -1;
}
/* Sidebar Manu */
.sidebar-menu{
    flex: 0 0 240px;
    -webkit-flex: 0 0 240px;
    max-width: 240px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 135px;
    background-color: var(--black);
}
.sidebar-menu aside{
    height: calc(100vh - 135px);
    overflow-y: auto;
    overflow-x: hidden;

}
.sidebar-menu aside::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0);
	border-radius: 10px;
	background-color: rgba(0,0,0,0);
}
.sidebar-menu aside::-webkit-scrollbar{
	width: 6px;
	background-color: rgba(0,0,0,0);
    display: none;
    transition: all 350ms ease-in-out;
}
.sidebar-menu aside::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0);
	background-color: rgba(29, 133, 35,0.5);
}
/* .sidebar-menu:hover aside::-webkit-scrollbar{
    display: block;
} */
.sidebar-menu ul li{
    display: block;
}
.sidebar-menu ul li>a{
    font-size: var(--body-font-size);
    color: var(--white);
    font-weight: var(--fw-600);
    border-bottom: 2px solid var(--primary);
    display: block;
    padding: 24px 24px;
    position: relative;
}
.sidebar-menu ul li>a.active{
    background-color: var(--primary);
}
.sidebar-menu ul li:last-child>a{
    border-bottom: none;
}
.sidebar-menu ul li>a::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border: 10px solid transparent;
    border-right-color: var(--light-gray-color);
    border-left: 0;
    border-right-width: 16px;
    opacity: 0;
    visibility: hidden;
}
.sidebar-menu ul li>a.active::after{
    opacity: 1;
    visibility: visible;
}
.sidebar-menu ul li.has-children.open>a{
    background-color: var(--primary);
}
.sidebar-menu ul li.has-children>a{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.sidebar-menu .inner_dropdown{
    background-color: var(--primary);
    padding: 0 10px 10px;
    display: none;
}
.sidebar-menu .inner_dropdown.open{
    display: block;
}
.sidebar-menu .inner_dropdown>li:not(:last-child){
    margin-bottom: 6px;
}
.sidebar-menu .inner_dropdown>li>a{
    background-color: var(--gray-color);
    color: #111111;
    padding: 17px 15px;
    border: none;
}
.sidebar-menu .inner_dropdown>li>a.inactive{
    color: var(--primary);
}


.right-content{
    min-height: calc(100vh - 122px);
    max-width: calc(100% - 240px);
    flex: 0 0 calc(100% - 240px);
    margin-left: 240px;
    background-color: var(--light-gray-color);
    border-radius: 28px 0 0 28px;
    padding: 20px 20px 70px 20px;
    /* z-index: 1; */
    overflow: hidden;
}
.count-area{
    gap: 35px;
    padding-bottom: 10px;
}
.count-box{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    background-color: var(--gray-color);
    border-radius: 28px;
    text-align: center;
    padding: 20px;
    min-width: 200px;
}
.count-box>p,
.count-box>span{
    color: var(--dark-gray-color);
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    margin: 0;
}
.count-box>span{
    color: var(--primary);
    display: inline-block;
    margin-top: 12px;
}

/* Messages Page */
.dash-btn,
.swal2-container .swal2-confirm,
.swal2-container .swal2-deny{
    font-size: var(--body-font-size);
    color: var(--white);
    font-weight: var(--fw-600);
    border-radius: 28px;
    min-width: 170px;
    padding: 14px 10px;
    display: inline-block;
    border: none;
    text-align: center;
    transition: var(--ease-transition);
}
.dash-btn:hover,
.swal2-container .swal2-confirm:hover,
.swal2-container .swal2-deny:hover{
    background-color: var(--secondary);
    color: var(--white);
}
.swal2-container .swal2-confirm:focus,
.swal2-container .swal2-deny:focus{
    box-shadow: none;
    -webkit-box-shadow: none;
}
.w-115,
.swal2-confirm,
.swal2-deny{
    min-width: 115px;
}
.add_btn{
    margin-left: 20px;
    margin-right: 12px;
}
.msg-list li{
    background-color: var(--gray-color);
    border-radius: 28px;
    padding: 20px;
    display: block;
    padding-left: 68px;
    position: relative;
    margin-bottom: 12px;
}
.custom-checkbox{
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.custom-checkbox input{
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
}
.custom-checkbox span{
    border: 2px solid var(--black);
    width: 24px;
    height: 24px;
    border-radius: 10px;
    display: inline-block;
    background-color: var(--white);
}
.custom-checkbox span::after{
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M2.61355 9.07928C2.21991 9.08038 1.83463 9.19291 1.50227 9.40385C1.16992 9.61479 0.904074 9.91551 0.735501 10.2712C0.566927 10.627 0.502512 11.0231 0.549707 11.4139C0.596901 11.8047 0.753778 12.1742 1.00219 12.4796L6.29768 18.9665C6.48649 19.201 6.72851 19.387 7.00365 19.5091C7.27878 19.6312 7.57908 19.686 7.87961 19.6687C8.52237 19.6342 9.10267 19.2904 9.47264 18.725L20.4727 1.00941C20.4745 1.00645 20.4764 1.00353 20.4783 1.00064C20.5815 0.842165 20.5481 0.528112 20.335 0.330819C20.2765 0.27664 20.2075 0.235016 20.1323 0.208509C20.0571 0.182003 19.9772 0.171175 19.8977 0.176694C19.8181 0.182212 19.7405 0.20396 19.6697 0.240597C19.5989 0.277235 19.5363 0.327986 19.4858 0.389726C19.4818 0.39458 19.4778 0.399361 19.4736 0.404069L8.37986 12.9383C8.33765 12.986 8.28638 13.0249 8.22903 13.0526C8.17168 13.0803 8.1094 13.0963 8.0458 13.0998C7.9822 13.1032 7.91854 13.094 7.85854 13.0726C7.79854 13.0512 7.74338 13.0182 7.69627 12.9753L4.01447 9.62483C3.63208 9.2743 3.13229 9.07967 2.61355 9.07928Z" fill="%231D8523"/></svg>');
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: 13px;
    opacity: 0;
    visibility: hidden;
}
.custom-checkbox input:checked + span::after{
    opacity: 1;
    visibility: visible;
}
.noti-before::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background-color: var(--tertiary);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.inner-msg{
    /* padding-left: 30px; */
    text-transform: none;
}
.inner-msg>h3{
    line-height: 24px;
    font-size: 20px;
}
.inner-msg>p{
    color: #858484;
    font-size: var(--body-font-size);
    margin: 0;
}
/* New message Modal */
.common-modal .modal-content{
    border: none;
    border-radius: 28px;
}
.common-modal .modal-header{
    border: none;
    border-radius: 28px;
    text-align: center;
    padding: 20px 50px;
}
.common-modal .modal-header .modal-title{
    color: var(--white);
}
.common-modal .modal-header .btn-close {
    position: absolute;
    top: 16px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: var(--white);
    opacity: 1;
    margin: 0;
    border-radius: 10px;
}
.common-modal .modal-header .btn-close:focus{
    outline: none;
    box-shadow: none;
}

.inner-size-l .msg-form{
    max-width: 680px !important;
}
.inner-size-xl .msg-form{
    max-width: 900px !important;
}
.msg-form>.form-label,
.rate-row .form-label{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    position: relative;
}
.msg-form>.form-label>label,
.rate-row .form-label>label{
    flex: 0 0 110px;
    -webkit-flex: 0 0 110px;
    max-width: 110px;
    font-size: var(--body-font-size);
    color: var(--black);
    font-weight: var(--fw-600);
    background-color: #cbcbcb;
    border-radius: 28px 0 0 28px;
    padding: 17px 22px;
}
.msg-form>.form-label .custom-select,
.msg-form>.form-label>input:not(input[type="submit"]),
.right-sidebox-small,
.rate-row .form-label>input:not(input[type="submit"]){
    flex: 0 0 calc(100% - 110px);
    -webkit-flex: 0 0 calc(100% - 110px);
    max-width: calc(100% - 110px);
    position: relative;
}
.modal-dropdown .select-box input{
    padding: 0;
    min-height: auto;
    border-radius: 0;
    text-align: center;
}
.modal-size-l .msg-form>.form-label>label,
.rate-row .form-label>label{
    flex: 0 0 180px;
    -webkit-flex: 0 0 180px;
    max-width: 180px;
    padding: 17px 12px;
    text-align: right;
}
.modal-size-l .msg-form>.form-label .custom-select,
.modal-size-l .msg-form>.form-label>input:not(input[type="submit"]),
.modal-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea,
.msg-form>.form-label .form-rating,
.modal-size-l .right-sidebox-small,
.msg-form .select2.select2-container,
.msg-form .form-label>label+.select2,
.rate-row .form-label>input:not(input[type="submit"]),
.gmp_input_area{
    flex: 0 0 calc(100% - 180px);
    -webkit-flex: 0 0 calc(100% - 180px);
    max-width: calc(100% - 180px);
}
.modal-size-l .msg-form{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.modal-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea{
    height: 120px;
    scrollbar-width: none;
}
.modal-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea:focus{
    box-shadow: none;
}
.custom-select .select-styled,
.msg-form>.form-label>input:not(input[type="submit"]),
.msg-form>.form-label:not(.bottom-textarea)>textarea,
.msg-form>.form-label .form-rating,
.modal-dropdown .select-box,
.msg-form .select2 .select2-selection,
.msg-form .form-label>label+.select2,
.rate-row .form-label>input:not(input[type="submit"]),
.gmp_input_area{
    background-color: var(--gray-color);
    border-radius: 0 28px 28px 0;
    padding: 17px;
    padding-right: 45px;
    text-align: center;
    font-size: var(--body-font-size);
    color: #7a7a7a;
    font-weight: var(--fw-600);
    min-height: auto;
    resize: none;
}
.inner-size-l .msg-form .select-styled,
.modal-size-l .inner-size-l .msg-form>.form-label input:not(input[type="submit"]),
.inner-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea,
.modal-size-l .modal-dropdown .select-box,
.rate-row .form-label>input:not(input[type="submit"]),
.gmp_input_area{
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    text-align: left;
    padding-left: 40px;
}
.msg-form>.form-label>input:not(input[type="submit"]),
.msg-form>.form-label:not(.bottom-textarea)>textarea,
.msg-form>.form-label .form-rating,
.msg-form .select2 .select2-selection,
.rate-row .form-label>input:not(input[type="submit"]){
    padding-right: 17px;
}
.msg-form>.form-label>input:not(input[type="submit"]),
.msg-form .select2 .select2-selection,
.rate-row .form-label>input:not(input[type="submit"]){
    min-height: 54px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.custom-select .select-styled,
.modal-dropdown .select-box{
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M11.9991 13.09C11.8558 13.0901 11.7139 13.062 11.5815 13.0071C11.4492 12.9523 11.329 12.8718 11.2278 12.7703L0.318728 1.86127C-0.107545 1.435 -0.107545 0.744727 0.318728 0.318728C0.745 -0.107272 1.43527 -0.107545 1.86127 0.318728L11.9991 10.4565L22.1369 0.318728C22.5631 -0.107545 23.2534 -0.107545 23.6794 0.318728C24.1054 0.745 24.1057 1.43527 23.6794 1.86127L12.7703 12.7703C12.6692 12.8718 12.549 12.9523 12.4166 13.0071C12.2842 13.062 12.1423 13.0901 11.9991 13.09Z" fill="black"/></svg>');
    background-position: calc(100% - 20px) center;
    background-repeat: no-repeat;
    background-size: 16px;
    z-index: 2;
    position: relative;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.custom-select .select-options,
.modal-dropdown .options{
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background-color: var(--gray-color);
    z-index: 3;
    border-radius: 0 0 28px 0;
}
.custom-select .select-options{
    z-index: 9;
}
.modal-dropdown .options{
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.custom-select .select-options::before,
.modal-dropdown .options::before{
    content: '';
    position: absolute;
    right: 0;
    top: -30px;
    z-index: -1;
    border: 30px solid transparent;
    border-right-color: var(--gray-color);
    border-left: none;
}
.custom-select .select-options>p,
.modal-dropdown .options>p{
    margin: 0;
    font-size: 16px;
    color: #1b1b1b;
    text-transform: uppercase;
    font-weight: var(--fw-600);
    padding: 12px 16px;
    background-color: #b0b0b0;
}
.modal-dropdown .options>p{
    cursor: pointer;
}
.custom-select .select-options ul,
.modal-dropdown .options ul{
    border-radius: 0 0 28px 0;
    overflow: hidden;
}
.custom-select .select-option,
.modal-dropdown .options .select-option{
    font-size: 16px;
    color: #1b1b1b;
    font-weight: var(--fw-500);
    padding: 12px 16px;
    display: block;
    cursor: pointer;
}
.custom-select .select-option:nth-child(odd),
.custom-select p + ul .select-option:nth-child(even),
.modal-dropdown .options .select-option:nth-child(odd),
.modal-dropdown .options p + ul .select-option:nth-child(even){
    background-color: #b0b0b0;
}
.custom-select p + ul .select-option:nth-child(odd),
.modal-dropdown .options p + ul .select-option:nth-child(odd){
    background-color: transparent;
}
.msg-form .form-label.bottom-textarea textarea{
    background-color: #addbaf;
    border: 4px solid var(--primary);
    height: 280px;
    padding: 20px;
    resize: none;
    color: #7a7a7a;
}
.custom-select .select-option label,
.modal-dropdown .options .select-option label{
    width: 100%;
    padding: 12px 16px 12px 54px;
    position: relative;
}
.custom-select .custom-check li,
.modal-dropdown .options .select-option{
    padding: 0;
}
.custom-check label input{
    display: none;
}
.custom-check label span::before{
    content: '';
    position: absolute;
    left: 16px;
    top: 11px;
    border: 2px solid var(--black);
    width: 24px;
    height: 24px;
    border-radius: 10px;
    display: inline-block;
    background-color: var(--white);
}
.custom-check label span::after{
    content: '';
    position: absolute;
    left: 16px;
    top: 11px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M2.61355 9.07928C2.21991 9.08038 1.83463 9.19291 1.50227 9.40385C1.16992 9.61479 0.904074 9.91551 0.735501 10.2712C0.566927 10.627 0.502512 11.0231 0.549707 11.4139C0.596901 11.8047 0.753778 12.1742 1.00219 12.4796L6.29768 18.9665C6.48649 19.201 6.72851 19.387 7.00365 19.5091C7.27878 19.6312 7.57908 19.686 7.87961 19.6687C8.52237 19.6342 9.10267 19.2904 9.47264 18.725L20.4727 1.00941C20.4745 1.00645 20.4764 1.00353 20.4783 1.00064C20.5815 0.842165 20.5481 0.528112 20.335 0.330819C20.2765 0.27664 20.2075 0.235016 20.1323 0.208509C20.0571 0.182003 19.9772 0.171175 19.8977 0.176694C19.8181 0.182212 19.7405 0.20396 19.6697 0.240597C19.5989 0.277235 19.5363 0.327986 19.4858 0.389726C19.4818 0.39458 19.4778 0.399361 19.4736 0.404069L8.37986 12.9383C8.33765 12.986 8.28638 13.0249 8.22903 13.0526C8.17168 13.0803 8.1094 13.0963 8.0458 13.0998C7.9822 13.1032 7.91854 13.094 7.85854 13.0726C7.79854 13.0512 7.74338 13.0182 7.69627 12.9753L4.01447 9.62483C3.63208 9.2743 3.13229 9.07967 2.61355 9.07928Z" fill="%231D8523"/></svg>');
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: 14px;
    opacity: 0;
}
.custom-check label input:checked + span::after{
    opacity: 1;
}
.msg-form .cbtn{
    text-transform: inherit;
    min-width: 160px;
}
.form-content{
    max-width: 570px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
}
.form-content p,
.form-content ul li{
    font-size: var(--body-font-size);
    font-weight: var(--fw-500);
    color: var(--black);
    margin: 0 0 5px;
    display: block;
}
.yellow-bg>h5,
.lyellow-bg>h5{
    color: var(--secondary) !important;
}
table.dataTable tbody tr{
    background-color: transparent !important;
}

.msg-form .select2 .selection{
    height: 100%;
    display: block;
}
.msg-form .select2 .select2-selection{
    border: none;
    min-height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.msg-form .select2 .select2-selection:focus-visible{
    outline: none;
}
.msg-form .select2-container--default.select2-container--focus .select2-selection--multiple{
    border: none;
}
.msg-form .select2 .select2-selection .select2-selection__rendered{
    padding: 0;
}
.select2-container{
    z-index: auto;
}
.select2-selection .select2-selection__arrow{
    display: none;
}
.select2-dropdown{
    background-color: var(--gray-color);
    border-radius: 0 0 28px 28px;
    border: none;
}
.select2-dropdown .select2-results__options li{
    font-size: var(--body-font-size);
    color: #1b1b1b;
    font-weight: var(--fw-500);
    padding: 12px 16px;
    display: block;
}
.select2-container--default .select2-results>.select2-results__options{
    border-radius: 0 0 28px 28px;
    overflow-x: hidden;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: #b0b0b0;
    color: #1b1b1b;
}
.msg-form .select2-container .select2-search--inline textarea.select2-search__field{
    min-height: auto;
    margin: 0;
    border-radius: 0;
}
.msg-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #b1b1b1;
    border: none;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}
.msg-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: #000;
    border-right-color: #918f8f;
    padding: 8px 6px;
    font-size: 16px;
}
.msg-form .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
    padding: 8px;
    display: inline-block;
}
.select2-search--dropdown .select2-search__field{
    padding: 10px;
}
.select2-search--dropdown .select2-search__field:focus{
    outline: none;
}
.msg-form .form-label>label+.select2{
    -webkit-appearance: none;
   -moz-appearance:none;
   appearance:none;
   padding-right: 17px;
}
#sub_admin{
    min-height: 54px;
    height: 0;
    overflow: hidden;
}
#sub_admin option{
    opacity: 0;
}

.right-content .modal{
    z-index: 1061;
}

/* Client Admin */
.common-table{
    margin-top: 20px;
}
.common-table strong{
    font-weight: var(--fw-600);
}
.common-table th,
.common-table td{
    font-size: var(--body-font-size);
    color: var(--black);
    font-weight: var(--fw-600);
    padding: 12px 20px !important;
    border: none;
    vertical-align: middle;
}
.common-table th{
    padding-bottom: 10px !important;
    position: relative;
    font-weight: var(--fw-600) !important;
}
.common-table td:last-child{
    text-transform: uppercase;
}
.common-table tbody td{
    background-color: var(--gray-color);
    font-weight: var(--fw-400);
}
.common-table tbody td:first-child{
    border-radius: 28px 0 0 28px;
    /* min-width: 50px;
    width: 50px; */
    padding-right: 0;
}
.common-table tbody td:first-child .custom-checkbox,
.common-table th:first-child .custom-checkbox{
    left: 20px;
    line-height: 0;
}
.common-table tbody td:first-child .custom-checkbox span,
.common-table tbody td:first-child .custom-checkbox span::after,
.common-table th:first-child .custom-checkbox span,
.common-table th:first-child .custom-checkbox span::after{
    width: 23px;
    height: 23px;
}
.common-table tbody td:first-child .custom-checkbox span::after,
.common-table th:first-child .custom-checkbox span::after{
    background-size: 13px;
}
.common-table tbody td:last-child{
    border-radius: 0 28px 28px 0;
}
.common-table tbody td .dash-btn{
    margin-right: 10px;
    margin-top: 8px;
    min-width: 90px;
    padding: 12px 10px;
}
.common-table tbody td .small-btn{
    font-size: 12px;
    padding: 7px 10px;
    min-width: 60px;
    margin: 3px;
}
.icon-btn{
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 10px;
    min-width: auto !important;
    padding: 0 !important;
    text-align: center;
}
.icon-btn span{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-btn img,
.icon-btn svg{
    height: 16px;
}
.common-table .custom-select{
    min-width: 135px;
    width: 135px;
}
.common-table .custom-dropdown{
    z-index: 5;
}
.common-table .custom-select .select-styled{
    background-color: #b0b0b0;
    border-radius: 28px;
    color: var(--secondary);
    font-size: 14px;
    background-size: 14px;
    padding: 13px 30px 13px 10px;
    min-width: 135px;
    width: 135px;
    background-position: calc(100% - 12px) center;
    z-index: 4;
    position: relative;
}
.common-table .custom-select .select-options{
    background-color: #cbcbcb;
    display: none;
    border-radius: 0 0 28px 28px;
    padding: 2px 0;
}
.common-table .custom-select li{
    background-color: transparent !important;
    font-size: 14px;
    text-align: center;
    font-weight: var(--fw-600);
    padding-top: 3px;
    padding-bottom: 3px;
}
.common-table .custom-select .select-options::before{
    border-right-color: #cbcbcb;
}
.common-table .custom-select .select-options::after{
    content: '';
    position: absolute;
    left: 0;
    top: -30px;
    z-index: -1;
    border: 30px solid transparent;
    border-left-color: #cbcbcb;
    border-right: none;
}
.short-table th:not(:first-child) span,
.reports_tab_data .short-table th:first-child span{
    position: relative;
}
.short-table th:not(:first-child,.short-hidden) span::after,
.reports_tab_data .short-table th:first-child span::after{
    content: '';
    position: absolute;
    right: -22px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M11.9991 13.09C11.8558 13.0901 11.7139 13.062 11.5815 13.0071C11.4492 12.9523 11.329 12.8718 11.2278 12.7703L0.318728 1.86127C-0.107545 1.435 -0.107545 0.744727 0.318728 0.318728C0.745 -0.107272 1.43527 -0.107545 1.86127 0.318728L11.9991 10.4565L22.1369 0.318728C22.5631 -0.107545 23.2534 -0.107545 23.6794 0.318728C24.1054 0.745 24.1057 1.43527 23.6794 1.86127L12.7703 12.7703C12.6692 12.8718 12.549 12.9523 12.4166 13.0071C12.2842 13.062 12.1423 13.0901 11.9991 13.09Z" fill="black"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.staff-img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}
.staff-img img{
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.img-prevarea.staff-img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
}
.user-image .staff-img{
    margin: 0 auto;
}
.user-image p{
    font-weight: var(--fw-600);
    color: var(--black);
    margin-bottom: 0;
    margin-top: 10px;
}
.user-image span{
    font-size: 14px;
    color: var(--dark-gray-color);
    font-weight: var(--fw-500);
    margin-bottom: 16px;
    display: inline-block;
}
.c-admin .dataTables_wrapper{
    position: inherit;
}
.dataTables_length{
    position: absolute;
    right: 400px;
    top: -78px;
}
.dataTables_length label{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    color: var(--dark-gray-color);
}
.dataTables_length select{
    background-color: #b0b0b0 !important;
    margin: 0 5px;
    min-height: auto;
    padding: 14px 15px !important;
    border-radius: 28px !important;
    appearance: none;
    -moz-appearance: none;
    min-width: 72px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M11.9991 13.09C11.8558 13.0901 11.7139 13.062 11.5815 13.0071C11.4492 12.9523 11.329 12.8718 11.2278 12.7703L0.318728 1.86127C-0.107545 1.435 -0.107545 0.744727 0.318728 0.318728C0.745 -0.107272 1.43527 -0.107545 1.86127 0.318728L11.9991 10.4565L22.1369 0.318728C22.5631 -0.107545 23.2534 -0.107545 23.6794 0.318728C24.1054 0.745 24.1057 1.43527 23.6794 1.86127L12.7703 12.7703C12.6692 12.8718 12.549 12.9523 12.4166 13.0071C12.2842 13.062 12.1423 13.0901 11.9991 13.09Z" fill="black"/></svg>');
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
    background-size: 13px;
    border: none !important;
}
.dataTables_filter{
    position: absolute;
    right: 30px;
    top: -78px;
}
.dataTables_filter>label{
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    color: var(--dark-gray-color);
}
.dataTables_filter input{
    background-color: var(--gray-color) !important;
    border-radius: 28px !important;
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    color: var(--dark-gray-color);
    border: none !important;
    outline: none;
    padding: 10px 15px !important;
    margin-left: 10px !important;
    width: 250px;
    min-height: 48px;
}
.dataTables_info{
    font-size: var(--body-font-size);
    color: var(--black) !important;
    font-weight: var(--fw-600);
    float: left;
    position: absolute;
    bottom: -42px;
    left: 0;
}
.dataTables_paginate{
    float: right;
    position: absolute;
    bottom: -50px;
    right: 0;
}
.dataTables_wrapper .dataTables_paginate>.paginate_button{
    font-size: 14px;
    color: var(--black) !important;
    font-weight: var(--fw-600);
    border: 1px solid var(--black) !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    margin: 0 6px !important;
    cursor: pointer !important;
}
body .dataTables_wrapper .dataTables_paginate>.paginate_button.disabled,
body .dataTables_wrapper .dataTables_paginate>.paginate_button.disabled:hover{
    cursor: default !important;
    color: var(--black) !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button{
    width: 36px;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--black) !important;
    border-radius: 10px !important;
    font-size: 14px;
    color: var(--black) !important;
    font-weight: var(--fw-600);
    display: inline-block !important;
    text-align: center !important;
    line-height: 36px;
    margin: 0 4px;
    cursor: pointer !important;
    background: transparent !important;
    padding: 0 !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:not(.disabled):focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:not(.disabled):focus{
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
}
.dataTables_wrapper .dataTables_paginate span .paginate_button.current:hover{
    color: var(--white) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible{
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#shift-table tr,
#shiftTable tr,
#absence-management-table tr
{
    position: relative;
}
#shift-table tbody td:not(:first-child),
#shiftTable tbody td:not(:first-child)
{
    padding-bottom: 48px !important;
}
.shift-btns{
    position: absolute;
    bottom: 0;
    display: flex;
    display: -webkit-flex;
    margin-bottom: 12px;
    background-color: var(--white);
    border-radius: 8px;
    padding: 0 5px;
}
.clock-btns{
    width: 28px;
    height: 28px;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}
.clock-btns.inactive-clockIn img,
.clock-btns.inactive-clockOut img{
    filter: brightness(0.5) saturate(0);
    -webkit-filter: brightness(0.5) saturate(0);
}
/* .clock-btns:hover{
    color: var(--black);
} */
/* .clock-btns:not(:last-child){
    margin-right: 8px;
} */
.clock-btns img{
    height: 16px;
}
#shift-table tbody .custom-checkbox,
#shiftTable tbody .custom-checkbox{
    transform: inherit;
    -webkit-transform: inherit;
    top: 22px;
}
#shift-table tbody .expand-row:not(.expand-row-last) td,
#shiftTable tbody .expand-row:not(.expand-row-last) td{
    padding-bottom: 4px !important;
    padding-top: 4px !important;
}
#shift-table tbody .expand-row.expand-row-last td,
#shiftTable tbody .expand-row.expand-row-last td{
    padding-bottom: 10px !important;
    padding-top: 2px !important;
}
.common-table tbody .expand-row:not(.expand-row-last) td .shift-btns{
    bottom: 50%;
    transform: translateY(calc(50% + 11px));
    -webkit-transform: translateY(calc(50% + 11px));
}
#shift-table tbody .expand-row-active + .expand-row td,
#shiftTable tbody .expand-row-active + .expand-row td{
    padding-top: 0 !important;
}
#shift-table tbody .expand-row-active + .expand-row td .refresh_title,
#shiftTable tbody .expand-row-active + .expand-row td .refresh_title,
#shift-table tbody .expand-row.expand-row-last td .refresh_title,
#shiftTable tbody .expand-row.expand-row-last td .refresh_title{
    top: calc(50% - 2px);
}
.shift_panel_table .reports-shift-table tbody .expand-row-active ~ .expand-row td .refresh_title{
    left: 6px;
}

.action-btns{
    display: flex;
    display: -webkit-flex;
}
.min-w-170px{
    min-width: 170px;
}
.min-w-150px{
    min-width: 150px;
}
.min-w-100px{
    min-width: 100px;
}
.common-table tbody .expand-row.expand-row-last td .shift-btns,
.common-table tbody .expand-row-active + .expand-row td .shift-btns{
    bottom: 50%;
    transform: translateY(calc(50% + 9px));
    -webkit-transform: translateY(calc(50% + 9px));
}

.common-table tbody .expand-row td{
    position: relative;
}
.common-table tbody .expand-row td::before{
    content: '';
    position: absolute;
    left: 0;
    top: -12px;
    width: 100%;
    height: 13px;
    background-color: var(--gray-color);
}
.common-table tbody .expand-row td:first-child{
    border-left: 1px solid var(--border-color);
    border-radius: 0;
}
.common-table tbody .expand-row td:first-child::after,
.common-table tbody .expand-row td:last-child::after{
    content: '';
    position: absolute;
    left: -1px;
    top: -12px;
    width: 1px;
    height: 13px;
    background-color: var(--border-color);
}
.common-table tbody .expand-row td:last-child::after{
    left: inherit;
    right: -1px;
}
.common-table tbody .expand-row td:last-child{
    border-right: 1px solid var(--border-color);
    border-radius: 0;
}
.common-table tbody .expand-row.expand-row-last td{
    border-bottom: 1px solid var(--border-color);
}
.common-table tbody .expand-row.expand-row-last td:first-child{
    border-radius: 0 0 0 28px;
    border-left: 1px solid var(--border-color);
}
.common-table tbody .expand-row.expand-row-last td:last-child{
    border-radius: 0 0 28px 0;
    border-right: 1px solid var(--border-color);
}
.common-table tbody .expand-row:not(.expand-row-last)::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    z-index: 1;
}
.common-table tbody .expand-row-active td{
    border-top: 1px solid var(--border-color);
    background-color: var(--light-gray-color);
}
.common-table tbody .expand-row-active td:first-child{
    border-radius: 28px 0 0 0;
    border-left: 1px solid var(--border-color);
}
.common-table tbody .expand-row-active td:last-child{
    border-radius: 0 28px 0 0;
    border-right: 1px solid var(--border-color);
}
.common-table tbody td .toggle-child{
    border: none;
    padding: 0;
    position: absolute;
    left: 14px;
    top: calc(50% - 18px);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.common-table tbody td .toggle-child:hover,
.common-table tbody td .toggle-child:focus{
    background-color: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.shift_panel_table.report_shift_panel .common-table tbody td .toggle-child{
    left: 6px;
}
/* .shift_panel_table .common-table th:nth-child(2),
.shift_panel_table .common-table tbody td:nth-child(2){
    padding: 0 !important;
    width: auto;
    min-width: auto !important;
    white-space: normal;
} */
.shift_panel_table table thead .sorting_desc{
    background-image: none !important;
}
.shift_panel_table table thead th:nth-child(2),
.shift_panel_table table tbody td:nth-child(2){
    padding-left: 44px !important;
    position: relative;
}
.shift_panel_table.report_shift_panel table thead th:nth-child(2), 
.shift_panel_table.report_shift_panel table tbody td:nth-child(2){
    padding-left: 36px !important;
}
.shift_panel_table table tbody td{
    position: relative;
}
.shift_panel_table table tbody td:first-child{
    vertical-align: top;
    min-width: 46px;
}
.shift_panel_table table tbody td .shift_numbers>span{
    margin-left: 36px;
    margin-top: 8px;
    min-width: 25px;
    min-height: 25px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #1F8522;
}
.shift_panel_table th span:not(.custom-checkbox span){
    /* display: flex; */
    position: relative;
}
.shift_panel_table th.sortable-header{
    cursor: pointer;
}
.shift_panel_table th span:not(.custom-checkbox span)::after{
    display: none;
}
.shift_panel_table th span .sort-icon{
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.report_shift_panel thead tr th:first-child,
.report_shift_panel tbody tr td:first-child{
    padding-right: 0 !important;
}



/* sunil css */
.upload-file,
.right-sidebox{
    flex: 0 0 calc(100% - 180px);
    -webkit-flex: 0 0 calc(100% - 180px);
    max-width: calc(100% - 180px);
    text-align: center;
    position: relative;
    background-color: var(--gray-color);
    padding: 17px;
    border-radius: 0 28px 28px 0;
}
.upload-file input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}
.upload-file h6 {
    font-size: var(--body-font-size);
    font-weight: 600;
    color: #7a7a7a;
}
.upload-file.download-file {
    padding: 10px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-rating ul{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    min-height: 100%;
    align-items: center;
    -webkit-align-items: center;
}
.form-rating ul li{
    display: block;
    position: relative;
    line-height: 18px;
}
/*.form-rating ul li .fill-star{
    position: absolute;
    left: 0;
    top: 0;
}*/
.form-rating ul li input{
    position: absolute;
    left: 0;
    top: 1px;
    opacity: 0;
    z-index: 1;
    width: 18px;
    height: 18px;
}
.form-rating ul li input:checked ~ .fill-star{
    opacity: 0;
}
.profile-edit .edit-btn{
    width: 34px;
    height: 34px;
    background-color: #35b3ee;
    border-radius: 50%;
    display: inline-block;
    line-height: 34px;
    text-align: center;
}
.profile-edit .edit-btn svg{
    height: 18px;
}
.profile-edit {
    position: absolute;
    left: calc(50% + 40px);
    top: 66px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    cursor: pointer;
}
.profile-edit input{
    width: 34px !important;
    height: 34px !important;
    top: 0 !important;
}


/* Profile page */
.img-prevarea{
    width: 80px;
    height: 80px;
    border: 2px solid #7a7a7a;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    background-color: var(--white);
}
.icon-size{
    width: 60px;
    height: 60px;
}
.img-prevarea img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.chose-btn{
    background-color: var(--secondary);
    color: var(--white);
    padding: 10px 20px;
    display: inline-block;
    border-radius: 10px;
    font-weight: var(--fw-500);
    margin-top: 12px;
    font-size: 14px;
}
.chose-btn:hover{
    background-color: var(--primary);
    color: var(--white);
}
.chose-btn-area input{
    position: absolute;
    top: 12px;
    width: 142px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    opacity: 0;
    cursor: pointer;
}

/* Add Staff Page Modal */

/* Developer Css */
.common-table{
    margin-top: 20px !important;
    border-spacing: 0px 12px !important;
    border-collapse: separate !important;
}
.short-table th:not(:first-child,.short-hidden) span::after{
   transform-origin: center;
}
.common-table.dataTable thead .sorting{
    background-image: none !important;
}
.common-table.dataTable thead .sorting.sorting_asc span::after{
    transform: rotate(-180deg) translateY(7px);
}
.common-table.dataTable thead .sorting span:after{
    display: none;
}
.common-table.dataTable thead .sorting_asc span:after,
.common-table.dataTable thead .sorting_desc span:after{
    display: block;
}
.common-table.dataTable thead th.pe-0{
    min-width: 50px;
    width: 50px;
}
.common-table.dataTable thead th.pe-0,
.common-table.dataTable tbody td.pe-0{
    padding-right: 0 !important;
}

.common-table.dataTable thead th,
.common-table.dataTable.no-footer{
    border: none;
}
.form-label .validation-error-block,
.invalid-feedback{
    color: #f00;
    font-size: 12px;
    display: block;
    margin-left: 8px;
    line-height: 14px;
    /*position: absolute;
    bottom: -14px;*/
    text-align: left !important;
}
.swal2-toast .swal2-close{
    display: block !important;
}
.password-area{
    position: relative;
}
.password-area input{
    padding-right: 42px !important;
}
.password-area .toggle-password{
    position: absolute;
    right: 0;
    top: 0px;
    padding: 17px;
    cursor: pointer;
    /*transform: translateY(-50%);
    -webkit-transform: translateY(-50%);*/
}
.password-area .toggle-password.close-eye svg + svg,
.password-area .toggle-password.open-eye svg:first-child{
    display: none;
}
.dataTables_processing{
    height: 50px !important;
    padding: 0 !important;
    top: 50vh !important;
    transform: translateY(-50%) !important;
    -webkit-transform: translateY(-50%) !important;
    position: fixed !important;
    z-index: 1;
}
.dataTables_processing img{
    width: 80px;
    margin-top: -15px;
}

.datatable_desription {
	white-space: normal !important;
}
.datatable_desription div,
.line-clamp-3>div{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
    word-break: break-word;
}
#client-detail-table .staff-img{
    width: 90px;
    height: 90px;
    border-radius: 0;
}
#client-detail-table .staff-img img{
    height: 100%;
    object-fit: cover;
}
#editSubAdminDetailModal .msg-form .select2 .select2-selection,
#editSubAdminDetailModal .msg-form label + .select2,
#addSubAdminDetailModal .msg-form .select2 .select2-selection,
#addSubAdminDetailModal .msg-form label + .select2,
#NnotificationSettings .msg-form .select2 .select2-selection,
#NnotificationSettings .msg-form label + .select2,
#addPlanModal .msg-form .select2 .select2-selection,
#addPlanModal .msg-form label + .select2{
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    padding-left: 40px;
    text-align: left;
}
#editSubAdminDetailModal .msg-form .select2-search--dropdown input,
#addSubAdminDetailModal .msg-form .select2-search--dropdown input,
#addPlanModal .msg-form .select2-search--dropdown input{
    padding-left: 10px;
}
#settingform .chose-btn-area input{
    top: 0;
}
#settingform .chose-btn-area .fileInputPdf{
    width: 124px;
}
#settingform .chose-btn>svg{
    height: 18px;
}

.loader-div{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
    z-index: 99999;
}
.loader-div>div{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.fa-star.checked {
    color: orange;
}

input.datepicker{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><g clip-path="url(%23clip0_124_2)"><path d="M17.6565 1.5625H16.719V0H15.1565V1.5625H4.844V0H3.2815V1.5625H2.344C1.0515 1.5625 0 2.614 0 3.9065V17.6565C0 18.949 1.0515 20.0005 2.344 20.0005H17.6565C18.949 20.0005 20.0005 18.949 20.0005 17.6565V3.9065C20.0005 2.614 18.949 1.5625 17.6565 1.5625ZM18.438 17.6565C18.438 18.0875 18.0875 18.438 17.6565 18.438H2.344C1.913 18.438 1.5625 18.0875 1.5625 17.6565V7.344H18.4375L18.438 17.6565ZM18.438 5.7815H1.5625V3.9065C1.5625 3.4755 1.913 3.125 2.344 3.125H3.2815V4.6875H4.844V3.125H15.1565V4.6875H16.719V3.125H17.6565C18.0875 3.125 18.438 3.4755 18.438 3.9065V5.7815Z" fill="%23444444"/><path d="M2.96924 8.98438H4.53174V10.5469H2.96924V8.98438ZM6.09424 8.98438H7.65674V10.5469H6.09424V8.98438ZM9.21924 8.98438H10.7817V10.5469H9.21924V8.98438ZM12.3442 8.98438H13.9067V10.5469H12.3442V8.98438ZM15.4692 8.98438H17.0317V10.5469H15.4692V8.98438ZM2.96924 12.1094H4.53174V13.6719H2.96924V12.1094ZM6.09424 12.1094H7.65674V13.6719H6.09424V12.1094ZM9.21924 12.1094H10.7817V13.6719H9.21924V12.1094ZM12.3442 12.1094H13.9067V13.6719H12.3442V12.1094ZM2.96924 15.2344H4.53174V16.7969H2.96924V15.2344ZM6.09424 15.2344H7.65674V16.7969H6.09424V15.2344ZM9.21924 15.2344H10.7817V16.7969H9.21924V15.2344ZM12.3442 15.2344H13.9067V16.7969H12.3442V15.2344ZM15.4692 12.1094H17.0317V13.6719H15.4692V12.1094Z" fill="%23444444"/></g><defs><clipPath id="clip0_124_2"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
    background-size: 18px;
    background-position: calc(100% - 20px) center;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
}
input.timepicker{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none"><path d="M10.333 0.333008C8.3552 0.333008 6.4218 0.919497 4.77731 2.01831C3.13282 3.11712 1.85109 4.67891 1.09422 6.50617C0.337341 8.33343 0.139307 10.3441 0.525159 12.2839C0.911012 14.2237 1.86342 16.0055 3.26194 17.4041C4.66047 18.8026 6.4423 19.755 8.38211 20.1409C10.3219 20.5267 12.3326 20.3287 14.1598 19.5718C15.9871 18.8149 17.5489 17.5332 18.6477 15.8887C19.7465 14.2442 20.333 12.3108 20.333 10.333C20.3299 7.6818 19.2753 5.14008 17.4006 3.26539C15.5259 1.39071 12.9842 0.336136 10.333 0.333008ZM10.333 18.5148C8.7148 18.5148 7.13293 18.035 5.78744 17.1359C4.44194 16.2369 3.39326 14.9591 2.774 13.4641C2.15474 11.969 1.99271 10.3239 2.3084 8.73681C2.6241 7.1497 3.40334 5.69183 4.54759 4.54759C5.69184 3.40334 7.1497 2.6241 8.73682 2.3084C10.3239 1.9927 11.969 2.15473 13.4641 2.77399C14.9591 3.39325 16.2369 4.44194 17.1359 5.78743C18.035 7.13292 18.5148 8.71479 18.5148 10.333C18.5122 12.5021 17.6493 14.5817 16.1155 16.1155C14.5817 17.6493 12.5022 18.5122 10.333 18.5148Z" fill="%23444444"/><path d="M11.242 9.957V4.87882C11.242 4.63771 11.1462 4.40648 10.9757 4.23599C10.8053 4.06551 10.574 3.96973 10.3329 3.96973C10.0918 3.96973 9.86058 4.06551 9.69009 4.23599C9.51961 4.40648 9.42383 4.63771 9.42383 4.87882V10.3334C9.42388 10.5744 9.51969 10.8056 9.69019 10.9761L12.4175 13.7034C12.5889 13.869 12.8186 13.9606 13.0569 13.9585C13.2953 13.9564 13.5233 13.8608 13.6918 13.6923C13.8604 13.5237 13.956 13.2957 13.9581 13.0574C13.9601 12.819 13.8685 12.5894 13.7029 12.4179L11.242 9.957Z" fill="%23444444"/></svg>');
    background-size: 18px;
    background-position: calc(100% - 20px) center;
    background-repeat: no-repeat;
}
/*Datepicker css*/
.ui-widget.ui-widget-content{
    border: none;
    background-color: var(--gray-color);
    font-family: var(--font-Poppins);
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.ui-widget-header{
    border: none;
    background-color: transparent;
}
.ui-datepicker-calendar thead th{
    font-weight: 400;
}
.ui-datepicker-calendar tbody td .ui-state-default{
    text-align: center;
    background-color: transparent;
    border: none;
    color: #000;
    padding: 6px;
    border-radius: 50%;
}
.ui-datepicker-calendar .ui-state-disabled,
.ui-widget-content .ui-datepicker-calendar .ui-state-disabled{
    opacity: 0.55;
}
.ui-widget-content .ui-datepicker-calendar .ui-state-active{
    background-color: var(--primary);
    color: var(--white);
}
.ui-datepicker-calendar .ui-state-highlight,
.ui-widget-content .ui-datepicker-calendar .ui-state-highlight{
    background-color: var(--black);
    color: var(--white);
    border: none;
}
li.ui-timepicker-selected,
.ui-timepicker-list .ui-timepicker-selected:hover{
    background-color: var(--primary) !important;
    color: var(--white) !important;
}
.ui-timepicker-list li:hover {
    background-color: var(--black) !important;
    color: var(--white) !important;
}
.ui-timepicker-wrapper{
    width: 280px;
    border: none;
    background-color: var(--gray-color);
    font-family: var(--font-Poppins);
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.ui-timepicker-wrapper .ui-timepicker-list li{
    padding: 8px 20px;
    text-align: center;
}
.ui-timepicker-wrapper::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 6px;
    background-color: transparent;
}
.ui-timepicker-wrapper::-webkit-scrollbar{
    width: 6px;
    background-color: transparent;
}
.ui-timepicker-wrapper::-webkit-scrollbar-thumb{
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    background-color: #cbcbcb;
}
.ui-datepicker-title .ui-datepicker-month,
.ui-datepicker-title .ui-datepicker-year{
    min-height: auto;
    padding: 5px 10px;
}
.ui-datepicker-buttonpane .ui-state-default{
    background-color: var(--black);
    color: var(--white);
    border-radius: 5px;
    opacity: 1;
    font-weight: 400;
}
.ui-datepicker-buttonpane .ui-state-default.ui-datepicker-current{
    background-color: var(--primary);
    color: var(--white);
}
.msg-form .options .custom-check{
    max-height: 170px;
    overflow-y: auto;
}
.msg-form .options .custom-check::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	border-radius: 10px;
	background-color: transparent;
}
.msg-form .options .custom-check::-webkit-scrollbar{
	width: 12px;
	background-color: transparent;
}
.msg-form .options .custom-check::-webkit-scrollbar-thumb{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	background-color: #cdcdcd;
}
.custom-dropdown{
    z-index: 1;
}
.custom-dropdown::before{
    content: '';
    position: absolute;
    right: 0;
    top: 20px;
    z-index: -1;
    border: 30px solid transparent;
    border-right-color: #cbcbcb;
    border-left: none;
    border-bottom: none;
}
.custom-dropdown::after{
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    z-index: -1;
    border: 30px solid transparent;
    border-left-color: #cbcbcb;
    border-right: none;
    border-bottom: none;
}
/*#client-admin-table .select-styled{
    z-index: 0 !important;
}
#client-admin-table .select-options{
    z-index: auto !important;
}*/
.custom-select.custom-dropdown:after,
.custom-select.custom-dropdown:before{
    z-index: 0;
}
.custom-dropdown .select-options::before,
.custom-dropdown .select-options::after{
    display: none;
}
th.datatable_desription{
    min-width: 180px;
    width: 180px;
}
.newAddLocation{
    font-size: var(--body-font-size);
    color: #1b1b1b;
    font-weight: var(--fw-500);
    padding: 12px 16px;
    display: block;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #c5c5c5;
    /* border-radius: 0 0 28px 28px; */
}
/* .select2radius-none .select2-container--default .select2-results > .select2-results__options{
    border-radius: 0;
} */
.newAddLocation:hover,
.select2radius-none .select2-container--default .select2-results > .select2-results__options .select2-results__option:hover{
    background-color: #b0b0b0;
    color: #1b1b1b;
}
.select2radius-none .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color: transparent;
}

.clear-btn {
    position: absolute;
    top: 15px;
    right: -55px;
    z-index: 9999;
    opacity: 0;
}
.header-inner ul>li>a.show .clear-btn{
    opacity: 1;
}

.clear-btn .small-btn {
    border: 1px solid #ee4242;
    background-color: #ee4242;
    border-radius: 15px;
    font-size: 12px;
    color: #ffffff;
    padding: 0 8px;
}

.n-delete-btn {
    position: relative;
    z-index: 999999;
    cursor: pointer;
}

.n-delete-btn .icon-btn {
    width: fit-content;
    padding: 8px 10px !important;
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    z-index: 999999;
}

.n-delete-btn .icon-btn span {
    gap: 4px;
}

.notify-read::before{
    background-color: #aab0b5;
}
/* .notificationlist  .innerbody{
    font-size: var(--body-font-size);
    color: var(--dark-gray-color);
    font-weight: var(--fw-600);
    padding: 15px 22px;
    display: inline-block;
    position: relative;
    border-radius: 28px;
    transition: all 350ms ease-in-out;
} */
.notificationlist .discription {
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 30px;
    position: relative;
}

.notificationlist .dropdown {
    position: absolute;
    right: 15px;
    z-index: 11;
    display: block;
    width: 30px;
    height: 30px;
    top: 30px;
    z-index: 999999;
}
.notificationlist .dropdown svg {
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.notificationlist.active .discription {
    white-space: wrap;
    overflow: unset;
    text-overflow: unset;
}
.notificationlist.active .dropdown {
    transform: rotateX(180deg);
}


/* CHatBox Css */
   /* Custom Styles */
.overflow-y-auto {
    overflow-y: auto;
}
.chatboxGroup {
    height: calc(100vh - 270px);
    /* height: 100%; */
    min-height: 400px;
}
.chatboxGroup .sidebar, .chatboxGroup .chatcard {
    background-color: var(--white);
    border: none;
    border-radius: 30px;
}
.chatboxGroup .list-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chatboxGroup .list-group .list-group-item.active,.chatboxGroup .list-group .list-group-item:hover {
    background-color: var(--black);
    border-color: var(--primary);
}
.chatboxGroup .list-group .list-group-item .content {
    transition: var(--ease-transition);
    margin: 0px;
    width: calc(100% - 30px);
}
.msg-type{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
    margin-top: 10px;
    min-height: 25px;
}
.msg-type .message_sidebar_content{
    font-size: 14px;
}
.chatmsg-number{
    min-width: 28px;
    height: 28px;
    background-color: var(--primary);
    border-radius: 50%;
    font-size: 12px;
    padding: 4px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    transform: translateY(-4px);
    -webkit-transform: translateY(-4px);
    color: #fff;
}
.chatboxGroup .userporfile .chatmsg-number{
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    transform: unset;
}

.chatboxGroup .list-group .list-group-item h5.content{
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    font-size: 16px;
    width: 100%;
    font-weight: 500;
}
.chatboxGroup .list-group .list-group-item .content .time {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    padding-left: 15px;
    margin-left: auto;
}
.chatboxGroup .list-group .list-group-item.active .content,.chatboxGroup .list-group .list-group-item:hover .content {
    color: var(--white);
}
.chatboxGroup .list-group .list-group-item{
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--ease-transition);
    border: 2px solid var(--light-gray-color);
}
/*  */
.chatboxGroup .groupItem.check-wrap>li{
    flex: 1 1 0;
    max-width: calc(100% - 34px);
    width: 100%;
    display: block;
}
.chatboxGroup .userporfile{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.chatboxGroup .userporfile .userimage{
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    position: relative;
    border: 2px solid var(--black);
    padding: 5px;
}
.chatboxGroup .groupItem:hover .userporfile .userimage,
.chatboxGroup .groupItem.active .userporfile .userimage{
    border-color: var(--white);
}
.chatboxGroup .userporfile .userimage::before{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 2px;
    right: 2px;
    /* background-color: var(--dark-gray-color); */
}
.chatboxGroup .userporfile.activeAccount .userimage::before{
    background-color: var(--tertiary);
}
.chatboxGroup .userporfile .userimage .userpic{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.chatboxGroup .sidebar .userporfile.active .userimage .userpic.default_icon,
.chatboxGroup .sidebar .userporfile:hover .userimage .userpic.default_icon{
    filter: invert(1);
    -webkit-filter: invert(1);
}

.chatboxGroup .userporfile .activeuser{
    font-size: 14px;
    line-height: 1;
    color: var(--dark-gray-color);
}
.chatboxGroup .list-group .list-group-item .useraccount{
    width: calc(100% - 60px);
}
.chatboxGroup .chat-panel .userporfile{
    width: auto;
}
.chatboxGroup .usersetting .dropdown .dropdown-menu{
    min-width: 180px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.chatboxGroup .usersetting .editbtn{
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    min-width: unset;
    background-color: transparent;
}
.chatboxGroup .usersetting .dropdown-item{
    padding: 7px 14px;
    min-width: unset;
}
.chatboxGroup .usersetting .dropdown-item:active{
    background-color: #000;
}
.chatboxGroup .usersetting .editbtn .editicon{
    width: 100%;
    height: 100%;
}
.msg_subject p{
    margin: 0;
    font-size: 12px;
}
.msg_subject p span{
    color: var(--primary);
}
.chatboxGroup .list-group .list-group-item:hover .msg_subject p,
.chatboxGroup .list-group .list-group-item:hover .msg_subject p span,
.chatboxGroup .list-group .list-group-item.active .msg_subject p,
.chatboxGroup .list-group .list-group-item.active .msg_subject p span{
    color: var(--white);
}
/*  */

.chat-panel {
    overflow-y: auto;
}

.chatboxGroup .chat-header {
    background-color: var(--gray-color);
    color: #fff;
    padding: 10px;
}

.chatboxGroup textarea.form-control{
    height: 48px;
    min-height: 48px;
    font-size: var(--heading-6);
    font-weight: 500;
    padding: 11px 15px;
    resize: none;
    border: 1px solid var(--gray-color);
    border-radius: 25px;
    max-height: 100px;
}
.chatboxGroup textarea.form-control:focus{
    border-color: var(--primary);
}

.chatboxGroup .message-container {
    padding-bottom: 10px;
    padding-top: 40px;
    overflow: auto;
    height: 100%;
}
.chatboxGroup .message {
    margin-bottom: 20px;
    max-width: 60%;
}
.chatboxGroup .message .message-content {
    padding: 12px;
    border-radius: 0px 14px 14px 14px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    background-color: #e9ecef;
    width: fit-content;
    position: relative;
    word-break: break-all;
}
.chatboxGroup .message .message-content:not(:last-child){
    margin-bottom: 23px;
}
.chatboxGroup .message .message-content .message_time {
    position: absolute;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    bottom: 100%;
    color: var(--dark-gray-color);
    padding-bottom: 4px;
    left: 0;
}
.chatboxGroup .message.outgoing .message-content .message_time{
    color: var(--dark-gray-color);
    left: unset;
    right: 0;
}
.chatboxGroup .message.outgoing {
    margin-left: auto;
}
.chatboxGroup .message.outgoing .message-content {
    border-radius: 14px 14px 0px 14px;
    background-color: var(--primary);
    color: var(--white);
    margin-left: auto;
}

.chatboxGroup .message .dropdown .dropdown-menu{
    transform: unset !important;
    inset: auto 0 0 auto !important;
    padding: 2px 0px;
    margin-right: 11px !important;
    margin-bottom: 1px !important;
    width: fit-content;
    min-width: unset;
}
.chatboxGroup .message .dropdown .dropdown-menu .dropdown-item{
    padding-inline: 8px;
    line-height: 1;
}
.chatboxGroup .message.incoming .dropdown .dropdown-menu{
    inset: 0px auto auto 10px !important;
    margin-top: -12px !important;
}

.chatboxGroup .message-input {
    background-color: var(--gray-color);
}

.chatboxGroup .file-label {
    cursor: pointer;
}

.chatboxGroup .addimg{
    max-height: 150px;
    max-width: 150px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dark-gray-color);
    transition: var(--ease-transition);
}
.chatboxGroup .addimg .closeBtn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: var(--ease-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.chatboxGroup .addimg .closeBtn:hover{
    background-color: #0000001a;
}

.chatboxGroup .add_btn {
    min-width: unset;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.chatboxGroup .add_btn svg, .chatboxGroup .close-btn svg {
    height: 100%;
    width: 100%;
}
.chatboxGroup .close-btn {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: var(--ease-transition);
    background-color: var(--white);
}
.chatboxGroup .close-btn:hover{
    background-color: #ffdfdf;
}

.chatboxGroup .searchbar {
    position: relative;
    height: 48px;
}
.chatboxGroup .searchbar input {
    min-height: unset;
    padding-right: 63px;
    background: var(--gray-color) !important;
    z-index: 0 !important;
}
.chatboxGroup .searchbar .btn {
    height: 48px;
    width: 48px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.chatboxGroup .datemention{
    text-align: center;
    padding: 0px 0px 30px;
    position: relative;
}
.chatboxGroup .datemention span{
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: var(--dark-gray-color);
    background-color: var(--white);
    padding: 4px 8px;
    position: relative;
    z-index: 1;
}

.chatboxGroup .datemention::before{
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 10px;
    background-color: var(--gray-color);
}

.chatboxGroup textarea.form-control::-webkit-scrollbar {
    width: 0px;
    height: 0px
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px
}
::-webkit-scrollbar-button {
    background: #ccc;
    height: 0px;
    width: 0px;
}
::-webkit-scrollbar-track-piece {
    background: #eee
}
::-webkit-scrollbar-thumb {
    background: #ccc
}


.chat-header-right{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    gap: 8px;
}
.chat-header-subject{
    background-color: var(--light-gray-color);
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 6px 12px;
    color: var(--body-text-color);
}
.chat-header-subject span{
    color: var(--primary);
}
.chat-header-right .options_btn{
    background-color: transparent;
    border: none;
    padding: 0;
}
/* 27-04-2024 */
.add-msg-subject .msg-form .form-label>label{
    flex: 0 0 auto !important;
    -webkit-flex: 0 0 auto !important;
}
.add-msg-subject .msg-form .form-label>*{
    flex: 1 !important;
    -webkit-flex: 1 !important;
    max-width: none !important;
}
.add-msg-subject .msg-form .form-label .cbtn{
    min-width: 110px;
    flex: 0 1 auto !important;
    -webkit-flex: 0 1 auto !important;
    margin-left: 10px;
}
.add-msg-subject .table-responsive{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.welcome-screen{
    padding: 40px 30px;
}
.welcome-screen .userporfile{
    max-width: fit-content;
    margin: 0 auto;
}
.welcome-screen .userimage{
    border: 1px solid #e6e6e6;
    width: 70px !important;
    height: 70px !important;
}
.welcome-screen .useraccount h3{
    font-weight: 300;
    font-size: 24px;
    letter-spacing: 1px;
    line-height: 22px;
    margin-bottom: 5px;
}
.screen-loader{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.s-loaderinner{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    min-height: 100%;
}
.sidebar-loader{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.sidebar-loader img{
    width: 60px;
}

/* Responsive Styles */
/* @media (max-width: 992px) {
    .sidebar {
        height: auto;
        border-right: none;
    }

    .chat-panel {
        height: auto;
    }

    .message {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .sidebar {
        padding: 20px;
    }

    .message-input {
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .sidebar {
        padding: 10px;
    }

    .message-input {
        padding: 5px;
    }

    .message {
        max-width: 100%;
    }
} */

.blue-highlight{
  color:#0d6efd;
}

/* 22-05-2024 css */

#client-admin-table_wrapper .common-table, #staff-table_wrapper .common-table {
    padding-bottom: 40px;
}


/* ---06-06-2024-- */
.modal, div:where(.swal2-container) {
    z-index: 9999 !important;
}
#pdf-canvas-container {
    border: 4px solid #575757;
}
#pdf-canvas-container canvas {
    width: 100%;
}

.location-group-modal .modal-body {
    position: relative;
    padding-bottom: 64px;
}
.location-group-modal .modal-body .footer-btn {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}
.file-uploaded{
    position: relative;
}
.file-uploaded:after{
    content: '';
    position: absolute;
    right: -30px;
    top: 7px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M2.61355 9.07928C2.21991 9.08038 1.83463 9.19291 1.50227 9.40385C1.16992 9.61479 0.904074 9.91551 0.735501 10.2712C0.566927 10.627 0.502512 11.0231 0.549707 11.4139C0.596901 11.8047 0.753778 12.1742 1.00219 12.4796L6.29768 18.9665C6.48649 19.201 6.72851 19.387 7.00365 19.5091C7.27878 19.6312 7.57908 19.686 7.87961 19.6687C8.52237 19.6342 9.10267 19.2904 9.47264 18.725L20.4727 1.00941C20.4745 1.00645 20.4764 1.00353 20.4783 1.00064C20.5815 0.842165 20.5481 0.528112 20.335 0.330819C20.2765 0.27664 20.2075 0.235016 20.1323 0.208509C20.0571 0.182003 19.9772 0.171175 19.8977 0.176694C19.8181 0.182212 19.7405 0.20396 19.6697 0.240597C19.5989 0.277235 19.5363 0.327986 19.4858 0.389726C19.4818 0.39458 19.4778 0.399361 19.4736 0.404069L8.37986 12.9383C8.33765 12.986 8.28638 13.0249 8.22903 13.0526C8.17168 13.0803 8.1094 13.0963 8.0458 13.0998C7.9822 13.1032 7.91854 13.094 7.85854 13.0726C7.79854 13.0512 7.74338 13.0182 7.69627 12.9753L4.01447 9.62483C3.63208 9.2743 3.13229 9.07967 2.61355 9.07928Z" fill="%231D8523"/></svg>');
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    background-position: center;
    background-size: 13px;
    background-color: var(--white);
    border-radius: 10px;
}

/* New Modal design */
.modal-full{
    max-width: 1880px;
    padding-left: 10px;
    padding-right: 10px;
}
.new-common-modal .msg-form>.row{
    /* margin-bottom: 32px; */
    margin-left: -8px;
    margin-right: -8px;
    position: relative;
}
.new-common-modal .clone_row>.inner_col:not(:last-child){
    width: 20%;
}
/* .new-common-modal .clone_row>.inner_col:nth-last-of-type(2){
    width: 24%;
} */
.new-common-modal .msg-form>#occupation-quantity{
    margin-top: 32px;
}
.new-common-modal .msg-form>#occupation-quantity::before{
    content: '';
    position: absolute;
    left: 8px;
    top: -16px;
    width: calc(100% - 16px);
    height: 1px;
    background-color: var(--light-gray-color);
}
#clone-showing-data .clone_row{
    margin-left: -8px;
    margin-right: -8px;
}
.new-common-modal .msg-form>.row>*,
#clone-showing-data .clone_row>*{
    padding-left: 8px;
    padding-right: 8px;
}
.new-common-modal .msg-form .form-label{
    display: flex;
    display: -webkit-flex;
    position: relative;
    margin-bottom: 0;
}
.new-common-modal .msg-form .form-label .error_select{
    position: absolute;
    left: 0;
    bottom: -4px;
}
.new-common-modal .msg-form .form-label>label{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    max-width: max-content;
    font-size: var(--body-font-size);
    color: var(--black);
    font-weight: var(--fw-600);
    background-color: #cbcbcb;
    border-radius: 28px 0 0 28px;
    padding: 17px 8px 17px 15px;
    text-align: right;
}
.new-common-modal .msg-form .form-label>input:not(input[type="submit"]){
    min-height: 54px;
    border-radius: 0 28px 28px 0;
    color: #7a7a7a;
    padding-left: 10px;
}
.new-common-modal .msg-form .form-label .select2.select2-container{
    flex: 1;
    -webkit-flex: 1;
    max-width: none;
    width: 100% !important;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.new-common-modal .msg-form .recurring-field .form-label .select2.select2-container{
    white-space: normal;
    text-overflow: inherit;
    overflow: inherit;
}
.new-common-modal .msg-form .form-label .select2 .select2-selection{
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    text-align: left;
    padding-left: 10px;
}
.new-common-modal .clone_row{
    padding-right: 66px;
    position: relative;
}
.new-common-modal .clone_row + .clone_row{
    margin-top: 10px;
}
.new-common-modal .clone_row .AddOptionBtn2{
    position: absolute;
    right: 0;
    top: 50%;
    width: auto;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.clone_row.recurring-field{
    padding-right: 0 !important;
}
.clone_row.recurring-field>.inner_col{
    flex: 1;
    -webkit-flex: 1;
    width: auto;
}
/* #clone-showing-data .clone_row:first-child{
    margin-top: -16px;
}
#clone-showing-data .clone_row{
    margin-bottom: 18px;
}
#clone-showing-data .clone_row:last-child{
    margin-bottom: 32px;
} */
.AddOptionBtn2>a{
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-align: center;
    border-radius: 28px;
    display: block;
}
.AddOptionBtn2>a.addicon{
    background-color: var(--primary);
}
.AddOptionBtn2>a.remove-option{
    background-color: #ee4242;
}
.new-common-modal .msg-form .form-label>input.datepicker,
.new-common-modal .msg-form .form-label>input.timepicker{
    background-position: calc(100% - 12px) center;
    background-size: 15px;
}
.new-common-modal .clone_row .error:not(#clone-showing-data .clone_row .error), 
.modal-body .msg-form .form-label + .validation-error-block{
    font-size: 14px;
    /* margin-top: -14px; */
    display: block;
}
#clone-showing-data + .validation-error-block{
    font-size: 14px;
    transform: translateY(-22px);
    display: block;
    color: #dc3545;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
}
input[type=number]{
    -moz-appearance: textfield;
}
.dash_toggle input{
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 30px;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}
.dash_toggle span{
    width: 64px;
    height: 30px;
    display: inline-block;
    background-color: var(--white);
    border: 1px solid var(--dark-gray-color);
    border-radius: 40px;
    margin-top: 5px;
    position: relative;
    transition: all 350ms ease-in-out;
}
.dash_toggle input:checked + span{
    background-color: var(--primary);
    border-color: var(--primary);
}
.dash_toggle span::after{
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--red-color);
    transition: all 350ms ease-in-out;
}
.dash_toggle input:checked + span::after{
    left: 36px;
    background-color: var(--white);
}
.toggle-onoff span::before{
    content: 'Off';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    color: var(--dark-gray-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 350ms ease-in-out;
}
.toggle-onoff input:checked + span::before{
    content: 'On';
    right: 32px;
    color: var(--white);
}
.toggle-yesno span::before {
    content: 'No';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark-gray-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 350ms ease-in-out;
}

.toggle-yesno input:checked + span::before {
    content: 'Yes';
    right: 28px;
    color: var(--white);
}

.chathide {
    display: none;
}
.inner_center_title{
    font-size: var(--body-font-size);
    color: var(--black);
    font-weight: var(--fw-600);
    display: block;
    padding-bottom: 12px;
}

.rate-row{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    gap: 10px;
}
.rate-row>*{
    flex: auto;
    -webkit-flex: auto;
}
.rate-row + .rate-row{
    margin-top: 16px;
}
.rate-row .remove-rate{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    -webkit-flex: 0 0 32px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
#rates-wrapper .add-rate{
    background-color: transparent;
    color: var(--primary);
    padding: 4px;
    font-weight: 500;
    margin: 16px auto 30px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    gap: 8px;
    border: none;
}
#rates-wrapper .add-rate:focus{
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Reports Page */
.common_pills{
    display: flex;
    display: -webkit-flex;
    gap: 10px;
}
.common_pills,
.above_area{
    background-color: var(--white);
    border-radius: 40px;
    padding: 10px;
    margin-top: 20px;
    padding-right: 200px;
}
.common_pills .scroll_hide_block{
    border-radius: 50px;
    overflow: hidden;
    /* background-color: var(--gray-color); */
}
.common_pills .scroll_hide_block ul{
    margin-bottom: -4px;
}
.common_pills>ul,
.common_pills .scroll_hide_block ul{
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    border-radius: 50px;
}
.common_pills>ul li,
.common_pills .scroll_hide_block ul li{
    background-color: var(--gray-color);
    padding: 2px 0;
}
.common_pills li:first-child,
.common_pills .scroll_hide_block ul li:first-child{
    border-radius: 50px 0 0 50px;
    padding-left: 2px;
}
.common_pills li:last-child,
.common_pills .scroll_hide_block ul li:last-child{
    border-radius: 0 50px 50px 0;
    padding-right: 2px;
}
.common_pills li .nav-link{
    border-radius: 50px;
    color: var(--body-text-color);
    font-weight: 500;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 24px;
}
.common_pills li .nav-link.active{
    font-weight: 700;
    background-color: #111111;
    box-shadow: 0 4px 8px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.06);
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.03), 0 8px 32px rgba(0,0,0,0.06);
}
.reports_tab_data .dataTables_length{
    right: 10px;
    top: 10px;
}
.reports_tab_data .common-table{
    padding-bottom: 0 !important;
    width: 100% !important;
}
.reports_tab_data .dataTables_filter{
    top: -93px;
}


/* Dashboard Page */
.small_cards_area,
.process_area,
.graph_area{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.process_area,
.graph_area{
    grid-template-columns: repeat(2, 1fr);
}
.card_box{
    background-color: var(--white);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.1);
}
.card_top{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.card_top h6{
    font-weight: 400;
}
.card_top select{
    background-color: #fff;
    border: 1px solid var(--light-gray-color);
    border-radius: 8px;
    padding: 5px 8px;
    padding-right: 36px;
    min-height: 32px;
    height: 32px;
    appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    color: var(--body-text-color);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M2.12499 0.999989L6.00499 4.87999L9.88499 0.999989C10.275 0.609989 10.905 0.609989 11.295 0.999989C11.685 1.38999 11.685 2.01999 11.295 2.40999L6.70499 6.99999C6.31499 7.38999 5.68499 7.38999 5.29499 6.99999L0.704992 2.40999C0.517739 2.22316 0.412506 1.96951 0.412506 1.70499C0.412506 1.44047 0.517739 1.18682 0.704992 0.999989C1.09499 0.619989 1.73499 0.609989 2.12499 0.999989V0.999989Z" fill="%23585858"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    width: auto;
}
.data_number{
    color: #111111;
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
    display: inline-block;
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
.card_data{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    align-items: center;
    -webkit-align-items: center;
}
.half_card_box .card_top{
    position: absolute;
    top: 20px;
}
.half_card_box canvas{
    width: 56% !important;
    height: auto !important;
    margin: 0 auto !important;
    aspect-ratio: 1 / 0.6;
}
/* .card_data .small_chart_area{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
} */
.card_data canvas{
    height: 50px !important;
    width: 100% !important;
}
.half_card_box{
    padding-bottom: 40px;
    padding-top: 40px;
    position: relative;
}
.half_card_box + .half_card_box{
    margin-top: 24px;
}
.chart_info{
    margin-bottom: 20px;
}
.chart_info .chart_total_price{
    color: var(--black);
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
}
.chart_lavel{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    gap: 5px;
}
.lavel_direction{
    width: 18px;
    height: 18px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    border-radius: 50%;
}
.chart_lavel.up{
    color: var(--primary);
}
.chart_lavel.up .lavel_direction{
    background-color: #D1FAE5;
}
.chart_lavel.up .lavel_direction svg path{
    fill: #1F8522;
}
.chart_lavel.down{
    color: #FD2254;
}
.chart_lavel.down .lavel_direction{
    background-color: #FFEFF3;
}
.chart_lavel.down .lavel_direction svg path{
    fill: #FD2254;
}
.in_chart_data{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.in_chart_data>span{
    color: var(--black);
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}
.in_chart_data p{
    font-size: 16px;
    line-height: 24px;
    color: var(--black);
    margin: 0;
}
.yellow_half{
    color: #FFCD71;
}
.red_half{
    color: #FD2254;
}
#payrollChart,
#revenueChart{
  max-height: 265px;
}
.map_block {
    height: 376px;
    border-radius: 8px;
    overflow: hidden;
}
.map_block .gm-style .gm-style-iw .gm-style-iw-chr .gm-style-iw-ch{
    display: none;
}
.map_block .gm-style .gm-style-iw .gm-style-iw-chr .gm-style-iw-ch + button{
    position: absolute !important;
    right: 0;
    top: 0;
    width: auto !important;
    height: auto !important;
}
.map_block .gm-style .gm-style-iw .gm-style-iw-chr .gm-style-iw-ch + button span{
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
}
.map_block .gm-style .gm-style-iw .gm-style-iw-d{
    padding-top: 10px;
}
gmp-place-autocomplete::part(input) {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px; /* optional */
  padding: 8px;    /* optional */
}

/* Hide search (magnifying glass) icon */
gmp-place-autocomplete::part(search-icon) {
  display: none !important;
}

/* Hide clear (X) button */
gmp-place-autocomplete::part(clear-button) {
  display: none !important;
}
.custom-marker {
    display: flex;
    align-items: center;
    gap: 6px;
}
.marker-dot {
    width: 30px;
    height: 37px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="37" viewBox="0 0 30 37" fill="none"><g filter="url(%23filter0_d_5097_4196)"><path d="M15 6C17.3869 6 19.6761 6.94821 21.364 8.63604C23.0518 10.3239 24 12.6131 24 15C24 18.074 22.324 20.59 20.558 22.395C19.6757 23.2871 18.7129 24.0958 17.682 24.811L17.256 25.101L17.056 25.234L16.679 25.474L16.343 25.679L15.927 25.921C15.6446 26.0822 15.3251 26.1669 15 26.1669C14.6749 26.1669 14.3554 26.0822 14.073 25.921L13.657 25.679L13.137 25.359L12.945 25.234L12.535 24.961C11.4228 24.2085 10.3869 23.3491 9.442 22.395C7.676 20.589 6 18.074 6 15C6 12.6131 6.94821 10.3239 8.63604 8.63604C10.3239 6.94821 12.6131 6 15 6ZM15 12C14.606 12 14.2159 12.0776 13.8519 12.2284C13.488 12.3791 13.1573 12.6001 12.8787 12.8787C12.6001 13.1573 12.3791 13.488 12.2284 13.8519C12.0776 14.2159 12 14.606 12 15C12 15.394 12.0776 15.7841 12.2284 16.1481C12.3791 16.512 12.6001 16.8427 12.8787 17.1213C13.1573 17.3999 13.488 17.6209 13.8519 17.7716C14.2159 17.9224 14.606 18 15 18C15.7956 18 16.5587 17.6839 17.1213 17.1213C17.6839 16.5587 18 15.7956 18 15C18 14.2044 17.6839 13.4413 17.1213 12.8787C16.5587 12.3161 15.7956 12 15 12Z" fill="url(%23paint0_linear_5097_4196)"/></g><g filter="url(%23filter1_f_5097_4196)"><ellipse cx="15" cy="30.5" rx="8" ry="2.5" fill="black" fill-opacity="0.5"/></g><defs><filter id="filter0_d_5097_4196" x="-3" y="-2" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5097_4196"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5097_4196" result="shape"/></filter><filter id="filter1_f_5097_4196" x="3" y="24" width="24" height="13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_5097_4196"/></filter><linearGradient id="paint0_linear_5097_4196" x1="15" y1="14.8324" x2="15" y2="26.1669" gradientUnits="userSpaceOnUse"><stop stop-color="%231F8522"/><stop offset="1" stop-color="%23111111"/></linearGradient></defs></svg>');
    background-repeat: no-repeat;
    margin: 0 auto;
}
.marker-label {
    background: var(--white);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 400;
    color: var(--primary);
    box-shadow: 0 0px 6px rgba(0,0,0,0.1);
    white-space: nowrap;
    display: inline-block;
    font-family: var(--font-Poppins);
}

.process_header{
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: 6px;
    margin-bottom: 16px;
}
.process_header>*{
    font-size: 12px;
    line-height: 18px;
    display: inline-block;
}
.top-row:not(:last-child){
    margin-bottom: 16px;
}
.top-info{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    margin-bottom: 4px;
}
.top-info>*{
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--black);
    display: inline-block;
}
.progress-container{
    position: relative;
    border-radius: 10px;
    height: 5px;
    overflow: hidden;
}
.progress-full{
    background: var(--light-gray-color);
    border-radius: 10px;
    height: 5px;
    overflow: hidden;
}
#loginList .progress-full{
    opacity: 0.3;
}
.progress-bar{
    background: linear-gradient(90deg,rgba(31, 133, 34, 1) 0%, rgba(17, 17, 17, 1) 100%);
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.6s ease;
    position: absolute;
    left: 0;
    top: 0;
}
.total_users{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-items: center;
    -webkit-align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.user_count{
    flex: 0 0 45px;
    -webkit-flex: 0 0 45px;
    max-width: 45px;
    height: 45px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    background-color: #F1FBFF;
    border-radius: 12px;
}
.user_details{
    flex: 0 0 calc(100% - 55px);
    -webkit-flex: 0 0 calc(100% - 55px);
    max-width: calc(100% - 55px);
}
.user_details h6{
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 4px;
}
.user_details span{
    font-weight: 600;
    display: block;
    color: var(--black);
}
.top-row .green{
    background: #28a745;
}
.top-row .blue{
    background: #007bff;
}
.top-row .red{
    background: #dc3545;
}
.top-row .orange{
    background: #fd7e14;
}

/* Absence Management Page */
.absence_data .common-table{
    padding-bottom: 60px;
}
.absence_data .dataTables_info,
.absence_data .dataTables_paginate{
    bottom: 12px;
}
.fw-500{
    font-weight: 500 !important;
}
.gap-10px{
    gap: 10px;
}
.gap-20px{
    gap: 20px;
}
.bg_dark{
    background-color: #B0B0B0 !important;
}
.mw-174{
    min-width: 170px !important;
}
.above_area{
    padding-left: 30px;
    padding-right: 30px;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.ab_left_block,
.ab_left_inner,
.above_area{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    gap: 10px;
}
.absence_input{
    min-height: 48px !important;
}
.space-right-icon{
    padding-right: 50px !important;
}
.absence_data .dataTables_length{
    top: 11px;
    right: 30px;
}
.absence_data .dataTables_filter{
    top: -92px;
}
.ab_left_block>span{
    font-weight: 500;
}
.text_btn{
    background-color: transparent;
    border: none;
    color: var(--primary);
    font-weight: 500;
    padding: 0;
    font-size: 15px;
}
.absence-dropdown .ab-select-box{
    background-color: #B0B0B0;
    border-radius: 30px;
    padding: 14px;
    padding-right: 36px;
    cursor: pointer;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M11.9991 13.09C11.8558 13.0901 11.7139 13.062 11.5815 13.0071C11.4492 12.9523 11.329 12.8718 11.2278 12.7703L0.318728 1.86127C-0.107545 1.435 -0.107545 0.744727 0.318728 0.318728C0.745 -0.107272 1.43527 -0.107545 1.86127 0.318728L11.9991 10.4565L22.1369 0.318728C22.5631 -0.107545 23.2534 -0.107545 23.6794 0.318728C24.1054 0.745 24.1057 1.43527 23.6794 1.86127L12.7703 12.7703C12.6692 12.8718 12.549 12.9523 12.4166 13.0071C12.2842 13.062 12.1423 13.0901 11.9991 13.09Z" fill="black"/></svg>');
    background-position: calc(100% - 14px) center;
    background-repeat: no-repeat;
    background-size: 16px;
    width: 160px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 15px;
}
.absence-dropdown .ab-select-box .ab-selected-options{
    color: var(--black);
    font-weight: 500;
}
.absence-dropdown .ab-options{
    background-color: var(--light-gray-color);
    border-radius: 20px;
    border: 1px solid #B0B0B0;
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.1);
    padding: 10px;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 1;
    min-width: 236px;
    display: none;
}
.absence-dropdown .ab-options .custom-check{
    max-height: 150px;
    overflow-y: auto;
}
.absence-dropdown .ab-options .custom-check li{
    display: block;
}
.absence-dropdown .ab-options .custom-check li label{
    width: 100%;
    padding: 12px 40px 12px 8px;
    position: relative;
    font-weight: 500;
    font-size: 15px;
}
.absence-dropdown .custom-check label span::before{
    left: inherit;
    right: 8px;
    top: 10px;
}
.absence-dropdown .custom-check label span::after{
    left: inherit;
    right: 8px;
    top: 10px;
}
.absence-dropdown .ab-options .search-box{
    background-color: var(--white);
    padding: 12px;
    padding-right: 42px;
    min-height: 48px;
    font-weight: 500;
    margin-bottom: 10px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M19 19.0002L14.657 14.6572M14.657 14.6572C15.3999 13.9143 15.9892 13.0324 16.3912 12.0618C16.7933 11.0911 17.0002 10.0508 17.0002 9.00021C17.0002 7.9496 16.7933 6.90929 16.3913 5.93866C15.9892 4.96803 15.3999 4.08609 14.657 3.34321C13.9141 2.60032 13.0322 2.01103 12.0616 1.60898C11.0909 1.20693 10.0506 1 9.00002 1C7.94942 1 6.90911 1.20693 5.93848 1.60898C4.96785 2.01103 4.08591 2.60032 3.34302 3.34321C1.84269 4.84354 0.999817 6.87842 0.999817 9.00021C0.999817 11.122 1.84269 13.1569 3.34302 14.6572C4.84335 16.1575 6.87824 17.0004 9.00002 17.0004C11.1218 17.0004 13.1567 16.1575 14.657 14.6572Z" stroke="%23111111" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}
.daterangepicker{
    border: 1px solid #B0B0B0;
    background-color: var(--light-gray-color);
}
.daterangepicker .calendar-table{
    background-color: var(--light-gray-color);
    border-color: var(--light-gray-color);
}
.daterangepicker .drp-buttons .btn-primary{
    background-color: var(--primary);
    border-color: var(--primary);
}
.daterangepicker td.off, 
.daterangepicker td.off.in-range, 
.daterangepicker td.off.start-date, 
.daterangepicker td.off.end-date{
    background-color: var(--light-gray-color);
}
.daterangepicker td.active, 
.daterangepicker td.active:hover{
    background-color: var(--primary);
}

.currency_symbol{
    position: absolute;
    left: 195px;
    top: 50%;
    font-weight: 600;
    color: #7a7a7a;
    z-index: 1;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.validation-error-block + .currency_symbol{
    top: calc(50% - 7px);
}
.currency_symbol_center{
    left: calc(50% + 82px);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}
.after-space>input{
    padding-right: 64px !important;
}
.after_symbol{
    position: absolute;
    right: 15px;
    top: 50%;
    font-weight: 600;
    color: #7a7a7a;
    z-index: 1;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.new-common-modal .msg-form .both_btn_actions>label,
.new-common-modal .msg-form .flex-220>label{
    flex: 0 0 220px;
    -webkit-flex: 0 0 220px;
    max-width: 220px;
    padding-right: 17px;
}
.recurring_shifts_right{
    width: 100%;
    background: var(--gray-color);
    border-radius: 0 28px 28px 0;
    padding: 12px 40px;
}
.recurring_shifts_right .btn{
    background-color: #b0b0b0;
    border-color: #b0b0b0;
    color: var(--black);
    padding: 11px;
    font-weight: 500;
    border-radius: 30px;
    min-width: 88px;
    text-align: center;
}
.recurring_shifts_right .btn:focus{
    box-shadow: none;
    -webkit-box-shadow: none;
}
.recurring_shifts_right .btn.btn-success{
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.msg-form .right-sidebox .chose-btn + .chose-btn-area{
    margin-top: 5px;
}
.pl-17px{
    padding-left: 17px !important;
}
.re_filter_btn{
    background-color: var(--gray-color);
    border: none;
    border-radius: 30px;
    color: rgba(17, 17, 17, 1);
    font-weight: 500;
    font-size: 16px;
    padding: 14px;
    padding-right: 22px;
}
.re_filter_btn svg{
    margin-left: 10px;
}
.re_filter_btn::after{
    display: none;
}
.re_filter_dropdown{
    padding: 20px;
    min-width: 345px;
    border: 1px solid var(--gray-color);
    border-radius: 20px;
    background-color: var(--light-gray-color);
    box-shadow: 0 0 6px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.1);
}
.re_filter_dropdown h6{
    margin-bottom: 16px;
}
.re_filter_dropdown input.datepicker{
    background-color: var(--gray-color) !important;
    font-weight: 500;
}
.filter_both_btn{
    padding-top: 10px;
    margin-top: 16px;
    border-top: 1px solid var(--gray-color);
}
.re_filter_dropdown .absence-dropdown .ab-select-box{
    width: 100%;
    background-color: var(--gray-color);
    white-space: inherit;
}
.re_filter_dropdown form>div:not(:last-child){
    margin-bottom: 10px;
}
.re_filter_dropdown .absence-dropdown .ab-options{
    position: inherit;
    top: inherit;
    right: inherit;
    width: 100%;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.re_filter_dropdown .absence-dropdown.active{
    background-color: var(--light-gray-color);
    border-radius: 20px;
    border: 1px solid #B0B0B0;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
}
#staffList,
#occupationStaffList {
    max-height: 173px; 
    overflow-y: auto;
    padding-right: 5px;
}

/* 15-09-2025 */
.gmp_input_area{
    border: none;
    background-color: var(--gray-color);
    font-size: var(--body-font-size);
    color: #7a7a7a;
    font-weight: var(--fw-600);
    border-radius: 0 28px 28px 0;
    min-height: 54px;
    font-family: var(--font-Poppins);
    padding: 0 0 0 40px;
}

.custom_pagination{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    align-items: center;
    -webkit-align-items: center;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}
.pagination_info{
    font-size: var(--body-font-size);
    color: var(--black);
    font-weight: var(--fw-600);
    margin-bottom: 0;
}
.custom_pagination .pagination .page-item:not(:first-child, :last-child) .page-link{
    width: auto;
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--black);
    border-radius: 10px;
    font-size: 14px;
    color: var(--black);
    font-weight: var(--fw-600);
    display: inline-block;
    text-align: center;
    line-height: 36px;
    margin: 0 4px;
    cursor: pointer;
    background: transparent;
    padding: 0;
}
.custom_pagination .pagination .page-item:first-child .page-link,
.custom_pagination .pagination .page-item:last-child .page-link{
    font-size: 14px;
    color: var(--black);
    font-weight: var(--fw-600);
    border: 1px solid var(--black);
    padding: 7px 10px;
    border-radius: 10px;
    margin: 0 6px;
    background-color: transparent;
}
.custom_pagination .pagination .page-item.active .page-link,
.custom_pagination .pagination .page-item:not(.disabled) .page-link:hover{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.custom_pagination .pagination .page-item .page-link:focus{
    box-shadow: none;
    -webkit-box-shadow: none;
}

.show_entries,
.show_search{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}
.show_entries label,
.show_search label{
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    color: var(--dark-gray-color);
}
.show_entries select{
    background-color: #b0b0b0;
    margin: 0 5px;
    min-height: auto;
    padding: 14px 15px;
    border-radius: 28px;
    appearance: none;
    -moz-appearance: none;
    min-width: 72px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="14" viewBox="0 0 24 14" fill="none"><path d="M11.9991 13.09C11.8558 13.0901 11.7139 13.062 11.5815 13.0071C11.4492 12.9523 11.329 12.8718 11.2278 12.7703L0.318728 1.86127C-0.107545 1.435 -0.107545 0.744727 0.318728 0.318728C0.745 -0.107272 1.43527 -0.107545 1.86127 0.318728L11.9991 10.4565L22.1369 0.318728C22.5631 -0.107545 23.2534 -0.107545 23.6794 0.318728C24.1054 0.745 24.1057 1.43527 23.6794 1.86127L12.7703 12.7703C12.6692 12.8718 12.549 12.9523 12.4166 13.0071C12.2842 13.062 12.1423 13.0901 11.9991 13.09Z" fill="black"/></svg>');
    background-position: calc(100% - 12px) center;
    background-repeat: no-repeat;
    background-size: 13px;
    border: none;
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    width: 100%;
    color: var(--secondary);
    font-family: var(--font-Poppins);
    line-height: inherit;
}
.show_search input{
    background-color: var(--gray-color) !important;
    border-radius: 28px;
    font-size: var(--body-font-size);
    font-weight: var(--fw-600);
    color: var(--dark-gray-color) !important;
    border: none;
    outline: none;
    padding: 10px 15px;
    margin-left: 10px;
    width: 250px;
    min-height: 48px !important;
}
.show_entries select:focus,
.show_search input:focus{
    box-shadow: none;
}
.custom_table_entries{
    gap: 57px;
}

.short-table.absence_manage th:not(:first-child,.short-hidden) span::after{display: none;}
.absence_manage_count {
    padding-left: 60px;
    position: relative;
}
.absence_manage_count .shift_numbers {
    position: absolute;
    left: 0;
    top: 0;
}
.common-table tbody td .absence_manage_count .toggle-child {
    left: 33px;
    top: 0;
        transform: translateY(0);
    -webkit-transform: translateY(0);
}
#shiftTable.absence_manage.common-table tbody td:not(:first-child){
    padding-bottom: 20px !important;
}
table.absence_manage tbody td .shift_numbers>span {
    min-width: 25px;
    min-height: 25px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: #1F8522;
}
.bottom_area_panel tbody td:not(:first-child){
    padding-bottom: 48px !important;
}
.bottom_area_panel tbody td:nth-child(2),
.child_inner_panel tbody td:nth-child(4),
.child_inner_panel tbody td:nth-child(5),
.child_inner_panel tbody td:nth-child(6){
    position: relative;
}
.bottom_area_panel tbody td .custom-checkbox{
    transform: inherit;
    -webkit-transform: inherit;
    top: 22px;
    position: absolute;
}
.last_ext{
    position: absolute;
    right: 15px;
    top: 18px;
    font-weight: 600;
    color: #000;
}
.refresh_title:not(.expand-row .refresh_title){
    display: flex;
    display: -webkit-flex;
    width: max-content;
    gap: 5px;
}
.expand-row .refresh_title{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
 .common_pills .report_filter_block .custom-check li:first-child{
    padding-left: 0;
}
.reports_tab_data .dataTables_length{
    margin-bottom: 10px;
}

@media screen and (min-width: 1300px){
    .top_inherit{
        top: inherit;
        transform: inherit;
        -webkit-transform: inherit;
    }
    .reports_tab_data .dataTables_length{
        margin-bottom: 0;
    }
}
/* Responsive css */
@media screen and (min-width: 1300px) and (max-width: 1599px){
    .header-inner ul>li>a{
        padding: 15px;
    }
    .dataTables_length{
        right: 300px;
    }
    .dataTables_filter input,
    .show_search input{
        width: 180px;
    }
    :root{
        --body-font-size: 14px;
    }
    .mw-90{
        min-width: 120px;
    }
    .mw-140{
        min-width: 160px;
    }
    .mw-250{
        min-width: 250px;
    }
    .mw-110{
        min-width: 120px;
    }
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 22px;
    }
    h3{
        font-size: 20px;
    }
    h4,
    .inner-msg>h3{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    .sidebar-menu ul li>a{
        padding: 18px 30px;
    }
    .inner-msg>h3{
        line-height: 20px;
    }
    .new-common-modal .clone_row{
        row-gap: 10px;
    }
    /* .new-common-modal .clone_row>.inner_col:not(:last-child){
        width: 33.33%;
    } */
    .new-common-modal .clone_row + .clone_row{
        margin-top: 14px;
    }
}
@media screen and (min-width: 1400px) and (max-width: 1599px){
    .small_cards_area{
        grid-template-columns: repeat(2, 1fr);
    }
    .half_card_box canvas{
        width: 80% !important;
    }
    #payrollChart, 
    #revenueChart{
        max-height: 380px;
    }
}
@media screen and (min-width: 1300px) and (max-width: 1399px){
    .circle_graph{
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 24px;
    }
    .half_card_box{
        flex: 0 0 calc(50% - 12px);
        -webkit-flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    .half_card_box + .half_card_box{
        margin-top: 0;
    }
    /* .new-common-modal .msg-form .first_row>*, */
    .clone_row.recurring-field>.inner_col{
        flex: 0 0 33.33%;
        -webkit-flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}
@media screen and (min-width: 992px) and (max-width: 1299px){
    :root{
        --body-font-size: 14px;
    }
    .mw-90{
        min-width: 120px;
    }
    .mw-140{
        min-width: 160px;
    }
    .mw-250{
        min-width: 250px;
    }
    .mw-110{
        min-width: 120px;
    }
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 22px;
    }
    h3{
        font-size: 20px;
    }
    h4,
    .inner-msg>h3{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    .header{
        padding-left: 20px;
        padding-right: 20px;
    }
    .header-inner ul>li{
        padding-left: 2px;
        padding-right: 2px;
    }
    .header-inner ul>li>a{
        padding: 10px 8px;
        font-size: 14px;
    }
    .menu-right>ul>li:last-child a{
        padding: 10px 16px;
    }
    .logo-area img {
        max-width: 90px;
    }
    .header-inner .dropdown-menu{
        width: calc(100% - 4px);
        left: 2px !important;
    }
    .header-inner .menu-left .dropdown-menu{
        width: calc(100% + 76px);
    }
    .header-inner .has_noti{
        padding-left: 35px;
        padding-right: 26px;
    }
    /*.notifications_area {
        padding-left: 10px;
        padding-right: 10px;
    }*/
    .has_noti::before{
        left: 14px;
    }
    .header-inner .dropdown-menu>li a{
        padding: 10px 12px;
    }
    .main-dashboard{
        padding-top: 112px;
    }
    .right-content{
        min-height: calc(100vh - 112px);
    }
    .sidebar-menu{
        top: 140px;
    }
    .sidebar-menu aside{
        height: calc(100vh - 140px);
    }
    .sidebar-menu ul li>a{
        padding: 18px 30px;
    }
    .add_btn{
        margin: 0 20px;
    }
    .dataTables_wrapper{
        margin-top: 20px;
    }
    .dataTables_length,
    .dataTables_filter{
        position: inherit;
        top: inherit;
        right: inherit;
        float: left;
    }
    .dataTables_filter{
        float: right;
    }
    .inner-msg>h3{
        line-height: 20px;
    }
    .count-area{
        gap: 20px;
    }

    /* ChatBox Css */
    .chatboxGroup .list-group .list-group-item{
        padding: 8px 10px;
    }
    .chatboxGroup textarea.form-control {
        padding: 10px 15px;
        min-height: 46px;
    }
    .chatboxGroup .file-label svg {
        height: 100%;
        width: 100%;
    }
    .chatboxGroup .btn-secondary {
        height: 46px;
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chatboxGroup .add_btn, .chatboxGroup .searchbar .btn, .chatboxGroup .file-label {
        height: 46px;
        width: 46px;
    }

    .chatboxGroup textarea.form-control, .chatboxGroup .searchbar {
        height: 46px;
    }
    .chatboxGroup .searchbar input {
        padding-right: 55px;
    }

    .chatboxGroup .userporfile .userimage{
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        position: relative;
    }

    .chatboxGroup .userporfile .activeuser{
        font-size: 12px;
    }
    .chatboxGroup .list-group .list-group-item .useraccount{
        width: calc(100% - 50px);
    }
    .new-common-modal .clone_row,
    .new-common-modal .msg-form>.first_row{
        row-gap: 10px;
    }
    /* .new-common-modal .msg-form>.first_row>div:first-child,
    .new-common-modal .msg-form>.first_row>div:nth-child(2){
        width: 50%;
    }
    .new-common-modal .msg-form>.first_row>div + div + div{
        width: 100%;
    } */
    .new-common-modal .msg-form .form-label>input.datepicker,
    .new-common-modal .msg-form .form-label>input.timepicker{
        background-position: calc(100% - 12px) center;
    }
    .new-common-modal .clone_row>.inner_col:not(:last-child){
        width: 33.33%;
    }
    .new-common-modal .clone_row + .clone_row{
        margin-top: 14px;
    }
    /* .new-common-modal .clone_row>.inner_col:nth-last-of-type(2){
        width: 100%;
    } */
    #clone-showing-data .clone_row + .validation-error-block{
        transform: translateY(-16px);
    }
    .common_pills{
        padding-right: 10px;
    }
    .above_area{
        padding-right: 30px;
    }
    .circle_graph{
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 24px;
    }
    .half_card_box{
        flex: 0 0 calc(50% - 12px);
        -webkit-flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    .half_card_box + .half_card_box{
        margin-top: 0;
    }
    .small_cards_area{
        grid-template-columns: repeat(2, 1fr);
    }
    .half_card_box canvas{
        width: 70% !important;
    }
    .in_chart_data{
        bottom: 26px;
    }
    .new-common-modal .msg-form .first_row>*,
    .clone_row.recurring-field>.inner_col{
        flex: 0 0 50%;
        -webkit-flex: 0 0 50%;
        max-width: 50%;
    }
    .custom_table_entries{
        gap: 30px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1199px){
    /* .header-inner .menu-left > ul li.dropdown .has_noti{
        border-radius: 28px 28px 0 0;
    } */
    .header-inner .menu-left > ul li.dropdown .has_noti::after{
        display: none;
    }
    .header-inner .menu-left .dropdown-menu{
        /* width: calc(100% - 4px); */
        padding-left: 10px;
        padding-right: 10px;
    }
    .count-area {
        gap: 15px;
    }
    .count-box{
        padding: 20px 10px;
        min-width: 160px;
    }
    .above_area{
        padding-left: 15px;
        padding-right: 15px;
    }

    .ab_left_block>span{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
    }
    .ab_left_inner>div{
        flex: 0 0 calc(40% - 20px);
        -webkit-flex: 0 0 calc(40% - 20px);
        max-width: calc(40% - 20px);
    }
    .ab_left_inner>div:not(:first-child){
        flex: 0 0 30%;
        -webkit-flex: 0 0 30%;
        max-width: 30%;
    }
    .ab_left_inner,
    .ab_right_block .ab_actions_btn{
        justify-content: center;
        -webkit-justify-content: center;
        width: 100%;
    }
    .absence-dropdown .ab-select-box,
    .ab_right_block,
    .ab_left_block{
        width: 100%;
    }
    .ab_left_inner .absence_input{
        min-width: 100% !important;
    }
    .custom_table_entries{
        margin-top: 20px;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }
}
@media screen and (max-width: 991px){
    :root{
        --body-font-size: 14px;
    }
    .mw-90{
        min-width: 120px;
    }
    .mw-140{
        min-width: 160px;
    }
    .mw-250{
        min-width: 250px;
    }
    .mw-110{
        min-width: 120px;
    }
    h1{
        font-size: 28px;
    }
    h2{
        font-size: 22px;
    }
    h3{
        font-size: 20px;
    }
    h4,
    .inner-msg>h3{
        font-size: 18px;
    }
    h5{
        font-size: 16px;
    }
    .size-22 {
        font-size: 16px !important;
    }
    .radius-50{
        border-radius: 28px;
    }
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .cbtn,
    .dash-btn,
    .inner-msg>p,
    .msg-form>.form-label>label,
    .custom-select .select-styled,
    .msg-form>.form-label>input:not(input[type="submit"]),
    .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .msg-form>.form-label .form-rating,
    .custom-select .select-option,
    .common-table tbody td,
    .dataTables_filter>label,
    .dataTables_length label,
    .dataTables_filter input,
    .upload-file h6,
    .dataTables_info,
    .modal-dropdown .select-box,
    .modal-dropdown .options .select-option,
    .rate-row .form-label>label,
    .show_search input{
        font-size: 14px;
    }
    .mobile-humberger svg{
        width: auto;
        height: 18px;
    }
    .menu-left li.dropdown span>svg{
        height: 26px;
        width: auto;
    }
    .n-delete-btn svg {
        height: 16px !important;
    }
    .common-table th,
    .common-table td{
        padding: 12px 16px !important;
    }
    .header{
        padding: 10px 20px;
    }
    .header-inner ul>li>a{
        padding: 10px;
        font-size: 14px;
        border-radius: 0;
    }
    .header-inner ul>li>a.show{
        background-color: transparent;
        border-radius: 0;
    }
    .header-inner .dropdown-menu{
        border-radius: 28px;
        min-width: 210px;
        margin-top: 22px !important;
    }
    .header-inner .menu-right .dropdown-menu{
        left: inherit !important;
        right: 0 !important;
    }
    .header-inner .menu-left .dropdown-menu{
        width: 300px;
        padding: 50px 12px 12px 16px;
        margin-top: 35px !important;
        left: 0 !important;
        margin-left: -40px !important;
    }
    .header-inner .notifications_area {
        max-height: 368px;
    }
    .header-inner .menu-left>ul li.dropdown .has_noti::after{
        display: none !important;
    }
    .clear-btn {
        top: 75px;
        right: 0;
        width: 300px;
        left: -40px;
        padding: 0px 15px;
        display: flex !important;
        justify-content: end;
    }
    .header-inner ul>li,
    .menu-right .dropdown,
    .menu-right .dropdown>a,
    .header-inner .has_noti{
        padding: 0;
    }
    .header-inner .dropdown-menu>li a{
        padding: 8px 15px;
    }
    .header-inner ul>li>a.dropdown-toggle::after{
        display: inline-block;
    }
    .header .menu-icon{
        width: 38px;
        height: 38px;
        line-height: 33px;
        margin-left: 0;
    }
    /*.header .menu-icon img{
        width: 34px;
    }*/
    .menu-left{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }
    .menu-left>ul{
        padding-left: 20px;
    }
    .notifications_area>li>a{
        margin-bottom: 10px;
    }
    .content-area{
        padding-left: 20px;
        padding-right: 20px;
    }
    .right-content{
        margin-left: 0;
        max-width: 100%;
        flex: 100%;
        -webkit-flex: 100%;
        border-radius: 50px;
        min-height: calc(100vh - 114px);
        margin-top: 4px;
    }
    .sidebar-menu{
        left: -240px;
        z-index: 3;
        top: 0;
        transition: all 350ms ease-in-out;
    }
    .sidebar-menu aside{
        height: 100vh;
    }
    .sidebar-open .sidebar-menu{
        left: 0;
    }
    body.sidebar-open{
        overflow: hidden;
    }
    .main-dashboard{
        padding-top: 100px;
        padding-bottom: 10px;
    }
    .dashboard-page::before,
    .sidebar-menu ul li>a::after,
    .header-inner ul>li>a.dropdown-toggle.has_noti::after{
        display: none;
    }
    .sidebar-close{
        padding: 12px;
    }
    .sidebar-close svg{
        height: 15px;
        width: auto;
    }
    .sidebar-menu ul li>a{
        font-size: 14px;
        padding: 15px 20px;
    }
    .sidebar_overlay{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        z-index: 2;
        display: none;
    }
    .sidebar-open .sidebar_overlay{
        display: block;
    }
    .has_noti::before,
    .notifications_area>li a::before{
        width: 6px;
        height: 6px;
    }
    .has_noti::before{
        left: 24px;
    }
    .add_btn{
        margin: 0 12px 0 20px;
    }
    .msg-list li{
        padding-left: 70px;
    }
    .msg-list li>label{
        left: 15px;
    }
    .inner-msg{
        padding-left: 30px;
    }
    /*.common-modal .modal-header{
        padding: 20px;
    }*/
    .count-area{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 20px;
    }
    .dataTables_wrapper{
        margin-top: 20px;
    }
    .dataTables_length,
    .dataTables_filter{
        position: inherit;
        top: inherit;
        right: inherit;
        float: left !important;
    }
    .dataTables_filter{
        float: right !important;
        margin-top: 0 !important;
    }
    .common-table .custom-select .select-styled{
        padding: 15px 30px 15px 10px;
    }
    .common-table .custom-checkbox{
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
        -webkit-transform: inherit;
        left: inherit !important;
    }
    .short-table th:not(:first-child,.short-hidden) span::after{
        right: -24px;
    }
    .shape-design img{
        width: 50px;
    }
    .inner-msg>h3{
        line-height: 20px;
    }
    .modal-size-l .modal-dialog{
        justify-content: center;
        -webkit-justify-content: center;
    }
    .modal-size-l .modal-content{
        width: calc(100% - 36px);
    }
    #shift-table tbody td:first-child,
    #shiftTable tbody td:first-child
    {
        vertical-align: top;
    }
    #message-centre-table{
        margin-top: 0;
    }
    .content-area.dashboard-page{
        z-index: auto;
    }

    .chatboxGroup .list-group .list-group-item{
        padding: 8px 10px;
    }
    .chatboxGroup textarea.form-control {
        padding: 10px 15px;
        min-height: 46px;
    }
    .chatboxGroup .file-label svg {
        height: 100%;
        width: 100%;
    }
    .chatboxGroup .btn-secondary {
        height: 46px;
        width: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chatboxGroup .add_btn, .chatboxGroup .searchbar .btn, .chatboxGroup .file-label {
        height: 46px;
        width: 46px;
    }

    .chatboxGroup textarea.form-control, .chatboxGroup .searchbar {
        height: 46px;
    }
    .chatboxGroup .searchbar input {
        padding-right: 55px;
    }

    .chatboxGroup .message .message-content {
        padding: 10px;
        line-height: 18px;
        border-radius: 0px 10px 10px 10px;
    }
    .chatboxGroup .message.outgoing .message-content{
        border-radius: 10px 10px 0px 10px;
    }
    .chatboxGroup .message {
        max-width: 70%;
    }

    .chatboxGroup .userporfile .userimage{
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 50%;
        position: relative;
    }

    .chatboxGroup .userporfile .activeuser{
        font-size: 12px;
    }
    .chatboxGroup .list-group .list-group-item .useraccount{
        width: calc(100% - 50px);
    }

    .new-common-modal .clone_row>.inner_col:not(:last-child),
    .new-common-modal .clone_row>.inner_col:nth-last-of-type(2){
        width: 100%;
    }
    .new-common-modal .msg-form .form-label>label{
        flex: 0 0 154px;
        -webkit-flex: 0 0 154px;
        max-width: 154px;
    }
    .new-common-modal .msg-form>.row,
    #clone-showing-data .clone_row{
        gap: 8px;
    }
    .new-common-modal .clone_row {
        padding-right: 62px;
    }
    .common_pills{
        padding-right: 10px;
    }
    .above_area{
        padding: 20px 15px;
    }
    .ab_left_block>span{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
    }
    .ab_left_inner>div{
        flex: 0 0 calc(40% - 20px);
        -webkit-flex: 0 0 calc(40% - 20px);
        max-width: calc(40% - 20px);
    }
    .ab_left_inner>div:not(:first-child){
        flex: 0 0 30%;
        -webkit-flex: 0 0 30%;
        max-width: 30%;
    }
    .ab_left_inner,
    .ab_right_block .ab_actions_btn{
        justify-content: center;
        -webkit-justify-content: center;
        width: 100%;
    }
    .absence-dropdown .ab-select-box,
    .ab_right_block,
    .ab_left_block{
        width: 100%;
    }
    .ab_left_inner .absence_input{
        min-width: 100% !important;
    }
    .small_cards_area{
        grid-template-columns: repeat(2, 1fr);
    }
    #payrollChart, #revenueChart{
        width: 100% !important;
    }
    .in_chart_data{
        bottom: 10px;
        padding: 0 10px;
    }
    .in_chart_data p{
        line-height: 20px;
    }
    .in_chart_data>span{
        line-height: 28px;
    }
    .new-common-modal .clone_row .AddOptionBtn2{
        top: 0;
        transform: inherit;
        -webkit-transform: inherit;
    }
    .new-common-modal .clone_row + .clone_row{
        margin-top: 16px;
    }
    .clone_row.recurring-field>.inner_col{
        flex: 0 0 calc(50% - 4px);
        -webkit-flex: 0 0 calc(50% - 4px);
    }
    .circle_graph {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        gap: 24px;
    }
    .half_card_box{
        flex: 0 0 calc(50% - 12px);
        -webkit-flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
    .half_card_box + .half_card_box{
        margin-top: 0;
    }
    .shift_panel_table:not(.report_shift_panel) table tbody td .shift_numbers>span{
        margin-top: -7px;
    }
    .custom_table_entries{
        column-gap: 30px;
        row-gap: 10px;
    }
    .custom_table_entries{
        margin-top: 20px;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }
}
@media screen and (max-width: 767px){
    .chathide {
        display: block;
    }

    .size-22{
        font-size: 16px !important;
    }
    .space-30,
    .count-box{
        padding: 15px;
    }
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    select,
    textarea,
    .input-icon{
        min-height: 60px;
    }
    .input-icon{
        width: 66px;
    }
    .input-icon>img{
        height: 24px;
    }
    .login-form input:not(input[type="submit"]) {
        padding-left: 84px;
    }
    .msg-content{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .msg-content>h2{
        flex: 0 0 100%;
    }
    .add_btn{
        margin-left: 0;
    }
    .dash-btn,
    .cbtn{
        padding: 12px 10px;
    }
    .msg-list li>label span,
    .msg-list li>label span::after{
        width: 30px;
        height: 30px;
    }
    .msg-list li>label span::after{
        background-size: 60%;
    }
    .msg-list li{
        padding-left: 55px;
    }
    .inner-msg{
        padding-left: 20px;
    }
    .msg-form .form-label textarea{
        height: 180px;
    }
    .table-responsive:not(.shift_panel_table .table-responsive){
        margin-bottom: 80px;
    }
    .pagination_info{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    .custom_pagination .pagination{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        row-gap: 5px;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .dataTables_info{
        bottom: -35px;
        width: 100%;
    }
    .dataTables_paginate{
        width: 100%;
    }
    .dataTables_paginate{
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        bottom: -80px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .dataTables_wrapper .dataTables_paginate>.paginate_button{
        flex: 0 0 auto;
        -webkit-flex: 0 0 auto;
    }
    .dataTables_paginate>span{
        display: flex;
        display: -webkit-flex;
    }
    .dataTables_filter input,
    .show_search input{
        width: 170px;
    }
    .common-table tbody td:nth-child(2){
        min-width: 310px;
    }
    .short-table tbody td:nth-child(2){
        min-width: 150px;
    }
    .common-modal .modal-content{
        width: calc(100% - 14px);
    }
    .modal-size-l .modal-dialog,
    .custom_pagination{
        justify-content: center;
        -webkit-justify-content: center;
    }
    .modal-size-l .modal-content{
        width: calc(100% - 36px);
    }

    /* ChatBox Css */
    .chatboxGroup .chat-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        padding: 10px;
        background: #0000009e;
        transform: translateX(120%);
        transition: var(--ease-transition);
    }
    .chatboxGroup.open .chat-panel{
        transform: translateX(0%);
    }

    /*  */
    .chatboxGroup .chat-panel .userporfile{
        width: calc(100% - 50px);
    }
    .chat-header-right{
        width: 100%;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }
    .chat-header-right .chathide{
        position: absolute;
        right: 20px;
        top: 28px;
    }
    .ab_left_inner>*,
    .ab_left_inner>div,
    .ab_left_inner>div:not(:first-child),
    .clone_row.recurring-field>.inner_col{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
    }
    .absence-dropdown .ab-select-box,
    .ab_right_block{
        width: 100%;
    }
    .ab_right_block .ab_actions_btn{
        justify-content: center;
        -webkit-justify-content: center;
    }
    .mw-300{
        min-width: 100% !important;
    }
    .absence_data .dataTables_info{
        bottom: 48px;
    }
    .absence_data .dataTables_paginate{
        bottom: 6px;
    }
    .graph_area{
        grid-template-columns: repeat(1, 1fr);
    }
    .half_card_box{
        padding-top: 50px;
    }
    .half_card_box canvas{
        width: 90% !important;
    }
    .common_pills{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }
    .data_number{
        font-size: 24px;
        line-height: 34px;
    }
}
@media screen and (max-width: 575px){
    .input-icon{
        width: 60px;
    }
    .login-form input:not(input[type="submit"]){
        padding-left: 75px;
        min-height: 54px;
    }
    .input-icon{
        min-height: 54px;
    }
    .logo-area img{
        max-width: 80px;
    }
    .login-form{
        padding: 20px;
        margin-top: 30px;
    }
    .shape-design>img{
        width: 45px;
    }
    .menu-left>ul{
        padding-left: 15px;
    }
    .add_btn{
        margin: 0 0 10px;
    }
    .custom-select .select-styled,
    .msg-form>.form-label>input:not(input[type="submit"]),
    .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .modal-dropdown .select-box,
    .rate-row .form-label>input:not(input[type="submit"]){
        padding: 17px 10px;
        padding-right: 10px;
    }
    .custom-select .select-styled,
    .modal-dropdown .select-box{
        background-size: 14px;
        background-position: calc(100% - 17px) center;
        word-wrap: break-word;
        padding-right: 35px;
    }
    .dataTables_filter{
        float: left !important;
        margin-top: 10px !important;
        width: 100%;
        text-align: left !important;
    }
    .modal-size-l .msg-form>.form-label>label,
    .rate-row .form-label>label{
        flex: 0 0 110px;
        -webkit-flex: 0 0 110px;
        max-width: 110px;
        word-break: auto-phrase;
    }
    .modal-size-l .msg-form>.form-label .custom-select,
    .modal-size-l .msg-form>.form-label>input:not(input[type="submit"]),
    .modal-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .upload-file,
    .msg-form>.form-label .form-rating,
    .right-sidebox,
    .modal-size-l .right-sidebox-small,
    .msg-form .select2.select2-container,
    .rate-row .form-label>input:not(input[type="submit"]),
    .gmp_input_area{
        flex: 0 0 calc(100% - 110px);
        -webkit-flex: 0 0 calc(100% - 110px);
        max-width: calc(100% - 110px);
    }
    .inner-size-l .msg-form .select-styled,
    .inner-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .modal-size-l .inner-size-l .msg-form>.form-label input:not(input[type="submit"]),
    .modal-size-l .modal-dropdown .select-box,
    #editSubAdminDetailModal .msg-form .select2 .select2-selection,
    #editSubAdminDetailModal .msg-form label + .select2,
    #addSubAdminDetailModal .msg-form .select2 .select2-selection,
    #addSubAdminDetailModal .msg-form label + .select2,
    #NnotificationSettings .msg-form .select2 .select2-selection,
    #NnotificationSettings .msg-form label + .select2,
    #addPlanModal .msg-form .select2 .select2-selection,
    #addPlanModal .msg-form label + .select2,
    .rate-row .form-label>input:not(input[type="submit"]),
    .gmp_input_area{
        padding-left: 10px;
    }
    .upload-file.download-file,
    .upload-file,
    .right-sidebox,
    .chose-btn{
        padding-left: 10px;
        padding-right: 10px;
    }
    .modal-size-l .modal-content{
        width: calc(100% - 14px);
    }
    .msg-content{
        justify-content: center;
        -webkit-justify-content: center;
        width: 100%;
    }
    .msg-content>h2{
        text-align: center;
    }
    .msg-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        height: 100%;
    }
    .msg-form .select2-container--default .select2-selection--multiple .select2-selection__choice{
        white-space: normal;
    }
    #change-password-form .password-area .toggle-password{
        top: 8px;
    }
    .ui-timepicker-wrapper{
        width: 200px;
    }
    .dataTables_info{
        text-align: left !important;
    }
    .dataTables_paginate{
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
    }
    .header-inner .menu-left .dropdown-menu{
        width: 270px;
        min-width: auto;
        margin-top: 28px !important;
    }
    .clear-btn {
        top: 70px;
        width: 270px;
    }

    /* ChatBox Css */
    .chatboxGroup {
        height: calc(100vh - 331px);
    }
    .chatboxGroup .message {
        max-width: 80%;
    }

    .new-common-modal .msg-form .form-label{
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .new-common-modal .msg-form .form-label>input:not(input[type="submit"]),
    .new-common-modal .msg-form .form-label .select2 .select2-selection{
        text-align: center;
    }
    .new-common-modal .msg-form .form-label .select2 .select2-selection{
        justify-content: center;
        -webkit-justify-content: center;
    }
    .new-common-modal .msg-form .form-label>input:not(input[type="submit"]),
    .new-common-modal .msg-form .select2 .select2-selection{
        min-height: 48px;
    }
    .new-common-modal .msg-form .form-label>label{
        padding: 14px;
    }
    .new-common-modal .msg-form .form-label>label{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
    }
    .new-common-modal .msg-form .form-label>label{
        border-radius: 28px 28px 0 0;
        text-align: center;
    }
    .new-common-modal .msg-form .form-label>input:not(input[type="submit"]),
    .new-common-modal .msg-form .select2 .select2-selection{
        border-radius: 0 0 28px 28px;
    }
    .new-common-modal .clone_row {
        padding-right: 40px;
    }
    .AddOptionBtn2>a{
        width: 34px;
        height: 34px;
        line-height: 34px;
    }
    .AddOptionBtn2>a svg{
        width: 15px;
        height: 15px;
    }
    .small_cards_area,
    .process_area, 
    .graph_area{
        grid-template-columns: repeat(1, 1fr);
    }
    .currency_symbol{
        left: 120px;
    }
    .currency_symbol + input{
        padding-left: 30px !important;
    }
    .currency_symbol_center{
        left: calc(50% + 46px);
    }
    .both_btn_actions>label,
    .custom_table_entries,
    .custom_table_entries>*{
        justify-content: center !important;
        -webkit-justify-content: center !important;
    }
    .recurring_shifts_right{
        border-radius: 0 0 28px 28px;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .clone_row.recurring-field>.inner_col{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
    }
    .form-label .pl-17px{
        padding-left: 10px !important;
    }
    .new-common-modal .msg-form .form-label .select2.select2-container{
        white-space: normal;
        text-overflow: inherit;
        overflow: inherit;
    }
    .re_filter_dropdown{
        min-width: 280px;
        max-width: 345px;
    }
    .custom_table_entries>*{
        width: 100%;
    }
    .show_entries select{
        max-width: 80px;
    }
    .last_ext{
        top: 62px;
    }
    .half_card_box{
        padding-left: 10px;
        padding-right: 10px;
    }
    .half_card_box .card_top{
        top: 12px;
    }
    .half_card_box canvas{
        width: 100% !important;
    }
    .in_chart_data>span{
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 6px;
    }
    .in_chart_data p{
        font-size: 14px;
        line-height: 20px;
    }
}

@media screen and (max-width: 400px){
    .modal-size-l .msg-form>.form-label .custom-select,
    .modal-size-l .msg-form>.form-label>input:not(input[type="submit"]),
    .modal-size-l .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .upload-file,
    .msg-form>.form-label .form-rating,
    .right-sidebox,
    .modal-size-l .right-sidebox-small,
    .msg-form .select2.select2-container,
    .modal-size-l .msg-form>.form-label>label,
    .msg-form .form-label>label+.select2,
    .rate-row .form-label>label,
    .rate-row .form-label>input:not(input[type="submit"]),
    .gmp_input_area{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
    }
    .msg-form>.form-label>label,
    .modal-size-l .msg-form>.form-label>label,
    .rate-row .form-label>label{
        border-radius: 28px 28px 0 0;
        text-align: center;
    }
    .custom-select .select-styled,
    .msg-form>.form-label>input:not(input[type="submit"]),
    .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .msg-form>.form-label .form-rating,
    .modal-dropdown .select-box,
    .msg-form .select2 .select2-selection,
    .upload-file,
    .right-sidebox,
    .msg-form .form-label>label+.select2,
    .rate-row .form-label>input:not(input[type="submit"]),
    .gmp_input_area{
        border-radius: 0 0 28px 28px;
    }
    .modal-size-l .msg-form>.form-label>label,
    .rate-row .form-label>label,
    .custom-select .select-styled,
    .msg-form>.form-label>input:not(input[type="submit"]),
    .msg-form>.form-label:not(.bottom-textarea)>textarea,
    .modal-dropdown .select-box,
    .upload-file,
    .right-sidebox,
    .msg-form .form-label>label+.select2,
    .rate-row .form-label>input:not(input[type="submit"]){
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        min-height: 48px;
    }
    .msg-form .select2 .select2-selection{
        min-height: 48px;
    }
    .password-area .toggle-password:not(.login-form .password-area .toggle-password),
    #change-password-form .password-area .toggle-password{
        top: 47px;
        padding: 14px 17px;
    }
    .chose-btn-area input{
        width: 125px;
    }
    #settingform .chose-btn-area .fileInputPdf {
        width: 104px;
    }
    .add-msg-subject .msg-form .form-label>label,
    .add-msg-subject .msg-form .form-label .cbtn{
        flex: 0 0 100% !important;
        -webkit-flex: 0 0 100% !important;
    }
    .add-msg-subject .msg-form .form-label .cbtn{
        margin-left: 0;
        margin-top: 10px;
    }
    .m-space-40{
        padding-top: 40px;
    }
    .half_card_box canvas,
    #payrollChart,
    #revenueChart{
        width: 100% !important;
    }
    .currency_symbol{
        left: 14px;
        top: 62px;
        transform: inherit;
        -webkit-transform: inherit;
    }
    .currency_symbol + input{
        padding-left: 32px !important;
    }
    .after_symbol{
        transform: inherit;
        -webkit-transform: inherit;
        top: 61px;
    }
    .currency_symbol_center{
        left: calc(50% - 8px);
        transform: translateX(-50%);
    }
    .validation-error-block + .currency_symbol{
        top: calc(50% + 7px);
    }
    .in_chart_data{
        bottom: 20px;
    }
    .in_chart_data>span{
        margin-bottom: 14px;
    }
    .half_card_box{
        flex: 0 0 100%;
        -webkit-flex: 0 0 100%;
        max-width: 100%;
        padding-bottom: 25px;
        padding-top: 35px;
    }
    .in_chart_data p{
        font-size: 15px;
    }
}

/* For DatePicker */
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year {
    width: 50% !important;
}
.inner-size-xl .msg-form.max-w-full.col-md-12{
    max-width: 100% !important;
}

.dt-buttons {
    display: none !important;
}