/* ==================
  SideBar Style
=================== */

.slide-bar-member {
    padding-top: 24px;
    padding-bottom: 24px;
    background-color: white;
    /* border-radius: 8px; */
    border: none;
    -webkit-box-shadow: 5px 0px 16px 0 #F6ECC6;
    box-shadow: 5px 0px 16px 0 #F6ECC6;
    margin-left: -16px;
    margin-right: -16px;
    height: 100%;
    /* margin-bottom: 16px; */
}

.slide-bar-member h6 {
    margin-top: 8px;
    margin-left: 20px;
    margin-bottom: 16px;
}

.slide-bar-member .list-group-item {
    display: inherit;
    padding: 1rem 1rem;
    border: 0;
}

.slide-bar-member .list-group-item.active {
    background-color: #7fcef4;
    border-color: #7fcef4;
}

.slide-bar-member .list-group-item.active .list-group-icon,
.slide-bar-member .list-group-item.active p {
    opacity: 1;
}

.slide-bar-member .list-group-item p {
    margin-bottom: 0px;
    opacity: 0.8;
}

.slide-bar-member .list-group-icon {
    margin-right: 8px;
    text-align: center;
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.slide-bar-member .list-group-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* =================
   Responsive style
==================== */

/* Extra Small devices */

@media (max-width: 576px) {}

/* Small devices (landscape phones, 576px and up) */

@media (max-width: 576px) {}

/* Medium devices (tablets, 768px and up) */

@media (max-width: 768px) {
    .slide-bar-member {
        display: none;
    }

}

/* Large devices (desktops, 992px and up) */

@media (max-width: 992px) {


    .modal-content .slide-bar-member {
        border-bottom: 2px solid #f4b4d0;
        border-top: 2px solid #f4b4d0;
        display: block;
        padding-left: 16px;
        margin-top: 32px;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .modal-content .slide-bar-member h6 {
        text-align: left;
        padding-left: 16px;
    }

    .modal-content .slide-bar-member .list-group-item {
        padding-left: 32px;
    }
}

/* Extra large devices (large desktops, 1200px and up */

@media (max-width: 1200px) {}

/* === Responsive style end ! ====*/