:root {
  --color-gray         : #c9ccd1;
  --color-blue         : #007bff;
  --color-light-gray-1 : #ebebeb;
  --color-light-gray-2 : #e9ecef;
  --color-gray-opacity : #ced4da;
  --color-white        : #ffffff;
  --color-light-black  : #343a40;
  --color-light-black-1: #677079;
  --color-light-blue-1 : #2d6ea7;
}

.display-5 {
  font-size  : 1.5rem !important;
  font-weight: 300;
  line-height: 1.2;
}

.h-card-100 {
  height: 115px
}

.h-info {
  height         : 40px;
  display        : flex !important;
  justify-content: center !important;
  align-items    : center !important;
}

.color-white {
  color: var(--color-white) !important;
}

.color-light-gray {
  color: var(--color-gray-opacity) !important;
}

.border-light-gray {
  border-color: var(--color-gray-opacity) !important;
}

.bg-light-blue {
  background: var(--color-light-blue-1) !important;
  color: var(--color-white);
}

td,
th {
  border : solid 1px var(--color-light-gray);
  padding: 5px;
}


.list-users-table :is(td, th):nth-child(n+3) {
  text-align: center;
}

thead {
  text-transform: uppercase;
}

tbody tr:hover {
  background-color: var(--color-light-blue) !important;
}

#content-1 {
  min-height: auto !important
}

.bg-light-gray-2 {
  background-color: var(--color-light-gray-2) !important;
  text-align      : center;
}

@media (max-width: 600px) {
  .table-responsive-600 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 700px) {
  .table-responsive-700 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 785px) {
  .table-responsive-800 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 1025px) {
  .table-responsive-1000 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 1105px) {
  .table-responsive-1100 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 1200px) {
  .table-responsive-1200 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 1280px) {
  .table-responsive-1300 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}

@media (max-width: 1620px) {
  .table-responsive-1600 {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }
}


@media screen and (max-width: 1920px) {
  .table-responsive {
    display   : block;
    overflow-x: auto;
  }

  /* width */
  ::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow   : inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background   : var(--color-light-black);
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-light-black-1);
    ;
  }

}