/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}
#sidebar {
    min-width: 270px;
    max-width: 270px;
    background: var(--grayColor) !important;
    color: #fff;
    transition: all 0.3s;
    position: absolute;
    right: 20px;
    height: calc(100% - 85px - 25px);
    z-index: 10;
}
#sidebar-announcement {
    min-width: 30%;
    max-width: 30%;
    background: var(--secColor) !important;
    color: #fff;
    transition: all 0.3s;
    position: absolute;
    right: -30%;
    height: calc(100% - 85px - 25px);
}

#sidebar.active {
    margin-right: -295px;
}
#sidebar-announcement.active {
    margin-right: 30%;
    border-left: 2px solid var(--iconColor);
    border-top: 2px solid var(--iconColor);
    border-top-left-radius: 12px;
    z-index:10;
}
    #sidebar ul li {
        margin-top: 10px;
    }
#sidebar-announcement ul li {
    margin-top: 20px;
}
    #sidebar .sidebar-header {
        background: var(--secColor);
    }
    #sidebar-announcement .sidebar-header {
        background: var(--secColor);
    }
 /* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}
.accordion-button ,.accordion-button:not(.collapsed) {
    background-color: var(--secColor) !important;
    color: #fff;
}
.accordion-body {
    background: var(--grayColor) !important;
}
.accordion-button::after {
    /*background-color:var(--mainColor)!important;*/
}
    .accordion-button::after ,.accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300ffc3'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }
.accordion-button:focus {
    border-color: var(--mainColor) !important;
    box-shadow: 0 0 0 0rem rgb(0 255 195 / 25%) !important;
}
.announcement-img {
    border-radius: 12px;
    margin-top: 12px;
    width: 100%;
}
.announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#ulAnnouncementData {
    margin: 10px;
    max-height: calc(100vh - 100px - 25px) !important;
    overflow-x: hidden;
    overflow-y: auto;
}