.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.page-link {
    color:#FFF;
    background-color: rgba(255,255,255,0.1);
    border: none;
    box-shadow: none;
}
.page-link:hover{
 background-color:rgba(229, 87, 252, 0.3);
 color: #FFF;
}

.header {
  padding: 10px 0px 10px 0px;
}
.site-logo {
  width: 170px;
  height: auto;
}
.navmenu>ul>li {
  white-space: nowrap;
}
.top-menu{
  right:10px;top:-2px;bottom:0px;position:absolute;

}
.top-menu>ul>li{
  display: inline-block;
  padding: 0px;
  color:#f7f9ff;
}
.top-menu>ul>li a{
  font-size:12px; text-transform: uppercase;
  font-weight:300;color:#f7f9ff;
    padding:0px 10px;

}
.top-menu>ul>li:hover>a{
  color:#fff;
}

.top-menu .active,
.top-menu .active:focus {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;

}

.top-menu .dropdown ul {
  list-style-type: none;
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .top-menu .dropdown ul li {
    min-width: 200px;
  }

  .top-menu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: #e8edf6;
  }

  .top-menu .dropdown ul a i {
    font-size: 12px;
  }

  .top-menu .dropdown ul a:hover,
  .top-menu .dropdown ul .active:hover,
  .top-menu .dropdown ul li:hover>a {
    color: #fff;
  }

  .top-menu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .top-menu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .theme-light{
     margin-top: 30px;
    color: #d8deea;
    background-color: var(--main-bg-color);
  }

  .theme-dark{
     margin-top: 50px;
    color: #FFF;
    background-color:var(--main-bg-color);
  }

  .theme-dark a{
    color: #FFF;
  }
  .theme-light a{
    color: #f7f9ff;
  }


  .theme-dark .news-detail-desc a{
    color: rgb(183, 188, 255)
  }

  .theme-light .news-detail-desc a{
    color: rgb(183, 188, 255)
  }

  .theme-dark .news-detail-desc img{
    cursor: pointer;
  }

  .theme-light .news-detail-desc img{
    cursor: pointer;
  }

  #dynamicContent img.zoomed {
    transform: scale(1.9);
    transition: all 0.1s ease-in-out;
    position: absolute; top: center; left: 25%;
    max-width: 100%;
    z-index:1000;
    box-shadow:2px 2px 30px #000;
    margin: 0 auto;
  }

  .tbody, td, tfoot, th, thead, tr {
    border-style: none;
  }

  /*Dark Table*/
  .theme-dark .news-detail-desc .table {
   --bs-table-bg: rgba(33, 187, 191, 0.03);
   --bs-table-color:#FFF;
   border-radius: 12px;
  }
  .theme-dark .news-detail-desc .table-bordered > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color:rgba(33, 187, 191, 0.2);
   color:#FFF;
  }
  .theme-dark .news-detail-desc .table tr:first-child {
    background-color: rgba(33, 187, 191, 0.5);
  }
  /*end Dark Table*/

  /*light Table*/
  .theme-light .news-detail-desc .table {
   --bs-table-bg: rgba(255, 255, 255, 1);
   --bs-table-color:#000;
  }
  .theme-light .news-detail-desc .table-bordered > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color:rgba(33, 187, 191, 0.1);;
   color:#000;
  }
  .theme-light .news-detail-desc .table tr:first-child {
    background-color: rgba(33, 187, 191, 0.5);
  }
  /*end Light Table*/





@media (max-width: 767px) {

    #dynamicContent img.zoomed {
      transform: scale(1.2);
      position: relative; left: 5%;
      width: auto;
      max-width: 100%;
      transition: all 0.2s ease-in-out;
      z-index:1000; border-radius:8px;
      box-shadow:2px 2px 30px #000;
      margin: 0 auto;

    }

  .search-mobile {
    position: absolute;
    right: 70px;
    font-size:18px;
    }

  .navmenu>ul>li {
    white-space: nowrap;
    margin-top: 0px;

  }
  .ul-title{
    text-align:center;
  }

  .theme-light{
     margin-top: 10px;
    color: #d8deea;
    background-color: var(--main-bg-color);
  }

  .theme-dark{
     margin-top: 20px;
    color: #FFF;
    background-color:var(--main-bg-color);
  }

}

.body-theme-dark,
.body-theme-light {
  background-color: var(--main-bg-color);
  color: #d8deea;
}

.body-theme-dark .bg-white,
.body-theme-light .bg-white,
.bg-dark-theme {
  background-color: #10131a !important;
  color: #d8deea;
}

.body-theme-dark .text-black,
.body-theme-light .text-black {
  color: #f7f9ff !important;
}

.body-theme-dark .text-muted,
.body-theme-light .text-muted {
  color: #aeb7c8 !important;
}

.body-theme-dark .card,
.body-theme-light .card,
.body-theme-dark .portfolio-content,
.body-theme-light .portfolio-content,
.body-theme-dark .gallery-card,
.body-theme-light .gallery-card {
  background-color: #171b24;
  color: #d8deea;
}

.body-theme-dark .federasi-about-dark,
.body-theme-light .federasi-about-dark {
  box-shadow: inset 0 0 0 1000px rgba(8, 10, 15, 0.68);
}

/* Federasi full dark theme */
.body-theme-dark,
.body-theme-light,
.body-theme-dark .main,
.body-theme-light .main,
.body-theme-dark section,
.body-theme-light section,
.body-theme-dark .section,
.body-theme-light .section,
.body-theme-dark .portfolio,
.body-theme-light .portfolio,
.body-theme-dark .banner-section,
.body-theme-light .banner-section,
.body-theme-dark .header-banner-bg,
.body-theme-light .header-banner-bg {
  background-color: #080b12 !important;
  color: #e8edf6 !important;
}

.body-theme-dark .header,
.body-theme-light .header,
.body-theme-dark .navmenu ul,
.body-theme-light .navmenu ul,
.body-theme-dark .top-menu .dropdown ul,
.body-theme-light .top-menu .dropdown ul,
.body-theme-dark .dropdown-menu,
.body-theme-light .dropdown-menu,
.body-theme-dark .modal-content,
.body-theme-light .modal-content,
.body-theme-dark .search-content,
.body-theme-light .search-content,
.body-theme-dark #response,
.body-theme-light #response,
.body-theme-dark .card,
.body-theme-light .card,
.body-theme-dark .portfolio-content,
.body-theme-light .portfolio-content,
.body-theme-dark .gallery-card,
.body-theme-light .gallery-card,
.body-theme-dark .box-event,
.body-theme-light .box-event,
.body-theme-dark .news-content-text,
.body-theme-light .news-content-text,
.body-theme-dark .partner-box-img,
.body-theme-light .partner-box-img,
.body-theme-dark .list-event-text,
.body-theme-light .list-event-text,
.body-theme-dark .dropdown-item,
.body-theme-light .dropdown-item,
.body-theme-dark .page-link,
.body-theme-light .page-link {
  background-color: #111722 !important;
  color: #e8edf6 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.body-theme-dark .bg-white,
.body-theme-light .bg-white,
.body-theme-dark .bg-light,
.body-theme-light .bg-light,
.body-theme-dark .text-bg-light,
.body-theme-light .text-bg-light,
.body-theme-dark [style*="background-color: #FFF"],
.body-theme-light [style*="background-color: #FFF"],
.body-theme-dark [style*="background-color:#FFF"],
.body-theme-light [style*="background-color:#FFF"],
.body-theme-dark [style*="background-color: #fff"],
.body-theme-light [style*="background-color: #fff"],
.body-theme-dark [style*="background-color:#fff"],
.body-theme-light [style*="background-color:#fff"],
.body-theme-dark [style*="background-color: white"],
.body-theme-light [style*="background-color: white"],
.body-theme-dark [style*="background-color:white"],
.body-theme-light [style*="background-color:white"] {
  background-color: #10131a !important;
  color: #e8edf6 !important;
}

.body-theme-dark a,
.body-theme-light a,
.body-theme-dark .navmenu a,
.body-theme-light .navmenu a,
.body-theme-dark .top-menu a,
.body-theme-light .top-menu a,
.body-theme-dark .text-dark,
.body-theme-light .text-dark,
.body-theme-dark .text-black,
.body-theme-light .text-black,
.body-theme-dark [style*="color: #000"],
.body-theme-light [style*="color: #000"],
.body-theme-dark [style*="color:#000"],
.body-theme-light [style*="color:#000"],
.body-theme-dark [style*="color: black"],
.body-theme-light [style*="color: black"],
.body-theme-dark [style*="color:black"],
.body-theme-light [style*="color:black"] {
  color: #f7f9ff !important;
}

.body-theme-dark .text-muted,
.body-theme-light .text-muted,
.body-theme-dark small,
.body-theme-light small,
.body-theme-dark .small,
.body-theme-light .small {
  color: #aeb7c8 !important;
}

.body-theme-dark .form-control,
.body-theme-light .form-control,
.body-theme-dark .form-select,
.body-theme-light .form-select,
.body-theme-dark input,
.body-theme-light input,
.body-theme-dark textarea,
.body-theme-light textarea,
.body-theme-dark select,
.body-theme-light select {
  background-color: #0d111a !important;
  color: #f7f9ff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.body-theme-dark .table,
.body-theme-light .table,
.body-theme-dark table,
.body-theme-light table {
  --bs-table-bg: #111722;
  --bs-table-color: #e8edf6;
  --bs-table-striped-bg: #182032;
  --bs-table-striped-color: #f7f9ff;
  --bs-table-border-color: rgba(255, 255, 255, 0.12);
  color: #e8edf6 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.body-theme-dark hr,
.body-theme-light hr {
  border-color: rgba(255, 255, 255, 0.14) !important;
}