.loader-line {
  width: 100%;
  height: 4px;
  position: relative;
  overflow: hidden;
  background-color: #a298ff;
}

.loader-line:before {
  content: "";
  position: absolute;
  left: -50%;
  height: 4px;
  width: 40%;
  background-color: rgb(25, 0, 255);
  -webkit-animation: lineAnim 1.5s linear infinite;
  -moz-animation: lineAnim 1.5s linear infinite;
  animation: lineAnim 1.5s linear infinite;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

@keyframes lineAnim {
  0% {
    left: -40%;
  }
  50% {
    left: 20%;
    width: 80%;
  }
  100% {
    left: 100%;
    width: 100%;
  }
}

@keyframes loading {
  from {
    left: 0;
    width: 0;
  }
  to {
    left: 0;
    width: 100%;
  }
}

:root {
  --themeone: blue;
  ----themetwo: rgb(0, 217, 255);
}

.theme-checkbox {
  --toggle-size: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 6.25em;
  height: 3.125em;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(50%, var(--themeone)),
      color-stop(50%, var(--themeone))
    )
    no-repeat;
  background: -o-linear-gradient(
      left,
      var(----themetwo) 50%,
      var(--themeone) 50%
    )
    no-repeat;
  background: linear-gradient(
      to right,
      var(----themetwo) 50%,
      var(--themeone) 50%
    )
    no-repeat;
  background-size: 205%;
  background-position: 0;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
  border-radius: 99em;
  position: relative;
  cursor: pointer;
  font-size: var(--toggle-size);
}

.theme-checkbox::before {
  content: "";
  width: 2.25em;
  height: 2.25em;
  position: absolute;
  top: 0.438em;
  left: 0.438em;
  background: -webkit-gradient(
      linear,
      left top,
      right top,
      color-stop(50%, var(----themetwo)),
      color-stop(50%, var(--themeone))
    )
    no-repeat;
  background: -o-linear-gradient(
      left,
      var(----themetwo) 50%,
      var(--themeone) 50%
    )
    no-repeat;
  background: linear-gradient(
      to right,
      var(----themetwo) 50%,
      var(--themeone) 50%
    )
    no-repeat;
  background-size: 205%;
  background-position: 100%;
  border-radius: 50%;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.theme-checkbox:checked::before {
  left: calc(100% - 2.25em - 0.438em);
  background-position: 0;
}

.theme-checkbox:checked {
  background-position: 100%;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

.bg-round-grey {
  background-color: rgb(255, 255, 255);
  border-radius: 50px;
}
.bg-grey {
  background-color: rgb(255, 255, 255);
}
.bg-gradient-blue {
  background: linear-gradient(to right, #3e48ff, #4e54c8);
}
.z {
  z-index: 20000;
}

.pointer {
  cursor: pointer;
}
.not-allow {
  cursor: not-allowed;
}
.logo-img {
  width: 2.5rem;
}
.home-logo-img {
  height: 100%;
  width: unset;
}
.notificaton-hover:hover {
  color: #888;
  transition: all 0.2s ease;
}
.menu-items:hover {
  background-color: rgb(43, 0, 255);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding-left: 10px;
  color: white;
}

#tablists .active {
  background-color: rgb(255, 255, 255);
  color: #3c00ff;
  transition: all 0.2s ease-in-out;

  border: 1px solid blue;
  cursor: pointer;
  padding-left: 10px;
}

.btn-gradient-blue {
  background: linear-gradient(to right, #3e48ff, #4e54c8);
}
.btn-gradient-blue:hover {
  box-shadow: -1px 10px 25px -6px rgba(17, 0, 255, 0.65);
}

.table-blue {
  --bs-table-bg: rgb(59, 59, 59);
  --bs-table-hover-bg: #000000;
}

#menu-bar {
  width: 100%;
  padding: 0;
}

.nav-bar-left-main {
  height: 95dvh;
}

.nav-sec-one {
  height: 65%;
}

.menu-items-for-height {
  height: 100%;
}

.navsec-card {
  height: 33%;
}

.customer-card-img {
  width: 4rem;
  height: 5rem;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-name {
  position: absolute;
  top: 50%;
  font-size: 2rem;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-id {
  position: absolute;
  top: 68%;
  font-size: 0.7rem;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card-button {
  position: absolute;
  top: 78%;
}
.content-height {
  height: 96dvh;
  overflow: auto;
}

.input-hei {
  height: 45%;
}
.top-input-content {
  height: 20%;
}

.content-middle-inp {
  height: 65%;
}

.input-box {
  cursor: pointer;
  background-color: #cccccc;
  border-radius: 35px;
  border: 2px dashed rgb(108, 108, 108);
  color: #000000;
  transition: all 0.1s ease-in-out;
  height: 200px;
}

.input-box:hover {
  background-color: #3c00ff;
}

.input-box:hover .btn-outline-primary {
  border: 1px solid white;
  color: white;
}

.file-valid {
  cursor: pointer;
  background-color: #333;
  border-radius: 35px;
  border: 2px dashed white;
  color: #eee;
  transition: all 0.1s ease-in-out;
  background-color: green;
  transition: all 0.2s ease-in-out;
}

.file-valid:hover {
  background-color: rgb(3, 95, 3);
}

.file-invalid {
  cursor: pointer;
  border-radius: 35px;
  border: 2px dashed white;
  color: #eee;
  transition: all 0.1s ease-in-out;
  background-color: rgb(163, 2, 2);
  transition: all 0.2s ease-in-out;
}

.file-invalid:hover {
  background-color: rgb(118, 0, 0);
}
.input-hei {
  height: 45%;
}
.top-input-content {
  height: 20%;
}

.content-middle-inp {
  height: 65%;
}

.files {
  height: 75%;
}
.buttons {
  height: 25%;
}

.table-height {
  height: 53.5%;
}
.ts-sx {
  font-size: 12px;
}
.sz-sz {
  font-size: 12px;
}
.selected {
  color: rgb(34, 0, 255);
}
.selected span {
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in;
  color: rgb(0, 17, 255);
}
.not-selected span {
  opacity: 0;
  transform: scale(2);
  transition: all 0.3s ease-in;
  color: black;
}

#previlage-select li,
#edit-previlage-select li {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 3px;
  padding-left: 5px;
  border-radius: 5px;
}

#previlage-select li:hover,
#edit-previlage-select li:hover {
  background-color: #e8e2ff;
}

.delect-modal-size {
  width: 25rem;
}

.dropdown-menu ul {
  list-style-type: none;
}

@media only screen and (max-width: 576px) {
  .delect-modal-size {
    width: auto;
  }

  #menu-bar {
    background-color: rgb(159, 159, 159);
    width: 17rem;
    border-radius: 25px;

    padding: 10px 10px;
  }
  .nav-sec-one {
    height: 100%;
  }
  .menu-items-for-height {
    height: auto;
  }
  .navsec-card {
    height: 20rem;
  }

  .customer-card-img {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-id {
    position: absolute;
    top: 68%;
    font-size: 0.7rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-button {
    position: absolute;
    top: 78%;
  }
  .input-hei {
    height: auto;
  }
  .top-input-content {
    height: auto;
  }

  .content-middle-inp {
    height: auto;
  }
  .files {
    height: auto;
  }
  .buttons {
    height: auto;
  }
  .table-height {
    height: 100%;
  }
  .content-height {
    height: 96dvh;
  }
  .home-logo-img {
    height: unset;
    width: 100%;
  }
}

@media only screen and (min-width: 576px) {
  .delect-modal-size {
    width: 25rem;
  }
  .home-logo-img {
    height: unset;
    width: 100%;
  }

  #menu-bar {
    background-color: rgb(159, 159, 159);
    width: 25rem;
    border-radius: 25px;
    padding: 10px 10px;
  }
  .nav-sec-one {
    height: 100%;
  }
  .menu-items-for-height {
    height: auto;
  }
  .navsec-card {
    height: 20rem;
  }

  .customer-card-img {
    width: 8rem;
    height: 8rem;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .input-hei {
    height: auto;
  }
  .top-input-content {
    height: auto;
  }

  .content-middle-inp {
    height: auto;
  }
  .files {
    height: auto;
  }
  .buttons {
    height: auto;
  }
  .table-height {
    height: 100%;
  }
  .content-height {
    height: 96dvh;
  }
}

@media only screen and (min-width: 768px) {
  .delect-modal-size {
    width: 25rem;
  }

  #menu-bar {
    background-color: rgb(159, 159, 159);
    width: 20rem;
    padding: 10px 10px;
  }
  .nav-sec-one {
    height: 100%;
  }
  .menu-items-for-height {
    height: auto;
  }
  .navsec-card {
    height: 17rem;
  }

  .customer-card-img {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-id {
    position: absolute;
    top: 68%;
    font-size: 0.7rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-button {
    position: absolute;
    top: 78%;
  }

  .input-hei {
    height: auto;
  }
  .top-input-content {
    height: auto;
  }

  .content-middle-inp {
    height: auto;
  }
  .files {
    height: auto;
  }
  .buttons {
    height: auto;
  }
  .table-height {
    height: 100%;
  }
  .content-height {
    height: 95dvh;
  }
}

@media only screen and (min-width: 992px) {
  .home-logo-img {
    height: 100%;
    width: unset;
  }
  #menu-bar {
    background-color: transparent;
    width: 100%;
    padding: 0;
  }
  .nav-sec-one {
    height: 60%;
  }
  .menu-items-for-height {
    height: 100%;
  }
  .navsec-card {
    height: 38%;
  }
  .customer-card-img {
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-id {
    position: absolute;
    top: 68%;
    font-size: 0.5rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-button {
    position: absolute;
    top: 78%;
  }
  .input-hei {
    height: 45%;
  }
  .top-input-content {
    height: 20%;
  }

  .content-middle-inp {
    height: 65%;
  }

  .files {
    height: 75%;
  }
  .buttons {
    height: 25%;
  }
  .table-height {
    height: 53.5%;
  }
  .content-height {
    height: 95dvh;
  }
}

@media only screen and (min-width: 1200px) {
  .home-logo-img {
    height: 100%;
    width: unset;
  }
  #menu-bar {
    background-color: transparent;
    width: 100%;
    padding: 0;
  }
  .nav-sec-one {
    height: 65%;
  }
  .menu-items-for-height {
    height: 100%;
  }
  .navsec-card {
    height: 33%;
  }

  .customer-card-img {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-id {
    position: absolute;
    top: 68%;
    font-size: 0.7rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-button {
    position: absolute;
    top: 78%;
  }
  .input-hei {
    height: 45%;
  }
  .top-input-content {
    height: 20%;
  }

  .content-middle-inp {
    height: 65%;
  }

  .files {
    height: 75%;
  }
  .buttons {
    height: 25%;
  }
  .table-height {
    height: 53.5%;
  }
  .content-height {
    height: 95dvh;
  }
}

@media only screen and (min-width: 1400px) {
  #menu-bar {
    background-color: transparent;
    width: 100%;
    padding: 0;
  }
  .nav-sec-one {
    height: 66%;
  }
  .menu-items-for-height {
    height: 100%;
  }
  .navsec-card {
    height: 33%;
  }
  .customer-card-img {
    width: 7rem;
    height: 7rem;
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-name {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-id {
    position: absolute;
    top: 68%;
    font-size: 0.8rem;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-button {
    position: absolute;
    top: 78%;
  }
  .input-hei {
    height: 45%;
  }
  .top-input-content {
    height: 20%;
  }

  .content-middle-inp {
    height: 65%;
  }

  .files {
    height: 75%;
  }
  .buttons {
    height: 25%;
  }
  .table-height {
    height: 53.5%;
  }
  .content-height {
    height: 95dvh;
  }
}