/*
@font-face {
    font-family: 'din-boldregular';
    src: url('../../font/dinbd_-webfont.eot');
    src: url('../../font/dinbd_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../font/dinbd_-webfont.woff') format('woff'),
         url('../../font/dinbd_-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'din-lightregular';
    src: url('../../font/dinli_-webfont.eot');
    src: url('../../font/dinli_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../font/dinli_-webfont.woff') format('woff'),
         url('../../font/dinli_-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'din-regularregular';
    src: url('../../font/dinrg_-webfont.eot');
    src: url('../../font/dinrg_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../font/dinrg_-webfont.woff') format('woff'),
         url('../../font/dinrg_-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
body{
    font-family: din-lightregular;
}
.text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl{
    font-family: din-boldregular;
}
*/

.nav-tabs .nav-link.active {
  color: #10584c !important;
  border-color: #10584c !important;
}

.bg-ss-200 {
  background: #36ac98;
}
.hover\:bg-ss-200:hover {
  background: #36ac98;
}
.bg-ss-300 {
  background: #218d7b;
}
.hover\:bg-ss-300:hover {
  background: #218d7b;
}
.bg-ss-400 {
  background: #136658;
}
.hover\:bg-ss-400:hover {
  background: #136658;
}
.bg-ss-500 {
  background: #10584c;
}
.hover\:bg-ss-500:hover {
  background: #10584c;
}
.bg-ss-600 {
  background: #0c443b;
}
.hover\:bg-ss-600:hover {
  background: #0c443b;
}

.text-ss-500 {
  color: #10584c;
}
.hover\:text-ss-500:hover {
  color: #10584c;
}
.text-ss-600 {
  color: #0c443b;
}
.hover\:text-ss-600:hover {
  color: #0c443b;
}

.border-ss-500 {
  border-color: #10584c;
}
.hover\:border-ss-500:hover {
  border-color: #10584c;
}
.border-ss-600 {
  border-color: #0c443b;
}
.hover\:border-ss-600:hover {
  border-color: #0c443b;
}

.collapse {
  visibility: initial !important;
}
.loadingIndicator {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ececec8f;
  text-align: center;
  z-index: 9;
}
.loadingIndicator.htmx-request {
  display: inline;
}
.subLoadingIndicator {
  display: none;
}
.subLoadingIndicator.htmx-request {
  display: inline;
}
.loading {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ececec8f;
  text-align: center;
  z-index: 9;
}
.loading.htmx-request {
  display: inline;
}
.loader-line {
  width: 100%;
  height: 3px;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.loader-line:before {
  content: "";
  position: absolute;
  left: -50%;
  height: 3px;
  width: 40%;
  background-color: rgb(27, 151, 233);
  -webkit-animation: lineAnim 1s linear infinite;
  -moz-animation: lineAnim 1s linear infinite;
  animation: lineAnim 1s linear infinite;
}

@keyframes lineAnim {
  0% {
    left: -40%;
  }
  50% {
    left: 20%;
    width: 80%;
  }
  100% {
    left: 100%;
    width: 100%;
  }
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb #ffffff00;
}
.pinkScrollbar {
  scrollbar-width: thin;
  scrollbar-color: #ec4899 #ffffff00;
}

/* SLIDE IN/OUT ANIMATION */
.animate-slide-in {
  opacity: 0;
  transform: translateY(50px); /* Move the image down initially */
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.animate-slide-in.active {
  opacity: 1;
  transform: translateY(0); /* Move the image back to its original position */
}