style.scss

$tableWidth : 800px;
$borderWidth : 1px;
$color: (
    prim : #000
);
@mixin centre() {
    margin-right: auto;
    margin-left: auto;
}
@mixin inp(){
    border: 0px;
    padding-left: 1rem;
    flex: 1;
}
.sl-fix{
        width: $tableWidth;
        border: 5px double map-get($color,prim);
        @include centre();
}
.tr{
    float: right;
}
.ac{
    display: inline-block;
    @include centre();
}
.mb-1{
    margin-bottom: .5rem;
}
.mb-2{
    margin-bottom: 1rem;
}
.mt-1{
    margin-top: .5rem;
}
.tc{ text-align: center;}
.t1{
    border-collapse: collapse;
    margin-left: -$borderWidth; 
    margin-right: -$borderWidth;
    width: $tableWidth + 2*$borderWidth;
    td,th{
        padding: 0.5rem;
        border: 1px solid  map-get($color,prim);
    }
    th{font-weight: 700}
    td{ 
        padding: 0px;
        input.bh,select{
            width: 100%;
            box-sizing: border-box;
            @include inp();
        }
    }
}
.ha,.fa{
    display: block;
    float: left;
    box-sizing: border-box;
    .fe{
        display: flex;
        label,input{
            display: flex;
        }
        input{  
            border: 0px;
            border-bottom: 1px solid map-get($color,prim);
            padding-left: 1rem;
            flex: 1;
        }
    }
}
.ha{
    width: 50%;
}
.fa{
    width: 100%;
}
.col {
    padding: 0.5rem;
    overflow: auto;
    .ha{
        padding: .5rem;
    }
}
.fe{
    +.fe{
        padding-top: 0.5rem;
    }
    input{
        float: right;
    }
}
hr{
    border: .5px solid map-get($color,prim);
}
.fu{
    float: none;
    width: 80%;
}
.fc{
 display: flex;
}
.fi{
    @include inp();
    border-bottom: 1px solid map-get($color,prim);
}
.tp{
    td{
        padding: 0.5rem;
    }
}