.login-block .auth-box h3{font-weight: 700;}
.login-block .auth-box .form-primary{margin-bottom: 20px;}
.login-block .auth-box .form-primary label{margin-bottom: 8px;}
.login-block .auth-box .btn-primary{ margin-top: 20px; border-radius: 30px;}
.annoncement-message{padding: 4px 0px; background: var(--secondary-colour); margin: 10px 0px; color: #fff; height: 30px; border-radius: 30px;}
.annoncement-message marquee li{list-style: none; position: relative; padding-left: 20px; font-size: 14px; margin-right: 20px; display: inline-block;}
.annoncement-message marquee li::before{ content: "\f005"; font: normal normal normal 14px/1 FontAwesome; position: absolute; left: 0px; top: 4px; color: yellow;}
.dash-box{background: var(--bg-white); border-radius: 8px; position: relative; overflow: hidden; padding: 15px; padding-top: 20px; border: 1px solid var(--light);}
.dash-box h5{font-weight: 700; font-size: 16px; border-bottom: 2px solid var(--light); padding-bottom: 10px; margin-bottom: 15px; position: relative; text-transform: capitalize; }
.box-shadow{ box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);}
.dash-box h5 .count{ width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: var(--secondary-colour); color: #fff; text-align: center;
position: absolute; right: 0px; font-size: 14px; top: -14px;}
.dash-box h4{font-weight: 700; font-size: 20px; color: var(--primary-colour); margin-bottom: 25px;}
.dash-box .approvals{ list-style: none; counter-reset: item; padding: 0px; margin: 0px; overflow-y: auto; height: 80%;}
.dash-box .approvals li{list-style: decimal; padding-right: 50px; position: relative; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp:1; line-clamp: 1;
-webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; counter-increment: item; padding-left: 20px; padding-bottom: 4px;}
.dash-box .approvals li button{border: 1px solid var(--secondary-colour); color: var(--secondary-colour); border-radius: 30px; background: none; font-size: 12px; min-width: 45px;
position: absolute; top: 0px; right: 6px; cursor: pointer;}
button:focus{outline: none;}
.dash-box .approvals li button:hover{background: var(--secondary-colour); color: #fff;}
.dash-box .approvals li:last-child{margin: 0px;}
.dash-box .approvals li::before{  content: counter(item); position: absolute; left: 0px;}
.dash-box .pendings li{padding-right: 60px;}
/* .dash-box .pendings li button{border-color: #fe9365; color: #fe9365;}
.dash-box .pendings li button:hover{background: #fe9365; color: #fff;} */
.hight270{height: 270px; overflow: hidden;}
.approval-box{border-radius: 4px; overflow: hidden; position: relative; background: var(--bg-white); border: 1px solid transparent; 
margin-bottom: 20px; padding: 15px;}
.Approval-sc h4, .quick-links h4{ color: var(--black); margin-bottom: 10px; font-size: 20px;}
.approval-box-count{margin-top: 10px; position: relative; display: flex; justify-content: space-between;}
.approval-box-count .count{ font-size: 18px; font-weight: 700;  background: transparent;}
.approval-box-count .count span{font-size: 14px; font-weight: 300; margin-right: 4px;}
.approval-box-bottom{padding-bottom: 20px;}
.approval-box-bottom button{border-radius: 30px; background: transparent;  border: 1px solid transparent; padding: 2px 10px; min-width: 100px; cursor: pointer; color: var(--white);}
.brd-blue, .brd-blue .approval-box-bottom{border-color: var(--brd-blue);}
.brd-blue p, .brd-blue .approval-box-count .count{ color: var(--brd-blue);}
.brd-blue button{background: var(--brd-blue);}
.brd-yellow, .brd-yellow .approval-box-bottom{border-color: var(--brd-yellow);}
.brd-yellow p, .brd-yellow .approval-box-count .count{ color: var(--brd-yellow);}
.brd-yellow button{background: var(--brd-yellow);}
.brd-green, .brd-green .approval-box-bottom{border-color: var(--brd-green);}
.brd-green p, .brd-green .approval-box-count .count{ color: var(--brd-green);}
.brd-green button{background: var(--brd-green);}
.brd-red, .brd-red .approval-box-bottom{border-color: var(--brd-red);}
.brd-red p, .brd-red .approval-box-count .count{ color: var(--brd-red);}
.brd-red button{background: var(--brd-red);}
.dash-box .pendings li .doc-expired{position: absolute; right: 6px;}
/* .dash-box .requests li button{border-color: var(--brd-green); color: var(--brd-green);}
.dash-box .requests li button:hover{background: var(--brd-green); color: #fff;} */
.quick-links{padding: 0px 15px;}
.quick-links h5{margin-bottom: 15px; color: var(--black);}
.quick-links-box{background: var(--bg-white); width: calc(96% / 8); position: relative; border-radius: 5px; overflow: hidden; padding: 8px;
transition: 0.3s all ease-in-out; margin: 0.2%; height: 56px; border: 1px solid var(--light); border-radius: 5px;}
.quick-links-box h6{margin: 0px; padding-left: 26px; line-height: 20px; font-size: 13px; color: var(--black);}
.quick-links-box i{position: absolute; left: 5px; top: 8px; width: 24px; height: 24px; background: var(--gradiant1); border-radius: 50%;
text-align: center; line-height: 24px; color: var(--white); font-size: 12px;}
.quick-links-box:hover{ box-shadow: 0 10px 35px 0 rgb(154 161 171 / 30%); transform: translateY(-10px);}
.dash-box .approvals::-webkit-scrollbar {width: 3px;}
.dash-box .approvals::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
.dash-box .approvals::-webkit-scrollbar-thumb { background-color: var(--light);}
.approval-box h3{font-size: 18px; color: var(--black);}
.approval-box h3 i{float: right; font-size: 18px; transition: 0.5s all ease-in-out;}
.approval-box:hover h3 i{transform: translateX(40px);}
.pcoded .pcoded-navbar[navbar-theme=theme1] .pcoded-item .pcoded-hasmenu .pcoded-submenu li.active:hover > a{color: var(--white) !important;}
.swal-button, .swal-button:hover{background: var(--primary-colour) !important; color: var(--white) !important;}
.dataTable thead{background: var(--primary-colour) !important;}
table.dataTable, table.dataTable th, table.dataTable td {  box-sizing: border-box !important;}
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, 
.datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, 
.datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, 
.datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, 
.datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, 
.open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, 
.open .dropdown-toggle.datepicker table tr td.active.disabled:hover{ background: var(--primary-colour) !important;}
.approval-count{position: relative; display: inline-block; width: 49%; margin-bottom: 8px;}
.approval-count .count{margin-bottom: 5px; height: 80px; width: 110px; line-height: 18px; font-size: 14px; position: relative;}
.approval-count h5{font-size: 14px;}
.approval-count .count .count-number{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.approval-count .count .count-number label{display: block; font-weight: 100;}
.table .itemdata.active{background: var(--bgcolour2);}
.shop-box{border: 1px solid var(--light); padding: 10px; border-radius: 6px;}
.shop-box h4{font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--light);  padding-bottom: 15px;}
.shop-box h4 span{float: right; color: var(--light-green); font-weight: 300; font-size: 14px;}
.shop-box table, .year-table table, .production-table table{width: 100%; border-collapse: collapse;}
.shop-box table th, .shop-box table td {padding: 4px; text-align: center;}
.clr-green{ color: var(--green);}
.clr-red{ color: var(--red);}
.clr-darkgreen{ color: var(--dark-green);}
.pb-15{padding-bottom: 15px;}
.year-table table th, .year-table table td, .production-table table th, .production-table table td
{border: 1px solid var(--light); padding: 8px; text-align: center;}
.year-table table thead th{background: var(--yellow);}
.year-table table tbody th:first-child{background: var(--light-green); color: var(--white);}
.year-table table tbody tr:nth-child(2) th{background: var(--red); color: var(--white);}
.year-table table tbody tr:nth-child(3) th{background: var(--brd-yellow); color: var(--white);}
.year-table table thead th:first-child{background: none;}
.year-table table thead th:last-child{background: var(--green);}
.year-table table tbody td:last-child{ font-weight: 700;}
.year-table table tbody td span{color: var(--red) !important; font-weight: 700;}
.production-table table thead tr:nth-child(2), .production-table table thead tr:nth-child(3){font-weight: 400; font-size: 12px;}
.production-table table thead tr:first-child th:first-child, .production-table table tbody td:first-child{ background: var(--yellow);}
.production-table table tbody tr:last-child{ background: var(--green);}
.pad-20{padding: 20px;}
.production-chart h3{text-align: center;}
.search-panel .panel-heading{padding: 0px;}
.search-panel .panel-heading .panel-title{position: relative;}
.search-panel .panel-heading a:before {  font: normal normal normal 14px / 1 FontAwesome; font-weight: 900; content: "\f107"; transition: all 0.5s; position: absolute; right: 10px;
top: 0px; text-align: center; color: var(--primary-colour); font-size: 18px; line-height: 30px; -webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); transform: rotate(180deg);}
.search-panel .panel-heading a.collapsed:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg);}
.pending-box{ width: calc(96% / 8); position: relative; border-radius: 5px; overflow: hidden; padding: 8px; color: var(--white);
padding-right: 70px; margin: 0.2%; height: 90px;}
.bg-blue{background: var(--bgcolour2);}
.bg-green{background: var(--brd-green);}
.bg-orange{background: var(--secondary-colour);}
.bg-red{background: var(--red);}
.bg-light-green{background: var(--light-green);}
.bg-dark-green{background: var(--dark-green);}
.bg-green2{background: var(--bgcolour3);}
.bg-dark{background: var(--primary-colour);}
.pending-box-count{position: absolute; right: 10px; top: 50%; transform: translate(0%, -50%); font-size: 20px; font-weight: 700; text-align: right;}
.pending-box p{margin: 0px; font-size: 16px;}
.pending-box i{position: absolute; right: 10px; bottom: 8px; color: var(--white); transition: 0.5s all ease-in-out; cursor: pointer;
font-size: 22px;}
.pending-box:hover{color: #fff;;}
.pending-box:hover i{transform: translateX(10px);}
.comment-button{position: fixed; right: 121px; bottom: 10px; height: 30px; background: var(--yellow); border-radius: 4px; line-height: 30px;
padding: 0px 6px; border: 1px solid #e0e000; font-weight: 700; cursor: pointer; z-index: 111; color: #000;}
.comment-button i{margin-right: 4px;}
.hidden{display: none;}
#commentWindow{position: fixed; bottom: 50px; right: 10px; transition: height 0.5s ease-in-out; z-index: 1111;
transition: width 200ms ease 0s, height 200ms ease 0s, max-height 200ms ease 0s, transform 300ms cubic-bezier(0, 1.2, 1, 1) 0s, opacity 83ms ease-out 0s;
width: 100%; max-width: 300px; height: 100%; max-height: 500px; box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px; border-radius: 16px; overflow: hidden;}
#commentWindow iframe{width: 100%; height: 100%; border: none;}
.send-section{padding: 10px; border-top: 1px solid var(--light); position: fixed; width: 100%; bottom: 0px; left: 0px; background: var(--bg-f3f3f3);}
.comment-popup{position: relative;}
.send-section input{width: 80%; border-radius: 30px; padding: 6px 14px; border: 1px solid var(--light); height: 42px; 
background: var(--bg-colour); color: var(--black);}
.send-section button{border: none; border-radius: 50%; background: var(--primary-colour); color: var(--white); width: 42px;
height: 42px; cursor: pointer;}
.comment-title{padding: 14px; border-bottom: 1px solid var(--light); text-align: center; position: fixed; width: 100%;
left: 0px; top: 0px; background: var(--bg-f3f3f3);}
.comment-title h4{margin: 0px; font-size: 22px; font-weight: 700;}
#closeComment{position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center;
background: var(--light); cursor: pointer;}
.comment-window-content{position: relative; width: 100%; height: 100%;}
.comment-content{ overflow-y: auto; width: 100%; height: 70%; padding: 60px 10px;}
.comment-date{text-align: center; padding: 0px 0px 10px;}
.comment-content ul{padding: 0px; margin: 0px;}
.comment-name{font-weight: 700; margin-bottom: 4px;}
.comment-content ul li{background: var(--bg-colour); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px;}
.comment-content ul li p{margin-bottom: 5px;}
.comment-content ul li h5{font-size: 12px;}
.comment-content ul li h5 span{float: right; color: var(--red); cursor: pointer;}
.border-gradient { border: 1px solid; border-image-slice: 1; border-width: 1px; border-radius: 4px;}
.border-gradient-purple {border-image-source: linear-gradient(44.44deg, var(--brd-blue) 7.79%, var(--bgcolour2) 94.18%);}
.pending-enquiry h4{ margin-bottom: 10px; font-size: 20px; color: var(--black);}
.pending-enquiry-box{ width: calc(96% / 6); position: relative; border-radius: 5px; overflow: hidden; padding: 8px; background: var(--bg-white);
 margin: 0.2%; height: 70px; border: 1px solid transparent;}
 .colour-green{border-color: var(--brd-green); color: var(--brd-green);}
 .colour-blue{border-color: var(--brd-blue); color: var(--brd-blue);}
 .colour-red{border-color: var(--red); color: var(--red);}
 .colour-orange{border-color: var(--colour1); color: var(--colour1);}
 .colour-darkgreen{border-color: var(--dark-green); color: var(--dark-green);}
 .colour-lightgreen{border-color: var(--light-green); color: var(--light-green);}
 .pending-enquiry-count{font-size: 20px; font-weight: 700;}
 .pending-enquiry-box p{color: var(--black) !important;}
 .pending-enquiry-box i{position: absolute; right: 10px; top: 10px; font-size: 20px;  transition: 0.5s all ease-in-out;}
 .pending-enquiry-box:hover i{transform: translateX(20px);}
 .dash-box .view-all{float: right; font-size: 14px; font-weight: normal; color: var(--primary-colour);}
 .history-content p{margin: 0px; font-size: 12px;}
 .history-content small{color: #c3c3c3;}
 .history-content{border-bottom: 1px dotted var(--light); padding-bottom: 8px; margin-bottom: 8px; padding-right: 5px;}
 .gradiant1{background: var(--gradiant1);}
 .gradiant2{background: var(--gradiant2);}
 .gradiant3{background: var(--gradiant3);}
 .gradiant4{background: var(--gradiant4);}
 .gradiant5{background: var(--gradiant5);}
 .gradiant6{background: var(--gradiant6);}
 .gradiant7{background: var(--gradiant7);}
 .gradiant8{background: var(--gradiant8);}
 .logo img{max-width: 250px;}
.dt-search{float: right;}
.dt-length{float: left;}
.dt-info{float: left;}
.dt-paging{float: right;}
.table-responsive {	overflow: hidden; overflow-x: auto;}
.dt-buttons{ float: left;}
.advance-filter h6 i{float: right; font-size: 18px;}
.advanced-search{position: fixed; right: 0px; top: 50%; background: var(--secondary-colour); color: var(--white); cursor: pointer;
border-top-left-radius: 30px; border-bottom-left-radius: 30px; width: 40px; height: 40px; text-align: center; line-height: 40px; z-index: 9999;}
.sidenav {height: calc(100vh - 56px); width: 0; position: fixed; z-index: 11111; top: 56px; right: 0; background-color: var(--bg-white); 
overflow-x: hidden; transition: 0.5s; -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .05); box-shadow: 0 0 11px rgba(0, 0, 0, .05);
border: 1px solid var(--light);}
.sidenav .closebtn { position: absolute; top: 10px; right: 20px; font-size: 24px; margin-left: 30px; color: var(--black);}
.sidenav h5{font-size: 16px; color: var(--primary-colour); margin-bottom: 20px;}
.advance-search-box{padding: 20px; position: relative;}
.advance-search-box .form-group{margin-bottom: 15px;} 
.form-group label{margin-bottom: 5px;}
.zero{margin: 0px !important; padding: 0px !important;}
#HelpButton .btn{height: auto; min-width: inherit;}
.dark-theme-icon{width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid var(--light);
margin-top: 12px; font-size: 18px;}
.darktheme .main-logo{ filter: invert(1) brightness(100);}
.dropdown-menu{color: var(--black);}
.btn-default{background: var(--bg-colour); color: var(--black);}
.darktheme select option{background: var(--bg-white);}
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
body::-webkit-scrollbar-thumb { background-color: var(--scroll-colour);}
.modal-content{background: var(--bg-white);}
.modal-header, .modal-footer{border-color: var(--light);}
.darktheme .logo img{filter: invert(1) brightness(100);}
.Approval-sc h5{margin-bottom: 10px;}
.table-bordered td, .table-bordered th, .table-bordered{border-color: var(--light);}
.table .checkbox-fade, .table .checkbox-zoom, .table .checkbox-fade .cr, .table .checkbox-zoom .cr{margin-right: 0px;}
.table td label{padding: 2px 16px; border-radius: 30px;}
a.btn{line-height: 32px;}
.form-control[readonly]{background: var(--bg-colour);}
.minwidth a.btn, .table td a.btn{line-height: inherit;}
.table.dataTable tbody tr{background: var(--bg-white) !important;}
button.dt-button, div.dt-button, a.dt-button, input.dt-button{border-color: var(--light); background: var(--bg-f3f3f3) !important;
color: var(--black);} 
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, 
.dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate{color: var(--black) !important;}
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input{border-color: var(--light); color: var(--black);}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{color: var(--black) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background: var(--primary-colour) !important; color: var(--white) !important;
border-color: var(--light);}
.dataTables_wrapper .dataTables_paginate .paginate_button{color: var(--black) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background: var(--bg-f3f3f3) !important; color: var(--black) !important;
border-color: var(--light) !important;}
.dropdown-menu{background: var(--bg-white); border-color: var(--light);}
.datepicker-dropdown:after{border-bottom-color: var(--bg-white);}
.datepicker-dropdown::before{border-bottom-color: var(--light);}
.swal-modal{background: var(--bg-white) !important;}
.swal-text{color: var(--black) !important;}
text{fill: var(--black);}
path{stroke: var(--black);}
.header-dropdown {position: relative;  display: inline-block;}
.header-dropdown>a {padding: 0 5px}
.header-dropdown>a:after {content:"\e842"; font-family: feather; font-weight: 300;  font-size: 12px;}
.header-dropdown ul { position: absolute; top: -300rem; z-index: 1150; min-width: 100%; margin: 0;  background: var(--bg-white); text-align: left;
transition: transform 0.2s ease-out;opacity: 0;visibility: hidden;transform: translateY(-1rem); border: 1px solid var(--light);}
.header-dropdown ul a { display: block; padding: 0px 7px !important; color: var(--black) !important; white-space: nowrap}
.header-dropdown ul a:hover {  color: var(--primary-colour) !important;}
.header-dropdown+.header-dropdown {  margin-left: 1.4rem}
.header-dropdown ul li i{margin-right: 5px;}
.header-dropdown:hover .header-menu:before,.header-dropdown:hover ul {  top: 100%;  opacity: 1;  visibility: visible;  transform: none}
.header-dropdown button{background: none; border: none; color: var(--primary-colour);}
.upload-wrapper input[type="file"] {  position: absolute;  left: 0;  top: 0;  opacity: 0;  width: 100%;  height: 100%; cursor: pointer; }
.crop-image, .crop-image-out{border: 1px solid var(--light-grey); padding: 8px; border-radius: 10px; position: relative; overflow: hidden;}
.crop-image img{width: 100%; height: 100%; max-height: 70vh;}
.cropper-bg{width: 100% !important; border-radius: 10px; height: 100%; max-height: 70vh !important;}
.crop-modal .modal-footer{justify-content: center;}
.crop-image-out img{max-width: 100%; height: 100%; max-height: 70vh;}
.swal-content__input, .swal-content__textarea{ background-color: var(--bg-white);}
.table .table{ background-color: var(--bg-white) !important;}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

@media only screen and (max-width:850px) {
  .pending-box{ width: calc(94% / 5); margin: 0.5%;}
}

@media only screen and (max-width:767px) {
  .approval-box{margin-bottom: 20px;}
  .quick-links-box{min-height: 80px;}
  .pending-box, .pending-enquiry-box{ width: calc(96% / 2);}
}