.window-blocker {
  position: absolute;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: black;
  height: 100%;
}

/* .html2canvas-container {
  width: 3000px !important;
  height: 3000px !important;
} */

html {
  height: 100%;
}

body {
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: #F4F5F9;
}

/*==========  Mobile First Method  ==========*/
@media only screen and (min-width : 320px) {
  table.table-striped.table-hover.table-borderless {
    font-size: 85% !important;
  }

  table.table-striped.table-hover.table-borderless .btn {
    font-size: 85% !important;
  }

  .access-right-scroller {
    max-height: 100% !important;
    min-height: 100% !important;
  }

  .image-qr-code {
    height: 50px;
    width: 50px;
  }

  .image-qr-code-lg {
    height: 70px;
    width: 70px;
  }

  .kasair-text {
    font-size: 0.8rem;
  }

  #mainCol {
    height: calc(100vh - 90px);
  }
}

@media only screen and (min-width : 480px) {}

@media only screen and (min-width : 768px) {}

@media only screen and (min-width : 992px) {}

@media only screen and (min-width : 1200px) {
  table.table-striped.table-hover.table-borderless {
    font-size: 90% !important;
  }

  table.table-striped.table-hover.table-borderless .btn {
    font-size: 90% !important;
  }

  .image-qr-code {
    height: 70px;
    width: 70px;
  }

  .image-qr-code-lg {
    height: 100px;
    width: 100px;
  }

  #mainCol {
    height: calc(100vh - 140px);
  }
}

@media only screen and (min-width : 1366px) {
  table.table-striped.table-hover.table-borderless {
    font-size: 1rem !important;
  }

  .access-right-scroller {
    max-height: calc(100vh - 300px) !important;
    min-height: 100% !important;
  }

  .image-qr-code {
    height: 80px;
    width: 80px;
  }

  .image-qr-code-lg {
    height: 120px;
    width: 120px;
  }

  #mainCol {
    height: calc(100vh - 160px);
  }
}

/*==========  Non-Mobile First Method  ==========*/
@media only screen and (max-width : 1366px) {}

@media only screen and (max-width : 1200px) {}

@media only screen and (max-width : 992px) {}

@media only screen and (max-width : 768px) {}

@media only screen and (max-width : 480px) {}

@media only screen and (max-width : 320px) {}

#mainCol {
  height: calc(100vh - 160px);
}

/* Color */
.bg-teal {
  background: linear-gradient(119.35deg, #285698 -4.92%, #1b93be 113.44%);
}

.column-teal {
  background: #8a54da5d !important;
}

.alert-pink {
  background: #f5ebfd;
  color: #285698;
}

.alert-default {
  color: #285698;
  background-color: #bee7f5 !important;
  border-color: #bee7f5 !important;
}

.bg-alert-danger {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

.bg-purple-200 {
  background-color: #c084fc;
}

.bg-purple {
  background-color: #285698d0 !important;
}

/* typography */
.kasair-text {
  font-size: 1rem;
}

.text-purple-700 {
  color: #581c87;
}

.text-teal {
  color: #393F4F;
}

.text-blue-700 {
  color: #1d4ed8;
}

.text-white {
  color: #fff !important;
}

.text-pink {
  color: #285698 !important;
}

.text-purple {
  color: #285698;
}

.text-green {
  color: #28a745;
}

.text-darker-purple {
  color: #0e4085;
}

.text-size {
  font-size: 90%;
}

.text-blue-website {
  color: #3d59e8;
}

.text-darkblue-website {
  color: #213e6e;
}

.border-x-none {
  border-left: none;
  border-right: none;
}

.grey-100 {
  background: #f4f4f5;
}

/* border color */
.border-purple {
  border: 2px solid !important;
  color: #285698 !important;
}

/* radius */
.border-radius-right {
  /* border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important; */
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}

.border-radius-left {
  /* border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important; */
  border-top-left-radius: 15px !important;
  border-bottom-left-radius: 15px !important;
}

.btn-rounded {
  border-radius: 15px;
}

/* btn circle */
.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  font-size: 8px;
  text-align: center;
}

.btn-circle {
  width: 45px;
  height: 45px;
  padding: 7px 10px;
  vertical-align: middle;
  border-radius: 25px;
  text-align: center;
}

.btn-circle.btn-md {
  width: 50px;
  height: 50px;
  padding: 7px 10px;
  border-radius: 25px;
  font-size: 10px;
  text-align: center;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 12px;
  text-align: center;
}

/* btn purple selected report */
.btn-selected {
  color: #285698;
  background: #fff;
  border: 2px solid #285698 !important;
}

.btn-selected:hover {
  color: #fff;
  background: #285698;
  border: 2px solid #285698 !important;
}

.selected-nav>.active {
  color: #fff;
  background: #285698;
}

.selected-view>.active {
  color: #fff;
  background: #285698;
}

/* Bootstrap Component */
/* .card {
  border-radius: 15px !important; 
} */

.card-simple {
  background: #fff;
  border: 1px solid #ced4da;
  transition: all 300ms;
}

.card-simple:hover {
  border: 1px solid #ced4da;
  box-shadow: 4px 4px 4px rgba(175, 175, 175, 0.527) !important;
}

.card-simple.active {
  border: 1.9px solid #285698;
  border-radius: 1rem;
  box-shadow: 5px 5px 5px rgba(175, 175, 175, 0.527) !important;
}

.card-simple.disabled {
  opacity: 0.7 !important;
}

.card,
.card-header,
.card-footer {
  /* border-radius: 10px !important; */
  /* border: none !important;   */
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

.card.disabled {
  opacity: 0.7 !important;
}

.card-outlet {
  border-radius: 15px;
  transition: all 300ms ease-in-out;
}

.card-outlet:hover {
  cursor: pointer;
  border-color: #285698 !important;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 24px 50px 0px !important;
}

.modal-header,
.modal-footer {
  border: none !important;
}

#modalHint .modal-dialog {
  position: fixed;
  margin: auto;
  height: 100%;
  left: 0px;
}

#modalHint .modal-header {
  background: #3699ff !important;
  color: #fff !important;
}

#modalHint .modal-content {
  height: 100%;
}

#modalHint .modal-body {
  font-size: 0.85rem !important;
}

.shortcut-menu-container {
  overflow-x: hidden;
}

.collapse-menu-toggle {
  transition: 0.3s;
}

.collapse-menu-toggle.active {
  background-color: #e9ecef !important;
}

.collapse-menu-toggle:hover {
  background-color: #e9ecef !important;
}

/* Button */
.btn-select-commission-type {
  background-color: #e9ecef !important;
  border-color: #e9ecef !important;
}

.btn-select-commission-type.active {
  border-color: #285698 !important;
  background-color: #f3f6f9 !important;
}

.btn-group-is-bundle.disabled {
  opacity: 0.7 !important;
}

.btn-shortcut-menu {
  color: #41464C;
  /* background-color: #ececec; */
  background-color: #e2e3e5;
  opacity: 1;
  border: 1px solid #dbdbdb !important;
  transition: all 300ms;
}

.btn-shortcut-menu.active {
  color: white;
  /* background-color: #285698; */
  border: 1px solid #095182 !important;
  background-color: #095182;
}

.btn-shortcut-menu:hover {
  color: white;
  /* background-color: #285698; */
  background-color: #1d557a;
  margin-left: 10px;
  border: 1px solid #1d557a !important;
  opacity: 0.7 !important;
}

.btn-shortcut-menu.disabled {
  opacity: 0.5 !important;
}

.btn-cancel {
  color: #fff !important;
  background-color: #ff6464 !important;
}

.btn-cancel:hover {
  color: #fff !important;
  background-color: #ff6464d0 !important;
}

.btn-dark-blue {
  color: white;
  background-color: #383f4f;
}

.btn-teal {
  color: white;
  opacity: 1;
  /* background: linear-gradient(119.35deg, #285698 -4.92%, #1b93be 113.44%); */
  background: linear-gradient(119.35deg, #285698 -4.92%, #1b93be 113.44%);
}

.btn-teal:hover {
  opacity: 0.6;
  transition: 0.2s;
  color: white !important;
}

.btn-outline-teal {
  border: 1.28px solid !important;
  border-color: #285698;
  color: #285698;
}

.btn-outline-teal:hover {
  /* background: linear-gradient(119.35deg, #285698 -4.92%, #1b93be 113.44%); */
  background: linear-gradient(119.35deg, #285698 -4.92%, #1b93be 113.44%);
  color: white;
}

.btn-cyan {
  color: #285698;
  background-color: #fff;
}

.btn-cyan:hover {
  color: #285698a1;
  background-color: #fff;
}

.btn-purple {
  color: white;
  /* background-color: #8950fc !important; */
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-purple:hover {
  color: white;
  background-color: #0e4085 !important;
  border-color: #0e4085 !important;
}

.btn-pink {
  color: white;
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-pink:hover {
  color: white;
  opacity: 0.7;
}



.btn-green {
  color: white;
  background: #28a745;
}

.btn-green:hover {
  color: white;
  background: #149f34;
}

.btn-outline-purple {
  border: 1.28px solid !important;
  border-color: #285698;
  color: #285698;
  transition: all ease-in-out 0.3s;
}

.btn-outline-purple:hover {
  border-color: #0e4085 !important;
  background: #0e4085;
  color: white;
}

.btn-outline-purple.active {
  border-color: #285698 !important;
  background: #285698;
  color: white;
}

.btn-sidebar:hover {
  background: rgba(245, 245, 245, 0.337);
  transition: background-color
}

.btn-default-light {
  color: #7e8299;
  background-color: #f3f6f9;
  border-color: #f3f6f9;
}

.btn-default-light:hover {
  color: #7e8299;
  background-color: #e4e6ef;
  border-color: #e4e6ef;
}

.btn-light {
  /* color: #285698 !important; */
  color: #181c32 !important;
  border-color: #d0cece !important;
  background-color: #d0cece !important;
}

.btn-light:hover {
  /* color: #3699ff !important; */
  background-color: #e9ecef !important;
  border-color: #f3f6f9 !important;
}

.btn-gray {  
  border-color: #eae9ea !important;
  background-color: #eae9ea !important;
  border-color: #eae9ea !important;
  transition: all ease-in-out 0.3s;
}

.btn-gray:hover {
  opacity: 0.7;  
}

.btn-light-text-success {
  color: #1bc5bd !important;
  border-color: #f3f6f9 !important;
  background-color: #e9ecef !important;
  border-color: #e9ecef !important;
}

.btn-light-text-success:hover {
  color: #3699ff !important;
  background-color: #f3f6f9 !important;
  border-color: #f3f6f9 !important;
}

.btn-light-text-purple {
  color: #285698 !important;
  border-color: #f3f6f9 !important;
  background-color: #e9ecef !important;
  border-color: #e9ecef !important;
}

.btn-light-text-purple:hover {
  color: #0e4085 !important;
  background-color: #f3f6f9 !important;
  border-color: #f3f6f9 !important;
}

.btn-light-hover-danger {
  color: #b5b5c3 !important;
  background-color: #f3f6f9 !important;
  border-color: #f3f6f9 !important;
}

.btn-light-hover-danger:hover {
  color: #ee2d41 !important;
}

.btn-secondary {
  color: white !important;
  background-color: #8a8a8a !important;
  border-color: #8a8a8a !important;
}

.btn-secondary:hover {
  background-color: #a2a2a2 !important;
  border-color: #a2a2a2 !important;
}

.btn-primary {
  color: #fff !important;
  background-color: #3699ff !important;
  border-color: #3699ff !important;
}

.btn-primary:hover {
  background-color: #187de4 !important;
  border-color: #187de4 !important;
}

.btn-info {
  color: #fff !important;
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-info:hover {
  color: #fff !important;
  background-color: #0e4085 !important;
  border-color: #0e4085 !important;
}

.btn-outline-info {
  color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-outline-info:hover {
  color: #fff !important;
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-outline-info:focus {
  color: #fff !important;
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-outline-info.active {
  color: #fff !important;
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: all ease-in-out 0.3s;
}

.btn-success {
  color: #fff !important;
  background-color: #1bc5bd !important;
  border-color: #1bc5bd !important;
}

.btn-success:hover {
  background-color: #0bb7af !important;
  border-color: #0bb7af !important;
}

.btn-outline-success {
  border: 1.28px solid !important;
  border-color: #1bc5bd;
  color: #1bc5bd;
}

.btn-outline-success:hover {
  color: #fff !important;
  background-color: #1bc5bd !important;
  border-color: #1bc5bd !important;
}

.btn-danger {
  color: #fff !important;
  background-color: #f64e60 !important;
  border-color: #f64e60 !important;
}

.btn-danger:hover {
  background-color: #ee2d41 !important;
  border-color: #ee2d41 !important;
}

.btn-whatsapp {
  background-color: #03cc0b;
  color: white !important;
  transition: all ease-in-out 300ms;
}

.btn-whatsapp:hover {
  opacity: 0.8;
  color: white;
}

.btn-light-success {
  background: #c9f7f5;
  color: #1bc5bd;
  font-weight: 600;
}

.btn-light-success:hover {
  background: #1bc5bd;
  color: #fff;
}

.floating {
  position: absolute;
  z-index: 800;
  bottom: 15px;
  left: 30px;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 144, 216, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.btn-toast-toggle {
  /* background: #fff4de !important; */
  background: #3699ff !important;
  color: #fff !important;
  box-shadow: 0 0 0 0 rgba(#e1f0ff, .5);
  animation: pulse 1.5s infinite;
  transition: 0.4s;
}

.btn-toast-toggle:hover {
  background: #e1f0ff !important;
  color: #3699ff !important;
}

.btn-topbar.disabled {
  opacity: 0.5 !important;
}


/* Badge */
.badge-info {
  background-color: #285698 !important;
}

.badge-danger {
  background-color: #f64e60 !important;
}


/* Toast */
.toast-hint {
  /* background: rgba(19, 19, 19, 0.523);
  color: white; */
  background: #fff;
}

.toast-order {
  background: whitesmoke;
  border-color: #285698d0 !important;
  color: black;
}


/* List */
ol.breadcrumb {
  background: #fff !important;
  box-shadow: 0 4px 2px -2px rgba(175, 175, 175, 0.527) !important;
}

li.breadcrumb-item a {
  color: #ff6464 !important;
}


/* Select 2 */
.select2-container--bootstrap .select2-selection--single {
  height: calc(1.5em + .75rem + 2px) !important;
}

.select2 {
  width: 100% !important;
}


/* Image */
/* .image-container {
  background: #6b6b6b38;
} */

.image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.image-input-wrapper {
  width: 38px !important;
  height: 38px !important;
}

.image-input-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bootstrap Custom Pagination Color */
ul.pagination .page-item.active .page-link {
  color: #fff !important;
  background-color: #285698 !important;
  border-color: #285698 !important;
}

ul.pagination .page-item .page-link {
  color: #285698 !important;
}


/* Hide Arrow on input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  /* for firefox */
  -moz-appearance: textfield;
}

input.custom-input-date:read-only,
input.custom-input-time:read-only {
  background: #fff;
}

/* Material Icons */
span.material-icons {
  width: 24px !important;
}

/* report style */
.filter {
  color: #285698 !important;
}

/* tabs style */
.nav-tabs .nav-link.active {
  color: #fff !important;
  /* background-color:#285698 !important; */
  background-color: #285698 !important;
  border-color: #285698 !important;
  transition: border 0.3s ease;
  transition: background-color 0.3s ease;
}

.nav-tabs .nav-link:hover {
  color: #fff !important;
  background-color: #0e4085 !important;
  /* background-color:#285698 !important; */
  /* border-color: #285698 !important; */
}

.nav-tabs .nav-link {
  /* color: #285698 !important; */
  color: #0e4085 !important;
  transition: border 0.3s ease;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.nav-tabs .nav-link:hover {
  color: #fff !important;
  border-color: #0e4085 !important;
  background-color: #0e4085 !important;
  /* background-color:#285698 !important;   */
}

.nav-atur-printer small {
  white-space: nowrap !important;
}

.filter-history-period-filter {
  display: block !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

.filter-history-period-filter::-webkit-scrollbar {
  display: none;
}

/* background summary */
.bg-sum-1 {
  background-color: #fbeeff;
}

.bg-sum-2 {
  background-color: #EBEDF5;
}

/* progress bar-css */
:root {
  --color-white: #fff;
  --color-black: #333;
  --color-gray: #75787b;
  --color-gray-light: #bbb;
  --color-gray-disabled: #e8e8e8;
  --color-green: #285698;
  --color-green-dark: #285698d0;
  --font-size-small: .75rem;
  --font-size-default: .875rem;
}

.progress-bar-css {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.progress-bar-css li {
  flex: 2;
  position: relative;
  padding: 0 0 14px 0;
  font-size: var(--font-size-default);
  line-height: 1.5;
  color: var(--color-green);
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
  min-width: 0;
  text-align: center;
  border-bottom: 2px solid var(--color-gray-disabled);
}

.progress-bar-css li:first-child,
.progress-bar-css li:last-child {
  flex: 1;
}

.progress-bar-css li:last-child {
  text-align: right;
}

.progress-bar-css li:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--color-gray-disabled);
  border-radius: 50%;
  border: 2px solid var(--color-white);
  position: absolute;
  left: calc(50% - 6px);
  bottom: -7px;
  margin-bottom: 2px;
  z-index: 3;
  transition: all .2s ease-in-out;
}

.progress-bar-css li:first-child:before {
  left: 0;
}

.progress-bar-css li:last-child:before {
  right: 0;
  left: auto;
}

.progress-bar-css span {
  transition: opacity .3s ease-in-out;
}

.progress-bar-css li:not(.is-active) span {
  opacity: 0;
}

.progress-bar-css .is-complete:not(:first-child):after,
.progress-bar-css .is-active:not(:first-child):after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: -50%;
  z-index: 2;
  border-bottom: 2px solid var(--color-green);
}

.progress-bar-css li:last-child span {
  width: 200%;
  display: inline-block;
  position: absolute;
  left: -100%;
}

.progress-bar-css .is-complete:last-child:after,
.progress-bar-css .is-active:last-child:after {
  width: 200%;
  left: -100%;
}

.progress-bar-css .is-complete:before {
  background-color: var(--color-green);
}

.progress-bar-css .is-active:before,
.progress-bar-css li:hover:before,
.progress-bar-css .is-hovered:before {
  background-color: var(--color-white);
  border-color: var(--color-green);
}

.progress-bar-css li:hover:before,
.progress-bar-css .is-hovered:before {
  transform: scale(1.33);
}

.progress-bar-css li:hover span,
.progress-bar-css li.is-hovered span {
  opacity: 1;
}

.progress-bar-css:hover li:not(:hover) span {
  opacity: 0;
}

.x-ray .progress-bar-css,
.x-ray .progress-bar-css li {
  border: 1px dashed red;
}

.progress-bar-css .has-changes {
  opacity: 1 !important;
}

.progress-bar-css .has-changes:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  left: calc(50% - 4px);
  bottom: -20px;
  background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22M4%200l4%208H0z%22%2F%3E%3C%2Fsvg%3E');
}

/* material bootstrap datetime picker css */
.dtp-header {
  background-color: #285698d0 !important;
}

.dtp-date {
  background-color: #285698d0 !important;
}

.dtp-select-year-before,
.dtp-select-year-after,
.dtp-select-month-before,
.dtp-select-month-after {
  color: white !important;
}

.border-left-none {
  border-left: none;
}

.border-right-none {
  border-right: none;
}

.input-group-text.clean.prepend {
  border-right: none;
  background: #fff;
}

.input-group-text.clean.append {
  border-left: none;
  background: #fff;
}

/* subscription */
.card-detail-border {
  border: 2px solid #285698 !important;
}

.card-bordered {
  border: 2px solid #dbdbdb !important;
}


.card-hovered:hover {
  box-shadow: 4px 4px 4px #ab7fed !important;
  border: 2px solid #285698 !important;
  background-color: #f6efff !important;
  cursor: pointer;
  transition: box-shadow 400ms;
}

.card-hovered-green:hover {
  box-shadow: 4px 4px 4px #11802b !important;
  border: 2px solid #28a745 !important;
  background-color: #ecfbef !important;
  cursor: pointer;
  transition: box-shadow 400ms;
}

.selected-package {
  border: 2px solid #285698 !important;
  background-color: #f3ebff !important;
}

.selected-package-green {
  border: 2px solid #28a745 !important;
  background-color: #ecfbef !important;
}

.rounded-menu-left {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.rounded-menu-right {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* width */
::-webkit-scrollbar {
  width: 3px !important;
  height: 5px !important;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(221, 221, 221) !important;
  border-radius: 10px !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #285698 !important;
  border-radius: 10px !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #285698 !important;
}