/* ===== Accessibility: scroll-padding for fixed navbar (WCAG 2.4.11) ===== */
html {
  scroll-padding-top: 7rem; /* sm: top-nav 2.5rem + bottom-nav ~4rem */
}
@media (min-width: 1280px) {
  html {
    scroll-padding-top: 8.5rem; /* xl: top-nav 4rem + bottom-nav ~4.5rem */
  }
}

/* ===== Accessibility: focus-visible for keyboard navigation (WCAG 2.4.7) ===== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.btn-action:focus-visible,
.ss-card:focus-visible {
  outline: 2px solid var(--color-primary, #8b0000);
  outline-offset: 2px;
}
.btn-action:focus-visible {
  overflow: visible;
  outline: 3px solid var(--color-secondary, #d4a843);
  outline-offset: 2px;
}
.ss-card-download:focus-visible {
  outline: 3px solid var(--color-secondary, #d4a843);
  outline-offset: 2px;
}

/* ===== Accessibility: contrast fallbacks for deferred CSS (WCAG 1.4.3) ===== */
.title-icon .subtitle span {
  background-color: var(--color-primary, #8b0000);
  color: #fff;
}
.ss-card-03 .text-container h4.title {
  color: #000;
}
.ss-card-03 .ss-stats .text {
  color: #333;
}
.news-highlight h2.text-black,
.news-highlight h2[class*="text-black"] {
  color: #000;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
  color: var(--color-white);
  background-color: var(--color-black);
}

.multimedia-box::before {
  content: "";
  position: absolute;
  width: 1rem;
  top: 0; left: -100vw; right: 0; bottom: 0;
  background: black;
  z-index: -1;
}


/* Form */
.label {
  white-space: wrap;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='7' viewBox='0 0 13 7'%3E%3Cpath d='M6.49512 6.75L0 0L12.9903 0L6.49512 6.75Z' fill='%238B0000'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
  background-size: 14px;
}
.select.style-02 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239D9D9D' d='M1.34106 0L5.70666 4.58L10.0723 0L11.4133 1.41L5.70666 7.41L0 1.41L1.34106 0Z'/%3E%3C/svg%3E");
  background-position: calc(100% - 16px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
  background-size: 8px;
}
.checkbox {
  border-radius: 5px;

  &:checked, &[aria-checked="true"] {
    background-color: var(--color-05);
  }

  &:before {
    background-color: var(--color-primary-content);
  }

  &.checkbox-primary:checked, &[aria-checked="true"] {
    background-color: var(--color-primary);
  }
}
.daterangepicker td.in-range,
.daterangepicker td.available:hover, 
.daterangepicker th.available:hover {
  background-color: #8b000020;
}
.daterangepicker td.active, 
.daterangepicker td.active:hover,
.daterangepicker td.end-date {
  background-color: var(--color-primary);
}

.error {
  border-color: var(--color-error) !important;
}
span.error {
  font-size: .75rem;
  color: var(--color-error);
  margin-top: .2rem;
}

.error ~ .password-toggle {
  bottom: 1.5rem;
}
.validate-success ~ .error ~ .password-toggle {
  bottom: 0;
}

.password-toggle {
  .show {
    display: none;
  }
  .hide {
    display: block;;
  }

  &.show {
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  }
}

/* Password Level */
.password-level{display:block; width:100%;}
.password-level > .levels{
  display:flex; align-items:center; justify-content:start;
  margin:.4375rem 0 .3125rem 0; gap: .5rem
}
.password-level > .levels > *{
  display:block; width:100%; max-width: 3.125rem; height:.125rem;
  transition:background .25s;
}
.password-level > .levels.bradius > *{border-radius:.3rem;}
.password-level > p > span{transition:color .25s;}
.password-level > .levels > *{border-color:#d5d5d5; background:#F2F2F2;}
.password-level.level-1 > .levels > *:nth-child(1){
  background:#ff0000; border-color:#ff0000;
}
.password-level.level-1 .text{color:#ff0000;}

.password-level.level-2 > .levels > *:nth-child(1),
.password-level.level-2 > .levels > *:nth-child(2){
  background:#ff7e00; border-color:#ff7e00;
}
.password-level.level-2 .text{color:#ff7e00;}
.password-criteria .criteria-item.valid::before{color: #00861F;}


/* Table */
.table {
  :where(th, td) {
    padding: .5rem;
    border-width: 0 0 1px 1px;
  }
  & tbody {
    & tr {
      &:first-child {
        border-left: 0;
      }
    }
  }
}
.table-zebra {
  :where(th, td) {
    border-color: var(--color-primary-content);
  }
  & tbody {
    & tr {
      &:where(:nth-child(odd)) {
        border-color: #E8E8E8;
      }
      &:where(:nth-child(even)) {
        background-color: #F6F6F6;
      }
    }
  }
}


/* Button */
.btn-action {
  position: relative;
  border: 0;
  padding-left: 1.25rem;
  padding-right: 3.5rem;
  box-shadow: none;
  min-height: 2.875rem;
  overflow: hidden;
}
.btn-action::before,
.btn-action::after {
  content: '';
  position: absolute;
  top: calc(50% - 1.7rem);
  right: -.2rem;
  height: 100%;
  transition: ease-in-out .3s all;
}
.btn-action:hover::before,
.btn-action:hover::after {
  right: -1.5rem;
}
.btn-action::before {
  border-top: 1.7rem solid var(--color-neutral);
  border-right: 1.7rem solid var(--color-neutral);
  border-bottom: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}
.btn-action::after {
  border-bottom: 1.7rem solid var(--color-neutral);
  border-right: 1.7rem solid var(--color-neutral);
  border-top: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}

.btn-action.light::before {
  border-top: 1.7rem solid var(--color-base-100);
  border-right: 1.7rem solid var(--color-base-100);
  border-bottom: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}
.btn-action.light::after {
  border-bottom: 1.7rem solid var(--color-base-100);
  border-right: 1.7rem solid var(--color-base-100);
  border-top: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}

.btn-action.dark::before {
  border-top: 1.7rem solid var(--color-primary);
  border-right: 1.7rem solid var(--color-primary);
  border-bottom: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}
.btn-action.dark::after {
  border-bottom: 1.7rem solid var(--color-primary);
  border-right: 1.7rem solid var(--color-primary);
  border-top: 1.7rem solid transparent;
  border-left: 1.7rem solid transparent;
}

.btn-02 {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: ease-in-out .3s all;
    background-color: var(--color-06);
  }
  
  &:hover, &.active {
    &::before {
      opacity: 1;
    }

    .wrapper {
      &::before, &::after {
        opacity: 1;
      }
    }
  }

  .wrapper {
    &::before, &::after {
      content: '';
      position: absolute;
      width: 1.25rem;
      height: 1.25rem;
      opacity: 0;
      border-color: var(--color-primary);
      z-index: 1;
      transition: ease-in-out .3s opacity;
    }
    &::before {
      top: 0;
      left: 0;
      border-width: 2px 0 0 2px;
    }
    &::after {
      bottom: 0;
      right: 0;
      border-width: 0 2px 2px 0;
    }
  }
}


/* Swiper */
.swiper.overflow-visible {
  overflow: visible;
}
.swiper-pagination-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 23.125rem;
  width: 100%;
  left: calc(50% - 11.5625rem);
}
.swiper-pagination-container .pagination-number {
  width: 2rem;
  text-align: center;
}
.swiper-pagination-container .swiper-pagination {
  position: relative;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
  height: 0.168rem;
  max-width: 19.125rem;
  margin: auto;
  background-color: #000000;
}
.swiper-pagination-container .swiper-pagination .swiper-pagination-progressbar-fill {
  background-color: var(--color-base-100);
}
.swiper-pagination-container.style-02 {
  position: relative;
  left: unset;
  bottom: unset;
  height: 3.5rem;
  background: transparent;
}
.swiper-pagination-container.style-02 .swiper-pagination {
  bottom: unset;
  height: .313rem;
  width: 29.688rem;
  background-color: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-container.style-02 .swiper-pagination-progressbar-fill {
  position: absolute;
  left: 0;
  height: 100%;
  background: var(--color-primary);
  transition: ease-in-out .3s all;
}
.swiper-pagination-progressbar-fill {
  transition: width 0.4s ease-in-out;
  will-change: width;
}
.swiper-pagination-container.style-02 .pagination-number {
  font-size: 2.5rem;
  font-weight: 600;
}
.swiper-pagination-container.style-02.secondary .swiper-pagination-progressbar-fill {
  background: var(--color-secondary);
}
.swiper-pagination-container.style-02.dark .swiper-pagination {
  background-color: rgba(186, 186, 186, 0.2);
}

.swiper-pagination.parallelogram .swiper-pagination-bullet {
  height: 0.25rem;
  width: 1.75rem;
  opacity: 1;
  border-radius: 0;
  background: #E7E7E7;
  /* transform: skew(120deg); */
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.swiper-pagination.parallelogram.style-02 .swiper-pagination-bullet {
  background: #B9B9B9;
}
.swiper-pagination.parallelogram .swiper-pagination-bullet-active {
  background: var(--color-primary);
}
.swiper-pagination.parallelogram.style-02 .swiper-pagination-bullet-active {
  background: var(--color-primary);
}

.news-highlight-swiper[data-item="2"] .swiper-button-lock {
  display: flex;
}
.news-highlight-swiper[data-item="2"] .arrow-prev {
  transform: rotate(180deg);
}
.news-highlight-swiper[data-item="2"] .arrow-next {
  display: none;
}
@media screen and (width < 40rem) {
  .swiper-pagination-container {
    max-width: 11.125rem;
    left: calc(50% - 5.5625rem);
  }
  .swiper-pagination-container .swiper-pagination {
    max-width: 19.125rem;
  }
}


/* Quick Links */
.quicklinks .swiper {
  padding: 2rem 0;
  margin: 0 2rem;
}


/* Stats */
.ss-stats .line-transformed {
  position: relative;
  height: .122rem;
  width: 100%;
  margin-top: .5rem;
}
.ss-stats .line-transformed::before {
  content: '';
  position: absolute;
  height: 100%;
  width: 3.875rem;
  max-width: 100%;
  background-color: var(--color-primary);
  transition: ease-in-out .3s all;
}
.ss-stats .line-transformed.lg {
  height: .188rem;
}
.ss-stats .line-transformed.lg::before {
  width: 6.25rem;
}
@media screen and (max-width: 63.938rem) {
  .ss-stats .stat .text.text-lg {
    font-size: 1rem;
  }
}


/* Card */
.ss-card {
  position: relative;
}
.ss-card .text-container .title {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.ss-card .text-container .desc {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ss-card:hover .line-transformed::before,
.ss-card.active .line-transformed::before,
.slide-content.active .line-transformed::before {
  width: 12rem;
}
.ss-card:hover .line-transformed.lg::before,
.ss-card.active .line-transformed.lg::before,
.slide-content.active .line-transformed.lg::before {
  width: 12rem;
}

.ss-card:not(.ss-card-faq):hover .btn-action::before, 
.ss-card:not(.ss-card-faq):hover .btn-action::after,
.ss-card:not(.ss-card-faq).active .btn-action::before, 
.ss-card:not(.ss-card-faq).active .btn-action::after,
.slide-content.active .btn-action::before, 
.slide-content.active .btn-action::after {
  right: -1.5rem;
}

.ss-card .icon-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-card .icon-container .video {
  margin-bottom: 1.75rem;
}
.ss-card .icon-container .gallery {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .5rem;
}
.ss-card-02 .icon-container .gallery {
  padding: .5rem 1rem;
}


/* Card 01 */
.ss-card-01 .line-corner::before,
.ss-card-01 .line-corner::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 0%;
  border-color: var(--color-primary);
  opacity: 0;
  transition: ease-in-out .3s all
}
.ss-card-01 .line-01::before {
  top: 0;
  left: 0;
  border-width: 4px 0 0 4px;
}
.ss-card-01 .line-01::after {
  top: 0;
  right: 0;
  border-width: 4px 4px 0 0;
}
.ss-card-01 .line-02::before {
  bottom: 0;
  left: 0;
  border-width: 0 0 4px 4px;
}
.ss-card-01 .line-02::after {
  bottom: 0;
  right: 0;
  border-width: 0 4px 4px 0;
}
.ss-card-01:hover .line-corner::before,
.ss-card-01:hover .line-corner::after {
  width: 40%;
  height: 40%;
  opacity: 1;
}
.ss-card-01 .text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  padding: 1rem;
  text-align: center;
}
.ss-card-01 .icon img {
  max-height: 3.438rem;
  height: auto;
  width: auto;;
}
.ss-card-01 .text {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 3rem;
}


/* Card 02 */
.ss-card-02 .line-corner{
  position: absolute;
  width: 100%;
  z-index: 2;
}
.ss-card-02 .line-01 {
  top: 0;
}
.ss-card-02 .line-02 {
  bottom: 0;
}
.ss-card-02 .line-corner::before {
  content: '';
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-color: var(--color-primary);
  transition: ease-in-out .3s all
}
.ss-card-02 .line-01::before {
  top: 0;
  left: 0;
  border-width: 5px 0 0 5px;
}
.ss-card-02 .line-02::before {
  bottom: 0;
  right: 0;
  border-width: 0 5px 5px 0;
}
.ss-card-02:hover .line-01::before,
.ss-card-02:hover .line-02::before {
  width: 9.25rem;
  height: 9.25rem;
}

.ss-card-02:hover .img-container .bg-img {
  transform: scale(1.2);
}
.ss-card-02 .text-container .title {
  -webkit-line-clamp: 2;
}
.ss-card-02 .text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.735677) 61.76%, rgba(0, 0, 0, 0) 100%);
  transition: ease-in-out .3s all;
}
.news-highlight .swiper-slide-active .text-container {
  opacity: 0;
}
.news-highlight .swiper-slide-active .category-container {
  opacity: 1;
}

/* Card 03 */
.ss-card-03 .img-container::before,
.ss-card-03 .img-container::after {
  content: '';
  position: absolute;
  width: 2.438rem;
  height: 2.438rem;
  z-index: 2;
  border-color: var(--color-primary);
  transition: ease-in-out .3s all;
}
.ss-card-03 .img-container::before {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
}
.ss-card-03 .img-container::after {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
}
.ss-card-03:hover .img-container::before,
.ss-card-03:hover .img-container::after {
  width: 4.938rem;
  height: 4.938rem;
}

.ss-card-03:hover .img-container .bg-img {
  transform: scale(1.2);
}

/* Card 04 */
.ss-card-04 .text-container .title {
  -webkit-line-clamp: 2;
}
.ss-card-04 .line-corner{
  position: absolute;
  width: 100%;
  z-index: 2;
}
.ss-card-04 .line-01 {
  top: 0;
  left: 0;
}
.ss-card-04 .line-02 {
  bottom: 0;
  right: 0;
}
.ss-card-04 .line-corner::before {
  content: '';
  position: absolute;
  width: 2.438rem;
  height: 2.438rem;
  border-color: var(--color-primary);
  transition: ease-in-out .3s all
}
.ss-card-04 .line-01::before {
  top: 0;
  border-width: 3px 0 0 3px;
}
.ss-card-04 .line-02::before {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
}
.ss-card-04:hover .line-01::before,
.ss-card-04:hover .line-02::before {
  width: 4.938rem;
  height: 4.938rem;
}

.ss-card-04:hover .img-container .bg-img {
  transform: scale(1.2);
}


/* Card 05 */
.ss-card-05 {
  .img-container {
    position: relative;
    border-radius: .625rem;
    border: 1px solid rgba(255, 255, 255, .2);
    box-sizing: border-box;
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.25));

      &.rounded-none {
        border-radius: 0;
        
        .wrapper {
          border-radius: 0;
        }
      }

      .wrapper {
        position: relative;
        overflow: hidden;
        border-radius: .625rem;
        background: rgba(255, 255, 255, 0.1);
        transition: ease-in-out .3s all;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -150%;
          width: 100%;
          height: 100%;
          transform: skewX(-35deg);
          opacity: .4;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-primary-content) 100%);
          transition: ease-in-out .8s all;
        }

      }
  }

  .text-container {
    .wrapper {
      position: relative;
      border-radius: .625rem;
      background: rgba(255, 255, 255, 0.8);
    }
  }

  &.style-02 {
    .img-container {
      border: 0;

      .wrapper {
        background: transparent;
      }
    }
  }

  &:hover {
    .img-container {
      .wrapper {
        &::before {
          left: 150%;
        }
      }
    }
  }
}


/* Card Content */
.ss-card-content .line-transformed {
  margin: 1rem 0;
}


/* Card Faq */
.ss-card-faq {
  &.active {
    .icon-toggle {
      
      .minus {
        display: block;
      }
      .plus {
        display: none;
      }
    }
  }
  .icon-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: .75rem;
    border: 1px solid var(--color-primary-content);
    border-radius: 50%;
    color: var(--color-primary-content);
    transition: all .3s;

    .minus {
      display: none;
    }
    .plus {
      display: block;
    }

    &.border-primary {
      border-color: var(--color-primary);
    }
    
    &.text-primary {
      color: var(--color-primary);
    }
  }
  .body {
    display: none;
  }
}


/* Card Download */
.ss-card-download {
  border-bottom: 1px solid #E0E0E0;
  background-color: #fff;
}
.ss-card-download:first-child {
  border-top: 1px solid #E0E0E0;
}
.ss-card-download .header {
  display: grid;
  grid-template-columns: 5.625rem 1fr 3.5rem;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  background-color: var(--color-base-100);
  transition: ease-in-out .3s all;
}
.ss-card-download.active .header,
.ss-card-download:hover .header {
  color: var(--color-base-100);
  background-color: var(--color-neutral);
}
.ss-card-download .icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.625rem;
  min-height: 5.625rem;
  height: 100%;
  background-color: var(--color-primary);
}
.ss-card-download .icon-container img {
  width: 2.5rem;
  height: auto;
}
.ss-card-download .text-container {
  padding: .5rem 1rem .5rem 0;
  z-index: 1;
}
.ss-card-download .text-container .title {
  -webkit-line-clamp: 2;
  min-height: 3.125rem;
  transition: color .3s;
}
.ss-card-download .ss-stats .line-transformed {
  display: none;
}
.ss-card-download.active .header .ss-stats .stat .icon,
.ss-card-download:hover .header .ss-stats .stat .icon {
  filter: invert(67%) sepia(50%) saturate(623%) hue-rotate(314deg) brightness(96%) contrast(132%);
}
.ss-card-download .toggle-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  transition: ease-in-out .3s all;
}
.ss-card-download .toggle-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% - 7rem);
  width: 15rem;
  height: 100%;
  transition: ease-in-out .3s all;
  clip-path: polygon(100% 1%, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
  background-color: var(--color-base-500);
}
.ss-card-download.active .toggle-container::before,
.ss-card-download:hover .toggle-container::before {
  background-color: var(--color-primary);
}
.ss-card-download .icon-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: .75rem;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  transition: all .3s;
}
.ss-card-download.active .icon-toggle,
.ss-card-download:hover .icon-toggle {
  border-color: var(--color-base-100);
  color: var(--color-base-100);
}
.ss-card-download .icon-toggle .minus {
  display: none;
}
.ss-card-download.active .icon-toggle .plus {
  display: none;
}
.ss-card-download.active .icon-toggle .minus {
  display: block;
}
.ss-card-download .body {
  display: none;
  padding: .5rem .5rem .5rem 5.625rem;
  background-color: var(--color-base-400);
}
.ss-card-download .file-item {
  display: grid;
  grid-template-columns: 1.25rem 1fr .8fr;
  gap: .5rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem;
  border-radius: .313rem;
  background-color: var(--color-base-100);
}
.ss-card-download .file-item:last-child {
  border-bottom: 0;
}
.ss-card-download .file-name {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--color-neutral);
}
.ss-card-download .btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  border: 1px solid transparent;
  border-radius: 50%;
  transition: all .3s;
}
.ss-card-download.active .btn-download,
.ss-card-download:hover .btn-download {
  background-color: var(--color-base-100);
  border-color: var(--color-base-100);
}

.ss-card-download.mini .header {
  grid-template-columns: 5.625rem 1fr;
}
.ss-card-download.mini .body {
  padding: .5rem;
}

.ss-card-download.style-02 .icon-toggle {
  width: auto;
  height: auto;
  border: 0;
}
.ss-card-download.style-02.active .icon-toggle,
.ss-card-download.style-02:hover .icon-toggle {
  filter: brightness(0) invert(1);
}

.ss-card-download.style-02.hover-toggle-container {
  border: 0;
}
.ss-card-download.style-02.hover-toggle-container .header {
  background-color: var(--color-base-200);
}
.ss-card-download.style-02.hover-toggle-container:hover .header {
  background-color: var(--color-neutral);
}
.ss-card-download.style-02.hover-toggle-container:hover .toggle-container {
  padding-left: 6.725rem;
}
@media screen and (max-width: 768px) {
  .ss-card-download .header {
    grid-template-columns: 5rem 1fr 3rem;
    gap: 0.75rem;
  }
  .ss-card-download .icon-container {
    width: 5rem;
    height: 100%;
  }
  .ss-card-download .icon-container img {
    width: 1.5rem;
  }
  .ss-card-download .toggle-container::before {
    left: calc(100% - 6.5rem);
  }
  .ss-card-download .body {
    padding: .5rem;
  }
}


/* Tabs */
.tabs.tabs-01 {
  display: flex;
  align-items: center;
  gap: .5rem 2rem;
}
.tab-container .body .tab-content.active {
  display: block;
}
.tabs.tabs-01 .tab {
  position: relative;
  height: auto;
  padding: .625rem 1.2rem;
}
.tabs.tabs-01 .tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: ease-in-out .3s all;
  background-color: var(--color-primary);
}
.tabs.tabs-01:not(.list) .tab:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1rem;
  height: 100%;
  width: .125rem;
  background-color: #E0E0E0;
}
.tabs.tabs-01 .tab.active::before,
.tabs.tabs-01 .tab:hover::before {
  opacity: 0.1;
}
.tabs.tabs-01 .tab .wrapper {
  position: relative;
  display: contents;
  width: 100%;
  height: 100%;
}
.tabs.tabs-01 .tab .wrapper::before,
.tabs.tabs-01 .tab .wrapper::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border-color: var(--color-primary);
  z-index: 1;
  transition: ease-in-out .3s all;
}
.tabs.tabs-01 .tab .wrapper::before {
  top: 0;
  left: 0;
}
.tabs.tabs-01 .tab .wrapper::after {
  bottom: 0;
  right: 0;
}
.tabs.tabs-01 .tab.active .wrapper::before,
.tabs.tabs-01 .tab:hover .wrapper::before {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 1;
  border-width: 2px 0 0 2px;
}
.tabs.tabs-01 .tab.active .wrapper::after,
.tabs.tabs-01 .tab:hover .wrapper::after {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 1;
  border-width: 0 2px 2px 0;
}
.tab-content {
  display: none;
  animation: fadeEffectHide 1s;
}
.tab-content.active {
  position: relative;
  display: block;
  animation: fadeEffect 1s;
}

.tabs.tabs-01.no-border .tab::after {
  display: none;
}

.tabs.tabs-01.style-02 .tab .wrapper::before,
.tabs.tabs-01.style-02 .tab .wrapper::after {
  border-color: var(--color-secondary);
}
.tabs.tabs-01.style-02 .tab:not(:last-child)::after {
  background-color: var(--color-base-100);
}

.tabs.tabs-01.style-03 .tab::before {
  background-color: rgba(0, 0, 0, 0.5);
}
@keyframes fadeEffect {
  from {opacity: 0; top: 10rem;}
  to {opacity: 1; top: 0;}
}
@keyframes fadeEffectHide {
  from {opacity: 1; top: 0;}
  to {opacity: 0; top: 10rem;}
}


/* Global Search Container */
.global-search-opened {
  overflow: hidden;
}
.global-search-container{
  display:block; position:absolute; inset: 0; z-index:100;
  opacity:0; pointer-events:none; padding:1.5rem; display:flex; justify-content:center; align-items:center;
  visibility: hidden;
}
.global-search-container .search-bg{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0, 0, 0, 0.8);
}
.global-search-container.active{opacity:1; pointer-events:all; visibility:visible;}
.global-search-container > .wrapper{
  position:relative; width:100%; height:100%; padding:1.5rem 1.5rem 6rem 1.5rem;;
  display:flex; align-items:center;
}
.global-search-container .input-wrapper{
  display:flex; align-items:center;
}
.global-search-container .input-inner{position:relative; width:calc(100% - 2rem);}
.global-search-container .btn-close{
  width:2rem; display:flex; justify-content:center; transition:opacity .25s;;
}
.global-search-container .btn-close:hover{opacity:.7;}
.global-search-container .input-inner button{
  position:absolute; top:0; right:0; bottom:0; width:3rem; background:transparent; transition:.25s;
  display:flex; justify-content:center; align-items:center; border:0; cursor:pointer;
}
.global-search-container .input-inner button:hover{opacity:.7;}
.global-search-container .input-inner button img {width: 1.2rem;}
.global-search-container .hamburger{position:relative; transition:all .3s ease-in-out;}
.global-search-container .hamburger{cursor:pointer;}
.global-search-container .hamburger > *{
  position:relative; width:1.625rem; height:.125rem;
  transform:translateX(.375rem); transition:all .45s;
  background-color: var(--color-base-100);
}
.global-search-container .hamburger > *:nth-child(2){margin:.4375rem 0; width:2rem; transform:none;}
.global-search-container .hamburger.active > *:nth-child(1){
  width:1.25rem; -webkit-transform:rotate(-45deg)translate(-.4rem, .4rem);
  transform:rotate(-45deg)translate(-.4rem, .4rem);
}
.global-search-container .hamburger.active > *:nth-child(2){opacity:0; transform:translateX(2rem);}
.global-search-container .hamburger.active > *:nth-child(3){
  width:1.25rem; -webkit-transform:rotate(45deg)translate(-.4rem,-.4rem);
  transform:rotate(45deg)translate(-.4rem, -.4rem);
}
.global-search-container .contents{
  position:relative; z-index:3; width:100%; max-width:700px; margin:0 auto;
}
.global-search-container .content-lists{max-height:30rem; overflow-y:auto;}
.global-search-container form{width:100%;  position:relative;}
.global-search-container .input-container{position:relative;}
.global-search-container input[type=text]{
  width: 100%; 
  font-size: 1.25rem; 
  font-weight: 700; 
  color: var(--color-base-100);
  border-bottom: 1.5px solid var(--color-base-100); 
  border-radius:0;
  padding:.75rem 3.75rem .75rem 0; margin:0; box-shadow:none; transition:border-color .3s;
}
.global-search-container input[type=text]::placeholder{
  font-weight:700;
  color: var(--color-base-100);
}


/* Breadcrumbs */
.breadcrumbs .item::before {
  display: none;
}
.breadcrumbs .text {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  max-width: 6rem;
}
@media (width >= 40rem) {
  .breadcrumbs .text {
    max-width: 16rem;
  }
}
@media (width >= 64rem) {
  .breadcrumbs .text {
    max-width: 32rem;
  }
}


/* List Search */
.list-search .option.view .item {
  background-color: var(--color-base-900);
  transition: ease-in-out .3s all;
}
.list-search .option.view .item.active,
.list-search .option.view .item:hover {
  background-color: var(--color-primary);
}
.list-search .option.view .item.active img,
.list-search .option.view .item:hover img {
  filter: brightness(0) invert(1);
}


/* Pagination */
.paginate .arrow,
.paginate .page {
  color: var(--color-base-1000);
  background-color: transparent;
  transition: ease-in-out .3s all;
}
.paginate .arrow.active,
.paginate .page.active,
.paginate .arrow:hover,
.paginate .page:hover {
  color: var(--color-white);
  background-color: var(--color-primary);
}
.paginate .arrow.disabled {
  opacity: .5;
}


/* Tooltip */
.tooltip {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.tooltip.tooltip-open {
  opacity: 1;
}


/* Embed Popup */
.embed-popup{
  display:none; 
  position:absolute; 
  top: 120%;
  right: 0;
  z-index:999;
  width:300px; 
  border: 1px solid transparent;
  color: var(--color-black);
  background-color: var(--color-base-100);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 1rem;
}
.embed-popup.active {
  display: block;
}
.embed-popup .popup-inner{position:relative;}
.embed-popup .popup-close{
  position: absolute; right:-.5rem; top:-.75rem;
  background: transparent; border:none; font-size:1.2rem;
  cursor:pointer;
}
.embed-popup .embed-code{
  width:100%; min-height:60px; resize:none;
  margin-bottom:.5rem; border: 1px solid transparent; border-radius: 4px;
  padding: .5rem; font-family: monospace;
}


/* Shape */
.diamond {
  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );
}
.triangle-up {
  clip-path: polygon(
    50% 0%,
    0% 100%,
    100% 100%
  );
}
.triangle-down {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    50% 100%
  );
}
.triangle-left {
  clip-path: polygon(
    100% 0%,
    100% 100%,
    0% 50%
  );
}
.triangle-right {
  clip-path: polygon(
    0% 0%,
    100% 50%,
    0% 100%
  );
}
.triangle-top-left {
  clip-path: polygon(
    0 0, 
    100% 0, 
    50% 50%, 
    0 100%
  );
}
.triangle-left-bottom {
  clip-path: polygon(
    50% 50%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}


/* Modal */
.modal-02 {
  .modal-box {
    position: relative;

    .modal-content {
      position: relative;
      opacity: 0;
      z-index: 1;
      transition: ease-in-out .3s all;

      &::before, &::after {
        content: '';
        position: absolute;
        width: 10.938rem;
        height: 10.938rem;
        border-color: var(--color-primary);
        transition: ease-in-out .3s opacity;
      }
      &::before {
        top: 0;
        left: 0;
        border-width: 6px 0 0 6px;
      }
      &::after {
        bottom: 0;
        right: 0;
        border-width: 0 6px 6px 0;
      }
    
    }

    .modal-logo {
      position: absolute;
      top: calc(50% - 9rem);
      left: calc(50% - 9rem);
      transition: ease-in-out .5s all;

      .img-container {
        position: relative;
        transition: ease-in-out 1.5s all;

        &::before, &::after {
          content: '';
          position: absolute;
          width: 5rem;
          height: 5rem;
          border-color: var(--color-primary);
        }
        &::before {
          top: 0;
          left: 0;
          border-width: 6px 0 0 6px;
        }
        &::after {
          bottom: 0;
          right: 0;
          border-width: 0 6px 6px 0;
        }

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

      &.active {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        
        .img-container  {
          .wrapper {
            opacity: 0;
          }

          &::before, &::after {
            width: 10.938rem;
            height: 10.938rem;
          }
        }
      }
    }
  }
}


/* Comment */
.reply-container {
  position: relative;
  overflow: hidden;

  .reply-comment {
    position: relative;

    &:first-child {
      z-index: 1;
    }

    &~.reply-comment {
      position: relative;
      margin-left: 6.5rem;

      &::before {
        content: '';
        position: absolute;
        bottom: calc(100% - 2.5rem);
        left: -2.75rem;
        width: 2.75rem;
        height: 3.2rem;
        border-width: 0 0 1px 1px;
        border-color: #9D9D9D;
        border-style: solid;
        border-radius: 0 0 0 1.25rem;
      }

      &:not(:nth-child(2))::after {
        content: '';
        position: absolute;
        bottom: 100%;
        left: -2.75rem;
        height: 200%;
        width: 2.75rem;
        border-width: 0 0 0 1px;
        border-color: #9D9D9D;
        border-style: solid;
      } 

    }

  }
}

@media (width < 40rem) {

  .reply-container {

    .reply-comment {

      &~.reply-comment {
        margin-left: 3.5rem;
      }

    }
    
  }
      
}


/* Rating Container */
.rating-container{display:flex; flex-wrap:wrap; gap:10px;}
.rating-option{
  display:inline-block; padding:10px 20px;
  cursor:pointer; text-align:left;
  transition: background-color .2s, border-color .2s;
  width: 100%;
}
.rating-option input[type="radio"]{display: none;}
.rating-option label{
  display:block; cursor:pointer; position:relative; 
  padding-left:1.625rem; font-weight:400;
}
.rating-option label::before{
  content:''; position:absolute; top:50%;
  left:0; transform: translateY(-50%);
  width:1rem; height:1rem; border:2px solid transparent;
  border-radius:50%; background-color:#fff;
  /* background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/%3E%3C/svg%3E'); */
  background-size: 1.35rem;
  background-color:#D8D8D8; border-color:#D8D8D8;
  transition:background-color 0.2s, border-color 0.2s;
}
.rating-option input[type="radio"]:checked + label::before {
  background-color: #ffffff; border-color:#ffffff;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238B0000"%3E%3Cpath d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/%3E%3C/svg%3E');
  background-repeat:no-repeat; background-position: center;
}
.rating-option.active {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}
.rating-option.result{
  position: relative; overflow: hidden;
  pointer-events:none; display:flex; align-items:center;
  justify-content:space-between;
}
.rating-option.result p {position: relative;}
.rating-option.result .bg-color {
  position: absolute; height: 100%; left: 0;
}
@media screen and (max-width:767.98px){
  .rating-container{justify-content:center;}
}

/* Chart */
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart-container .chart-poll {
  width: 13rem;
  height: 13rem;
}
.chart-container .chart-data .list-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.chart-container .chart-data .list-item .dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
}
@media (width >= 80rem) {
  .chart-container .chart-poll {
    width: 15rem;
    height: 15rem;
  }
}


/* System */
.content-system {
  font-family: var(--font-sans);
  margin-top: 4rem;
  margin-left: 3.375rem;
}
@media (width >= 64rem) {
  .content-system {
    margin-left: 21.125rem;
  }
}


/* Breadcrums */
.breadcrumbs.style-02 .item:not(:first-child)::before {
  content: '';
  position: relative;
  display: block;
  border: 1px solid black;
  width: 1rem;
  rotate: unset;
  height: 0;
  left: -.25rem;
  margin-top: .2rem;
}


/* Mini Box */
.mini-box-toggle {
  .content {
    .wrapper {
      color: var(--color-primary);
      background-color: #F6F6F6;
    }

    &.active {
      .wrapper {
        color: var(--color-primary-content);
        background-color: var(--color-primary);
      }
    }
  }
}


/* Pattern */
.pattern-spin {
  animation: pattern-spin 10s linear infinite alternate;
}
@keyframes pattern-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-180deg); }
}


/* Calendar */
.fc-event{
  border:none !important;
  padding:0 !important;
}
.event-card{
  width: 100%;
  color:var(--color-primary-content);
  padding:6px 8px;
  border-radius:6px;
  font-size:12px;
  cursor: pointer;
  overflow: hidden;
}
.event-popover{
  position:absolute;
  display: none;
  top: -12%;
  left: 12%;
  background:var(--color-primary-content);
  border-radius:10px;
  width:320px;
  max-height: 350px;
  box-shadow:0 10px 20px rgba(0,0,0,.15);
  z-index:-1;
  opacity: 0;
  overflow: auto;
  transition: .3s ease-in-out all;
}
.fc-event:hover {
  z-index: 10;
}
.fc-event:hover .event-popover{
  display: block;
  opacity: 1;
  z-index: 10;
}
.event-popover .popover-wrapper {
  border-top: 4px solid;
  padding: 15px;
}
.event-dot{
  position: relative;
  width:6px;
  height:6px;
  background:#2563eb;
  border-radius:50%;
  margin:4px auto 0;
}


/* Calendar Day */
.fc-timegrid-event-harness > .fc-timegrid-event {
  margin-left: .5rem;
}
.fc-timegrid-event,
.fc-scrollgrid,
.fc .fc-scrollgrid-section > td {
  border-radius: 10px;
}
.fc-timeGridDay-view thead {
  display: none;
}
.fc-scroller-harness col,
.fc-timegrid-slots col,
.fc-timegrid-cols col {
  width: 76px !important;
}
.fc-theme-standard th {
  vertical-align: middle;
  color: #364153;
}
.fc-theme-standard th,
.fc .fc-timegrid-slot {
  height: 56px;
}
.fc .fc-timegrid-slot-label {
  vertical-align: top;
}
.fc-direction-ltr .fc-timegrid-slot-label-frame {
  color: #6A7282;
  text-align: left;
  padding: 6px;
}
.fc .fc-timegrid-col.fc-day-today {
  background-color: transparent;
}

/* Calendar Week */
.calendar-week #calendar {
  height: 1123px;
}
.calendar-week .fc .fc-scrollgrid-section-header > * {
  border-radius: 10px 10px 0 0;
}
.calendar-week .fc .fc-scrollgrid-section > td {
  border-radius: 10px 0 10px 10px;
}
.calendar-week .fc .fc-timegrid-event-harness {
  width: 100%;
  left: 0 !important;
}
.calendar-week .fc-day-sat .event-popover {
  left: unset;
  right: 12%;
}

/* Calendar Month */
.calendar-month .fc-toolbar-title {
  font-weight: 700;
}
.calendar-month .fc .fc-daygrid-day-top {
  flex-direction: row;
}
.calendar-month .fc .fc-daygrid-day.fc-day-today {
  background-color: transparent;
}
.calendar-month .fc-daygrid-day-number {
  font-size: 13px;
  font-weight: 600;
  margin: 5px;
}
.calendar-month .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  width: 26px;
  height: 26px;
  background-color: var(--color-05);
  color: var(--color-primary-content);
  border-radius: 5rem;
}
.calendar-month .event-popover {
  top: -3rem;
}
.calendar-month .fc-day-sat .event-popover {
  left: unset;
  right: 12%;
}
.calendar-month .fc-daygrid-body table tbody tr:nth-last-child(1) .event-popover,
.calendar-month .fc-daygrid-body table tbody tr:nth-last-child(2) .event-popover {
  top: unset;
  bottom: -3rem;
}

/* Calendar Year */
.calendar-year .fc .fc-toolbar {
  font-weight: 600;
}
.fc .fc-multimonth {
  border: 0;
}
.calendar-year .fc .fc-multimonth-multicol .fc-multimonth-month {
  position: relative;
  padding: 1.6em 1.2em;
}
.calendar-year .fc .fc-multimonth-multicol .fc-multimonth-month::before {
  content: '';
  position: absolute;
  width: 95%;
  height: 95%;
  top: 2.5%;
  left: 2.5%;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.fc-multimonth-month:nth-child(3n) .fc-daygrid-day .event-popover {
  left: unset;
  right: 12%;
}
.calendar-year .fc-daygrid-day:hover .event-popover{
  display: block;
  opacity:1;
  z-index:10;
}
.calendar-year .fc-multimonth-month:has(.fc-daygrid-day:hover){
  z-index:10;
}
.calendar-year .fc .fc-multimonth-title {
  font-size: 1rem;
  padding: .5rem 0;
}
.calendar-year .fc-theme-standard td, 
.calendar-year .fc-theme-standard th {
  font-weight: 400;
  border: 0;
}
.calendar-year .fc-theme-standard td {
  height: 52px;
}
.calendar-year .fc .fc-daygrid-day-top {
  font-size: 12px;
  justify-content: center;
  margin-top: 10px;
}
.calendar-year .fc-day-disabled .fc-daygrid-day-top {
  visibility: visible !important;
  color: #D1D5DC;
}
.calendar-year .fc .fc-day-disabled {
  background: transparent;
}
.calendar-year .fc .fc-daygrid-day.fc-day-today {
  background-color: transparent;
}
.calendar-year .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 2px;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  background-color: #155DFC;
}
.calendar-year .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top {
  color: var(--color-primary-content);
  font-weight: 700;
}
.calendar-year .fc .fc-daygrid-day.fc-day-today .event-dot {
  background-color: #2B7FFF;
}


/* Youtube Player */
.youtube-player iframe {
  width: 100%; 
  height: 30vw;
  border-radius: 1rem;
}
@media screen and (max-width: 567.98px) {
  .youtube-player iframe {height: 50vw;}
}