/* --------------------------------------------------------------------------------------------- */
/* ######################################## LOAD FONTS ######################################### */
/* --------------------------------------------------------------------------------------------- */
@font-face { font-family:'Quicksand'; src:url(/themes/custom/kituigovco/src/assets/fonts/Quicksand/Quicksand-Light.ttf) format('truetype'); font-weight:300; }
@font-face { font-family:'Quicksand'; src:url(/themes/custom/kituigovco/src/assets/fonts/Quicksand/Quicksand-Regular.ttf) format('truetype'); font-weight:400; }
@font-face { font-family:'Quicksand'; src:url(/themes/custom/kituigovco/src/assets/fonts/Quicksand/Quicksand-Medium.ttf) format('truetype'); font-weight:500; }
@font-face { font-family:'Quicksand'; src:url(/themes/custom/kituigovco/src/assets/fonts/Quicksand/Quicksand-SemiBold.ttf) format('truetype'); font-weight:600; }
@font-face { font-family:'Quicksand'; src:url(/themes/custom/kituigovco/src/assets/fonts/Quicksand/Quicksand-Bold.ttf) format('truetype'); font-weight:700; }

/* --------------------------------------------------------------------------------------------- */
/* ########################################## MODALS ########################################### */
/* --------------------------------------------------------------------------------------------- */
.modal ::-webkit-scrollbar { width: 20px; }
.modal ::-webkit-scrollbar-track { background-color: transparent; }
.modal ::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.15);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box; }
.modal ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,.2); }
.modal input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.modal input[type=number] { -moz-appearance: textfield; }
.modal ::-webkit-input-placeholder { color: #bbb !important; }
.modal :-ms-input-placeholder { color: #bbb !important; }
.modal ::placeholder { color: #bbb !important; }

.modal *:not(i) { font-family: 'Quicksand', sans-serif !important; }
.modal-content { border: none; border-radius: 10px; }
.modal-header {
  display: block;
  padding: 20px !important;
  background: var(--bs-primary) !important;
  border: none;
  color: #fff;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px; }
.modal-header .modal-title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2; }
.modal-header h5 > i { font-size: 28px; margin-right: 10px; }
.modal-header .btn-close { 
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  right: 10px;
  padding: 0.25em 0.25em !important;
  margin: 0;
  background-size: 12px; }
.modal-body {
  overflow-y: overlay;
  max-height: 70vh;
  height: auto;
  background: transparent;
  padding: 25px; }
.modal-body label {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #333; }
.modal-body .form-control { font-size: 14px; font-weight: 500; padding: 8px 12px; }
.modal-footer { border: none; flex-wrap: nowrap; justify-content: center; }
.modal-footer * { width: 30%; }

.modal .modal-body .group { 
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 20px;
  border-radius: 10px;
  background-color: #ececec; }
.modal .modal-body .group:not(:last-child) { margin-bottom: 25px; }
.modal .modal-body .group img { border-radius: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.2); }
.modal .modal-body .group img.dark_mode { background-color: #2c3541; }
.modal .modal-body .preview_img { display: none; margin-top: 15px; }
.modal .modal-body .group p, .modal .modal-body .group a {
  padding: 15px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  background-color: #fff;
  border-radius: 10px; }
.modal .modal-body .group a { width: 100%; text-align: center; }
.modal .modal-body .group .fa-volume-high {
  cursor: pointer;
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 18px;
  color: #aaa; }
.modal .modal-body .group .fa-volume-high.active_sound,
.modal .modal-body .group .fa-volume-high:hover { color: var(--bs-primary); }
.modal .modal-body .btn-link { text-decoration: none !important; font-size: 14px; }

.modal .banner_edit { position: relative; margin-bottom: 20px; }
.modal .banner_edit .fade_edit {
  z-index: 1;
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  border-radius: 10px;
  top: 0;
  left: 0;
  color: #fff; }
.modal .banner_edit:hover .fade_edit { display: flex; }
.modal .banner_edit .fade_edit span { display: flex; justify-content: center; align-items: center; }
.modal .banner_edit .fade_edit i { font-size: 20px; }
.modal .banner_edit .fade_edit input {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  top: 0;
  left: 0;
  opacity: 0; }

/* --------------------------------------------------------------------------------------------- */
/* ########################################## LOADER ########################################### */
/* --------------------------------------------------------------------------------------------- */
#loader {
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7); }

#loader .circles {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370DB;
  animation: spin 2s linear infinite; }
#loader .circles:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BA55D3;
  animation: spin 3s linear infinite; }
#loader .circles:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FF00FF;
  animation: spin 1.5s linear infinite; 
}
@keyframes spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

#loader .text {
  position: relative;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin-top: 20px;
  font-family: 'Quicksand', sans-serif !important;
}

/* --------------------------------------------------------------------------------------------- */
/* ####################################### ALERT GLOBAL ######################################## */
/* --------------------------------------------------------------------------------------------- */
#alert_global {
  z-index: 10001;
  display: none;
  align-items: center;
  position: fixed;
  top: 0;
  max-width: 50%;
  padding: 20px;
  border-radius: 8px;
  border: none;
  font-family: 'Quicksand';
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 3px 1px rgb(0 0 0 / 30%);
  animation-duration: .5s;
}
#alert_global > i { font-size: 30px; margin-right: 8px; }


/* --------------------------------------------------------------------------------------------- */
/* ######################################## EDIT FIELDS ######################################## */
/* --------------------------------------------------------------------------------------------- */
/* *[data-fieldedit] { cursor: pointer; position: relative; opacity: 0; }

img[data-fieldedit]:hover { background-color: rgba(0,0,0,.1); border-radius: 8px; }

*[data-fieldedit]:not(img):hover:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,.1);
  border-radius: 8px; }

a[data-fieldedit] { position: relative; }
a[data-fieldedit]:hover .btn_edit_link { display: flex; }
a[data-fieldedit] .btn_edit_link {
  z-index: 10;
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 40px;
  height: 40px;
  top: -20px;
  right: -20px;
  background-color: rgba(0,0,0,.5);
  color: #fff;
  border-radius: 50%;
  font-size: 18px; }
a[data-fieldedit] .btn_edit_link:hover { color: #70ff00; } */