.sliderbar {
    /* bootstrap .d-flex */
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    /* bootstrap .flex-row */
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    overflow: hidden;
}
.sliderbar {
    border: 1px solid #9a9a9a;
}

.sliderbar > div {
    display: inline-block;
    position: relative;
    align-self: stretch;
    transition-property: width;
    transition-timing-function: ease-out;
    transition-duration: 1s;
}
.sliderbar > div {
    border: 0px solid #9a9a9a;
    border-width: 0px 1px 0px 0px;
}
.sliderbar > div:last-child {
    border-width: 0px 0px 0px 0px;
}

.sliderbar .opener,
.sliderbar .closer {
    position: absolute;
    right: 0;
    top: 0;
    padding: 1rem 1rem 0 0;
    cursor: none;
    width: 100%;
    text-align: right;
}
.sliderbar .opener:hover,
.sliderbar .closer:hover {
    cursor: pointer;
}
.sliderbar .opener { color: rgba(0, 0, 0, 0.36); }
.sliderbar .opener:hover { color: rgba(0, 0, 0, 0.51); }
.sliderbar .closer { color: #bb5942; }
.sliderbar .closer:hover { color: #9b3b1b; }

.sliderbar .sb_title {
    padding: 1rem 0.5rem;
    background: rgba(244, 244, 244, 1);
    color: #333333;
    font-size: 1.2rem;
}

.sliderbar .sb_title_on {
    background: rgb(210, 210, 210);
    transition: background 1s ease-out;
    font-weight: bold;
}

.sliderbar .sb_title_off {
    background: rgb(255, 255, 255);
    transition: background 1s ease-out;
}

.sliderbar .sb_body {
    background: rgb(241, 241, 241);
    padding: 1rem;
    border: 0px solid #0c5460;
}


/* ---------------------- BLUE Style ********************* */
.sb_blue .sb_title{
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgba(143, 200, 247, 1) 0%, rgba(143, 200, 247, 0) 100%);
    color: #064486;
}
.sb_blue .sb_title_on {
    background: rgba(143, 200, 247, 1);
    background: linear-gradient(90deg, rgb(107, 146, 186) 0%, rgb(129, 182, 226) 50%, rgba(143, 200, 247, 0) 97%);
    color:#fff;
}
.sb_blue .sb_title_off {
    background: rgba(55, 55, 55, 1);
    background: linear-gradient(90deg, rgba(210, 210, 210, 1) 0%, rgba(210, 210, 210, 1) 35%, rgba(0, 0, 0, 0) 100%);
}

.sb_blue .opener { color: #4b89cc; }
.sb_blue .opener:hover { color: #113f76; }
.sb_blue .closer { color: #de4224; }
.sb_blue .closer:hover { color: #a01f06; }

.sb_blue .sb_body {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(143, 200, 247, 0) 0%, rgb(173, 224, 255) 100% );
    -webkit-box-shadow: inset -4px 5px 4px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: inset -4px 5px 4px 0px rgba(0,0,0,0.2);
    box-shadow: inset -4px 5px 4px 0px rgba(0,0,0,0.2);
}