@charset "utf-8";

#tabs-container {
    display: flex;
    height: 36px;
    margin: 0;
    left: 279px;
    top: 19px;
    width: 650px
}

.tab {
    cursor: pointer;
    border-radius: 12px 12px 0 0;
    background-color: #333331;
    position: relative;
    width: 138px;
    border-right: 2px solid #d3d3d3;
    border-top: 2px solid #d3d3d3;
    color: #d3d3d3
}

.tab:hover {
    background-color: #90908a
}

.tab.active {
    background-color: #ddd;
    border-right: 2px solid #000;
    color: #000
}

#tab1.active {
    background-color: #4675a3!important;
    color: #fff
}

#tab2.active {
    background-color: #add9f1;
    background-size: 17px!important;
    background-position-x: 6.1px;
    background-position-y: 1.3px
}

.tab p {
    padding-top: 0;
    width: auto;
    margin-top: 11px;
    display: inline-block;
    margin-left: 14px
}

@media screen and (max-width:835px) {
    .tab p {
        visibility: hidden
    }

    .tab,.tab.active {
        width: 59px
    }

    #icon1.active,#icon1.inactive,#icon2.active,#icon2.inactive,#icon3.active,#icon3.inactive,#icon4.active,#icon4.inactive {
        left: 13px;
        width: 35px
    }

    #tabs-container {
        width: 184px
    }
}

@media screen and (max-width:600px) {
    .tab {
        z-index: 30;
        top: 35px;
        border-radius: 0 0 12px 12px;
        border-bottom: 1px solid #000;
        border-top: none
    }
}