/*#tabs {margin-bottom: 50px;}*/
.btabs {list-style-type: none; position: relative;}
.btabs li {width: 200px; margin: 0 1px; cursor: pointer; transition: all ease 0.2s;}
.btabs a {
    display: block; text-align: center;
    background: var(--dgreen); padding: 10px 0;
    font: bold 1.4rem Arial; color: #fff;
}
.btabs a:hover {background: #fff; color: var(--dgreen);}
.ui-tabs-active a, .ui-state-active a {background: #fff; color: var(--dgreen);}
.boxTab {
    background: #fff; padding: 5px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
}

@media screen and (max-width: 968px) {
    .btabs li {width: 100%;}
}

@media screen and (max-width: 568px) {
    .btabs {
        position: relative;
        width: 100%; margin: 0 auto 15px;
        background: #fff; height: 46px;
    }
    .btabs:before {
        content: ''; width: 0; height: 0;
        position: absolute; z-index: 101;
        right: 10px; top: 20px;
        border-width: 8px;
        border-style: solid;
        border-color: #fff transparent transparent;
        cursor: pointer;
    }
    .btabs li {
        width: 100%; position: absolute;
        top: 0; margin: 0; z-index: 98;
    }
    .btabs li:first-child {z-index: 99;}
    .btabs li a {
        border-radius: 0;
        padding: 15px 10px; text-align: left;
    }
    li.ui-tabs-active, .ui-state-active {z-index: 100;}
    .active li {position: relative; border: 1px solid var(--dgreen); border-top: none;}
    .active li:first-child {border-top: 1px solid var(--dgreen);}
    .active li a {position: relative;}
    

    .btabs a {background: #fff; color: var(--dgreen);}
    .ui-tabs-active a, .ui-state-active a {
        background: var(--dgreen);
        color: #fff;
    }
    .btabs a:hover {background: var(--dgreen); color: #fff;}
    .boxTab {padding: 0;}
}