*, *::before, *::after { box-sizing: border-box; }
::selection { color: #FFF; background-color: #00635a; }

/* Reports Menu overflow scrollbar */
/*::-webkit-scrollbar { width: 12px; height: 12px; }*/
/*::-webkit-scrollbar-track { background: #d1d3dc; }*/
/*::-webkit-scrollbar-thumb { background: #6f7171; }*/
/*::-webkit-scrollbar-thumb:hover { background: #5B688A; }*/

/* Page loader css start */
.loader-cover {position: absolute;background-color: rgba(0, 50, 90, 0.2);z-index: 9999;height: 100vh;width: 100vw;display: flex;justify-content: center;align-items: center;}
.loader {border: 5px solid #f3f3f3;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-top: 5px solid #555;border-radius: 50%;width: 50px;height: 50px;}

#ajax_loader_cover {position: absolute;background-color: rgba(0, 50, 90, 0.2);z-index: 99999999999;height: 100vh;width: 100vw;display: flex;justify-content: center;align-items: center;}
#loading-image {border: 5px solid #f3f3f3;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-top: 5px solid #555;border-radius: 50%;width: 50px;height: 50px;}

#content_loader_cover {position: absolute;background-color: rgb(50 94 129 / 18%);z-index: 99999999999;min-height: 200px;height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}
#content-loading-image {border: 4px solid #f3f3f3;border-top: 4px solid #555;border-radius: 50%;width: 38px;height: 38px;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;}

/* Safari */
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Page loader css end */
body { font-size: 15px; }
ul, li { padding: 0; margin: 0; }
a { text-decoration: none !important; }
/* Menu overflow scrollbar */
.reports-menu, .app-menu::-webkit-scrollbar { width: 4px; height: 6px; }
.reports-menu, .app-menu::-webkit-scrollbar-track { background: #242939; }
.reports-menu, .app-menu::-webkit-scrollbar-thumb { background: #141821; }
.reports-menu, .app-menu::-webkit-scrollbar-thumb:hover { background: #5B688A; }

.app { position: relative; width: 100%; display: flex; min-height: 100vh; overflow: hidden; }
.app-left { position: fixed; width: 230px; min-height: 100vh; background-color: #242939; z-index: 999; transition: all 1s; }
.app-logo { height: 67px; width: 100%; display: flex; margin: 8px 0; justify-content: center; transition: all 1.2s; }
.app-logo-img-container { height: 100%; width: 100px; }
.app-logo img { height: 100%; width: 100%; }
.app-menu { margin-top: 10px; height: calc(100vh - 96px); overflow-y: auto; overflow-x: hidden; }
.app-menu ul { margin-left: 0; }
.menu-item { padding: 5px; font-size: 15px; display: flex; align-items: center; position: relative; border-left: 3px solid transparent; list-style: none; border-bottom: 1px solid #141821; transition: all 1.1s; }
.menu-item a { width: 100%; padding: 7px 12px; text-decoration: none; color: #c0c4d1; }
.menu-icon { margin-right: 6px; }
.menu-active { border-left-color: #009688; background-color: #141821; }
.menu-active a { color: #fff; }
.menu-item:hover { background-color: #141821; border-left-color: #009688; }
.menu-item:hover a { color: #fff; }

/* Dropdown menu */
.app-dropdown { position: relative; }
.dropdown-icon i { color: #c0c4d1; margin-right: 8px; transition: all 1.8s; }
.app-dropdown-menu { position: relative; margin-left: 4px; border-radius: 4px; background-color: #141821; display: none; }
.app-dropdown-menu li { padding: 8px 10px; }
.app-dropdown-item { border-left: 3px solid transparent; border-bottom: 1px solid #242939; }
.app-dropdown-item:first-child { border-top: 1px solid #242939; }
.app-dropdown-item:last-child:hover { border-bottom: 1px solid #141821; }
.app-dropdown-item a { color: #c0c4d1; }
.app-dropdown-item:hover { background-color: #242939; border-left-color: #009688; }
.app-dropdown-item:hover a { color: #fff; }


/* Reports Menu */
.report-menu-container,
.dl-menu-container { position: relative; }
.reports-menu,
.dl-menu {right: 0px;top: 35px;z-index: 1;width: 220px;font-size: 13px;overflow-y: auto;position: absolute;background-color: #ffffff;max-height: calc(100vh - 100px);display: none;}
#btn_report_menu, .btn-dl-menu { padding: 5px 10px; }
.dl-menu-item {padding: 6px 5px;font-size: 15px;align-items: center;position: relative;border-left: 2px solid transparent;list-style: none;border-bottom: 1px solid #dcd6d6;transition: all 0.5s;}
.dl-menu-item a { color: #212529; display: flex; }
.dl-menu-item:hover {-moz-box-shadow: 0px 0px 5px #888;-webkit-box-shadow: 0px 0px 5px #888;box-shadow: 0px 0px 5px #888;border-left-color: #888;}

/* Inner page right menu */
.inner-right-menu-container { width: 250px; }

/* Menu Vertical List */
.menu-vertical-list { position: relative; height: 100%; min-width: 250px; margin: 5px 0; }
.menu-vertical-item { display: flex; margin: 3px 0; }

/* App Left Responsive CSS */
.app-left-toggle.app-left { width: 55px; }
.app-left-toggle .app-logo { height: 40px; margin: 5px 0; }
.app-left-toggle .app-logo img { width: 52px; }
.app-left-toggle .menu-item .menu-text { opacity: 0; visibility: hidden; position: absolute;left: 48px; top: 0; background-color: #141821; padding: 12px 12px 12px 0; width: 179px; transition: all 1.2s;  }
.app-left-toggle .menu-item:hover .menu-text { opacity: 1!important; visibility: visible!important; }
.app-left-toggle.app-right .app-header { left: 55px;  }
.app-left-toggle.app-right .app-main { margin-left: 55px; }
.header-center { color: #c0c4cc; flex: 0 0 352px; }
.company-header-title { color: #c0c4d1; font-size: 22px; font-weight: 800; }

/* Dropdown Menu */
.app-left-toggle .menu-item .dropdown-icon { display: none; }
.app-left-toggle .app-dropdown-menu { display: block; opacity: 0; visibility: hidden; position: absolute; left: 45px; top: 48px;width: 181px; border-radius: 0px; transition: all 1.2s; }
.app-left-toggle .app-dropdown:hover .app-dropdown-menu { opacity: 1; visibility: visible; }

/* Aside Open less then 1170 after close Auto */
.left-open.app-left { width: 230px; }

/* Left Responsive Media CSS  */
@media only screen and (max-width: 1170px) {  .app-left { width: 55px; }  .app-logo { height: 40px; margin: 5px 0; }  .app-logo img { width: 40px; }  .menu-item .menu-text { opacity: 0; visibility: hidden; position: absolute;left: 48px; top: 0; background-color: #141821; padding: 12px 12px 12px 0; width: 185px; transition: all 1.2s;  }  .menu-item:hover .menu-text { opacity: 1!important; visibility: visible!important; }  .app-right .app-header { left: 55px; }  .app-right .app-main { margin-left: 55px; }  .company-header-title { font-size: 20px; font-weight: 800; }  }

@media only screen and (max-width: 670px) {  .company-header-title { font-size: 15px; font-weight: 800; }  }
@media only screen and (max-width: 525px) {  .company-header-title { font-size: 12px; font-weight: 700; }  }

/* App Right CSS */
.app-right { position: relative; flex: 1; margin-left: 0; overflow: hidden; }
.app-header { height: 55px; position: fixed; top: 0; right: 0; left: 230px; padding: 10px; background-color: #009688; z-index: 999; transition: all 1s;  }
.header-item { padding: 0; }
.header-item a { padding: 5px 15px; color: #c0c4d1; }
#header_location_name { font-size: 24px; }
.mob-app-header #header_location_name { font-size: 18px; }
.menu-toggle-icon { padding: 8px; }
.menu-toggle-icon i { color: #fff; font-size: 18px; }
.menu-toggle-icon:hover { cursor: pointer; }

.header-item-profile { margin-right: 14px; position: relative;}
.header-item-profile .logo-name { width:95px; text-align: center; position: absolute; top: 30px; right: -13px; color: #fff; font-size: 11px; }
.header-user-menu { width: 40px; height: 38px; margin-right: 15px; cursor: pointer; position: relative; top: -7px; }
.header-user-menu img { width: 100%; height: 100%; border-radius: 50%; background-color: #fff;}
.header-user-menu .user-icon { position: absolute; top: 13px; right: -12px; color: #fff; }
.user-profile-dropdown { right: 0; width: 180px; position: absolute; background-color: #fff; border-radius: 4px; display: none; }
.user-profile-dropdown li { padding: 4px; list-style: none; position: relative; border-bottom: 1px solid #c0c4d1; }
.user-profile-dropdown li a { color: #2d2d2f; display: block; padding: 5px;}
.user-profile-dropdown .menu-icon i { color: #2d2d2f }
/*.header-user-menu:hover .user-profile-dropdown { opacity: 1; visibility: visible; }*/
.user-profile-dropdown li:hover { background-color: #242939; }
.user-profile-dropdown li:hover a, .user-profile-dropdown li:hover i { color: #f1f7ff; }

/* General CSS Classes */

/* Main Inner CSS */
/* Login Page css */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 425px; border-radius: 6px; position: relative; margin-top: 0; }
.login-head { left: 140px; margin-top: -54px; }
.login-head .login-logo { width: 160px; height: 140px; }
.login-logo img { border-radius: 50%; width: 100%; }
.login-body { padding: 10px 30px 40px 30px; }

/* Inner Pages */
.app-main { color: #242939; margin-left: 230px; margin-top: 55px; position: relative; padding: 8px; min-height: calc(100vh - 55px);background-image: linear-gradient(86deg, rgba(29, 216, 198, 0.380392) 0, rgba(16, 67, 82, 0.83) 100%), url(../images/static/main-bg-1.jpg) !important; background-position: 12%; background-size: cover; transition: all 1s; }
.card-p {min-height: calc(95vh - 55px);background-color: rgba(255, 255, 255, 0.8); }
.card-p-header { display: flex; padding: 0.75rem 0.8rem; background-color: rgba(0, 0, 0, 0.03);align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.card-p-header .right { display: flex; }
.card-p-body { padding: 0.75rem 0.8rem; }

.shadow-1 { box-shadow: 5px 5px 8px 8px #888888; }
.make-visible { opacity: 1 !important; visibility: visible !important; }
.rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rotate-540 { -webkit-transform: rotate(540deg); transform: rotate(540deg); }
.btn-xs { padding: .36rem .4rem; font-size: .7rem; line-height: 1; }
.btn-xxs { padding: .18rem .3rem; font-size: .675rem; line-height: 1.2; }
.bg-theme { background-image: linear-gradient(86deg, rgba(29, 216, 198, 0.380392) 0, rgba(16, 67, 82, 0.83) 100%), url(../images/static/main-bg-1.jpg) !important; background-position: 12%; }
.bg-theme-color { background-color: rgba(255, 255, 255, 0.8) !important; }
.bg-theme-color-1 { background-color: rgba(204, 192, 192, 0.31) !important; }
.btn-group-sm>.btn, .btn-sm {font-size: .85rem;}

.form-group label { margin-bottom: 0.1rem !important; font-size: 14px; font-weight: 600; color: rgb(94, 94, 94); }

/* Firefox Bug: link not triggered */
a.waves-effect .waves-ripple { z-index: -1; }
.icon-button { color: inherit; padding: 2px; margin-right: 6px; }
.icon-button:hover { color: #117a8b; }
.icon-button:hover i { -webkit-transform: translateY(-1px); transform: translateY(-1.5px); }
.icon-button i {font-size: 21px;-webkit-transition: -webkit-transform 0.2s ease-in;transition: -webkit-transform 0.2s ease-in;transition: transform 0.2s ease-in;transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;}

.icon-success { color: #03C04A; }
.icon-primary { color: #005cbf; }
.icon-danger { color: #e3342f; }
.icon-warning { color: #ffc107; }
/* Table CSS */
.table-bordered { border-color: rgba(0,0,0,.075) !important; }
.table-bordered td { border-color: rgba(0,0,0,.075) !important; }
.thead-brown { background: #d1d1d1; }
.table-md tbody td { padding: .4rem; }
.table-md td { font-size: 15px !important; }
.td-4 { min-width: 4%!important; }
.td-5 { min-width: 5%!important; }
.td-6 { min-width: 6%!important; }
.td-8 { min-width: 8%!important; }
.td-10 { min-width: 10%!important; }
.td-12 { min-width: 12%!important; }
.td-14 { min-width: 14%!important; }
.td-15 { min-width: 15%!important; }
.td-16 { min-width: 16%!important; }
.td-18 { min-width: 18%!important; }
.td-22 { min-width: 22%!important; }

/* Form CSS */
/*.form-control { line-height: 2.5rem; }*/
.content-center { display: flex; justify-content: center; }
.alert dl, .alert ol, .alert ul {margin-top: 0;margin-bottom: 0;padding-left: 8px;}
.logo-view { height: 100px; width: 100px; }
.logo-view img { width: 100%; height: 100%; border-radius: 50%; border: 1px solid; }
.card .card-body .form-control { background-color: transparent; }

/* Select2 CSS */
.select2-container .select2-selection--single { height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 33px; }
.select2-container--default .select2-selection--single { border: 1px solid #ced4da; border-radius: 1px; background-color: transparent; }

/* For small select2 */
select.form-control-sm + .select2.select2-container {font-size: 14px !important;}
select.form-control-sm + .select2.select2-container .select2-selection--single {height: 32px;}
select.form-control-sm + .select2.select2-container .select2-selection__rendered {line-height: 30px;}


.card { border-radius: 8px; background-color: #fffc; }
.card-header {background-color: rgba(0,0,0,.02);border-bottom: 1px solid rgba(0,0,0,.125);}
.form-validate {  }
.modal-header { padding: 0.5rem 1rem; }
.modal-footer { padding: 2px 10px; }

.font-weight-600 {font-weight: 600!important;}

.fs-83x { font-size: 83px !important; }
.fs-20x { font-size: 20px !important; }
.fs-18px { font-size: 18px !important; }
.fs-17px { font-size: 17px !important; }
.fs-16px { font-size: 16px !important; }
.fs-15px { font-size: 15px !important; }
.fs-14px { font-size: 14px !important; }
.fs-13px { font-size: 13px !important; }
.fs-12px { font-size: 12px !important; }
.fs-11x { font-size: 11px !important; }
.fs-10x { font-size: 10px !important; }
.fs-9x { font-size: 9px !important; }
.fs-8x { font-size: 8px !important; }

.fw-6x { font-weight: 600 !important; }
.fw-5x { font-weight: 500 !important; }

.td-hover td:hover { background-color: #00968859; }
.td-shift { text-align: center; padding: 4px !important; }
.td-shift-add { display: flex; justify-content: center; padding: 2px; cursor: pointer; background-color: #ccd8d9; display: none; }
.td-shift:hover .td-shift-add { display: block; }

.shift-container { position: relative; padding: 2px; margin-bottom: 6px; border-radius: 6px; }
.shift-box { padding: 3px 1px; font-size: 13px; }
.shift-box:hover { cursor: pointer; }
.shift-pending { background-color: #e49242; border-left: 4px solid #B17030; }
.shift-confirm { background-color: #02b66b !important; color: white; border-left: 4px solid #118757; }
.shift-primary { background-color: #132068 !important; color: white; border-left: 4px solid #09103b; }
.shift-done { background-color: darkred; border-left: 4px solid black; }
.shift-delete { color: white; position: absolute; right: 0; top: 2px; padding: 4px 6px; font-size: 12px; }
.shift-delete:hover { color: #000000; cursor: pointer; }
.btn-shift-modal-footer { font-weight: bold; font-size: 14px; text-decoration: none; color: #8e9198!important; }

.shift-template-container { width: 100%; height: 100px; overflow-y: scroll; overflow-x: hidden; }
.shift-template-box { width: 100%; cursor: pointer; padding: 3px 10px; text-align: center; color: white; font-size: 15px; margin-bottom: 10px; background-color: #06aa9b; border: 1px dotted #1b4231;  border-left: 4px solid #096d65; }

.page-item.active .page-link { background-color: #009688; }
.btn-shift-header { margin-right: 10px; }
.b-right { border-right: 1px solid #8e9198; }
.btn-confirm-alert { position: relative; }
.hr-line {  margin: 6px 0;border-bottom: 1px solid rgba(0,0,0,.125); }
.hr-line-2x { border-bottom: 2px solid rgba(0,0,0,.125); margin: 10px 0; }
.vr-line { width: 1px; border-right: 1px solid rgba(0,0,0,.125); margin: 0; height: calc(100% - 0px); }
.wf-0 { flex: 0 0 0.2%; }

.custom-control-input:checked~.custom-control-label::before {color: #fff;border-color: #009688;background-color: #009688;}
.custom-control-label::before { width: 1.3rem; }
.custom-control-label::after { width: 1.3rem; }
span.ml-1 { margin-left: .35rem !important; }

/* Dashboard CSS */
.status { background-color: #fff; border-radius: 3px; overflow: hidden; }
.dashboard-status .status .right { flex: 1; }
.dashboard-status .status .left { flex: 0 0 25%; }
.dashboard-status .status .icon { font-size: 26px; }
.dashboard-status .status-1 .left { background-color: #2e80e7; color: #fff; }
.dashboard-status .status-1 .right { background-color: #5c9dec; color: #fff; }
.dashboard-status .status-2 .left { background-color: #564aa3; color: #fff; }
.dashboard-status .status-2 .right { background-color: #7266ba; color: #fff; }
.dashboard-status .status-3 .left { background-color: #2b957a; color: #fff; }
.dashboard-status .status-3 .right { background-color: #37bc9b; color: #fff; }
.dashboard-status .status-4 .left { background-color: #ff8801; color: #fff; }
.dashboard-status .status-4 .right { background-color: #ff9c2a; color: #fff; }

.manage-break { color: #569bb8; }
.break-rule-modal-container { font-size: 14px !important; }
.break-rule-modal-container .form-control {height: calc(1.5em + .6rem);}
.brslider.ui-widget-content {border: 1px solid #009688;}
.mt-12 { margin-top: 1rem!important; }
.btn-add-break { margin-top: 4px; }
.btn-delete { cursor: pointer;}
.leave-note { height: 178px !important; }
.selector2 { width: 100% !important; }
.report-container { min-height: 300px; width: 100%!important; }
.ms-options-wrap { position: relative; }
.ms-options-wrap > button:focus, .ms-options-wrap > button { font-size: 15px; padding: 7px 20px 7px 5px; background-color: transparent !important; }
.table-scroll { width: 100%; min-height: 30vh; overflow: auto; }
.content-scroll { width: 100%; overflow: auto; overflow-y: hidden; }
.content-scroll table{min-width: 450px;}
.table_inner_td { width: 190px; }
.table_inner_td_name { width: 180px; overflow: hidden; margin-bottom: 0!important; }
.table_inner_td_total{ width: 70px; overflow: hidden; margin-bottom: 0!important; }
.table_inner_td, .table_inner_th { margin-bottom: 0!important; border-right: 0; }
.table_inner_td th, .table_inner_th th{ font-weight: 500; font-size: 14px; }
.table_inner_td td, .table_inner_th td, .table_inner_td_name td, .table_inner_td_total td{ font-weight: normal; font-size: 14px; }
.table_inner_td td, .table_inner_td_name td, .table_inner_td_total td { height: 24px !important; padding: 2px !important; }
.table .td-50x { width: 150px; }
.td_total { width: 61px; }
table .w-50x { width: 61px !important; }
#sch_report_table1 td { padding: 2px 4px; border-right: 0; border-bottom: 0; }
.p-4x { padding: 4px !important; }
.tb-td { font-weight: 500; font-size: 14px; background-color: #cccccc61; }

.location-select { min-width: 250px; margin-left: 50px; }
.ajax-loader { height: 100%; width: 100%; }

.td_available { background-color: #0096884f !important; }
.td_unavailable { background-color: #e4924242 !important; }
.color-available { width: 20px; height: 20px; background-color: #0096884f !important; }
.color-unavailable { width: 20px; height: 20px; background-color: #e4924242 !important; }

.td_available:hover, .td_unavailable:hover { cursor: pointer; }
.user-detail-label { color: #949494; font-size: 16px; margin: 10px 0; }
.user-detail { font-size: 15px; margin: 10px 0; }
.color-theme { color: #009688; }
.color-label { color: #949494; font-size: 16px; margin: 10px 0; }

.table-format th, .table-format td { font-size: 12px !important; }
#shifts_table tbody td { font-size: 14px !important; }
.shift-total { font-size: 11px !important; color: #757882; }
.card-p-header .left .form-group { margin: 0!important; }
.calendar-wrapper { display: none; position: absolute;width: 445px; left: 2px; top: 33px; z-index: 999999; }

.calendar-item { position: relative; border-radius: 4px; border: 1px solid #c0c4d1; padding: 4px 0px; }
.h-2i { height: 117px !important; }
.row-clickable:hover { cursor: pointer!important; }
.td-clickable:hover { cursor: pointer!important; }

/* Employee Clock Time */
.time-clock-main { position: relative; min-height: calc(100vh - 0px);background-image: linear-gradient(86deg, rgba(29, 216, 198, 0.380392) 0, rgba(16, 67, 82, 0.83) 100%), url(../images/static/main-bg-1.jpg) !important;background-position: 12%;background-size: cover;}
.time-clock-main .card-p { width: 95%; height: 80%;background-color: rgba(255, 255, 255, 0.46) !important;}
.time-clock-main .card { width: 80%; height: 80%;}
.clock-time-logo { height: 150px; width: 160px;}
.clock-time-logo img{ height: 100%; width: 100%; border-radius: 50%; border: 1px solid #c0cfc9;}
.time-clock-name {color: #444c4c;font-size: 26px;font-weight: 700;font-style: italic;}
.terminal-name { color: #444c4c; font-size: 23px; font-weight: 500;font-style: italic; }
.inner-header .form-control {background-color: #fbfbfbb8 !important;}
.inner-header .select2-container--default .select2-selection--single .select2-selection__rendered {background-color: #fbfbfbb8 !important;}
.inner-header .select2-container--default .select2-selection--multiple {background-color: #fbfbfbb8 !important;}
.inner-header .ms-options-wrap {background-color: #fbfbfbb8 !important;}
.input-sm { height: 32px !important; }
.inner-card-p-header {padding: 0.3rem 0.8rem;border-bottom: 0;}
.inner-header { padding: 0.75rem 0.8rem; background-color: rgba(0, 0, 0, 0.03);align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.125); }

.btn-conflict { position: relative; border: 1px solid #d79e4e; padding: 4px 0px; }
.btn-conflict:hover { color: #e5e8f3f2 !important; background-color: #d79e4e; }
.conflict-container {position: absolute;background-color: #ffffff;width: 368px;right: 8px;top: 55px;display: none;border: 1px solid #d0d3e0;max-height: 84vh;overflow-y: auto;}
.conflict-item { border-bottom: 1px solid lightblue; min-height: 50px; margin: 0 6px; font-style: italic; font-size: 14px; font-weight: 500; padding: 2px 8px; }
.conflict-item:hover { background-color: #e3e4e5; }
/*.conflict-item div a { margin-right: 20px; }*/
.conflict-item .con-item-link { padding: 3px 6px; }
.conflict-item span{ text-decoration: underline; }
.con-item-link { color: #009688 !important; }
.con-item-link:hover { color: #02b66b !important; text-decoration: underline !important; }
.btn-location-update { color: #009688; }
.btn-location-update:hover {  cursor: pointer; text-decoration: underline!important; }
.date-change { border-top: 2px solid #9acaca; }

.mtb-6x{padding-top: 6px!important; padding-bottom: 6px!important;}
.mtb-8x{padding-top: 8px!important; padding-bottom: 8px!important;}
.mtb-10x {padding-top: 10px!important; padding-bottom: 10px!important;}


.mt-10x {padding-top: 10px!important;}
.mt-12x {padding-top: 12px!important;}

.custom-link {  }
.link:hover { color: #02b66b !important; text-decoration: underline !important; }
.active-icon { color: #02b66b !important; }
.deactive-icon { color: #d45454 !important; }
.modal-w-80 { max-width: 80% !important; }
.span_total { padding: 6px 0; color: #5e5e5e; font-weight: 600; }

.table-scroll td { min-width: 96px; }
.h-input { height: 37px!important; }
.table-tdw100x th, #table-tdw100x td { min-width: 100px; }
.table-tdw110x th, #table-tdw110x td { min-width: 110px; }
.table-tdw120x th, #table-tdw120x td { min-width: 120px; }
.table-tdw134x th, #table-tdw134x td { min-width: 134px; }
.table-tdw160x th, #table-tdw160x td { min-width: 160px; }
.text-warning { color: #e49242!important; }
.text-green  { color: #02b66b !important }
.ws-nowrap { white-space: nowrap!important; }

.table_inner_td_name td:first-child, .table_inner_td_total td:first-child, .table_inner_td td:first-child {border-left: 0 !important;}

.table_inner_td_name tr:first-child td, .table_inner_td_total tr:first-child td, .table_inner_td tr:first-child td {border-top: 0 !important;}
.hr-list { display: flex !important; }
.hr-list-items { flex: 1 1 250px; margin-right: 4px; }

.row-p-0 > div { padding: 1px 1px; }
.row-p2 > div { padding: 2px 2px; }
.row-p4 > div { padding: 4px 4px; }
.td-25x { max-width: 25px!important; }
.w-164x { width: 164px; }
.td-align-left th, .td-align-left th {text-align: start !important;}
.table-fs-13px td, .table-fs-13px th { font-size: 13px !important; }

.shifts-info-icons-container{position: absolute;top: 0;right: 3px;}
.shift-note {color: #cfdbe5;font-size: 9px;}
.shift-log-info-icon{color: #c34c4c;font-size: 11px;}
.shift-box-alert {color: #2a5e5c; font-size: 11px;}
.shift-note, .shift-box-alert, .shifts-info-icons-container:hover{cursor: pointer;}

.mob-shift-note { padding: 0 4px;position: absolute;color: #cb3c3c;bottom: 2px;right: 4px;font-size: 14px;z-index: 1;}
.mob-shift-box-alert { padding: 0 5px;position: absolute; color: #cb3c3c;bottom: 2px; right: 4px; font-size: 14px;z-index: 1;}

.mr-28px{right: 28px;}
.mr-10px{right: 10px;}
.mr-4px{right: 4px;}
.margin-right{right: -57px;}
.custom-input-error{color: #dc3545; font-size: 11px; font-weight: bold; font-style: italic; position: absolute; right: 20px; top: 0;}
.time-title{position: absolute;top: 30px;right: 18px;font-size: 8px;}
.td-day-view{position: relative;}
.td-day-view .shift-container{ z-index: 99; }
/*.td-day-view .shift-box{ width: 200px; }*/
.td-day-view .td-shift-add { min-width: 37px; }
.span-outline{background: transparent; padding: 2px 4px; border: 1px solid #a88a34; border-radius: 3px; color: #d42f2f;}
.span-outline:hover{background: #a88a34; color: white;}
.btn{border-radius: 0;}
.tabs-sm a{ font-size: 14px; padding: 5px 8px; }
.tabs-sm .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-bottom: 2px solid #009688 !important;
}
.thead-low{background-color: #cccccc59;}
.on-hover:hover{cursor: pointer;}




/* Mobile CSS */
.mob-login-box { width: 100%; height: 100vh; }
.wrapper {margin: 0 auto;width: 100%; height:100vh; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);}
.section {padding: 1rem;}
.header {position: relative;text-align: center;}
.header__text {position: relative;padding: 14px 0px 2px 0px;;}
.header__text > h1 {margin: 0;font-size: 2.5rem;}
.header > .trapezoid {
    position: absolute;top: 0;left: -46px;width: 100%;height: 100%;
    transform: skewY(315deg);transform-origin: top left;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    background: linear-gradient(rgb(9 66 49 / 0%), rgb(9 82 82 / 87%));
    background-position: top center;
    /* background-attachment: fixed;*/
}

.mob-log-form {margin: 0 auto;max-width: 17rem;overflow: hidden;}
.mob-log-form > input {border: 0;border-bottom: 1px solid #44bba0c9;border-radius: 0;width: 100%;height: 2rem;padding: 0 0 0.25rem 0;font-size: 1rem;color: #1126be;background: #fefefe;}
.mob-log-form > input:focus {outline: none;}
.mob-log-form > input::placeholder {color: #44bba0c9;}
.mob-log-form > button {margin-top: 1rem;border: 0;border-radius: 200px;width: 100%;padding: 0.5rem;font-size: 1rem;color: #fefefe;background: #578085;}
.mob-log-form > button:focus {outline: none;}
.mob-log-form > p {margin: 0.25rem 0 0;text-align: center;color: #1126be;}
.sign-up {display: none;}

.sidenav {height: 100%;width: 0;position: fixed;z-index: 9999;top: 0;right: 0;background-color: #141821;overflow-x: hidden;transition: 0.5s;padding-top: 60px;}
.sidenav a {border-bottom: 1px solid #4b4b4c; padding: 8px 8px 8px 22px;text-decoration: none;font-size: 16px;color: #818181;display: block;transition: 0.3s;}
.sidenav a:hover, .offcanvas a:focus{color: #f1f1f1;background-color: #c0c4d1;}

.mob-btn-close {
    position: absolute;
    color: #d6d7d7;
    top: 6px;
    right: 6px;
    border: 1px solid #4b4b4c;
    border-radius: 50%;
    height: 34px;
    width: 34px;
}
.mob-btn-close .closebtn{
    padding-left: 9px;
    line-height: 28px;
    font-size: 20px;
}
.mob-btn-close:hover, .mob-btn-close:focus{background-color: #868990;}

/* Mobile Menu css new */

.mob-side-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 99%;
    z-index: 9991;
    background: #e1e8ff;
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.5s;
    display: block;
}
.mob-side-nav-header{
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;
    align-items: center;
}
.mob-side-nav-item-container{
    margin-top: 6px;
}
.mob-side-nav-item{
    background: #FFFFFF;
    padding: 10px;
    flex-grow: 1;
    margin: 6px;
    width: 45%;
}
.mob-nav-head-img{
    width: 49px;height: 49px;
    padding: 7px;margin: 3px;
    border: 1px solid gray;border-radius: 50%;
}
.mob-nav-head-img img{
    width: 100%;
    height: 100%;
}
.mob-menu-icon{
    font-size: 19px;
}
.mob-menu-title{
    font-size: 14px;
}
.mob-side-nav-button{
    color: #ffffff;
    height: 34px;
    width: 34px;
    background: #9dbcd5;
    border-radius: 50%;
    border: 1px solid #9dbcd5;
    padding-left: 12px;
    padding-top: 6px;
    font-size: 13px;
    margin-right: 3px;
}

/* Mobile Menu css new End */

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

.mob-login-logo { width: 110px; height: 67px; }
.mob-login-logo img { border-radius: 2px; width: 100%; height: 100%; }

.mob-app-main { color: #242939; margin-left: 0; margin-top: 55px; position: relative; padding: 8px; min-height: calc(100vh - 55px);background-image: linear-gradient(86deg, rgba(29, 216, 198, 0.380392) 0, rgba(16, 67, 82, 0.83) 100%), url(../images/static/main-bg-1.jpg) !important; background-position: 12%; background-size: cover; transition: all 1s; }
.mob-app {height: 100%; width: 100%;}
.mob-app-header { height: 55px; position: fixed; top: 0; right: 0; left: 0; padding: 10px; background-color: #009688; z-index: 999; transition: all 1s;  }
.mob-header-center { color: #c0c4cc; flex: 0 0 140px; margin-right: -8px;}
.mob-app-logo {height: 45px; width:50px;margin: 8px 0;justify-content: center;transition: all 1.2s;}
.mob-app-logo img {height: 100%; width: 100%;}
.mob-profile-img {position: absolute;height: 45px;width: 45px;top: 5px;left: 13px;}
.mob-app .logo-name { width:110px; position: absolute; top: 51px; left: 4px; color: #818181; font-size: 11px; }
.mob-profile-img img{width: 100%; height: 100%;border: 1px solid #818181;border-radius: 50%; }
.mob-card-p-header{ display: flex; padding: 0.75rem 0.8rem; background-color: rgba(0, 0, 0, 0.03);align-items: center; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
.mob-shift-container { position: relative;text-align: start; padding: 8px;margin-top: 6px; margin-bottom: 15px; font-size: 13px;background-color: #f1f1f1;
    box-shadow: 0 4px 8px 0 rgb(38 56 97 / 47%);}
.mob-shift-pos-name {  }
.mob-shift-user-name {  }
.mob-shift-time {  }
.card__corner {position: absolute;top: -1px;right: 20px;}
.card__corner .card__corner-triangle {
    position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 22px 20px 0;
    background-color:#e49242;border-color: transparent transparent #c7c9c9 transparent;
}
.mob-shift-pending { background-color: #e49242!important; }
.mob-shift-confirm { background-color: #02b66b!important; }
.mob-shift-unassign { background-color: #132068!important; }
.mob-shift-done { background-color: darkred!important; }
.selected-date{padding: 0 12px;font-size: 14px; font-weight: 700;margin-bottom: -8px;border-bottom: 2px solid #dcdcdd;}

.my-time-sheet-container{position: relative; width: 100%; background-color: #b1b1b152; margin-bottom: 10px; padding: 10px; border-radius: 5px;}
.my-time-sheet-container div{margin: 6px 0; font-size: 13px;}
.leave-status-mobile{position: absolute;right: 11px;top: 0px;}
.custom-input { width: 100%; border: 1px solid #dee2e6 !important; padding: 2px; }
.bg-dark-light {background-color: #88928c;}
.bag-alert td { background-color: #ffa2073b!important; }
.border-danger-1px { padding: 1px; border: 2px dotted #b30f0f !important; }
.bg-light {background-color: #fbfcfd!important;}
.w-90{width:90%!important}
.w-85{width:85%!important}
.w-82{width:82%!important}
.w-80{width:80%!important}
.w-70{width:70%!important}
.w-60{width:60%!important}
.w-50{width:48%!important}
.w-48{width:48%!important}
.w-45{width:45%!important}
.w-40{width:40%!important}
.w-30{width:30%!important}
.w-25{width:25%!important}
.w-20{width:20%!important}
.w-18{width:18%!important}
.w-15{width:15%!important}
.w-12{width:12%!important}
.w-10{width:10%!important}
.h-30px{height: 30px!important;}
.h-32px{height: 32px!important;}
.mob-input{height: 32px;line-height: 16px;font-size: 14px;}
.mob-select{height: 32px;line-height: 16px;font-size: 14px;}
.mob-select + .ms-options-wrap button{height: 32px;line-height: 16px;font-size: 14px;}
.font-weight-500{font-weight: 500;}

.table.table-xs tr td{padding: 4px 6px;}
.w-700px{width: 700px!important;}
.w-600px{width: 600px!important;}
.mob-input{height: 30px!important; font-size: 14px!important;}
/* Min view port height  */
.mh-100vh{min-height: 100vh!important;}
.mh-90vh{min-height: 90vh!important;}
.mh-80vh{min-height: 80vh!important;}
.mh-75vh{min-height: 75vh!important;}
.mh-70vh{min-height: 70vh!important;}

.border-right-1{border-right: 1px solid rgba(0,0,0,.125);}
button:focus {outline: none!important;}
.mt-1px{margin-top: 1px;}
.mt-2px{margin-top: 2px;}
.mt-3px{margin-top: 3px;}
.mt-4px{margin-top: 4px;}
.mt-5px{margin-top: 5px;}
.mt-6px{margin-top: 6px;}
.mt-8px{margin-top: 8px;}
.mt-10px{margin-top: 10px;}


.mob-fom input, .mob-fom select {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
.mob-fom textarea {
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    border-radius: 0.2rem;
}

.mob-app-main label {
    font-size: 11px!important;
}
.mob-users-img{
    /*position: absolute;*/
    /*top: 5px;*/
    /*right: 10px;*/
    width: 54px;
    height: 54px;
}

.mob-users-img img {
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: 50%;
    border: 1px solid #818181;
}

.mob-datalist-header {
    padding: 8px;
    color: #ffffff;
    position: relative;
    background: #ad6161;
    border-radius: 7px;
}

.mob-datalist {
    padding: 9px 14px;
    color: #000000;
    position: relative;
    background: #ebebeb;
    border-radius: 7px;
}

.mob-head-bar {margin-left: 6px;margin-right: -10px;}
.mb-font-size .select2-container--default .select2-selection--single{font-size: 12px!important;}


.notification.icon {
    color: #fbfcfd;
    height: 30px;
    width: 30px;
    padding-top: 1px;
    text-align: center;
    font-size: 16px;
    position: relative;
    border-radius: 50%;
    background-color: #b98882;
    border: 2px solid rgba(0, 0, 0, 0);
    /*transform: translate(-50%, -50%);*/
}
.notification.icon .notification-number {
    color: #FFF;
    right: -9px;
    top: -8px;
    z-index: 1;
    height: 15px;
    width: 15px;
    position: absolute;
    background: #cc2311;
    border-radius: 50%;
    padding-top: 1px;
    text-align: center;
    font-size: 9px;
    font-weight: 500;
    /*-webkit-animation: bounce 1s infinite;*/
}

.top-bar-notification-dropdown{
    top: 55px;
    right: 8px;
    width: 306px;
    font-size: 12px;
    z-index: 999;
    position: absolute;
    text-align: left;
    max-height: 368px;
    overflow-y: auto;
    color: #525050;
    background-color: #d1d0d0;
}
.top-bar-notification-dropdown-item{
    padding: 8px 9px;
    border-bottom: 1px solid #729995;
}

.conflict-inner a{
    font-size: 13px;
}

.mob-noti-tabs .nav-link {
    padding: 3px 6px;
    font-size: 13px !important;
}


.heading-md {
    max-width:70%;font-size: 14px;margin-bottom: 1rem;border-bottom: 2px solid #d7dadd;font-weight: 600;
}
.heading-sm {
    max-width:70%;font-size: 12px;margin-bottom: 1rem;border-bottom: 2px solid #d7dadd;font-weight: 600;
}

.btn-add-new-date, .btn-remove-custom-date {margin-top: 26px;margin-left: 10px;}
.task-tem-content {padding: 6px;background: #d7dadd;color: #1c1c3d;border-radius: 6px;}
.task-tem-content:hover {cursor: pointer;}
.task-tem-title{font-size: 13px;}
.task-tem-description{font-size: 12px;}
.task-templates-add{padding-top: 16px;max-height: 131px;overflow: hidden;overflow-y: auto; border-top: 1px solid #ced4da;}

.color-light {color: #979f9e !important;}


/*@-webkit-keyframes bounce {*/
/*    0%, 100%, 20%, 53%, 80% {*/
/*        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);*/
/*        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);*/
/*        -webkit-transform: translate3d(0, 0, 0);*/
/*        -ms-transform: translate3d(0, 0, 0);*/
/*        transform: translate3d(0, 0, 0);*/
/*    }*/
/*    40%, 43% {*/
/*        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);*/
/*        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);*/
/*        -webkit-transform: translate3d(0, -30px, 0);*/
/*        -ms-transform: translate3d(0, -30px, 0);*/
/*        transform: translate3d(0, -30px, 0);*/
/*    }*/
/*    70% {*/
/*        -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);*/
/*        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);*/
/*        -webkit-transform: translate3d(0, -15px, 0);*/
/*        -ms-transform: translate3d(0, -15px, 0);*/
/*        transform: translate3d(0, -15px, 0);*/
/*    }*/
/*    90% {*/
/*        -webkit-transform: translate3d(0, -4px, 0);*/
/*        -ms-transform: translate3d(0, -4px, 0);*/
/*        transform: translate3d(0, -4px, 0);*/
/*    }*/
/*}*/