: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;

  /* 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;
}

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);
  text-overflow: ellipsis;
  overflow: hidden;
}

.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;
}

/*-------------------- 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);
}