.header-elsa {
    background: url(Kemenkeu/img/header-top.png) repeat-x;
    height: 100%;
    margin-left: -10px;
    margin-bottom : 20px;
}
.top-navbar {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    padding:10px;
}
.form-login {
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
    row-gap:5px;
}
.login-wrapper {
    display:flex;
    flex-direction: row;
}
.item-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btn-login {
    margin-top:5px;
    margin-left:10px;
}
.item-login > label {
    color:#fff;
}
.item-login > input {
    padding : 0px 10px;
}
.item-login > a {
    color: #ffff00;
}

.menu-navbar {
    display:none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px 60px;
    background-color: #003567;
}
.menu-navbar > a {
    color :#fff;   
    padding : 5px 15px;
    margin : 5px 0px;
}
.menu-responsive {
    display:flex;
    justify-content:space-between;
    align-items: center;
    background-color: #003567;
    padding:10px;
    color:#fff;
}
.menu-responsive > i {
    padding-right : 15px;   
}
.navbarmenu_responsive {
    display : none;
    z-index: 2;
    width: 70vw;
    position: fixed;
    height: 100vh;
    top: 0;
    right: 0;
    flex-direction: column;
    justify-content: start;
    padding-top:10vh;
    align-items: center;
    background-color: #003567;
    background-position: 0;
    background-repeat: no-repeat;
}
.navbarmenu_responsive > a {
    text-decoration:none;
    color:#fff;
    padding:10px;
}
.navbarmenu_responsive > .close-menu {
    position:absolute;
    top : 20px;
    right: 20px;
    color : #fff;
    font-weight: normal;
}

.show_responsive {
    display:flex;
}

@media (max-width: 600px) {
    .logo-elsa {
        display:none;
    }
    .form-login {
        flex-direction: column;
    }
    .btn-login {
        width: 100%;
    }
}


/*@media (min-width: 601px) and (max-width: 1024px) {
    .form-login {
        flex-direction:column;
    }
    .btn-login {
        width: 100%;
    }
}*/

@media (min-width: 1025px) {
    .menu-responsive {
        display: none;
    }
    .menu-navbar {
        display:flex;
    }
}

/* Define the fade-in-left animation */
@keyframes slideInRight {
    from {
        transform: translateX(100px); /* Start 100px to the right */
    }

    to {
        transform: translateX(0); /* End at the original position */
    }
}

/* Apply the animation to an element */
.slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

.accordion,
.nested-accordion {
    width: 80%;
}

.accordion-item {
    margin-bottom: 10px;
    border-radius: 5px;
}

.accordion-header {
    display: block;
    padding: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
}

.accordion-content {
    display: none;
    padding: 5px;
}

.accordion-item input[type="checkbox"] {
    display: none;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
    display: block;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header {
}

/* Nested Accordion Styling */
.nested-accordion {
    margin-left: 10px;
}

.nested-accordion .accordion-header {
    font-size: 0.9em;
}

.nested-accordion .accordion-header:hover {
}

.nested-accordion .accordion-content {
}

.accordion-header .arrow {
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header .arrow {
    transform: rotate(-180deg); /* Rotate arrow up */
}