@charset "UTF-8";
.dashboard-page {
  display: flex;
  height: 100vh; /* full screen */
  background-color: #f2f5fc;
  overflow: hidden;
}
.dashboard-page .side-nav {
  width: 300px; /* adjust as needed */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: hidden; /* prevents scrolling */
}
.dashboard-page .side-nav .nav-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 50px 20px;
  background-color: #f2f5fc;
}
.dashboard-page .side-nav .nav-content .item-holder {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.dashboard-page .side-nav .nav-content .item-holder .header-logo {
  width: 150px;
}
.dashboard-page .side-nav .nav-content .item-holder .link-holder {
  width: 100%;
  margin-top: 75px;
  color: black;
  text-decoration: none;
}
.dashboard-page .side-nav .nav-content .item-holder .link-item {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
  padding: 10px 15px;
  margin-bottom: 10px;
  color: black;
  text-decoration: none;
}
.dashboard-page .side-nav .nav-content .item-holder .link-item:hover {
  cursor: pointer;
  border-radius: 10px;
  background-color: #ffeca7;
}
.dashboard-page .side-nav .nav-content .item-holder .link-item .link-icon {
  margin-right: 20px;
}
.dashboard-page .side-nav .nav-content .item-holder .link-item .link-text {
  margin: 0;
}
.dashboard-page .side-nav .nav-content .item-holder .menu-separator {
  display: block;
  border-top: solid 2px gainsboro;
  margin-bottom: 10px;
  width: 90%;
}
.dashboard-page .side-nav .nav-content .item-holder .active {
  border-radius: 10px;
  background-color: #ffc700;
  font-weight: 500;
}
.dashboard-page .side-nav .nav-content .item-holder .btn-report {
  width: 100%;
  font-size: 18px;
  padding: 10px;
}
.dashboard-page .display-area {
  margin-left: 300px; /* same as sidebar width */
  width: calc(100% - 300px);
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: white;
  padding: 20px;
}
.dashboard-page .display-area .user-header-container {
  position: sticky;
  top: 20px;
  z-index: 10;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px gainsboro;
  padding: 10px 15px;
  border-radius: 15px;
  background-image: url("../images/yellow-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dashboard-page .display-area .user-header-container .header-group {
  display: flex;
}
.dashboard-page .display-area .user-header-container .header-group .btn-mobile-menu {
  display: none;
  background-color: transparent;
  border: none;
  font-size: 22px;
  color: black;
}
.dashboard-page .display-area .user-header-container .details-holder {
  display: flex;
  border: solid 1px #c5c5c5;
  justify-self: flex-end;
  align-items: center;
  background-color: white;
  width: fit-content;
  padding: 5px 15px;
  border-radius: 50px;
}
.dashboard-page .display-area .user-header-container .details-holder:hover {
  cursor: pointer;
  background-color: #28282b;
  color: white;
  text-shadow: 1px 1px #8f8f8f;
  border: solid 1px #28282b;
}
.dashboard-page .display-area .user-header-container .details-holder:hover .user-image {
  border: solid 1px #28282b;
}
.dashboard-page .display-area .user-header-container .details-holder .user-image {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 30px;
  margin-right: 10px;
  border: solid 1px white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.dashboard-page .display-area .user-header-container .details-holder .user-name-text {
  font-size: 15px;
  font-weight: 500;
  margin-right: 5px;
  text-transform: uppercase;
}
.dashboard-page .display-area .user-header-container .btn-settings {
  border: solid 1px #28282b;
  background-color: #28282b;
  color: white;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  margin-left: 10px;
}
.dashboard-page .display-area .user-header-container .btn-settings .fa-gear {
  transition: transform 0.4s ease;
}
.dashboard-page .display-area .user-header-container .btn-settings:hover {
  cursor: pointer;
  background-color: whitesmoke;
  color: #28282b;
}
.dashboard-page .display-area .user-header-container .btn-settings:hover .fa-gear {
  transform: rotate(180deg);
}
.dashboard-page .display-area .user-header-container .btn-logout {
  border: solid 1px #28282b;
  background-color: #28282b;
  color: white;
  height: 48px;
  width: 48px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  padding-right: 1px;
  margin-left: 10px;
}
.dashboard-page .display-area .user-header-container .btn-logout:hover {
  cursor: pointer;
  background-color: whitesmoke;
  color: #28282b;
}
.dashboard-page .display-area .content-holder .section-title {
  position: absolute;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.768627451);
  top: 25px;
  left: 25px;
  border-radius: 8px;
  padding: 5px 15px;
}
.dashboard-page .display-area .content-holder .section-title .title-text {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.dashboard-page .display-area .content-holder .section-title .fa-solid {
  margin-right: 5px;
}
.dashboard-page .display-area .content-holder .notification-section {
  height: 100%;
  width: 75%;
  padding-right: 20px;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder {
  position: relative;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper {
  height: 100%;
  border-radius: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper {
  height: 100%;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .image-holder {
  width: 100%;
  height: 100%;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .image-holder .announcement-cover {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .title-group {
  position: absolute;
  height: auto;
  background-color: transparent;
  z-index: 1;
  bottom: 0;
  padding: 30px 100px 50px 100px;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .title-group .announcement-title {
  margin: 0;
  font-size: 45px;
  font-weight: 500;
  color: white;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .title-group .announcement-text {
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  color: white;
  margin-bottom: 15px;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-wrapper .swiper-slide .title-group .notif-link {
  font-size: 18px;
  border-radius: 30px;
  padding: 8px 20px;
  font-weight: 500;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-next {
  right: 30px;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-prev {
  left: 30px;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-next, .dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-prev {
  background-color: rgba(255, 255, 255, 0.7803921569);
  width: 50px;
  height: 50px;
  border-radius: 50px;
  z-index: 10;
}
.dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-next::after, .dashboard-page .display-area .content-holder .notification-section .notification-holder .announcement-swiper .swiper-button-prev::after {
  font-size: 25px;
  font-weight: bold;
  color: black;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder {
  display: flex;
  height: 100%;
  padding-top: 20px;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info {
  height: 100%;
  width: 70%;
  background-color: red;
  margin-right: 20px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: left;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .image-holder {
  width: 100%;
  height: 100%;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .image-holder .marketing-cover {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .marketing-events-holder {
  position: absolute;
  height: auto;
  background-color: transparent;
  z-index: 1;
  bottom: 0;
  padding: 30px 60px 30px 30px;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .marketing-events-holder .event-tag {
  margin: 0;
  background-color: white;
  width: fit-content;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 15px;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .marketing-events-holder .event-title {
  font-size: 40px;
  font-weight: 500;
  margin: 0;
  color: white;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-info .marketing-events-holder .event-details {
  margin: 0;
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
}
.dashboard-page .display-area .content-holder .notification-section .marketing-holder .marketing-gallery {
  height: 100%;
  width: 30%;
  background-color: blue;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.dashboard-page .display-area .content-holder .monthly-section {
  height: 100%;
  width: 25%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder {
  display: flex;
  flex-direction: column;
  gap: 15px; /* space between children */
  height: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder {
  background-color: white;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) {
  flex: 1;
  height: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 15px;
  position: relative;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .image-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3490196078);
  pointer-events: none;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .image-holder .calendar-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .calendar-content-holder {
  position: absolute;
  padding: 20px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .calendar-content-holder .card-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-holder .calendar-content-holder .card-text {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 25px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-view-modal .modal-dialog {
  width: 100%;
  max-width: 1100px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-view-modal .modal-dialog .modal-content {
  padding: 15px;
  border-radius: 20px;
  position: relative;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-view-modal .modal-dialog .modal-content .calendar-btn-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: white;
  padding: 10px;
  border-radius: 25px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(1) .calendar-view-modal .modal-dialog .modal-content .wp-block-image {
  margin: 0px !important;
  border-radius: 15px;
  border: solid 1px #c5c5c5;
  overflow: hidden;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) {
  flex: 2;
  height: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .background-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3411764706);
  pointer-events: none;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-swiper {
  position: absolute;
  top: auto;
  width: 100%;
  height: 100%;
  padding: 0px 15px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-swiper .swiper-slide {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents {
  position: absolute;
  top: auto;
  width: 100%;
  padding: 0px 15px;
  margin-top: 20px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .greetings-label {
  font-family: "Pacifico", cursive;
  font-size: 40px;
  color: white;
  text-align: center;
  margin: 0;
  margin-bottom: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .celebrant-image {
  width: 100%;
  max-width: 180px;
  height: 180px;
  border-radius: 100%;
  border: solid 5px #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .celebrant-name {
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  font-weight: 500;
  margin: 15px 0px 20px 0px;
  color: white;
  line-height: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .message-content .msg-group {
  display: flex;
  width: 100%;
  padding: 0 20px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .message-content .msg-group .custom-form-input {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .birthday-holder .birthday-contents .message-content .msg-group .btn-send {
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .background-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3411764706);
  pointer-events: none;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .holiday-contents {
  position: absolute;
  color: white;
  z-index: 99;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .holiday-contents .holiday-label {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  border-bottom: solid 1px white;
  text-align: center;
  padding: 0px 15px;
  margin-bottom: 25px;
  padding-bottom: 10px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .holiday-contents .holiday-date {
  background-color: white;
  color: black;
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 8px;
  font-weight: 500;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .holiday-holder .holiday-contents .holiday-text {
  font-size: 16px;
  line-height: 26px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .payday-contents {
  position: absolute;
  padding: 20px;
  margin-bottom: 30px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .payday-contents .payday-logo {
  width: 150px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .payday-contents .payday-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .payday-contents .payday-text {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 30px;
  color: black;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .calendar-view-modal .modal-dialog {
  max-width: 600px;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .calendar-view-modal .modal-dialog .modal-content {
  border-radius: 15px;
  overflow: hidden;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .calendar-view-modal .modal-dialog .modal-content figure {
  margin: 0;
}
.dashboard-page .display-area .content-holder .monthly-section .monthly-holder .montly-item-holder:nth-child(2) .payday-holder .calendar-view-modal .modal-dialog .modal-content .btn-close {
  position: absolute;
  right: 20px;
  top: 18px;
  background-color: white;
  border: solid 1px gray;
  border-radius: 50px;
  padding: 8px;
}
.dashboard-page .display-area .viewable-content {
  display: flex;
  width: 100%;
  height: 100vh; /* full viewport height */
  gap: 20px; /* optional spacing between columns */
  padding-top: 20px;
}
.dashboard-page .display-area .viewable-content .left-content {
  display: flex;
  flex-direction: column; /* stack boxes vertically */
  gap: 20px;
  flex: 7.5;
}
.dashboard-page .display-area .viewable-content .right-content {
  display: flex;
  flex-direction: column; /* stack boxes vertically */
  gap: 20px;
  flex: 2.5;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box {
  display: flex; /* lets content stretch (like Swiper) */
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first {
  flex: 1;
  background: gainsboro;
  display: flex;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .content-box-first {
  flex: 1;
  display: flex;
  min-height: 0; /* important for flex containers */
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first #announcementCarousel {
  width: 100%;
  height: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first #announcementCarousel .carousel-control-next, .dashboard-page .display-area .viewable-content .content-wrapper .content-box-first #announcementCarousel .carousel-control-prev {
  width: 10%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first #announcementCarousel .carousel-control-prev-icon {
  background-color: rgba(255, 255, 255, 0.4588235294);
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-size: 70% 70%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first #announcementCarousel .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.4588235294);
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-size: 70% 70%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-inner {
  height: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item {
  height: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .image-holder {
  width: 100%;
  height: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .image-holder .announcement-cover {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .title-group {
  position: absolute;
  height: auto;
  background-color: transparent;
  z-index: 1;
  bottom: 0;
  padding: 30px 100px 50px 100px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .title-group .announcement-title {
  margin: 0;
  font-size: clamp(14px, 2vw, 45px);
  font-weight: 500;
  color: white;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .title-group .announcement-text {
  margin: 0;
  font-size: clamp(14px, 2vw, 18px);
  color: white;
  margin-bottom: 15px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-first .carousel-item .title-group .notif-link {
  font-size: 18px;
  border-radius: 30px;
  padding: 8px 20px;
  font-weight: 500;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second {
  flex: 1;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box {
  width: 100%;
  display: flex;
  gap: 20px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth {
  flex: 7;
  background: gainsboro;
  position: relative;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: left;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .image-holder {
  width: 100%;
  height: 100%;
  position: absolute;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: black;
  pointer-events: none;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .image-holder .marketing-cover {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder {
  position: absolute;
  height: 100%;
  background-color: transparent;
  z-index: 1;
  bottom: 0;
  padding: 40px 60px 20px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder .tag-holder {
  display: flex;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder .event-tag {
  margin: 0;
  background-color: white;
  width: fit-content;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 15px;
  margin-right: 10px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder .event-title {
  font-size: 40px;
  font-weight: 500;
  margin: 0;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder .event-details {
  margin: 0;
  color: white;
  font-size: 18px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-fifth .marketing-info .marketing-events-holder .event-link {
  font-size: 16px;
  text-transform: uppercase;
  padding: 5px 40px;
  border-radius: 40px;
  font-weight: 500;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth {
  flex: 3;
  background: gainsboro;
  position: relative;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .image-holder {
  position: absolute;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .image-holder .resources-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .suggestion-holder {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .suggestion-holder .suggestion-sub {
  margin: 0;
  background-color: white;
  padding: 3px 10px;
  border-radius: 50px;
  border: solid 1px gray;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 15px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .suggestion-holder .suggestion-title {
  font-size: 29px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  line-height: 35px;
  margin-bottom: 15px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .suggestion-holder .suggestion-text {
  margin-bottom: 20px;
  font-size: 16px;
  color: black;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-second .marketing-box .content-box-sixth .suggestion-holder .suggestion-btn {
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third {
  flex: 1;
  background: gainsboro;
  position: relative;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 15px;
  position: relative;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .image-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3490196078);
  pointer-events: none;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .image-holder .calendar-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .calendar-content-holder {
  position: absolute;
  padding: 20px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .calendar-content-holder .card-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-holder .calendar-content-holder .card-text {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 25px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-view-modal .modal-dialog {
  width: 100%;
  max-width: 1100px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-view-modal .modal-dialog .modal-content {
  padding: 15px;
  border-radius: 20px;
  position: relative;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-view-modal .modal-dialog .modal-content .calendar-btn-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background-color: white;
  padding: 10px;
  border-radius: 25px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-third .calendar-view-modal .modal-dialog .modal-content .wp-block-image {
  margin: 0px !important;
  border-radius: 15px;
  border: solid 1px #c5c5c5;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth {
  flex: 2;
  background: gainsboro;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .carousel {
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .background-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3411764706);
  pointer-events: none;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-swiper {
  position: absolute;
  top: auto;
  width: 100%;
  height: 100%;
  padding: 0px 15px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-swiper .swiper-slide {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents {
  position: absolute;
  top: auto;
  width: 100%;
  padding: 0px 15px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .greetings-label {
  font-family: "Pacifico", cursive;
  font-size: 40px;
  color: white;
  text-align: center;
  margin: 0;
  margin-bottom: 24px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .celebrant-image {
  width: 100%;
  max-width: 180px;
  height: 180px;
  border-radius: 100%;
  border: solid 5px #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .celebrant-name {
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  font-weight: 500;
  margin: 15px 0px 20px 0px;
  color: white;
  line-height: 30px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .message-content .msg-group {
  display: flex;
  width: 100%;
  padding: 0 20px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .message-content .msg-group .custom-form-input {
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .birthday-holder .birthday-contents .message-content .msg-group .btn-send {
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .background-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3411764706);
  pointer-events: none;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .holiday-contents {
  position: absolute;
  color: white;
  z-index: 99;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .holiday-contents .holiday-label {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  border-bottom: solid 1px white;
  text-align: center;
  padding: 0px 15px;
  margin-bottom: 25px;
  padding-bottom: 10px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .holiday-contents .holiday-date {
  background-color: white;
  color: black;
  font-size: 20px;
  padding: 5px 15px;
  border-radius: 8px;
  font-weight: 500;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .holiday-holder .holiday-contents .holiday-text {
  font-size: 16px;
  line-height: 26px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .background-holder {
  height: 100%;
  width: 100%;
  position: absolute;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .background-holder .bday-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .payday-contents {
  position: absolute;
  padding: 20px;
  margin-bottom: 30px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .payday-contents .payday-logo {
  width: 150px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .payday-contents .payday-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .payday-contents .payday-text {
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 30px;
  color: black;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .calendar-view-modal .modal-dialog {
  max-width: 600px;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .calendar-view-modal .modal-dialog .modal-content {
  border-radius: 15px;
  overflow: hidden;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .calendar-view-modal .modal-dialog .modal-content figure {
  margin: 0;
}
.dashboard-page .display-area .viewable-content .content-wrapper .content-box-forth .payday-holder .calendar-view-modal .modal-dialog .modal-content .btn-close {
  position: absolute;
  right: 20px;
  top: 18px;
  background-color: white;
  border: solid 1px gray;
  border-radius: 50px;
  padding: 8px;
}

/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .dashboard-page .side-nav {
    width: 280px;
  }
  .dashboard-page .side-nav .nav-content .item-holder .link-item {
    font-size: 18px;
  }
  .dashboard-page .display-area {
    margin-left: 280px;
    width: calc(100% - 280px);
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dashboard-page .side-nav {
    display: none;
  }
  .dashboard-page .side-nav .nav-content .item-holder .link-item {
    font-size: 18px;
  }
  .dashboard-page .display-area {
    margin-left: 0px;
    width: 100%;
    padding: 0px;
  }
  .dashboard-page .display-area .user-header-container {
    border: none;
    border-radius: 0px;
    top: 0px;
    height: 100px;
    padding: 15px 30px;
  }
  .dashboard-page .display-area .user-header-container .header-group .btn-mobile-menu {
    display: block;
  }
  .dashboard-page .display-area .user-header-container .header-group .header-logo {
    width: 100%;
    max-width: 120px;
  }
  .dashboard-page .display-area .user-header-container .header-group .hide-in-mobile {
    display: none;
  }
  .dashboard-page .display-area .viewable-content {
    padding: 30px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dashboard-page .side-nav {
    display: none;
  }
  .dashboard-page .side-nav .nav-content .item-holder .link-item {
    font-size: 18px;
  }
  .dashboard-page .display-area {
    margin-left: 0px;
    width: 100%;
    padding: 0px;
  }
  .dashboard-page .display-area .user-header-container {
    border: none;
    border-radius: 0px;
    top: 0px;
    height: 100px;
    padding: 15px 30px;
  }
  .dashboard-page .display-area .user-header-container .header-group .btn-mobile-menu {
    display: block;
  }
  .dashboard-page .display-area .user-header-container .header-group .header-logo {
    width: 100%;
    max-width: 120px;
  }
  .dashboard-page .display-area .user-header-container .header-group .hide-in-mobile {
    display: none;
  }
  .dashboard-page .display-area .viewable-content {
    padding: 30px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .dashboard-page .side-nav {
    display: none;
  }
  .dashboard-page .side-nav .nav-content .item-holder .link-item {
    font-size: 18px;
  }
  .dashboard-page .display-area {
    margin-left: 0px;
    width: 100%;
    padding: 0px;
  }
  .dashboard-page .display-area .user-header-container {
    border: none;
    border-radius: 0px;
    top: 0px;
    height: 100px;
    padding: 15px 30px;
  }
  .dashboard-page .display-area .user-header-container .header-group .btn-mobile-menu {
    display: block;
  }
  .dashboard-page .display-area .user-header-container .header-group .header-logo {
    width: 100%;
    max-width: 120px;
  }
  .dashboard-page .display-area .user-header-container .header-group .hide-in-mobile {
    display: none;
  }
  .dashboard-page .display-area .viewable-content {
    padding: 30px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .dashboard-page .side-nav {
    display: none;
  }
  .dashboard-page .side-nav .nav-content .item-holder .link-item {
    font-size: 18px;
  }
  .dashboard-page #mobileNavOffcanvas {
    width: 100%;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-header {
    padding: 20px 25px;
    background-color: #28282b;
    color: white;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body {
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body .link-holder .link-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    text-decoration: none;
    color: black;
    height: 50px;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body .link-holder .link-item .fa-solid {
    display: none;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body .link-holder .link-item .link-text {
    margin: 0;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body .link-bottom {
    width: 100%;
  }
  .dashboard-page #mobileNavOffcanvas .offcanvas-body .link-bottom .btn-logout {
    width: 100%;
  }
  .dashboard-page .display-area {
    margin-left: 0px;
    width: 100%;
    padding: 0px;
  }
  .dashboard-page .display-area .user-header-container {
    border: none;
    border-radius: 0px;
    top: 0px;
    height: 100px;
    padding: 13px 30px;
  }
  .dashboard-page .display-area .user-header-container .header-group .btn-mobile-menu {
    display: block;
  }
  .dashboard-page .display-area .user-header-container .header-group .header-logo {
    width: 100%;
    max-width: 100px;
  }
  .dashboard-page .display-area .user-header-container .header-group .hide-in-mobile {
    display: none;
  }
  .dashboard-page .display-area .viewable-content {
    padding: 15px;
  }
}
.single-resources-page .content-resources {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none; /* IE & Edge */
  scrollbar-width: none; /* Firefox */
  padding-bottom: 50px;
  /* WebKit browsers (Chrome, Edge, Safari) */
  /*
   * Mobile
   */
}
.single-resources-page .content-resources::-webkit-scrollbar {
  display: none; /* hide scrollbar */
}
.single-resources-page .content-resources .pdf-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  user-select: text;
  -webkit-user-select: text;
}
.single-resources-page .content-resources .pdf-page {
  position: relative;
  width: 100%;
  margin: 0 auto 20px;
}
.single-resources-page .content-resources .pdf-canvas {
  display: block;
  position: relative;
  z-index: 1;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.single-resources-page .content-resources .textLayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  line-height: 1;
  pointer-events: auto;
}
.single-resources-page .content-resources .textLayer span,
.single-resources-page .content-resources .textLayer br {
  position: absolute;
  white-space: pre;
  color: transparent;
  cursor: text;
  transform-origin: 0% 0%;
}
.single-resources-page .content-resources .textLayer ::selection {
  background: rgba(0, 0, 255, 0.2);
}
.single-resources-page .content-resources .pdf-error {
  padding: 20px;
  text-align: center;
}
@media (max-width: 767px) {
  .single-resources-page .content-resources .pdf-container {
    width: 100%;
    overflow-x: hidden;
  }
  .single-resources-page .content-resources .pdf-page {
    margin-bottom: 15px;
  }
  .single-resources-page .content-resources .pdf-canvas {
    width: 100% !important;
    height: auto !important;
  }
}
.single-resources-page .content-resources .resources-wrapper-pdf {
  position: relative;
}
.single-resources-page .content-resources .resources-wrapper-pdf .btn-back {
  padding: 2px 10px;
  font-size: 15px;
  border-radius: 10px;
  position: absolute;
  top: 20px;
  left: 40px;
}
.single-resources-page .content-resources .resources-wrapper-pdf .resources-title {
  font-size: clamp(20px, 2vw, 45px);
  font-weight: 700;
  text-align: center;
  margin-top: 50px;
}
.single-resources-page .content-resources .resources-wrapper-pdf .resouces-download {
  text-align: center;
  width: fit-content;
  display: block;
  margin: 0 auto;
}
.single-resources-page .content-resources .resources-wrapper-pdf .post-content-pdf {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 50px;
  margin-bottom: 100px;
}
.single-resources-page .content-resources .resources-wrapper-pdf .post-content-pdf canvas {
  width: 100%;
  border: solid 1px black;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.single-resources-page .content-resources .resources-wrapper {
  border: solid 1px #cbcbcb;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 5px;
  padding: 50px;
  margin-top: 30px;
  background-color: white;
  border-top: solid 8px #ffc700;
  position: relative;
}
.single-resources-page .content-resources .resources-wrapper .btn-back {
  padding: 2px 10px;
  font-size: 15px;
  border-radius: 10px;
  position: absolute;
  top: 20px;
  left: 40px;
}
.single-resources-page .content-resources .resources-wrapper .resources-title {
  font-size: clamp(25px, 2vw, 45px);
  line-height: clamp(25px, 2vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 55px;
}
.single-resources-page .content-resources .resources-wrapper .post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
}
.single-resources-page .content-resources .resources-wrapper .post-content p {
  font-size: 16px;
  margin-bottom: 15px;
}
.single-resources-page .content-resources .resources-wrapper .post-content li {
  font-size: 16px;
  margin-bottom: 0px;
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .single-resources-page .resources-view-content {
    padding: 0px !important;
  }
  .single-resources-page .content-resources {
    padding-bottom: 0px;
  }
  .single-resources-page .content-resources .resources-wrapper-pdf {
    padding: 30px 15px;
  }
  .single-resources-page .content-resources .resources-wrapper-pdf .resources-title {
    margin-top: 0px;
  }
  .single-resources-page .content-resources .resources-wrapper-pdf .resouces-download button {
    font-size: 14px;
  }
  .single-resources-page .content-resources .resources-wrapper {
    padding: 25px;
    margin-top: 0px;
    border-top: 0px;
  }
  .single-resources-page .content-resources .resources-wrapper .btn-back {
    font-size: 13px;
    top: 15px;
    left: 15px;
  }
  .single-resources-page .content-resources .resources-wrapper .post-content p {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .single-resources-page .content-resources .resources-wrapper .post-content li {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
/* Medium devices (tablets, ≥768px and <992px) */
/* Small devices (landscape phones, ≥576px and <768px) */
/* Extra small devices (portrait phones, less than 576px) */
.single-forms-page .hide {
  display: none;
}
.single-forms-page .content-forms {
  width: 100%;
  padding-bottom: 100px;
  /* WebKit browsers (Chrome, Edge, Safari) */
}
.single-forms-page .content-forms::-webkit-scrollbar {
  display: none; /* hide scrollbar */
}
.single-forms-page .content-forms .support-wrapper {
  border: solid 1px #cbcbcb;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 5px;
  padding: 40px 50px 40px 40px;
  margin-top: 30px;
  border-top: solid 8px #ffc700;
  background-color: white;
  position: relative;
}
.single-forms-page .content-forms .support-wrapper .control-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.single-forms-page .content-forms .support-wrapper .control-group .btn-back {
  padding: 2px 10px;
  font-size: 15px;
  border-radius: 10px;
}
.single-forms-page .content-forms .support-wrapper .control-group .btn-back .fa-solid {
  margin-right: 5px;
}
.single-forms-page .content-forms .support-wrapper .control-group .form-category {
  font-size: 15px;
  background-color: #28282b;
  padding: 2px 20px;
  border-radius: 30px;
  margin-bottom: 0px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  color: white;
  width: fit-content;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-hr {
  background-color: #ffd200;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-recruitment {
  background-color: cornflowerblue;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-payroll {
  background-color: #096314;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-clinic {
  background-color: #34dd34;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-information-technology {
  background-color: #858585;
  color: white;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-benefits {
  background-color: goldenrod;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-marketing {
  background-color: #b557b7;
}
.single-forms-page .content-forms .support-wrapper .control-group .category-account-manager {
  background-color: #464699;
}
.single-forms-page .content-forms .support-wrapper .form-title {
  font-size: clamp(25px, 2vw, 45px);
  line-height: clamp(25px, 2vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 55px;
}
.single-forms-page .content-forms .support-wrapper .post-content br {
  display: none;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text {
  margin-bottom: 30px;
  border-bottom: solid 2px gainsboro;
  padding-bottom: 30px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text p {
  font-size: 16px;
  margin-bottom: 15px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text .no-margin {
  margin: 0px !important;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text h5 {
  margin-bottom: 15px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text ul {
  margin-bottom: 30px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text li {
  font-size: 16px;
  margin-bottom: 3px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-text .wp-block-preformatted {
  font-size: 16px;
  color: black;
  font-family: inherit;
  background-color: #e5e5e5;
  padding: 15px 30px;
  margin-bottom: 15px;
  border-left: solid 10px red;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form {
  /* Style the placeholder */
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form p {
  margin: 0;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .form-label {
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 500;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .form-control {
  font-size: 18px;
  padding: 10px 15px;
  border: solid 1px #cbcbcb;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form textarea::placeholder {
  color: #bfbfbf;
  font-size: 16px; /* Smaller font */
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .flatpickr-time {
  height: 50px !important;
  text-align: left !important;
  max-height: 50px !important;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .label-subtext {
  font-size: 16px;
  color: #8b8b8b;
  font-style: italic;
  margin-bottom: 10px;
  margin-top: -5px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .default-value {
  pointer-events: none;
  cursor: not-allowed;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .privacy-policy-text {
  font-size: 18px;
  margin-bottom: 5px;
  margin-top: 50px;
  text-align: center;
  font-weight: 500;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .form-input {
  margin-bottom: 15px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7-spinner {
  display: none;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .btn {
  width: 100%;
  margin-top: 40px;
  font-size: 18px;
  padding: 10px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 .wpcf7-response-output {
  margin: 25px 0 0;
  padding: 18px 25px;
  border-radius: 5px;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  font-weight: 500;
  background: #fafafa;
  border: 1px solid #e5e5e5;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.sent .wpcf7-response-output {
  background: #f6f8f2;
  border: 1px solid #a8b88a;
  color: #46552d;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.sent .wpcf7-response-output:before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.failed .wpcf7-response-output {
  background: #fff6f5;
  border: 1px solid #d88b82;
  color: #8b332c;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.failed .wpcf7-response-output:before {
  content: "\f057";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.invalid .wpcf7-response-output,
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.unaccepted .wpcf7-response-output {
  background: #fff9ed;
  border: 1px solid #d8b25c;
  color: #7a5b13;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.invalid .wpcf7-response-output:before,
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.unaccepted .wpcf7-response-output:before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.spam .wpcf7-response-output {
  background: #fff4f4;
  border: 1px solid #d66;
  color: #8b0000;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 form.spam .wpcf7-response-output:before {
  content: "\f05e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: #b33a32;
  font-size: 14px;
  font-weight: 500;
}
.single-forms-page .content-forms .support-wrapper .post-content .info-form .wpcf7 .wpcf7-not-valid-tip:before {
  content: "\f06a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 6px;
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .single-forms-page .content-forms {
    padding-bottom: 80px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .single-forms-page .content-forms {
    padding-bottom: 60px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .single-forms-page .single-forms-view-content {
    padding: 0px !important;
  }
  .single-forms-page .content-forms {
    padding-bottom: 0px;
  }
  .single-forms-page .content-forms .support-wrapper {
    padding: 30px 20px 30px 20px;
    margin-top: 0px;
    border-top: 0px;
  }
  .single-forms-page .content-forms .support-wrapper .control-group .btn-back {
    font-size: 13px;
  }
  .single-forms-page .content-forms .support-wrapper .control-group .form-category {
    font-size: 13px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content {
    margin-bottom: 80px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text {
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text p {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text li {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text ul {
    margin-bottom: 15px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text h5 {
    margin-bottom: 10px;
    font-size: 16px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-text .wp-block-preformatted {
    font-size: 13px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-form .form-label {
    font-size: 15px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-form .label-subtext {
    font-size: 12px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-form .form-control {
    font-size: 16px;
    padding: 7px 10px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-form .privacy-policy-text {
    font-size: 15px;
    margin-bottom: 5px;
    margin-top: 30px;
  }
  .single-forms-page .content-forms .support-wrapper .post-content .info-form .btn {
    width: 100%;
    margin-top: 20px;
    font-size: 14px;
    padding: 8px;
  }
}
.single-gallery-page .viewable-content {
  padding-right: 50px;
  padding-left: 50px;
}
.single-gallery-page .content-gallery {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none; /* IE & Edge */
  scrollbar-width: none; /* Firefox */
  padding-bottom: 150px;
  /* WebKit browsers (Chrome, Edge, Safari) */
}
.single-gallery-page .content-gallery::-webkit-scrollbar {
  display: none; /* hide scrollbar */
}
.single-gallery-page .content-gallery .gallery-wrapper {
  width: 100%;
  margin-top: 45px;
}
.single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo {
  border-radius: 5px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .default-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .title-group-info {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: transparent;
  z-index: 1;
  bottom: 0;
  padding: 40px 60px 20px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0px;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-date {
  background-color: white;
  font-size: 20px;
  padding: 5px 20px;
  border-radius: 50px;
  font-weight: 500;
}
.single-gallery-page .btn-top {
  width: fit-content;
  display: flex;
  align-self: center;
  justify-self: center;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 35px;
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .single-gallery-page .content-gallery .gallery-wrapper {
    margin-top: 10px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo {
    height: 200px;
    margin-bottom: 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .title-group-info {
    padding: 20px 20px 20px 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-title {
    font-size: 35px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-date {
    font-size: 18px;
    padding: 3px 25px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .single-gallery-page .content-gallery {
    padding-bottom: 40px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper {
    margin-top: 10px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo {
    height: 200px;
    margin-bottom: 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .title-group-info {
    padding: 20px 20px 20px 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-title {
    font-size: 35px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-date {
    font-size: 18px;
    padding: 3px 25px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .single-gallery-page .content-gallery {
    padding-bottom: 60px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper {
    margin-top: 10px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo {
    height: 200px;
    margin-bottom: 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .title-group-info {
    padding: 20px 20px 20px 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-title {
    font-size: 30px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-date {
    font-size: 16px;
    padding: 3px 25px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .single-gallery-page .content-gallery {
    padding-bottom: 80px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper {
    margin-top: 0px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo {
    height: 170px;
    margin-bottom: 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .title-group-info {
    padding: 20px 20px 20px 20px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-title {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 5px;
  }
  .single-gallery-page .content-gallery .gallery-wrapper .gallery-cover-photo .gallery-date {
    font-size: 13px;
    padding: 3px 25px;
  }
  .single-gallery-page .content-gallery .wp-lightbox-navigation-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .single-gallery-page .btn-top {
    padding: 8px 35px;
    font-size: 13px;
  }
}
.resources-page .resources-view-content {
  display: flex;
  align-items: flex-start;
}
.resources-page .resources-view-content .content-resources {
  width: 100%;
}
.resources-page .resources-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.resources-page .resources-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.resources-page .resources-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.resources-page .resources-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.resources-page .resources-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.resources-page .resources-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.resources-page .resources-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.resources-page .resources-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.resources-page .resources-view-content .resources-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  position: relative;
  width: 100%;
  margin: 0px auto;
  margin-bottom: 50px;
}
.resources-page .resources-view-content .resources-wrapper .resources-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  border: solid 1px gainsboro;
  color: black;
  text-decoration: none;
}
.resources-page .resources-view-content .resources-wrapper .resources-card .thumbnail-holder {
  height: 150px;
}
.resources-page .resources-view-content .resources-wrapper .resources-card .thumbnail-holder .thumbnail-cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}
.resources-page .resources-view-content .resources-wrapper .resources-card .resources-title-group {
  padding: 15px 20px;
  height: 170px;
}
.resources-page .resources-view-content .resources-wrapper .resources-card .resources-title-group .resources-title {
  font-size: 20px;
  line-height: 23px;
  font-weight: 500;
  color: black;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resources-page .resources-view-content .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
  font-size: 16px;
  color: #6d6d6d;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resources-page .resources-view-content .pagination-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 50px;
}
.resources-page .resources-view-content .pagination-wrapper .page-numbers {
  background-color: white;
  border: solid 1px #d3d3d3;
  font-size: 16px;
  margin: 0px 2px;
  padding: 5px 10px;
  color: black;
  text-decoration: none;
  border-radius: 5px;
}
.resources-page .resources-view-content .pagination-wrapper .current {
  background-color: #ffc700;
}

/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1400px) and (max-width: 1699.98px) {
  .resources-page .content-resources .title-group .page-title {
    font-size: 35px;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: 310px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 130px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 20px;
    line-height: 23px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 16px;
  }
}
/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .resources-page .resources-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .resources-page .content-resources .title-group .page-title {
    font-size: 35px;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: 310px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 130px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 20px;
    line-height: 23px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 16px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .resources-page .resources-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .resources-page .content-resources {
    padding-top: 0px;
    padding-bottom: 50px;
  }
  .resources-page .content-resources .title-group .page-title {
    font-size: 35px;
    margin-bottom: 0;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: 300px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 120px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 10px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 16px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .resources-page .resources-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .resources-page .content-resources {
    padding-top: 0px;
    padding-bottom: 50px;
  }
  .resources-page .content-resources .title-group {
    margin-bottom: 30px;
  }
  .resources-page .content-resources .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .resources-page .content-resources .title-group .search-bar-group {
    max-width: 350px;
  }
  .resources-page .content-resources .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: 295px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 120px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group {
    padding: 15px 20px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 10px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 16px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .resources-page .content-resources {
    padding-top: 0px;
    padding-bottom: 50px;
  }
  .resources-page .content-resources .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .resources-page .content-resources .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .resources-page .content-resources .title-group .search-bar-group {
    max-width: 100%;
  }
  .resources-page .content-resources .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: 295px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 100px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group {
    padding: 15px 20px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 10px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 14px;
    -webkit-line-clamp: 4;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .resources-page .content-resources {
    padding-top: 0px;
    padding-bottom: 100px;
    padding-right: 10px;
    padding-left: 10px;
  }
  .resources-page .content-resources .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .resources-page .content-resources .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .resources-page .content-resources .title-group .search-bar-group {
    max-width: 100%;
  }
  .resources-page .content-resources .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .resources-page .content-resources .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .resources-page .content-resources .resources-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    margin-bottom: 20px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card {
    height: auto;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .thumbnail-holder {
    height: 100px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group {
    padding: 15px 20px;
    height: auto;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-title {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 5px;
  }
  .resources-page .content-resources .resources-wrapper .resources-card .resources-title-group .resources-excerpt {
    font-size: 14px;
    -webkit-line-clamp: 5;
    padding-bottom: 20px;
  }
}
.gallery-page .gallery-view-content {
  display: flex;
  align-items: flex-start;
}
.gallery-page .gallery-view-content .content-gallery {
  width: 100%;
}
.gallery-page .gallery-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.gallery-page .gallery-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.gallery-page .gallery-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.gallery-page .gallery-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gallery-page .gallery-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.gallery-page .gallery-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.gallery-page .gallery-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.gallery-page .gallery-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.gallery-page .gallery-view-content .gallery-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper {
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
  background-color: gainsboro;
  width: 100%;
  height: 470px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide:hover {
  cursor: pointer;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide:hover .thumbnail-holder .album-thumbnail {
  scale: 1.1;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .thumbnail-holder {
  height: 100%;
  width: 100%;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .thumbnail-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .thumbnail-holder .album-thumbnail {
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .tag-holder {
  position: absolute;
  top: 20px;
  right: 20px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .tag-holder .latest-tag {
  background-color: white;
  font-size: 16px;
  color: black;
  border-radius: 50px;
  padding: 3px 15px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group {
  position: absolute;
  z-index: 9;
  bottom: 10px;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 0px 20px;
  height: 120px;
  width: 100%;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-title {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 28px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: -webkit-fill-available;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-date {
  font-size: 12px;
  margin-bottom: 5px;
  background-color: white;
  color: black;
  width: max-content;
  padding: 2px 10px;
  border-radius: 10px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-date .fa-solid {
  margin-right: 10px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons {
  position: relative;
  display: flex;
  bottom: -50px;
  justify-content: flex-end;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-disabled {
  opacity: 0.4 !important;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next {
  position: relative;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #ffc700;
  width: 50px;
  height: 50px;
  color: white;
  opacity: 1;
  border-radius: 50px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next::after {
  font-size: 25px;
  font-weight: bold;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev {
  position: relative;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #ffc700;
  width: 50px;
  height: 50px;
  color: white;
  opacity: 1;
  border-radius: 50px;
  margin-right: 20px;
}
.gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev::after {
  font-size: 25px;
  font-weight: bold;
}
.gallery-page .gallery-view-content .recent-album {
  border-top: solid 3px gainsboro;
  padding-top: 40px;
  margin-top: 20px;
  margin-bottom: 100px;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 99%;
  padding: 70px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 5px;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .recent-album-post-title {
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .album-date {
  text-transform: uppercase;
  width: max-content;
  margin: 0 auto;
  background-color: whitesmoke;
  padding: 2px 20px;
  font-size: 16px;
  border-radius: 30px;
  margin-top: 5px;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .album-date .fa-solid {
  margin-right: 10px;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-content img {
  padding: 5px;
  border-radius: 8px;
}
.gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .btn-top {
  width: fit-content;
  display: flex;
  align-self: center;
  justify-self: center;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 35px;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
    height: 400px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gallery-page .gallery-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
    height: 400px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery-page .gallery-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .gallery-page .gallery-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group {
    max-width: 350px;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
    height: 300px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group {
    padding: 0px 15px;
    height: 80px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 20px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .gallery-page .gallery-view-content .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .gallery-page .gallery-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
    height: 300px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group {
    padding: 0px 15px;
    height: 80px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 20px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next::after {
    font-size: 20px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev::after {
    font-size: 20px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post {
    width: 100%;
    padding: 30px 10px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .recent-album-post-title {
    font-size: 25px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .album-date {
    font-size: 14px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-content img {
    padding: 0px;
    border-radius: 5px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .gallery-page .gallery-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .gallery-page .gallery-view-content .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .gallery-page .gallery-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper {
    padding-bottom: 60px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide {
    height: 350px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group {
    padding: 0px 15px;
    justify-content: flex-end;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .swiper-wrapper .swiper-slide .album-title-group .album-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 20px;
    height: auto;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next {
    width: 40px;
    height: 40px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-next::after {
    font-size: 20px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
  .gallery-page .gallery-view-content .gallery-wrapper .gallery-swiper .custom-nav-buttons .swiper-button-prev::after {
    font-size: 20px;
  }
  .gallery-page .gallery-view-content .recent-album {
    margin-bottom: 100px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post {
    width: 100%;
    padding: 55px 10px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .recent-album-post-title {
    font-size: 18px;
    line-height: 18px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-post .album-date {
    font-size: 12px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .btn-top {
    padding: 8px 35px;
    font-size: 13px;
  }
  .gallery-page .gallery-view-content .recent-album .recent-album-wrapper .recent-album-holder .recent-album-content img {
    padding: 0px;
    border-radius: 5px;
  }
}
.calendar-page .calendar-view-content .legends-reminder {
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 100px;
  background-color: white;
  padding: 10px 30px;
  border: solid 1px #e3e3e3;
  border-radius: 10px;
  font-size: 16px;
}
.calendar-page .calendar-view-content .legends-reminder .fa-solid {
  margin-right: 8px;
}
.calendar-page .calendar-view-content .event-legends {
  display: none;
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .event-legends-label {
  text-align: center;
  font-size: 25px;
  font-weight: 500;
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 880px;
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card {
  border: solid 1px #d1d1d1;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: white;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card:hover {
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card .legend-title {
  width: 100%;
  padding: 5px 5px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card .fa-solid {
  padding: 20px 5px;
  font-size: 20px;
}
.calendar-page .calendar-view-content .content-calendar {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 100px;
}
.calendar-page .calendar-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.calendar-page .calendar-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.calendar-page .calendar-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.calendar-page .calendar-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar-page .calendar-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.calendar-page .calendar-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.calendar-page .calendar-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.calendar-page .calendar-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-toolbar-title {
  text-transform: uppercase;
  font-size: 30px;
  margin-bottom: 15px;
  font-weight: bold;
  text-transform: uppercase;
}
.calendar-page .calendar-view-content .calendar-wrapper a {
  color: black;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event-custom {
  font-size: 15px;
  padding: 2px 0px;
  overflow: hidden;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event-custom:hover {
  cursor: pointer;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event-custom i {
  margin-left: 10px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-daygrid-day-frame {
  min-height: 200px;
  max-height: 200px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-scroller {
  overflow: visible !important;
  height: auto !important;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-scrollgrid-section-sticky {
  position: relative !important;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-scrollgrid-section-sticky > *,
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-col-header,
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-col-header-cell {
  position: relative !important;
  top: auto !important;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-day-sat,
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-day-sun {
  background-color: #fcfcfc;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-col-header .fc-day {
  background-color: #333351;
  padding: 5px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-col-header .fc-day a {
  color: white !important;
  text-transform: uppercase;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-day-today {
  background-color: transparent;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-day-today .fc-daygrid-day-number {
  background-color: #ffc700;
  padding-left: 13px;
  padding-right: 10px;
  color: white;
  font-weight: 500;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc {
  background-color: #f4f6f9;
  border-radius: 12px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-view-harness {
  background-color: #ffffff;
  border-radius: 10px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc .fc-toolbar {
  background-color: transparent;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.birthday i {
  color: black;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.birthday span {
  color: black;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.company_event {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffc700, #444);
  border: none !important;
  padding: 5px 0px !important;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.company_event .fa-star {
  color: white;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.company_event span {
  font-weight: 500;
  color: white;
}
.calendar-page .calendar-view-content .calendar-wrapper .fc-event.company_event::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: companyEventShine 3s infinite;
}
@keyframes companyEventShine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
.calendar-page .modal-view-event-details .modal-dialog {
  max-width: 750px;
  padding: 0px 15px;
}
.calendar-page .modal-view-event-details .modal-body {
  position: relative;
  padding: 0px;
}
.calendar-page .modal-view-event-details .modal-body .body-wrapper {
  padding: 15px;
}
.calendar-page .modal-view-event-details .modal-body .modal-event-category {
  position: absolute;
  top: 25px;
  right: 25px;
  background-color: white;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.calendar-page .modal-view-event-details .modal-body .modal-event-date {
  position: absolute;
  top: 25px;
  left: 25px;
  background-color: white;
  padding: 2px 10px;
  border-radius: 30px;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.calendar-page .modal-view-event-details .modal-body #eventModalContent {
  font-size: 16px;
  padding: 10px 10px;
  line-height: 26px;
}
.calendar-page .modal-view-event-details .modal-body .wp-block-buttons {
  margin-top: 10px;
  margin-bottom: 10px;
}
.calendar-page .modal-view-event-details .modal-body .wp-block-buttons .wp-block-button {
  width: 100%;
  text-align: center;
}
.calendar-page .modal-view-event-details .modal-body .wp-block-buttons .wp-block-button a {
  width: 100%;
  display: block;
}
.calendar-page .modal-view-birthday-details .modal-dialog {
  max-width: 900px;
  padding: 0px 15px;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content {
  border-radius: 20px;
  overflow: hidden;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .btn-close {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: rgba(0, 0, 0, 0.3215686275);
  z-index: 9;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body {
  height: 500px;
  background-color: white;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder {
  display: flex;
  width: 100%;
  height: 100%;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-first {
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  padding-left: 10px;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-second {
  font-size: 80px;
  font-weight: bold;
  line-height: 70px;
  color: #ffc700;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
  background-color: #28282b;
  color: white;
  margin-top: 15px;
  font-size: 20px;
  padding: 2px 15px;
  border-radius: 50px;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
  font-size: 18px;
  line-height: 24px;
  margin-top: 25px;
  border-top: solid 1px gray;
  padding-top: 15px;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
  width: 40%;
}
.calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image #birthdayModalImage {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 15px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog {
  max-width: 900px;
  padding: 0px 15px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content {
  border-radius: 20px;
  overflow: hidden;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .btn-close {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: white;
  z-index: 9;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body {
  height: 500px;
  background-color: #28282b;
  color: white;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder {
  display: flex;
  width: 100%;
  height: 100%;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-first {
  font-size: 30px;
  font-weight: 500;
  line-height: 30px;
  padding-left: 10px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-second {
  font-size: 60px;
  font-weight: bold;
  line-height: 50px;
  color: #ffc700;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
  background-color: white;
  color: black;
  margin-top: 15px;
  font-size: 20px;
  padding: 2px 15px;
  border-radius: 50px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
  font-size: 18px;
  line-height: 24px;
  margin-top: 25px;
  border-top: solid 1px gray;
  padding-top: 15px;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
  width: 40%;
}
.calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image #anniversaryModalImage {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 15px;
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .calendar-page .calendar-view-content .calendar-wrapper .fc-event-custom {
    font-size: 14px;
    padding: 0px 0px;
  }
  .calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder {
    gap: 10px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .calendar-page .calendar-view-content .calendar-wrapper .fc-list-table {
    overflow: hidden;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc .fc-list-sticky .fc-list-day > * {
    background: var(--fc-page-bg-color);
    position: relative;
    top: 0px;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc-theme-standard .fc-list-day-cushion {
    background-color: gainsboro;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc .fc-list-event-time {
    display: none !important;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog {
    max-width: 475px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .btn-close {
    left: auto;
    right: 15px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body {
    height: auto;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder {
    flex-direction: column-reverse;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
    width: 100%;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group {
    display: flex;
    margin: 0 auto;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-first {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
    color: black;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-second {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
    color: black;
    margin-left: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
    margin: 0 auto;
    margin-top: 10px;
    font-size: 16px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
    font-size: 16px;
    line-height: 21px;
    margin-top: 20px;
    padding-top: 10px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog {
    max-width: 475px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .btn-close {
    left: auto;
    right: 15px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body {
    height: auto;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder {
    flex-direction: column-reverse;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
    width: 100%;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group {
    display: flex;
    margin: 0 auto;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-first {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
    color: white;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-second {
    font-size: 25px;
    font-weight: bold;
    line-height: 30px;
    color: white;
    margin-left: 10px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
    margin: 0 auto;
    margin-top: 10px;
    font-size: 16px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
    font-size: 16px;
    line-height: 21px;
    margin-top: 20px;
    padding-top: 10px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 14px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .calendar-page .calendar-view-content .content-calendar {
    margin-top: 0px;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc-toolbar-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc-list-table {
    overflow: hidden;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc .fc-list-sticky .fc-list-day > * {
    background: var(--fc-page-bg-color);
    position: relative;
    top: 0px;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc-theme-standard .fc-list-day-cushion {
    background-color: gainsboro;
  }
  .calendar-page .calendar-view-content .calendar-wrapper .fc .fc-list-event-time {
    display: none !important;
  }
  .calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    border-top: solid 1px gray;
    padding-top: 20px;
    margin-top: 40px;
  }
  .calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card .fa-solid {
    padding: 15px 5px;
  }
  .calendar-page .calendar-view-content .event-legends .legends-wrapper .legends-holder .legend-card .legend-title {
    padding: 3px 5px;
    font-size: 12px;
  }
  .calendar-page .calendar-view-content .legends-reminder {
    margin-bottom: 20px;
    padding: 10px 15px;
    font-size: 12px;
    line-height: 17px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog {
    max-width: 475px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .btn-close {
    left: auto;
    right: 15px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body {
    height: auto;
    padding: 25px 15px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder {
    flex-direction: column-reverse;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
    width: 100%;
    padding: 10px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    text-align: center;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-first {
    padding-left: 0px;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: black;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-second {
    margin-left: 0px;
    font-size: 50px;
    line-height: 40px;
    font-weight: bold;
    color: #ffc700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
    font-size: 14px;
    line-height: 19px;
    margin-top: 20px;
    padding-top: 10px;
  }
  .calendar-page .modal-view-birthday-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog {
    max-width: 475px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .btn-close {
    left: auto;
    right: 15px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body {
    height: auto;
    padding: 25px 15px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder {
    flex-direction: column-reverse;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info {
    width: 100%;
    padding: 10px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    text-align: center;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-first {
    padding-left: 0px;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: white;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .celebrant-group .greetings-text-second {
    margin-left: 0px;
    font-size: 40px;
    line-height: 30px;
    font-weight: bold;
    color: #ffc700;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-third {
    margin: 0 auto;
    margin-top: 20px;
    font-size: 14px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-info .greetings-text-forth {
    font-size: 14px;
    line-height: 19px;
    margin-top: 20px;
    padding-top: 10px;
  }
  .calendar-page .modal-view-anniversary-details .modal-dialog .modal-content .modal-body .greetings-holder .greetings-image {
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .calendar-page .modal-view-event-details .modal-dialog {
    padding: 0px 0px;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 14px;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-body .modal-event-category {
    font-size: 12px;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-body .body-wrapper .image-thumbnail-holder {
    height: 230px;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-body .body-wrapper .image-thumbnail-holder #eventModalImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-body #eventModalContent {
    padding: 5px 0px 15px 0px;
    font-size: 14px;
    line-height: 19px;
  }
  .calendar-page .modal-view-event-details .modal-dialog .modal-content .modal-body .wp-block-buttons .wp-block-button a {
    width: 100%;
    display: block;
    margin-top: 15px;
  }
}
.tickets-page .ticket-contents {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 150px;
  padding-top: 50px;
}
.tickets-page .ticket-contents .title-group {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.tickets-page .ticket-contents .title-group .page-title {
  font-size: 45px;
  font-weight: 600;
}
.tickets-page .ticket-contents .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.tickets-page .ticket-contents .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tickets-page .ticket-contents .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.tickets-page .ticket-contents .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.tickets-page .ticket-contents .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.tickets-page .ticket-contents .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.tickets-page .ticket-contents .all-tickets-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper {
  font-size: 18px;
  border: solid 1px gainsboro;
  padding: 30px;
  border-radius: 25px;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper .row:first-child {
  margin-bottom: 15px;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper .row:first-child select {
  width: 60px;
  padding: 5px 10px;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper .row:first-child #tickets-table_filter input {
  width: 390px;
  font-size: 18px;
  padding: 5px 15px;
  border-radius: 20px;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper .paginate_button {
  padding: 0px;
}
.tickets-page .ticket-contents .all-tickets-wrapper #tickets-table_wrapper .paginate_button:hover {
  background-color: transparent !important;
  background: transparent;
  border: none;
}
.tickets-page .ticket-contents .all-tickets-wrapper .tickets-table-view tr:hover {
  cursor: pointer;
}
.tickets-page .ticket-contents .all-tickets-wrapper .tickets-table-view tr:hover td {
  background-color: #ffecb0;
}

.gems-page .gems-view-content {
  padding: 30px 40px !important;
}
.gems-page .gems-view-content .parent-board {
  width: 100%;
  display: flex;
  gap: 30px;
}
.gems-page .gems-view-content .parent-board .main-board {
  flex: 1;
  min-width: 0;
}
.gems-page .gems-view-content .parent-board .side-board {
  width: 300px;
  flex-shrink: 0;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container {
  background-color: white;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -5px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-header .btn {
  background-color: white;
  border: none;
  font-size: 20px;
  color: #cbcbcb;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display {
  display: flex;
  align-items: center;
  gap: 15px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-icon {
  font-size: 50px;
  color: #ffc700;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info {
  line-height: 25px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-number {
  font-size: 30px;
  font-weight: bold;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-label {
  font-size: 14px;
  color: #6d6d6d;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-meter-whole {
  width: 100%;
  height: 10px;
  background-color: gainsboro;
  border-radius: 10px;
  position: relative;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-meter-whole .gem-meter-percent {
  height: 10px;
  background-color: #ffc700;
  border-radius: 10px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-icon {
  font-size: 30px;
  color: gainsboro;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info {
  line-height: 19px;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-number {
  font-size: 16px;
  color: black;
  font-weight: 500;
}
.gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-label {
  font-size: 14px;
  color: #6d6d6d;
}
.gems-page .gems-view-content .parent-board .side-board .gem-analytics-container {
  background-color: white;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .gem-analytics-container .btn-analytics {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 500;
  display: block;
}
.gems-page .gems-view-content .parent-board .side-board .gem-analytics-container .btn-analytics i {
  margin-right: 5px;
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container {
  background-image: url("../images/yellow-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .section-title {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .give-gem-label {
  flex: 1;
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .give-gem-label .give-gem-line {
  font-size: 14px;
  color: white;
  line-height: 19px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .send-gem-btn {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  font-size: 22px;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container {
  background-color: white;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 15px;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-icon {
  font-size: 25px;
  color: white;
  width: 50px;
  height: 50px;
  background-color: #ffc700;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info {
  line-height: 19px;
  flex: 1;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-value {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
}
.gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-label {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container {
  background-color: white;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-header .btn {
  background-color: white;
  border: none;
  font-size: 20px;
  color: #cbcbcb;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .instruction-wrapper .instruction-title {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .instruction-wrapper .instruction-text {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-notice {
  font-size: 12px;
  border-top: solid 1px gainsboro;
  margin-top: 12px;
  padding-top: 12px;
  text-align: center;
  color: #6d6d6d;
  line-height: 14px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners {
  background-color: white;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .section-title {
  margin-bottom: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder {
  border-bottom: solid 1px gainsboro;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .quarter-label {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 5px;
  color: black;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .quarter-label i {
  margin-right: 5px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .no-data {
  padding: 15px 10px;
  border-radius: 10px;
  border: dashed 2px #e7e7e7;
  font-size: 14px;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .employee-img {
  height: 50px;
  width: 50px;
  border-radius: 100%;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .first {
  border: solid 3px #daa520;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .second {
  border: solid 3px #636363;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .third {
  border: solid 3px #dda06d;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info {
  line-height: 14px;
  flex: 1;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info .employee-name {
  font-size: 14px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info .employee-name .first {
  color: #daa520;
  font-size: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info .employee-name .second {
  color: #636363;
  font-size: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info .employee-name .third {
  color: #dda06d;
  font-size: 20px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .employee-info .employee-rank {
  font-size: 12px;
  color: #6d6d6d;
  line-height: 16px;
}
.gems-page .gems-view-content .parent-board .side-board .quarterly-winners .qw-footer {
  font-size: 12px;
  text-align: center;
  color: #6d6d6d;
}
.gems-page .gems-view-content .parent-board .leader-board-container {
  background-color: white;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* Rank badge */
  /* 🥇 GOLD */
  /* 🥈 SILVER */
  /* 🥉 BRONZE */
}
.gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
  background-color: white;
  background-image: url("https://staff.guerillacareers.com/wp-content/uploads/2026/08/gems-default-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 8px #b0c4de;
  padding: 10px 10px;
  height: 400px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .leader-board-container .user-image {
  height: 160px;
  width: 160px;
  border-radius: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 5px #b0c4de;
}
.gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
  text-align: center;
  line-height: 22px;
  font-size: 18px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .staff-position {
  font-size: 14px;
  margin-bottom: 10px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .staff-gems i {
  margin-right: 5px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-badge {
  font-weight: bold;
  font-size: 12px;
  background: #b0c4de;
  padding: 4px 8px;
  border-radius: 100px;
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
  font-size: 30px;
  font-weight: 700;
  color: #8192a9;
  margin-bottom: 5px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-gold {
  background-color: lightgoldenrodyellow;
  background-image: url("https://staff.guerillacareers.com/wp-content/uploads/2026/08/gems-gold-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 8px goldenrod;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .user-image {
  border: solid 5px goldenrod;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
  font-weight: bold;
  font-size: 14px;
  background: goldenrod;
  color: white;
  padding: 4px 8px;
  border-radius: 100px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .staff-gems {
  font-size: 30px;
  font-weight: 700;
  color: darkgoldenrod;
  margin-bottom: 5px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-silver {
  background-color: lightgoldenrodyellow;
  background-image: url("https://staff.guerillacareers.com/wp-content/uploads/2026/08/gems-silver-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 8px #636363;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .user-image {
  border: solid 5px #636363;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
  font-weight: bold;
  font-size: 14px;
  background: #636363;
  color: white;
  padding: 4px 8px;
  border-radius: 100px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .staff-gems {
  font-size: 30px;
  font-weight: 700;
  color: #636363;
  margin-bottom: 5px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze {
  background-color: lightgoldenrodyellow;
  background-image: url("https://staff.guerillacareers.com/wp-content/uploads/2026/08/gems-bronze-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: solid 8px #dda06d;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .user-image {
  border: solid 5px #dda06d;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
  font-weight: bold;
  font-size: 14px;
  background: #dda06d;
  color: white;
  padding: 4px 8px;
  border-radius: 100px;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .staff-gems {
  font-size: 30px;
  font-weight: 700;
  color: #eb9852;
  margin-bottom: 5px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .leaderboard-swiper {
  margin-top: 20px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-prev,
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-next {
  color: white;
  background-color: #28282b;
  height: 35px;
  width: 35px;
  border-radius: 40px;
}
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-prev::after,
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
}
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-prev {
  top: 15px;
  right: 45px;
  left: auto;
}
.gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group .swiper-button-next {
  top: 15px;
  right: 0;
}
.gems-page .gems-view-content .parent-board .mobile-only {
  display: none;
}
.gems-page .gems-view-content .section-title {
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.gems-page .gems-view-content .section-title span {
  color: #6d6d6d;
  font-weight: normal;
  font-size: 14px;
}
.gems-page .gems-view-content .section-title span i {
  margin-right: 5px;
}
.gems-page .gems-view-content .content-gems .page-cover-gem {
  background-image: url("../images/yellow-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 50px 30px;
  border-radius: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gems-page .gems-view-content .content-gems .page-cover-gem .page-title {
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.gems-page .gems-view-content .content-gems .page-cover-gem .page-title .fa-gem {
  margin-right: 15px;
  margin-left: 15px;
}
.gems-page .gems-view-content .content-gems .page-cover-gem .page-info {
  font-size: 16px;
  color: black;
  margin-top: 15px;
  text-align: center;
  padding: 0px 15px;
}
.gems-page .gems-view-content .content-gems .page-cover-gem .btn-gem-info {
  margin-top: 20px;
  padding: 10px 30px;
  border-radius: 30px;
}
.gems-page .gems-view-content .content-gems .page-cover-gem::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 2.5s infinite;
}
@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
.gems-page .gems-view-content .gem-section-title {
  font-size: 30px;
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
  text-transform: uppercase;
}
.gems-page .gems-view-content .approval-container {
  background-color: #28282b;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .approval-container .section-title {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gems-page .gems-view-content .approval-container .gems-management-panel {
  /* =========================================
  PANEL HEADER
  ========================================= */
  /* =========================================
  APPROVAL LIST
  ========================================= */
  /* =========================================
  APPROVAL CARD
  ========================================= */
  /* =========================================
  CARD HEADER
  ========================================= */
  /* =========================================
  CARD BODY
  ========================================= */
  /* =========================================
  ATTACHMENT
  ========================================= */
  /* =========================================
  CARD ACTIONS
  ========================================= */
  /* =========================================
  EMPTY STATE
  ========================================= */
  /* =========================================
  TABLET
  ========================================= */
  /* =========================================
  MOBILE
  ========================================= */
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper .gems-show-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #444;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper .gems-show-more-btn i {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper .gems-show-more-btn:hover {
  border-color: #ffc700;
  background: #fffaf0;
  color: #222;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper .gems-show-more-btn.expanded i {
  transform: rotate(180deg);
}
@media (max-width: 576px) {
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper {
    margin-top: 16px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-show-more-wrapper .gems-show-more-btn {
    width: 100%;
    min-height: auto;
    padding: 8px;
    font-size: 12px;
  }
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
  position: relative;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header .section-title {
  margin: 0;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header .gems-panel-subtitle {
  margin: 5px 0 0;
  color: white;
  font-size: 14px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-card.gems-card-hidden {
  opacity: 0;
  transform: translateY(10px);
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 15px 24px;
  background: #fafafa;
  border-bottom: 1px solid #eeeeee;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user {
  display: flex;
  align-items: center;
  gap: 11px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffc700;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-avatar.receiver {
  background: #222;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-info {
  display: flex;
  flex-direction: column;
  gap: 0px;
  line-height: 10px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-info .gems-user-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
  font-weight: 600;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-info strong {
  font-size: 15px;
  line-height: 1.3;
  color: #222;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #999;
  font-size: 11px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff4bd;
  color: #7a5d00;
  white-space: nowrap;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value strong {
  font-size: 14px;
  line-height: 1;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  padding: 15px 20px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body .gems-reason {
  min-width: 0;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body .gems-reason p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #444;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body .gems-detail-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body .gems-detail-label i {
  font-size: 11px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-attachment {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-attachment .gems-attachment-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-attachment:hover {
  opacity: 0.85;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-file-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 7px;
  color: #444;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-file-link:hover {
  border-color: #ffc700;
  background: #fffaf0;
  color: #222;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-file-link i:last-child {
  margin-left: 2px;
  font-size: 10px;
  color: #999;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #eeeeee;
  background: #fff;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions .btn {
  min-width: 105px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-empty-state {
  padding: 50px 25px;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #ddd;
  border-radius: 14px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-empty-state .gems-empty-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  color: #999;
  font-size: 20px;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-empty-state .gems-empty-title {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
}
.gems-page .gems-view-content .approval-container .gems-management-panel .gems-empty-state .gems-empty-text {
  margin: 0;
  color: #888;
  font-size: 13px;
}
@media (max-width: 768px) {
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users {
    width: 100%;
    justify-content: space-between;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value {
    align-self: flex-start;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions {
    justify-content: stretch;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions .btn {
    flex: 1;
  }
}
@media (max-width: 576px) {
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header {
    margin-bottom: 18px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-panel-header .gems-panel-subtitle {
    font-size: 13px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-list {
    gap: 14px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-card {
    border-radius: 11px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-approval-card:hover {
    transform: none;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header {
    padding: 15px;
    gap: 10px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    order: 1;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-arrow {
    display: none;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user {
    width: 100%;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-card-users .gems-user .gems-user-info strong {
    font-size: 14px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value {
    padding: 7px 11px;
    order: 0;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-header .gems-value strong {
    font-size: 11px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body {
    padding: 15px;
    gap: 15px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-body .gems-reason p {
    font-size: 13px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions {
    padding: 14px 10px;
    flex-direction: column;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-card-actions .btn {
    width: 100%;
    min-height: auto;
    font-size: 13px;
  }
  .gems-page .gems-view-content .approval-container .gems-management-panel .gems-attachment {
    width: 80px;
    height: 80px;
  }
}
.gems-page .gems-view-content .gems-list {
  background-color: transparent;
  border-top: solid 2px gainsboro;
  margin-top: 50px;
  padding-top: 20px;
}
.gems-page .gems-view-content .gems-list .gems-employees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.gems-page .gems-view-content .gems-list .gems-employees .give-gem-btn {
  background-color: #ffc700;
}
.gems-page .gems-view-content .gems-list .core-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 10px;
}
.gems-page .gems-view-content .gems-list .core-details .core-img .user-image {
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
.gems-page .gems-view-content .gems-wall {
  background-color: white;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gems-page .gems-view-content .gems-wall .gems-feed {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 20px;
}
.gems-page .gems-view-content .gems-wall .recognition-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication {
  display: flex;
  gap: 10px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .image-container .receiver-photo {
  height: 60px;
  width: 60px;
  border-radius: 100%;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container {
  line-height: 20px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .sender-date {
  font-size: 15px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .sender-name {
  font-size: 15px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group {
  margin-top: 5px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group .receiver-name {
  font-size: 15px;
  font-weight: bold;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group .receiver-job {
  font-size: 14px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-title {
  color: goldenrod;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-title .fa-solid {
  margin-right: 8px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #6d6d6d;
  font-size: 14px;
  margin-bottom: 15px;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .view-attachment-btn {
  width: 100%;
  border-color: #a5a5a5;
  color: #6d6d6d;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .view-attachment-btn:hover {
  background-color: #28282b;
  color: white;
}
.gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section .date-stamp {
  text-align: right;
  font-size: 14px;
  color: #6d6d6d;
}
.gems-page .gems-view-content .gems-wall .recognition-card .recognition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.gems-page .gems-view-content .gem-attachment-preview .modal-dialog {
  max-width: 1000px;
}
.gems-page .gems-view-content .gem-attachment-preview .modal-dialog #attachmentModalBody img {
  width: 100%;
}
.gems-page .custom-arrow {
  position: absolute;
  right: 12px;
  font-size: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header {
  background-image: url("../images/yellow-background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 35px;
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header .gem-title {
  font-size: 45px;
  letter-spacing: 3px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header .gem-subtitle {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group {
  margin-bottom: 15px;
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group .form-label {
  font-size: 16px;
  margin-bottom: 5px;
  font-weight: 500;
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-footer .modal-btn {
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  padding: 10px 25px;
  font-weight: 500;
}
.gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-footer .btn-warning {
  padding: 10px 35px;
}
.gems-page .send-gems-main-modal .modal-dialog {
  max-width: 1300px;
  padding: 0px 10px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card {
  padding: 20px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card .core-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 10px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card .core-details .staff-name {
  font-size: 15px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card .core-details .staff-role {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card .core-details .core-img .user-image {
  width: 50px;
  height: 50px;
  border-radius: 100px;
}
.gems-page .send-gems-main-modal .modal-dialog .modal-content .modal-body .gems-employees .core-team-card .give-gem-btn {
  background-color: #ffc700;
  font-size: 14px;
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .gems-page .gems-view-content .section-title span {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 275px;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 330px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 100px;
    width: 100px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 16px;
    font-size: 16px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 25px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .gems-page .gems-view-content .section-title {
    font-size: 16px;
  }
  .gems-page .gems-view-content .section-title span {
    font-size: 12px;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 250px;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .give-gem-label .give-gem-line {
    line-height: 17px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper {
    gap: 15px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .employee-img {
    height: 45px;
    width: 45px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-icon {
    font-size: 40px;
    color: #ffc700;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info {
    line-height: 22px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-number {
    font-size: 25px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info {
    line-height: 16px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-number {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper {
    gap: 10px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-info .prize-value {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-holder {
    width: 100%;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-holder .prize-item {
    width: 152px;
    font-size: 13px;
    margin-top: -25px;
    margin-left: auto;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-icon {
    font-size: 22px;
    width: 45px;
    height: 45px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info {
    line-height: 16px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-value {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 330px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 100px;
    width: 100px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 16px;
    font-size: 16px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 25px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card {
    display: flex;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section {
    order: 1;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section .date-stamp {
    text-align: right;
    font-size: 12px;
    color: white;
    background-color: #bbbbbb;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication {
    order: 2;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason {
    order: 3;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .gems-page .gems-view-content .gems-wall .recognition-card {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
  }
  .gems-page .gems-view-content .parent-board {
    display: flex;
    flex-direction: column-reverse;
  }
  .gems-page .gems-view-content .parent-board .main-board {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 100%;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 330px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 100px;
    width: 100px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 16px;
    font-size: 16px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 25px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gems-page .gems-view-content .gems-wall .recognition-card {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
  }
  .gems-page .gems-view-content .parent-board {
    display: flex;
    flex-direction: column-reverse;
  }
  .gems-page .gems-view-content .parent-board .main-board {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 100%;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 330px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 100px;
    width: 100px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 16px;
    font-size: 16px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 25px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .gems-page .gems-view-content .gems-wall .recognition-card {
    display: flex;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section {
    order: 1;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section .date-stamp {
    text-align: right;
    font-size: 12px;
    color: white;
    background-color: #bbbbbb;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication {
    order: 2;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason {
    order: 3;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
  }
  .gems-page .gems-view-content .parent-board {
    display: flex;
    flex-direction: column-reverse;
  }
  .gems-page .gems-view-content .parent-board .main-board {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 100%;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 330px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 100px;
    width: 100px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 16px;
    font-size: 16px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 25px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .gems-page .gems-view-content {
    padding: 30px 15px !important;
  }
  .gems-page .gems-view-content .section-title {
    font-size: 16px;
  }
  .gems-page .gems-view-content .section-title span {
    padding: 0px;
    font-size: 12px;
    background-color: transparent;
    color: #6d6d6d;
    font-weight: normal;
  }
  .gems-page .gems-view-content .gems-wall {
    padding: 0px;
  }
  .gems-page .gems-view-content .gems-wall .section-title {
    padding-top: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card {
    display: flex;
    border: solid 1px #d5d5d5;
    border-right: none;
    border-left: none;
    border-bottom: none;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section {
    order: 1;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-footer-section .date-stamp {
    text-align: right;
    font-size: 12px;
    color: white;
    background-color: #bbbbbb;
    width: fit-content;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication {
    order: 2;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .image-container .receiver-photo {
    height: 55px;
    width: 55px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .sender-name {
    font-size: 14px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group {
    margin-top: 3px;
    line-height: 15px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group .receiver-name {
    font-size: 14px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-card-dedication .text-container .receiver-group .receiver-job {
    font-size: 12px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason {
    order: 3;
    border-top: solid 1px #f1f1f1;
    padding-top: 12px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-title {
    font-size: 14px;
  }
  .gems-page .gems-view-content .gems-wall .recognition-card .gem-value-reason .value-reason {
    -webkit-line-clamp: 6;
    line-height: 19px;
  }
  .gems-page .gems-view-content .parent-board {
    display: flex;
    flex-direction: column-reverse;
    gap: 0px;
  }
  .gems-page .gems-view-content .parent-board .main-board {
    flex: 1;
    min-width: 0;
    width: 100%;
  }
  .gems-page .gems-view-content .parent-board .main-board .leader-board-container {
    display: none;
  }
  .gems-page .gems-view-content .parent-board .side-board {
    width: 100%;
    flex-shrink: 0;
  }
  .gems-page .gems-view-content .parent-board .side-board .give-gem-container {
    margin-bottom: 20px;
  }
  .gems-page .gems-view-content .parent-board .side-board .give-gem-container .give-gem-holder .give-gem-label .give-gem-line {
    line-height: 17px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-winners {
    margin-bottom: 20px;
    display: none;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper {
    gap: 15px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-winners .quarterly-holder .employee-wrapper .employee-card .image-holder .employee-img {
    height: 45px;
    width: 45px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container {
    margin-bottom: 20px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-icon {
    font-size: 40px;
    color: #ffc700;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info {
    line-height: 22px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-number {
    font-size: 25px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .balance-display .gem-info .gem-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info {
    line-height: 16px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-number {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-balance-container .reminder-display .reminder-info .reminder-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board .gem-analytics-container {
    margin-bottom: 20px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container {
    margin-bottom: 20px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-info {
    line-height: 15px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-info .prize-value {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .quarterly-prize-container .prize-wrapper .prize-card .prize-info .prize-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container {
    margin-bottom: 20px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-icon {
    font-size: 22px;
    width: 45px;
    height: 45px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info {
    line-height: 16px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-value {
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .side-board .core-value-container .core-value-wrapper .core-value-card .core-info .core-label {
    font-size: 13px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container {
    padding: 20px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .swiper-button-group {
    display: none;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .leader-board-card {
    height: 290px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-gold .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-silver .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .rank-bronze .rank-badge {
    font-size: 12px;
    height: 30px;
    width: 30px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .user-image {
    height: 90px;
    width: 90px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-name {
    line-height: 14px;
    font-size: 14px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-position {
    font-size: 12px;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .staff-gems {
    font-size: 20px !important;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .gem-leaderboard .gems-leaderboard .section-title {
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .gems-page .gems-view-content .parent-board .leader-board-container .gem-leaderboard .gems-leaderboard .section-title span {
    margin-left: 0px;
  }
  .gems-page .gems-view-content .parent-board .mobile-only {
    display: block;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header {
    line-height: 25px;
    padding: 30px 30px 22px 30px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header .gem-title {
    font-size: 30px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-header .gem-subtitle {
    font-size: 12px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group .form-label {
    font-size: 14px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group .attachement-input {
    font-size: 14px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group .form-text {
    font-size: 12px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-body .gem-input-group .text-muted {
    font-size: 12px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0px;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-footer .modal-btn {
    font-size: 13px;
    width: 100%;
  }
  .gems-page .give-gem-main-modal .modal-dialog .modal-content .modal-footer .btn-warning {
    padding: 10px 25px;
  }
}
.gems-admin {
  /*
  |--------------------------------------------------------------------------
  | GEMS CUTOFF HISTORY
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | TABLET
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | MOBILE
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | SMALL MOBILE
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | GEMS GIVING PATTERNS
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | TABLET
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | MOBILE
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | SMALL MOBILE
  |--------------------------------------------------------------------------
  */
}
.gems-admin .gems-cutoff-history {
  width: 100%;
}
.gems-admin .gems-cutoff-history .section-title {
  margin-bottom: 20px;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table {
  width: 100%;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  /*
  |--------------------------------------------------------------------------
  | Employee Column
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Current Cutoff
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Gem Count
  |--------------------------------------------------------------------------
  */
}
.gems-admin .gems-cutoff-history .gems-cutoff-table th,
.gems-admin .gems-cutoff-history .gems-cutoff-table td {
  padding: 16px 18px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #eeeeee;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table th {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  background: #28282b;
  color: white;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table td {
  font-size: 15px;
  color: #444;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table tbody tr:last-child td {
  border-bottom: 0;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table tbody tr:hover {
  background: #fafafa;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table th:first-child,
.gems-admin .gems-cutoff-history .gems-cutoff-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table th:first-child {
  background: #28282b;
  color: white;
  z-index: 4;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .employee-name {
  min-width: 190px;
  font-weight: 600;
  color: #222;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .current-cutoff {
  background: rgba(255, 199, 0, 0.12);
}
.gems-admin .gems-cutoff-history .gems-cutoff-table th.current-cutoff {
  background: #ffc700;
  color: #222;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table td.current-cutoff {
  font-weight: 600;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .current-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .gem-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
  color: #ababab;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .gem-count i {
  font-size: 14px;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .gem-value {
  color: black;
  font-weight: 500;
}
.gems-admin .gems-cutoff-history .gems-cutoff-table .no-data {
  padding: 30px 20px;
  text-align: center;
}
@media (max-width: 991.98px) {
  .gems-admin .gems-cutoff-history .gems-cutoff-table th,
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    padding: 14px 15px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table th {
    font-size: 13px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    font-size: 14px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .employee-name {
    min-width: 170px;
  }
}
@media (max-width: 767.98px) {
  .gems-admin .gems-cutoff-history .section-title {
    margin-bottom: 15px;
    text-align: center;
    align-items: center;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table-wrapper {
    margin-right: -15px;
    width: calc(100% + 30px);
    padding: 0 15px 8px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table {
    min-width: 650px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table th,
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    padding: 12px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table th {
    font-size: 12px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    font-size: 13px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .employee-name {
    min-width: 150px;
    max-width: 150px;
    white-space: normal;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .current-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .gem-count {
    gap: 4px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .gem-count i {
    font-size: 12px;
  }
}
@media (max-width: 575.98px) {
  .gems-admin .gems-cutoff-history .gems-cutoff-table-wrapper {
    margin-right: -10px;
    width: calc(100% + 0px);
    padding-left: 10px;
    padding-right: 10px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table {
    min-width: 620px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table th,
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    padding: 10px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .employee-name {
    min-width: 140px;
    max-width: 140px;
    font-size: 12px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table th {
    font-size: 11px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table td {
    font-size: 12px;
  }
  .gems-admin .gems-cutoff-history .gems-cutoff-table .current-label {
    font-size: 8px;
  }
}
.gems-admin .gems-giving-patterns {
  width: 100%;
  /*
  |--------------------------------------------------------------------------
  | Employee List
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Employee Card
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Sender / Employee Header
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Recipients
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Recipient Rank
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Rank Colors
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Recipient Image
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Recipient Information
  |--------------------------------------------------------------------------
  */
  /*
  |--------------------------------------------------------------------------
  | Empty State
  |--------------------------------------------------------------------------
  */
}
.gems-admin .gems-giving-patterns .section-title {
  margin-bottom: 8px;
}
.gems-admin .gems-giving-patterns .gems-patterns-description {
  margin: 0 0 25px;
  color: #777;
  font-size: 14px;
  line-height: 1.5;
}
.gems-admin .gems-giving-patterns .gems-patterns-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 1600px) {
  .gems-admin .gems-giving-patterns .gems-patterns-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gems-admin .gems-giving-patterns .gems-pattern-card {
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gems-admin .gems-giving-patterns .gems-pattern-card:hover {
  border-color: #ffc700;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
}
.gems-admin .gems-giving-patterns .gems-pattern-header {
  padding-bottom: 16px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eeeeee;
}
.gems-admin .gems-giving-patterns .gems-pattern-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gems-admin .gems-giving-patterns .gems-pattern-avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: #f3f3f3;
}
.gems-admin .gems-giving-patterns .gems-pattern-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gems-admin .gems-giving-patterns .gems-pattern-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gems-admin .gems-giving-patterns .gems-pattern-user-info strong {
  color: #222;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.gems-admin .gems-giving-patterns .gems-pattern-user-info span {
  margin-top: 3px;
  color: #777;
  font-size: 12px;
  line-height: 1.3;
}
.gems-admin .gems-giving-patterns .gems-pattern-recipients {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gems-admin .gems-giving-patterns .gems-pattern-recipient {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  background: #fafafa;
  border-radius: 9px;
}
.gems-admin .gems-giving-patterns .recipient-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eeeeee;
  color: #555;
  font-size: 11px;
  font-weight: 700;
}
.gems-admin .gems-giving-patterns .gems-pattern-recipient:nth-child(1) .recipient-rank {
  background: #ffc700;
  color: #222;
}
.gems-admin .gems-giving-patterns .gems-pattern-recipient:nth-child(2) .recipient-rank {
  background: #dedede;
  color: #333;
}
.gems-admin .gems-giving-patterns .gems-pattern-recipient:nth-child(3) .recipient-rank {
  background: #d2a679;
  color: #fff;
}
.gems-admin .gems-giving-patterns .recipient-avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  background: #eeeeee;
}
.gems-admin .gems-giving-patterns .recipient-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gems-admin .gems-giving-patterns .recipient-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.gems-admin .gems-giving-patterns .recipient-info strong {
  overflow: hidden;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gems-admin .gems-giving-patterns .recipient-info span {
  margin-top: 3px;
  color: #777;
  font-size: 12px;
  line-height: 1.3;
}
.gems-admin .gems-giving-patterns .gems-pattern-empty {
  padding: 15px;
  text-align: center;
  background: #fafafa;
  border-radius: 9px;
  color: #888;
  font-size: 13px;
}
.gems-admin .gems-giving-patterns .no-data {
  padding: 25px;
  text-align: center;
  color: #777;
}
@media (max-width: 991.98px) {
  .gems-admin .gems-giving-patterns .gems-patterns-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-card {
    padding: 18px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-avatar {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}
@media (max-width: 767.98px) {
  .gems-admin .gems-giving-patterns .section-title {
    margin-bottom: 6px;
    text-align: center;
    align-items: center;
  }
  .gems-admin .gems-giving-patterns .gems-patterns-description {
    margin-bottom: 30px;
    font-size: 13px;
    text-align: center;
  }
  .gems-admin .gems-giving-patterns .gems-patterns-list {
    gap: 12px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-card {
    padding: 15px;
    border-radius: 11px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-header {
    padding-bottom: 13px;
    margin-bottom: 12px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-user {
    gap: 10px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-avatar {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-user-info strong {
    font-size: 14px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-user-info span {
    font-size: 11px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-recipients {
    gap: 7px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-recipient {
    gap: 9px;
    padding: 9px;
  }
  .gems-admin .gems-giving-patterns .recipient-rank {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  .gems-admin .gems-giving-patterns .recipient-avatar {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
  .gems-admin .gems-giving-patterns .recipient-info strong {
    font-size: 13px;
  }
  .gems-admin .gems-giving-patterns .recipient-info span {
    font-size: 11px;
  }
}
@media (max-width: 575.98px) {
  .gems-admin .gems-giving-patterns .gems-pattern-card {
    padding: 13px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-avatar {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-user-info strong {
    font-size: 13px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-user-info span {
    font-size: 10px;
  }
  .gems-admin .gems-giving-patterns .gems-pattern-recipient {
    padding: 8px;
  }
  .gems-admin .gems-giving-patterns .recipient-avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
  .gems-admin .gems-giving-patterns .recipient-info strong {
    font-size: 12px;
  }
  .gems-admin .gems-giving-patterns .recipient-info span {
    font-size: 10px;
  }
}

.support-page {
  /* Tablet */
  /* Mobile */
}
.support-page .offcanvas-events-form-button {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 0;
  border-radius: 0;
  height: 80px;
  width: 60px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color: white;
  font-size: 30px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.support-page .offcanvas-events-form-button span {
  font-size: 20px;
  margin-left: 10px;
  color: transparent;
  white-space: nowrap;
  display: none;
}
.support-page .offcanvas-events-form {
  width: 100%;
  max-width: 500px;
  background-color: whitesmoke;
}
.support-page .offcanvas-events-form .offcanvas-body {
  padding: 20px;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  border: 1px solid gainsboro;
  transition: all 0.3s ease;
  height: 100%;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card:hover {
  transform: translateY(-5px);
  border-color: #ffc700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card:hover .support-icon {
  transform: scale(1.05);
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card:hover .form-name {
  color: #ffc700;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card .support-icon {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card .form-name {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
  transition: color 0.3s ease;
  margin-top: 15px;
  margin-bottom: 5px;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card .form-excerpt {
  margin-top: auto;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}
.support-page .offcanvas-events-form .offcanvas-body .events-card-wrapper .forms-card .form-excerpt p {
  margin: 0;
}
.support-page .content-support {
  width: 100%;
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 100px;
}
.support-page .content-support .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.support-page .content-support .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.support-page .content-support .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.support-page .content-support .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.support-page .content-support .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.support-page .content-support .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.support-page .content-support .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.support-page .content-support .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.support-page .content-support .support-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  position: relative;
  padding-bottom: 5px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.support-page .content-support .support-wrapper .forms-card {
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  color: black;
  text-decoration: none;
  border-radius: 8px;
  overflow: hidden;
  height: 290px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  position: relative;
}
.support-page .content-support .support-wrapper .forms-card:hover {
  cursor: pointer;
  scale: 1.01;
  background-color: #fff6d4;
}
.support-page .content-support .support-wrapper .forms-card .form-category {
  font-size: 15px;
  background-color: #28282b;
  padding: 2px 10px;
  border-radius: 30px;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  color: white;
}
.support-page .content-support .support-wrapper .forms-card .form-category .fa-solid {
  margin-right: 5px;
}
.support-page .content-support .support-wrapper .forms-card .category-hr {
  background-color: #e7be00;
}
.support-page .content-support .support-wrapper .forms-card .category-recruitment {
  background-color: #69c7e1;
}
.support-page .content-support .support-wrapper .forms-card .category-payroll {
  background-color: #096314;
}
.support-page .content-support .support-wrapper .forms-card .category-clinic {
  background-color: #34dd34;
}
.support-page .content-support .support-wrapper .forms-card .category-information-technology {
  background-color: #858585;
  color: white;
}
.support-page .content-support .support-wrapper .forms-card .category-benefits {
  background-color: #995f27;
}
.support-page .content-support .support-wrapper .forms-card .category-marketing {
  background-color: #9157b7;
}
.support-page .content-support .support-wrapper .forms-card .category-management {
  background-color: #ffadad;
}
.support-page .content-support .support-wrapper .forms-card .category-account-manager {
  background-color: #464699;
}
.support-page .content-support .support-wrapper .forms-card .support-icon {
  position: absolute;
  bottom: 20px;
  right: 10px;
  width: 50%;
  max-width: 200px;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
}
.support-page .content-support .support-wrapper .forms-card .form-name {
  font-size: 20px;
  text-align: left;
  font-weight: 500;
  line-height: 23px;
  width: 90%;
  margin-bottom: 10px;
}
.support-page .content-support .support-wrapper .forms-card .form-excerpt {
  font-size: 16px;
  color: #6d6d6d;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-page .unavailable-form .modal-dialog {
  max-width: 420px;
  margin: 1rem auto;
}
.support-page .unavailable-form .modal-content {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}
.support-page .unavailable-form .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.support-page .unavailable-form .icon-container i {
  font-size: 100px;
  color: #ffc700;
  line-height: 1;
}
@media (max-width: 768px) {
  .support-page .unavailable-form .icon-container i {
    font-size: 90px;
  }
}
@media (max-width: 480px) {
  .support-page .unavailable-form .icon-container i {
    font-size: 70px;
  }
}
.support-page .unavailable-form .message-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #000;
}
.support-page .unavailable-form .message-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}
.support-page .unavailable-form .modal-btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 0.75rem 1.5rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.support-page .unavailable-form .modal-btn-close:hover, .support-page .unavailable-form .modal-btn-close:focus {
  background: #ffc700;
  color: #000;
}
@media (max-width: 768px) {
  .support-page .unavailable-form .modal-dialog {
    max-width: calc(100% - 2rem);
  }
  .support-page .unavailable-form .modal-content {
    padding: 1.75rem;
  }
}
@media (max-width: 480px) {
  .support-page .unavailable-form .modal-content {
    padding: 1.5rem 1.25rem;
    border-radius: 10px;
  }
  .support-page .unavailable-form .message-title {
    font-size: 1.2rem;
  }
  .support-page .unavailable-form .message-text {
    font-size: 0.9rem;
  }
  .support-page .unavailable-form .modal-btn-close {
    width: 100%;
  }
}

@media (min-width: 1199.98px) {
  .support-page .offcanvas-events-form-button:hover {
    color: white;
    width: 200px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .support-page .offcanvas-events-form-button:hover span {
    color: white;
    display: block;
    white-space: nowrap;
  }
}
/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1400px) and (max-width: 1699.98px) {
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 260px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 20px;
    line-height: 23px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
/* Extra large devices (large desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .support-page .support-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .support-page .content-support .title-group .page-title {
    font-size: 35px;
  }
  .support-page .content-support .support-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 260px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 20px;
    line-height: 23px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .support-page .support-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .support-page .content-support {
    padding-bottom: 80px;
  }
  .support-page .content-support .title-group .page-title {
    font-size: 35px;
  }
  .support-page .content-support .support-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 260px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 18px;
    line-height: 21px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .support-page .support-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .support-page .content-support {
    padding-bottom: 60px;
  }
  .support-page .content-support .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .support-page .content-support .title-group .search-bar-group {
    max-width: 350px;
  }
  .support-page .content-support .support-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 260px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 16px;
    margin-bottom: 5px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .support-page .support-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .support-page .offcanvas-events-form {
    width: 100%;
    max-width: 80%;
  }
  .support-page .content-support {
    padding-bottom: 40px;
  }
  .support-page .content-support .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .support-page .content-support .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .support-page .content-support .title-group .search-bar-group {
    max-width: 100%;
  }
  .support-page .content-support .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .support-page .content-support .support-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 60px;
  }
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 240px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .support-page .support-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .support-page .offcanvas-events-form {
    width: 100%;
    max-width: 100%;
  }
  .support-page .content-support {
    padding-bottom: 20px;
  }
  .support-page .content-support .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .support-page .content-support .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .support-page .content-support .title-group .search-bar-group {
    max-width: 100%;
  }
  .support-page .content-support .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .support-page .content-support .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .support-page .content-support .support-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    margin-bottom: 100px;
  }
  .support-page .content-support .support-wrapper .forms-card {
    padding: 20px;
    height: 200px;
  }
  .support-page .content-support .support-wrapper .forms-card .support-icon {
    bottom: 10px;
    max-width: 150px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-category {
    font-size: 12px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-name {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 5px;
  }
  .support-page .content-support .support-wrapper .forms-card .form-excerpt {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.employee-page .employee-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.employee-page .employee-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.employee-page .employee-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.employee-page .employee-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.employee-page .employee-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.employee-page .employee-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.employee-page .employee-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.employee-page .employee-view-content .employee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.employee-page .employee-view-content .employee-wrapper h2 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 700;
  color: #222;
}
.employee-page .employee-view-content .employee-wrapper .employee-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #ececec;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: 0.25s;
}
.employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card h2 {
  margin: 0;
  font-size: 42px;
  line-height: 1;
  color: #ffc700;
}
.employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card span {
  display: block;
  margin-top: 12px;
  color: #666;
  font-size: 15px;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #ececec;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table thead,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table thead,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table thead {
  background: #f8f8f8;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table thead th,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table thead th,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  border-bottom: 2px solid #ececec;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table tbody tr,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table tbody tr,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table tbody tr {
  transition: 0.2s;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table tbody tr:hover,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table tbody tr:hover,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table tbody tr:hover {
  background: #fafafa;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table tbody tr td,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list table tbody tr td,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list table tbody tr td {
  padding: 16px 18px;
  font-size: 14px;
  border-bottom: 1px solid #efefef;
  vertical-align: middle;
  white-space: nowrap;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list .badge,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list .badge,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list .badge {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list .badge.badge-core,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list .badge.badge-core,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list .badge.badge-core {
  background: rgba(255, 199, 0, 0.1803921569);
  color: #cfa200;
}
.employee-page .employee-view-content .employee-wrapper .employee-evaluation-list .badge.badge-bpo,
.employee-page .employee-view-content .employee-wrapper .employee-probationary-list .badge.badge-bpo,
.employee-page .employee-view-content .employee-wrapper .employee-regular-list .badge.badge-bpo {
  background: #d1d1d1;
  color: black;
}
.employee-page .employee-view-content .employee-wrapper .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: #ffc700;
  color: #222;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.25s;
  margin: 0 auto;
}
.employee-page .employee-view-content .employee-wrapper .button:hover {
  background: rgb(214.2, 167.16, 0);
  color: #222;
}
.employee-page .employee-view-content .employee-wrapper .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.employee-page .employee-view-content .employee-wrapper .badge.badge-warning {
  background: #fff3cd;
  color: #856404;
}
.employee-page .employee-view-content .employee-wrapper .badge.regular {
  background: #d4edda;
  color: #155724;
}
.employee-page .employee-view-content .employee-wrapper .badge.overdue {
  background: #f8d7da;
  color: #721c24;
}
@media (max-width: 1024px) {
  .employee-page .employee-view-content .employee-wrapper .employee-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .employee-page .employee-view-content .employee-wrapper {
    gap: 20px;
  }
  .employee-page .employee-view-content .employee-wrapper h2 {
    font-size: 20px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-summary {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card {
    padding: 20px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card h2 {
    font-size: 34px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-summary .summary-card span {
    font-size: 14px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-evaluation-list,
  .employee-page .employee-view-content .employee-wrapper .employee-probationary-list,
  .employee-page .employee-view-content .employee-wrapper .employee-regular-list {
    padding: 18px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table,
  .employee-page .employee-view-content .employee-wrapper .employee-probationary-list table,
  .employee-page .employee-view-content .employee-wrapper .employee-regular-list table {
    min-width: 700px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table th,
  .employee-page .employee-view-content .employee-wrapper .employee-evaluation-list table td,
  .employee-page .employee-view-content .employee-wrapper .employee-probationary-list table th,
  .employee-page .employee-view-content .employee-wrapper .employee-probationary-list table td,
  .employee-page .employee-view-content .employee-wrapper .employee-regular-list table th,
  .employee-page .employee-view-content .employee-wrapper .employee-regular-list table td {
    padding: 12px 14px;
    font-size: 13px;
  }
  .employee-page .employee-view-content .employee-wrapper .button {
    padding: 8px 14px;
    font-size: 13px;
  }
}
@media (max-width: 480px) {
  .employee-page .employee-view-content .employee-wrapper .summary-card {
    text-align: center;
  }
  .employee-page .employee-view-content .employee-wrapper .summary-card h2 {
    font-size: 30px;
  }
  .employee-page .employee-view-content .employee-wrapper .employee-evaluation-list,
  .employee-page .employee-view-content .employee-wrapper .employee-probationary-list,
  .employee-page .employee-view-content .employee-wrapper .employee-regular-list {
    padding: 15px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-dialog {
  max-width: 600px;
  margin: 1.75rem auto;
}
@media (max-width: 768px) {
  .employee-page .employee-view-content #employeeEvaluationModal .modal-dialog {
    margin: 1rem auto;
    padding: 0px 10px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-header {
  padding: 20px 25px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-header .modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .employee-page .employee-view-content #employeeEvaluationModal .modal-header .modal-title {
    font-size: 20px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-header .btn-close {
  font-size: 14px;
}
.employee-page .employee-view-content #employeeEvaluationModal .modal-body {
  padding: 25px;
}
@media (max-width: 768px) {
  .employee-page .employee-view-content #employeeEvaluationModal .modal-body {
    padding: 20px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .employee-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  margin-bottom: 25px;
  background: #f8f8f8;
  border-radius: 12px;
}
@media (max-width: 576px) {
  .employee-page .employee-view-content #employeeEvaluationModal .employee-profile {
    flex-direction: column;
    text-align: center;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .employee-profile img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .employee-page .employee-view-content #employeeEvaluationModal .employee-profile img {
    width: 90px;
    height: 90px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .employee-profile .employee-details h4 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: bold;
}
@media (max-width: 576px) {
  .employee-page .employee-view-content #employeeEvaluationModal .employee-profile .employee-details h4 {
    font-size: 16px;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 15px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal .employee-profile .employee-details p {
  margin: 6px 0;
  font-size: 14px;
  color: #555;
}
.employee-page .employee-view-content #employeeEvaluationModal .employee-profile .employee-details p strong {
  color: #222;
  min-width: 100px;
  display: inline-block;
}
@media (max-width: 576px) {
  .employee-page .employee-view-content #employeeEvaluationModal .employee-profile .employee-details p strong {
    display: block;
    margin-bottom: 3px;
  }
}
.employee-page .employee-view-content #employeeEvaluationModal #employeeEvaluationForm label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}
.employee-page .employee-view-content #employeeEvaluationModal #employeeEvaluationForm .form-control {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  font-size: 14px;
}
.employee-page .employee-view-content #employeeEvaluationModal #employeeEvaluationForm .form-control:focus {
  outline: none;
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.15);
}
.employee-page .employee-view-content #employeeEvaluationModal #employeeEvaluationForm .btn-primary {
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  background: #ffc700;
  color: #000;
}
.employee-page .employee-view-content #employeeEvaluationModal #employeeEvaluationForm .btn-primary:hover {
  opacity: 0.85;
}
.employee-page .employee-view-content .tab-wrapper .nav-tabs .nav-item {
  color: black;
}
.employee-page .employee-view-content .tab-wrapper .nav-tabs .nav-item .nav-link {
  color: black;
  font-size: 16px;
  padding: 15px 30px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content {
  background-color: white;
  border-bottom: solid 1px gainsboro;
  border-right: solid 1px gainsboro;
  border-left: solid 1px gainsboro;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content {
  padding: 30px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .btn-send-email {
  display: flex;
  justify-self: flex-end;
  color: white;
  font-size: 16px;
  padding: 10px 25px;
  font-weight: 500;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group {
  margin-bottom: 40px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-title, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-title span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-title span {
  margin-right: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  border-bottom: solid 1px gainsboro;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
  border: solid 1px gainsboro;
  border-bottom: none;
  padding: 15px 30px;
  display: flex;
  gap: 15px;
  width: 100%;
  justify-content: space-between;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder {
  position: relative;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder .employee-headshot {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .shift-morning .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .shift-morning .employee-headshot {
  border: solid 3px #ffc700;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .shift-night .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .shift-night .employee-headshot {
  border: solid 3px #28282b;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-morning::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-morning::after {
  content: "\f185"; /* fa-sun */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ffc700;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-night::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-night::after {
  content: "\f186"; /* fa-moon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #28282b;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder {
  line-height: 19px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-id, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-id {
  font-size: 12px;
  color: #6d6d6d;
  line-height: 12px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-name, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-name {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 5px;
  line-height: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-role, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-role {
  font-size: 12px;
  color: #6d6d6d;
  line-height: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder .type-text, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder .type-text {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  width: 60px;
  text-align: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder .badge-core, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder .badge-core {
  background: rgba(255, 199, 0, 0.1803921569);
  color: #cfa200;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder .badge-bpo, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder .badge-bpo {
  background: #d1d1d1;
  color: black;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 200px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder .client-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder .client-label {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder .client-name, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder .client-name {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-label {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-value, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-value {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-count, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-count {
  font-size: 14px;
  color: #daa520;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-count .overdue, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-count .overdue {
  color: palevioletred;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .counter-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .counter-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .counter-holder .date-count, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .counter-holder .date-count {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .check-other-tab, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .check-other-tab {
  padding: 15px;
  text-align: center;
  background-color: #6b6b6b;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .check-other-tab i, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .check-other-tab i {
  margin-right: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper {
  border: solid 1px gainsboro;
  padding: 15px 20px;
  display: flex;
  gap: 15px;
  width: 100%;
  justify-content: space-between;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details {
  display: flex;
  gap: 10px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .image-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .image-holder {
  position: relative;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .image-holder .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .image-holder .employee-headshot {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .shift-morning .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .shift-morning .employee-headshot {
  border: solid 3px #ffc700;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .shift-night .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .shift-night .employee-headshot {
  border: solid 3px #28282b;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .image-holder.shift-morning::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .image-holder.shift-morning::after {
  content: "\f185"; /* fa-sun */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ffc700;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .image-holder.shift-night::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .image-holder.shift-night::after {
  content: "\f186"; /* fa-moon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #28282b;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .name-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .name-holder {
  line-height: 15px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-id, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-id {
  font-size: 12px;
  color: #6d6d6d;
  line-height: 12px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-name, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-name {
  font-size: 14px;
  color: black;
  font-weight: 500;
  margin-bottom: -2px;
  margin-top: 2px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-role, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .employee-details .name-holder .employee-role {
  font-size: 12px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .type-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .type-holder .type-text, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .type-holder .type-text {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  width: 60px;
  text-align: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .type-holder .badge-core, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .type-holder .badge-core {
  background: rgba(255, 199, 0, 0.1803921569);
  color: #cfa200;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .type-holder .badge-bpo, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .type-holder .badge-bpo {
  background: #d1d1d1;
  color: black;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .client-holder {
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 200px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .client-holder .client-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .client-holder .client-label {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .client-holder .client-value, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .client-holder .client-value {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .date-holder {
  line-height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .date-holder .date-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .date-holder .date-label {
  font-size: 16px;
  color: black;
  font-weight: 500;
  margin-bottom: 3px;
  margin-top: 5px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .date-holder .date-value, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .date-holder .date-value {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .date-holder .date-count, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .date-holder .date-count {
  font-size: 14px;
  color: #daa520;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .date-holder .date-count .overdue, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .date-holder .date-count .overdue {
  color: palevioletred;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .counter-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .counter-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .counter-holder .date-count, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .counter-holder .date-count {
  font-size: 14px;
  color: #6d6d6d;
  line-height: 16px;
}
.employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .inactive-group .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .inactive-group .employee-group-wrapper .action-holder {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    max-width: 260px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .employee-page .employee-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    border-bottom: none;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
    flex-direction: column;
    border-bottom: solid 1px gainsboro;
    gap: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
    order: 1;
    justify-content: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    order: 2;
    max-width: 100%;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
    order: 3;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
    order: 4;
    align-items: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
    order: 5;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .employee-page .employee-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    border-bottom: none;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
    flex-direction: column;
    border-bottom: solid 1px gainsboro;
    gap: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
    order: 1;
    justify-content: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    order: 2;
    max-width: 100%;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
    order: 3;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
    order: 4;
    align-items: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
    order: 5;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .employee-page .employee-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .employee-page .employee-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .employee-page .employee-view-content .title-group .search-bar-group {
    max-width: 350px;
  }
  .employee-page .employee-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    border-bottom: none;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
    flex-direction: column;
    border-bottom: solid 1px gainsboro;
    gap: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
    order: 1;
    justify-content: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    order: 2;
    max-width: 100%;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
    order: 3;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
    order: 4;
    align-items: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
    order: 5;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .employee-page .employee-view-content .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .employee-page .employee-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .employee-page .employee-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .employee-page .employee-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
    flex-direction: column;
    border-bottom: solid 1px gainsboro;
    gap: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
    order: 1;
    justify-content: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    order: 2;
    max-width: 100%;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 15px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
    order: 3;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
    order: 4;
    align-items: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
    order: 5;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .employee-page .employee-view-content {
    padding: 30px 0 !important;
    padding-bottom: 0px !important;
  }
  .employee-page .employee-view-content .title-group {
    margin-bottom: 35px;
    flex-direction: column;
    margin-top: 10px;
    padding: 0 15px;
  }
  .employee-page .employee-view-content .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .employee-page .employee-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .employee-page .employee-view-content .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .employee-page .employee-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .employee-page .employee-view-content .tab-wrapper .nav-tabs .nav-item {
    width: 33.33%;
  }
  .employee-page .employee-view-content .tab-wrapper .nav-tabs .nav-item .nav-link {
    width: 100%;
    padding: 12px 0px;
    font-size: 14px;
  }
  .employee-page .employee-view-content .tab-wrapper .nav-tabs .nav-item .active {
    font-weight: 500;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content {
    padding: 30px 15px;
    margin-bottom: 30px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-title, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-title span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-title span {
    width: 40px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder {
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    border-bottom: none;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper {
    padding: 15px 20px;
    flex-direction: column;
    border-color: #b7b7b7;
    border-bottom: solid 1px #b7b7b7;
    gap: 0px;
    position: relative;
    border-radius: 5px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper:last-child, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper:last-child {
    border-color: #b7b7b7;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder {
    order: 1;
    justify-content: flex-start;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .type-holder .type-text, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .type-holder .type-text {
    padding: 3px 0px;
    border-radius: 20px;
    font-size: 10px;
    width: 50px;
    margin-bottom: 5px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details {
    order: 2;
    border-bottom: solid 1px gainsboro;
    padding-bottom: 10px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder .employee-headshot, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder .employee-headshot {
    width: 50px;
    height: 50px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-morning::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-morning::after {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-night::after, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .image-holder.shift-night::after {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-name, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-name {
    font-size: 14px;
    margin-bottom: 0px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-role, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .employee-details .name-holder .employee-role {
    font-size: 12px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder {
    order: 3;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder .client-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder .client-label {
    font-size: 14px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .client-holder .client-name, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .client-holder .client-name {
    font-size: 12px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder {
    order: 4;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-label, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-label {
    font-size: 14px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-value, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-value {
    font-size: 12px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder .date-count, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder .date-count {
    font-size: 12px;
    margin-left: 5px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .date-holder > p:nth-child(2), .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .date-holder > p:nth-child(2) {
    margin-left: auto;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder {
    order: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee {
    width: 100%;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 0;
    font-size: 12px;
    background-color: transparent;
    border: solid 1px #b7b7b7;
    color: #b7b7b7;
    padding: 5px 10px;
  }
  .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .probationary-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span, .employee-page .employee-view-content .tab-wrapper .tab-content .tab-employees-content .regular-group .group-holder .employee-group-wrapper .action-holder .evaluate-employee span {
    display: none;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .modal-header {
    padding: 15px 20px;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .modal-header .modal-title {
    font-size: 16px;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .employee-details {
    width: 100%;
    padding-right: 0px;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .employee-details p {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom: dashed 1px gainsboro;
    padding-bottom: 5px;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .employee-details p:last-child {
    border-bottom: none;
    padding-bottom: 0px;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .employee-details p strong {
    text-align: left;
  }
  .employee-page .employee-view-content #employeeEvaluationModal .employee-details p span {
    text-align: right;
  }
}
.staff-page .page-main-content {
  margin-left: 0px !important;
}
.staff-page .staff-datatables {
  width: 100%;
  margin: 30px 0;
}
.staff-page .staff-datatables .col-sm-12 {
  overflow: auto;
}
.staff-page .staff-datatables .users-json-table-wrapper {
  width: 100%;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filters {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  padding: 20px 20px 0;
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filter {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 180px;
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filter label {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 13px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select:hover {
  border-color: #bbb;
}
.staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select:focus {
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.15);
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_wrapper {
  width: 100%;
  padding: 20px;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter {
  float: none;
  width: 100%;
  margin: 0 0 20px;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  color: #333;
  font-size: 13px;
  font-weight: 600;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input {
  width: 280px;
  height: 42px;
  margin-left: 0 !important;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input::placeholder {
  color: #999;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input:hover {
  border-color: #bbb;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input:focus {
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.15);
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_scroll {
  width: 100%;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable {
  width: 100% !important;
  min-width: 950px;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th {
  padding: 14px 16px;
  background: #f8f8f8;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
  color: #555;
  font-size: 14px;
  vertical-align: middle;
  white-space: nowrap;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody tr {
  transition: background-color 0.15s ease;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody tr:hover {
  background: #fffdf2;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody tr:last-child td {
  border-bottom: none;
}
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th.sorting,
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th.sorting_asc,
.staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th.sorting_desc {
  background-color: #f8f8f8;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_info {
  display: none;
}
.staff-page .staff-datatables .users-json-table-wrapper .dataTables_paginate {
  display: none;
}
@media (max-width: 991px) {
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filters {
    gap: 12px;
    padding: 18px 18px 0;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter {
    min-width: 160px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select {
    height: 40px;
    font-size: 13px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_wrapper {
    padding: 18px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter label {
    justify-content: flex-start;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input {
    width: 300px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable {
    min-width: 900px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th {
    padding: 12px 14px;
    font-size: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody td {
    padding: 12px 14px;
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .staff-page .staff-datatables {
    margin: 20px 0;
  }
  .staff-page .staff-datatables .users-json-table-wrapper {
    border-radius: 10px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px 15px 0;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter {
    width: 100%;
    min-width: 0;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter label {
    font-size: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    padding-right: 30px;
    font-size: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_wrapper {
    padding: 15px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter {
    margin-bottom: 15px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    width: 100%;
    font-size: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input {
    width: 100%;
    height: 40px;
    margin: 0 !important;
    font-size: 13px;
    box-sizing: border-box;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable {
    min-width: 850px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th {
    padding: 11px 12px;
    font-size: 11px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody td {
    padding: 11px 12px;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filters {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px 0;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter label {
    font-size: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .users-table-filter select {
    height: 40px;
    font-size: 13px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_wrapper {
    padding: 12px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper .dataTables_filter input {
    height: 40px;
    font-size: 13px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable {
    min-width: 820px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable thead th {
    padding: 10px;
    font-size: 11px;
  }
  .staff-page .staff-datatables .users-json-table-wrapper table.dataTable tbody td {
    padding: 10px;
    font-size: 12px;
  }
}

.request-page .request-view-content .content-request {
  width: 100%;
}
.request-page .request-view-content .content-request .check-other-tab {
  padding: 15px;
  text-align: center;
  background-color: #6b6b6b;
  color: white;
  font-size: 14px;
  text-transform: uppercase;
}
.request-page .request-view-content .content-request .check-other-tab i {
  margin-right: 5px;
}
.request-page .request-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.request-page .request-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.request-page .request-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.request-page .request-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.request-page .request-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.request-page .request-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.request-page .request-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.request-page .request-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.request-page .modal-display-request .modal-dialog {
  max-width: 700px;
}
.request-page .modal-display-request .modal-content {
  border: none;
  border-radius: 0;
  border-left: 5px solid #ffc700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.request-page .modal-display-request .modal-body {
  padding: 22px;
  background: #fff;
}
.request-page .modal-display-request .modal-body .btn-close {
  position: absolute;
  right: 20px;
  font-size: 14px;
}
.request-page .modal-display-request .ticket-table {
  margin: 0;
}
.request-page .modal-display-request .ticket-table tbody tr th,
.request-page .modal-display-request .ticket-table tbody tr td {
  padding: 12px 0;
  vertical-align: top;
  border: none;
  font-size: 13px;
}
.request-page .modal-display-request .ticket-table tbody tr:not(:last-child) {
  border-bottom: 1px dashed #ececec;
}
.request-page .modal-display-request .ticket-table th {
  width: 170px;
  color: #8a8a8a;
  font-weight: 600;
  white-space: nowrap;
}
.request-page .modal-display-request .ticket-table td {
  color: #2c2c2c;
  font-weight: 600;
}
.request-page .modal-display-request #modalMessage {
  background: #fafafa;
  border: 1px solid #ececec;
  padding: 15px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  white-space: pre-wrap;
}
.request-page .modal-display-request .modal-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.request-page .modal-display-request .modal-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.request-page .modal-display-request .modal-status.pending {
  background: #f1bc00;
  color: #fff;
}
.request-page .modal-display-request .modal-status.cancelled {
  background: #bbbbbb;
  color: #000;
}
.request-page .modal-display-request .modal-status.completed {
  background: #16a34a;
  color: #fff;
}
.request-page .modal-display-request .modal-status.rejected {
  background: #fdeaea;
  color: #dc2626;
}
.request-page .modal-display-request .modal-status.In-Progress, .request-page .modal-display-request .modal-status.InProgress {
  background: #e7f1ff;
  color: #2563eb;
}
.request-page .modal-display-request .status-update-btn {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #f1f3f5;
}
.request-page .modal-display-request .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.request-page .modal-display-request .btnUpdateStatus {
  min-width: 140px;
  border: none;
  border-radius: 0;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.25s ease;
}
.request-page .modal-display-request .btnUpdateStatus:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.request-page .modal-display-request .btn-danger {
  background: #dc2626;
}
.request-page .modal-display-request .btn-danger:hover {
  background: #b91c1c;
}
.request-page .modal-display-request .btn-success {
  background: #16a34a;
}
.request-page .modal-display-request .btn-success:hover {
  background: #15803d;
}
@media (max-width: 768px) {
  .request-page .modal-display-request .modal-body {
    padding: 18px;
  }
  .request-page .modal-display-request .ticket-table th,
  .request-page .modal-display-request .ticket-table td {
    display: block;
    width: 100%;
  }
  .request-page .modal-display-request .ticket-table th {
    padding-bottom: 4px;
  }
  .request-page .modal-display-request .ticket-table td {
    padding-top: 0;
    padding-bottom: 14px;
  }
  .request-page .modal-display-request .modal-actions {
    flex-direction: column;
  }
  .request-page .modal-display-request .btnUpdateStatus {
    width: 100%;
  }
}
.request-page .status-update-notification .modal-dialog {
  max-width: 420px;
  margin: 1rem auto;
}
.request-page .status-update-notification .modal-body {
  padding: 0px;
}
.request-page .status-update-notification .modal-content {
  border: none;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}
.request-page .status-update-notification .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.request-page .status-update-notification .icon-container i {
  font-size: 100px;
  color: #ffc700;
  line-height: 1;
}
@media (max-width: 768px) {
  .request-page .status-update-notification .icon-container i {
    font-size: 90px;
  }
}
@media (max-width: 480px) {
  .request-page .status-update-notification .icon-container i {
    font-size: 70px;
  }
}
.request-page .status-update-notification .message-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}
.request-page .status-update-notification .message-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 2rem;
}
.request-page .status-update-notification .modal-btn-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 0.75rem 1.5rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.request-page .status-update-notification .modal-btn-close:hover, .request-page .status-update-notification .modal-btn-close:focus {
  background: #ffc700;
  color: #000;
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .request-page .request-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .request-page .modal-display-request .ticket-table tbody tr th,
  .request-page .modal-display-request .ticket-table tbody tr td {
    padding: 8px 0;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .request-page .request-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .request-page .request-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .request-page .request-view-content .title-group .search-bar-group {
    max-width: 350px;
  }
  .request-page .request-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .request-page .modal-display-request .ticket-table tbody tr th,
  .request-page .modal-display-request .ticket-table tbody tr td {
    padding: 5px 0;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .request-page .request-view-content .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .request-page .request-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .request-page .request-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .request-page .request-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .request-page .request-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .request-page .request-view-content .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .request-page .request-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .request-page .request-view-content .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .request-page .request-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .request-page .request-view-content h4 {
    text-align: center;
  }
  .request-page .modal-display-request .modal-dialog {
    margin: 20px 15px;
  }
  .request-page .modal-display-request .modal-dialog .modal-content {
    border-left: none;
  }
  .request-page .modal-display-request .modal-dialog .modal-content .mobile-message {
    border-bottom: none !important;
  }
  .request-page .modal-display-request .ticket-table tbody tr th,
  .request-page .modal-display-request .ticket-table tbody tr td {
    padding: 5px 0;
  }
  .request-page .modal-display-request .status-update-btn {
    margin-top: 20px;
    padding-top: 15px;
  }
  .request-page .modal-display-request .modal-actions {
    gap: 10px;
  }
  .request-page .modal-display-request .btnUpdateStatus {
    padding: 10px 20px;
    font-size: 12px;
  }
}
.referrals-page .referrals-view-content {
  position: relative;
}
.referrals-page .referrals-view-content .btn-add-new-mobile {
  display: none;
}
.referrals-page .referrals-view-content .referrals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
  margin-bottom: 15px;
}
.referrals-page .referrals-view-content .referrals-header .title-group {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}
.referrals-page .referrals-view-content .referrals-header .btn-warning {
  color: #ffffff;
  background-color: #ffc700;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 20px;
}
.referrals-page .referrals-view-content .referrals-header .btn-warning .fa-solid {
  margin-right: 5px;
}
.referrals-page .referrals-view-content .referrals-header h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}
.referrals-page .referrals-view-content .referrals-header p {
  margin: 5px 0 0;
  color: #777;
  font-size: 15px;
}
.referrals-page .referrals-view-content .referrals-container {
  display: flex;
  flex-direction: column;
  /**
  * Summary Cards
  */
  /**
  * Desktop Table
  */
  /**
  * Mobile Cards
  */
  /**
  * Tablet and Mobile
  */
  /**
  * Small Mobile
  */
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: end;
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
  height: auto;
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: center;
  width: 120px;
  justify-content: space-between;
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card span {
  color: #777;
  font-size: 14px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card #topReferral {
  font-size: 16px !important;
  line-height: 21px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card #topReferralMobile {
  display: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card strong {
  font-size: 30px;
  font-weight: 700;
  color: #000;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper {
  flex: 1;
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
  overflow-x: auto;
  width: 100%;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_wrapper {
  width: 100%;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table {
  width: 100% !important;
  min-width: 1100px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table th,
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table td {
  white-space: nowrap;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header {
  display: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .btn-mobile-summary {
  display: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .page-title-mobile {
  display: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  margin-top: 10px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .dataTables_length label {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 300px;
  margin-left: auto;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
  font-size: 14px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .btn-add-new {
  color: white;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar .search-bar-group {
    max-width: none;
    width: 100%;
  }
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge {
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-due {
  background: #fff3cd;
  color: #856404;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-initial {
  background: #e3f2fd;
  color: #1565c0;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-coaching {
  background: #fff3cd;
  color: #856404;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-client {
  background: #ede7f6;
  color: #5e35b1;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-offer {
  background: #fff8e1;
  color: #ef6c00;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-hired {
  background: #d4edda;
  color: #198754;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-failed {
  background: #f8d7da;
  color: #dc3545;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-declined {
  background: rgba(255, 0, 0, 0.2784313725);
  color: maroon;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge-secondary {
  background: #f1f3f5;
  color: #495057;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table {
  margin: 0;
  border-bottom: 0px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table thead th {
  background: #f8f8f8;
  font-size: 13px;
  padding: 20px 10px;
  color: #555;
  white-space: nowrap;
  border-bottom: 2px solid #ececec;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table tbody td {
  padding: 15px 10px;
  vertical-align: middle;
  border-bottom: 1px solid #efefef;
  font-size: 13px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table tbody .badge {
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-referrals-wrapper {
  display: none;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate {
  margin-top: 20px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .paginate_button .page-link {
  border: none;
  background: #f8f8f8;
  color: #555;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s ease;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .paginate_button .page-link:hover {
  background: #ffc700;
  color: #000;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .paginate_button.active .page-link {
  background: #ffc700;
  color: #000;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .paginate_button.disabled .page-link {
  background: #f1f1f1;
  color: #aaa;
  cursor: not-allowed;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .previous .page-link,
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .pagination .next .page-link {
  width: auto;
  padding: 0 18px;
  border-radius: 20px;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .paginate_button {
  padding: 0px !important;
}
.referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_paginate .paginate_button:hover {
  background-color: transparent;
  background: white;
  border: white;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-header {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 0px;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-header strong {
  padding-left: 3px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-header .badge {
  white-space: nowrap;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body div {
  display: flex;
  height: 50px;
  flex-direction: column;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body div small {
  font-size: 12px;
  color: #777;
  margin-bottom: 3px;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body div span {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  color: #222;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-end;
  align-self: flex-end;
  width: 100%;
}
.referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-actions button {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@media (max-width: 991px) {
  .referrals-page .referrals-view-content .referrals-container .referrals-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card strong {
    font-size: 26px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper {
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .desktop-referrals-table {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-referrals-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
  }
}
@media (max-width: 575px) {
  .referrals-page .referrals-view-content .referrals-container .referrals-summary {
    grid-template-columns: 1fr;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-header h1 {
    font-size: 22px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-header p {
    font-size: 14px;
  }
}
.referrals-page .referrals-view-content .referrals-table-wrapper .mobile-referrals-wrapper {
  display: none;
}
@media (max-width: 991px) {
  .referrals-page .referrals-view-content .referrals-table-wrapper .desktop-referrals-table {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-table-wrapper .mobile-referrals-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog {
  max-width: 430px;
  margin: 0 auto;
  padding: 0px 10px;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-content #topReferral {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-content #topReferral .top-referral-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #ececec;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-content #topReferral .top-referral-item:last-child {
  border-bottom: none;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-content #topReferral .top-referral-item .count {
  width: 36px;
  font-size: 18px;
  font-weight: 700;
  color: #ffc700;
  text-align: center;
  flex-shrink: 0;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-content #topReferral .top-referral-item .name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}
.referrals-page .referrals-view-content .top-referral-modal .modal-dialog .modal-footer small {
  text-align: center;
  line-height: 17px;
  color: #595959;
  padding: 5px 0;
}
.referrals-page .referrals-view-content .referral-action-modal .modal-dialog {
  /* Main Select2 box */
  /* Selected text */
  /* Dropdown arrow */
  /* Arrow icon */
}
.referrals-page .referrals-view-content .referral-action-modal .modal-dialog .select2-container--default .select2-selection--single {
  height: 38px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  background: #fff;
}
.referrals-page .referrals-view-content .referral-action-modal .modal-dialog .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.referrals-page .referrals-view-content .referral-action-modal .modal-dialog .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  right: 10px;
  display: none;
}
.referrals-page .referrals-view-content .referral-action-modal .modal-dialog .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #333 transparent transparent transparent;
}
.referrals-page .referrals-view-content #successModal .modal-content {
  border-radius: 16px;
  border: none;
  overflow: hidden;
}
.referrals-page .referrals-view-content #successModal .modal-header {
  background: #ffc700;
  color: #000;
  border-bottom: none;
}
.referrals-page .referrals-view-content #successModal .modal-header .btn-close {
  filter: none;
}
.referrals-page .referrals-view-content #successModal .modal-body {
  padding: 20px 30px 30px 30px;
}
.referrals-page .referrals-view-content #successModal .modal-body .btn-close {
  display: flex;
  justify-self: flex-end;
}
.referrals-page .referrals-view-content #successModal .modal-body .notification-icon {
  text-align: center;
  background-color: #ffc700;
  color: white;
  font-size: 50px;
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  align-self: center;
  justify-self: center;
  margin-bottom: 1rem;
}
.referrals-page .referrals-view-content #successModal .modal-body .notification-title {
  text-align: center;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
}
.referrals-page .referrals-view-content #successModal .modal-footer {
  border-top: none;
  padding: 0 30px 25px;
}
.referrals-page .referrals-view-content #successModal .modal-footer .btn-dark {
  border-radius: 8px;
  width: 100%;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .referrals-page .referrals-view-content .referrals-header .btn-warning {
    color: #ffffff;
    background-color: #ffc700;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 110px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .referrals-page .referrals-view-content .referrals-header .btn-warning {
    color: #ffffff;
    background-color: #ffc700;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 110px;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1099.98px) {
  .referrals-page .referrals-view-content .referrals-header {
    gap: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 100%;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .referrals-page .referrals-view-content .referrals-header {
    gap: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .referrals-page .referrals-view-content .referrals-header .btn-warning {
    position: fixed;
    right: 30px;
    bottom: 25px;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_wrapper {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header {
    display: block;
    margin-bottom: 15px;
    margin-top: 20px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group {
    max-width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge {
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
  }
  .referrals-page .referrals-view-content .btn-add-new-mobile {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .referrals-page .referrals-view-content .referrals-header {
    gap: 0;
    margin-top: 0;
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-header .btn-warning {
    position: fixed;
    right: 30px;
    bottom: 25px;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper {
    border-radius: 0px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .page-title-mobile {
    display: block;
    font-size: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group {
    max-width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .btn-mobile-summary {
    display: block;
    width: auto;
    color: white;
    font-weight: 500;
    padding: 0px 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_wrapper {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge {
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body div span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .modal-title {
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card {
    height: auto;
    background: whitesmoke;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-align: center;
    width: 100%;
    justify-content: space-between;
    border: solid 1px #dddddd;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .btn {
    display: none;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card strong {
    font-size: 30px;
    font-weight: 700;
    color: #000;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card span {
    color: black;
    font-size: 15px;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid #ececec;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item .count {
    width: 36px;
    font-size: 18px;
    font-weight: 700;
    color: #ffc700;
    text-align: center;
    flex-shrink: 0;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item .name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card:last-child {
    grid-column: 1/-1;
  }
  .referrals-page .referrals-view-content .btn-add-new-mobile {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .referrals-page .referrals-view-content .referrals-header {
    gap: 0;
    margin-top: 0;
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-header .btn-warning {
    position: fixed;
    right: 30px;
    bottom: 25px;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-summary .referral-card {
    width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper {
    border-radius: 0px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .page-title-mobile {
    display: block;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group {
    max-width: 100%;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .mobile-group-header .btn-mobile-summary {
    display: block;
    width: auto;
    color: white;
    font-weight: 500;
    padding: 0px 15px;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .referrals-toolbar {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .dataTables_wrapper {
    display: none;
  }
  .referrals-page .referrals-view-content .referrals-container .referrals-table-wrapper .badge {
    border-radius: 50px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-top: -4px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card {
    margin: 3px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-header {
    padding-bottom: 5px;
    flex-direction: row;
    justify-content: space-between;
    gap: 5px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 8px;
    margin-top: 5px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body div {
    height: auto;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body small {
    margin-bottom: 0px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-body span {
    font-size: 13px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referral-card .mobile-referral-actions button {
    height: 35px;
    font-size: 14px;
  }
  .referrals-page .referrals-view-content .referrals-container .mobile-referrals-wrapper {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .modal-title {
    font-size: 16px;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card {
    height: auto;
    background: whitesmoke;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-align: center;
    width: 100%;
    justify-content: space-between;
    border: solid 1px #dddddd;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .btn {
    display: none;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card strong {
    font-size: 30px;
    font-weight: 700;
    color: #000;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card span {
    color: black;
    font-size: 15px;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-list {
    margin-top: 8px;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 1px solid #ececec;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item .count {
    width: 36px;
    font-size: 16px;
    font-weight: 700;
    color: #ffc700;
    text-align: center;
    flex-shrink: 0;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card .top-referral-item .name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }
  .referrals-page .referrals-view-content .referral-summary-modal .modal-dialog .modal-content .referrals-summary .referral-card:last-child {
    grid-column: 1/-1;
  }
  .referrals-page .referrals-view-content .btn-add-new-mobile {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}
.open-submission-page .content-open-submission {
  width: 100%;
}
.open-submission-page .content-open-submission .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.open-submission-page .content-open-submission .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.open-submission-page .content-open-submission .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.open-submission-page .content-open-submission .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open-submission-page .content-open-submission .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.open-submission-page .content-open-submission .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.open-submission-page .content-open-submission .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.open-submission-page .content-open-submission .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.open-submission-page .content-open-submission .open-submissions-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  position: relative;
  padding-bottom: 50px;
  height: 100%;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card {
  height: 200px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  border: solid 1px transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card:hover {
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-method {
  margin: 0;
  background-color: #28282b;
  color: white;
  width: max-content;
  padding: 2px 15px;
  font-size: 12px;
  border-radius: 30px;
  margin-bottom: 8px;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Facebook {
  background-color: #1877F2;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Facebook::before {
  content: "\f082";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  margin-right: 3px;
  display: inline-block;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .LinkedIn {
  background-color: #0A66C2;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .LinkedIn::before {
  content: "\f08c";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  margin-right: 3px;
  display: inline-block;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Fair {
  background-color: #1fa51f;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Fair::before {
  content: "\f0b1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 3px;
  display: inline-block;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Indeed {
  background-color: #003A9B;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Indeed::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 3px;
  display: inline-block;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Referral {
  background-color: #ffc700;
  color: black;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .Referral::before {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 3px;
  display: inline-block;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-info {
  line-height: 18px;
  display: flex;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-info .label-info {
  margin: 0;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 500;
  width: auto;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-info .applicant-email {
  margin: 0;
  font-size: 14px;
  color: black;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-info .applicant-resume {
  margin: 0;
  font-size: 14px;
  color: black;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .info-boarder {
  border-top: solid 1px gainsboro;
  padding-top: 8px;
  width: 100%;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-industry {
  margin: 0;
}
.open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-role {
  margin: 0;
  font-size: 14px;
  color: black;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.open-submission-page .view-open-submission .modal-dialog {
  max-width: 700px;
}
.open-submission-page .view-open-submission .modal-content {
  border: none;
  border-radius: 0;
  border-left: 5px solid #ffc700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.open-submission-page .view-open-submission .modal-header {
  background: #fff;
  border-bottom: 1px solid #f1f3f5;
  padding: 20px 22px;
}
.open-submission-page .view-open-submission .modal-header .modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.open-submission-page .view-open-submission .modal-header .btn-close {
  font-size: 13px;
  opacity: 0.7;
}
.open-submission-page .view-open-submission .modal-header .btn-close:hover {
  opacity: 1;
}
.open-submission-page .view-open-submission .modal-body {
  padding: 22px;
  background: #fff;
}
.open-submission-page .view-open-submission .applicant-table {
  margin: 0;
}
.open-submission-page .view-open-submission .applicant-table tbody tr th,
.open-submission-page .view-open-submission .applicant-table tbody tr td {
  border: none;
  padding: 12px 0;
  vertical-align: top;
  font-size: 13px;
}
.open-submission-page .view-open-submission .applicant-table tbody tr:not(:last-child) {
  border-bottom: 1px dashed #ececec;
}
.open-submission-page .view-open-submission .applicant-table th {
  width: 180px;
  color: #8a8a8a;
  font-weight: 600;
  white-space: nowrap;
}
.open-submission-page .view-open-submission .applicant-table td {
  color: #2c2c2c;
  font-weight: 600;
}
.open-submission-page .view-open-submission .applicant-table td a {
  color: #2563eb;
  text-decoration: none;
}
.open-submission-page .view-open-submission .applicant-table td a:hover {
  text-decoration: underline;
}
.open-submission-page .view-open-submission .method-details p {
  margin: 0;
}
.open-submission-page .view-open-submission .method-details .add-details {
  margin-top: 5px;
  color: #939393;
  font-size: 12px;
}
.open-submission-page .view-open-submission #openSubmissionIntroduction {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 4px;
  padding: 15px;
  font-size: 13px;
  line-height: 1.7;
  color: #444;
  white-space: pre-wrap;
}
.open-submission-page .view-open-submission #introductionRowTitle th {
  padding-top: 18px;
  padding-bottom: 8px;
  color: #222;
  font-size: 14px;
}
.open-submission-page .view-open-submission .submission-footer {
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid #f1f3f5;
  font-size: 12px;
  color: #939393;
  text-align: center;
}
@media (max-width: 768px) {
  .open-submission-page .view-open-submission .modal-dialog {
    margin: 20px 15px;
  }
  .open-submission-page .view-open-submission .modal-header {
    padding: 18px;
  }
  .open-submission-page .view-open-submission .modal-body {
    padding: 18px;
  }
  .open-submission-page .view-open-submission .applicant-table th,
  .open-submission-page .view-open-submission .applicant-table td {
    display: block;
    width: 100%;
  }
  .open-submission-page .view-open-submission .applicant-table th {
    padding-bottom: 5px;
  }
  .open-submission-page .view-open-submission .applicant-table td {
    padding-top: 0;
    padding-bottom: 14px;
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .open-submission-page .content-open-submission .title-group {
    flex-direction: column;
    width: 100%;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .open-submission-page .content-open-submission .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .open-submission-page .content-open-submission .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group {
    max-width: 350px;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .open-submission-page .content-open-submission .view-open-submission .btn-close {
    font-size: 12px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog {
    padding: 0px 15px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header {
    padding: 13px 20px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 16px !important;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-body {
    font-size: 14px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table {
    overflow: hidden;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table tr {
    display: flex;
    flex-direction: column;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table th {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table td {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table .introduction-text {
    padding: 15px 15px !important;
    font-size: 14px;
    line-height: 21px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .submission-footer {
    font-size: 11px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .open-submission-page .content-open-submission .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .open-submission-page .content-open-submission .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group {
    max-width: 100%;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .open-submission-page .content-open-submission .view-open-submission .btn-close {
    font-size: 12px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog {
    padding: 0px 15px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header {
    padding: 13px 20px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 16px !important;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-body {
    font-size: 14px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table {
    overflow: hidden;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table tr {
    display: flex;
    flex-direction: column;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table th {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table td {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table .introduction-text {
    padding: 15px 15px !important;
    font-size: 14px;
    line-height: 21px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .submission-footer {
    font-size: 11px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .open-submission-page .content-open-submission .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .open-submission-page .content-open-submission .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group {
    max-width: 100%;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .open-submission-page .content-open-submission .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper {
    display: flex;
    flex-direction: column;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper .submission-card {
    height: auto;
  }
  .open-submission-page .content-open-submission .open-submissions-wrapper .submission-card .applicant-name {
    font-size: 16px;
    line-height: 16px;
  }
  .open-submission-page .content-open-submission .view-open-submission .btn-close {
    font-size: 12px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header {
    padding: 13px 20px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-header .modal-title {
    font-size: 16px !important;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .modal-content .modal-body {
    font-size: 14px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table {
    overflow: hidden;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table tr {
    display: flex;
    flex-direction: column;
    border-top: none;
    border-right: none;
    border-left: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table th {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table td {
    padding: 5px 8px;
    width: 100%;
    border: none;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .applicant-table .introduction-text {
    padding: 15px 15px !important;
    font-size: 14px;
    line-height: 21px;
  }
  .open-submission-page .content-open-submission .view-open-submission .modal-dialog .submission-footer {
    font-size: 11px;
  }
  .open-submission-page .view-open-submission .modal-content {
    border-left: none;
  }
  .open-submission-page .view-open-submission .modal-content #introductionRowTitle {
    border-bottom: none !important;
  }
  .open-submission-page .view-open-submission .modal-content #introductionRowContent {
    border-bottom: none !important;
  }
}
.team-building-page {
  position: relative;
}
.team-building-page .floating-reminder {
  background-color: white;
  width: 550px;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9;
  border-radius: 10px;
  border: solid 2px #ffc700;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.team-building-page .floating-reminder .fr-wrapper {
  position: relative;
  padding: 30px;
}
.team-building-page .floating-reminder .fr-wrapper .btn-dark {
  right: 15px;
  top: 15px;
  position: absolute;
  padding: 3px 8px;
  font-size: 14px;
  border-radius: 20px;
  background-color: #434343;
  border: transparent;
}
.team-building-page .floating-reminder .fr-wrapper .countdown-title {
  color: black;
  font-size: 27px;
  font-weight: bold;
}
.team-building-page .floating-reminder .fr-wrapper .countdown-text {
  color: black;
  font-size: 16px;
  margin-top: 5px;
}
.team-building-page .section-title {
  text-align: center;
  font-size: 50px;
  font-weight: bold;
}
.team-building-page .section-text {
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
  line-height: 28px;
}
.team-building-page .navigation-section {
  padding: 10px 0px;
  background-color: #28282b;
  position: fixed;
  top: -100px; /* Hidden above viewport */
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  z-index: 9999;
}
.team-building-page .navigation-section .header-items {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.team-building-page .navigation-section .header-items .header-segment .header-logo {
  width: 100%;
  max-width: 80px;
}
.team-building-page .navigation-section .header-items .header-segment .nav-items {
  font-size: 20px;
  color: white;
  font-weight: 500;
  margin-left: 20px;
  text-decoration: none;
}
.team-building-page .navigation-section .header-items .header-segment .nav-items:hover {
  cursor: pointer;
  opacity: 0.6;
}
.team-building-page .navigation-section.show {
  top: 0;
}
.team-building-page .banner-section {
  padding: 100px 0px;
  scroll-margin-top: 70px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.team-building-page .banner-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://guerillacareers.com/wp-content/uploads/2026/06/all-out-team-building-banner.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px);
  transform: scale(1.1); /* Prevents blurry edges from showing */
  z-index: -1;
}
.team-building-page .banner-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.1490196078) 170px);
  z-index: -1;
}
.team-building-page .banner-section .custom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.team-building-page .banner-section .custom-container .allout-logo {
  width: 100%;
  max-width: 320px;
}
.team-building-page .banner-section .custom-container .banner-title {
  font-size: 60px;
  color: #ffc700;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.team-building-page .banner-section .custom-container .banner-text {
  font-size: 22px;
  color: white;
}
.team-building-page .banner-section .custom-container .banner-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background-color: rgba(245, 245, 245, 0.631372549);
  margin-top: 30px;
  border-radius: 15px;
}
.team-building-page .banner-section .custom-container .banner-details .details-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-right: solid 1px gray;
  padding: 30px 10px;
  width: 300px;
}
.team-building-page .banner-section .custom-container .banner-details .details-box:last-child {
  border-right: none;
}
.team-building-page .banner-section .custom-container .banner-details .details-box .details-title .fa-solid {
  margin-right: 5px;
}
.team-building-page .banner-section .custom-container .banner-details .details-box .details-value {
  font-size: 30px;
  font-weight: bold;
}
.team-building-page .about-section {
  padding: 100px 0px;
  background-color: white;
  scroll-margin-top: 70px;
}
.team-building-page .about-section .about-wrapper {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.team-building-page .about-section .about-wrapper .about-item {
  border-radius: 15px;
  overflow: hidden;
  height: 450px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.team-building-page .about-section .about-wrapper .about-item .allout-about {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.team-building-page .about-section .about-wrapper .about-item .hidden-details {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
  background-color: #ffc700;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.team-building-page .about-section .about-wrapper .about-item:hover .hidden-details {
  opacity: 1 !important;
}
.team-building-page .transportation-section {
  padding: 100px 0px;
  background-color: whitesmoke;
  scroll-margin-top: 70px;
}
.team-building-page .transportation-section .location-wrapper {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.team-building-page .transportation-section .location-wrapper .location-group:first-child {
  margin-right: 30px;
}
.team-building-page .transportation-section .location-wrapper .location-group .map-container {
  overflow: hidden;
  border-radius: 15px;
  border: solid 1px gainsboro;
}
.team-building-page .transportation-section .location-wrapper .location-group .map-container iframe {
  display: block;
  width: 100%;
  height: 500px;
}
.team-building-page .transportation-section .location-wrapper .location-group .service-title {
  font-size: 25px;
  font-weight: bold;
  color: black;
  margin-top: 20px;
}
.team-building-page .transportation-section .location-wrapper .location-group .service-text {
  font-size: 18px;
  color: #3d3d3d;
  margin-bottom: 30px;
}
.team-building-page .transportation-section .location-wrapper .location-group .form-holder .btn-submit {
  margin-top: 20px;
  width: 100%;
}
.team-building-page .transportation-section .location-wrapper .location-group .form-holder .wpcf7-spinner {
  display: none;
}
.team-building-page .transportation-section .done-survey {
  grid-template-columns: repeat(1, 1fr) !important;
}
.team-building-page .transportation-section .done-survey .hide-form {
  display: none;
}
.team-building-page .reminders-section {
  padding: 100px 0px;
  background-color: #ffc700;
  scroll-margin-top: 70px;
}
.team-building-page .reminders-section .section-title {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.team-building-page .reminders-section .section-text {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.team-building-page .reminders-section .reminder-labels {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 50px;
}
.team-building-page .reminders-section .reminder-labels .item-label {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.team-building-page .reminders-section .reminder-labels .show-mobile {
  display: none;
}
.team-building-page .reminders-section .reminder-wrapper {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos {
  padding: 20px;
  height: 300px;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  color: #28282b;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-icon {
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .allout-reminder-icon {
  width: 100%;
  max-width: 60px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-text {
  font-size: 18px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts {
  padding: 20px;
  height: 300px;
  background-color: #28282b;
  border-radius: 10px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-icon {
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .allout-reminder-icon {
  width: 100%;
  max-width: 60px;
  background-color: white;
  border-radius: 40px;
}
.team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-text {
  font-size: 18px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .guidelines-wrapper {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.team-building-page .reminders-section .guidelines-wrapper .swim-guidelines {
  padding: 20px;
  height: 300px;
  background-color: #4b9bf2;
  border-radius: 10px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-icon {
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .allout-reminder-icon {
  width: 100%;
  max-width: 60px;
}
.team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-text {
  font-size: 18px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .guidelines-wrapper .additional-guidelines {
  padding: 20px;
  height: 300px;
  background-color: whitesmoke;
  border-radius: 10px;
  text-align: center;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-icon {
  font-size: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .allout-reminder-icon {
  width: 100%;
  max-width: 60px;
}
.team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-text {
  font-size: 18px;
  margin-bottom: 20px;
}
.team-building-page .gallery-section {
  padding: 100px 0px;
  background-color: white;
  text-align: center;
  scroll-margin-top: 70px;
}
.team-building-page .gallery-section .venue-logo {
  margin-top: 30px;
}
.team-building-page .gallery-section .team-building-gallery {
  width: 100%;
  padding: 50px 0;
}
.team-building-page .gallery-section .team-building-gallery .swiper-slide {
  width: 400px;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
}
.team-building-page .gallery-section .team-building-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}
.team-building-page .gallery-section .team-building-gallery .swiper-button-next,
.team-building-page .gallery-section .team-building-gallery .swiper-button-prev {
  color: #ffffff;
}
.team-building-page .gallery-section .team-building-gallery .swiper-pagination-bullet-active {
  background: #ffcb05;
}

/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .team-building-page .banner-section .custom-container .banner-title {
    font-size: 55px;
  }
  .team-building-page .banner-section .custom-container .banner-text {
    padding: 0px 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos {
    height: auto;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts {
    height: auto;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines {
    height: auto;
  }
  .team-building-page .transportation-section .location-wrapper .location-group:first-child {
    margin-right: 0px;
  }
  .team-building-page .gallery-section .team-building-gallery .swiper-slide {
    height: 460px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .team-building-page .section-title {
    font-size: 40px;
  }
  .team-building-page .banner-section .custom-container .banner-title {
    font-size: 40px;
  }
  .team-building-page .banner-section .custom-container .banner-text {
    padding: 0px 10px;
    font-size: 18px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box {
    width: 230px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box .details-value {
    font-size: 25px;
    font-weight: bold;
  }
  .team-building-page .about-section .about-wrapper .about-item {
    height: 300px;
  }
  .team-building-page .reminders-section .reminder-labels .hide-mobile {
    display: none;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile {
    display: block;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-check {
    margin-right: 10px;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-xmark {
    margin-left: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .transportation-section .location-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group:first-child {
    margin-right: 0px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .service-title {
    font-size: 20px;
    font-weight: bold;
    color: black;
    margin-top: 20px;
  }
  .team-building-page .gallery-section .team-building-gallery .swiper-slide {
    height: 350px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .team-building-page .section-title {
    font-size: 30px;
  }
  .team-building-page .section-text {
    font-size: 16px;
    line-height: 25px;
  }
  .team-building-page .floating-reminder {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    height: max-content;
    width: 90%;
    z-index: 9999;
  }
  .team-building-page .floating-reminder .fr-wrapper {
    padding: 25px;
  }
  .team-building-page .floating-reminder .fr-wrapper .countdown-title {
    font-size: 24px;
  }
  .team-building-page .floating-reminder .fr-wrapper .countdown-text {
    font-size: 15px;
  }
  .team-building-page .navigation-section .hide-mobile {
    display: none !important;
  }
  .team-building-page .navigation-section .header-items .header-segment {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .team-building-page .navigation-section .header-items .header-segment .nav-items {
    margin-left: 0px;
  }
  .team-building-page .navigation-section.show {
    top: auto;
    bottom: 0;
    padding: 20px 0px;
  }
  .team-building-page .banner-section {
    padding: 60px 0px;
  }
  .team-building-page .banner-section .custom-container .allout-logo {
    width: 100%;
    max-width: 230px;
  }
  .team-building-page .banner-section .custom-container .banner-title {
    font-size: 30px;
  }
  .team-building-page .banner-section .custom-container .banner-text {
    padding: 0px 10px;
    font-size: 16px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box {
    width: 160px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box .details-value {
    font-size: 18px;
    font-weight: bold;
  }
  .team-building-page .about-section {
    padding: 60px 0px;
  }
  .team-building-page .about-section .about-wrapper .about-item {
    height: 220px;
  }
  .team-building-page .reminders-section {
    padding: 60px 0px;
  }
  .team-building-page .reminders-section .reminder-labels .item-label {
    font-size: 20px;
  }
  .team-building-page .reminders-section .reminder-labels .hide-mobile {
    display: none;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile {
    display: block;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-check {
    margin-right: 10px;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-xmark {
    margin-left: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-text {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-text {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-text {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines {
    height: auto;
    justify-content: flex-start;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-icon {
    margin-bottom: 20px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-text {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .team-building-page .transportation-section {
    padding: 60px 0px;
  }
  .team-building-page .transportation-section .location-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group:first-child {
    margin-right: 0px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .service-title {
    font-size: 18px;
    font-weight: bold;
    color: black;
    margin-top: 20px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .service-text {
    font-size: 16px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .map-container iframe {
    display: block;
    width: 100%;
    height: 400px;
  }
  .team-building-page .transportation-section .location-wrapper .form-input .form-label {
    font-size: 16px;
    line-height: 24px;
  }
  .team-building-page .gallery-section {
    padding: 60px 0px;
  }
  .team-building-page .gallery-section .team-building-gallery .swiper-slide {
    height: 250px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .team-building-page .section-title {
    font-size: 26px;
    line-height: 30px;
  }
  .team-building-page .section-text {
    font-size: 16px;
    line-height: 25px;
  }
  .team-building-page .floating-reminder {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    height: max-content;
    width: 95%;
    z-index: 9999;
  }
  .team-building-page .floating-reminder .fr-wrapper {
    padding: 20px;
  }
  .team-building-page .floating-reminder .fr-wrapper .countdown-title {
    font-size: 20px;
  }
  .team-building-page .floating-reminder .fr-wrapper .countdown-text {
    font-size: 14px;
  }
  .team-building-page .navigation-section .hide-mobile {
    display: none !important;
  }
  .team-building-page .navigation-section .header-items .header-segment {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .team-building-page .navigation-section .header-items .header-segment .nav-items {
    margin-left: 0px;
    font-size: 15px;
  }
  .team-building-page .navigation-section.show {
    top: auto;
    bottom: 0;
    padding: 20px 0px;
  }
  .team-building-page .banner-section {
    padding: 60px 0px;
  }
  .team-building-page .banner-section .custom-container .allout-logo {
    width: 100%;
    max-width: 200px;
  }
  .team-building-page .banner-section .custom-container .banner-title {
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 15px;
  }
  .team-building-page .banner-section .custom-container .banner-text {
    padding: 0px 10px;
    font-size: 16px;
  }
  .team-building-page .banner-section .custom-container .banner-details {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box {
    width: auto;
    padding: 20px 10px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box .details-title {
    font-size: 14px;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box .details-value {
    font-size: 16px;
    font-weight: bold;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box:nth-child(2) {
    border-right: none;
  }
  .team-building-page .banner-section .custom-container .banner-details .details-box:last-child:nth-child(odd) {
    grid-column: span 2;
    border-top: solid 1px gray;
  }
  .team-building-page .about-section {
    padding: 60px 0px;
  }
  .team-building-page .about-section .about-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .team-building-page .about-section .about-wrapper .about-item {
    height: 220px;
  }
  .team-building-page .about-section .about-wrapper .about-item:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  .team-building-page .reminders-section {
    padding: 60px 0px;
  }
  .team-building-page .reminders-section .reminder-labels .item-label {
    font-size: 18px;
  }
  .team-building-page .reminders-section .reminder-labels .hide-mobile {
    display: none;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile {
    display: block;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-check {
    margin-right: 10px;
  }
  .team-building-page .reminders-section .reminder-labels .show-mobile .fa-circle-xmark {
    margin-left: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group {
    gap: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos {
    height: auto;
    justify-content: flex-start;
    padding: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-icon {
    margin-bottom: 5px;
    margin-top: 0px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .allout-reminder-icon {
    width: 100%;
    max-width: 40px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-dos .reminder-text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts {
    height: auto;
    justify-content: flex-start;
    padding: 10px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-icon {
    margin-bottom: 5px;
    margin-top: 0px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .allout-reminder-icon {
    width: 100%;
    max-width: 40px;
  }
  .team-building-page .reminders-section .reminder-wrapper .reminder-group .reminder-item-donts .reminder-text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .team-building-page .reminders-section .guidelines-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines {
    height: auto;
    justify-content: flex-start;
    padding: 10px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-icon {
    margin-bottom: 5px;
    margin-top: 0px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .allout-reminder-icon {
    width: 100%;
    max-width: 40px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .swim-guidelines .reminder-text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines {
    height: auto;
    justify-content: flex-start;
    padding: 10px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-icon {
    margin-bottom: 5px;
    margin-top: 0px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .allout-reminder-icon {
    width: 100%;
    max-width: 40px;
  }
  .team-building-page .reminders-section .guidelines-wrapper .additional-guidelines .reminder-text {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .team-building-page .transportation-section {
    padding: 60px 0px;
  }
  .team-building-page .transportation-section .location-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group:first-child {
    margin-right: 0px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .service-title {
    font-size: 18px;
    font-weight: bold;
    color: black;
    margin-top: 20px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .service-text {
    font-size: 16px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .map-container iframe {
    display: block;
    width: 100%;
    height: 320px;
  }
  .team-building-page .transportation-section .location-wrapper .location-group .form-holder .btn-submit {
    margin-top: 20px;
    width: 100%;
    font-size: 15px;
    padding: 8px;
  }
  .team-building-page .transportation-section .location-wrapper .form-input .form-label {
    font-size: 16px;
    line-height: 24px;
  }
  .team-building-page .gallery-section {
    padding: 60px 0px;
  }
  .team-building-page .gallery-section .team-building-gallery .swiper-slide {
    height: 250px;
  }
}
.announcement-page .announcement-view-content {
  display: flex;
  align-items: flex-start;
}
.announcement-page .announcement-view-content .section-title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.announcement-page .announcement-view-content .section-title .fa-solid {
  margin-right: 8px;
}
.announcement-page .announcement-view-content .bulletin-section {
  flex: 1;
  padding-right: 50px;
  overflow-y: auto;
}
.announcement-page .announcement-view-content .bulletin-section .section-content {
  margin-bottom: 40px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items {
  display: flex;
  flex-direction: column;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .btn-see-more {
  text-align: center;
  max-width: 300px;
  width: 100%;
  align-self: center;
  background-color: #e5b300;
  border-color: #e5b300;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper {
  border-radius: 15px;
  overflow: hidden;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
  height: 400px;
  padding: 40px;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .backdrop {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4588235294);
  pointer-events: none;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .new-label {
  position: absolute;
  top: 20px;
  right: 30px;
  background: white;
  color: black;
  padding: 5px 15px;
  border-radius: 25px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .new-label .fa-solid {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group {
  z-index: 1;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
  font-size: 35px;
  line-height: 40px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
  color: white;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 30px;
  width: 100%;
  padding: 0px 50px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 25px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .carousel-control-next, .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .carousel-control-prev {
  width: 10%;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .today-event {
  display: none;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event {
  display: none;
  position: relative;
  overflow: hidden;
  background: #f1cb29; /* your base color */
  color: white;
  border: none !important;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .date-tag {
  display: flex;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .date-tag .event-status {
  background-color: white;
  color: black;
  padding: 5px 15px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 10px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .date-tag .event-status .fa-solid {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .date-tag .future-event-date {
  background-color: white;
  color: black;
  padding: 5px 15px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .date-tag .future-event-date .fa-solid {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 2.5s infinite;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .details-holder .announcement-title {
  color: white;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .details-holder .event-link {
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 8px 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .future-event .details-holder .event-link .fa-solid {
  margin-left: 5px;
}
@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .past-event .past-event-date {
  background-color: gainsboro;
  color: black;
  padding: 5px 15px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
}
.announcement-page .announcement-view-content .bulletin-section .section-content .section-items .past-event .past-event-date .fa-solid {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .calendar-section {
  margin-top: 45px;
  width: 350px;
  align-self: flex-start;
}
.announcement-page .announcement-view-content .calendar-section .section-content {
  margin-bottom: 30px;
  width: 100%;
  max-width: 100%;
  background-color: white;
  border: solid 1px gainsboro;
  border-radius: 10px;
  overflow: hidden;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-title {
  padding: 10px 15px;
  background-color: #ffc700;
  color: #28282b;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-title .fa-solid {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items {
  padding: 0px 15px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .no-celebrant {
  padding: 30px 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: dashed 2px #e7e7e7;
  font-size: 16px;
  font-weight: 500;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .no-celebrant .fa-solid {
  margin-right: 10px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .section-label {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper {
  border: solid 1px gainsboro;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail {
  border: solid 1px gainsboro;
  padding: 10px;
  display: flex;
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  animation: pulse-grow 2.5s infinite;
  transition: transform 0.3s ease;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 2.5s infinite;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 9;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .event-status {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 13px;
  border-radius: 5px;
  border: solid 1px gainsboro;
  font-weight: 500;
  text-transform: uppercase;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .event-status .fa-solid {
  margin-right: 3px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .today-event-date {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
  border: solid 1px gainsboro;
  font-weight: 500;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .today-event-date .fa-solid {
  margin-right: 3px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .future-event-date {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: 5px;
  border: solid 1px #efefef;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .future-event-date .fa-solid {
  margin-right: 3px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .events-img-thumbnail .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .event-details {
  padding: 20px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .event-details .event-details-text {
  z-index: 9;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .event-details .event-details-text .event-title-text {
  color: black;
  font-size: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 25px;
  margin-bottom: 5px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .event-details .event-details-text .event-info-text {
  color: #454545;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .event-wrapper .event-details .event-details-text .event-link {
  width: 100%;
  margin-top: 15px;
  font-size: 14px;
}
@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
@keyframes pulse-grow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  margin-bottom: 15px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-social {
  padding: 10px;
  background-color: transparent;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: 16px;
  text-decoration: none;
  color: black;
  text-align: center;
  font-weight: 500;
  border: solid 1px gainsboro;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-social:hover {
  background: white;
  color: #000000;
  cursor: pointer;
  border: solid 1px gainsboro;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-social .fab {
  margin-right: 5px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-social:last-child {
  margin-bottom: 0px;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-facebook {
  background: linear-gradient(135deg, #1877f2, #42a5f5, #90caf9);
  color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-instagram {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-linkedin {
  background: linear-gradient(135deg, #004182, #0a66c2);
  color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-youtube {
  background: linear-gradient(135deg, #ff0000, #5b0000);
  color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content .section-items .social-wrapper .tab-tiktok {
  background: linear-gradient(135deg, #25f4ee 0%, #000000 50%, #fe2c55 100%);
  color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content .no-coming-up {
  padding: 30px 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: dashed 2px #e7e7e7;
  font-size: 16px;
  font-weight: 500;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.announcement-page .announcement-view-content .calendar-section .section-content-event {
  border: none;
  background-color: white;
}
.announcement-page .announcement-view-content .calendar-section .section-content-event .section-title {
  display: none;
}
.announcement-page .announcement-view-content .calendar-section .section-content-event .section-items {
  padding: 0px;
}
.announcement-page .announcement-view-content .calendar-section .section-content-event .section-items .event-wrapper {
  margin: 0px;
}
.announcement-page .announcement-view-content .highlight-wrapper {
  padding: 25px;
  border: solid 1px gainsboro;
  border-radius: 15px;
  margin-bottom: 30px;
  background-color: white;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.announcement-page .announcement-view-content .highlight-wrapper .image-holder {
  width: 100%;
  max-width: 200px;
  height: 200px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  position: relative;
}
.announcement-page .announcement-view-content .highlight-wrapper .image-holder .marketing-category {
  position: absolute;
  background-color: white;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  font-size: 14px;
  border-radius: 15px;
  width: 100%;
  max-width: 50px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.announcement-page .announcement-view-content .highlight-wrapper .image-holder .marketing-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder {
  margin-left: 30px;
  padding-right: 30px;
  width: 100%;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title-group .date-text {
  text-align: right;
  font-size: 14px;
  margin-top: 5px;
  color: #4f4f4f;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title-group .date-text i {
  margin-right: 7px;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title {
  font-size: 25px;
  font-weight: bold;
  color: black;
  line-height: 30px;
  margin-bottom: 10px;
  margin-top: 10px;
  flex: 1;
  padding-right: 20px;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
  font-size: 16px;
  color: black;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .event-link {
  font-size: 15px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 5px 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.announcement-page .announcement-view-content .highlight-wrapper .details-holder .event-link .fa-solid {
  margin-left: 5px;
}
.announcement-page .desktop-responsive-container {
  display: flex;
  align-items: flex-start;
}
.announcement-page .events-modal-mobile .modal-body {
  padding: 0px;
  position: relative;
}
.announcement-page .events-modal-mobile .modal-body .btn-hide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -50px;
  z-index: 9;
  font-size: 12px;
  text-transform: uppercase;
  padding: 4px 30px;
  background-color: rgba(255, 255, 255, 0.2705882353);
  color: white;
}
.announcement-page .events-modal-mobile .section-content {
  width: 100%;
  max-width: 100%;
  background-color: white;
  border: solid 1px gainsboro;
  border-radius: 10px;
  overflow: hidden;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail {
  padding: 10px;
  display: flex;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: shine 2.5s infinite;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 9;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .event-status {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 13px;
  border-radius: 5px;
  border: solid 1px gainsboro;
  font-weight: 500;
  text-transform: uppercase;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .event-status .fa-solid {
  margin-right: 3px;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .today-event-date {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 14px;
  border-radius: 5px;
  border: solid 1px gainsboro;
  font-weight: 500;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .today-event-date .fa-solid {
  margin-right: 3px;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .future-event-date {
  background-color: #ffffff;
  color: #000000;
  padding: 4px 12px;
  width: fit-content;
  margin-bottom: 10px;
  font-size: 12px;
  border-radius: 5px;
  border: solid 1px #efefef;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .date-tag .future-event-date .fa-solid {
  margin-right: 3px;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .events-img-thumbnail .backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .event-details {
  padding: 20px;
  padding-bottom: 30px;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .event-details .event-details-text {
  z-index: 9;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .event-details .event-details-text .event-title-text {
  color: black;
  font-size: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  line-height: 25px;
  margin-bottom: 5px;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .event-details .event-details-text .event-info-text {
  color: #454545;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announcement-page .events-modal-mobile .section-content .section-items .event-wrapper .event-details .event-details-text .event-link {
  width: 100%;
  margin-top: 15px;
  font-size: 14px;
}
@keyframes shine {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
@keyframes pulse-grow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.announcement-page .events-modal-mobile .section-content-event {
  border: none;
  background-color: white;
}
.announcement-page .events-modal-mobile .section-content-event .section-title {
  display: none;
}
.announcement-page .events-modal-mobile .section-content-event .section-items {
  padding: 0px;
}
.announcement-page .events-modal-mobile .section-content-event .section-items .event-wrapper {
  margin: 0px;
}
.announcement-page .celebration-wrapper .celebration-list .celebration-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: solid 1px #e7e7e7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.announcement-page .celebration-wrapper .celebration-list .celebration-item .icon-frame {
  width: 45px;
  height: 45px;
  overflow: hidden;
  border-radius: 50px;
  margin-right: 10px;
  border: solid 1px white;
}
.announcement-page .celebration-wrapper .celebration-list .celebration-item .celebration-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 0px;
  margin-right: 0px;
  margin-left: 0px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.announcement-page .celebration-wrapper .celebration-list .celebration-item .celebration-text .celebration-name {
  font-size: 16px;
  font-weight: 500;
}
.announcement-page .celebration-wrapper .celebration-list .birthday-item {
  background-image: url("../images/yellow-background.jpg");
}
.announcement-page .celebration-wrapper .celebration-list .birthday-item .celebration-text .celebration-name {
  color: #28282b;
}
.announcement-page .celebration-wrapper .celebration-list .anniversary-item {
  background-image: url("../images/black-background.jpg");
}
.announcement-page .celebration-wrapper .celebration-list .anniversary-item .celebration-text .celebration-name {
  color: white;
}
.announcement-page .btn-celebration-view-mobile {
  color: white;
  font-size: 24px;
  width: 60px;
  height: 60px;
  position: fixed;
  right: -5px;
  bottom: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: none;
}
.announcement-page .btn-celebration-view-mobile:hover {
  color: white;
}
.announcement-page .celebration-view-modal .modal-body .btn-hide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -50px;
  z-index: 9;
  font-size: 12px;
  text-transform: uppercase;
  padding: 4px 30px;
  background-color: rgba(255, 255, 255, 0.2705882353);
  color: white;
}
.announcement-page .celebration-view-modal .section-title {
  font-size: 17px !important;
  margin-bottom: 25px;
  margin-top: 10px;
  text-align: center;
}
.announcement-page .celebration-view-modal .section-label {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
}
.announcement-page .celebration-view-modal .no-celebrant {
  padding: 120px 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: dashed 2px #e7e7e7;
  font-size: 16px;
  font-weight: 500;
  color: gray;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .calendar-section {
    width: 300px;
    margin-top: 55px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 25px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 450px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 38px;
    line-height: 43px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 16px;
    padding: 0px 25px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 15px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content-celebration {
    display: none;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .desktop-responsive-container .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .desktop-responsive-container .bulletin-section .section-content {
    margin-bottom: 25px;
  }
  .announcement-page .desktop-responsive-container .calendar-section {
    width: 100%;
    margin-top: 0px;
    display: flex;
    gap: 20px;
    display: none;
  }
  .announcement-page .desktop-responsive-container .calendar-section .event-desktop-wrapper {
    flex: 1;
  }
  .announcement-page .desktop-responsive-container .calendar-section .event-desktop-wrapper .section-items .event-wrapper .event-details .event-details-text .event-info-text {
    font-size: 16px;
  }
  .announcement-page .desktop-responsive-container .calendar-section .section-content-celebration {
    max-width: 400px;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .calendar-section {
    width: 100%;
    margin-top: 30px;
    display: none;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content-celebration {
    display: none;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content {
    margin-bottom: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 450px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 38px;
    line-height: 43px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 16px;
    padding: 0px 25px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 15px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
    font-size: 16px;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .desktop-responsive-container .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .desktop-responsive-container .bulletin-section .section-content {
    margin-bottom: 25px;
  }
  .announcement-page .desktop-responsive-container .calendar-section {
    display: none;
    width: 100%;
    margin-top: 0px;
    gap: 20px;
  }
  .announcement-page .desktop-responsive-container .calendar-section .event-desktop-wrapper {
    flex: 1;
  }
  .announcement-page .desktop-responsive-container .calendar-section .event-desktop-wrapper .section-items .event-wrapper .event-details .event-details-text .event-info-text {
    font-size: 16px;
  }
  .announcement-page .desktop-responsive-container .calendar-section .section-content-celebration {
    max-width: 360px;
  }
  .announcement-page .laptop-responsive-container {
    margin-top: 40px;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .calendar-section {
    display: none;
    width: 100%;
    margin-top: 30px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content-celebration {
    display: none;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content:first-child .section-items .event-wrapper .event-details .event-details-text .event-info-text {
    font-size: 16px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 420px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 38px;
    line-height: 43px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 16px;
    padding: 0px 25px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 15px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder {
    padding-right: 15px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
    font-size: 16px;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .laptop-responsive-container {
    margin-top: 40px;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .section-title {
    font-size: 25px;
  }
  .announcement-page .announcement-view-content .calendar-section {
    display: none;
    width: 100%;
    margin-top: 30px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content:first-child .section-items .event-wrapper .event-details .event-details-text .event-info-text {
    font-size: 16px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 350px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 30px;
    line-height: 35px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 16px;
    padding: 0px 25px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 15px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .new-label {
    font-size: 11px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 5px;
    margin-top: 3px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .laptop-responsive-container {
    margin-top: 40px;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .section-title {
    font-size: 25px;
  }
  .announcement-page .announcement-view-content .calendar-section {
    display: none;
    width: 100%;
    margin-top: 30px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content:first-child .section-items .event-wrapper .event-details .event-details-text .event-info-text {
    font-size: 15px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 350px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 30px;
    line-height: 35px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 15px;
    padding: 0px 25px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 15px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .new-label {
    font-size: 11px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper {
    margin-bottom: 20px;
    flex-direction: column;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .image-holder {
    max-width: 100%;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder {
    margin-top: 20px;
    margin-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title {
    font-size: 22px;
    line-height: 27px;
    margin-bottom: 5px;
    margin-top: 3px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
    font-size: 15px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .event-link {
    font-size: 14px;
    width: 100%;
    margin-bottom: 5px;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .laptop-responsive-container {
    margin-top: 40px;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .announcement-page .announcement-view-content {
    display: block;
  }
  .announcement-page .announcement-view-content .section-title {
    font-size: 20px;
    text-align: center;
  }
  .announcement-page .announcement-view-content .calendar-section {
    display: none;
    width: 100%;
    margin-top: 30px;
  }
  .announcement-page .announcement-view-content .calendar-section .section-content {
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section {
    padding-right: 0px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content {
    margin-bottom: 40px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder {
    height: 500px;
    padding: 30px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-title {
    font-size: 22px;
    line-height: 26px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .announcement-text {
    font-size: 14px;
    padding: 0px 8px;
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .title-group .notif-link {
    font-size: 13px;
    padding: 8px 20px;
  }
  .announcement-page .announcement-view-content .bulletin-section .section-content .section-items .announcement-wrapper .announcement-holder .new-label {
    top: 15px;
    right: 15px;
    padding: 3px 12px;
    font-size: 12px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper {
    margin-bottom: 20px;
    flex-direction: column;
    padding: 20px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .image-holder {
    max-width: 100%;
    height: 180px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder {
    margin-top: 20px;
    margin-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title-group {
    flex-direction: column;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title-group .date-text {
    margin-top: 0;
    margin-bottom: 0px;
    font-size: 12px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-title {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 5px;
    margin-top: 0px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .announcement-text {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 8px;
    line-height: 20px;
  }
  .announcement-page .announcement-view-content .highlight-wrapper .details-holder .event-link {
    font-size: 12px;
    width: 100%;
    margin-bottom: 5px;
    padding: 6px 40px;
  }
  .announcement-page .desktop-responsive-container {
    flex-direction: column;
  }
  .announcement-page .laptop-responsive-container {
    margin-top: 40px;
    display: none;
  }
  .announcement-page .laptop-responsive-container .section-items {
    display: flex;
    flex-direction: column;
  }
  .announcement-page .laptop-responsive-container .section-items .btn-see-more {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 20px;
    background-color: #e5b300;
    border-color: #e5b300;
  }
  .announcement-page .btn-celebration-view-mobile {
    display: block;
  }
}
.announcement-page-single .announcement-view-content .announcement-single {
  width: 100%;
  max-width: 1000px;
  background-color: white;
  padding: 100px 50px 100px 50px;
  margin: 0 auto;
  margin-top: 30px;
  height: max-content;
  border-top: solid 8px #ffc700;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.announcement-page-single .announcement-view-content .announcement-single .btn-back {
  padding: 2px 10px;
  font-size: 15px;
  border-radius: 10px;
  position: absolute;
  top: 20px;
  left: 40px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-date {
  background-color: gainsboro;
  padding: 10px 20px;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 15px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-date span {
  margin-left: 5px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-title {
  font-size: clamp(25px, 2vw, 45px);
  line-height: clamp(25px, 2vw, 40px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  margin-top: 55px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-content {
  margin-top: 50px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-content p {
  font-size: 16px;
  margin-bottom: 15px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-content li {
  font-size: 16px;
  margin-bottom: 0px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-content td {
  padding-bottom: 15px;
  font-size: 16px;
}
.announcement-page-single .announcement-view-content .announcement-single .announcement-content .wp-block-preformatted {
  font-size: 16px;
  color: black;
  font-family: inherit;
  background-color: #e5e5e5;
  padding: 15px 30px;
  margin-bottom: 15px;
  border-left: solid 10px #ffc700;
}

/* Large devices (desktops, ≥992px and <1200px) */
/* Medium devices (tablets, ≥768px and <992px) */
/* Small devices (landscape phones, ≥576px and <768px) */
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .announcement-page-single .announcement-view-content {
    padding: 0px !important;
  }
  .announcement-page-single .announcement-view-content .announcement-single {
    padding: 50px 25px 100px 25px;
    margin-top: 0px;
    border-top: 0px;
  }
  .announcement-page-single .announcement-view-content .announcement-single .btn-back {
    font-size: 13px;
    top: 15px;
    left: 15px;
  }
  .announcement-page-single .announcement-view-content .announcement-single .announcement-date {
    padding: 5px 15px;
    font-size: 12px;
    background-color: #ffc700;
  }
  .announcement-page-single .announcement-view-content .announcement-single .announcement-content {
    margin-top: 25px;
  }
  .announcement-page-single .announcement-view-content .announcement-single .announcement-content p {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .announcement-page-single .announcement-view-content .announcement-single .announcement-content li {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .announcement-page-single .announcement-view-content .announcement-single .announcement-content .wp-block-preformatted {
    font-size: 13px;
    padding: 15px 20px;
  }
}
.custom-user-header {
  background-color: white;
  border-bottom: solid 1px gainsboro;
  padding: 18px 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.custom-user-header .details-holder {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}
.custom-user-header .details-holder .user-image {
  max-width: 50px;
  border-radius: 50px;
  margin-right: 10px;
  border: solid 2px #ffc700;
}
.custom-user-header .details-holder .user-info {
  line-height: 20px;
  width: 100%;
  max-width: 225px;
  overflow: hidden;
}
.custom-user-header .details-holder .user-info .user-name-text {
  font-weight: bold;
  font-size: 18px;
}
.custom-user-header .details-holder .user-info .user-role-text {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.custom-user-header .show-in-mobile {
  display: none;
}
.custom-user-header .custom-mobile-nav {
  z-index: 999999;
}
.custom-user-header .custom-mobile-nav .active-user-info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}
.custom-user-header .custom-mobile-nav .active-user-info .user-image {
  max-width: 50px;
  border-radius: 50px;
  margin-right: 10px;
  border: solid 2px #ffc700;
}
.custom-user-header .custom-mobile-nav .active-user-info .user-info {
  line-height: 16px;
  width: 100%;
  max-width: 250px;
  overflow: hidden;
}
.custom-user-header .custom-mobile-nav .active-user-info .user-info .user-name-text {
  font-weight: bold;
  font-size: 16px;
}
.custom-user-header .custom-mobile-nav .active-user-info .user-info .user-role-text {
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.custom-user-header .custom-mobile-nav .offcanvas-body {
  position: relative;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .app-name-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .app-name-container .header-logo {
  max-width: 170px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .app-name-container .header-logo-mobile {
  display: none;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container {
  display: flex;
  flex-direction: column;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container .navigation-links {
  text-decoration: none;
  color: black;
  padding: 8px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container .navigation-links .fa-solid {
  margin-right: 10px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container .navigation-links:hover {
  background-color: gainsboro;
  color: black;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container .active {
  color: #ffffff;
  background-color: #ffc700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container {
  display: flex;
  flex-direction: column;
  border-top: solid 2px #e3e3e3;
  padding-top: 10px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container .navigation-links {
  text-decoration: none;
  color: black;
  padding: 8px 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container .navigation-links .fa-solid {
  margin-right: 10px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container .navigation-links:hover {
  background-color: gainsboro;
  color: black;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container .active {
  color: #ffffff;
  background-color: #ffc700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.custom-user-header .custom-mobile-nav .offcanvas-body .btn-logout-mobile {
  position: relative;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
}
.custom-user-header .custom-mobile-nav .offcanvas-body .btn-logout-mobile i {
  margin-left: 5px;
}

/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .custom-user-header {
    padding: 15px 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .custom-user-header .hide-in-mobile {
    display: none;
  }
  .custom-user-header .show-in-mobile {
    display: block;
  }
  .custom-user-header .mobile-logo .header-logo {
    width: 120px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .custom-user-header {
    padding: 10px 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .custom-user-header .hide-in-mobile {
    display: none;
  }
  .custom-user-header .show-in-mobile {
    display: block;
  }
  .custom-user-header .mobile-logo .header-logo {
    width: 95px;
    padding: 3px 0px;
  }
  .custom-user-header .custom-mobile-nav {
    width: 100%;
  }
  .custom-user-header .custom-mobile-nav .active-user-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
  }
  .custom-user-header .custom-mobile-nav .active-user-info .user-image {
    max-width: 50px;
    border-radius: 50px;
    margin-right: 10px;
    border: solid 2px #ffc700;
  }
  .custom-user-header .custom-mobile-nav .active-user-info .user-info {
    line-height: 15px;
    width: 100%;
    max-width: 250px;
    overflow: hidden;
  }
  .custom-user-header .custom-mobile-nav .active-user-info .user-info .user-name-text {
    font-weight: bold;
    font-size: 14px;
  }
  .custom-user-header .custom-mobile-nav .active-user-info .user-info .user-role-text {
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
  .custom-user-header .custom-mobile-nav .btn-close {
    margin-right: 5px;
  }
  .custom-user-header .custom-mobile-nav .offcanvas-body {
    padding-top: 0;
  }
  .custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .link-container .navigation-links {
    margin-bottom: 5px;
    font-size: 16px;
    padding: 10px 20px;
  }
  .custom-user-header .custom-mobile-nav .offcanvas-body .custom-navigation-bar-mobile .content-wrapper .gem-container .navigation-links {
    margin-bottom: 5px;
    font-size: 16px;
    padding: 8px 20px;
  }
}
.custom-navigation-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 300px;
  overflow-y: auto;
  border-right: solid 1px gainsboro;
  background-color: white;
}
.custom-navigation-bar .content-wrapper {
  padding: 20px;
}
.custom-navigation-bar .content-wrapper .app-name-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.custom-navigation-bar .content-wrapper .app-name-container .header-logo {
  max-width: 170px;
}
.custom-navigation-bar .content-wrapper .app-name-container .header-logo-mobile {
  display: none;
}
.custom-navigation-bar .content-wrapper .link-container {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
}
.custom-navigation-bar .content-wrapper .link-container .navigation-links {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  border-radius: 10px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
}
.custom-navigation-bar .content-wrapper .link-container .navigation-links .fa-solid {
  margin-right: 10px;
}
.custom-navigation-bar .content-wrapper .link-container .navigation-links:hover {
  background-color: gainsboro;
  color: black;
}
.custom-navigation-bar .content-wrapper .link-container .active {
  color: #ffffff;
  background-color: #ffc700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.custom-navigation-bar .content-wrapper .gem-container {
  display: flex;
  flex-direction: column;
  border-top: solid 2px #e3e3e3;
  padding-top: 15px;
  margin-top: 20px;
}
.custom-navigation-bar .content-wrapper .gem-container .navigation-links {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 500;
}
.custom-navigation-bar .content-wrapper .gem-container .navigation-links .fa-solid {
  margin-right: 10px;
}
.custom-navigation-bar .content-wrapper .gem-container .navigation-links:hover {
  background-color: gainsboro;
  color: black;
}
.custom-navigation-bar .content-wrapper .gem-container .active {
  color: #ffffff;
  background-color: #ffc700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.global-calendar-modal .modal-dialog {
  max-width: 1000px;
}
.global-calendar-modal .modal-dialog .btn-calendar-close {
  position: absolute;
  right: 30px;
  top: 30px;
  background-color: white;
  height: 25px;
  width: 25px;
  opacity: 1;
}
.global-calendar-modal .modal-dialog figure {
  margin: 0 !important;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* styles only for XL range */
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .custom-navigation-bar {
    width: 250px;
  }
  .custom-navigation-bar .content-wrapper .app-name-container .header-logo {
    max-width: 150px;
  }
  .custom-navigation-bar .content-wrapper .link-container .navigation-links {
    font-size: 18px;
    margin-bottom: 10px;
    padding: 10px 15px;
  }
  .custom-navigation-bar .content-wrapper .gem-container {
    padding-top: 10px;
  }
  .custom-navigation-bar .content-wrapper .gem-container .navigation-links {
    font-size: 18px;
    margin-bottom: 10px;
    padding: 10px 15px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .custom-navigation-bar {
    width: 100px;
  }
  .custom-navigation-bar .content-wrapper .app-name-container {
    margin-top: 25px;
  }
  .custom-navigation-bar .content-wrapper .app-name-container .header-logo {
    display: none;
  }
  .custom-navigation-bar .content-wrapper .app-name-container .header-logo-mobile {
    display: block !important;
    width: 80px;
  }
  .custom-navigation-bar .content-wrapper .link-container {
    margin-top: 30px;
    border-top: solid 2px gainsboro;
    padding-top: 20px;
  }
  .custom-navigation-bar .content-wrapper .link-container .navigation-links {
    font-size: 18px;
  }
  .custom-navigation-bar .content-wrapper .link-container .navigation-links span {
    display: none;
  }
  .custom-navigation-bar .content-wrapper .gem-container .navigation-links {
    font-size: 18px;
  }
  .custom-navigation-bar .content-wrapper .gem-container .navigation-links span {
    display: none;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .custom-navigation-bar {
    display: none;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .custom-navigation-bar {
    display: none;
  }
}
.eif-submissions-page .eif-submissions-view-content .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.eif-submissions-page .eif-submissions-view-content .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  position: relative;
  /* 1. Hide hidden cards by default when no search is active */
  /* 2. Force visibility if it matches an active search keyword, even if it has .is-hidden */
  /* 3. Force hide if it fails the search criteria entirely */
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card {
  height: auto;
  background-color: white;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  color: black;
  text-decoration: none;
  position: relative;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .referred-label {
  display: none;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img {
  background-color: black;
  border-radius: 70px;
  overflow: hidden;
  border: solid 2px #ffc700;
  width: 85px;
  height: 85px;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img .user-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: solid 1px black;
  background-color: black;
  transform: scale(1.15);
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info {
  padding-left: 15px;
  flex: 1;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 20px;
  color: black;
  border-top: solid 1px #bdbdbd;
  margin-top: 5px;
  padding-top: 5px;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time .fa-solid {
  margin-right: 5px;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-name {
  font-size: 16px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-position {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 14px;
  color: black;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-method {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 14px;
  color: black;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card.is-hidden {
  display: none;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card.search-match {
  display: flex !important; /* Change 'flex' to 'block' or 'inline-block' depending on your card layout card styling */
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card.search-mismatch {
  display: none !important;
}
.eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .referred .referred-label {
  display: block !important;
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 20px;
  color: #ffc700;
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .eif-submissions-page .eif-submissions-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .eif-submissions-page .eif-submissions-view-content .title-group {
    flex-direction: column;
    width: 100%;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 18px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info {
    padding-left: 10px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-name {
    font-size: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-position {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time {
    margin-top: 5px;
    padding-top: 2px;
    font-size: 13px;
    line-height: 17px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-method {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img {
    width: 75px;
    height: 75px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .referred .referred-label {
    font-size: 16px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .eif-submissions-page .eif-submissions-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group {
    max-width: 350px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 18px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info {
    padding-left: 10px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-name {
    font-size: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-position {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time {
    margin-top: 5px;
    padding-top: 2px;
    font-size: 13px;
    line-height: 17px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-method {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img {
    width: 75px;
    height: 75px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .referred .referred-label {
    font-size: 16px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .eif-submissions-page .eif-submissions-view-content .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 18px;
    flex-direction: column;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info {
    padding-left: 10px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-name {
    font-size: 15px;
    text-align: center;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-position {
    font-size: 13px;
    line-height: 13px;
    text-align: center;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time {
    margin-top: 8px;
    padding-top: 2px;
    font-size: 13px;
    line-height: 17px;
    text-align: center;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-method {
    font-size: 13px;
    line-height: 13px;
    text-align: center;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img {
    width: 90px;
    height: 90px;
    margin-bottom: 8px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .referred .referred-label {
    font-size: 16px;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .eif-submissions-page .eif-submissions-view-content .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    margin-top: 10px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group {
    max-width: 100%;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .eif-submissions-page .eif-submissions-view-content .title-group .search-bar-group .search-container .search-bar {
    font-size: 16px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info {
    padding-left: 10px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-name {
    font-size: 15px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-position {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-time {
    margin-top: 5px;
    padding-top: 2px;
    font-size: 13px;
    line-height: 17px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-info .applicant-method {
    font-size: 13px;
    line-height: 13px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .submission-card .applicant-img {
    width: 75px;
    height: 75px;
  }
  .eif-submissions-page .eif-submissions-view-content .eif-submissions-wrapper .referred .referred-label {
    font-size: 16px;
  }
  .eif-submissions-page .eif-submissions-view-content .card-component .card-header {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
  }
  .eif-submissions-page .eif-submissions-view-content .card-applicant {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto;
    margin-top: 10px;
  }
}
.workstations-page .title-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  margin-top: 50px;
}
.workstations-page .title-group .page-title {
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
.workstations-page .title-group .search-bar-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 400px;
}
.workstations-page .title-group .search-bar-group .search-container {
  border: solid 1px #e9e9e9;
  border-radius: 30px;
  width: 100%;
  padding: 5px 20px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.workstations-page .title-group .search-bar-group .search-container .fa-xmark {
  color: #afafaf;
}
.workstations-page .title-group .search-bar-group .search-container .fa-xmark:hover {
  cursor: pointer;
  color: black;
}
.workstations-page .title-group .search-bar-group .search-container .search-bar {
  padding: 5px 10px;
  border: none;
  background-color: transparent;
  width: 100%;
}
.workstations-page .title-group .search-bar-group .search-container .search-bar:focus {
  outline: none;
  border: none;
  box-shadow: none;
}
.workstations-page .workstations-wrapper {
  position: relative;
  padding-top: 30px;
  /* Bigger switch */
  /* Switch track */
  /* Toggle animation */
  /* The circle animation */
}
.workstations-page .workstations-wrapper .nav-tabs {
  border-bottom: none; /* Optional: Remove bottom border */
}
.workstations-page .workstations-wrapper .nav-tabs .nav-link {
  color: white; /* Text color */
  font-size: 16px; /* Font size */
  font-weight: 600; /* Font weight */
  font-family: "Poppins", sans-serif;
  padding: 10px 30px; /* Spacing */
  border: none; /* Remove border */
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  background-color: #cacaca;
  border: solid 1px white;
}
.workstations-page .workstations-wrapper .nav-tabs .nav-link.active {
  color: black;
  background: white;
  font-weight: 700;
}
.workstations-page .workstations-wrapper .tab-content {
  background-color: white;
  padding: 30px;
  /* Chrome, Edge, Safari */
}
.workstations-page .workstations-wrapper .tab-content .tab-pane {
  border: solid 1px gainsboro;
  border-radius: 5px;
  overflow: auto;
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge Legacy */
  -ms-overflow-style: none;
}
.workstations-page .workstations-wrapper .tab-content .tab-pane::-webkit-scrollbar {
  display: none;
}
.workstations-page .workstations-wrapper .shift-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  top: 0;
  position: absolute;
  right: 0;
  z-index: 11;
}
.workstations-page .workstations-wrapper .shift-label {
  font-size: 18px;
  font-weight: 600;
}
.workstations-page .workstations-wrapper .shift-switch {
  width: 80px;
  height: 40px;
  cursor: pointer;
  background-size: 32px 32px;
  transition: 0.4s ease;
  background-color: #ffc107;
  border-color: #ffc107;
}
.workstations-page .workstations-wrapper .shift-switch:focus {
  box-shadow: none;
}
.workstations-page .workstations-wrapper .shift-switch:checked {
  background-color: #343a40;
  border-color: #343a40;
}
.workstations-page .workstations-wrapper .shift-switch::before {
  width: 32px !important;
  height: 32px !important;
  margin-top: 2px;
  transition: 0.35s ease;
}
.workstations-page .workstations-wrapper .shift-switch:checked::before {
  transform: translateX(40px);
}
.workstations-page .workstations-wrapper .bpo-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0px;
  flex-direction: column;
  gap: 50px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group {
  width: max-content;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .premium-room {
  display: flex;
  margin-right: 10px;
  border: solid 1px #dbdbdb;
  background-color: #FFFFFA;
  padding: 20px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .premium-room .seat-group {
  margin-right: 80px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group {
  margin-right: 70px;
  border: solid 1px black;
  width: max-content;
  display: flex;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group:last-child {
  margin-right: 0px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row {
  display: flex;
  flex-direction: column;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder {
  width: 100px;
  height: 90px;
  border: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder:hover {
  cursor: pointer;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder .status {
  font-size: 10px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder .vacant {
  background-color: gainsboro;
  padding: 2px 10px;
  border-radius: 30px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder .seat-employee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 8px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder .seat-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 0px solid #fff;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .seat-holder .seat-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 10px;
  text-align: center;
  /* Prevent long names from overflowing */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .action-disable {
  cursor: default;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .management {
  margin-top: 150px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .morning .occupied {
  background-color: #ffc700;
  color: white;
  padding: 2px 10px;
  border-radius: 30px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .morning .occupied::before {
  content: "\f185";
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* Solid icons */
  margin-right: 5px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .morning:hover {
  background-color: #ffc700;
  cursor: pointer;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .morning:hover .occupied {
  background-color: #28282b;
  color: white;
  padding: 2px 10px;
  border-radius: 30px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .evening .occupied {
  background-color: #ffc700;
  color: black;
  padding: 2px 10px;
  border-radius: 30px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .evening .occupied::before {
  content: "\f186";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 5px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .evening:hover {
  background-color: #28282b;
  cursor: pointer;
  color: white;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .seat-group .seat-row .evening:hover .occupied {
  background-color: #ffc700;
  color: white;
  padding: 2px 10px;
  border-radius: 30px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .room-wrapper {
  display: flex;
  margin-right: 70px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-group .room-wrapper .seat-group {
  margin-right: 0px !important;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-core {
  align-items: flex-end !important;
  align-self: center;
  margin-right: 140px;
  margin-top: -130px;
}
.workstations-page .workstations-wrapper .bpo-holder .workstation-core .seat-group {
  border: none !important;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper {
  width: 1175px;
  margin: 0px 100px;
  position: relative;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper .finance-room {
  position: absolute;
  width: 295px;
  height: 487px;
  z-index: 1;
  left: -9px;
  bottom: 35px;
  border: solid 1px #dbdbdb;
  background-color: #FFFFFA;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper .vp-room {
  position: absolute;
  width: 295px;
  height: 210px;
  z-index: 1;
  left: 285px;
  bottom: 35px;
  border: solid 1px #dbdbdb;
  background-color: #FFFFFA;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper .am-room {
  position: absolute;
  width: 286px;
  height: 210px;
  z-index: 1;
  right: 310px;
  bottom: 35px;
  border: solid 1px #dbdbdb;
  background-color: #FFFFFA;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper .hr-room {
  position: absolute;
  width: 170px;
  height: 210px;
  z-index: 1;
  right: 141px;
  bottom: 35px;
  border: solid 1px #dbdbdb;
  background-color: #FFFFFA;
}
.workstations-page .workstations-wrapper .bpo-one-wrapper .lobby-room {
  display: none;
}
.workstations-page .workstations-wrapper .bpo-two-wrapper {
  width: 1270px;
  margin: 0px 70px;
  align-items: flex-start;
}
.workstations-page .workstations-wrapper .bpo-three-wrapper {
  margin: 0px 100px;
}
.workstations-page .workstations-wrapper .bpo-four-wrapper {
  margin: 0px 100px;
  width: 650px;
  justify-self: center;
}
.workstations-page .workstation-edit-modal .modal-dialog {
  width: 100%;
  max-width: 500px;
  margin: 1rem auto;
}
.workstations-page .workstation-edit-modal .modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.workstations-page .workstation-edit-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid #eeeeee;
  background: #fff;
}
.workstations-page .workstation-edit-modal .modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.workstations-page .workstation-edit-modal .modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 199, 0, 0.15);
  color: #d49f00;
  font-size: 18px;
}
.workstations-page .workstation-edit-modal .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
}
.workstations-page .workstation-edit-modal .modal-subtitle {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #8a8a8a;
}
.workstations-page .workstation-edit-modal .btn-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background-size: 11px;
  opacity: 0.6;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.workstations-page .workstation-edit-modal .btn-close:hover {
  opacity: 1;
  background-color: #f5f5f5;
}
.workstations-page .workstation-edit-modal .modal-body {
  padding: 24px;
}
.workstations-page .workstation-edit-modal .workstation-edit-info {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  margin-bottom: 22px;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #fafafa;
}
.workstations-page .workstation-edit-modal .workstation-info-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f0f0f0;
  color: #555;
  font-size: 15px;
}
.workstations-page .workstation-edit-modal .workstation-info-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.workstations-page .workstation-edit-modal .workstation-edit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.workstations-page .workstation-edit-modal #editWorkstationNumber {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #222;
}
.workstations-page .workstation-edit-modal .workstation-employee-field {
  width: 100%;
}
.workstations-page .workstation-edit-modal .workstation-employee-field > label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.workstations-page .workstation-edit-modal .workstation-employee-field > label i {
  font-size: 12px;
  color: #999;
}
.workstations-page .workstation-edit-modal .select-wrapper {
  width: 100%;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 {
  width: 100% !important;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection:hover {
  border-color: #c8c8c8;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2-container--focus .select2-selection,
.workstations-page .workstation-edit-modal #workstationEmployee + .select2-container--open .select2-selection {
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.12);
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection__rendered {
  padding: 0;
  font-size: 13px;
  color: #333;
  line-height: 44px;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection__placeholder {
  color: #999;
}
.workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection__arrow {
  height: 44px;
  right: 8px;
}
.workstations-page .workstation-edit-modal .select2-container--open {
  z-index: 9999;
}
.workstations-page .workstation-edit-modal .select2-dropdown {
  border: 1px solid #dddddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.workstations-page .workstation-edit-modal .select2-search--dropdown {
  padding: 10px;
}
.workstations-page .workstation-edit-modal .select2-search--dropdown .select2-search__field {
  height: 40px;
  padding: 0 11px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
}
.workstations-page .workstation-edit-modal .select2-search--dropdown .select2-search__field:focus {
  border-color: #ffc700;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.1);
}
.workstations-page .workstation-edit-modal .select2-results__option {
  padding: 10px 12px;
  font-size: 13px;
}
.workstations-page .workstation-edit-modal .select2-results__option--highlighted {
  background: #ffc700 !important;
  color: #222 !important;
}
.workstations-page .workstation-edit-modal .field-help {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.4;
  color: #999;
}
.workstations-page .workstation-edit-modal .workstation-edit-message {
  margin-top: 16px;
}
.workstations-page .workstation-edit-modal .workstation-edit-message:empty {
  display: none;
}
.workstations-page .workstation-edit-modal .workstation-edit-message .alert {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}
.workstations-page .workstation-edit-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid #eeeeee;
  background: #fff;
}
.workstations-page .workstation-edit-modal .modal-footer .btn {
  min-height: 42px;
  padding: 9px 17px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.workstations-page .workstation-edit-modal .modal-footer .btn:active {
  transform: translateY(1px);
}
.workstations-page .workstation-edit-modal .modal-footer .btn-secondary {
  border: 1px solid #dddddd;
  background: #fff;
  color: #555;
}
.workstations-page .workstation-edit-modal .modal-footer .btn-secondary:hover {
  background: #f7f7f7;
  border-color: #cccccc;
}
.workstations-page .workstation-edit-modal .modal-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  background: #ffc700;
  color: #222;
  box-shadow: 0 4px 10px rgba(255, 199, 0, 0.2);
}
.workstations-page .workstation-edit-modal .modal-footer .btn-primary:hover {
  background: #edb800;
  box-shadow: 0 5px 14px rgba(255, 199, 0, 0.28);
}
.workstations-page .workstation-edit-modal .modal-footer .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
@media (max-width: 575px) {
  .workstations-page .workstation-edit-modal .modal-dialog {
    width: auto;
    margin: 12px;
  }
  .workstations-page .workstation-edit-modal .modal-content {
    border-radius: 15px;
  }
  .workstations-page .workstation-edit-modal .modal-header {
    padding: 18px;
  }
  .workstations-page .workstation-edit-modal .modal-body {
    padding: 20px 18px;
  }
  .workstations-page .workstation-edit-modal .modal-footer {
    padding: 14px 18px 18px;
  }
}
@media (max-width: 480px) {
  .workstations-page .workstation-edit-modal .modal-dialog {
    margin: 10px;
  }
  .workstations-page .workstation-edit-modal .modal-header {
    padding: 16px;
  }
  .workstations-page .workstation-edit-modal .modal-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 16px;
  }
  .workstations-page .workstation-edit-modal .modal-title {
    font-size: 16px;
  }
  .workstations-page .workstation-edit-modal .modal-subtitle {
    font-size: 11px;
  }
  .workstations-page .workstation-edit-modal .modal-body {
    padding: 18px 16px;
  }
  .workstations-page .workstation-edit-modal .workstation-edit-info {
    padding: 12px;
    margin-bottom: 18px;
  }
  .workstations-page .workstation-edit-modal .workstation-info-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 13px;
  }
  .workstations-page .workstation-edit-modal #editWorkstationNumber {
    font-size: 16px;
  }
  .workstations-page .workstation-edit-modal .workstation-employee-field > label {
    font-size: 12px;
  }
  .workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection {
    min-height: 44px;
  }
  .workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection__rendered {
    font-size: 12px;
    line-height: 42px;
  }
  .workstations-page .workstation-edit-modal #workstationEmployee + .select2 .select2-selection__arrow {
    height: 42px;
  }
  .workstations-page .workstation-edit-modal .field-help {
    font-size: 10px;
  }
  .workstations-page .workstation-edit-modal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px 16px;
  }
  .workstations-page .workstation-edit-modal .modal-footer .btn {
    width: 100%;
    min-height: 44px;
  }
}
@media (max-width: 360px) {
  .workstations-page .workstation-edit-modal .modal-dialog {
    margin: 7px;
  }
  .workstations-page .workstation-edit-modal .modal-header {
    padding: 14px;
  }
  .workstations-page .workstation-edit-modal .modal-body {
    padding: 16px 14px;
  }
  .workstations-page .workstation-edit-modal .modal-footer {
    padding: 12px 14px 14px;
  }
  .workstations-page .workstation-edit-modal .modal-title-wrapper {
    gap: 9px;
  }
  .workstations-page .workstation-edit-modal .modal-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 14px;
  }
  .workstations-page .workstation-edit-modal .modal-title {
    font-size: 15px;
  }
  .workstations-page .workstation-edit-modal .modal-subtitle {
    display: none;
  }
}

.popover {
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  width: max-content;
  max-width: max-content;
}

.employee-popover {
  display: flex;
  align-items: center;
  gap: 12px;
}

.employee-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.employee-details {
  line-height: 1.4;
  padding-right: 10px;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .workstations-page .workstations-wrapper .bpo-four-wrapper {
    margin: 0px 100px;
    width: 650px;
    justify-self: normal;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .workstations-page .title-group {
    flex-direction: column;
    width: 100%;
  }
  .workstations-page .workstations-wrapper {
    padding-top: 5px;
  }
  .workstations-page .workstations-wrapper .shift-label {
    font-size: 16px;
  }
  .workstations-page .workstations-wrapper .shift-switch {
    width: 60px;
    height: 30px;
  }
  .workstations-page .workstations-wrapper .bpo-four-wrapper {
    margin: 0px 100px;
    width: 650px;
    justify-self: normal;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .workstations-page .title-group {
    margin-bottom: 30px;
    flex-direction: column;
    width: 100%;
  }
  .workstations-page .title-group .page-title {
    font-size: 30px;
    margin-bottom: 0;
  }
  .workstations-page .title-group .search-bar-group {
    max-width: 350px;
  }
  .workstations-page .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .workstations-page .workstations-wrapper {
    padding-top: 5px;
  }
  .workstations-page .workstations-wrapper .shift-label {
    font-size: 16px;
  }
  .workstations-page .workstations-wrapper .shift-switch {
    width: 60px;
    height: 30px;
  }
  .workstations-page .workstations-wrapper .bpo-four-wrapper {
    margin: 0px 100px;
    width: 650px;
    justify-self: normal;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .workstations-page .title-group {
    margin-bottom: 50px;
    flex-direction: column;
    margin-top: 20px;
  }
  .workstations-page .title-group .page-title {
    font-size: 30px;
    margin-bottom: 15px;
  }
  .workstations-page .title-group .search-bar-group {
    max-width: 100%;
  }
  .workstations-page .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .workstations-page .workstations-wrapper {
    padding-top: 5px;
  }
  .workstations-page .workstations-wrapper .shift-toggle-wrapper {
    position: fixed;
    bottom: 0;
    height: 50px;
    top: auto;
    width: 100%;
    background-color: gainsboro;
    display: flex;
    justify-content: center;
  }
  .workstations-page .workstations-wrapper .shift-label {
    font-size: 16px;
  }
  .workstations-page .workstations-wrapper .shift-switch {
    width: 60px;
    height: 30px;
  }
  .workstations-page .workstations-wrapper .bpo-four-wrapper {
    margin: 0px 100px;
    width: 650px;
    justify-self: normal;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .workstations-page .title-group {
    margin-bottom: 10px;
    flex-direction: column;
    margin-top: 10px;
  }
  .workstations-page .title-group .page-title {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .workstations-page .title-group .search-bar-group {
    max-width: 100%;
  }
  .workstations-page .title-group .search-bar-group .search-container {
    padding: 2px 20px;
  }
  .workstations-page .title-group .search-bar-group .search-container .search-bar {
    font-size: 15px;
  }
  .workstations-page .workstations-view-content {
    padding: 30px 0px !important;
  }
  .workstations-page .workstations-wrapper {
    padding-top: 5px;
  }
  .workstations-page .workstations-wrapper .tab-content {
    padding: 0px;
  }
  .workstations-page .workstations-wrapper .nav-tabs li.nav-item {
    width: 33%;
  }
  .workstations-page .workstations-wrapper .nav-tabs .nav-link {
    padding: 8px 0px;
    font-size: 14px;
    width: 100%;
  }
  .workstations-page .workstations-wrapper .shift-toggle-wrapper {
    position: fixed;
    bottom: 0;
    height: 50px;
    top: auto;
    width: 100%;
    background-color: gainsboro;
    display: flex;
    justify-content: center;
  }
  .workstations-page .workstations-wrapper .shift-label {
    font-size: 16px;
  }
  .workstations-page .workstations-wrapper .shift-switch {
    width: 60px;
    height: 30px;
  }
  .workstations-page .workstations-wrapper .bpo-four-wrapper {
    margin: 30px 100px;
    width: 650px;
    justify-self: normal;
  }
  .workstations-page .workstations-wrapper .bpo-one-wrapper {
    margin: 30px 100px;
  }
  .workstations-page .workstations-wrapper .bpo-two-wrapper {
    width: 1270px;
    margin: 30px 70px;
    align-items: flex-start;
  }
}
/* =========================================================
   GUERILLA EMPLOYEE PORTAL - LOGIN PAGE
   ========================================================= */
.login-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  background-image: url("../images/yellow-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  /* =====================================================
     LEFT / DISPLAY SECTION
     ===================================================== */
  /* =====================================================
     SOCIAL ICONS
     ===================================================== */
  /* =====================================================
     LOGIN CARD
     ===================================================== */
  /* =====================================================
     LOGIN TITLE
     ===================================================== */
  /* =====================================================
     FORM
     ===================================================== */
  /* =====================================================
     FORGOT PASSWORD
     ===================================================== */
  /* =====================================================
     LOGIN BUTTON
     ===================================================== */
  /* =====================================================
     ACCOUNT REQUEST
     ===================================================== */
  /* Success */
  /* Validation / Error */
  /* Spam */
  /* Mobile */
}
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.login-page .custom-container {
  width: 100%;
  max-width: 1200px;
  min-height: 650px;
  margin: 0 auto;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 70px;
  position: relative;
  z-index: 1;
}
.login-page .display-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-page .display-holder {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  padding: 30px 0;
}
.login-page .header-logo {
  width: 240px;
  height: auto;
  margin-bottom: 20px;
  object-fit: contain;
}
.login-page .app-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  font-weight: bold;
  letter-spacing: -1.5px;
  color: #111;
}
.login-page .app-line {
  max-width: 480px;
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.75);
}
.login-page .social-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.login-page .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-page .social-icon a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}
.login-page .small-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  color: #111;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}
.login-page .small-circle i {
  font-size: 16px;
}
.login-page .small-circle:hover {
  background: #111;
  color: #fff;
  transform: translateY(-4px);
}
.login-page .login-form-container {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  padding: 55px 50px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15), 0 5px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: center;
}
.login-page .title-group {
  margin-bottom: 35px;
}
.login-page .login-title {
  margin: 0 0 8px;
  color: #111;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
  font-weight: bold;
  letter-spacing: -1px;
  text-align: center;
}
.login-page .login-text {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}
.login-page form {
  width: 100%;
}
.login-page .input-holder {
  margin-bottom: 16px;
}
.login-page .custom-form-control {
  width: 100%;
  height: 58px;
  padding: 0 20px;
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  background: #f8f8f8;
  color: #111;
  font-size: 15px;
  box-shadow: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.login-page .custom-form-control::placeholder {
  color: #999;
}
.login-page .custom-form-control:hover {
  background: #fff;
}
.login-page .custom-form-control:focus {
  background: #fff;
  border-color: #111;
  box-shadow: 0 0 0 4px rgba(255, 199, 0, 0.18);
  outline: none;
}
.login-page .forgot-link {
  display: inline-block;
  margin: 2px 0 25px;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.login-page .forgot-link:hover {
  color: #111;
  text-decoration: underline;
}
.login-page .login-btn {
  width: 100%;
  min-height: 58px;
  border: none;
  border-radius: 14px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.login-page .login-btn:hover {
  background: #222;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}
.login-page .login-btn:active {
  transform: translateY(0);
}
.login-page .inquiry-text {
  margin-top: 25px;
  text-align: center;
}
.login-page .inquiry-text .login-text {
  color: #888;
}
.login-page .inquiry-link {
  color: #111;
  font-weight: 700;
  text-decoration: none;
}
.login-page .inquiry-link:hover {
  text-decoration: underline;
}
.login-page .wpcf7-response-output {
  margin: 20px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px;
  background: #f8f8f8;
  color: #555;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  display: none;
}
.login-page .wpcf7 form.sent .wpcf7-response-output {
  border-color: rgba(25, 135, 84, 0.25) !important;
  background: rgba(25, 135, 84, 0.08);
  color: #198754;
}
.login-page .wpcf7 form.invalid .wpcf7-response-output,
.login-page .wpcf7 form.failed .wpcf7-response-output {
  border-color: rgba(220, 53, 69, 0.25) !important;
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}
.login-page .wpcf7 form.spam .wpcf7-response-output {
  border-color: rgba(255, 193, 7, 0.3) !important;
  background: rgba(255, 193, 7, 0.1);
  color: #856404;
}
@media (max-width: 575.98px) {
  .login-page .wpcf7-response-output {
    margin-top: 15px !important;
    padding: 12px 14px !important;
    font-size: 12px;
  }
}

/* =========================================================
   ANIMATION
   ========================================================= */
.rise-up {
  animation: loginRiseUp 0.7s ease-out both;
}

@keyframes loginRiseUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   MODALS
   ========================================================= */
.follow-us-modal .modal-content,
.sign-up-modal .modal-content,
#loginErrorModal .modal-content {
  border: none;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}
.follow-us-modal .btn-close,
.sign-up-modal .btn-close,
#loginErrorModal .btn-close {
  position: absolute;
  top: 30px;
  right: 18px;
  z-index: 10;
  opacity: 0.7;
}
.follow-us-modal .btn-close:hover,
.sign-up-modal .btn-close:hover,
#loginErrorModal .btn-close:hover {
  opacity: 1;
}

/* =========================================================
   SIGN UP / FORGOT PASSWORD MODAL
   ========================================================= */
.sign-up-modal .modal-dialog {
  max-width: 600px;
  padding: 15px;
}
.sign-up-modal .modal-content {
  padding: 0;
}
.sign-up-modal .sign-up-header {
  padding: 30px 35px 20px;
  background: #111;
  color: #fff;
}
.sign-up-modal .modal-form-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.sign-up-modal .modal-form-title i {
  margin-right: 10px;
}
.sign-up-modal .sign-up-contents {
  padding: 35px;
}
.sign-up-modal .sign-up-contents .custom-input-group {
  width: 100%;
}
.sign-up-modal .sign-up-contents .checkbox-input-group p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.sign-up-modal .sign-up-contents .checkbox-input-group p br {
  display: none;
}
.sign-up-modal .sign-up-contents .input-two-row {
  display: flex;
  gap: 10px;
}
.sign-up-modal .sign-up-contents p .btn-send {
  width: 100%;
  margin-top: 20px;
}
.sign-up-modal .sign-up-contents p .wpcf7-spinner {
  display: none;
}

/* =========================================================
   PROMO MODAL
   ========================================================= */
.follow-us-modal .modal-dialog {
  max-width: 600px;
  padding: 15px;
}
.follow-us-modal .modal-content {
  background: #111;
  color: #fff;
}
.follow-us-modal .promo-content {
  padding: 50px 40px;
  text-align: center;
}
.follow-us-modal .promo-logo {
  width: 70px;
  margin-bottom: 20px;
}
.follow-us-modal .promo-modal-title {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
}
.follow-us-modal .promo-modal-text {
  margin: 0 auto 25px;
  max-width: 380px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.7;
}
.follow-us-modal .social-group {
  justify-content: center;
}
.follow-us-modal .small-circle {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.follow-us-modal .small-circle:hover {
  background: #fff;
  color: #111;
}

/* =========================================================
   LOGIN ERROR MODAL
   ========================================================= */
#loginErrorModal .modal-dialog {
  max-width: 420px;
  padding: 15px;
}
#loginErrorModal .modal-body {
  padding: 40px 35px 20px;
  text-align: center;
  position: relative;
}
#loginErrorModal .failed-icon {
  margin: 0 0 15px;
  font-size: 42px;
  color: #dc3545;
}
#loginErrorModal .failed-title {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  color: #111;
}
#loginErrorModal .failed-text {
  margin: 0;
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}
#loginErrorModal .modal-footer {
  padding: 15px 25px 25px;
  border-top: none;
}
#loginErrorModal .modal-footer .btn {
  width: 100%;
  min-height: 50px;
  border-radius: 12px;
  font-weight: 600;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 991.98px) {
  .login-page .custom-container {
    max-width: 800px;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 50px 30px;
  }
  .login-page .display-container {
    justify-content: center;
    text-align: center;
  }
  .login-page .display-holder {
    min-height: auto;
    align-items: center;
    gap: 0px;
    padding: 0px 0;
  }
  .login-page .display-holder .social-group {
    display: none !important;
  }
  .login-page .header-logo {
    width: 200px;
    margin-bottom: 0;
  }
  .login-page .app-title {
    font-size: 3rem;
    display: none;
  }
  .login-page .app-line {
    margin: 0 auto;
    display: none;
  }
  .login-page .social-group {
    justify-content: center;
  }
  .login-page .login-form-container {
    max-width: 550px;
    margin: 0 auto;
  }
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 575.98px) {
  .login-page {
    min-height: 100svh;
  }
  .login-page .custom-container {
    width: 100%;
    min-height: auto;
    padding: 30px 18px;
    gap: 25px;
  }
  .login-page .display-holder {
    padding: 10px 0;
    gap: 0px;
  }
  .login-page .header-logo {
    width: 160px;
    margin-bottom: 12px;
  }
  .login-page .app-title {
    font-size: 2rem;
    letter-spacing: -1px;
    display: none;
  }
  .login-page .app-line {
    font-size: 13px;
    line-height: 1.6;
    display: none;
  }
  .login-page .small-circle {
    width: 38px;
    height: 38px;
  }
  .login-page .small-circle i {
    font-size: 14px;
  }
  .login-page .login-form-container {
    padding: 35px 25px;
    border-radius: 22px;
  }
  .login-page .title-group {
    margin-bottom: 25px;
  }
  .login-page .login-title {
    font-size: 1.8rem;
  }
  .login-page .login-text {
    font-size: 13px;
  }
  .login-page .custom-form-control {
    height: 54px;
    border-radius: 12px;
    padding: 0 16px;
  }
  .login-page .login-btn {
    min-height: 54px;
    border-radius: 12px;
  }
  .login-page .forgot-link {
    margin-bottom: 20px;
  }
  .sign-up-modal .sign-up-header {
    padding: 20px 30px 20px;
  }
  .sign-up-modal .modal-form-title {
    font-size: 16px;
  }
  .sign-up-modal .sign-up-contents p {
    margin-bottom: 0px;
  }
  .sign-up-modal .sign-up-contents p .btn-send {
    margin-bottom: 15px;
  }
  .sign-up-modal .sign-up-contents .input-two-row {
    flex-direction: column;
    margin-bottom: 10px;
  }
  .sign-up-modal .sign-up-contents .input-two-row .custom-input-group {
    margin-bottom: 0px;
  }
  .sign-up-modal .sign-up-contents .custom-input-group {
    margin-bottom: 10px;
  }
  .sign-up-modal .sign-up-contents .checkbox-input-group {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .sign-up-modal .sign-up-contents .wpcf7-not-valid-tip {
    font-size: 12px;
  }
  .follow-us-modal .btn-close,
  .sign-up-modal .btn-close,
  #loginErrorModal .btn-close {
    top: 22px;
    font-size: 14px;
  }
}
/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */
@media (max-width: 380px) {
  .login-page .custom-container {
    padding: 20px 14px;
  }
  .login-page .header-logo {
    width: 140px;
  }
  .login-page .app-title {
    font-size: 1.8rem;
  }
  .login-page .app-line {
    font-size: 12px;
  }
  .login-page .login-form-container {
    padding: 30px 20px;
  }
  .login-page .login-title {
    font-size: 1.65rem;
  }
  .sign-up-modal .modal-dialog {
    padding: 0px;
  }
  .sign-up-modal .sign-up-contents {
    padding: 15px;
  }
}
.custom-header {
  background-color: #ffc700;
}
.custom-header .header-contents {
  padding: 12px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-header .header-contents .header-logo {
  width: 130px;
}

.main-layout {
  display: flex;
  min-height: 100vh;
}
.main-layout p {
  margin: 0;
}
.main-layout .page-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: whitesmoke;
  margin-left: 300px;
  height: 100vh;
  overflow: hidden; /* prevents double scroll */
}
.main-layout .page-main-content .custom-view-content {
  flex: 1;
  overflow-y: auto;
  padding: 30px 75px;
}

/* Global Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* Mobile */
@media (max-width: 767px) {
  ::-webkit-scrollbar {
    display: none;
  }
  html {
    scrollbar-width: none;
  }
  body {
    -ms-overflow-style: none;
  }
}
.custom-form-cfs {
  scroll-margin-top: 50vh;
}

.hide {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

.content-page-loader {
  background-color: #ffc700;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.content-page-loader .loading-icon {
  font-size: 60px;
  color: white;
}
.content-page-loader .funny-text {
  font-size: 20px;
  color: white;
  font-weight: 500;
  margin-bottom: 80px;
  text-align: center;
  padding: 0px 15px;
}

.mobile-activate-search-scroll {
  transition: transform 0.3s ease, opacity 0.5s ease;
}

.no-search-found-alert {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  height: 200px;
  background-color: white;
  border-radius: 15px;
  padding: 0px 40px;
  border: solid 1px #e9e9e9;
  display: flex;
  margin-bottom: 15px;
  justify-content: center;
  align-items: center;
  align-items: center;
  gap: 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: center;
}
.no-search-found-alert .fa-solid {
  margin-right: 10px;
}

.card-component .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.card-component .card-grid .no-ticket-found {
  grid-column: 1/-1;
  width: 100%;
  text-align: center;
  padding: 30px 20px;
  margin-top: 10px;
  color: #a1a1a1;
  text-transform: uppercase;
  font-size: clamp(14px, 1.2vw, 16px);
  border: dashed 2px gainsboro;
}
.card-component .card-item {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0;
  padding: 18px;
  cursor: pointer;
  transition: 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  border-left: solid 5px #ffc700;
}
.card-component .card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: #ffc700;
}
.card-component .referred {
  background-color: #fff7da;
}
.card-component .referred .card-image {
  border: 3px solid #28282b;
}
.card-component .referred .card-body {
  border-top: 1px solid #d9d9d9;
}
.card-component .referred .card-label {
  color: black;
}
.card-component .referred .card-job {
  color: black;
}
.card-component .referred .card-group:not(:last-child) {
  border-bottom: 1px dashed #d9d9d9;
}
.card-component .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}
.card-component .card-img-center {
  align-items: center !important;
}
.card-component .card-title-group {
  flex: 1;
}
.card-component .card-title {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 18px;
  height: 35px;
  display: flex;
  align-items: center;
}
.card-component .card-applicant {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  line-height: 18px;
  height: 35px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
}
.card-component .card-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.card-component .card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.card-component .card-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.card-component .card-status.Pending {
  background: #f1bc00;
  color: white;
}
.card-component .card-status.Cancelled {
  background: #bbbbbb;
  color: #000;
}
.card-component .card-status.Completed {
  background: #16a34a;
  color: white;
}
.card-component .card-status.Rejected {
  background: #fdeaea;
  color: #dc2626;
}
.card-component .card-status.In-Progress, .card-component .card-status.InProgress {
  background: #e7f1ff;
  color: #2563eb;
}
.card-component .card-status.Others {
  background: #bbbbbb;
  color: #000;
  width: fit-content;
}
.card-component .card-status.Facebook {
  background: #1877F2;
  color: white;
  width: fit-content;
}
.card-component .card-status.Facebook::before {
  content: "\f082";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.card-component .card-status.LinkedIn {
  background: #0A66C2;
  color: white;
  width: fit-content;
}
.card-component .card-status.LinkedIn::before {
  content: "\f08c";
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.card-component .card-status.Fair {
  background: #1fa51f;
  color: white;
  width: fit-content;
}
.card-component .card-status.Fair::before {
  content: "\f0b1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.card-component .card-status.Indeed {
  background: #003A9B;
  color: white;
  width: fit-content;
}
.card-component .card-status.Indeed::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.card-component .card-status.Referral {
  background: #ffc700;
  color: #000;
  width: fit-content;
}
.card-component .card-status.Referral::before {
  content: "\f005";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
.card-component .card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid #f1f3f5;
  padding-top: 12px;
}
.card-component .card-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.card-component .card-group:not(:last-child) {
  padding-bottom: 5px;
  border-bottom: 1px dashed #ececec;
}
.card-component .card-label {
  margin: 0;
  color: #8a8a8a;
  font-size: 12px;
  font-weight: 600;
}
.card-component .card-info {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #2c2c2c;
  text-align: right;
}
.card-component .card-subtitle {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #939393;
  margin-top: -15px;
  margin-bottom: 2px;
  line-height: 14px;
  height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-component .card-job {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #939393;
  margin-bottom: 2px;
  line-height: 14px;
  height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-component .card-link {
  font-size: 14px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}
.card-component .card-link:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .card-component .card-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .card-component .card-item {
    padding: 16px;
  }
  .card-component .card-header .card-title {
    font-size: 14px;
  }
  .card-component .card-header .card-image {
    width: 52px;
    height: 52px;
  }
}
@media (max-width: 575px) {
  .card-component .card-body {
    gap: 5px;
    padding-top: 7px;
  }
  .card-component .card-header .card-image {
    width: 60px;
    height: 60px;
  }
  .card-component .card-group:not(:last-child) {
    padding-bottom: 3px;
    border-bottom: 1px dashed #ececec;
  }
  .card-component .card-item {
    gap: 5px;
  }
  .card-component .card-subtitle {
    margin-top: -12px;
  }
  .card-component .card-link {
    font-size: 12px;
  }
  .card-component .card-mobile {
    padding: 0px 15px 18px 15px;
  }
}

@keyframes searchBarSlideDown {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.global-confirmation-modal .modal-dialog {
  max-width: 550px;
  padding: 0px 5px;
}
.global-confirmation-modal .modal-dialog .modal-content {
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 35px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: 12px;
  padding: 2rem;
  background: rgb(255, 255, 255);
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body {
  padding: 0px;
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body .success-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body .success-icon i {
  font-size: 100px;
  color: rgb(255, 199, 0);
  line-height: 1;
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body .message-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: rgb(0, 0, 0);
  margin-bottom: 10px;
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body .message-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgb(102, 102, 102);
  margin-bottom: 2rem;
}
.global-confirmation-modal .modal-dialog .modal-content .modal-body .btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  background: rgb(0, 0, 0);
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  border-radius: 8px;
  transition: 0.2s;
  text-transform: uppercase;
  width: 100%;
}

/* =========================================================
   SELECT2 - MATCH BOOTSTRAP .form-select
   ========================================================= */
.select2-container {
  width: 100% !important;
  /* Selected text */
  /* Placeholder */
  /* Dropdown arrow */
  /* =====================================================
     FOCUS / OPEN
     ===================================================== */
}
.select2-container .select2-selection--single {
  display: block;
  width: 100%;
  height: auto;
  min-height: calc(1.5em + 0.75rem + 2px);
  position: relative;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  position: relative;
}
.select2-container .select2-selection__rendered {
  padding: 0;
  margin: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--bs-body-color);
  line-height: 1.5;
}
.select2-container .select2-selection__placeholder {
  color: var(--bs-secondary-color);
}
.select2-container .select2-selection__arrow {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 16px;
  height: 12px;
  transform: translateY(-50%);
}
.select2-container .select2-selection__arrow b {
  display: none;
}
.select2-container .select2-selection__arrow::after {
  content: "";
  display: block;
  width: 16px;
  height: 12px;
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 12px;
}
.select2-container.select2-container--open .select2-selection--single {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.select2-container.select2-container--open .select2-selection__arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* =========================================================
   SELECT2 DROPDOWN
   ========================================================= */
.select2-dropdown {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* =========================================================
   SEARCH
   ========================================================= */
.select2-search--dropdown {
  padding: 0.5rem;
}
.select2-search--dropdown .select2-search__field {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  outline: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* =========================================================
   OPTIONS
   ========================================================= */
.select2-results__option {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: var(--bs-body-color);
}

/* Hovered option */
.select2-results__option--highlighted {
  background-color: #0d6efd !important;
  color: #fff !important;
}

/* Selected option */
.select2-results__option[aria-selected=true] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/**
 * ============================================
 * Restricted Access Modal
 * ============================================
 */
#restrictedAccessModal {
  /**
   * ========================================
   * Modal Header
   * ========================================
   */
  /**
   * ========================================
   * Modal Body
   * ========================================
   */
  /**
   * ========================================
   * Modal Footer
   * ========================================
   */
}
#restrictedAccessModal .modal-dialog {
  width: 100%;
  max-width: 480px;
  margin: 1.5rem auto;
}
#restrictedAccessModal .modal-content {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
#restrictedAccessModal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #eeeeee;
}
#restrictedAccessModal .modal-header .modal-title {
  margin: 0;
  color: #222222;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
#restrictedAccessModal .modal-header .btn-close {
  width: 12px;
  height: 12px;
  margin-left: auto;
  padding: 8px;
  opacity: 0.7;
}
#restrictedAccessModal .modal-header .btn-close:hover {
  opacity: 1;
}
#restrictedAccessModal .modal-body {
  padding: 35px 30px 25px;
  text-align: center;
  /**
   * Location / Restriction Icon
   */
  /**
   * Heading
   */
  /**
   * Description
   */
}
#restrictedAccessModal .modal-body .restricted-access-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 199, 0, 0.15);
}
#restrictedAccessModal .modal-body .restricted-access-icon i {
  color: #ffc700;
  font-size: 26px;
}
#restrictedAccessModal .modal-body h4 {
  margin: 0 0 10px;
  color: #222222;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}
#restrictedAccessModal .modal-body p {
  max-width: 380px;
  margin: 0 auto 8px;
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}
#restrictedAccessModal .modal-body p.mb-0 {
  margin-bottom: 0;
  color: #888888;
  font-size: 13px;
}
#restrictedAccessModal .modal-footer {
  display: flex;
  justify-content: center;
  padding: 5px 30px 30px;
  border-top: 0;
}
#restrictedAccessModal .modal-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid #ffc700;
  border-radius: 8px;
  background: #ffc700;
  color: #222222;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#restrictedAccessModal .modal-footer .btn:hover {
  border-color: #e6b300;
  background: #e6b300;
  color: #222222;
  transform: translateY(-1px);
}
#restrictedAccessModal .modal-footer .btn:focus {
  border-color: #ffc700;
  background: #ffc700;
  color: #222222;
  box-shadow: 0 0 0 3px rgba(255, 199, 0, 0.25);
}

/**
 * ============================================
 * Tablet
 * ============================================
 */
@media (max-width: 767.98px) {
  #restrictedAccessModal .modal-dialog {
    max-width: 450px;
    margin: 1rem auto;
  }
  #restrictedAccessModal .modal-body {
    padding: 30px 25px 20px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 17px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon i {
    font-size: 24px;
  }
  #restrictedAccessModal .modal-body h4 {
    font-size: 19px;
  }
  #restrictedAccessModal .modal-body p {
    font-size: 13px;
  }
  #restrictedAccessModal .modal-footer {
    padding: 5px 25px 25px;
  }
}
/**
 * ============================================
 * Mobile
 * ============================================
 */
@media (max-width: 575.98px) {
  #restrictedAccessModal {
    /**
     * Header
     */
    /**
     * Body
     */
    /**
     * Footer
     */
  }
  #restrictedAccessModal .modal-dialog {
    width: auto;
    max-width: none;
    margin: 15px;
  }
  #restrictedAccessModal .modal-content {
    border-radius: 14px;
  }
  #restrictedAccessModal .modal-header {
    padding: 16px 18px;
  }
  #restrictedAccessModal .modal-header .modal-title {
    font-size: 16px;
  }
  #restrictedAccessModal .modal-header .btn-close {
    padding: 7px;
  }
  #restrictedAccessModal .modal-body {
    padding: 25px 18px 18px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon i {
    font-size: 21px;
  }
  #restrictedAccessModal .modal-body h4 {
    margin-bottom: 8px;
    font-size: 17px;
  }
  #restrictedAccessModal .modal-body p {
    font-size: 13px;
    line-height: 1.5;
  }
  #restrictedAccessModal .modal-body p.mb-0 {
    font-size: 12px;
  }
  #restrictedAccessModal .modal-footer {
    padding: 5px 18px 20px;
  }
  #restrictedAccessModal .modal-footer .btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 15px;
    font-size: 13px;
  }
}
/**
 * ============================================
 * Small Mobile
 * ============================================
 */
@media (max-width: 375.98px) {
  #restrictedAccessModal .modal-dialog {
    margin: 10px;
  }
  #restrictedAccessModal .modal-header {
    padding: 14px 15px;
  }
  #restrictedAccessModal .modal-header .modal-title {
    font-size: 15px;
  }
  #restrictedAccessModal .modal-body {
    padding: 22px 15px 15px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
  }
  #restrictedAccessModal .modal-body .restricted-access-icon i {
    font-size: 19px;
  }
  #restrictedAccessModal .modal-body h4 {
    font-size: 16px;
  }
  #restrictedAccessModal .modal-body p {
    font-size: 12px;
  }
  #restrictedAccessModal .modal-footer {
    padding: 5px 15px 17px;
  }
  #restrictedAccessModal .modal-footer .btn {
    min-height: 40px;
    font-size: 12px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* styles only for XL range */
}
/* Large devices (desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-layout .page-main-content {
    margin-left: 250px;
  }
  .main-layout .page-main-content .custom-view-content {
    padding: 30px 30px;
  }
}
/* Medium devices (tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .main-layout .page-main-content {
    margin-left: 100px;
  }
  .main-layout .page-main-content .custom-view-content {
    padding: 30px 30px;
  }
}
/* Small devices (landscape phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .main-layout .page-main-content {
    margin-left: 0px;
  }
  .main-layout .page-main-content .custom-view-content {
    padding: 30px 30px;
  }
  .search-bar-scroll-mobile {
    position: fixed;
    top: auto;
    bottom: 0px;
    left: 0;
    z-index: 99;
    padding: 15px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.24);
    animation: searchBarSlideDown 0.5s ease forwards;
  }
}
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .main-layout .page-main-content {
    margin-left: 0px;
  }
  .main-layout .page-main-content .custom-view-content {
    padding: 30px 15px;
  }
  .search-bar-scroll-mobile {
    position: fixed;
    top: auto;
    bottom: 0px;
    left: 0;
    z-index: 99;
    padding: 10px 15px 10px 15px;
    border-top: solid 1px gainsboro;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.24);
    animation: searchBarSlideDown 0.5s ease forwards;
  }
  .search-bar-scroll-mobile .search-bar {
    font-size: 16px !important;
  }
  .content-page-loader .loading-icon {
    font-size: 45px;
  }
  .content-page-loader .funny-text {
    font-size: 16px;
  }
  .no-search-found-alert {
    font-size: 14px;
    height: 300px;
  }
  .global-confirmation-modal .modal-dialog .modal-content .modal-body .message-title {
    font-size: 18px;
  }
  .global-confirmation-modal .modal-dialog .modal-content .modal-body .message-text {
    font-size: 14px;
  }
  .global-confirmation-modal .modal-dialog .modal-content .modal-body .btn-dark {
    font-size: 14px;
    width: 100%;
  }
}
/* Large devices (desktops, ≥992px and <1200px) */
/* Medium devices (tablets, ≥768px and <992px) */
/* Small devices (landscape phones, ≥576px and <768px) */
/* Extra small devices (portrait phones, less than 576px) */

/*# sourceMappingURL=style.css.map */