@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  --fl-tertiary-bg: #e2edff;
  --fl-tertiary-bg-rgb: rgb(226, 237, 255);
  --fl-body-color: #333;
  --fl-btn-bg: #ccc;
  --fl-body-font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.h1 *, .h2 *, .h3 *, .h4 *, .h5 *, .h6 *,
.header-font, .header-font * {
  font-family: "Lora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
}

.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
}

.container {
  max-width: 1192px
}

.rounded-container {
  background-color: var(--fl-light);
  border-radius: 15px;
  padding: 20px;
  margin: 0 auto;
  max-width: 100%;

  @media (min-width: 576px) {
    max-width: 540px
  }
  @media (min-width: 768px) {
    max-width: 720px;
  }
  @media (min-width: 992px) {
    max-width: 960px;
  }
  @media (min-width: 1200px) {
    max-width: 1140px;
  }
}

.rounded-label {
  padding: 3px 10px;
  font-size: 0.8rem;
  border-radius: 100px;
  --fl-bg-opacity: .8;
  background-color: var(--fl-primary);
  color: var(--fl-light);
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.hover-shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.transition {
  transition: all 0.3s ease-in-out;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

.btn-secondary {
  --fl-btn-bg: #dce8fb;
  --fl-btn-hover-bg: #dce8fb;
  --fl-btn-hover-border-color: #d0dbec;
  --fl-btn-active-border-color: #d0dbec;
  --fl-btn-disabled-border-color: #d0dbec;
}

.dropdown-menu {
  --fl-dropdown-bg: #dce8fb;
}

.xmodal-content.show {
  padding-bottom: 1rem!important;
}

.xmodal-header.show .xmodal-header-text  {
  font-size: 1.5rem!important;
}

.employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.employee-card {
  display: grid;
  grid-template-rows: auto;
  height: max-content;
}

.employee-grid > .employee-card:only-child {
  grid-column: span 1;
  width: 50%;
  margin: 0 auto 0 0;
}

.employee-details {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: start;
}

@media (min-width: 640px) {
  .xmodal-header.show {
      padding: 12px 16px!important;
  }
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(var(--fl-primary-rgb), .5);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(var(--fl-primary-rgb), 0);
  }
}