/* ==========================================================
   LIGHT THEME
   ========================================================== */

[data-bs-theme="light"] {

    /* Base */
    --bs-body-bg: #f5f7fa;
    --bs-body-color: #0d121c;
    --bs-border-color: #d9e1ea;

    color-scheme: light;
}


/* ==========================================================
   DARK THEME
   ========================================================== */

[data-bs-theme="dark"] {

    /* Base */
    --bs-body-bg: #0d121c;
    --bs-body-color: #f8fafc;
    --bs-border-color: #2d3748;

    color-scheme: dark;
}

body {
    font-family: 'Open Sans', sans-serif;
    transition:
        background-color .25s ease,
        color .25s ease;
}

html[data-bs-theme="light"] body {
    background-image: url('../img/bg_avd_light.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html[data-bs-theme="dark"] body {
    background-image: url('../img/bg_avd_dark.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html[data-bs-theme="light"]  .modal-content  {
    background-image: url('../img/bg_avd_light.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html[data-bs-theme="dark"]  .modal-content  {
    background-image: url('../img/bg_avd_dark.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avd-header {
    height: 60px;
}

.avd-logolabel  {
    width: 40px;
    height: 40px;
}

html[data-bs-theme="light"] .avd-titlelabel {
    color: #0d121c;
}

html[data-bs-theme="dark"]  .avd-titlelabel {
    color: #ffffff;
}

main {
    top: 60px;
    height: calc(100vh - 60px);
}

.login  {
  padding-top: 150px;
}

.avd-sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
}

[data-bs-theme="light"] .avd-sidebar    {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bs-theme="dark"] .avd-sidebar    {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[data-bs-theme="light"] .nav    .nav-item   .nav-link   {
    color: #0d121c;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"]  .nav    .nav-item   .nav-link   {
    color: #ffffff;
    transition: all 0.25s ease;
}

[data-bs-theme="light"] .nav    .nav-item   .nav-link:hover {
    color: #ffffff;
    background-color: #0d6efd;
    border: 1px solid #ffffff;
}

[data-bs-theme="dark"]  .nav    .nav-item   .nav-link:hover {
    color: #ffffff;
    background-color: rgba(13, 110, 253, 0.5);
    border: 1px solid #0d6efd;
}

[data-bs-theme="light"] .btn-avd-primary    {
    color: #ffffff;
    background-color: #0d6efd;
    border: 1px solid #ffffff;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"]  .btn-avd-primary    {
    color: #ffffff;
    background-color: rgba(13, 110, 253, 0.25);
    border: 1px solid #0d6efd;
    transition: all 0.25s ease;
}

[data-bs-theme="light"] .btn-avd-primary:hover  {
    color: #ffffff;
    background-color: #0b5ed7;
    border: 1px solid #ffffff;
}

[data-bs-theme="dark"]  .btn-avd-primary:hover  {
    color: #ffffff;
    background-color: rgba(13, 110, 253, 0.5);
    border: 1px solid #0d6efd;
}

.avd-konten {
    flex: 1;
    overflow-y: auto;
    height: 100%;
}

@media (max-width: 768px) {
  .login  {
    padding-top: 20px;
  }
}