.zoomed {
  zoom: 90%;
}

.secondary {
  background-color: #5DADE2;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #5DADE2;
  border-right: 16px solid #f0e68c;
  border-bottom: 16px solid #607d8b;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;

  /* Centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

  100% {
    transform: rotate(360deg);
  }
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  /* Reduced from 60px to 30px */
  height: 17px;
  /* Reduced from 34px to 17px */
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  /* Reduced from 26px to 13px */
  width: 13px;
  /* Reduced from 26px to 13px */
  left: 2px;
  /* Adjusted from 4px to 2px */
  bottom: 2px;
  /* Adjusted from 4px to 2px */
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #607d8b;
}

input:focus+.slider {
  box-shadow: 0 0 1px #607d8b;
}

input:checked+.slider:before {
  -webkit-transform: translateX(13px);
  /* Reduced from 26px to 13px */
  -ms-transform: translateX(13px);
  /* Reduced from 26px to 13px */
  transform: translateX(13px);
  /* Reduced from 26px to 13px */
}

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
  /* Reduced from 34px to 17px */
}

.slider.round:before {
  border-radius: 50%;
}

.table-row-link {
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem; /* Adjust spacing as needed */
}

.pagination {
  margin: 0;
}

.page-item {
  margin: 0;
}

.page-link {
  margin: 0;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #5DADE2;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f0e68c;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
  .sidebar .side_button {font-size: 18px;}
}

/* Slide in from the right */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Fade out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Toast animation settings */
.toast-slide-in {
  animation: slideInRight 0.5s ease forwards;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  width: 300px; /* Adjust this width if needed */
}

.toast-fade-out {
  animation: fadeOut 0.5s ease forwards;
  opacity: 0;
}


.open-sidebar-btn {
    position: fixed;       /* Keeps it in a fixed position relative to the viewport */
    top: 9%;              /* Positions it vertically in the middle of the viewport */
    left: 0;               /* Keeps it at the far left of the viewport */
    transform: translateY(-50%);  /* Adjusts for the button’s height to truly center it */
    background-color: #4CAF50; /* Optional: adds background color */
    color: white;          /* Ensures icon color is visible */
    cursor: pointer;       /* Shows the hand cursor on hover */
    border-radius: 0 5px 5px 0; /* Optional: rounded corners on the right side */
}


.k1green2,.hover-k1green2:hover{color:#000!important;background-color:#E9EFEC!important}
.k1green1,.hover-k1green1:hover{color:#000!important;background-color:#C4DAD2!important}
.k1green0,.hover-k1green0:hover{color:#340a0a!important;background-color:#6A9C89!important}
.k1teal,.hover-k1teal:hover{color:#000!important;background-color:#16423C!important}

.text-k1green2,.w3-hover-text-k1green2:hover{color:#E9EFEC!important}
.text-k1green1,.w3-hover-text-k1green1:hover{color:#C4DAD2!important}
.text-k1green0,.w3-hover-text-k1green0:hover{color:#6A9C89!important}
.text-k1teal,.w3-hover-text-k1teal:hover{color:#E9EFEC!important}