/*  
  -------------------------------------------
  -----      CSS for the font used      -----
  -------------------------------------------
*/

@import url('./font/inter.css');

body {
  font-family: 'Inter var', sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/*  
  ------------------------------------------- 
  -----      CSS for the preloader      -----
  -------------------------------------------
*/

.loader-wrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  z-index: 2000 !important;
}

.material-symbols-outlined.fx-2 {
  font-size: 2rem !important
}

@media screen and (width < 762px) {
  table.table thead {
    display: none;
  }

  table.table tbody tr {
    display: block;
  }

  table.table tbody td {
    display: block;
  }

  .table {
    min-width: 80vw;
    padding-left: 10px;
    margin: 0 5px;
  }

  .table tbody td[data-th]:before {
    content: attr(data-th) ": ";
    text-transform: uppercase;
    width: 45%;
    text-align: left;
  }

  .table tbody td[data-th]:last-child:before {
    content: "";
  }

  td:last-child {
    margin-bottom: 30px;
}
}

@media screen and (width >=762px) {
  .w-md-25 {
    width: 25% !important;
  }
}

@media screen and (width < 992px) {
  .bg-blur {
    padding-bottom: 30px !important;
    background-color: rgba(0, 0, 0, 0.3);
    border: solid 0.3px rgba(0, 0, 0, 0.85);
    box-shadow: 2px 2px 10px -5px rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

@media screen and (width >=992px) {
  .w-lg-100 {
    width: 100% !important;
  }
}

.enabled {
  pointer-events: all;
  cursor: pointer
}

.disabled {
  color: #aaa;
  pointer-events: none;
}

button.bs-placeholder[role='button']>span {
  color: #f00;
}

a.placeholder,
button.bs-placeholder {
  font-style: italic !important;
  color: #f00 !important;
}

.fake-input {
  padding: 0.375rem 0.75rem;
}

.fake-input.disabled {
  color: rgb(var(--bs-white-rgb));
  background-color: var(--bs-secondary-bg);
}

.link {
  padding: 7px 30px;
  text-decoration: none;
  color: rgb(var(--bs-white-rgb));
}

.link:hover,
.btn:hover {
  text-shadow: 0px 0px 9px rgba(255, 255, 255, 0.78);
}

a,
.link:hover,
.btn:hover {
  cursor: pointer !important;
}

.about {
  text-decoration: none;
  color: rgba(var(--bs-white-rgb));
}

@media screen and (width < 762px) {
  .link {
    padding: 7px;
  }
}