h5.opt-text {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid gainsboro;
    line-height: 0.1em;
    margin: 10px 0 20px;

}

h5.opt-text span {
    background:#fff;
    padding:0 10px;
    border-radius:20px;
    font-weight:600;
}
.zoom {
    transition: transform .2s;
}
.zoom:hover {
    transform: scale(1.02);
}
.btn-wall {
    background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
}
.btn-x.btn-success {
    background-image: linear-gradient(to right, #007991 0%, #78ffd6  51%, #007991  100%)
}
.btn-x.btn-secondary {
    background-image: linear-gradient(to right, #606c88 0%, #3f4c6b  51%, #606c88  100%)
}

.btn-x.btn-danger {
    background-image: linear-gradient(to right, #FF512F 0%, #DD2476  51%, #FF512F  100%)
}
.btn-x.btn-primary {
    background-image: linear-gradient(to right, #4776E6 0%, #8E54E9  51%, #4776E6  100%)
}
.btn-x.btn-warning {
    background-image: linear-gradient(to right, #FF512F 0%, #F09819  51%, #FF512F  100%)
}

.btn-x.btn-info {
    background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%)
}
.btn-x.btn-brand {
    background-image: linear-gradient(to right, #444B85 0%, #36BFC9  50%, #3D5E8B  100%)
}
.btn-x {
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
}

.btn-x:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
a.nav-link{
    color:black;
}
a.nav-link:hover{
    color:#1F8494;
}
a.nws-link{
    color:#1F8494;
}
a.nws-link:hover{
    color:#ffbc34;
}
.font-brand{
    color:#1F8494 !important;
}
.btn-circle-sm{
    border-radius: 100%;
    line-height: 2.3;
    cursor:pointer;
    width:25px;
    height:25px;
    padding:1px;
    font-size:10px;
    border:none;
    margin-right:1px;
    margin-left:1px;
}
.btn-x.btn-brand-primary{
    transition: 0.5s;
    background-color: #08698B;
    color:white;
}
.btn-x.btn-brand-primary:hover{
    transition: 0.7s;
    background-color: white;
    border : 1px solid #08698B !important;
    color : #08698B !important;
}

.btn-x.btn-info {
    background-image: linear-gradient(to right, #36D1DC 0%, #5B86E5  51%, #36D1DC  100%)
}
.btn-x {
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
}

.btn-x:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
.zoom {
    transition: transform .2s;
}
.zoom:hover {
    transform: scale(1.02);
    z-index: 8;
}
.btn-x.btn-brand-outline{
    transition: 0.5s;
    background-color: white;
    border : 1px solid #08698B !important;
    color : #08698B !important;
}
.btn-x.btn-brand-outline:hover{
    transition: 0.7s;
    background-color: #08698B;
    color:white !important;
    border:0px;
}
.btn-circle-sm{
    border-radius: 100% !important;
    line-height: 2.3 !important;
    cursor:pointer !important;
    width:25px !important;
    height:25px !important;
    padding:1px !important;
    font-size:10px !important;
    border:none !important;
    margin-right:1px !important;
    margin-left:1px !important;
}
.btn-play{
    background:#FF0000;
    color:white !important;
    padding: 14px 19px !important;
    transition: transform .2s;
    box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);
}
.btn-play:hover{
    background:white;
    color:#FF0000 !important;
    transform: scale(1.3);
}
.label-brand-light{
    background:#08698B;
    color:white !important;
    transition: transform .2s;
    padding:9px 25px !important;
    font-size: 13px !important;
    font-weight:500 !important  ;
    border:none;
}
.label-brand-light:hover{
    background:none;
    color:#08698B !important;
    border:none;
    box-shadow: 0px 0px 4px #08698B;
    transform: scale(1.03);
}
a.text-brand{
    color:#08698B !important;
    cursor:pointer;
}
a.text-brand:hover{
    color:#e68c00 !important;
}
.p-brand{
    padding:5px 20px;
}
.bg-brand{
    background: #08698B !important;
    color:white;
}
.bg-brand-light{
    background: #6aa5b9;
    color:white;
}
input.form-control {
    border-radius:20px !important;
    padding-left:20px;
    padding-right:20px;
}
textarea.form-control {
    border-radius:15px;
}
.input-group.on-right input.form-control {
    border-radius:20px !important;
    padding-left:20px;
    padding-right:60px;
}
.input-group.on-right span{
    background:none;
    border:none;
    position:absolute;
    top:8px;
    left:auto;
    right:20px;
    z-index: 6;
    color:grey;
}
.input-group input.form-control {
    border-radius:20px !important;
    padding-left:45px;
}
.input-group i{
    background:none;
    border:none;
    position:absolute;
    top:11px;
    left:18px;
    z-index: 6;
    color:grey;
}
p.text-notify{
    font-weight: 500;
}
p.text-notify b{
    font-weight: bold;
}
.avatar-text {

    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    line-height: 1;
    color: #fff;
    object-fit: cover;

}
.tbs-cs-wrapper {
    display: flex;
    max-width: 900px;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
    border:1px solid rgba(0, 0, 0, .1);
}

/* NAV */
.tbs-cs-nav {
    background: #f4f6f8;
    display: flex;
    flex-direction: column;
}

.tbs-cs-btn {
    padding: 14px 18px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    border-right: 4px solid transparent;
    transition: all .2s ease;
}

.tbs-cs-btn:hover {
    background: #e9edf1;
}

.tbs-cs-btn.is-active {
    background: #ffffff;
    border-right-color: #08698B;
    font-weight: 600;
}

/* CONTENT */
.tbs-cs-content {
    flex: 1;
    padding: 24px;
}

.tbs-cs-panel {
    display: none;
}

.tbs-cs-panel.is-active {
    display: block;
}