::-webkit-scrollbar{
	width:0px;
	height:0px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
:root {

	--tsaz: #c01919;
	--prog_circle:3.8rem;
	--prog_txt:0.7rem;
	--pfp: 50px;
	--gridpfp:150px;
	--datepad:40px;
	--datebr:30px;
	--wball: 20px;
	--hball: 20px;
	--hbounce: 64px;
	--strip: rgba(122, 122, 122, 0.2);
	--chksize: 1rem;
	/* --filter_hvr:rgba(125, 125, 125, .4);
	--filter_form: rgb(78 34 145 / 98%);
	--border_form: #8344ff;
	--bordr_hvr:#a375ff; */

	/**********************/
	/***** LIGHT MODE *****/
	/**********************/

	--content-bg:#e0eaff;
	--prmclr:#3c00d4;
	--secclr:#F9F9F9;
	--terclr:#fbfbfb;
	--qrtclr:#563f91;
	--prmtxt1:#333;
	--prmtxt2:#DDD;
	--prmtxt3:#001367;
	--hoverclr1:#0E2071;
	/* --hoverclr2:#bec3d7; */
	/* --hoverclr2:#548ef6; */
	--prof-hr:#0E2071;
	--font-bshead:larger;
	--cardhvr:#666569;
	--cardbox:#636060;
	--font-bstxt:large;
	--formclr:#0d081c;
	--formlbl:#F9F9F9;
	--optclr:rgba(255, 255, 255);
	--opthvr:#6176d5;
	--dthvr:rgba(36, 101, 255, 0.97);
	--dtbg:rgba(246, 246, 246, 0.98);
	--dtnow:#5d8bff;
	/* --tablebg:#e9e9e9; */
	--tablebg:#fbfbfb;
	/* --btnbg:#3c00d4; */
	--btnbg_hvr:#0f23ff;
	--filter_hvr:rgba(241, 241, 241, 0.9);
	--filter_form: rgba(236, 236, 236, 0.98);
	--border_form: #4c4a4f;
	--bordr_hvr:#828282;
	/* --check:#0e0b22; */
	--req:#f00;
	
}
body{
	margin:0;
	background-color: var(--secclr);
	color:var(--prmtxt1);
	
}
header{
	background-color:var(--prmclr);
	color:var(--terclr);
	box-shadow: 8px 21px 30px -17px rgba(0,0,0,0.45);
}
.content_wrap{
	display:flex;
	overflow:hidden;
	flex:1;
	background-color:var(--secclr);
}

/******************/
/***** FORMS ******/
/******************/

.gen_form div{
	width: 95%;
}
span.req{
	color: var(--req);
}
.form-toggle{
	transition: 0.2s ease !important;
	
}
.form_fillup,
.form_select,
.form_multisel{
	position: relative;
	width: 22vw;
	height: 3rem;
}
.form_fillup i{
	cursor: pointer;
	opacity: .6;
	position: absolute;
	right: 7%;
	top: 26%;
	user-select: none;
	z-index: 2;
}
.form_fillup input,
.form_fillup textarea{
	top: 0;
	left: 0;
}
.form_fillup input,
.form_select input,
.form_fillup textarea,
.form_multisel input[type="text"]{
	position: relative;
	color: var(--prmtxt1);
	width: 100%;
	height: 100%;
	padding:0 13px;
	border: 2px solid var(--formclr);
	z-index:2;
	border-radius: 5px;
	background:none;
	outline: none;
	caret-color:var(--prmtxt1);
}
.form_fillup label,
.form_select label,
.form_multisel input[type="text"] + label{
	user-select: none;
	position: absolute;
	left: 1rem;
	top: 0.7rem;
	transform: translate(-0.7rem);
	cursor: text;
	z-index:1;
	padding:0 5px 0 5px;
	transition: 0.2s;
	border-radius:2px;
	background-color:var(--tablebg);
}
.form_fillup input:focus~label,
.form_fillup input:not(:placeholder-shown) + label,
.form_fillup textarea:focus~label,
.form_fillup textarea:not(:placeholder-shown) + label,
.form_select input:focus~label,
.form_select input:not(:placeholder-shown) + label,
.form_multisel input[type="text"]:focus + label,
.form_multisel input[type="text"]:not(:placeholder-shown) + label{
	top: -0.7rem;
	font-size: 0.8rem;
	color:var(--prmtxt1);
	padding:0 5px;
	z-index:2;
}
.form_select ul{
	position: absolute;
	background-color:var(--optclr);
	margin-top:2px;
	border-radius:5px;
	overflow: auto;
	width: 100%;
	max-height:0;
	padding:0;
	z-index:10;
	transition:all .15s ease;
}
.form_select ul.active{
	max-height: 220px;
}
.form_select li{
	list-style:none;
	cursor: pointer;
	padding:7px 13px;
	transition:all 0.2s ease;
}
.form_select li:hover{
	padding-left: 15px;
	background-color: var(--opthvr);
}
.form_multisel .selchk{
	padding:0px;
	background:var(--optclr);
	width: 100%;			
	position:absolute;
	z-index:10;
	overflow:scroll;
	max-height:0px;
	transition: all 0.2s ease;
}
.form_multisel .selchk.active{
	padding:2px;
	max-height:300px;
}

.form_multisel .selchk input[type="checkbox"]{
	width: 1em;
	height: 1em;
}
.checkBox {
	padding: 0.4rem .8rem;
	--test: all .2s ease-in-out;
	transition: var(--test);
}
.checkBox:hover{
	background: var(--opthvr);
}
.checkBox:hover label{
	padding-left: .2rem;
	transition: var(--test);
}
.checkBox label {
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: var(--test);
	-webkit-tap-highlight-color: rgba(0,0,0,0);   
}
.checkBox input[type="checkbox"] {
	visibility: hidden;
	display: none;
}
.checkBox i {
	width: var(--chksize);
	margin-right: calc(var(--chksize) * 0.55);	
}
.checkBox i:after {
	content: ' ';
	display: block;
	height: var(--chksize);
	width: var(--chksize);
	position: absolute;
	top: calc(var(--chksize) * 0.25);
	left: 0;
	border: calc(var(--chksize) * .1) solid var(--prmtxt1);	
	transition: 100ms ease-in-out;
}
.checkBox input:checked ~ i:after {
	border-top-style: none; 
	border-right-style: none;
	-ms-transform: rotate(-45deg); 
	transform: rotate(-45deg);
	height: calc(var(--chksize) * .35);
	top: calc(var(--chksize) * 0.35);
	border-color: var(--check);
}
.form_search input{
	width: 17em;
	color: var(--prmtxt1);
	caret-color:var(--prmtxt1);
	outline:none;
	border-radius:2px;
	background: transparent;
	border:1px solid var(--qrtclr);
	transition: all 0.3s ease;
}
.form_search input[type="text"]:hover{
	outline:none;
	background: var(--filter_hvr);
	border:1px solid var(--bordr_hvr);
}
.form_filter input[type="text"],
.form_filter select{
	width: 9em;
	outline:none;
	border-radius:2px;
	background: transparent;
	border:1px solid var(--qrtclr);
	transition: all 0.3s ease;
}
.form_filter select{
	color: #757575;
}
.form_filter input[type="text"],
.form_filter option{
	color: var(--prmtxt1);
	caret-color:var(--prmtxt1);
}

.form_filter input[type="text"]:hover{
	outline:none;
	background: var(--filter_hvr);
	border:1px solid var(--bordr_hvr);
}
.form_filter form,
.form_filter option,
.form_filter option:disabled{
	padding:0px;
	background:var(--filter_form);
	width: 9em;			
	position:absolute;
	z-index:1;
	display:grid;
	gap:1px 3px;
	grid-template-columns: 1.3em auto;
	align-items: center;
	overflow:scroll;
	max-height:0px;
	transition: all 0.2s ease;
}
.form_filter form.active{
	padding:2px;
	max-height:300px;
}

.form_filter form input[type="checkbox"]{
	width: 1em;
	height: 1em;
}
.form_sort{
	cursor: pointer;
	gap: 2px;
	max-height: 28px;
	overflow:hidden;
	display:flex;
	align-items: center;
}
.form_sort i{
	font-size:23px;
}
.date_pick input:focus~label{
	caret-color: transparent !important;
}
.file_attach{
	margin: 14px auto;
	position: relative;
	overflow: hidden; 
	height: 18rem;
	
}
.file_attach input[type="file"]{
	cursor: pointer;
}
.file_attach input{
	opacity: 0;
}
.file_attach input::-webkit-file-upload-button {
visibility: hidden;
}

.imgPrev{
	display: none;
}
.imgArea{
	border: 2px solid var(--formclr);
	border-radius: 6px;
	overflow: hidden;
	position: absolute;
	width: 100% !important;
	height: 100%;
	bottom: 0%;
}
.img_file{
	position: absolute;
	margin: auto;
	display: flex; 
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100% !important;
	height: 100%;
	padding: 20px;
}
.img_file img {
	max-width: 100%;
	max-height: 100%; 
	width: auto; 
	height: 75%;
}
.upld{
	font-size: 11rem;
}
.attext{
	text-align: center;
}

.disp_add {
	min-height: 30em;
	width: 36vw;
	margin: 5vh auto;
	overflow: visible !important;
}



/* ALL NECESSETIES FOR TABLE INTERFACE */
.card_table tbody{
	display:block;
	overflow-y:scroll;
	max-height: 40em;
	width: 100%;
}
.card_table thead th:nth-child(2),
.card_table td:nth-child(2) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 12em;
	width: 12em;
}
.card_table thead th:nth-child(3),
.card_table td:nth-child(3) {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 102px;
	min-width: 102px;
	max-width: 102px;
}	
.table_disp{
	overflow: hidden;
	padding:5px 12px 20px;
	border-radius:12px;
	background-color:var(--tablebg) ;
}
.dashcard table,
.table_list{
	cursor: pointer;
	position:relative;
}


.dashcard table tbody,
.table_list tbody{
	display: block;
	overflow: auto;
}
.table_list tbody{
	max-height: 38em;
	min-height: 38em;
}
.dashcard table tbody{
	max-height: 11rem;
}
.dashcard table td,
.table_list td{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dashcard table thead,
.dashcard table tbody tr,
.table_list thead,
.table_list tbody tr{
	display:table;
	table-layout:fixed;
	width:100%;			
}
.dashcard table th,
.dashcard table td,
.table_list th,
.table_list td{
	padding:.5em 0.7em;
	border-bottom:1px solid var(--prmtxt1);
}
.table_list tr:hover td{
	transform:translateX(5px);
	transition: all 0.4s ease;
}
.dashcard table tbody tr:hover,
.table_list tbody tr:hover{
	background-color: rgba(210, 210, 210, 0.4);
}

.table_title{
	color: var(--qrtclr);
	padding:15px 13px ;
	display:flex;
	justify-content:space-between;
}
.table_listsm{
	display: none;
}


/* BUTTONS */

/* CARD CONTENTS */
._btn{
	display: flex;
	align-items: center;
	border-radius:5px;
	cursor: pointer;
	text-align:center;
	padding: 5px 7px;
	background-color:var(--prmclr);
	color:var(--terclr);
	transition: all .3s;
}
._btn i,._btn span {
	margin-right:4px;
}
._btn:hover{
	background-color:var(--btnbg_hvr);
}
.table_tools{
	padding:15px 10px;
	display:grid;
	grid-template-columns:auto auto 10em 9em;
	gap:10px;	
}

.sort_text{
	margin-left: 3px;
}
.sortog{
	display:flex;
}
.headtitle{
	text-align:center;
	margin-top:1vh;
}
.numteb{
	cursor: default;
	position:relative;
	width:100%;
	
}
.numteb thead,
.numteb tbody tr{
	display:table;
	table-layout:fixed;
	width:100%;			
}
.numteb th,
.numteb td{
	border-color: #c0d2ff !important;
	color:var(--qrtclr);
	padding:.5em 0.7em;
	border-bottom:1px solid var(--prmtxt1);
}
.numteb th:first-child,
.numteb td:first-child {
	width: 3em;
}
.numteb th:last-child,
.numteb td:last-child {
	width: 3em;
}
.numteb tr:hover td{
	/* transform:translateX(3px); */
	transform: scale(1.03);
	transition: all 0.4s ease;
}
.numteb tbody tr:hover{
	background-color: rgba(192, 231, 251, 0.4);
}
.action_ico i{
	cursor: pointer;
	transition: all .3s ease;
}
.action_ico i:hover{
	opacity: .7;
}
.disabled input {
	border-radius: 0px;
	border-top:0;
	border-right:0;
	border-left:0;
	border-bottom: 1px solid var(--formclr);
}
.btns_cont{
	text-align:center;
	margin-top:1rem;
}
.btn_pcd,
.date_pcd{
	border: 0;
	color:#fff;
	cursor: pointer;
	display: inline-block;
	background: #1e4db9;
	width: 5rem;
	text-align: center;
	padding: 5px 0;
	border-radius: 3px;
	user-select: none;
}
.btn_pcd:hover{
	background: #2656c7;
}
.btn_cnl,
.date_cnl{
	user-select: none;
	border: 0;
	color:#fff;
	cursor: pointer;
	display: inline-block;
	background: #cd2424;
	width: 5rem;
	text-align: center;
	padding: 5px 0;
	border-radius: 3px;
}
.btn_cnl:hover{
	background: #d02f2f;
	
}
.blur{
	filter: blur(5px);
}


/* FOR PROGRESS BAR */
.progbar{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 40rem;
	width: 100%;
	margin: auto;
}
.progbar .steps{
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.steps .circle{
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	height: var(--prog_circle);
	width: var(--prog_circle);
	color: #999;
	font-size: 22px;
	font-weight: 500;
	border-radius: 50%;
	background: #fff;
	border: 4px solid #e0e0e0;
	transition: all 200ms ease;
	transition-delay: 0s;
	z-index: 1;
}
.steps .circle.done{
	transition-delay: 100ms;
	border-color: #6ba768;
	color: #6ba768;
}
.steps .circle.reject {
	border-color: #b94545;
	color: #b94545;
}
.steps .circle.active {
	transition-delay: 100ms;
	border-color: #4070f4;
	color: #4070f4;
}
.steps .barstat {
	position: absolute;
	height: 4px;
	width: 100%;
	background: #e0e0e0;
}
.barstat .stat {
	position: absolute;
	height: 100%;
	width: 0%;
	background: #4070f4;
	transition: all 300ms ease;
}
.step_txt{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	text-wrap: wrap;
	font-size: var(--prog_txt);
	transition: all 200ms ease;
	transition-delay: 0s;
	user-select: none;
	text-align: center;
}


/******************/
/** DATE PICKER ***/
/******************/
.moDate {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	justify-content: center;
	align-items: center;
	z-index: 999;
}
.moDate_content {
	position: relative;
	display:flex;
	margin: auto;
	width: 35vw;
	height: 390px;
	top: 10%;
	border-radius: 2px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
	flex-direction: row;
	justify-content: space-between;		
}
.date_cur{
	user-select: none;
	flex: 1;
	padding:15px;
	background-color: var(--prmclr);
}
.ui-datepicker {
	width: auto;
}
.ui-widget-header {
	border: 0;
	background: transparent;
}
.ui-widget-content .ui-state-highlight{
	color:purple;
}
.ui-widget-content .ui-state-default{
	border:0;
	border-radius: 50px;
	height: 2.8em;
	width: 2.9em;
	background: white;
}
.ui-widget-content .ui-state-active{
	background-color: var(--dtnow);
	color:var(--prmtxt1);
}
.ui-widget.ui-widget-content{
	border: 0px;
}
.ui-datepicker td a,
.ui-datepicker-unselectable .ui-state-default{
	display: flex;
	 align-items: center;
	justify-content: center;
}

.ui-datepicker-prev:hover, .ui-datepicker-next:hover{
	background:none;
	border:none;
}

/* ICON CHANGE ON DATEPICKER */
.ui-datepicker-prev ,
.ui-datepicker-next {
	display: none;
}
.ui-datepicker-month,
.ui-datepicker-year{
	border: 0;
}
.ui-datepicker select.ui-datepicker-year{
	width: 30%;
}
.date_ui{
	background: white !important;
	width: 22rem;
	display: flex;
	flex-direction: column;
}
.date_calendar{
	flex: 1;
}
.date_year,
.date_det{
	color: var(--prmtxt2);
}
.date_footer{
	display: flex;
	justify-content: flex-end;
	gap:5px;
	padding: 7px;
}

/* SORT OPTIONS ANIMATION */
.slideDown,
.slideUp {
	position: relative;
	opacity:0;
}
.slideDown{
	top:-40px;
	animation: slideDown ease .4s forwards;
}

.slideUp{
	top:40px;
	animation: slideUp ease .5s forwards;
}
@keyframes slideUp {
	0% {transform: translateY(0);}
	100% {transform: translateY(-40px);opacity:1;}
}

@keyframes slideDown {
	0% {transform: translateY(0);}
	100% {transform: translateY(40px);opacity:1;}
}
/******************/
/***** PRELOADER *****/
/******************/
.preload {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.preload_text {
	color: var(--prmtxt3);
	font-family: 'Montserrat', sans-serif;
	display: inline-block;
	margin-left: 5px;
}
.bounceball {
	position: relative;
	display: inline-block;
	height: 64px;
	width: var(--wball);
	&:before {
		position: absolute;
		content: '';
		display: block;
		top: 0;
		width: var(--wball);
		height: var(--hball);
		border-radius: 50%;
		background-color: var(--prmtxt3);
		transform-origin: 50%;
		animation: bounce 500ms alternate infinite ease;
	}
}

@keyframes bounce {
	0% {
		top: var(--hbounce);
		height: 5px;
		border-radius: 60px 60px 20px 20px;
		transform: scaleX(2);
	}
	35% {
		height: var(--hball);
		border-radius: 50%;
		transform: scaleX(1);
	}
	100% {
		top: 0;
	}
}

/******************/
/***** NAVBAR *****/
/******************/
.navbar-brand, 
.navbar-brand:hover{
	color:var(--terclr);
	cursor:pointer;
}
.nav-wrap{
	display:flex;
	justify-content:space-between;
	margin:0 1vw;
}
.menu-button, .menu-phone{
	margin-right:1vw;
	cursor:pointer;
}
.menu-phone,.sidebar-modal{
	display:none;
}
.notif{
	font-size:x-large;
}
.profile_area{
	display:flex;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}
.profile_image {
	width: var(--pfp);
	height: var(--pfp);
	border-radius: 50%;
	border: 3px solid #63b700;
	overflow: hidden;
}
.profile_image img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.profile_name{
	margin-right:1vw;
}
.profile-dropdown{
	position: relative;
	width: fit-content;
}
.profile-dropdown ul,
.profile-dropdown ul li{
	list-style: none;
}
.profile-dropdown ul{
	padding-left:0;
}
.profile-dropdown-btn{
	display: flex;
	align-items: center;
	width:150px;
	justify-content:space-between;
	padding-right: 1rem;
	font-size: 0.9rem;
	font-weight: 500;
	border-radius: 50px;
	cursor: pointer;
	transition: box-shadow 0.2s, background-color 0.2s;
}
.profile-dropdown-btn span {
	margin: 0 0.5rem;
	margin-right: 0;
}
.profile-dropdown-list{
	position: absolute;
	top:58px;
	width:220px;
	right:0;
	background-color:var(--terclr);
	max-height:0;
	overflow:hidden;
	z-index: 999;
	transition: all 0.2s ease;	
}
.profile-dropdown-list.active{
	max-height:500px;
}
.profile-dropdown-list hr{
	border:0.5px solid var(--prof-hr);
	margin:6px;
}
.profile-dropdown-list-item{
	padding: 0.3rem 0 0.5rem 1rem;
	transition:background-color 0.2s,padding-left 0.2s;
}
.profile-dropdown-list-item:hover{
	padding-left: 1.5rem;
	background-color:var(--hoverclr1);
}
.profile-dropdown-list-item:hover a{
	color:var(--prmtxt2);
}
.profile-dropdown-list-item a {
	display:flex;
	align-items:center;
	text-decoration:none;
	font-size:0.9rem;
	font-weight:500;
	color:var(--prmtxt3);
}
.profile-dropdown-list-item a i{
	margin-right:1rem;
	font-size:1.1rem;
	width:2.1rem;
	height:2.1rem;
	line-height:2.3rem;
	text-align:center;
	border-radius:50%;
}
/* STATUS INDICATOR */
.acc_indicate {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 13px;
}
.stat_en {
	background-color: green;
}
.stat_dis {
	background-color: red;
}
/******************/
/**** SIDEBAR *****/
/******************/
.sidebar{
	overflow-y:auto;
	max-height: calc(100vh - 60px);
	flex-wrap:nowrap;
	background-color:var(--terclr);
}
.sidebar_full{
	width:18vw;
	transition: width 0.3s ease;
}
.sidebar_ico{
	white-space:nowrap;
	width:50px;
	transition: width 0.3s ease;
}
.sidebar_ico:hover{
	width: 18vw;
}
.sidebar_item {
	padding:0;
	list-style:none;
	margin-bottom: 0;
}

.sidebar_item > li {
	margin: 0;
}

.sidebar_item > li > a {
	padding: 0.3em 0;
	color: var(--prmtxt3);
	text-decoration: none;
	display: flex;
	align-items: center;
	white-space: nowrap;
	justify-content: space-between;
	transition: background-color 0.3s ease;
}

.sidebar_item > li > a > span {
	display: flex;
	align-items: center;
}

.sidebar_item i {
	margin-left: 13px;
}

.sub_category > li:hover a,
.sub_category > li.active a{
	color: var(--terclr);
}
.sidebar_item > li > a:hover,
.sidebar_item > li.active > a,
.sub_category > li:hover,
.sub_category > li.active{
	color: var(--terclr);
	background-color: var(--prmclr);
}

.sidebar-text {
	font-size: 1.3rem;
	transition: opacity 0.2s linear;
	margin-left: 0.5rem;
	line-height: 1;
}
.sidebar.sidebar-text:hover {
	opacity: 1;
}
.sub_category {
	max-height: 0;
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	transition: max-height 0.3s ease;
}
.sub_category li{
	padding: 0.3em 0 0.3em 1em;
	transition: padding-left 0.3s ease;		
}
.togPad{
	padding-left: 0 !important;
}
.sidebar_ico:hover .togPad{
	padding-left: 1em !important;
}
.sub_category > li > a {
	color: var(--prmtxt3);
	text-decoration: none;
	display: flex;
	align-items: center;
	white-space: nowrap;
	justify-content: space-between;
	transition: background-color 0.3s ease;
}
.sub_category > li > a > span {
	display: flex;
	align-items: center;
}
  
.sub_ico{
	transition:all 0.3s ease;
}
.sub_ico.active{
	transform: rotate(-90deg);
}
.numtif{
	margin-right:13px;
	font-weight:bold;
}
.spacer{
	display:block;
	height:5vh;
}
.sidebar-modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 275px;
	overflow-y:auto;
	height: 100%;
	flex-wrap:nowrap;
	background-color:var(--terclr);
	z-index: 9999;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}
.sidebar-content {
	padding: 20px 0;
	color: #fff;
}
.sidebar-modal.open {
	transform: translateX(0);
}


/******************/
/**** MAIN VW *****/
/******************/

.content_container{
	transition: all 0.5s ease-in-out;
	scroll-behavior: smooth;
	flex:1;
	overflow: auto;
	max-height: calc(100vh - 60px);
	padding:15px 15px;
	background-color: var(--content-bg);
}
.wrapper{
	display:flex;
	flex-direction: column;
	min-height:100vh;
	max-height:100vh;
}


/**************************************/
/**** FILL UP FORMS/EMPLOYEE FORM *****/
/**************************************/
.employee_form{
	display:grid;
	gap:13px 8px;
	justify-content: center;
	grid-template-columns:auto auto;
}


/**************************/
/******* BIG SCREEN *******/
/**************************/
@media screen and (min-width: 1200px){
	.moDate_content {
		width: 40rem;
	}
}

/**************************/
/***** MEDIUM SCREEN ******/
/**************************/
@media screen and (max-width: 1199px) and (min-width: 769px) {
	.form_fillup,
	.form_select,
	.form_multisel{
		width: 27vw;
	}
	.moDate_content {
		width: 40rem;
	}
}

/**************************/
/***** SMALL SCREEN *******/
/**************************/
@media screen and (max-width: 768px){
	.sidebar_full,
	.sidebar_ico,
	.menu-button{
		display:none;
	}
	.menu-phone{
		display:inline-block;
	}
	.sidebar-modal{
		display: block;
	}
	
	.table_listsm{
		display: block;
	}
	.table_tools{
		grid-template-columns: auto 11em 7em 3em;
		gap: 6px;
	}
	.form_fillup,
	.form_select,
	.form_multisel{
		width: 67vw;

	}
	.employee_form{
		gap:20px 8px;
	}
	.sortog .sort_text,
	.sortog .sort_tx{
		display: none;
	}
	.sortog:before {
		content: "Sort";
	}
	.form_sort{
		width: 9em;
	}
	.action_ico i{
		font-size: 18px;
	}
	.form_search input{
		width: 10em;
	}
	.form_filter,
	.form_filter form,
	.form_filter input[type="text"],
	.form_filter select{
		color: var(--qrtclr);
		width: 7em;
	}
	.disp_add {
		width: 91vw !important;
	}
	.dashcard table tbody{
		max-height: 14rem;
	}
	.table_list tbody{
		max-height: 38em;
		min-height: 38em;
	}
	.dashcard table tr:nth-child(odd),
	.table_list tr:nth-child(odd) {
		background: var(--strip);
	}
	.dashcard table,
	.table_list table { 
		color:var(--prmtxt1);
		border-collapse: collapse;
		width: 100%; 
	}
	/* .dashcard table,
	.dashcard table thead,
	.dashcard table tbody,
	.dashcard table th,
	.dashcard table td,
	.dashcard table tr, */
	.table_list table,
	.table_list thead,
	.table_list tbody,
	.table_list th,
	.table_list td,
	.table_list tr { 
		display: block; 
	}
	.dashcard table thead tr,
	.table_list thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.dashcard table tr,
	.table_list tr { 
		border: 1px solid #ccc; 
	}
	.dashcard table td,
	.table_list td { 
		border: none;
		position: relative;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 40vw; 
	}
	.dashcard table td:before,
	.table_list td:before { 
		position: absolute;
		left: 6px;
		width: 30%; 
		padding-right: 10px; 
		white-space: nowrap;
		content: attr(data-column);
		font-weight: bold;
	}
	.numteb th:first-child,
		.numteb td:first-child {
		display: none;
	}
	.numteb td:last-child{
		width: auto;
	}
	.moDate_content {
		flex-direction: column;
		width: 22.1rem;
	}
}
/**************************/
/****** PHONE SCREEN ******/
/**************************/
@media (max-width: 412px){
	.sidebar-modal{
		display: block;
	}
	.table_tools{
		grid-template-columns: 7em 7em 4em 3em;
	}
	.form_search input{
		width: 7em;
	}
	.form_fillup,
	.form_select,
	.form_multisel{
		width: 75vw;
	}
	.employee_form{
		grid-template-columns: 1fr;
	}
	.employee_form div{
		margin: 0 auto;
	}

	
}
/* MATERIALIZE SETTINGS */