:root {
  --main-color: #046f37;
  --main-opac-color: #046f3893;
}

::-webkit-scrollbar {
  width: 15px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb {
  background: #aaa !important;
  border-radius: 6px !important;
  transition: background-color 0.2s linear, height 0.2s ease-in-out !important;
  -webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out !important;
}

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

::-webkit-scrollbar-corner {
  background: #eee !important;
}

/* override bootstrap css */
.list-group-item {
  color: #000 !important;
}

.dropdown-menu {
  color: #000 !important;
}

.dashboard-class li {
  list-style: none;
}

::placeholder {
  color: rgba(255, 255, 255, 0.596) !important;
}

.toast {
  background-color: rgba(255, 255, 255, 0.4);
}

/* main */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap%27");

* {
  transition: opacity 0.7s ease;
}

.hidden-trans {
  opacity: 0;
}

.visible-trans {
  opacity: 1;
}

body {
  font-family: "Poppins", sans-serif !important;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
}

.bs-icon-custom {
  /* color: #046f37; */
}

.c-green {
  color: #046f37;
}

.navbar .navbar-brand {
  /* color: var(--main-color) !important; */
  font-weight: 800 !important;
}

.default-main-space {
  margin-top: 7em !important;
}

.navbar-main-open {
  background-color: transparent !important;
  color: #000 !important;
}

.navbar-toggler-bar-open {
  display: block;
  position: relative;
  width: 22px;
  height: 1px;
  border-radius: 1px;
  color: black !important;
}

.pagetitle .title {
  font-family: "Poppins", sans-serif !important;
}

.spinner-grow {
  /* color: var(--main-color); */
  color: white;
}

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

.spinner img {
  width: 250px !important; /* Adjust size as needed */
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner-image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.spinner-image {
  width: 30em !important;
}

.spinner-custom {
  min-width: 100%;
  min-height: 100%;
  background-color: rgb(0 0 0 / 0.3);
  z-index: 999999999;
  position: fixed;
  height: 100%;
}

.spinner-eapi {
  min-width: 100%;
  min-height: 100%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  z-index: 999999999;
  position: fixed;
  height: 100%;
}

#calendarLoaderInner {
  margin-top: 60em !important;
}

#schedLoader {
  position: fixed; /* Change to fixed positioning */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center the loader */
  z-index: 1000; /* Make sure it's above other content */
  display: none; /* Hidden by default */
  text-align: center; /* Center text inside */
}

.spinner-grow-custom {
  animation: grow 1s ease-in-out infinite;
}

@keyframes grow {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

.is-invalid {
  color: red;
  /*font-size: small;*/
  margin: 2px;
}

.toast {
  position: fixed;
  top: 20px;
  /* right: 20px;  */
  z-index: 1050;
  width: auto;
  max-width: 300px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

#main {
  margin-top: 4em;
}

.body-click-class {
  display: none !important;
}

.footer {
  position: sticky !important;
}

/* login */

/* Center the form container */
#loginForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Center the form group */
.form-group {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Center the button */
.custom-button-login {
  background-color: var(--main-color);
  color: white;
}

.loading-btn-style {
  background-color: var(--main-opac-color) !important;
}

/* Set the width of the input fields and center them */
.login-input {
  width: 25em;
}
.login-input::placeholder {
  color: gray !important;
}

.clearfix {
  clear: both;
}

.separator {
  text-align: center;
  margin-top: 20px;
}

.separator p {
  margin: 0;
}

body #loginPage {
  background: url("../img/BG_PATTERN.jpg") no-repeat center center fixed;
  background-size: cover;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  height: 100%;
}

.form-container {
  background: rgba(255, 255, 255, 0.95);
  height: 100vh;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

.swalcustom-confirm-button {
  color: white;
}
.swalcustom-cancel-button {
  color: black !important;
}

/* Styles for landscape mode */

@media (max-height: 430px) and (max-width: 932px) and (orientation: landscape) {
  .mobile-text-title {
    width: 25em;
  }
}
@media (max-height: 500px) and (max-width: 1200px) and (orientation: landscape) {
  body #loginPage {
    flex-direction: row;
    justify-content: space-around;
  }

  .form-container {
    height: auto;
  }

  .footer {
    padding-bottom: 1.25em;
  }
}

@media (min-width: 577px) {
  .custom-button-login {
    width: 25em;
  }
  .login-img {
    max-width: 27em;
  }
}

@media (max-width: 576px) {
  .form-container {
    padding: 10px;
  }

  .login-input {
    font-size: 16px;
  }
}

/* Mobile devices (portrait and landscape) */
@media only screen and (max-width: 600px) {
  /* Styles for mobile devices */
}

/* Tablets (landscape and portrait) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  /* Styles for tablets */
}

/* Desktops and larger screens */
@media only screen and (min-width: 1025px) {
  /* Styles for desktops and larger screens */
}

.super-xl-modal .modal-dialog {
    max-width: 95vw;
    width: 95vw;
}