::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgb(255, 255, 255);
  background: #fdfdfde7;
}

::-webkit-scrollbar-thumb {
  background: #6262e4;
  border-radius: 50px;
}

.modal .modal-dialog .modal-content .modal-header {
  background-color: rgb(255, 255, 255);
  /* color: whitesmoke; */
}

.table thead tr th {
  border-bottom: 3px double rgb(214, 212, 212);
}

.table thead {
  height: 50px;
  background-color: #fffb0036;
  /* color: whitesmoke; */

}

.table-responsive .table {
  /* border-color: rgb(214, 212, 212); */
}

.table {
  font-size: 10pt;
}


.dataTable {
  width: 100%;
}

.dataTable thead tr th {
  height: 60px;
  font-weight: bold;
  font-size: 8pt;
  vertical-align: middle;
  text-align: center;
  background-color: #5b6bfd88;
  text-transform: uppercase;
  border-right: 1px solid #00000044;
  border-left: 1px solid #00000044;
  border-bottom: 3px double #55555544;
  padding: 5px;
}

.dataTable tbody tr td {
  height: 50px;
  /* font-weight: bold; */
  font-size: 9pt;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #00000044;
  /* border-left: 1px solid #00000044; */
  padding: 5px;
}

.dataTable tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}


.dataTable tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.form-control {
  border: none;
  border-width: 0;
  box-shadow: none;
  /* height: 40px; */
  border-bottom: 1px solid #a5a5a5b2;
}

.form-select {
  border: none;
  border-width: 0;
  box-shadow: none;
  /* height: 40px; */
  border-bottom: 1px solid #a5a5a5b2;
}

.form-control:focus {
  transition: 0.4s ease-in-out;
  border: none;
  border-width: 0;
  box-shadow: none;
  /* height: 40px; */
  border-bottom: 1px solid #6262e4;
}

.form-select:focus {
  transition: 0.4s ease-in-out;
  border: none;
  border-width: 0;
  box-shadow: none;
  /* height: 40px; */
  border-bottom: 1px solid #6262e4;
}


.main-container {
  padding-left: 80px;
  padding-right: 80px;
}



/* content header */

.content-wrapper .content-header {
  background-color: #fff;
  /* height: 50px; */
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin-top: -30px;
  padding: 20px;
  width: 100%;
  border-bottom: 2px solid whitesmoke;

  position: sticky;
  top: 82px;
  overflow: hidden;
  z-index: 1;
}

.content-wrapper .content-header .header-icon {
  font-size: 13pt;
  margin-right: 10px;
  font-weight: bold;
  color: #6262e4;
}

.content-wrapper .content-header .header-title {
  font-size: 15pt;
  font-weight: bold;
  color: #343a40;
}


/* content body */

.content-wrapper .content-body {
  background-color: #fff;
  /* height: 50px; */
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-top: 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 150px;
  /* margin-bottom: 50px; */
  opacity: 0.9;
  border-bottom: 5px solid #6262e4;
  /* height: 100vh;
  overflow: scroll; */
}


/* card content */
.card-content {
  padding: 10px;
  /* box-shadow: 4px 1px 8px 2px rgba(0, 0, 0, 0.2); */
  border-radius: 5px;
  background-color: whitesmoke;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.card-content .card-content-icon {
  padding: 30px;
  border-radius: 20px;
}

.card-content .card-content-icon i {
  font-size: 20pt;
  color: whitesmoke;
}

.card-content .card-content-text {
  padding-top: 15px;
}

.card-content .card-content-text .number {
  font-size: 20pt;
}

.card-content ul li {
  border: 0px;
  background-color: whitesmoke;
}


/* =========================== */
@media only screen and (max-width:480px) {

  /* content header */
  .content-wrapper .content-header {
    padding: 10px;

    margin-top: -35px;
    position: sticky;
    top: 63px;
    overflow: hidden;
    z-index: 1;
  }

  .content-wrapper .content-header .header-icon {
    font-size: 10pt;
    margin-right: 7px;
    color: #6262e4;
  }

  .content-wrapper .content-header .header-title {
    font-size: 10pt;
    color: #343a40;
  }

  /* content body */

  .content-wrapper .content-body {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 100px;
    margin-top: 3px;
  }

  /* card-content */
  .card-content {
    padding: 10px;
    /* box-shadow: 4px 1px 8px 2px rgba(0, 0, 0, 0.2); */
    border-radius: 5px;
    background-color: whitesmoke;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  }

  .card-content .card-content-icon {
    padding: 20px;
    border-radius: 20px;
  }

  .card-content .card-content-icon i {
    font-size: 14pt;
    color: whitesmoke;
  }

  .card-content .card-content-text {
    padding-top: 10px;
    font-size: 8pt;
    margin-left: 10px;
  }

  .card-content .card-content-text .number {
    font-size: 15pt;
  }

  .card-content ul li {
    border: 0px;
    background-color: whitesmoke;
    padding: 0px;
  }
}



/* loader app */

/* HTML: <div class="loader"></div> */
/* .loader {
    width: 40px;
    aspect-ratio: 1;
    color: #6262e4;
    position: relative;
    background: radial-gradient(10px, currentColor 94%, #0000);
  }

  .loader:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(9px at bottom right, #0000 94%, currentColor) top left,
      radial-gradient(9px at bottom left, #0000 94%, currentColor) top right,
      radial-gradient(9px at top right, #0000 94%, currentColor) bottom left,
      radial-gradient(9px at top left, #0000 94%, currentColor) bottom right;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    animation: l18 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
  }

  @keyframes l18 {
    33% {
      inset: -10px;
      transform: rotate(0deg)
    }

    66% {
      inset: -10px;
      transform: rotate(90deg)
    }

    100% {
      inset: 0;
      transform: rotate(90deg)
    }
  } */



.loader {
  width: 60px;
  aspect-ratio: 1;
  display: grid;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  --c: no-repeat radial-gradient(farthest-side, #25b09b 92%, #0000);
  background:
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0 50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}

.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes l12 {
  100% {
    transform: rotate(.5turn)
  }
}