@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand/Quicksand-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand/Quicksand-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand/Quicksand-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand/Quicksand-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand/Quicksand-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bs-font-sans-serif: "Quicksand", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

html,
body,
button,
input,
optgroup,
select,
textarea,
.tooltip,
.popover,
.select2-container {
  font-family: "Quicksand", Arial, sans-serif;
}

.apexcharts-text,
.apexcharts-legend-text,
.apexcharts-tooltip {
  font-family: "Quicksand", Arial, sans-serif !important;
}

#kt_modal_add_user_form .administrator:first-of-type {
  display: block !important;
  position: relative !important;
}
#kt_modal_add_user_form .administrator:first-of-type:after {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: silver;
}
#kt_modal_add_user_form .administrator:first-of-type:hover {
  background: #efefef;
  cursor: pointer;
}
#kt_modal_add_user_form .administrator:first-of-type:hover:after {
  font-weight: bold;
}

#kt_modal_add_user_form div .separator.administrator:nth-child(3) {
  display: block !important;
}

td:first-child {
  padding-left: 2rem;
}

[data-model] {
  display: block;
  position: relative;
}
[data-model]::first-letter {
  -webkit-text-decoration: underline dashed silver !important;
          text-decoration: underline dashed silver !important;
  cursor: help;
}
[data-model]:after {
  position: absolute;
  left: 0;
  top: -15px;
  content: attr(data-model);
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  background-blend-mode: lighten;
  color: black;
  width: 15px;
  text-align: center;
  height: 15px;
  border-radius: 50%;
  opacity: 0;
}
[data-model]:hover:after {
  opacity: 0.7;
  width: auto;
  border-radius: 2px;
  padding: 0 2px;
  transition-delay: 800ms;
}

.dataTable td:first-child {
  padding-left: 1rem !important;
}

#roles-container .fw-bold,
select#kt_modal_add_role_option {
  text-transform: capitalize;
}

.select2-container .select2-selection--single {
  height: auto !important;
}