body{
  margin: 0;
  padding: 0;
  font-size: 1em;
  color: #555 !important;
/*  font-family: 'Oxygen',sans-serif !important;*/
  font-family: "Rubik", sans-serif;
  font-size: 14px;
}

.btn-wpc{
  background: #0b1229;
  border-color: #0b1229;
  font-size: 0.9em;
}

.form-signin .form-control {
  font-size: 0.8em;
}

.btn-wpc:hover, .btn-wpc:active, .btn-wpc:focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
  background: #0f215d;
}

.a-wpc-logo{
  width: 100%;
  max-width: 100%;
  display: inline-block;
}

.wpc-logo{
  width: 100%;
}

.link-sign-out{
  font-size: 0.8em;
  padding: 7px;
  color: white;
  float: right;
  font-weight: bold;
  background: #15181d;
}
.link-sign-out:hover{
  color: white;
  background: #071028;
}

.navbar-wpc{
  background: #15181d!important;
}
/* Topbar width aligns with content area (after sidebar) */
.app-topbar{ left: var(--sidebar-width, 240px); width: calc(100% - var(--sidebar-width, 240px)); transition: left .25s ease, width .25s ease; z-index: 1030; }

.app-topbar{ display:flex; align-items:center; height: var(--topbar-height); }
.app-topbar .navbar-brand{ padding: 0 .75rem; margin: 0; }
.navbar-logo-wrap{ display:flex; align-items:center; }
.navbar-logo{ display:block; height:auto; max-width:200px; }
.navbar-user{ padding-right: .5rem; }
body.sidebar-collapsed .app-topbar{ left: 0; width: 100%; }

.navbar-wpc .navbar-toggler {
  border: none;
}
.navbar-wpc .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width: 1.2em!important;
  height: 1.2em!important;
}
.navbar-wpc .navbar-toggler.is-open .navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' d='M7 7L23 23M23 7L7 23'/%3E%3C/svg%3E");
}
@media (min-width:1025px){ 
}
.navbar-user .user-name{color:#fff;font-weight:600;line-height:1;}
.navbar-user .user-status{color:#cfe1ff;font-size:.8em;}
.avatar-sm{width:32px;height:32px;object-fit:cover;}
.avatar-icon{font-size:32px;color:#fff;}
.dot-online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ecc71;margin-right:6px;}

.sidebar-dark{background:#f0f0f0;color:#495057;}
.sidebar-dark .nav-link{color:#495057;}
.sidebar-dark .nav-link.active{color:#0056b3;}
.sidebar-dark .brand-logo{padding-top:14px;padding-bottom:13px; background-color:#000;color:#fff;}
.sidebar-dark .nav-link i{color:#495057;margin-right:6px;}
.sidebar-user{padding-top:1rem;padding-bottom:1rem; background-color:#495057;color:#fff;}
.avatar-lg{width: 40px;
    height: 44px;
    object-fit: cover;}
.avatar-icon-lg{font-size:60px;color:#0a1026;}
.sidebar-divider{border-color:rgba(255,255,255,0.1);}

.sidebar{transition:transform .25s ease; will-change: transform;}
.sidebar.collapsed{transform:translateX(-100%);
  box-shadow:none;
}

[data-theme]:root, :root{
  --color-primary: #274b9f;
  --color-secondary: #ffae42;
  --sb-track: #00040d4d;
  --sb-thumb: #0a1026;
}
.sidebar-overlay{ position:fixed; inset:0; background: rgba(0,0,0,.4); opacity:0; transition: opacity .3s ease; display:none; z-index:99; pointer-events:none; }
body.sidebar-open .sidebar-overlay{ display:block; opacity:1; pointer-events:auto; }
@media (max-width:767px){ body.sidebar-open{ overflow:hidden; } }
.sidebar, .sidebar-sticky{ transition: all .3s ease; }
.sidebar, .sidebar-sticky{ overflow-y: hidden; }
.sidebar:hover, .sidebar-sticky:hover,
.sidebar:focus, .sidebar-sticky:focus,
.sidebar:focus-within, .sidebar-sticky:focus-within{ overflow-y: auto; }
.sidebar::-webkit-scrollbar, .sidebar-sticky::-webkit-scrollbar{ width: 0; transition: width .3s ease; }
.sidebar:hover::-webkit-scrollbar, .sidebar-sticky:hover::-webkit-scrollbar{ width: 5px; }
.sidebar::-webkit-scrollbar-track, .sidebar-sticky::-webkit-scrollbar-track{ background: var(--sb-track); }
.sidebar::-webkit-scrollbar-thumb, .sidebar-sticky::-webkit-scrollbar-thumb{ background: var(--sb-thumb); border-radius: 4px; }
.sidebar, .sidebar-sticky{ scrollbar-color: var(--sb-thumb) var(--sb-track); scrollbar-width: none; }
.sidebar:hover, .sidebar-sticky:hover{ scrollbar-width: thin; }

[role="main"]{ padding-top: var(--topbar-height, 60px); }

@media (max-width: 600px){ .app-topbar{ left:0; width:100%; } }

.loading {
width: 100vw;
    height: 100vh;
    padding: 40vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgb(0 0 0 / 40%);
    z-index: 99999;
    display: block;
    text-align: center;
}

.session-alert{
  font-size: 0.8em;
  font-weight: bold;
}

.forgot-password{
  display: inline-block;
  float: left;
  font-size: 0.8em;
  margin-top: 8px;
}

.form-signin p{
  font-size: 0.8em;
  float: left;
  text-align: left;
  font-weight: bold;
}

.alert {
  text-align: left;
  position: relative;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
}

.sidebar .nav-link:hover{
  color: #274b9f !important;
}

.form-control{
  border-radius: 0 !important;
}

label{
  font-weight: 500 !important;
}

.loading img{
  position: absolute;
  top: 50%;
  margin-top: -25px;
}

.btn-warning{
  color: white !important;
}

[role="main"] {
  padding-bottom: 48px;
}

.justify-content-between{
  justify-content: normal !important;
}

.avatar{
  max-width:100%;
  width:200px;
  height:200px;
  object-fit: cover;
}

.table-staff{
  /* background-color: #f8f9fa;
  border-radius: 3px; */
}

.table-staff td, .table-staff th {
  padding: 4px;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table-staff th {
  padding-right: 14px;
  position: relative;
}

span.sp{
  float: right;
  position: absolute;
  top: 4px;
  right: 4px;
}

.btn{
  margin-bottom: 4px;
}

.emergency label.control-label{
  margin-bottom: 0 !important;
}

.emergency input{
  margin-bottom: 10px !important;
}

.capitalize{
  text-transform: capitalize;
}

.leave-desc div {
  padding: 15px;
  background: #888c91;
  color: white;
  font-size: 13px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input{
  color: #555 !important;
/* }

.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input, .btn-group-sm>.btn, .btn-sm{ */
  font-size: 1em !important;
  font-family: 'Roboto', sans-serif !important;
}

.attachment{
  max-width: 100%;
}


.wpc-logo-header{
  display: none !important;
}


.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  background: #fff;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}


.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

html, body{ overflow-x: hidden; }
/* img, .wpc-logo, .navbar-logo{ max-width:100%; height:auto; } */

@media (min-width:768px) and (max-width:1024px){
  :root{ --sidebar-width: 220px; --topbar-height: 60px; }
  body{ font-size: .95em !important; }
  .sidebar .nav-link{ padding: 10px 14px; font-size: 14px; }
  .btn, .page-link{ min-height: 36px; }
  .avatar-lg{ width:52px; height:52px; }
  .navbar-logo{ max-width:150px; }
  .app-topbar .navbar-brand{ margin-top:0px; margin-bottom:0px; position: static; transform:none; }
}

@media (max-width:767px){
  :root{ --topbar-height: 3.5rem; }
  body{ font-size: 1.025em !important; }
  .navbar-user .user-info{ display:none; }
  .avatar-sm{ width: calc(var(--topbar-height) - 1rem); height: calc(var(--topbar-height) - 1rem); }
  .app-topbar .navbar-brand{ padding: 0 .5rem; }
  .navbar-logo{ max-width:100px; height:auto; }
  .sidebar{ width: 240px; position: fixed; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); }
  .sidebar, .sidebar-sticky{ overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sidebar::-webkit-scrollbar, .sidebar-sticky::-webkit-scrollbar{ width: 8px; }
  .sidebar{ scrollbar-width: thin; }
  .btn, .nav-link, .page-link{ padding: 12px 16px; }
  .navbar-toggler{ padding: 8px; }
  main[role="main"]{ padding-left: 0; margin-top: 20px;}
  .h2{ font-size: 1.5rem!important; }
}