.tab{
    margin-bottom: 20px;
}

.tab .tab-head{
    border-bottom: 4px solid #bfbfbf;
}

.tab.tab-info .tab-head{
    border-bottom: 4px solid #1976d2;
}

.tab.tab-success .tab-head{
    border-bottom: 4px solid #45bf7b;
}

.tab.tab-warning .tab-head{
    border-bottom: 4px solid #f9b358;
}

.tab.tab-danger .tab-head{
    border-bottom: 4px solid #eb6262;
}

.tab .tab-head .tab-title{
    width: auto;
    display: inline-block;
}

.tab .tab-head .tab-title.active{

}

.tab .tab-head .tab-title .tab-btn{
    padding: 7px 20px 7px 20px;
    /*background-color: #dfdfdf;*/
    margin: 6px 0px 0px 0px;
    display: inline-block;
    font-weight: normal;
    width: auto;
    color: #6f6f6f;
    cursor: pointer;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.tab .tab-head .tab-title .tab-btn.disabled{
    background-color: #dfdfdf;
    color: #afafaf;
    cursor: auto;
}

.tab .tab-head .tab-title .tab-btn:active,
.tab .tab-head .tab-title .tab-btn:focus,
.tab .tab-head .tab-title .tab-btn:hover{
    background-color: #bfbfbf;
    color: #fff;
}

.tab .tab-head .tab-title .tab-btn.disabled:active,
.tab .tab-head .tab-title .tab-btn.disabled:focus,
.tab .tab-head .tab-title .tab-btn.disabled:hover{
    background-color: #dfdfdf;
    color: #afafaf;
}

.tab .tab-head .tab-title.active .tab-btn{
    background-color: #bfbfbf;
    padding: 10px 20px 10px 20px;
    margin: 0px 0px 0px 0px;
    color: #fff;
    animation-name: tab-btn;
    animation-duration: 0.2s;
}

@keyframes tab-btn {
    0%  {padding-top: 7px; padding-bottom: 7px; margin-top: 6px;}
    100%  {padding-top: 10px; padding-bottom: 10px; margin-top: 0px;}
}

.tab.tab-info .tab-head .tab-title.active .tab-btn{
    background-color: #1976d2;
}

.tab.tab-success .tab-head .tab-title.active .tab-btn{
    background-color: #45bf7b;
}

.tab.tab-warning .tab-head .tab-title.active .tab-btn{
    background-color: #f9b358;
}

.tab.tab-danger .tab-head .tab-title.active .tab-btn{
    background-color: #eb6262;
}

.tab .tab-body{

}

.tab .tab-body .tab-content{
    width: 100%;
    padding: 20px 20px;
    display: none;
}

.tab .tab-body .tab-content.active{
    display: block;
}