:root,
:root[data-bs-theme=light] {
  --only-light: unset;
  --only-dark: none;

  --color-primary-dark-primary-contras-primary: #B33022;
  --color-primary-dark-primary-contras-yellow: #B33022;
  --color-primary-dark-primary-contras-gray: #B33022;
  --color-primary-dark-white-contras-yellow: #B33022;
  --color-primary-dark-white-contras-cyan: #B33022;
  --color-primary-dark-primary-contras-cyan: #B33022;
  --color-primary-dark-white-contras-white: #B33022; 
  
  --bg-gradient-app-primary: #B33022;
  --bg-gradient-app-secondary: #E74C3C;   

  --color-gray-dark-gray-contras-none: #3F4254;
  --color-gray-dark-gray-contras-white: #3F4254;
  --color-gray-dark-gray-contras-gray: #3F4254;
  --color-gray-dark-white-contras-gray: #3F4254;
  --color-gray-dark-white-contras-yellow: #3F4254;
  --color-gray-dark-gray-contras-cyan: #3F4254;
  --color-gray-dark-white-contras-white:#3F4254;
  --color-gray-dark-white-contras-cyan: #3F4254;

  --shadow-gallery: rgba(255, 255, 255, 0.9);

  --color-badge-border: #ddd;
  
  --bg-card: #fff;
  --bg-opacity-primary: rgba(60, 160, 231, 0.1);
  --bg-opacity-second-primary: rgba(60, 160, 231, 0.2);
  --bg-footer: rgba(62, 151, 255, 1);

  --color-white-dark-white-contras-none: #fff;
  --color-white-dark-black-contras-none: #fff;
  --color-white-dark-blue-contras-none: #fff;
  --color-white-dark-white-contras-white: #fff;
  --color-white-dark-white-contras-yellow:#fff;
  --color-white-dark-white-contras-cyan:#fff;
  --color-white-dark-transparent-contras-transparent: #fff;
  --color-border-card: #D9DBE4;


  --color-gray-dark-semiwhite-contras-semiwhite: #3F4254;
  --border-full-calendar:#ddd;
  --color-semigray-dark-white-contras-white:#7E8299;
}

:root[data-bs-theme=dark] {
  --only-light: none;
  --only-dark: unset;

  --color-primary-dark-primary-contras-primary: #B33022;
  --color-primary-dark-primary-contras-yellow: #B33022;
  --color-primary-dark-primary-contras-gray: #B33022;
  --color-primary-dark-white-contras-cyan: #fff;
  --color-primary-dark-white-contras-yellow: #fff;  
  --color-primary-dark-white-contras-white: #fff;  
  --color-primary-dark-primary-contras-cyan: #B33022;

  --bg-gradient-app-primary: #1F2633;
  --bg-gradient-app-secondary: #1F2633;

  --color-gray-dark-gray-contras-none: #3F4254;
  --color-gray-dark-gray-contras-white: #3F4254;
  --color-gray-dark-gray-contras-cyan: #3F4254;
  --color-gray-dark-white-contras-gray: #fff;
  --color-gray-dark-gray-contras-gray: #3F4254;
  --color-gray-dark-white-contras-yellow: #fff;
  --color-gray-dark-white-contras-white:#fff;
  --color-gray-dark-white-contras-cyan: #fff;

  --color-gray-dark-semiwhite-contras-semiwhite: #BBBBBB;
  --border-full-calendar:#fff;
  --color-semigray-dark-white-contras-white:#fff;

  --color-badge-border: #fff;
  --shadow-gallery: rgba(255, 255, 255, 0.1);

  --bg-opacity-primary: #1E1E2F;
  --bg-opacity-second-primary: #000000;
  --bg-footer: #1E1E2F;
  --bg-card: #000000;

  --color-white-dark-white-contras-none: #fff;
  --color-white-dark-black-contras-none: #000000;
  --color-white-dark-blue-contras-none: #B33022;
  --color-white-dark-white-contras-white: #fff;
  --color-white-dark-white-contras-yellow:#fff;
  --color-white-dark-white-contras-cyan:#fff;
  --color-white-dark-transparent-contras-transparent: transparent;

  --color-border-card: #3D3D3D;
}

:root[data-bs-theme=contras] {
  --only-light: none;
  --only-dark: unset;

  --color-primary-dark-primary-contras-primary: #B33022;
  --color-primary-dark-primary-contras-yellow: #FFFF00;
  --color-primary-dark-white-contras-yellow: #FFFF00;
  --color-primary-dark-primary-contras-gray: #2A2A2A;
  --color-primary-dark-white-contras-cyan: #00FFFF;
  --color-primary-dark-primary-contras-cyan: #00FFFF;
  --color-primary-dark-white-contras-white: #fff;  

  --bg-gradient-app-primary: #1F2633;
  --bg-gradient-app-secondary: #1F2633;

  --color-gray-dark-gray-contras-none: #3F4254;
  --color-gray-dark-gray-contras-yellow: #FFFF00;
  --color-gray-dark-white-contras-yellow: #FFFF00;
  --color-gray-dark-gray-contras-gray:#3F4254;
  --color-gray-dark-gray-contras-white: #fff;
  --color-gray-dark-gray-contras-cyan: #00FFFF;
  --color-gray-dark-white-contras-white:#fff;
  --color-gray-dark-white-contras-cyan: #00FFFF;

  --color-badge-border: #00FFFF;
  --shadow-gallery: rgba(255, 255, 255, 0.1);

  --bg-opacity-primary: #1E1E2F;
  --bg-opacity-second-primary: #000000;
  --bg-footer: #1E1E2F;
  --bg-card: #000000;

  --color-gray-dark-semiwhite-contras-semiwhite: #BBBBBB;

  --border-full-calendar:#00FFFF;
  --color-semigray-dark-white-contras-white:#fff;

  --color-white-dark-white-contras-none: #000000;
  --color-white-dark-black-contras-none: #000000;
  --color-white-dark-blue-contras-none: #000000;
  --color-white-dark-white-contras-yellow: #FFFF00;
  --color-white-dark-white-contras-cyan:#00FFFF;
  --color-white-dark-transparent-contras-transparent: transparent;

  --color-border-card: #3D3D3D;
}

.bg-card{
  background: var(--bg-card);
}


.bg-gradient-app{
  background: linear-gradient(279.32deg, var(--bg-gradient-app-primary) 38.7%, var(--bg-gradient-app-secondary) 100%);
}

.text-white-contras{
  color: var(--color-white-dark-white-contras-yellow) !important;
}
.text-white{
  color: var(--color-white-dark-white-contras-none);
}

body{
    font-family: "Inter", sans-serif;    
    font-style: normal;
    color:var(--color-gray-dark-semiwhite-contras-semiwhite);
    background-color: var(--color-white-dark-black-contras-none);
    font-size: 15px;
}

.mode-monokrom{
      filter: grayscale(100%) !important;
}

.bg-app-primary{
    background-color: var(--color-primary-dark-primary-contras-yellow) !important;
}
.c-app-primary{
    color: var(--color-primary-dark-primary-contras-yellow);
}
.bg-app-primary-no-contras{
  background-color: var(--color-primary-dark-primary-contras-primary) !important;
}
.c-app-primary-no-contras{
  color: var(--color-primary-dark-primary-contras-primary);
}

.btn-app-primary{
    color: var(--color-white-dark-white-contras-yellow) !important;
    background-color: var(--color-primary-dark-primary-contras-gray) !important;
    text-decoration: none !important;
}
.container{
  max-width: 1320px;
}
.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Maksimal 2 baris */
    -webkit-box-orient: vertical;
  }

  .tab-custom-container {
    display: flex;
    background-color: var(--bg-opacity-primary);
    border-radius: 9999px;
    flex-wrap: wrap;
    padding: 7px;
    gap: 4px;
  }
  
  .tab-custom {
    padding: 5px 10px;
    min-width: 150px;
    font-size: 14px;
    text-align: center;
    border-radius: 9999px;
    border: 0 !important;
    box-shadow: unset !important;
    color: var(--color-gray-dark-white-contras-white);
    font-weight: 500;
    background-color: transparent !important;
    cursor: pointer;
    cursor: pointer;
  }
  
  
  .tab-custom.active {
    background-color: var(--color-white-dark-blue-contras-none) !important;
    color: var(--color-gray-dark-white-contras-yellow);
    font-weight: 600;    
  }
  
  .section-title-information .badge {
    border: 1px solid var(--color-badge-border);
    color: var(--color-gray-dark-white-contras-yellow);
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 13px;
  }
  
  .section-title-information .title {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-gray-dark-white-contras-yellow);
  }
  
  @media (max-width: 991px) {
    .section-title-information .title {
      font-size: 22px;
    }
  }
  
  .section-title-information .desc {
    color: var(--color-gray-dark-white-contras-white);
    font-size: 16px !important;
    font-weight: normal !important;
  }

  .section-title-information .desc.contras{
    color: var(--color-gray-dark-white-contras-yellow) !important; 
  }

  .btn-dropdown-disabilitas::after{
    display: none !important
  }

  [v-cloak]{
    display: none !important;
  }

  nav.navbar.main-menu ul.nav > li > a:after{
    display: none !important;
  }


  .fc-toolbar-title{
    color: var(--color-gray-dark-white-contras-yellow);
  }

  .fc .fc-daygrid-day-number{
    color: var(--color-gray-dark-white-contras-yellow);
  }
  .fc .fc-col-header-cell-cushion{
    color: var(--color-gray-dark-white-contras-yellow);
  }

  .fc-event{
    background-color: var(--color-primary-dark-primary-contras-primary);
  }

  .fc-theme-standard td, .fc-theme-standard th{
    border: 1px var(--border-full-calendar) solid !important;
  }


  .cursor-pointer{
    cursor: pointer;
  }

  .fs-14px{
    font-size: 14px;
  }

  .fs-15px{
    font-size: 15px;
  }

  .fs-16px{
    font-size: 16px;
  }
  .fs-h5{
    font-size: 1.25rem;
  }

  .fs-small{
    font-size: .875em;
  }

  .fs-12px{
    font-size: 12px;
  }
  .fs-20px{
    font-size: 20px;
  }
  .fs-24px{
    font-size: 24px;
  }