@import url(./yekanbakh.css);
@import url(./fontawesome.css);
@import url(./chosen.css);
@import url(./croppie.css);
@import url(./datatables.min.css);
@import url(./persian-datepicker.css);

html, body{
	background: #f7f7f7;
	margin: 0;
	padding: 0;
	font-family: 'YekanBakh', Calibri;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.rtl {
	direction: rtl;
	text-align: right;
}
.ltr {
	direction: ltr;
	text-align: left;
}
a{
	text-decoration: none;
}
img{
	border:0;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.start {
    flex: 1 0 0;
}
.cover{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2000;
	backdrop-filter: blur(0.3rem);
	background: #bac7e54d;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	user-select: none;
	transition: .25s opacity;
}
.cover.active{
	opacity: 1;
	pointer-events: auto;
	user-select: auto;
}
.header .left-menu .menu::-webkit-scrollbar-track,
.right ul.menu::-webkit-scrollbar-track,
.chosen-container .chosen-results::-webkit-scrollbar-track,
.window .window-main::-webkit-scrollbar-track,
.big-table::-webkit-scrollbar-track{
	background-color: #e1e1e1;
}
.header .left-menu .menu::-webkit-scrollbar,
.right ul.menu::-webkit-scrollbar,
.chosen-container .chosen-results::-webkit-scrollbar,
.window .window-main::-webkit-scrollbar{
	width: .4em;
}
.big-table::-webkit-scrollbar{
	height: .4rem;
}
.header .left-menu .menu::-webkit-scrollbar-thumb,
.right ul.menu::-webkit-scrollbar-thumb,
.chosen-container .chosen-results::-webkit-scrollbar-thumb,
.window .window-main::-webkit-scrollbar-thumb,
.big-table::-webkit-scrollbar-thumb{
	background-color: #c1c1c1;
}

/* Header Start */

.header{
	background: #ffffff;
	height: 4em;
	border-bottom: .0625rem solid #f1f1f1;
	box-shadow: 0 0 0.75em #0000000d;
	z-index: 99;
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	min-width: 20em;
}
.header .right-menu,
.header .left-menu
{
	display: flex;
}
.header .right-menu{
	float: right;
	margin-right: 16rem;
	transition: .5s margin-right cubic-bezier(0.82, 0.02, 0.12, 0.99);
}
.header .right-menu.hidden{
	margin-right: 0;
}
.header .right-menu .link,
.header .left-menu .group-menu .link{
	cursor: pointer;
	float: right;
	user-select: none;
}
.header .right-menu .link.headerlogo{
	display: none;
}
.header .right-menu .link.headerlogo a{
	margin: .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.header .right-menu .link.headerlogo a,
.header .right-menu .link.headerlogo a img{
	width: 2rem;
	height: 2rem;
}
.header .right-menu .link .menuopener,
.header .left-menu .group-menu .link .notification{
	font-size: 1.25rem;
	border-radius: 100%;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: .75rem;
	position: relative;
}
.header .right-menu .link:hover .menuopener,
.header .left-menu .group-menu .link:hover .notification,
#jqnotif.active .notification{
	background: #e9f7ff;
}
.header .left-menu{
	float: left;
}
.header .left-menu .group-menu{
	position: relative;
}
.header .right-menu,
.header .left-menu .group-menu,
.header .left-menu .group-menu .link,
.header .left-menu .group-menu .link.username a img,
.header .left-menu .group-menu .link.username a .text,
.header .left-menu .group-menu .link.username a .arrow{
	display: inline-block;
}
.header .left-menu .group-menu .link .notification.active:before{
	content: '';
	width: .7rem;
	height: .7rem;
	position: absolute;
	background: #ff3d3d;
	border-radius: 100%;
	left: .55rem;
	top: .55rem;
	border: .2rem solid #ffffff;
	box-sizing: border-box;
	z-index: 1;
}
.header .left-menu .group-menu .link:hover .notification.active:before,
#jqnotif.active .notification.active:before{
	border: .2rem solid #e9f7ff;
}
.header .left-menu .group-menu .link.username  a img,
.header .left-menu .group-menu .link.username  a .text,
.header .left-menu .group-menu .link.username  a .arrow,
.header .left-menu .group-menu .menu.notifection ul li.seeall a i,
.header .left-menu .group-menu .menu.notifection ul li b i,
.header .left-menu .group-menu .menu.notifection ul li span a i,
.header .left-menu .group-menu .menu.user ul li a i,
.last-notification li b i,
.last-notification li span a i,
.main .button.add-butt i{
	vertical-align: middle;
}
.header .left-menu .group-menu .link.username a img{
	height: 2.5rem;
	width: 2.5rem;
	margin: .75rem .75rem .75rem 0;
	border-radius: 100%;
	box-sizing: border-box;
	box-shadow: 0 .15rem .1em #efefef;
}
.header .left-menu .group-menu .link.username a .text{
	margin: 0 .5rem 0 1rem;
}
.header .left-menu .group-menu .link.username a .text .name{
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 10rem;
}
.header .left-menu .group-menu .link.username a .text .name.title{
	font-size: .8em;
    font-weight: 600;
    color: #000000;
}
.header .left-menu .group-menu .link.username a .text .name.position{
	font-size: .7em;
    font-weight: 300;
    color: #b7b7b7;
}
.header .left-menu .group-menu .link.username a .arrow{
	margin: 0 0 0 1rem;
	font-size: .7rem;
}
.header .left-menu .group-menu .link.username a .arrow i{
	transform: rotate(0);
	transition: .2s transform;
}
.header .left-menu .group-menu .link.username a .arrow.active i{
	transform: rotate(180deg);
}
#jquser a .arrow i{
	transform: rotate(0);
	transition: .2s transform;
}
#jquser.active a .arrow i{
	transform: rotate(180deg);
}
.header .left-menu .group-menu .menu{
	position: absolute;
	background: #ffffff;
	box-sizing: border-box;
	border: .0625rem solid #f1f1f1;
	box-shadow: 0 .5em .75em #0000000d;
	border-radius: .5rem;
	overflow: hidden;
	overflow-y: auto;
	top: 4.5rem;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	left: 0;
	transition: .2s opacity, .2s top;
}
.header .left-menu .group-menu .menu.active{
	opacity: 1;
	user-select: auto;
	pointer-events: auto;
	top: 4rem;
}
.header .left-menu .group-menu .menu.notifection{
	width: 20rem;
	max-height: 30rem;
}
.header .left-menu .group-menu .menu.user{
	width: 15rem;
	max-height: 20rem;
	padding: .5rem;
}
.header .left-menu .group-menu .menu.notifection ul li.notfound,
.header .left-menu .group-menu .menu.notifection ul li.seeall,
.header .left-menu .group-menu .menu.notifection ul li.title{
	font-size: .7em;
}
.header .left-menu .group-menu .menu.notifection ul li.seeall,
.header .left-menu .group-menu .menu.notifection ul li.title{
	display: inline-block;
	font-weight: 700;
	margin: 0;
	padding: 0;
	border-radius: 0;
	margin-top: 1rem;
	margin-bottom: .5rem;
}
.header .left-menu .group-menu .menu.notifection ul li.seeall{
	float: left;
}
.header .left-menu .group-menu .menu.notifection ul li.title{
	color: #3267e9;
	margin-right: .5rem;
}
.header .left-menu .group-menu .menu.notifection ul li.seeall a{
	padding: .25rem .5rem;
	background: #e9f7ff;
	color: #3267e9;
	border-radius: 0 .5rem .5rem 0;
	transition: .25s padding;
}
.header .left-menu .group-menu .menu.notifection ul li.seeall a:hover{
	padding: .25rem 1rem;
}
.header .left-menu .group-menu .menu.notifection ul li.seeall a i,
.header .left-menu .group-menu .menu.notifection ul li b i,
.header .left-menu .group-menu .menu.notifection ul li span a i,
.last-notification li b i,
.last-notification li span a i{
	margin-left: 0.25rem;
}
.header .left-menu .group-menu .menu.notifection ul li{
	border-radius: .5em;
	padding: .5em;
	box-sizing: border-box;
	margin: .5em;
	transition: 2s background;
}
.header .left-menu .group-menu .menu.notifection ul li.active{
	background: #f3effe;
}
.header .left-menu .group-menu .menu.notifection ul li b,
.last-notification li b{
	display: inline-block;
	font-size: .7em;
	font-weight: 400;
	background: #3267e9;
	color: #e9f7ff;
	box-sizing: border-box;
	padding: .1rem .5rem;
	border-radius: .5rem;
}
.header .left-menu .group-menu .menu.notifection ul li b i,
.last-notification li b i{
	font-size: .6rem;
}
.header .left-menu .group-menu .menu.notifection ul li span,
.last-notification li span{
	display: block;
	font-size: .75em;
	border-right: 0.0625rem solid #3267e9;
	padding: 0 .5rem;
	box-sizing: border-box;
	margin: .5rem;
}
.header .left-menu .group-menu .menu.notifection ul li span a,
.last-notification li span a{
	display: table;
	font-weight: 600;
	background: #fdf4da;
	color: #e4ac35;
	padding: .2rem .5rem;
	margin-top: .5rem;
	border-radius: .5rem;
	transition: .2s padding;
}
.header .left-menu .group-menu .menu.notifection ul li span a:hover,
.last-notification li span a:hover{
	padding: .2rem 1rem;
}
.header .left-menu .group-menu .menu.user ul{
	font-size: .75em;
}
.header .left-menu .group-menu .menu.user ul li a{
	display: block;
	color: #000000;
	padding: .5rem;
	box-sizing: border-box;
	border-radius: .5rem;
}
.header .left-menu .group-menu .menu.user ul li a:hover{
	background: #e9f7ff;
	color: #3267e9;
}
.header .left-menu .group-menu .menu.user ul li a i{
	margin-left: 0.5rem;
}

/* Header End */

/* Right Start */

.right{
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	width: 16em;
	z-index: 100;
	background: #ffffff;
	border-left: .0625rem solid #f1f1f1;
	box-shadow: 0 0 .75em #0000000d;
	user-select: none;
	transform: translate(0, 0);
	transition: .5s transform cubic-bezier(0.82, 0.02, 0.12, 0.99);
}
.right.hidden{
	transform: translate(100%, 0);
}
.right .logo{
	padding: 1rem;
}
.right .logo,
.login-box .logo{
	height: 1.5rem;
	text-align: center;
}
.right .logo .image,
.login-box .logo .image{
	background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 1.8867rem;
	height: 1.5rem;
	display: inline-block;
	position: absolute;
}
.right .logo h1,
.login-box .logo h1{
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	padding: .1rem 2.2rem 0 0;
	display: inline-block;
}
.right ul.menu{
	overflow-x: hidden;
	overflow-y: auto;
	height: calc(100% - 3.5rem);
}
.right ul.menu li{
	padding: 0 1rem;
	margin: .5rem 0;
	position: relative;
}
.right ul.menu li.active:before{
	content: '';
	width: .2rem;
	background: #3267e9;
	height: 2rem;
	position: absolute;
	right: 0;
	top: 0;
	margin: auto;
	border-radius: 10rem;
}
.right ul.menu li a{
	font-size: .75rem;
	font-weight: 400;
	display: block;
	padding: .4rem .5rem;
	border-radius: .5rem;
	cursor: pointer;
	height: 2rem;
	box-sizing: border-box;
	color: #000000;
}
.right ul.menu li a:hover,
.right ul.menu li.light a,
.right ul.menu li.light ul.submenu li a:hover,
.right ul.menu li ul.submenu li.light a,
.right ul.menu li.light ul.submenu li.light a{
	background: #e9f7ff;
	color: #3267e9;
}
.right ul.menu li a i{
	font-size: 1.1rem;
	vertical-align: middle;
	margin-left: .5rem;
}
.right ul.menu li a arrow{
	float: left;
}
.right ul.menu li a arrow i{
	margin: 0;
	transform: rotate(0);
	transition: .25s transform;
}
.right ul.menu li a arrow.open i{
	transform: rotate(-90deg);
}
.right ul.menu li.title{
	font-size: .75rem;
	font-weight: 400;
	text-align: center;
	display: block;
	padding: .5rem;
	border-radius: .5rem;
	background: #f3effe;
	color: #b4a4eb;
	margin: .5rem 1rem;
	cursor: default;
}
.right ul.menu ul.submenu{
	margin: .5rem 1rem 0 0;
}
.right ul.menu ul.submenu li{
	border-right: .0625rem solid #3267e9;
	margin: 0;
	padding: .25rem 1rem .25rem 0;
}
.right ul.menu li.light ul.submenu li a{
	background: transparent;
	color: #000000;
}

/* Right End */

/* Footer Start */

.footer{
	margin: .5rem 16.5rem 0 .5rem;
	padding: .5rem;
	min-width: 20rem;
	box-sizing: border-box;
	font-size: .7rem;
	border-top: .0625rem solid #f1f1f1;
	transition: .5s margin cubic-bezier(0.82, 0.02, 0.12, 0.99);
}
.footer.hidden{
	margin: .5rem .5rem 0 .5rem;
}
.footer a{
	color: #ffffff;
	background: #000000;
	padding: 0 .5rem;
	font-weight: 300;
	border-radius: .5rem;
	margin: 0 .25rem;
}
.footer i{
	vertical-align: middle;
}

/* Footer End */

/* Error List Start */

ul.errorlists{
	position: fixed;
	z-index: 5000;
	left: 2rem;
	bottom: 3rem;
	font-size: .75rem;
	font-weight: 600;
	min-width: 20em;
}
ul.errorlists li{
	border-radius: .5rem;
	padding: .5rem;
	cursor: pointer;
	box-sizing: border-box;
	margin: .75rem 0;
    display: block;
    width: 25rem;
}
ul.errorlists li.info{
	background: #e9f7ff;
	color: #3267e9;
	border: .0625rem solid #3267e9;
	box-shadow: 0 0 0.75em #3267e94a;
}
ul.errorlists li.error{
	background: #ffebec;
	color: #ff3d3d;
	border: .0625rem solid #ff3d3d;
	box-shadow: 0 0 0.75em #ff3d3d4a;
}
ul.errorlists li.success{
	background: #e6fffc;
	color: #5fc9bd;
	border: .0625rem solid #5fc9bd;
	box-shadow: 0 0 0.75em #5fc9bd4a;
}
ul.errorlists li i{
	vertical-align: middle;
	margin-left: .5rem;
}

/* Error List End */

/* Login Border Start */

.login-border{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
.login-box{
	background: #ffffff;
	border-radius: 0.5rem;
	padding: 1rem;
	box-sizing: border-box;
	border: 0.0625rem solid #f1f1f1;
	box-shadow: 0 0 0.75em #0000000d;
	width: 30rem;
	height: 25rem;
	min-width: 20em;
}
.login-box .form1{
	padding: 2.5rem 0;
}
.login-box h1.box-title a{
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	font-size: .6rem;
	font-weight: 400;
	margin: 0 .4rem 0 0;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
	background: #e6fffc;
	color: #5fc9bd;
	vertical-align: middle;
}
.login-box h1.box-title a:hover{
	background: #5fc9bd;
	color: #e6fffc;
}

/* Login Border End */

/* Form Start */

form .form-fild{
	position: relative;
	margin: 1rem 0;
}
form .form-fild.ptime{
	margin: 0 0 1rem 0;
}
form .form-fild.hint{
	margin: 0;
}
form .form-fild.pad{
	margin: 1rem .5rem 0rem .5rem;
}
form .form-fild.button{
	text-align: left;
}
form .form-fild.button.bz{
	margin: 1rem 0 0 0;
}
form .form-fild input,
form .form-fild select,
form .form-fild textarea,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
	width: 100%;
	box-sizing: border-box;
	border: 0.0625rem solid #dfdfdf;
	font-family: 'YekanBakh', Calibri;
	font-weight: 400;
	font-size: .75rem;
	padding: 0.75rem;
	outline: none;
	border-radius: 0.5rem;
	transition: .2s all;
	background: #ffffff;
}
form .form-fild select,
.dataTables_wrapper .dataTables_length select{
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z"/></svg>');
	background-repeat: no-repeat;
	background-size: 0.75rem;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-position-y: 1rem;
	background-position-x: 1rem;
	padding: 0.75rem 0.75rem 0.75rem 2rem;
}
form .form-fild textarea{
	min-height: 6rem;
	resize: vertical;
	display: block;
}
form .form-fild input::-webkit-outer-spin-button,
form .form-fild input::-webkit-inner-spin-button,
.main .tab-add-box .border .list-added ul li div input::-webkit-outer-spin-button,
.main .tab-add-box .border .list-added ul li div input::-webkit-inner-spin-button,
table.table.planning input::-webkit-outer-spin-button,
table.table.planning input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
form .form-fild input[type='number'],
.main .tab-add-box .border .list-added ul li div input[type='number'],
table.table.planning input[type='number'] {
	-moz-appearance:textfield;
}
form .form-fild input[type="time"]::-webkit-calendar-picker-indicator,
.main .tab-add-box .border .list-added ul li div input[type="time"]::-webkit-calendar-picker-indicator {
	display: none;
}
form .form-fild input[type="time"]::-webkit-inner-spin-button,
form .form-fild input[type="time"]::-webkit-outer-spin-button,
.main .tab-add-box .border .list-added ul li div input[type="time"]::-webkit-inner-spin-button,
.main .tab-add-box .border .list-added ul li div input[type="time"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
form .form-fild input[type="time"],
.main .tab-add-box .border .list-added ul li div input[type="time"] {
	appearance: none;
	-webkit-appearance: none;
}
form .form-fild input.password {
	padding: .75rem .75rem .75rem 3rem;
}
form .form-fild input:focus,
form .form-fild select:focus,
form .form-fild textarea:focus,
.dataTables_wrapper .dataTables_filter input:focus{
	border: .0625rem solid #3267e9;
}
form .form-fild.error input,
form .form-fild.error select,
form .form-fild.error textarea{
	border: 0.0625rem solid #ff3d3d;
}
form .form-fild label{
	position: absolute;
	font-size: .75rem;
	font-weight: 400;
	color: #ababab;
	right: .75rem;
	top: .75rem;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: calc(100% - 3rem );
	transition: .15s all;
}
form .form-fild input:focus ~ label,
form .form-fild input.notempty ~ label,
form .form-fild select ~ label,
form .form-fild input:not(:placeholder-shown) ~ label,
form .form-fild textarea:focus ~ label,
form .form-fild textarea.notempty ~ label{
	right: 1rem;
	top: -.5rem;
	background: #ffffff;
	padding: 0 .5rem;
	font-size: .6rem;
}
form .form-fild input:focus ~ label,
form .form-fild select:focus ~ label,
form .form-fild input.notempty:focus ~ label,
form .chosen-container.chosen-with-drop ~ label,
form .chosen-container.chosen-container-active ~ label,
form .form-fild textarea:focus ~ label,
form .form-fild textarea.notempty:focus ~ label{
	color: #3267e9;
}
form .form-fild.error input:focus ~ label,
form .form-fild.error input.notempty ~ label,
form .form-fild.error select ~ label,
form .form-fild.error textarea:focus ~ label,
form .form-fild.error textarea.notempty ~ label{
	color: #ff3d3d;
}
form .form-fild span.er{
	font-size: .7rem;
	color: #ff3d3d;
	font-weight: 500;
	display: none;
	padding: .25rem 0;
	position: relative;
}
form .form-fild .chosen-single span{
	font-size: .75rem;
	color: #000000;
	padding: 0;
	position: relative;
}
form .form-fild.error span.er:before{
	font-family: "Font Awesome 6 Pro";
	content: "\f06a";
	padding: 0 0 0 .25rem;
	vertical-align: middle;
}
form .form-fild.error span.er{
	display: block;
}
form .form-fild button,
form .form-fild .button,
.main a.button{
	background: #3267e9;
	border: none;
	font-size: .85rem;
	font-family: 'YekanBakh', Calibri;
	color: #e9f7ff;
	border-radius: 0.5rem;
	padding: 0.75rem 1rem;
	box-sizing: border-box;
	cursor: pointer;
	min-width: 10rem;
	display: inline-block;
	text-align: center;
}
.main .button.add-butt{
	width: 100%;
}
.main a.button.top-butt{
	width: 100%;
}
.main .button.add-butt i{
	margin-left: 0.25rem;
	opacity: 1;
	position: static;
	font-size: .85rem;
	user-select: auto;
	pointer-events: auto;
}
.main a.button.disabled{
	pointer-events: none;
	user-select: none;
}
form .form-fild button.delete,
form .form-fild .button.delete{
	color: #ffebec;
	background: #ff3d3d;
}
form .form-fild button:hover,
form .form-fild .button:hover,
.main a.button:hover{
	background: #4e7def;
}
form .form-fild button.delete:hover,
form .form-fild .button.delete:hover{
	background: #ff6262;
}
form .form-fild button b{
	font-weight: 500;
}
form .form-fild button.loading b{
	display: none;
}
form .form-fild button i{
	font-size: 1rem;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	position: absolute;
	top: .2rem;
}
form .form-fild button.loading i{
	opacity: 1;
	position: relative;
}
form .form-fild button:disabled,
form .form-fild button:disabled:hover,
form .form-fild button.delete:disabled,
form .form-fild button.delete:disabled:hover{
	color: #ffffff;
	cursor: default;
}
form .form-fild button:disabled,
form .form-fild button:disabled:hover{
	background: #c6d6ff;
}
form .form-fild button.delete:disabled,
form .form-fild button.delete:disabled:hover{
	background: #ffdbdb;
}
form .form-fild .password-show{
	position: absolute;
	left: 2.5rem;
	top: 0.45rem;
	font-size: 1rem;
}
form .form-fild .password-show i{
	color: #818181;
	position: absolute;
	box-sizing: border-box;
	padding: 0.5rem 0.25rem;
	cursor: pointer;
	transition: .25s filter, .25s opacity;
}
form .form-fild .password-show i.show,
form .form-fild .password-show.show i.hide {
	opacity: 0;
	filter: blur(0.3rem);
}
form .form-fild .password-show i.hide,
form .form-fild .password-show.show i.show {
	opacity: 1;
	filter: blur(0);
}
form .form-fild .title,
.main .box .box-title{
	font-size: .7rem;
	font-weight: 500;
}
form .form-fild .title span{
	font-weight: 700;
	font-size: .8rem;
	margin: 0 0.25rem;
	color: #3267e9;
}
form .form-fild .title .timerbold{
	font-size: .95rem;
}
form .form-fild .title.blue{
	color: #3267e9;
}
form .form-fild .title a{
	display: table;
	cursor: pointer;
	font-size: .8rem;
	font-weight: 600;
	color: #3267e9;
}
form .form-fild .title a i,
form .form-fild .title i.text{
	vertical-align: middle;
	margin-left: .5rem;
	width: 1rem;
	text-align: center;
}
form .form-fild .title.sendagain a{
	padding: 0.25rem 0;
	font-size: .75rem;
}
form .swich-fild{
	display: flex;
	width: 100%;
	margin-top: 1rem;
	align-items: center;
}
form .swich-fild.fild{
	background: #f9f9f9;
	box-sizing: border-box;
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
	margin: 1rem 0;
	border: .0625rem solid #dfdfdf;
}
form .swich-fild label{
	cursor: pointer;
	width: 100%;
	margin-left: 0.5rem;
	font-size: .75rem;
	font-weight: 400;
	user-select: none;
}
form .swiching {
	position: relative;
	min-width: 2.5rem;
	height: .75rem;
	overflow: hidden;
	border-radius: .5rem;
	float: left;
}
form .swiching .swichingcheckbox,
form .daynight .daynightcheckbox {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}
form .swiching .knobs,
form .daynight .knobs {
	z-index: 2;
}
form .swiching .swichingcheckbox:checked + .knobs:before {
	right: 1.5rem;
	background-color: #b4a4eb;
}
form .swiching .knobs:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 1rem;
	height: 0.75rem;
	border-radius: 0.5rem;
	background-color: #dfdfdf;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
form .swiching .swichingcheckbox:checked ~ .layer {
	background-color: #f0eaff;
}
form .swiching .layer {
	width: 100%;
	background-color: #f3f3f3;
	transition: .3s ease all;
	z-index: 1;
}
form .swiching .knobs,
form .swiching .layer,
form .daynight .knobs,
form .daynight .layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
form .two-section,
.payslip-two-section{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
form .three-section{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
form .two-section .tab,
form .three-section .tab,
.payslip-two-section .tab{
	padding: 0 .5rem;
}
.payslip-two-section .tab.printleft{
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

form .form-fild .file-area {
	position: relative;
	margin: 0 .5rem;
	display: block;
	width: 100%;
	flex: 1;
}
form .form-fild .file-area.full{
	margin: 0;
}
form .form-fild .file-area input[type=file] {
	outline: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	cursor: pointer;
}
form .form-fild .file-area .file-dummy {
	width: 100%;
	background: #f9f9f9;
	text-align: center;
	box-sizing: border-box;
	padding: 1.9rem;
	border: 0.0625rem dashed #dfdfdf;
	overflow: hidden;
	border-radius: 0.5rem;
	font-size: .8rem;
	font-weight: 600;
	height: 5rem;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
	box-sizing: border-box;
	padding: 0.5rem 0.5rem 0.5rem 1.5rem;
	background-position-y: 0.7rem;
	background-position-x: 0.5rem;
}
.dataTables_wrapper .dataTables_filter input{
	width: 15rem;
	margin-right: 0.5rem;
}
.dataTables_wrapper .dataTables_length select{
	width: 5rem;
	margin: 0 0.25rem;
}

/* Form End */

/* Table Page Start */

.big-table{
	overflow-x: auto;
}
table.table{
	border-bottom:none !important;
}
table.table.planning{
	padding: 1rem 0;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}
table.table.dashboard{
    padding: 0;
}
table.table thead th,
table.table tfoot th{
    background: #b4a4eb;
    color: #f3effe;
    font-size: .75rem;
    font-weight: 600;
    border: none;
    text-align: right;
}
table.table tbody td.title{
    background: #e9f7ff;
    color: #3267e9;
    font-size: .7rem;
    font-weight: 500;
    border: none;
    text-align: right;
    padding: .5rem;
}
table.table.planning thead th{
	padding: 0.25rem 0.5rem;
	text-align: center;
	border: 0.0625rem solid #ffffff;
	border-radius: 0.25rem;
	min-width: 4rem;
}
table.table thead.top th:first-child{
    border-radius: 0 .5rem 0 0;
}
table.table thead.top th:last-child{
    border-radius: .5rem 0 0 0;
}
table.table tfoot.bottom th:first-child{
    border-radius: 0 0 .5rem 0;
}
table.table tfoot.bottom th:last-child{
    border-radius: 0 0 0 .5rem;
}
table.table thead.top th.title:first-child,
table.table thead.top th.title:last-child,
table.table tfoot.bottom th.title:first-child,
table.table tfoot.bottom th.title:last-child{
    border-radius: 0;
}
table.table tbody td{
	font-size: .7rem;
	font-weight: 400;
	padding: 0.75rem 0.5rem;
	position: relative;
}
table.table tbody td.bold{
    font-weight: 600;
    font-size: .8rem;
}
table.table tbody td.blue{
    color: #3267e9;
}
table.table.planning tbody td{
	padding: .5rem .1rem;
}
table.table tbody tr:nth-child(even){
	background: #faf8ff;
}
table.table tbody tr:nth-child(even) td{
	border-top: .0625rem solid #f0ebff;
	border-bottom: .0625rem solid #f0ebff;
}
table.table .table-image{
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 100%;
	box-sizing: border-box;
	box-shadow: 0 0.15rem 0.1em #efefef;
	display: block;
	margin: auto;
}
table.table .img{
	width: 2.5rem;
}
table.table .status,
table.table .number{
    width: 3rem;
}
table.table .month{
    width: 4rem;
}
table.table .number,
table.table .month{
	text-align: center;
}
table.table .status .swiching{
	width: 2.5rem;
	margin: auto;
	float: none;
}
table.table .admin{
    width: 8rem;
    min-width: 8rem;
    text-align: center;
}
table.table .admin-month{
    width: 5rem;
    min-width: 5rem;
    text-align: center;
}
table.table tbody tr td.child{
	border-top: 0;
	padding: 0 0.5rem 0.75rem 0.5rem;
	background: #ffffff;
}
table.table tbody tr td.child ul{
	font-weight: 300;
	font-size: .65rem;
}
table.table tbody tr td.child ul li span.dtr-title{
	font-weight: 700;
	position: relative;
}
table.table tbody tr td.child ul li span.dtr-title:after{
	content: ':';
	position: absolute;
	margin: 0 0 0 0.1rem;
}
table.table tbody tr td.child ul li span.dtr-data{
	margin-right: 0.25rem;
}
.dataTables_filter,
.dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info{
	font-size: .75rem;
	padding: 0;
}
.dataTables_filter,
.dataTables_length {
	margin: 0 0 1rem 0;
}
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info{
	margin: 1rem 0 0 0;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
.dataTables_wrapper .dataTables_paginate .paginate_button{
	padding: 0.25rem 0.75rem;
	border: none !important;
	border-radius: .5rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	background: #b4a4eb;
	color: #f3effe !important;
	box-shadow: none;
}
.topform{
	margin-top:1rem;
}
table.table.planning input,
table.table.planning select{
	width: 100%;
	box-sizing: border-box;
	border: 0.0625rem solid #dfdfdf;
	font-family: 'YekanBakh', Calibri;
	font-weight: 400;
	font-size: .75rem;
	padding: 0.25rem 0.5rem;
	outline: none;
	border-radius: 0.5rem;
	transition: .2s all;
	background: #ffffff;
}
table.table.planning thead th.number,
table.table.planning tbody td.number{
	width: 3rem;
	min-width: 3rem;
}
table.table.planning thead th.select,
table.table.planning tbody td.select{
	width: 7rem;
	min-width: 7rem;
}
table.table.planning input:focus{
    border: 0.0625rem solid #3267e9;
}
table.table.planning td.text{
	text-align: center;
}

/* Table Page End */

/* Main Start */

.main{
	margin: 4rem 16rem 0 0;
	transition: .5s margin cubic-bezier(0.82, 0.02, 0.12, 0.99);
	min-width: 20rem;
}
.main.hidden{
	margin: 4rem 0 0 0;
}
.main .one-box,
.main .one-box .tbb,
.main .two-box,
.main .two-box .tbb{
	padding: .5rem;
	box-sizing: border-box;
}
.main .one-box.firstlist{
	padding: .5rem .5rem 0 .5rem;
}
.main .one-box.list{
	padding: .25rem .5rem;
}
.main .one-box.listZiro,
.main .two-box.list{
	padding: 0 .5rem .5rem .5rem;
}
.main .two-box{
	display: table;
	width: 100%;
}
.main .two-box .tbb{
	display: inline-block;
	width: 50%;
	float: right;
}
.main .two-box .tbb.f1{
	width: 40%;
}
.main .two-box .tbb.f2{
	width: 60%;
}
.main .two-box .tbb.b1{
	width: 45%;
}
.main .two-box .tbb.b2{
	width: 55%;
}
.main .box{
	background: #ffffff;
	border-radius: .5rem;
	padding: 1rem;
	box-sizing: border-box;
	border: .0625rem solid #f1f1f1;
	box-shadow: 0 0 .75em #0000000d;
}
.main .box.paysliptrue{
	border: 0.0625rem solid #5fc9bd;
}
.main .box.payslipfalse{
	border: 0.0625rem solid #ff3d3d;
}
.main .box .box-title{
	margin: 1rem 0;
}
.main .box.form{
	padding: 0 1rem;
}
.main .box.form.ovhidden{
	overflow: hidden;
}
.main .box h1.box-title,
.login-box h1.box-title{
	font-size: .85rem;
	font-weight: 600;
}
.main .box h1.box-title.tabletop{
    text-align: center;
    font-size: 1rem;
    margin: 1rem 0;
}
.main .box h1.box-title.tabletop span{
    font-size: 1.5rem;
    margin-left: .25rem;
}
.main .box h1.box-title.tabletop header{
    display: inline-block;
    margin-left: .5rem;
    font-size: .7rem;
    font-weight: 400;
}
.main .box h1.box-title{
	margin: 1.5rem 0;
}
.main .box h1.box-title.subtab{
	margin: 1.5rem 0 .5rem 0;
	font-size: .75rem;
}
.main .box h1.box-title .tag{
	border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    margin: .25rem .25rem 0 .25rem;
    font-size: .75em;
    font-weight: 800;
    background: #ff3d3d;
    color: #ffebec;
    display: inline-block;
}
.login-box h1.box-title{
	margin: 1.5rem 0;
}
.main .box h1.box-title i,
.login-box h1.box-title i{
	vertical-align: middle;
	margin-left: .5rem;
}
.main .box h1.box-title.lock{
	font-weight: 400;
	margin: 1rem 0;
}
.main .box h1.box-title.center{
	text-align: center;
	margin: 1rem 0 0 0;
}
.main .box h1.box-title.lock.center{
	text-align: center;
	margin: 1rem 0;
}
.main .box h1.box-title.bm{
	margin-bottom: 1rem;
}
.main .box h1.box-title.topz{
	margin: 0 0 1.5rem 0;
}
.main .box h1.box-title.topbottomz{
	margin: 0;
}
.main .box h2.box-title{
    margin: 1rem 0 0 0;
}
.main .box h2.box-title i{
    margin-left: .25rem;
}
.main .box h2.box-title span{
    margin-right: .25rem;
    font-size: .8rem;
    font-weight: 600;
    color: #3267e9;
}

/* Main End */

/* Window Start */

.window{
	z-index: 3000;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	max-height: 40rem;
	min-width: 20rem;
	position: fixed;
	box-sizing: border-box;
	border-radius: .5em;
	width: 45rem;
	background: #ffffff;
	border: .0625rem solid #f1f1f1;
	box-shadow: 0 0 .75em #0000000d;
	margin: auto;
	right: 0;
	left: 0;
	transform: translate(0, 5rem);
	transition: .25s opacity, .25s transform;
}
.window.active{
	opacity: 1;
	pointer-events: auto;
	user-select: auto;
	transform: translate(0, 4rem);
}
.window .window-header{
	margin: 1rem;
	height: 2rem;
}
.window .window-header span{
	font-size: 1.2rem;
	width: 2rem;
	height: 2rem;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 0.5rem;
	padding: 0.25rem 0.6rem;
	cursor: pointer;
}
.window .window-header span:hover{
	background: #ffebec;
	color: #ff3d3d;
}
.window.lock .window-header span{
	cursor: default;
}
.window.lock .window-header span:hover{
	background: transparent;
	color: #000000;
}
.window .window-main{
	padding: 0 1rem 1rem 1rem;
	box-sizing: border-box;
	height: calc(100% - 4rem);
}
.window h1{
	margin: 0.5rem 0 1.5rem 0;
	font-size: .85rem;
	font-weight: 700;
}
.window h1 i{
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* Window End */

/* Position Page Start */

ul.office-chart,
h1.office-chart-title,
ul.selected-list{
	font-size: .75rem;
	font-weight: 400;
	margin: 0.5rem 0;
}
h1.office-chart-title{
	margin: 0.5rem 0;
}
ul.office-chart.inside{
	margin: 0 1rem 0 0;
}
ul.office-chart li,
ul.office-chart li span{
	position: relative;
}
ul.office-chart li{
	border-right: .0625rem solid #d3d3d3;
	display: table;
}
ul.office-chart li span{
	padding: .5rem .75rem;
	display: inline-block;
}
ul.office-chart li span:before,
ul.office-chart li:first-child:before,
ul.office-chart li:last-child:after{
	content: '';
	background: #d3d3d3;
	position: absolute;
}
ul.office-chart li:first-child:before,
ul.office-chart li:last-child:after{
	border-radius: 100%;
	width: .3rem;
	height: .3rem;
	right: -.17rem;
}
ul.office-chart li span:before{
	width: .3rem;
	height: .0625rem;
	top: 50%;
	right: 0;
}
ul.office-chart li:first-child:before{
	top: 0;
}
ul.office-chart li:last-child:after{
	bottom: 0;
}
ul.office-chart li .manage,
ul.selected-list li .manage{
	display: inline-block;
	margin-right: .5rem;
}
ul.office-chart li .manage a,
.list-permision .manage a,
.list-added .manage a,
.list-added .manage button,
table.table a.tableadmin,
ul.selected-list li .manage a{
	padding: .25rem .5rem;
	border-radius: .5rem;
	font-size: .65rem;
	font-weight: 400;
	display: inline-block;
	margin: .15rem;
	user-select: none;
	cursor: pointer;
	white-space: nowrap;
	border: 0;
	font-family: 'YekanBakh', Calibri;
}
ul.office-chart li .manage a i,
.list-permision .manage i,
.list-added .manage i,
table.table a.tableadmin i,
ul.selected-list li .manage a i{
	margin-left: .25rem;
	vertical-align: middle;
}
ul.office-chart li .manage a.info,
.list-permision .manage a.info,
.list-added .manage a.info,
table.table a.tableadmin.info{
	background: #e9f7ff;
	color: #3267e9;
}
ul.office-chart li .manage a.edit,
.list-permision .manage a.edit,
.list-added .manage a.edit,
.list-added .manage button.edit,
table.table a.tableadmin.edit,
ul.selected-list li .manage a.edit{
	background: #e6fffc;
	color: #5fc9bd;
}
ul.office-chart li .manage a.delete,
.list-permision .manage a.delete,
.list-added .manage a.delete,
table.table a.tableadmin.delete,
ul.selected-list li .manage a.delete{
	background: #ffebec;
	color: #ff3d3d;
}
ul.office-chart li .manage a.info:hover,
.list-permision .manage a.info:hover,
.list-added .manage a.info:hover,
table.table a.tableadmin.info:hover{
	background: #3267e9;
	color: #e9f7ff;
}
ul.office-chart li .manage a.edit:hover,
.list-permision .manage a.edit:hover,
.list-added .manage a.edit:hover,
.list-added .manage button.edit:hover,
table.table a.tableadmin.edit:hover,
ul.selected-list li .manage a.edit:hover{
	background: #5fc9bd;
	color: #e6fffc;
}
ul.office-chart li .manage a.delete:hover,
.list-permision .manage a.delete:hover,
.list-added .manage a.delete:hover,
table.table a.tableadmin.delete:hover,
ul.selected-list li .manage a.delete:hover{
	background: #ff3d3d;
	color: #ffebec;
}

/* Position Page End */

/* Permision Page Start */

.main .permision-button{
	margin: .5rem .5rem 1rem 0;
}
.main .permision-box,
.main .selected-box{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0 0 2rem 0;
}
.main .permision-box.main,
.main .selected-box.main{
	margin: 0;
}
.main .permision-box .border,
.payslip-border,
.main .selected-box .border{
	padding: .5rem;
}
.main .permision-box .border .list-permision{
	background: #f3effe;
	color: #b4a4eb;
	box-sizing: border-box;
	border-radius: .5rem;
	padding: .5rem;
	font-size: .75rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: 6.1rem;
}
.main .permision-box .border .list-permision::after{
	content: '\f577';
	font-family: 'Font Awesome 6 Pro';
	position: absolute;
	font-size: 4rem;
	left: 0;
	bottom: -.5rem;
	color: #f0eaff;
	z-index: -1;
}
.main .permision-box .border .list-permision span{
	line-height: 1.1rem;
	display: block;
	overflow: hidden;
	height: 2.2rem;
}
.main .permision-box .border .list-permision .manage,
.main .tab-add-box .border .list-added .manage{
	margin: .5rem 0 0 0;
	background: #ffffff;
	border-radius: .5rem;
	box-sizing: border-box;
	padding: .25rem .5rem;
	border: .0625rem solid #f1f1f1;
	box-shadow: 0 0 .75em #0000000d;
	display: inline-block;
}
.permision-box .border .title,
.payslip-border .title{
	font-size: .75rem;
	font-weight: 400;
	text-align: center;
	display: block;
	padding: 0.5rem;
	border-radius: 0.5rem;
	background: #f3effe;
	color: #b4a4eb;
}
.main .tab-add-box .border .list-permision span{
	line-height: 1.1rem;
	display: block;
	overflow: hidden;
	height: 2.2rem;
}
.main .tab-add-box .border .list-permision .manage{
	margin: .5rem 0 0 0;
	background: #ffffff;
	border-radius: .5rem;
	box-sizing: border-box;
	padding: .25rem .5rem;
	border: .0625rem solid #f1f1f1;
	box-shadow: 0 0 .75em #0000000d;
	display: inline-block;
}
.tab-add-box .border .title{
	font-size: .75rem;
	font-weight: 400;
	text-align: center;
	display: block;
	padding: 0.5rem;
	border-radius: 0.5rem;
	background: #f3effe;
	color: #b4a4eb;
}

/* Permision Page End */

/* Notification Page Start */

.last-notification li {
	border-radius: 0.5em;
	padding: 0.5em;
	box-sizing: border-box;
	margin: 0.5rem 0;
	background: #e9f7ff;
}
.last-notification.page li{
	background: transparent;
}
.last-notification li span a{
	background: #e4ac35;
	color: #fef6df;
}

/* Notification Page End */

/* Users Page Start */

.main .image-delete,
.main .user-delete,
.main .image-upload-border .uimages a{
	color: #ffebec;
	background: #ff3d3d;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	font-size: .75rem;
	user-select: none;
}
.main .image-delete,
.main .user-delete{
	border-radius: 0.5rem;
}
.main .image-delete{
	padding: 0.25rem 1rem;
	width: 300px;
	margin: auto;
	margin-top: 1rem;
}
.main .user-delete{
	display: block;
	margin: .25rem 0;
	padding: 0.5rem 1rem;
}
.image-delete:hover,
.user-delete:hover,
.main .image-upload-border .uimages a:hover{
	background: #ff6262;
}
.main .image-show,
.main .image-delete{
	display: none;
}
.main .image-show.active,
.main .image-delete.active{
	display: block;
	margin-top: 1rem;
}
.main .image-upload-border{
	display: flex;
	align-items: center;
}
.main .image-upload-border .uimages{
	position: relative;
	overflow: hidden;
	width: 5rem;
	margin-left: 0.5rem;
}
.main .image-upload-border .uimages img{
	height: 5rem;
	border: 0.0625rem solid #dfdfdf;
	border-radius: 0.5rem;
	box-sizing: border-box;
	float: right;
}
.main .image-upload-border .uimages a{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
	border-radius: 0 0 0.5rem 0.5rem;
}
.main .cr-slider-wrap{
	text-align: center;
}
.main .cr-slider{
	border: 0 !important;
	width: 300px !important;
	padding: 0 !important;
}

/* Users Page End */

/* Payslip Page Start */

.payslip-box{
	border-radius: 0.5rem;
	padding: 0.5rem;
	box-sizing: border-box;
	cursor: pointer;
	margin: 0.5rem 0;
	background: #e6fffc;
    color: #5fc9bd;
}
.payslip-border .title{
	background: #e9f7ff;
	color: #3267e9;
}
.payslip-title{
	font-size: .75rem;
	margin: 0.5rem 2rem 0.5rem 0;
	display: block;
}
.payslip-box.notadd{
	background: #ffebec;
    color: #ff3d3d;
}
.payslip-box.notadd.false{
	margin: 1rem .5rem .5rem .5rem;
	border: .0625rem solid #ff3d3d;
}
.payslip-box.blue{
	background: #e9f7ff;
	color: #3267e9;
}
.payslip-box h1{
	margin: 0;
	font-weight: 800;
	font-size: .8rem;
}
.payslip-box.blue h1{
	font-weight: 400;
}
.payslip-title i,
.payslip-box i{
	vertical-align: middle;
	margin-left: 0.25rem;
	text-align: center;
	width: 1rem;
}
.payslip-box b{
	font-size: .7rem;
	font-weight: 400;
	margin: .5rem 1.5rem;
	display: block;
}
ul.payslip-list{
	font-size: .75rem;
	font-weight: 400;
}
ul.payslip-list li,
ul.show-recipt li a{
	display: flex;
	padding: 0.25rem 1rem;
	justify-content: space-between;
}
ul.show-recipt li a{
	padding: .5rem 1rem;
}
ul.payslip-list li.bold{
	color: #3267e9;
	font-weight: 600;
	font-size: .8rem;
}
ul.payslip-list li div,
ul.payslip-list li span{
	display: inline-block;
}
ul.payslip-list li span{
	font-weight: 800;
	font-size: .85rem;
	padding: 0 0.25rem 0 0;
	box-sizing: border-box;
}
ul.show-recipt{
	font-size: .75rem;
	margin-bottom: 1rem;
}
ul.show-recipt li{
    margin: 0.5rem 0;
}
ul.show-recipt li a{
	background: #e6fffc;
	color: #5fc9bd;
	border-radius: 0.5rem;
	border: 0.0625rem solid #5fc9bd;
}
.payslipChart,
.dashboardChart{
	min-width: 100%;
	height: 25rem;
	padding: 1rem 0;
	box-sizing: border-box;
}
.chartabout span:nth-of-type(1){
	margin-left: 4px !important;
	margin-right: 0 !important;
}
.chartabout span:nth-of-type(2){
	margin-right: 2px !important;
	margin-left: 0 !important;
}
.chartabout span:nth-of-type(3){
	float: left !important;
	margin-right: 20px !important;
	margin-left: 0 !important;
}

/* Payslip Page End */

/* Production Page Start */

.production-tabs,
.dashboard-tabs{
    border-bottom: 0.0625rem solid #dfdfdf;
    transition: .2s filter;
}
.production-tabs{
    margin: 2rem 0 0 0;
}
.dashboard-tabs{
    margin: 1rem 0 0 0;
}
.production-tabs ul,
.dashboard-tabs ul{
	font-size: 0;
}
.production-tabs ul li,
.dashboard-tabs ul li{
    display: inline-block;
    margin: 0 0.2rem;
}
.dashboard-tabs ul li{
    margin: 0 0.1rem;
}
.production-tabs ul li a,
.dashboard-tabs ul li a{
    cursor: pointer;
    font-size: .8rem;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.25rem 1rem;
    display: inline-block;
    user-select: none;
    color: #000000;
}
.dashboard-tabs ul li a{
    font-size: .65rem;
    padding: 0.25rem .5rem;
}
.production-tabs ul li a.active,
.production-tabs ul li a:hover,
.dashboard-tabs ul li a.active,
.dashboard-tabs ul li a:hover{
	background: #b4a4eb;
	color: #f3effe;
}
.production-tabs ul li a i,
.dashboard-tabs ul li a i{
	vertical-align: middle;
	margin-left: 0.25rem;
	font-size: .9rem;
}
.production-all-tab,
.dashboard-all-tab,
.dashboardLoading{
	display: none;
	transition: .2s filter;
}
.production-all-tab.active,
.dashboard-all-tab.active,
.dashboardLoading{
	display: block;
}
.production-tabs.loading,
.production-all-tab.loading,
.dashboardLoading.active{
	user-select: none;
	pointer-events: none;
	filter: blur(0.2rem);
}
.dashboardLoading.active{
    filter: blur(0.3rem);
}
form .swich-fild.daynightfild{
	box-sizing: border-box;
	padding: 0.594rem 1rem;
	border-radius: 0.5rem;
	border: 0.0625rem solid #dfdfdf;
}
form .daynight {
	position: relative;
	flex: 0 0 3.5rem;
    height: 1.5rem;
    overflow: hidden;
    border-radius: 10rem;
    float: left;
}
form .daynight .daynightcheckbox:checked + .knobs:before {
	right: 2.125rem;
	background-color: #e9f7ff;
}
form .daynight .daynightcheckbox:checked + .knobs:after {
	content: 'شب';
	color: #e9f7ff;
	right: 0.5rem;
}
form .daynight .knobs:before {
	content: '';
	position: absolute;
	top: .125rem;
	right: .125rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 10rem;
	background-color: #e4ac35;
	transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
form .daynight .knobs:after{
	content: 'روز';
	position: absolute;
	color: #e4ac35;
	right: 1.9rem;
	top: .75rem;
	line-height: 0;
	font-size: .7rem;
	z-index: -1;
	transition: right 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}
form .daynight .daynightcheckbox:checked ~ .layer {
	background-color: #3267e9;
}
form .daynight .layer {
	width: 100%;
	background-color: #fef6df;
	transition: .3s ease all;
	z-index: 1;
}
form .show-data{
	font-size: .75rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
}
form .show-data .negative{
	display: flex;
	flex-direction: row-reverse;
}
form .show-data .negative span{
	margin-left: 0.25rem;
}
form .show-data.report{
    padding: .75rem 0 .75rem 1rem;
}
.main .tab-add-box{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0 0 1rem 0;
}
.main .tab-add-box .border{
    padding: 0.5rem;
}
.main .tab-add-box .border .list-added{
	background: #e9f7ff;
	color: #3267e9;
	box-sizing: border-box;
	border-radius: 0.5rem;
	padding: 0.5rem;
	font-size: .75rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.main .tab-add-box .border .list-added.border2{
	color: #b4a4eb;
	background: #f3effe;
}
.main .tab-add-box .border .list-added ul li{
	display: flex;
	justify-content: space-between;
	font-size: .65rem;
	align-items: center;
	margin: 0.25rem 0;
}
.main .tab-add-box .border .list-added ul li.tab{
	border-bottom: 0.0625rem dotted #3267e9;
	margin: 1rem 0;
}
.main .tab-add-box .border .list-added.border2 ul li.tab{
	border-bottom: 0.0625rem dotted #b4a4eb;
}
.main .tab-add-box .border .list-added ul li label{
	flex: 0 0 10rem;
}
.main .tab-add-box .border .list-added ul li div{
    flex: 0 0 5rem;
	margin-right: auto;
	overflow: hidden;
}
.main .tab-add-box .border .list-added ul li div.coding{
	flex: 0 0 7rem;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}
.main .tab-add-box .border .list-added ul li div.coding.edit{
	flex-direction: column;
}
.main .tab-add-box .border .list-added ul li div.coding p{
	margin: .25rem;
}
.main .tab-add-box .border .list-added ul li div.coding.edit p{
	width: 100%;
	box-sizing: border-box;
	border: 0.0625rem solid #dfdfdf;
	padding: 0 0.5rem;
	border-radius: 0.5rem;
	background: #ffffff;
	text-align: left;
}
.main .tab-add-box .border .list-added ul li div.coding input,
.main .tab-add-box .border .list-added ul li div.coding select{
	padding: 0;
}
.main .tab-add-box .border .list-added ul li div.coding.edit input,
.main .tab-add-box .border .list-added ul li div.coding.edit select{
	padding: 0 .5rem;
	margin: 0.1rem 0;
}
.main .tab-add-box .border .list-added.crash ul li div{
	flex: 0 0 6rem;
}
.main .tab-add-box .border .list-added ul li div title{
	padding: 0 0.5rem;
	font-weight: 700;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 4.5rem;
}
.main .tab-add-box .border .list-added ul li div input,
.main .tab-add-box .border .list-added ul li div select{
	width: 100%;
    box-sizing: border-box;
    border: 0.0625rem solid #dfdfdf;
    font-family: 'YekanBakh', Calibri;
    font-size: .65rem;
    padding: 0 0.5rem;
    outline: none;
    border-radius: 0.5rem;
    transition: .2s all;
    background: #ffffff;
    font-weight: 700;
    height: 1.25rem;
}
.main .tab-add-box .border .list-added ul li div input::placeholder{
	color: #e7e7e7;
}
.main .tab-add-box .border .list-added ul li div select{
    padding: 0 0.25rem;
    font-weight: 400;
}
.main .tab-add-box .border .list-added ul li div input:disabled,
.main .tab-add-box .border .list-added ul li div select:disabled{
	background: transparent;
	border: 0.0625rem solid transparent;
	color: #3267e9;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.main .tab-add-box .border .list-added ul li div input:disabled::placeholder{
	color: #3267e9;
}
.main .tab-add-box .border .list-added.border2 ul li div input:disabled,
.main .tab-add-box .border .list-added.border2 ul li div input:disabled::placeholder,
.main .tab-add-box .border .list-added.border2 ul li div select:disabled{
	color: #b4a4eb;
}
.main .tab-add-box .border .list-added ul li span{
	flex: 0 0 2rem;
	font-size: .55rem;
	margin-right: 0.25rem;
}
.main .tab-add-box .border .list-added ul li span .windowBorderInfo{
	font-size: .9rem;
	display: inline-flex;
	cursor: pointer;
	width: 1rem;
}
.main .all-time-adds{
	background: #e9f7ff;
	color: #3267e9;
	box-sizing: border-box;
	border-radius: 0.5rem;
	padding: 0.5rem;
	font-size: .75rem;
	margin: 0 0 1rem 0;
}
.main .all-time-adds.mines{
	background: #f3effe;
	color: #b4a4eb;
}
.main .all-time-adds span{
	margin-right: 0.25rem;
}
.main table.table span.dayandnight{
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	font-size: .7rem;
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
	margin: 0 0.1rem;
}
.main table.table span.dayandnight.day{
	background: #e4ac35;
	color: #fef6df;
}
.main table.table span.dayandnight.night{
	background: #3267e9;
	color: #e9f7ff;
}
.main table.table span.dayandnight title{
	display: inline-block;
}
.main table.table span.dayandnight i{
	vertical-align: middle;
	margin-left: 0.25rem;
}
.main table.table .edittablelist{
	background: #ffffff;
	border: 0 solid #f1f1f1;
	box-shadow: 0 0 0 #00000026;
	border-radius: 0.5rem;
	width: 7rem;
	position: absolute;
	top: 1.5rem;
	z-index: 10;
	margin-right: -1.5rem;
	overflow: hidden;
	height: 0;
	user-select: none;
	pointer-events: none;
	opacity: 0;
	transition: .2s top, .2s border, .2s box-shadow, .2s height, .2s opacity;
}
.main table.table .edittablelist.active{
	top: -.1rem;
	border: 0.0625rem solid #f1f1f1;
	box-shadow: 0 0 0.75em #00000026;
	height: 3.5rem;
	user-select: auto;
	pointer-events: auto;
	opacity: 1;
}
.main table.table .edittablelist li a{
	color: #000000;
	text-align: center;
	display: block;
	padding: 0.25rem;
	font-size: .7rem;
	box-sizing: border-box;
	height: 1.75rem;
	line-height: 1.25rem;
}
.main table.table .edittablelist li a i{
	vertical-align: middle;
	margin-left: 0.5rem;
}
.main table.table .edittablelist li a:hover{
	background: #e6fffc;
	color: #5fc9bd;
}
ul.payslip-list.productionShow li,
ul.payslip-list.productionShow li span{
	font-weight: 400;
	font-size: .75rem;
}


.coding-label{
	padding: 0 0.5rem;
	font-size: .6rem;
	font-weight: 400;
	color: #ababab;
	margin: 1rem 0 .5rem 0;
}
.coding-tab{
	padding: 0 0.5rem;
}
.coding-tab .form-fild{
	margin: 0 0 1rem 0;
}
.coding-list{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
}
.coding-list li span{
	display: block;
	padding: 0.75rem;
	box-sizing: border-box;
	font-size: .75rem;
}
.coding-list li select,
.coding-list li input,
.coding-list li span{
	border-radius: 0;
	border-top: 0.0625rem solid #dfdfdf;
	border-bottom: 0.0625rem solid #dfdfdf;
	border-right: 0;
	border-left: 0;
	height: 2.8rem;
}
.coding-list li select,
.coding-list li input{
	padding: 0.75rem 2rem 0.75rem 0.75rem;
}
.coding-list li select{
	background-position-x: calc(100% - 0.5rem);
}
.coding-list li:first-child select{
	border-radius: 0.5rem 0 0 0.5rem;
	border-left: 0.0625rem solid #dfdfdf;
}
.coding-list li:first-child select:focus{
	border-top: 0.0625rem solid #3267e9;
	border-bottom: 0.0625rem solid #3267e9;
	border-left: 0.0625rem solid #3267e9;
}
.coding-list li:nth-child(odd) select,
.coding-list li:nth-child(odd) input,
.coding-list li:nth-child(odd) span{
	border-left: 0.0625rem solid #dfdfdf;
	border-right: 0.0625rem solid #dfdfdf;
}
.coding-list li:nth-child(even) select:focus,
.coding-list li:nth-child(even) input:focus{
	border-top: 0.0625rem solid #3267e9;
	border-bottom: 0.0625rem solid #3267e9;
	border-left: 0;
	border-right: 0;
}
.coding-list li:last-child input{
	border-radius: 0 .5rem .5rem 0;
	border-right: 0.0625rem solid #dfdfdf;
}
.coding-list li:last-child input:focus{
	border-top: 0.0625rem solid #3267e9;
	border-bottom: 0.0625rem solid #3267e9;
	border-right: 0.0625rem solid #3267e9;
}
/* Production Page End */












.dbstopslable{
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	font-size: .7rem;
	box-sizing: border-box;
	display: inline-block;
	white-space: nowrap;
}
.dbstopslable.error{
	background: #ff3d3d;
	color: #ffebec;
}
.dbstopslable.success{
	background: #5fc9bd;
	color: #e6fffc;
}
.dbstopslable.pause{
    background: #b4a4eb;
    color: #f3effe;
}
.dbstopslable.edited{
    background: #EA7CCC;
    color: #fff9fd;
}








ul.selected-list li{
	padding: .75rem .5rem;
}
ul.selected-list li+li{
	border-top: 0.0625rem solid #f0ebff;
}
.main .selected-box .border .list-selected{
	background: #f3effe;
	color: #b4a4eb;
	box-sizing: border-box;
	border-radius: .5rem;
	padding: .5rem;
	font-size: .75rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: 3.1rem;
	display: block;
}
.main .selected-box .border .list-selected::after{
	content: '\f733';
	font-family: 'Font Awesome 6 Pro';
	position: absolute;
	font-size: 3rem;
	left: 0;
	bottom: -.5rem;
	color: #f0eaff;
	z-index: -1;
}
.main .selected-box .border .list-selected span{
	line-height: 1.1rem;
	display: block;
	overflow: hidden;
	height: 2.2rem;
}
.main .selected-box .border .list-selected:hover{
	background: #b4a4eb;
	color: #f3effe;
}
.main .selected-box .border .list-selected:hover::after{
	color: #ac99ed;
}
.dashboard-table-circle{
    padding-left: .25rem;
}
.dashboard-table-circle.c1{
    color: #e4ac35;
}
.dashboard-table-circle.c2{
    color: #5fc9bd;
}
.dashboard-table-circle.c3{
    color: #ff3d3d;
}
.dashboard-table-circle.c4{
    color: #3267e9;
}
.tablelist{
    white-space: nowrap;
}


























































@media only screen and (max-width: 97em){
	.main .tab-add-box{
		grid-template-columns: repeat(3, 1fr);
	}
    .dashboard-tabs ul li a span {
        display: none;
    }
    .dashboard-tabs ul li a i {
        margin-left: 0;
    }
}


@media only screen and (max-width: 85em){

	/* Permision Page Start */

	.main .permision-box,
	.main .selected-box{
		grid-template-columns: repeat(3, 1fr);
	}

	/* Permision Page End */

}
@media only screen and (max-width: 78em){
	.main .tab-add-box{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media only screen and (max-width: 70em){

	/* Main Start */

	.main .two-box .tbb.f1,
	.main .two-box .tbb.f2,
	.main .two-box .tbb.b1,
	.main .two-box .tbb.b2{
		width: 100%;
	}

	/* Main End */

	/* Permision Page Start */

	.main .permision-box,
	.main .selected-box{
		grid-template-columns: repeat(2, 1fr);
	}

	/* Permision Page End */

	/* Payslip Page Start */

	.payslip-two-section .tab.printleft{
		text-align: center;
		display: block;
		padding: .5rem 1rem;
	}
	.payslip-two-section .tab.printleft a.button{
		width: 100%;
	}
    .payslip-two-section,
    .two-section.report{
        grid-template-columns: repeat(1, 1fr);
    }
    .payslip-two-section.dashboard{
         display: block;
     }


	/* Payslip Page End */

	/* Table Page Start */

	table.table .img,
	table.table .status,
	table.table .number{
		display: none;
	}

	table.table.planning .number{
		display: table-cell;
	}
	table.table thead.top th:nth-child(2){
		border-radius: 0 .5rem 0 0;
	}
	table.table tfoot.bottom th:nth-child(2){
		border-radius: 0 0 .5rem 0;
	}
	table.table thead.top.fixed th:nth-child(2){
		border-radius: 0;
	}
	table.table tfoot.bottom.fixed th:nth-child(2){
		border-radius: 0;
	}
	.main table.table .edittablelist{
		margin-right: -2.5rem;
	}

	/* Table Page End */

	form .form-fild button{
		width: 100%;
	}
	form .form-fild .button{
		margin-top: .5rem;
	}
	form .form-fild .button,
	.main a.button{
		display: block;
	}
	.production-tabs ul li a span{
		display: none;
	}
	.production-tabs ul li a i,
	.main table.table span.dayandnight i{
		margin-left: 0;
	}
	.production-tabs ul li a:hover{
		background: transparent;
		color: #000000;
	}
	.production-tabs ul li a.active:hover{
		background: #b4a4eb;
		color: #f3effe;
	}
	form .show-data{
		padding: 0.75rem 0.25rem;
	}
    form .form-fild.report,
    form .show-data.report{
        margin: .5rem 0 !important;
        padding: 0;
    }
}

@media only screen and (max-width: 59em){
	.main .tab-add-box{
		grid-template-columns: repeat(1, 1fr);
	}
}
@media only screen and (max-width: 50em){

	/* Header Start */

	.header{
		height: 3em;
		z-index: 101;
		box-shadow: none;
	}
	.header .right-menu{
		margin-right: 0;
	}
	.header .right-menu .link.headerlogo{
		display: block;
	}
	.header .right-menu .link.active:hover .menuopener,
	.header .right-menu .link.active .menuopener{
		background: #e9f7ff;
	}
	.header .right-menu .link .menuopener,
	.header .left-menu .group-menu .link .notification{
		font-size: 1rem;
		margin: .5rem;
		width: 2rem;
		height: 2rem;
	}
	.header .left-menu .group-menu .link .notification.active:before{
		left: 0.35rem;
	}
	.header .right-menu .link:hover .menuopener,
	.header .left-menu .group-menu .link:hover .notification{
		background: transparent;
	}
	.header .left-menu .group-menu .link:hover .notification.active:before{
		border: .2rem solid #ffffff;
	}
	.header .left-menu .group-menu .link.username a img{
		height: 2rem;
		width: 2rem;
		margin: .5rem;
	}
	.header .left-menu .group-menu .link.username a .text,
	.header .left-menu .group-menu .link.username a .arrow{
		display: none;
	}
	.header .left-menu .group-menu .menu{
		top: 3.5rem;
	}
	.header .left-menu .group-menu .menu.active{
		top: 3rem;
	}
	.header .left-menu .group-menu .menu.notifection{
		border-radius: 0;
		top: 3rem;
		right: 0;
		position: fixed;
		width: 100%;
		max-height: 100%;
		bottom: 0;
		border: none;
		border-top: .0625rem solid #f1f1f1;
		box-shadow: none;
		transform: translate(-100%, 0);
		transition: .5s transform cubic-bezier(0.82, 0.02, 0.12, 0.99), .5s opacity;
	}
	.header .left-menu .group-menu .menu.notifection.active{
		transform: translate(0, 0);
	}
	.header .left-menu .group-menu .menu.notifection ul li.seeall a:hover{
		padding: .25rem .5rem;
	}
	.header .left-menu .group-menu .menu.notifection ul li span a:hover,
	.last-notification li span a:hover{
		padding: .2rem .5rem;
	}
	.header .left-menu .group-menu .menu.user ul li a:hover{
		background: transparent;
		color: #000000;
	}

	/* Header End */

	/* Right Start */

	.right{
		top: 3rem;
		left: 0;
		width: 100%;
		transform: translate(100%, 0);
		opacity: 0;
		border-left: none;
		box-shadow: none;
		transition: .5s transform cubic-bezier(0.82, 0.02, 0.12, 0.99), .5s opacity;
	}
	.right.active{
		opacity: 1;
		transform: translate(0, 0);
	}
	.right .logo{
		display: none;
	}
	.right ul.menu{
		height: 100%;
	}
	.right ul.menu li a:hover{
		background: transparent;
		color: #000000;
	}
	.right ul.menu li.light a:hover{
		background: #e9f7ff;
		color: #3267e9;
	}

	/* Right End */

	/* Footer Start */

	.footer{
		margin: .5rem .5rem 0 .5rem;
		text-align: center;
		font-size: .6rem;
	}
	.footer span{
		display: block;
	}

	/* Footer End */

	/* Error List Start */

	ul.errorlists{
		left: 1rem;
		right: 1rem;
		top: 1rem;
		bottom: unset;
	}
	ul.errorlists li{
		width: 100%;
	}

	/* Error List End */

	/* Login Border Start */

	.login-box{
		box-shadow: none;
		border-radius: 0;
		border: 0;
		width: 100%;
		height: 100vh;
	}
	.login-box h1.box-title a{
		display: block;
		margin: .5rem 0 0 0;
		text-align: center;
	}

	/* Login Border End */

	/* Form Start */

	form .form-fild button:hover,
	form .form-fild .button:hover,
	.main a.button:hover{
		background: #3267e9;
	}
	form .form-fild button.delete:hover,
	.image-delete:hover,
	.user-delete:hover,
	.main .image-upload-border .uimages a:hover{
		background: #ff3d3d;
	}
	form .two-section,
	form .three-section{
		grid-template-columns: repeat(1, 1fr);
	}
	form .two-section .tab,
	form .three-section,
	.payslip-two-section .tab{
		padding: 0;
	}
	form .two-section .tab .form-fild,
	form .three-section .tab .form-fild{
		margin: .5rem 0;
	}
	form .form-fild .file-area{
		margin: 0;
	}
	form .form-fild.pad,
	form .form-fild.button{
		margin: 1rem 0 0 0;
	}
	form .form-fild.restop{
		margin: 0 0 1rem 0;
	}
	form .form-fild .file-area .file-dummy{
		padding: 0.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	ul.office-chart li .manage a.info,
	.list-permision .manage a.info,
	.list-added .manage a.info,
	table.table a.tableadmin.info{
		background: #3267e9;
		color: #e9f7ff;
	}
	ul.office-chart li .manage a.edit,
	.list-permision .manage a.edit,
	.list-added .manage a.edit,
	.list-added .manage button.edit,
	table.table a.tableadmin.edit,
	ul.selected-list li .manage a.edit {
		background: #5fc9bd;
		color: #e6fffc;
	}
	ul.office-chart li .manage a.delete,
	.list-permision .manage a.delete,
	.list-added .manage a.delete,
	table.table a.tableadmin.delete,
	ul.selected-list li .manage a.delete{
		background: #ff3d3d;
		color: #ffebec;
	}
	.coding-list li select,
	.coding-list li input{
		padding: 0.4rem;
	}

	/* Form End */

	/* Main Start */

	.main{
		margin: 3rem 0 0 0;
	}
	.main .box,
	.main .box.form{
		padding: .5rem;
	}
	.main .one-box{
		padding: 0;
	}
	.main .two-box{
		padding: .25rem 0;
	}
	.main .two-box .tbb{
		padding: .25rem .5rem;
	}
	.main .permision-button {
		margin: 0.5rem 0.5rem 1rem 0.5rem;
	}
	.main .box h1.box-title{
		margin: 0 0 1.5rem 0;
	}

	/* Main End */

	/* Window Start */

	.window{
		border-radius: 0;
		width: 100%;
		border: none;
		box-shadow: none;
		bottom: 0;
		transform: translate(0, 100%);
	}
	.window.active{
		transform: translate(0, 0);
	}

	/* Window End */

	/* Position Page Start */

	ul.office-chart li .manage a t,
	.list-permision .manage a t,
	.list-added .manage a t,
	.list-added .manage button t,
	table.table a.tableadmin t,
	.main table.table span.dayandnight title,
	ul.selected-list li .manage a t{
		display: none;
	}
	ul.office-chart li .manage a i,
	.list-permision .manage a i,
	.list-added .manage a i,
	.list-added .manage button i,
	table.table a.tableadmin i,
	ul.selected-list li .manage a i{
		margin: 0;
	}
	ul.office-chart li .manage,
	ul.selected-list li .manage {
		margin-right: .25rem;
	}

	/* Position Page End */

	/* Permision Page Start */

	.main .permision-box,
	.main .selected-box{
		grid-template-columns: repeat(1, 1fr);
	}

	/* Permision Page End */

	/* Table Page Start */

	table.table .admin {
		min-width: 5rem;
		width: 5rem;
	}
    table.table .admin-month{
        width: 2rem;
        min-width: 2rem;
    }
	table.table .admin{
		padding: .5rem 0;
	}
	table.table tbody td {
	    padding: .5rem;
	}
	.dataTables_wrapper .dataTables_filter label{
		display: flex;
		align-items: center;
		padding: 0 .25rem;
	}
	.dataTables_wrapper .dataTables_filter input{
		width: 100%;
	}
	.dataTables_wrapper .dataTables_length select{
		width: 4rem;
	}
	.dataTables_wrapper .dataTables_length{
		float: left;
	}

	/* Table Page End */

	/* Payslip Page Start */

	.payslip-title {
		margin: .5rem;
	}

	/* Payslip Page End */


	form .swich-fild.daynightfild{
		margin: 0.5rem 0;
	}
	.main .box h1.box-title.subtab {
		margin: 1rem 0 0.5rem 0;
	}
	.production-tabs ul li a{
		padding: 0.25rem .5rem;
	}
	form .show-data{
		margin-top: 0;
	}
	#t1-timeshowResponsiveOrder,
	#t2-timeshowResponsiveOrder,
	#t3-serviceCounterResponsiveOrder,
	#t4-timeshowResponsiveOrder,
	#t5-timeshowResponsiveOrder,
	#t6-timeshowResponsiveOrder,
	#t1-averageSulphideRateResponsiveOrder,
	#t1-dryWeightResponsiveOrder,
	#t2-result1{
		order: 1;
	}
	#t1-allshowResponsiveOrder,
	#t2-recoveryshowResponsiveOrder,
	#t3-inputsulphideshowResponsiveOrder,
	#t4-addbuttResponsiveOrder,
	#t5-addbuttResponsiveOrder,
	#t6-addbuttResponsiveOrder{
		order: 2;
	}
	#t1-addbuttResponsiveOrder,
	#t2-productAmountResponsiveOrder,
	#t3-graderatioshowResponsiveOrder,
	#t2-addditResponsiveOrder{
		order: 3;
	}
	#t2-wasteAmountResponsiveOrder,
	#t3-addditResponsiveOrder{
		order: 4;
	}
	#t2-addbuttResponsiveOrder{
		order: 5;
	}
	.main .tab-add-box .border .list-added ul li label{
		flex: 0 0 45%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.main .tab-add-box .border .list-added ul li div {
		flex: 0 0 4.5rem;
	}
	.main .tab-add-box .border {
		padding: 0.25rem 0;
	}
	.main .tab-add-box{
		margin: 0 0 .25rem 0;
	}
	.main .all-time-adds{
		margin: 0;
	}
	.main .all-time-adds.mines{
		margin: 0 0 0.25rem 0;
	}
	.main .selected-box .border .list-selected:hover{
		background: #f3effe;
		color: #b4a4eb;
	}
	.main .selected-box .border .list-selected:hover::after{
		color: #f0eaff;
	}



}
