@import url("https://rsms.me/inter/inter.css");
html {
  font-family: "Inter", sans-serif;
}


body, h1 {font-weight: 300; background: #E9EDF4;}
a {text-decoration: none !important; outline: none !important;}
.myerror {color: #fc1607 !important; display:inline-block; font-weight: bold; font-size: 12px; margin-bottom: 10px;}
.mysuccess {color: #009933 !important; display:inline-block; font-weight: bold; font-size: 12px; margin-bottom: 10px;}

/********************************************/
/****************** D A S H *****************/
/********************************************/
/* dash */
.dash {position: relative;}
.dash-app {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; margin-top: 84px;}

.dash-app .topbtn {height: 23px !important; float: right; font-size: 12px; padding: 2px 12px; border-radius: 4px; box-shadow: none; transition: all 0.2s;}




.dash-row {margin-bottom: 20px; margin-top: 20px;}
@media (min-width: 992px) {
.dash-app {margin-left: 268px;}
.dash-compact .dash-app {margin-left: 0;}}
.dash-content {-webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; padding: 5px; margin-bottom: 60px; }
@media (max-width: 767.98px) {.dash-content {padding: 15px 0px;}}

/* dash-nav // sidebar */
.dash-nav {min-width: 268px; position: fixed; left: 0; top: 0; bottom: 0; overflow: auto;}
.dash-nav::-moz-scrollbar-track{border:1px solid #fff; background-color:#fff;padding:2px 0}
.dash-nav::-moz-scrollbar{width:10px; background-color:#424858}
.dash-nav::-moz-scrollbar-thumb{border-radius:10px;box-shadow:inset 0 0 6px #424858;background-color:rgba(0,0,0,.2);border:1px solid #f7f7f7}

.dash-nav::-webkit-scrollbar-track {border: 1px solid #fff; background-color: #fff; padding: 2px 0;}
.dash-nav::-webkit-scrollbar {width: 10px; background-color: #424858;}
.dash-nav::-webkit-scrollbar-thumb {border-radius: 10px; box-shadow:inset 0 0 6px #424858; background-color:rgba(0,0,0,0.2); border:1px solid #f7f7f7;}

.dash-nav::-ms-scrollbar-track {border: 1px solid #fff; background-color: #fff; padding: 2px 0;}
.dash-nav::-ms-scrollbar {width: 10px; background-color: #424858;}
.dash-nav::-ms-scrollbar-thumb {border-radius: 10px; box-shadow:inset 0 0 6px #424858; background-color:rgba(0,0,0,0.2); border:1px solid #f7f7f7;}

.dash-nav::-o-scrollbar-track {border: 1px solid #fff; background-color: #fff; padding: 2px 0;}
.dash-nav::-o-scrollbar {width: 10px; background-color: #424858;}
.dash-nav::-o-scrollbar-thumb {border-radius: 10px; box-shadow:inset 0 0 6px #424858; background-color:rgba(0,0,0,0.2); border:1px solid #f7f7f7;}

.dash-nav::scrollbar-track {border: 1px solid #fff; background-color: #fff; padding: 2px 0;}
.dash-nav::scrollbar {width: 10px; background-color: #424858;}
.dash-nav::scrollbar-thumb {border-radius: 10px; box-shadow:inset 0 0 6px #424858; background-color:rgba(0,0,0,0.2); border:1px solid #f7f7f7;}

.dash-compact .dash-nav {display: none;}

@media (max-width: 991.98px) {
.dash-nav {display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 1070;}
.dash-nav.mobile-show {display: block;}}

/* dash-nav-dark */
.dash-nav.dash-nav-dark {background: #615c5c;}
.dash-nav.dash-nav-out {background:linear-gradient(#253d90,#253d90);}

/* dash-nav header */
.dash-nav header {min-height: 84px; padding: 8px 23px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background:#F3F3F3;}
.dash-nav header .menu-toggle {display: none; margin-right: auto;}
@media (max-width: 991.98px) {
.dash-nav header .menu-toggle {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}}
.dash-nav header .dash-rank {margin-right: auto;}


/* .dash-nav.dash-nav-superadmin {background-color: #00359a;}
.dash-nav.dash-nav-admin {background: linear-gradient(#253d90,#253d90);}
.dash-nav.dash-nav-agent {background-color: #000;}
.dash-nav.dash-nav-subagent {background-color: #303030;} */


/********************************************/
/**************** H E A D E R ***************/
/********************************************/
/* dash-toolbar */
.dash-toolbar {min-height: 84px; background-color: #F3F3F3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display:flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items:center; padding: 8px 27px; position: fixed; top: 0; right: 0; left: 0; z-index: 1000; border-bottom: 1px solid #dcdcdc !important}
.menu-toggle, .searchbox-toggle, .searchbox-submit, .tools-item {position: relative; width: 42px; height: 42px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: #515151;}
.menu-toggle i, .searchbox-toggle i, .searchbox-submit i, .tools-item i {font-size: 20px;}
@media (min-width: 992px) {.dash-toolbar {left: 268px;}.dash-compact .dash-toolbar {left: 0;}}

/* search-box */
.searchbox {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2;}
.searchbox-toggle {display: none; color: #515151;}
.searchbox-input {border: none; background-color: #F3F3F3; height: 50px; padding: 8px 8px 11px 4px; -webkit-box-flex: 2; -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; width: 100px;}
.searchbox-input::-webkit-input-placeholder {color: #8b8b8b;}
.searchbox-input::-moz-placeholder {color: #8b8b8b;}
.searchbox-input:-ms-input-placeholder {color: #8b8b8b;}
.searchbox-input::-ms-input-placeholder {color: #8b8b8b;}
.searchbox-input::placeholder {color: #8b8b8b;}
.searchbox-input:focus {outline: none;}
.searchbox-submit {border: none; background: none; padding: 0;}

/* tools */
.tools {margin-left: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.tools a {color: #515151;}
.tools .tools-item {margin-right: 5px; margin-left: 5px; transition: 0.3s all;}
.tools .btn-logout {color:#515151;}
.tools .btn-logout:focus {color:#fff; outline: none;}

/* header actions */
.menu-toggle:hover, .searchbox-toggle:hover, .searchbox-submit:hover, .tools-item:hover, 
.menu-toggle:active, .searchbox-toggle:active, .searchbox-submit:active, .tools-item:active, 
.menu-toggle:focus, .searchbox-toggle:focus, .searchbox-submit:focus, .tools-item:focus {text-decoration: none; color: #515151; outline: none; cursor: pointer;}

/* media queries */
@media (max-width: 767.98px) {
.searchbox {display:none; position:fixed;top:0; right:0; left:0; background:#F3F3F3; min-height:84px; z-index:1071; padding:8px 27px;}
.searchbox.show {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.searchbox-submit {-webkit-box-ordinal-group: 10; -webkit-order: 9; -ms-flex-order: 9; order: 9;}
.searchbox-toggle {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}}

/********************************************/
/******************* SIDEBAR ****************/
/********************************************/
/* dash-rank */
.dash-rank {font-size: 16px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.dash-rank:focus, .dash-rank:active, .dash-rank:hover {color: #515151; outline: none; text-decoration: none;}

/* dash-info */
.dash-info {background: #615c5c; padding: 10px 20px;}
.dash-info h3 {color: #eee; font-size: 14px; line-height: 20px; text-align: left; font-weight: bold; margin: 0 0 5px auto; padding: 0;}
.dash-info h4 {color: #eee; font-size: 14px; line-height: 20px; text-align: left; margin: 0 0 0 auto; padding: 0;}
.dash-info .imgbox {width:50px; height:50px; text-align:center; margin:0 auto 10px;}
.dash-info .imgbox img {border-radius:50%; display:block; margin:0px auto 20px;}

/* dash-nav-list */
.dash-nav-list {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #121212; color: #121212; }
.dash-nav-item {min-height: 33px; font-size: 15px; text-transform: capitalize; outline: none; padding: 7px 20px 9px 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; transition:0.4s all ease-in-out; color: #eee;}
.dash-nav-item i {width: 36px; font-size: 18px; margin-left: -30px; color: #eee;}
.dash-nav-item:hover, .dash-nav-item:hover i {text-decoration: none; color: #eee;}

.hrcm {padding-bottom: 88px;}
.hrcm .hrcm-dash-info {
  background: rgba(0, 0, 0, 0.25); 
  text-align:left !important; padding: 0px 20px; }
.hrcm .hrcm-dash-info h5 {font-size: 12px; font-variant: small-caps; text-align:left  !important; padding: 8px 0px 0 10px; color: #fcce0d}



.dash-nav-dark .dash-nav-item:hover,
.dash-nav-dark .dash-nav-item:focus {outline: none; background: rgba(0, 0, 0, 0.3);}
.dash-nav-dropdown {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.dash-nav-dark .dash-nav-dropdown.show {background: rgba(0, 0, 0, 0.4); outline: none;}
.dash-nav-dropdown.show > .dash-nav-dropdown-toggle:after {-webkit-transform: none; -o-transform: none; transform: none;}
.dash-nav-dropdown.show > .dash-nav-dropdown-menu {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}
.dash-nav-dropdown.show .dash-nav-dropdown.show {background: none;}
.dash-nav-dark .dash-nav-dropdown-toggle:focus, 
.dash-nav-dropdown-item:focus .dash-nav-dropdown-toggle {outline: none;}
.dash-nav-dropdown-toggle:after {content: ""; margin-left: auto; display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(81, 81, 81, 0.8); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
.dash-nav-dark .dash-nav-dropdown-toggle:after {border-top-color: rgba(255, 255, 255, 0.72);}
.dash-nav-dropdown-menu {display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.dash-nav-dropdown-menu > .dash-nav-dropdown .dash-nav-dropdown-menu .dash-nav-dropdown-item {padding-left: 87px;}
.dash-nav-dropdown-item {transition:0.4s all ease-in-out; line-height: 30px; font-size: 14px; padding: 6px 20px 6px 70px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.dash-nav-dropdown-item:hover {color: #f00;}

/********************************************/
/************** DASH CONTENT ****************/
/********************************************/
/* dash-content */
.dash-title {margin: 20px 0; display: block; font-size: 16px; line-height: 24px; font-weight: 700; color: #515151;}
.content-anchor::before {display: block; height: 6rem; margin-top: -6rem; visibility: hidden; content: ""; }
.content-anchor-link {color: #292829; opacity: .46; font-size: 19px; margin-left: 7px;}

/* dash-stats */
.dash-stats {margin-bottom:15px; padding: 18px; box-shadow: 0 8px 6px -6px #222; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; min-height:20px; border: 1px solid #41aedc;background:linear-gradient(#41aedc,#06f0f3);-webkit-background:linear-gradient(#41aedc,#06f0f3);-moz-background:linear-gradient(#41aedc,#06f0f3); border-radius: 3px;}
.dash-stats .stats-title {font-size: 15px; color:#fff; font-weight: bold; text-align: center; text-transform: uppercase;}
.dash-stats .stats-desc {font-size: 12px; color:#fff; font-weight: 300; text-align: center; margin-bottom: 0px;}


/* profilebox */
.profilebox {border-bottom: 1px solid #e2e6e9; background: #fff; padding: 0; margin: 5px 0 10px 0; display: block; box-shadow: 4px 8px 6px -6px #222;
  padding: 15px 20px; color: #456; text-decoration: none; border-radius: 9px;}
.profilebox h4 {font-size: 16px;}

.profilebox .logobox {border-radius: 50%; height: 88px; width: 88px; text-align: center; margin: auto;}
.profilebox .logobox img {border-radius: 50%; height: 88px; width: 88px;}

.namebox {border-bottom: 1px solid #ccc; margin-top: 20px; padding: 0 10px; word-wrap: break-word;}
.namebox-no-mt {border-bottom: 1px solid #ccc; margin-top: 0; padding: 0 10px; word-wrap: break-word;}
.namebox h4, .namebox-no-mt h4 {font-size: 15px; font-weight: bold; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


.detailbox {margin-top: 15px;}
.detailbox p {font-size: 13px; padding: 5px 0; margin: 0; text-align: left; font-weight: 600; line-height: normal;}
.detailbox p span.title {width: 100px; display: inline-block;}

.detailbox p span.det {opacity: .5;  display: inline-block; float:right;}

/* public jobs */
.public {
  background-image: url(../img/group-kr.jpg);
  background-position: bottom;
  background-attachment: fixed;
  background-size: cover;
  margin-top: 50px; 
  margin: auto;
  color: #fff;
  text-align: center;
}
.public .layer {
  background-color: rgba(0, 0, 0, 0.7);
  min-height: 300px;
  padding:20px;
}
.public .layer h3 {
  font-size: 35px;
  margin-top: 70px;
  line-height: 43px;
  font-weight: 500;
  margin-bottom: 20px;
}
.public .layer p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 500;
}
.public .layer .btn {
  font-size: 18px;
  padding: 8px 17px;
  color: #fff;
  line-height: 30px;
  font-weight: 500;
  background-color: #f05421;
}
.publicjobs {
  padding-bottom: 90px;
}
.publicjobs h2 {
  font-size: 22px;
  line-height: 22px;
  color: #646d8c;
  margin: 35px auto;
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 30px;
}
.publicjobs .pubcard {
  border-radius: 6px;
  border:1px solid #ccc;
  background-color:#fff;
  padding: 20px;
  margin-top: 10px;
  transition: 0.2s ease-in all;
  box-shadow: 0 0 10px #ccc;
}
.publicjobs .pubcard:hover {
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
.publicjobs .pubcard h5, .publicjobs .pubcard a {
  color: #f05421;
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 0;
}
.publicjobs .pubcard p {
  font-size: 15px;
  line-height: 19px;
  color: #171b27;
  font-weight: 500;
  margin-bottom: 0;
  text-transform: capitalize;
}

.publicjobsfooter {
  padding: 20px;
  background-color:#4a4a4a;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding-top: 40px;
}














/* card-header */
.spur-card {border: 1px solid #ccc; background: #fff; margin-bottom: 30px; box-shadow: 0 8px 6px -6px #222; margin-top: 5px;}
.same-height {min-height: 425px; max-height: 400px; overflow-y: auto; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px}
.card-header {min-height: 55px; border-bottom-color: #888; background-color: #F0F1F7; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 4px 22px;}
.card-header .spur-card-icon {margin-right: 10px; margin-left: 0; font-size: 14px;}
.card-header .spur-card-title {font-weight: 700; color: #515151; font-size: 18px;}
.card-header .spur-card-menu {margin-left: auto;}
.card-header .spur-card-menu .myybtn {height: 23px !important; font-size: 12px; padding: 2px 12px; border-radius: 4px; box-shadow: none; transition: all 0.2s;}
.card-header .spur-card-menu .export_csv {background:#31a650; border-color:#31a650; color:#fff; padding: 4px 12px; height: 25px; border-radius: 3px;}
.card-header .spur-card-menu .export_pdf {background:#e93f31; border-color:#e93f31; color:#fff; padding: 4px 12px; height: 25px; border-radius: 3px;}

@media(max-width: 768px){
.same-height {min-height: 425px; max-height: 100%; overflow-y: auto;}}

/* card-header // form-right */
.card-header .form-right {float: right; margin: 0  0 0 auto; display: block;}
.card-header .form-right .form-control {padding: 3px 10px; max-width: 170px;}
.card-header .form-right button {font-size: 11px; border-radius: 0; padding: 7px; text-transform: uppercase; letter-spacing: 1px;}
.card-header .form-right button:focus {box-shadow: none; outline: none;}

/* cardheader // spur-card-menu */
.spur-card-menu .btn-group {margin-bottom: 0;}
.spur-card-menu select {height: 29px; min-width: 130px; font-size:10px; border-radius: 3px 0 0 3px;}
.spur-card-menu button {margin-top:0; min-width: 100px; background: #0d6efd; font-size: 11px; height: 29px; border-radius: 0 3px 3px 0; color: #fff; padding-top: 7px;}
.spur-card-menu button:hover {color: #fff; background:#0d6efd; border-color:#41aedc;}
.spur-card-menu button:focus, .spur-card-menu button.active {outline: none; box-shadow: none;  }



















/* card-body */
.card-body {padding: 18px 22px;}

/* card-body // forms */
.card-body .form-check {font-size: 14px; font-weight: bold;}
.card-body > form > .mybtn {float: right; display: inline-block; padding: 3px 8px; font-size: 11px; margin-top: 15px;}
.card-body > form > .mybtn:focus {box-shadow: none; outline: none;}
.control-label-sm {font-size: 12px;}
.control-label-xs {font-size: 11px !important; margin-top: 3px; line-height: 14px; font-weight: 500;}
.form-control {padding:6px 15px 5px 10px; border-radius: 0; box-shadow: none; border-color: #888594; font-size: 12px; color: #323a45;}
.form-control:focus {border: 1px solid #555; box-shadow:inset 0 2px 2px rgba(0,0,0,0.1)}
input[type="file"].form-control {padding: 3px 15px 3px 10px; height: 30px;}

/* buttons */
.card-body .btn-primary {font-size: 11px; padding-top: 3px 7px; letter-spacing: 1px; background: #0067b8; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .btn-success {font-size: 11px; padding-top: 3px 7px; letter-spacing: 1px; background: #009933; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .btn-danger {font-size: 11px; padding-top: 3px 7px; letter-spacing: 1px; background: #FC413F; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .btn:focus, .form-check-input:focus {box-shadow: none; outline: none;}
.card-body .csvbtn {background:#441f7d !important; border-color:#441f7d  !important;padding: 4px 12px  !important; height: 25px  !important;}
.card-body .newbtn {width:100%; background:linear-gradient(#fe5000,#f60); color:#fff; border-radius:50px;}
.card-body .newbtn:hover {background:linear-gradient(#f60,#fe5000); }

/* tables */
.card-body .table {margin-bottom: 0; border-color: #888;}
/* .card-body h4 {font-size: 13px; font-weight: bold; background: #444; padding: 5px 10px; color: #fff; margin-bottom: 10px;} */
.card-body .table thead {background: #444; color: #fff;}
.card-body .table th {font-size: 13px; font-weight: 500; padding: 3px 6px; line-height: 19px;}
.card-body .table td {font-size: 12px; font-weight: 400; border-bottom: 1px solid #888;}


.card-body .table td .btn {padding: 3px 10px; font-size: 11px; min-width:30px; margin: 0; border:none; background-color:#4B9CD3 !important; text-align:center; box-shadow:none; font-weight:500;}
.card-body .table td .btn-edit {background-color:#4169e1 !important; color:#fff; }
.card-body .table td .btn-surview {background-color:#f93 !important; color:#fff;}
.card-body .table td .btn-review {background-color:#00ffff !important; color:#444;}
.card-body .table td .btn-preview {background-color:#00b3b3 !important; color:#fff;}
.card-body .table td .btn-view {background-color:#006400 !important; color:#fff;}
.card-body .table td .btn-delete {background-color:#B22222 !important; color:#fff; }
.card-body .table td .btn-edit:hover {background-color:#00308f !important; color:#fff;}
.card-body .table td .btn-delete:hover {background-color:#8B0000 !important; color:#fff;}


.card-body .table td .pagination {margin: 4px auto;}
.card-body .table td .pagination li {font-size: 14px; padding: 4px; border-right: 1px solid #ccc !important; background: #444; color: #fff;}
.card-body .table td .pagination li:first-child {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.card-body .table td .pagination li:last-child {border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
.card-body .table td .pagination li a {color: #fff; padding:16px  12px !important;}
.card-body .table td.revoking select {height: 22px; width: 150px; font-size:10px; border-radius: 3px;}
.card-body .table td .btn-warning {font-size: 11px; padding: 3px 7px; background: #FCAE3F; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .table td .btn-primary {font-size: 11px; padding: 3px 7px; background: #0067b8; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .table td .btn-success {font-size: 11px; padding: 3px 7px; background: #093; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .table td .btn-danger {font-size: 11px; padding: 3px 7px; background: #FC413F; box-shadow: none; border-radius: 3px; text-transform: uppercase; margin-right: 5px;}
.card-body .table td span.badge {padding: 6px 10px; font-size: 12px; }
.card-body .table td span.badge-primary {background: #0067b8 !important; color:#fff;}
.card-body .table td span.badge-success {background: #093 !important; color:#fff;}
.card-body .table td span.badge-danger {background: #FC413F !important; color:#fff;}
.card-body .table td span.badge-secondary {background: #424242 !important; color:#fff;}
.card-body .table td span.badge-warning {background: #FCAE3F !important; color:#fff;}
.card-body .table .mybtn {border:none; display: inline-block; background: transparent; color: #212529;}
.card-body .table .mybtn:focus {outline: none;}
.card-body .table-policy thead th {background: #441f7d !important; padding: 8px; text-align: center; font-size: 18px;}
.card-body .table-policy tbody {margin-bottom: 30px;}
.card-body .table-policy th {background: #f0f0f0 !important; width: 50%; padding: 4px 8px !important; font-size: 12px !important; font-weight: 400 !important;}
.card-body .table-policy td {padding: 4px 8px !important; font-size: 12px !important; font-weight: 400 !important;}
@media(max-width:768px){.nodisplay {display:none !important;}}

/* card certificate */
.policy-cert {border: 5px solid #444; padding: 20px; background: #FFF;}
.policy-cert h1 {font-size: 16px; text-align: center; background: #FFF; font-weight: 600;}
.policy-cert .policy-code {display: block; margin-bottom: 30px;}
.policy-cert p {margin-bottom: 10px;}
.policy-cert p, .policy-cert li {font-size: 15px; font-weight: 800; line-height: 22px;}
.policy-cert a {text-decoration: underline;}
.policy-cert .files {padding: 50px 0 20px;}
.policy-cert h2 {font-size: 20px; font-weight: bold; margin-top: 20px;}
.policy-cert h3 {font-size: 75px; font-weight: bold; padding: 30px 0 0; margin-bottom: 0;}
.policy-cert span {font-size: 20px; display: inline-block;}

/* checkbox */
.table .ccbox {display: block; position: relative; padding-left: 0; margin-bottom: 0; cursor: pointer; font-size: 9px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.table .ccbox input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.table .ccbox .checkmark {position: absolute; top: 0; left: 0; height: 20px; width: 20px; border-radius: 3px; background: #c7c7c7;}
.table .ccbox:hover input ~ .checkmark {background-color: #ccc;}
.table .ccbox input:checked ~ .checkmark {background-color: #2196F3;}
.table .ccbox .checkmark:after {content: ""; position: absolute; display: none;}
.table .ccbox input:checked ~ .checkmark:after {display: block;}
.table .ccbox .checkmark:after {left: 6px; top: 5px; width: 6px; height: 9px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.controls {font-size: 12px;}
.checkbox {margin-right: 12px; margin-top: 0px;}

/* chart */
.spur-card-body-chart {position: relative; max-width: 99%;}
@media (max-width: 767.98px) {
.spur-card-body-chart {padding: 12px 5px;}
.spur-card .card-header {padding: 4px 18px;}
.spur-card .card-body {padding: 18px;}
.spur-card .card-body .btn-primary {margin-bottom: 5px;}}

/* dashbox */
.dashbox {border-bottom: 1px solid #e2e6e9; background: #fff; padding: 0; margin: 5px 0 20px 0; display: block; box-shadow: 4px 8px 6px -6px #222;
   padding: 15px 20px; color: #456; text-decoration: none; border-radius: 9px;}
a.dashbox:hover, a.dashbox:focus {outline: none; color: #456; text-decoration: none;}
.dashbox h4 {font-size: 16px;}
.dashbox p {font-size: 30px; padding: 0; margin: 0; text-align: right; font-weight: 600; line-height: normal;}
.dashbox span {font-size: 11px; opacity: .5; display: block; text-align: right; margin-bottom: 0;}

.bg-darkblue {background-color: #1042b7; color: #fff; border:1px solid #1042b7;}
.bg-darkblue span {font-size: 13px; opacity: 1; display: block; text-align: left; margin-top: 10px;}

.bg-cyan {background:linear-gradient(to bottom left,#3F84FC 10%,#209bc6 100%); border:1px solid #3F84FC;}
.bg-red {background:linear-gradient(to bottom left,#f75453 10%,#fc413f 100%); border:1px solid #f75453;}
.bg-green {background-color: #3b8f69;border-color: #30a650;}
.bg-yellow {background:linear-gradient(to bottom left, #f0b405 10%, #f39c12 100%); border:1px solid #edb100;}
.bg-gold {background:linear-gradient(to bottom left, #5a4804 10%, #a5921c 100%); border:1px solid #5a4804;}
.bg-primary {color: #fff; background: #3F84FC; border-color: #3F84FC;}
.bg-secondary {color: #fff; background: #727F94; border-color: #727F94;}
.bg-success {color: #fff; background: #1DAB47; border-color:#009933;}
.bg-info {color: #fff; background: #8A3FFC; border-color: #8a3ffc;}
.bg-warning {color: #212529; background: #FCAE3F; border-color:#FCAE3F;}
.bg-danger {color: #fff; background: #FC413F; border-color:#FC413F;}
.bg-light {color: #212529; background: #f8f9fa;}
.bg-dark {color: #fff; background: #1E232D;}
@media (max-width:768px){
.dashbox h4 {font-size: 14px;}
.dashbox p {font-size: 18px; font-weight: 400;}
.dashbox span {font-size: 10px;}}

/* added */
.control-label {display: block; font-size: 14px; color: #515151; margin-bottom: 10px; font-weight: bold;}
.control-label span {color: #fc1607;}
.form-group {display: block; margin-bottom: 15px;}
.btn-nav {border: transparent; background: transparent; color: #fff; min-height: 46px; padding: 8px 20px 8px 70px;}
.btn-nav i {width: 36px; font-size: 18px; margin-left: -50px; margin-right: 10px;}

/*  myspec */
.myspec .btn {background:#444 !important;color: #fff !important; font-size:12px !important; width: 80px !important;text-decoration: none;}
.myspec .btn:hover {background:#444444 !important; color: #fff !important; border-color:#444444 !important;}

/* footer */
footer {padding: 20px; background-color: #e9edf4; position: fixed; left: 268px; bottom: 0; width: 100%; border-top: 1px solid #aaa;}
footer p {margin-bottom: 0; padding-bottom: 0; font-size: 12px;}
@media(max-width: 991px){footer {left: 0;}}

/* .modal */
.modal {margin-top: 50px;}
.modal .modal-header {background-color: #303030; color: #fff; padding: 10px 20px; border-bottom: 1px solid #121212;}
.modal .modal-header h4 {text-align: left; font-size: 18px; margin-top: 5px;}
.modal .modal-header button {margin-right: 0; padding-right: 0; color: #fff;}
.modal .modal-header button:focus {outline: none; box-shadow: none;}
.modal .modal-body {padding-top: 15px;}
.modal .modal-body .btn {background: #f0b405; letter-spacing: 1px; padding: 6px 10px; display: block; font-size: 12px; width: 100%; 
  border-color: #f0b405; color:#fff; text-transform: uppercase;}

/* .modal .modal-body // forms */
/* .modal .modal-body label {font-weight: bold; font-size: 15px; color: #302e52; margin-bottom: 0;}
.modal .modal-body label span {font-size: 12px; color: #f60; font-weight: bold;}
.modal .modal-body .form-control {font-size: 15px; padding: 5px 10px; border-radius: 3px; }
.modal .modal-body .form-control::placeholder {color: #a0a0a0; font-size: 14px;}
.modal .modal-body .help-block {font-size: 12px; color: #8898aa;}
.modal .modal-body .btn-submit {background: #00d548; border-radius: 4px; border-color: #00d548; display: block; box-shadow: none; color: #fff;}
 */











/* login */
.login {padding: 0px 0 30px; background:#e4e9f2;}
.account {background: #fff;box-shadow:0 0 5px rgba(29,51,75,0.5);max-width:400px;padding:20px;margin:20px auto 0;border-radius:4px;}
.account h2{color:#212529;font-size:23px;font-weight:500;margin:0 auto;padding:0;text-align:center;}
.account label{font-weight:600;color:#212529; font-size:15px;}
.account label span {color: #fc1607;}
.account form p {font-size: 12px; font-weight: 500;}
.account .form-group {margin-top:0;}
.account .form-control{font-size: 14px; border-color:#888; box-shadow: none; border-radius: 3px;}
.account .form-control:focus{border:2px solid #888594;color: #666;border-color: #00b5b8;}
.account .form-control::placeholder{color:#aaa;}
.account .btn{background: #178be9;margin-top:10px;cursor:pointer; width:100%;color:#fff;font-weight:400;}
.account .btn:focus{outline:none;box-shadow: none;}
.account .form_links {padding:20px 0 0;text-align:center;font-weight:500;}
.account .form_links p {font-size:14px; margin-bottom:8px; margin-top: 10px; color:#888594}
.account .form_links p a {text-decoration:none; color:#2e3192; font-weight:bold;}
.account .form_links span {height:1px; background:#888594; width:100%; margin:10px 0; display:block; }


/* addbox */
.add-row {display:flex; width: 100%; text-align:center; margin: 0 auto;}
.addbox {border-bottom: 1px solid #e2e6e9; background: #fff; padding: 0; margin: 5px 0 10px 0; display: block; box-shadow: 4px 8px 6px -6px #222;
  padding: 15px 20px; color: #456; text-decoration: none; border-radius: 9px; text-align:center;}
.addbox h4 {font-size: 16px; font-weight:bold; border-bottom: 1px solid #888; margin: 10px 0; padding: 0 10px 15px; word-wrap: break-word;}
.addbox p {font-size: 13px; padding: 5px 0; margin: 0; text-align: center; font-weight: 600; line-height: normal;}
.addbox p a i {font-size: 70px; text-decoration: none; color: #1042b7; font-size: 70px; display:inline-block;}
.addbox p a i:hover {color:#1042b7;}



.profile-view {
  position: relative;
}
.profile-view .profile-img-wrap {
  height: 120px;
  width: 120px;
  position: absolute;
}
@media (max-width: 575px) {
  .profile-view .profile-img-wrap {
    position: relative;
    margin: 0 auto;
  }
}
.profile-view .profile-img-wrap img {
  border-radius: 50%;
  height: 120px;
  width: 120px;
}
.profile-view .profile-img {
  width: 120px;
  height: 120px;
}
.profile-view .profile-basic {
  margin-left: 140px;
  padding-right: 50px;
}
@media (max-width: 575px) {
  .profile-view .profile-basic {
    margin-left: 0;
    padding-right: 0;
  }
}
.profile-view .profile-basic .profile-info-left {
  border-right: 2px dashed #D3D3D4;
}
@media (max-width: 575px) {
  .profile-view .profile-basic .profile-info-left {
    text-align: center;
    padding: 15px 0;
  }
}
@media (max-width: 768px) {
  .profile-view .profile-basic .profile-info-left {
    border-right: none;
    border-bottom: 2px dashed #D3D3D4;
    margin: 0 0 20px;
    padding: 0 0 20px;
  }
}
.profile-view .profile-basic .profile-info-left .user-name {
  color: #373B3E;
}
.profile-view .profile-basic .profile-info-left .staff-id {
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px;
}
.profile-view .profile-basic .profile-info-left .staff-msg {
  margin-top: 30px;
}
.profile-view .profile-basic .profile-info-left .staff-msg .btn-custom {
  background: #FF902F;
  background: linear-gradient(to right, #FF902F 0%, #FC6075 100%);
  color: #FFF;
}
.profile-view .profile-basic .profile-info-left .staff-msg .btn-custom:hover {
  border-color: #FF902F;
}
.profile-view .pro-edit {
  position: absolute;
  top: 0;
  right: 0;
}

.profile-action .dropdown-toggle:after {
  display: none;
}

.edit-icon {
  background-color: #ECEDEE;
  border: 1px solid #E2E4E6;
  color: #BCBEBF;
  float: right;
  font-size: 12px;
  line-height: 24px;
  min-height: 26px;
  text-align: center;
  width: 26px;
  border-radius: 24px;
}

.personal-info {
  padding: 0;
  margin: 0;
  list-style: none;
}
.personal-info li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}
@media (max-width: 991px) {
  .personal-info li {
    width: 100%;
  }
}
.personal-info li .title {
  color: #373B3E;
  float: left;
  font-weight: 500;
  width: 40%;
}
@media (max-width: 575px) {
  .personal-info li .title {
    width: 50%;
    margin: 0;
  }
}
.personal-info li .text {
  color: #7A7C7F;
  display: block;
  overflow: hidden;
  width: 60%;
  float: left;
  /* text-transform: capitalize; */
}
.personal-info li .text .avatar-box {
  float: left;
  position: relative;
}
.personal-info li .text .avatar-box .avatar-xs {
  line-height: normal;
}

.delete-icon {
  color: #FC133D;
  float: right;
  font-size: 18px;
}

.experience-box {
  position: relative;
}
.experience-box .experience-list {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
.experience-box .experience-list::before {
  background: #D5D8DA;
  bottom: 0;
  content: "";
  width: 2px;
  position: absolute;
  top: 8px;
  left: 8px;
}
.experience-box .experience-list li {
  position: relative;
}
.experience-box .experience-list li .experience-user {
  background: #FFF;
  height: 10px;
  width: 10px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 4px;
  left: 4px;
}
.experience-box .experience-list li .experience-user .before-circle {
  background-color: #D5D8DA;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}
.experience-box .experience-list li .experience-content {
  background-color: #FFF;
  margin: 0 0 20px 40px;
  padding: 0;
  position: relative;
}
.experience-box .experience-list li .experience-content .timeline-content {
  color: #909294;
}
.experience-box .experience-list li .experience-content .timeline-content a.name {
  color: #646669;
  font-weight: 700;
}
.experience-box .experience-list li .experience-content .time {
  color: #BCBEBF;
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.personal-info li .text .avatar-box {
  position: relative;
  top: 0;
}



/* data_box */
.data_box p {display: flex;}
.data_box p > span.title {font-weight: bold; font-size: 16px; line-height: normal; width: 40%;}
.data_box p > span.text {line-height: 14px; width: 60%; overflow: hidden; float: left;}

.job_card {margin-top: 5px; border-radius: 6px; }
.job_card_header {font-size: 17px; font-weight:bold; background-color:#919191; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; color:#fff; }
.job_card_header a {outline: none; text-decoration: underline;}

.job_card_span {background-color:#f0f0f0; text-transform: capitalize; display:inline-block; margin-right: 10px; 
  padding: 5px; padding-right: 10px; padding-left: 10px; border-radius: 6px; font-size: 12px; font-weight: 600;}
.job_card_btn {border-color:#0067b8; background:transparent; color:#0067b8; padding: 4px; border-radius: 4px; font-size: 12px; margin-right: 13px; margin-bottom: 5px;}
.job_card_body {padding: 10px; border-bottom: 1px solid #ccc; padding-left: 15px; }
.job_card_footer {padding: 10px; padding-left: 15px; }
.job_card_btn_primary {border-color:#1042b7; color: #154ccb; }
.job_card_btn_primary:hover, .job_card_btn_primary:active, .job_card_btn_primary.active {background-color:#1042b7; color: #fff; }
.job_card_btn_danger {border-color:#FC413F; color: #FC413F; }
.job_card_btn_danger:hover {background-color:#FC413F; color: #fff; }
.job_card_btn_green {background-color:#76cda6; border-color:#76cda6; color: #fff; outline: none; }
.job_card_btn_green:hover {background-color:#76cda6; color: #fff; }

.job_card_btn_success {background-color:#093; border-color:#093; color: #fff; outline: none; }
.job_card_btn_success:hover {background-color:#093; color: #fff; }

.ats_mini_card {padding: 10px; text-align: left; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 10px; display: block; width: 100%;}
.ats_mini_card h5 {font-size: 15px; font-weight: 600;}

.ats_mini_card span {color: #fff; border-radius: 9px; padding: 4px; min-width: 30px; text-align: center; font-size: 12px; display: inline-block;}
.ats_mini_card .views, .applicant_card .views {background-color:#edb100}
.ats_mini_card .total, .applicant_card .total {background-color: purple;}
.ats_mini_card .shortlisted, .applicant_card .shortlisted {background-color: darkslateblue;}
.ats_mini_card .interview, .applicant_card .interview {background-color: #1042b7;}
.ats_mini_card .hired, .applicant_card .hired {background-color: #093;}
.ats_mini_card .rejected, .applicant_card .rejected {background-color: red;}

.ats_mini_card .not-rated, .applicant_card .not-rated {background-color: #727F94;}
.ats_mini_card .rated, .applicant_card .rated {background-color: #727F94;}
.ats_mini_card .suitable, .applicant_card .suitable {background-color: #727F94;}
.ats_mini_card .maybe, .applicant_card .maybe {background-color: #727F94;}
.ats_mini_card .not-suitable, .applicant_card .not-suitable {background-color: red;}



.applicant_card {padding: 10px; text-align: left; border: 1px solid #ccc; border-radius: 0; display: block; width: 100%; word-wrap: break-word; }
.applicant_card h5 {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px;}
.applicant_card span {color: #fff; border-radius: 3px; padding: 4px; min-width: 30px; text-align: center; font-size: 12px; display: inline-block;}
.ats_mini_card:focus, .applicant_card:focus, .applicant_card:hover {outline: none; border: 1px solid #ccc; background-color: #E9EDF4;}

.applicant_details { padding: 0px; border: 1px solid #ccc; border-radius: 0;}
.applicant_details li {border-bottom: 1px solid #ccc; padding: 8px 10px 10px 15px; margin-bottom: 0;}
.applicant_details li:last-child {border-bottom: none;}
.btn_applicant_view {font-weight: bold; font-size: 12px; border: 1px solid #004ab9; padding: 2px 8px; color: #004ab9;}
.btn_applicant_view i {font-size: 10px;}


/* .table */
.my_profile .table {margin-bottom: 0;}
.my_profile .table thead th {font-size: 14px; padding: 3px 8px; font-weight: 600;}
.my_profile .table td {font-size: 14px; margin-bottom: 0; line-height: normal; padding: 8px;}
.my_profile .table td a.link {text-decoration: underline !important;}
.my_profile .table td .btn {padding: 3px 5px; font-size: 11px; margin: 0}
.my_profile .table td input {padding: 3px 8px; font-size: 11px; margin: 0}
.my_profile .table td .form-control {padding: 3px 8px; font-size: 11px; margin: 0}
.my_profile .table td select {padding: 5px 8px 5px 3px; font-size: 11px; margin: 0; line-height: normal;}
.my_profile .table td textarea {padding: 20px 8px; font-size: 12px; margin: 0}
.my_profile .table td form {display: inline;}
.my_profile .table td button.link {border:none; display: inline-block; background: transparent;margin-bottom: 0;padding: 0;text-decoration: underline;}
.my_profile .table td p {display: inline-block; margin-bottom: 0;}
.my_profile .table td hr {margin: 6px 0;}



.custom-modal .modal-content {
  border: 0;
  border-radius: 10px;
}
.custom-modal .modal-content .modal-header {
  border: 0;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  padding: 30px 30px 0;
}
.custom-modal .modal-content .modal-header .modal-title {
  font-size: 22px;
}
.custom-modal .modal-content .modal-header .btn-close {
  background-color: #A6A8A9;
  border: 0;
  color: #FFF;
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  opacity: 1;
  width: 20px;
  z-index: 99;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}
.custom-modal .modal-content .modal-body {
  padding: 30px;
}
.custom-modal .modal-content .modal-body .attach-files ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.custom-modal .modal-content .modal-body .attach-files ul li {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.custom-modal .modal-content .modal-body .attach-files ul li img {
  width: 50px;
}
.custom-modal .modal-content .modal-body .attach-files ul li .file-remove {
  color: #FC133D;
  position: absolute;
  top: -7px;
  right: -6px;
}
.custom-modal .modal-content .modal-body .status-toggle {
  float: left;
}
.custom-modal .modal-content .modal-body .input-block {
  margin-bottom: 1rem;
  float: left;
  width: 100%;
}
.custom-modal .modal-content .modal-body .input-block.col-sm-4 {
  width: 33.3%;
}
.custom-modal .modal-content .modal-body .input-block.col-sm-6 {
  width: 50%;
}
.custom-modal .modal-content .modal-body .add-group-btn .btn-primary {
  margin-top: 15px;
}
.custom-modal .modal-content .modal-body .chat-user-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.custom-modal .modal-content .modal-body .chat-user-list .chat-block {
  border-bottom: 1px solid #E9E9EA;
  border-radius: inherit;
  background-color: #FFF;
  padding: 10px;
}
.custom-modal .modal-content .modal-body .chat-user-list .chat-block .user-name {
  color: #373B3E;
}
.custom-modal .modal-content .modal-body .chat-user-list .chat-block .designation {
  color: #909294;
  font-size: 12px;
}
.custom-modal .modal-content .modal-body .chat-user-list .chat-block .online-date {
  color: #909294;
  font-size: 12px;
}
.custom-modal .modal-content .modal-body .chat-user-list .chat-block:hover {
  background-color: #f7f7f7;
}


.punch-det{background-color:#f9f9f9;border:1px solid #e2e4e6;border-radius:4px;margin:0 0 20px;padding:10px 15px}
.punch-det h6{line-height:20px;margin:0}
.punch-det p{color:#646669;font-size:14px;margin:0}
.punch-info{margin:0 0 20px}.punch-info .punch-hours{background-color:#f9f9f9;border:5px solid #e2e4e6;font-size:18px;height:120px;width:120px;margin:0 auto;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;align-items:center;-webkit-box-align:center;-ms-flex-align:center;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center}.punch-btn-section{text-align:center;margin:0 0 20px}.punch-btn-section .punch-btn{font-size:18px;font-weight:600;max-width:100%;padding:8px 40px;border-radius:50px}.punch-btn-section .stats-box{background-color:#f9f9f9;border:1px solid #e2e4e6;margin:0 0 15px;padding:5px}.punch-btn-section .stats-box p{font-size:12px;margin:0}.punch-btn-section .stats-box h6{margin:0}.recent-activity .res-activity-list{height:328px;list-style-type:none;overflow-y:auto;position:relative;margin:0;padding:0 0 0 30px}.recent-activity .res-activity-list:after{content:"";border:1px solid #e9e9ea;position:absolute;top:0;bottom:0;left:4px}.recent-activity .res-activity-list li{margin:0 0 15px;position:relative}.recent-activity .res-activity-list li:before{content:"";width:10px;height:10px;border:2px solid #ff902f;z-index:2;background:#fff;border-radius:100%;margin:0 0 0 15px;position:absolute;top:0;left:-45px}.recent-activity p{font-size:13px;margin:0}.recent-activity .res-activity-time{color:#bcbebf;font-size:12px}.att-statistics .progress{height:4px}.att-statistics .stats-info{background-color:#fff;border:1px solid #e9e9ea;text-align:center;border-radius:4px;margin:0 0 5px;padding:15px}.att-statistics .stats-info p{font-size:12px;margin:0 0 5px;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between;-webkit-justify-content:space-between;-ms-flex-pack:space-between}

.activity-box, .punch-info .punch-hours, .punch-det, .att-statistics .stats-info, .stats-info{border:1px solid #2e3840;background:#16191c;color:#bcbebf}


.stats-box{background-color:#16191c;border:1px solid #2e3840}


.employee-welcome-card {
  margin-bottom: 24px;
  position: relative;
  background: linear-gradient(90.31deg, #FF902F -1.02%, #FF2D3D 132.59%);
  box-shadow: 4px 8px 6px -6px #222;
  border-radius: 9px;
}
.employee-welcome-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  border-radius: 0px 0px 10px 0px;
  width: 100px;
  height: 100%;
  transform: skew(12deg);
  background: linear-gradient(90.31deg, #FF902F -1.02%, #FF2D3D 132.59%);
}
@media (max-width: 1399px) {
  .employee-welcome-card::before {
    display: none;
  }
}
.employee-welcome-card .employee-img {
  position: absolute;
  right: 0;
}
.employee-welcome-card .card-body {
  padding: 24px;
}
.employee-welcome-card .welcome-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.employee-welcome-card .welcome-info .welcome-content h5 {
  font-size: 18px;
  color: #FFF;
  margin-bottom: 5px;
}
.employee-welcome-card .welcome-info .welcome-content p {
  color: #EFF0F1;
  margin-bottom: 0;
}
.employee-welcome-card .welcome-info .welcome-content p span {
  font-weight: 500;
  color: #FFF;
  padding-bottom: 3px;
  border-bottom: 1px solid #FFF;
}
.employee-welcome-card .welcome-info .welcome-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.employee-welcome-card .welcome-info .welcome-img img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.employee-welcome-card .welcome-btn {
  position: relative;
  z-index: 1;
}
.employee-welcome-card .welcome-btn .btn {
  font-size: 15px;
  font-weight: 500;
  color: #373B3E;
  background: #FFEBDA;
  border: 1px solid #FFAF69;
  border-radius: 5px;
  line-height: normal;
  padding: 9px 12px;
  min-width: 110px;
}
.employee-welcome-card .welcome-btn .btn:hover {
  color: #373B3E;
  background: #FFD7B4;
  border-color: #FFD7B4;
}



.info-card {
  background: #009EFB;
  border: 1px solid #009EFB;
  position: relative;
  overflow: hidden;
}
.info-card::before {
  position: absolute;
  content: "";
  background: url(../img/bg/card-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
}
.info-card h5 {
  font-size: 18px;
  font-weight: 800;
  color: #FFF;
  margin-bottom: 15px;
}
.info-card .holiday-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  position: relative;
  z-index: 1;
}
@media (max-width: 575px) {
  .info-card .holiday-details {
    display: block;
  }
}
.info-card .holiday-details .holiday-calendar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
@media (max-width: 575px) {
  .info-card .holiday-details .holiday-calendar {
    margin-bottom: 15px;
  }
}
.info-card .holiday-details .holiday-calendar .holiday-calendar-icon {
  margin-right: 10px;
}
.info-card .holiday-details .holiday-calendar .holiday-calendar-content h6 {
  font-size: 15px;
  color: #FFF;
  margin-bottom: 0;
}
.info-card .holiday-details .holiday-calendar .holiday-calendar-content p {
  color: #FFF;
  margin-bottom: 0;
  font-size: 14px;
}
.info-card .holiday-details .holiday-btn .btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  font-size: 13px;
  font-weight: 500;
  color: #373B3E;
  background: #F5F6F7;
  border: 1px solid #F5F6F7;
  padding: 8px 14px;
}
.info-card .holiday-details .holiday-btn .btn:hover {
  color: #373B3E;
  background: #B3E2FE;
  border-color: #B3E2FE;
}


.stats-box {
  background-color: #F9F9F9;
  border: 1px solid #E2E4E6;
  margin: 0 0 15px;
  padding: 5px;
}
.stats-box h3 {
  margin-bottom: 0;
}
.stats-box p {
  margin: 0;
  font-size: 12px;
}

.card .card-title {
  color: #212529;
  font-size: 18px;
  font-weight: 800;
  line-height: 22px;
  margin-bottom: 20px;
}
/* .card .card-header {
  padding: 20px;
  border-bottom: 0;
  background: transparent;
}
.card .card-header .card-title {
  color: #212529;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0;
} */


.progress-xs {
  height: 4px;
}

.progress .progress-bar {
  background-color: #25628F;
}


.progress-bar.w-40 {
  width: 40%;
}
.progress-bar.w-65 {
  width: 65%;
}
.progress-bar.w-15 {
  width: 15%;
}
.progress-bar.w-88 {
  width: 88%;
}
.progress-bar.w-70 {
  width: 70%;
}
.progress-bar.w-31 {
  width: 31%;
}
.progress-bar.w-62 {
  width: 62%;
}
.progress-bar.w-22 {
  width: 22%;
}
.progress-bar.w-24 {
  width: 24%;
}
.progress-bar.w-30 {
  width: 30%;
}
.progress-bar.w-26 {
  width: 26%;
}
.progress-bar.w-10 {
  width: 10%;
}
.progress-bar.w-21 {
  width: 21%;
}
.progress-bar.w-20 {
  width: 20%;
}


.progress.height-5 {
  height: 5px;
}

.progress-bar.w-73 {
  width: 73%;
}

.progress-bar.height-10 {
  height: 10px;
}


.statistic-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -ms-flex-pack: space-between;
  padding-bottom: 15px;
}
.statistic-header h4 {
  font-size: 18px;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0;
}


.statistic-header .important-notification a {
  color: #373B3E;
  font-weight: 700;
  font-size: 13px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  line-height: normal;
}
.statistic-header .important-notification a:hover {
  color: #FF902F;
}
.statistic-header .important-notification a i {
  margin-left: 4px;
}

.attendance-list {
  /* border-bottom: 1px solid #D3D3D4; */
  margin-bottom: 15px;
  padding-bottom: 0;
}
.attendance-list .attendance-details {
  margin-bottom: 15px;
}
.attendance-list .attendance-details h4 {
  font-size: 20px;
  margin-bottom: 5px;
}
.attendance-list .attendance-details p {
  max-width: 105px;
  line-height: 12px;
  margin-bottom: 10px;
  font-size: 11px;
}

.task_statistics {
  box-shadow: 4px 8px 6px -6px #222;
  border-radius: 9px;
}

.employee-noti-content {
  padding: 0;
  width: 100%;
  display: block;
}

.notification_pad {
  padding: 10px 10px 10px 0px !important;
}

.employee-noti-content .employee-notification-list .employee-notification-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  box-shadow: 0px 4px 24px 0px rgba(188, 188, 188, 0.2509803922);
  padding: 15px;
  margin-bottom: 15px;
  width: 100%;
}
.employee-noti-content .employee-notification-list .employee-notification-grid:last-child {
  margin-bottom: 0;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-icon {
  margin-right: 8px;
  width: 45px;
  min-width: 45px;
  height: 45px;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-icon span {
  font-weight: 500;
  width: 45px;
  min-width: 45px;
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content h6 {
  font-size: 15px;
  margin-bottom: 5px;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content h6 a {
  color: #373B3E;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content h6 a:hover {
  color: #FF902F;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content .nav li {
  font-size: 12px;
  color: #7A7C7F;
  padding-right: 5px;
  position: relative;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content .nav li:last-child {
  padding-left: 5px;
  padding-right: 0;
}
.employee-noti-content .employee-notification-list .employee-notification-grid .employee-notification-content .nav li + li:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 1px;
  height: 15px;
  background: #D3D3D4;
}

.bg-primary-light {
  background-color: rgba(17, 148, 247, 0.12) !important;
  color: #2196f3 !important;
}

.bg-danger-light {
  background-color: rgba(255, 218, 218, 0.49) !important;
  color: #FF0000 !important;
}

.bg-purple-light {
  background-color: rgba(197, 128, 255, 0.12) !important;
  color: #c580ff !important;
}

.bg-default-light {
  background-color: rgba(40, 52, 71, 0.12) !important;
  color: #283447 !important;
}

.bg-success-light {
  background-color: #EEFAEF !important;
  color: #66D373 !important;
}

.card-two {
  border: 1px solid #DBDFEA;
  border-radius: 5px;
}

.badge-soft-primary {
  color: #405189;
  background-color: rgba(64, 81, 137, 0.1);
}

.badge-soft-secondary {
  color: #3577f1;
  background-color: rgba(53, 119, 241, 0.1);
}

.badge-soft-success {
  color: #0ab39c;
  background-color: rgba(10, 179, 156, 0.1);
}

.badge-soft-info {
  color: #299cdb;
  background-color: rgba(41, 156, 219, 0.1);
}

.badge-soft-warning {
  color: #f7b84b;
  background-color: rgba(247, 184, 75, 0.1);
}

.badge-soft-danger {
  color: #f06548;
  background-color: rgba(240, 101, 72, 0.1);
}

.badge-soft-dark {
  color: #212529;
  background-color: rgba(33, 37, 41, 0.1);
}

.badge-soft-light {
  color: #f3f6f9;
  background-color: rgba(243, 246, 249, 0.1);
}

.badge-outline-primary {
  color: #405189;
  border: 1px solid #405189;
  background-color: transparent;
}

.badge-outline-secondary {
  color: #3577f1;
  border: 1px solid #3577f1;
  background-color: transparent;
}

.badge-outline-success {
  color: #0ab39c;
  border: 1px solid #0ab39c;
  background-color: transparent;
}

.badge-outline-info {
  color: #299cdb;
  border: 1px solid #299cdb;
  background-color: transparent;
}

.badge-outline-warning {
  color: #f7b84b;
  border: 1px solid #f7b84b;
  background-color: transparent;
}

.badge-outline-danger {
  color: #f06548;
  border: 1px solid #f06548;
  background-color: transparent;
}

.badge-outline-dark {
  color: #212529;
  border: 1px solid #212529;
  background-color: transparent;
}

.badge-outline-light {
  color: #f3f6f9;
  border: 1px solid #f3f6f9;
  background-color: transparent;
}

.badge-gray-outline {
  background-color: #FFF;
  border: 1px solid #EFF0F1;
  color: gray;
}

.badge-gradient-primary {
  background: linear-gradient(135deg, #405189 0, #0ab39c 100%);
}

.badge-gradient-secondary {
  background: linear-gradient(135deg, #3577f1 0, #299cdb 100%);
}

.badge-gradient-success {
  background: linear-gradient(135deg, #0ab39c 0, #f7b84b 100%);
}

.badge-gradient-danger {
  background: linear-gradient(135deg, #f06548 0, #3577f1 100%);
}

.badge-gradient-warning {
  background: linear-gradient(135deg, #f7b84b 0, #eb990a 100%);
}

.badge-gradient-info {
  background: linear-gradient(135deg, #299cdb 0, #0ab39c 100%);
}

.badge-gradient-dark {
  background: linear-gradient(135deg, #212529 0, #405189 100%);
}


.employee-month-card {
  background: #FEDFE3;
  border: 1px solid #FC6075;
}
.employee-month-card .employee-month-details {
  margin-bottom: 20px;
}
.employee-month-card .employee-month-details h4 {
  font-size: 18px;
  color: #373B3E;
  margin-bottom: 5px;
}
.employee-month-card .employee-month-details p {
  font-size: 14px;
  color: #4D5154;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .employee-month-card .employee-month-content {
    margin-bottom: 10px;
  }
}
.employee-month-card .employee-month-content h6 {
  font-size: 15px;
  color: #FC6075;
  margin-bottom: 5px;
}
.employee-month-card .employee-month-content p {
  font-size: 14px;
  color: #373B3E;
  margin-bottom: 0;
}
.employee-month-card .employee-month-img {
  text-align: right;
}
@media (max-width: 991px) {
  .employee-month-card .employee-month-img {
    text-align: left;
  }
}

.handoverdoc {
  width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin-right: 5px;
    cursor: pointer;
    transition: "all 300ms ease-in-out";
    z-index: 111;
}