.footer-image {
  margin-right: 4px;
  padding-bottom: 2px;
}

.mai-top-header .navbar-brand {
  background-image: none;
  font-size: 20px;
  font-weight: bold;
}

.show > .dropdown-menu {
  overflow: hidden;
}

.switch-button input[type=checkbox]:checked + span label:before {
  padding-left: 12px;
}

.input-group-select {
  border-right: 0 !important;
}

#Filter .row + .row,
.dataTables_filter.filter .filter-wrapper .row + .row {
  margin-top: 15px;
}

.mai-top-header .navbar-brand {
  width: auto;
}

.options-body,
.options-footer {
  padding: 0 25px 30px 25px;
}

.aside-nav .navbar-nav li a.active {
  background-color: #e8e8e8;
}

.table tr th.actions, .table tr td.actions {
  text-align: right;
}

.ms-container {
  width: 100%;
  margin-bottom: 5px;
}

.ms-container .search-input {
  height: 44px;
}

#SelfSignInOut {
  padding-bottom: 25px;
}

#SelfSignInOut .btn-big {
  width: 100%;
}

.dropdown-item .icon {
  position: relative;
  top: -2px;
  left: -7px;
}

.table tr td.actions > .icon {
  margin-right: 10px;
  font-size: 1.75rem;
}

.fuelux .wizard > .steps-container > ul.steps {
  margin-left: 0 !important;
}

.help-texts .dataTables_wrapper {
  margin: 0 -25px;
}

.email-title .tools {
  float: right;
  font-size: 0;
}

.email-title .tools > a {
  display: inline-block;
}

.email-title .tools .icon {
  display: inline-block;
  font-size: 1.615rem;
  line-height: 1.2;
  vertical-align: middle;
  cursor: pointer;
  color: #3d3d3d;
  min-width: 1.615rem;
  text-align: center;
}

#IntroBlocks #ScanButton {
  padding: 45px 15px;
  font-size: 28px;
  border-radius: 5px;
}

#IntroBlocks a img {
  max-height: 100px;
}

#IntroBlocks a span {
  display: block;
  margin-top: 15px;
}

#IntroBlocks h1 {
  text-align: center;
  font-weight: 700;
  margin: 90px 0 45px;
  font-size: 50px;
}

.screensaver .text--overlay {
  background-color: rgba(0, 0, 0, 0.7);
  height: 200px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 100;
}

.screensaver .text--overlay h2 {
  color: #fff;
  text-align: center;
  vertical-align: middle;
  font-size: 32px;
  margin-top: 80px;
  font-weight: 600;
}

.owl-carousel .item {
  background-size: cover;
  background-position: center center;
}

.owl-carousel,
.screensaver {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
}

.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage {
  height: 100%;
}

.owl-carousel .item,
.owl-carousel .owl-item {
  height: 100%;
  width: 100%;
}

.options-img-preview {
  object-fit: contain;
  max-height: 400px;
  max-width: 100%;
}

.modal-body {
  padding-top: 15px !important;
}

.modal-header {
  padding-bottom: 0 !important;
}

.switch-button.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.switch-button.disabled input[type="checkbox"] + span {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Webcam */
.panel .panel-heading.panel-heading-capture {
  background: #e6e6e6;
  margin: 0;
  padding: 15px 20px;
  text-align: center;
}

.panel-heading-capture .frame {
  border-radius: 50%;
  position: relative;
  text-align: center;
  overflow: hidden;
}


.panel-heading-capture .frame img:hover {
  cursor: pointer;
}

.panel-heading-capture .frame #CaptureCamera {
  position: absolute;
  top: 0;
}

.panel-heading-capture .frame #TakeSnapshot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 7px;
}

.panel-heading-capture .frame #TakeSnapshot:hover {
  cursor: pointer;
}

.panel-heading-capture .frame #TakeSnapshot .icon {
  font-size: 2rem;
}

/*------------------------------------------------------------------
  [Loading icons]
*/
.sk-circle {
  margin: 250px auto;
  width: 60px;
  height: 60px;
  position: relative;
}

.sk-circle.sk-circle-mtb-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
  animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}

.sk-circle-dark .sk-child:before {
  background-color: #000;
}

.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}

.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}

.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}

.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}

.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}

.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*------------------------------------------------------------------
  [Colors]
*/
:root {
  --warning-color: #f49b46;
  --warning-light-color: #ffebd7;
  --success-color: #2cc185;
  --success-light-color: #e3f5ee;
  --danger-color: #f45846;
  --danger-light-color: #ffd3ce;
}


.gritter-color.warning {
  background: var(--warning-color) !important;
  color: var(--text-color);
}

.identifier-success {
  border-color: var(--success-color) !important;
  background: var(--success-light-color) !important;
}

.identifier-warning {
  border-color: var(--warning-color) !important;
  background: var(--warning-light-color) !important;
}

.identifier-danger {
  border-color: var(--danger-color) !important;
  background: var(--danger-light-color) !important;
}

/*------------------------------------------------------------------
  [Bootstrap dateTime Picker]
*/
.datetimepicker.input-group {
  padding: 4px 0;
}

.datetimepicker .input-group-addon {
  padding: 0 13px;
  font-size: 24px;
  line-height: 23px;
}

.datetimepicker .input-group-addon > i {
  vertical-align: middle;
}

.datetimepicker.input-group-sm .input-group-addon {
  font-size: 20px;
  line-height: 21px;
  padding: 0 11px;
}

.datetimepicker.input-group-lg .input-group-addon {
  padding: 0 15px;
}

.datetimepicker table {
  border-collapse: separate;
  border-spacing: 7px 2px;
}

.datetimepicker table thead tr th {
  padding: 10px 4px 8px;
}

.datetimepicker table thead tr th.prev,
.datetimepicker table thead tr th.next {
  padding: 0;
}

.datetimepicker table thead tr th.prev > .icon,
.datetimepicker table thead tr th.next > .icon {
  font-size: 21px;
}

.datetimepicker table thead tr th.prev:hover,
.datetimepicker table thead tr th.next:hover {
  background-color: transparent;
  color: #4285f4;
}

.datetimepicker table thead tr th.switch {
  font-weight: 600;
  font-size: 14px;
}

.datetimepicker table thead tr th.switch:hover {
  background-color: transparent;
  color: #5a5a5a;
}

.datetimepicker table thead tr th.dow {
  font-weight: 400;
  font-size: 14px;
  padding-top: 10px;
}

.datetimepicker table tbody tr td {
  line-height: 31px;
  padding: 0 8px;
}

.datetimepicker table tbody tr td.day {
  border-radius: 50%;
  color: #737373;
}

.datetimepicker table tbody tr td.day.old,
.datetimepicker table tbody tr td.day.new {
  color: #b3b3b3;
}

.datetimepicker table tbody tr td.day.active {
  background: #4285f4;
  color: #ffffff;
  text-shadow: none;
}

.datetimepicker table tbody tr td.day.active:hover {
  background: #1266f1;
}

.datetimepicker table tbody tr td .year,
.datetimepicker table tbody tr td .month,
.datetimepicker table tbody tr td .hour,
.datetimepicker table tbody tr td .minute {
  color: #737373;
}

.datetimepicker table tbody tr td .year.old,
.datetimepicker table tbody tr td .month.old,
.datetimepicker table tbody tr td .hour.old,
.datetimepicker table tbody tr td .minute.old,
.datetimepicker table tbody tr td .year.new,
.datetimepicker table tbody tr td .month.new,
.datetimepicker table tbody tr td .hour.new,
.datetimepicker table tbody tr td .minute.new {
  color: #b3b3b3;
}

.datetimepicker table tbody tr td .year.active,
.datetimepicker table tbody tr td .month.active,
.datetimepicker table tbody tr td .hour.active,
.datetimepicker table tbody tr td .minute.active {
  background: #4285f4;
  color: #ffffff;
  text-shadow: none;
}

.datetimepicker table tbody tr td .year.active:hover,
.datetimepicker table tbody tr td .month.active:hover,
.datetimepicker table tbody tr td .hour.active:hover,
.datetimepicker table tbody tr td .minute.active:hover {
  background: #1266f1;
}

.datetimepicker table tbody tr td fieldset legend {
  font-size: 17px;
  font-weight: 400;
  color: #5a5a5a;
  margin-bottom: 5px;
}

.datetimepicker.dropdown-menu {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.datetimepicker.dropdown-menu:before {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

@-webkit-keyframes autofill {
  to {
    color: #989898;
    background: transparent;
  }
}

.splash-container .input-group .form-control:-webkit-autofill,
.splash-container .input-group .form-control:-webkit-autofill:hover,
.splash-container .input-group .form-control:-webkit-autofill:focus,
.splash-container .input-group .form-control:-webkit-autofill:active {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

@media only screen and (min-width: 768px) {
  .mai-user-nav > .nav-item.dropdown > .nav-link {
    white-space: nowrap;
  }
}

@media only screen and (max-width: 768px) {
  .mai-user-nav > .nav-item.dropdown > .nav-link {
    display: inline-block !important;
  }

  .mai-sub-header .navbar-nav > .nav-item.open > a,
  .mai-sub-header .navbar-nav > .nav-item.open:hover > a,
  .mai-nav-tabs-sub > .nav-item > .nav-link.active {
    color: #fff !important;
  }
}

@media only screen and (max-width: 600px) {
  div.dataTables_wrapper div.dataTables_filter input {
    display: block;
    width: 100%;
    margin: 5px 0 0;
  }

  div.dataTables_wrapper div.dataTables_filter label {
    width: 100%;
  }

  div.dataTables_wrapper div.dataTables_length {
    text-align: right;
  }
}

.table tr td.actions .icon {
  width: 20px;
  display: inline-block;
  text-align: center;
}