/*
#################### IMPORT FONTS ####################
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/*
#################### BASE STYLES ####################
*/
body {
  font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  font-size: 0.8125rem !important;
  letter-spacing: 0.5px !important;
  color: hsl(233, 5%, 31%) !important;
}
/*
#################### LOGIN PAGE ####################
*/
.bg-login-img {
  background-image: url(../img/login-img.jpg) !important;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*
#################### LIST STYLES ####################
*/
li.nav-item {
  height: 43px !important;
}

/*
#################### TABLE STYLES ####################
*/
td,
th {
  text-align: center !important;
}

/*
#################### DATA TABLES ####################
*/
#example_wrapper {
  padding-bottom: 40px !important;
}

button.dt-button.buttons-copy.buttons-html5 {
  background-color: #624285 !important;
  color: #fff !important;
  border: 0px !important;
}

button.dt-button.buttons-pdf.buttons-html5 {
  background-color: #cf2257 !important;
  color: #fff !important;
  border: 0px !important;
}

button.dt-button.buttons-excel.buttons-html5 {
  background-color: #01ae9b !important;
  color: #fff !important;
  border: 0px !important;
}

/*
#################### FORM STYLES ####################
*/
form.user .form-control-user {
  font-size: 0.8125rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  padding: 0.375rem 1rem !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}
textarea.form-control {
  font-size: 0.8125rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  padding: 0.375rem 1rem !important;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: 0.8125rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: #4b4c53;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-border-radius: 0rem;
  -moz-border-radius: 0rem;
  -ms-border-radius: 0rem;
  -o-border-radius: 0rem;
}

/* Form Button */
form.user .btn-user {
  font-size: 0.8125rem !important;
  letter-spacing: 0.5px !important;
  border-radius: 0 !important;
  padding: 0.375rem 1rem !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

/* Hide Arrows from number input fields */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/*
#################### SIDEBAR STYLES ####################
*/
/* Dropdown Title */
.collapse-header {
  font-weight: 600 !important;
  font-size: 0.65rem !important;
  color: var(--blue) !important;
  letter-spacing: 1.5px !important;
}

/*
#################### MEDIA QUERIES ####################
*/
@media (min-width: 768px) {
  .sidebar.toggled .nav-item .nav-link span {
    display: none !important;
  }
}