:root {
  /*------------------ colors --------------------------*/
  --primary-color: #20638e;
  --secondary-color: #3ec2bb;
  --success-color: #5cb85c;
  --danger-color: #ff0000;
  --warning-color: #f0ad4e;
  --muted-color: #aaaaaa;
  --info-color: #5bc0de;
  --dark-color: #020202;
  --light-color: #ffffff;
  --shadow-color: var(--muted-color);

  --background-color-primary: #fbfbfd;
  --background-color-secondary: #fff;

  --font-primary-color: var(--dark-color);
  --font-secondary-color: #939493;
  --font-success-color: var(--success-color);
  --font-danger-color: var(--danger-color);
  --font-warning-color: var(--warning-color);
  --font-muted-color: var(--muted-color);
  --font-info-color: var(--info-color);

  --btn-primary-bg-color: var(--primary-color);
  --btn-secondary-bg-color: var(--secondary-color);
  --btn-success-bg-color: var(--success-color);
  --btn-danger-bg-color: var(--danger-color);
  --btn-warning-bg-color: var(--warning-color);
  --btn-info-bg-color: var(--info-color);

  --btn-primary-border-color: #1b5479;
  --btn-success-border-color: #4cae4c;
  --btn-warning-border-color: #eea236;
  --btn-info-border-color: #46b8da;

  --btn-primary-font-color: var(--light-color);
  --btn-secondary-font-color: var(--light-color);
  --btn-success-font-color: var(--light-color);
  --btn-danger-font-color: var(--light-color);
  --btn-warning-font-color: var(--light-color);
  --btn-info-font-color: var(--light-color);

  --btn-text-transform: uppercase;

  --calendar-free-term-bg-color: #47bb47;
  --calendar-busy-term-bg-color: #fe62c2;
  --calendar-selected-term-bg-color: var(--primary-color);
  --calendar-free-term-font-color: var(--font-primary-color);
  --calendar-busy-term-font-color: var(--font-primary-color);
  --calendar-selected-term-font-color: var(--btn-primary-font-color);

  --hr-border-color: #44a1da;

  --selected-item-shadow-color: #23adff;
  --selected-item-shadow: 0 0 6px var(--selected-item-shadow-color);
  /* fonts family */
  --font-family: system-ui;
  /*------------------- font size -------------------------*/
  --font-sm: 0.875rem;
  --font-md: 1rem;
  --font-lg: 2rem;
  --font-xl: 3rem;
  --form-label-font-size: var(--font-md);
  /*------------------- font weight -----------------------*/
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-medium: 700;
  --font-weight-bold: 900;
  /* input */
  --border: 1px solid var(--muted-color);
  --border-radius: 5px;
  --border-padding: 0.2rem;
  /* hr's */
  --hr-default: 2px solid var(--hr-border-color);
  --hr-title-separator-margin-top: 0.5rem;
  --hr-title-separator-margin-bottom: 1rem;
  --hr-title-separator-style: solid;
  --hr-title-separator-size: 0.4rem;
  --hr-title-separator-width: 50%;
  --hr-title-separator-max-width: 20rem;
  --hr-title-separator: var(--hr-title-separator-size) var(--hr-title-separator-style) var(--hr-border-color);
  /* link's <a> */
  --link-font-color: var(--primary-color);
}

body {
  font-family: var(--font-family);
  background-color: var(--background-color-primary);
}

/*---------- pages ---------------------*/

.pagination {
  gap: var(--border-padding) !important;
}

.page-item .page-link {
  border-color: var(--btn-primary-border-color) !important;
  border-radius: var(--border-radius) !important;
  color: var(--dark-color) !important;
}

.page-item:first-child .page-link {
  border-radius: var(--border-radius) !important;
}

.page-item:last-child .page-link {
  border-radius: var(--border-radius) !important;
}

.page-item.active .page-link {
  background-color: var(--btn-primary-bg-color) !important;
  color: var(--background-color-primary) !important;
}

.page-item.disabled .page-link {
  border-color: var(--muted-color) !important;
  color: var(--muted-color) !important;
}

.page-boundary-button .page-link {
  display: none !important;
}

.page-boundary-item .page-link {
  display: block !important;
}

.page-boundary-spacer {
  display: block;
  border: 0;
  padding: 6px 0.2rem;
}

.page-items-mobile {
  display: none;
}

@media (max-width: 420px) {
  .page-boundary-button .page-link {
    display: block !important;
  }

  .page-boundary-item .page-link {
    display: none !important;
  }

  .page-boundary-item .page-boundary-spacer {
    display: none !important;
  }

  .page-items-desktop {
    display: none;
  }

  .page-items-mobile {
    display: block;
  }
}

/*---------- buttons class -------------*/

.btn {
  border-radius: var(--border-radius) !important;
  text-transform: var(--btn-text-transform) !important;
}

  .btn.btn-primary {
    background-color: var(--btn-primary-bg-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-md) !important;
    color: var(--btn-primary-font-color) !important;
    border-color: var(--btn-primary-border-color) !important;
  }

    .btn.btn-primary:hover {
      filter: brightness(1.2);
      color: var(--btn-primary-font-color);
      border-color: var(--btn-primary-border-color) !important;
    }

    .btn.btn-primary:active {
      filter: brightness(0.8);
      color: var(--btn-primary-font-color);
      border-color: var(--btn-primary-border-color) !important;
    }

    .btn.btn-primary:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-primary-bg-color) !important;
      border-color: var(--btn-primary-border-color) !important;
    }

  .btn.btn-outline-primary {
    color: var(--btn-primary-bg-color) !important;
    border-color: var(--btn-primary-bg-color) !important;
  }

    .btn.btn-outline-primary:hover {
      filter: brightness(1.2);
      color: var(--btn-primary-font-color) !important;
      border-color: var(--btn-primary-bg-color) !important;
      background-color: var(--btn-primary-bg-color) !important;
    }

    .btn.btn-outline-primary:active {
      filter: brightness(0.8);
      color: var(--btn-primary-font-color) !important;
      border-color: var(--btn-primary-bg-color) !important;
      background-color: var(--btn-primary-bg-color) !important;
    }

    .btn.btn-outline-primary:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-primary-bg-color) !important;
      border-color: var(--btn-primary-bg-color) !important;
    }

  .btn.btn-success {
    background-color: var(--btn-success-bg-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-md) !important;
    color: var(--btn-success-font-color) !important;
    border-color: var(--btn-success-border-color) !important;
  }

    .btn.btn-success:hover {
      filter: brightness(1.2);
      color: var(--btn-success-font-color);
      border-color: var(--btn-success-border-color) !important;
    }

    .btn.btn-success:active {
      filter: brightness(0.8);
      color: var(--btn-success-font-color);
      border-color: var(--btn-success-border-color) !important;
    }

    .btn.btn-success:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-success-bg-color) !important;
      border-color: var(--btn-success-border-color) !important;
    }

  .btn.btn-warning {
    background-color: var(--btn-warning-bg-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-md) !important;
    color: var(--btn-warning-font-color) !important;
    border-color: var(--btn-warning-border-color) !important;
  }

    .btn.btn-warning:hover {
      filter: brightness(1.2);
      color: var(--btn-warning-font-color);
      border-color: var(--btn-warning-border-color) !important;
    }

    .btn.btn-warning:active {
      filter: brightness(0.8);
      color: var(--btn-warning-font-color);
      border-color: var(--btn-warning-border-color) !important;
    }

    .btn.btn-warning:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-warning-bg-color) !important;
      border-color: var(--btn-warning-border-color) !important;
    }

  .btn.btn-danger {
    background-color: var(--btn-danger-bg-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-md) !important;
    color: var(--btn-danger-font-color) !important;
    border-color: var(--btn-danger-bg-color) !important;
  }

    .btn.btn-danger:hover {
      filter: brightness(1.2);
      color: var(--btn-danger-font-color);
      border-color: var(--btn-danger-bg-color) !important;
    }

    .btn.btn-danger:active {
      filter: brightness(0.8);
      color: var(--btn-danger-font-color);
      border-color: var(--btn-danger-bg-color) !important;
    }

    .btn.btn-danger:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-danger-bg-color) !important;
      border-color: var(--btn-danger-bg-color) !important;
    }

  .btn.btn-info {
    background-color: var(--btn-info-bg-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: var(--font-md) !important;
    color: var(--btn-info-font-color) !important;
    border-color: var(--btn-info-border-color) !important;
  }

    .btn.btn-info:hover {
      filter: brightness(1.2);
      color: var(--btn-info-font-color);
      border-color: var(--btn-info-border-color) !important;
    }

    .btn.btn-info:active {
      filter: brightness(0.8);
      color: var(--btn-info-font-color);
      border-color: var(--btn-info-border-color) !important;
    }

    .btn.btn-info:focus {
      box-shadow: 0 0 5px 0.1rem var(--btn-info-bg-color) !important;
      border-color: var(--btn-info-border-color) !important;
    }

/*---------- text class -------------*/

.text-danger {
  color: var(--font-danger-color) !important;
}

small {
  font-size: var(--font-sm) !important;
}

/*---------- link class -------------*/
a {
  color: var(--link-font-color) !important;
}

  a:hover {
    filter: brightness(1.2);
    color: var(--link-font-color) !important;
  }

  a:active {
    filter: brightness(0.8);
    color: var(--link-font-color) !important;
  }

  a:visited {
    filter: brightness(0.5);
    color: var(--link-font-color) !important;
  }

.c-title {
  color: var(--font-primary-color) !important;
  font-size: var(--font-lg) !important;
  font-weight: var(--font-weight-medium) !important;
}

.page-title {
}

.page-title-content {
  padding-top: 1rem !important;
}

/*--------------- Top menu -------------------*/
.c-menu {
  background-color: var(--fourth-color) !important;
}

  .c-menu > nav {
    padding: 0.5rem 5% !important;
  }

  .c-menu .logo {
    transform: scale(1.5);
  }

a.nav-link {
  font-size: var(--font-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--font-primary-color) !important;
}

  a.nav-link:hover {
    color: var(--font-secondary-color) !important;
  }

  a.nav-link:focus {
    color: var(--primary-color) !important;
  }

  a.nav-link:active,
  a.nav-link.active {
    color: var(--primary-color) !important;
    border-top: 3px solid var(--hr-border-color);
    padding-top: calc(0.5rem - 3px);
  }

/*----------- form ------------------*/

form label {
  font-size: var(--form-label-font-size);
  color: var(--font-primary-color);
}

/*---------- hr class -------------*/

hr {
  border-top: var(--hr-default) !important;
  opacity: 1 !important;
  background-color: transparent;
}

  hr.hr-title-separator {
    border: var(--hr-title-separator) !important;
    border-style: none none var(--hr-title-separator-style) !important;
    background-color: transparent !important;
    width: var(--hr-title-separator-width) !important;
    max-width: var(--hr-title-separator-max-width) !important;
    opacity: 1 !important;
    margin-top: var(--hr-title-separator-margin-top);
    margin-bottom: var(--hr-title-separator-margin-bottom);
  }

/*------------------- forms --------------------------*/
.form-control:focus {
  box-shadow: 0 0 5px 0.1rem var(--btn-primary-bg-color) !important;
}

.form-select:focus {
  box-shadow: 0 0 5px 0.1rem var(--btn-primary-bg-color) !important;
}

/*------------------- checkboxes --------------------------*/

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/*-------------------- primeNg -----------------------*/

/* calendar */
.p-inputtext:focus {
  box-shadow: 0 0 5px 0.1rem var(--btn-primary-bg-color) !important;
  border-color: var(--btn-primary-bg-color) !important;
}

.p-datepicker table td > span.p-highlight {
  color: var(--calendar-selected-term-font-color) !important;
  background: var(--calendar-selected-term-bg-color) !important;
}

.p-datepicker:not(.p-disabled)
table
td
span:not(.p-highlight):not(.p-disabled):hover {
  color: var(--font-primary-color) !important;
}

.doctor-visits {
  margin-top: 10px;
}

.earliest-visits {
  background-color: var(--light-color);
}

.doctor-title {
  color: var(--font-primary-color);
  font-weight: var(--font-weight-medium) !important;
}

.doctor-description {
  color: var(--font-muted-color);
  white-space: pre-line;
  overflow: hidden;
  text-overflow: ellipsis;
}

.earliest-visit {
  border: 1px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
}

  .earliest-visit:hover {
    color: var(--light-color) !important;
    background-color: var(--primary-color) !important;
  }

.earliest-visit-change-term {
  border: 1px solid var(--warning-color) !important;
  color: var(--warning-color) !important;
}

  .earliest-visit-change-term:hover {
    color: var(--btn-warning-font-color) !important;
    background-color: var(--warning-color) !important;
  }

.flex-center {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-right-end {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.doctor-visits img {
  max-width: 100px;
  max-height: 100px;
}

.text-main {
  color: var(--primary-color) !important;
}

/*-------------------- my-visits page -----------------------*/

@media (max-width: 991px) {
  .box {
    background-color: var(--background-color-secondary);
  }
}

.box.visit-box {
  background-color: var(--background-color-secondary);
}

.c-modal {
  background-color: var(--light-color);
  padding: 2%;
  border: 1px solid #ced4da;
}

.list-item.checked {
  box-shadow: var(--selected-item-shadow);
}

/*-------------------- modals -----------------------*/
.modal-wrapper {
  background-color: var(--background-color-secondary);
  box-shadow: 0px 0px 12px 6px var(--shadow-color);
}

/*------------------- calendar -----------------------*/
.busy-term {
  background-color: var(--calendar-busy-term-bg-color) !important;
  color: var(--calendar-busy-term-font-color) !important;
}

.free-term {
  background-color: var(--calendar-free-term-bg-color) !important;
  color: var(--calendar-free-term-font-color) !important;
}

.selected-term {
  background-color: var(--calendar-selected-term-bg-color) !important;
  color: var(--calendar-selected-term-font-color) !important;
}

/*------------------ tables --------------------------*/
.slot-list tbody tr {
  background-color: var(--light-color);
  border-bottom: 2px solid var(--background-color-primary);
}

  .slot-list tbody tr td:first-child {
    font-weight: 500;
    color: var(--font-primary-color);
  }

  .slot-list tbody tr td:nth-child(2) {
    color: var(--font-color);
  }

  .slot-list tbody tr td {
    color: var(--font-muted-color);
  }

.info-icon {
  color: var(--info-color);
}

.speech-bubble-container {
  background-color: var(--primary-color);
}

.drop-zone {
  border: 3px dotted #ccc;
  border-radius: var(--border-radius);
}

  .drop-zone.valid-drag,
  .drop-zone.file-selected {
    border-color: var(--success-color);
    color: var(--success-color);
  }

.main-loader {
  background-color: var(--primary-color) !important;
  color: white !important;
}

.login-vertical-line {
  border-left: 1px solid var(--hr-border-color);
}