:root{
    --color-default: rgba(13, 110, 253,1);
    --color-default-hov: rgba(13, 110, 253,.5);
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-warning: #fd8827;
    --color-gray1: #394b57;
    --color-gray2: #96acaa;
    --color-gray3: #e2e5e5;
    --color-orange: #fb6e16;
    --color-blue: #2290b1;    
}

/*BUTTON*/
button{padding:3px 10px;font-size:100%;background-color:var(--color-default);border-radius:5px;color:#fff;border:1px solid var(--color-gray2);cursor: pointer;}
button:hover{background-color: var(--color-default-hov);}

.btn-s{padding:2px 6px;font-size:.7em;background-color:var(--color-default);border-radius:5px;color:#fff;border:1px solid;}
.btn-s:hover{background-color:#fff;color: var(--color-default);}

.btn-m{padding: 2px 6px;font-size:.9em;background-color:var(--color-default);border-radius:5px;color:#fff; border:1px solid;}
.btn-m:hover{background-color:#fff;color: var(--color-default);}

.btn-l{padding: 2px 6px;font-size:1.1em;background-color:var(--color-default);border-radius:5px;color:#fff; border:1px solid;}
.btn-l:hover{background-color:#fff;color: var(--color-default);}

.btn-xl{padding: 9px 16px;font-size:150%;background-color:var(--color-default);border-radius:5px;color:var(--fon-color-default);}
.btn-xl:hover{background-color:var(--color-default-hov);}

.btn-s-success{padding:2px 6px;font-size:.7em;background-color:var(--color-success);border-radius:5px;color:#fff;border:1px solid;}
.btn-s-success:hover{background-color:#fff;color:var(--color-success);}

.btn-m-success{padding:2px 6px;font-size:.9em;background-color:var(--color-success);border-radius:5px;color:#fff;border:1px solid;}
.btn-m-success:hover{background-color:#fff;color: var(--color-success);}

/* BACKGROUND*/
.bg-tran{background-color:transparent;}
.bg-bla{background-color:#000;}
.bg-whi{background-color:#fff;}
.bg-default{background-color:var(--color-default);}
.bg-success{background-color:var(--color-success);}
.bg-danger{background-color:var(--color-danger);}
.bg-warning{background-color:var(--color-warning);}
.bg-red{background-color:#ff0000;}
.bg-gre{background-color:#00ff00;}
.bg-blu{background-color:#0000ff;}
.bg-gra1{background-color:var(--color-gray1);}
.bg-gra2{background-color:var(--color-gray2);}

/*COLOR*/
.col-whi{color:#fff;}
.col-bla{color:#000;}
.col-default{color:var(--color-default);}
.col-success{color:var(--color-success);}
.col-danger{color:var(--color-danger);}
.col-warning{color:var(--color-warning);}
.col-gray1{color:var(--color-gray1);}
.col-gray2{color:var(--color-gray2);}



/* box-shadow */
.shadow-1 {
    box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.55);
}



/* TABLE-DEFAULT */
.table-default {
    width: 100%;
    border: 1px solid #ff0000;
    margin-bottom: 20px;
    border-collapse: collapse;
}
.table-default th{
    background: #b6b6b6;
}
.table-default th{
    border: 1px solid #858585;
    padding: 8px 10px;
}
.table-default td{
    border: 1px solid #858585;
    padding: 8px 10px;
}
.table-default tr:nth-child(odd){
    background: #eee;
}

/* TABLE-DEFAULT */
.table-mini {
    width: 100%;
    /* border: 1px solid #8a8a8a; */
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: 1em;
}
.table-mini th{
    background: #b6b6b6;
}
.table-mini th{
    border: 1px solid #858585;
    padding: 2px 10px;
}
.table-mini td{
    border: 0;
    border-top: 1px dotted #858585;
    padding: 2px 5px;
    font-weight: normal;
    font-size: .9em;
    vertical-align: top;
}
.table-mini td .txt-quantity {
    width: 50px;
    border: 1px solid orange;
    padding: 1px 4px 1px 2px;
    text-align: right;
}
.table-mini td .btn-edit {
    background: #009700;
    color: #fff;
    padding: 1px 4px;
    cursor: pointer;
    width: 50px;
    margin-top: 2px;
    border-radius: 4px;
}
.table-mini td .btn-edit:hover {
    background: #06cf06;
}
.table-mini tr:nth-child(odd){
    background: #eee;
}
.table-mini form .btn-del {
    background: #790000;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    padding: 2px 4px;
}
.table-mini form .btn-del:hover {
    background: #994646;
}

.table-mini form .btn-complete {
    background: #003481;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    padding: 2px 16px;
    float: right;
    font-size: 1.1em;
}
.table-mini form .btn-complete:hover {
    background: #0f65e6;
}
.table-mini tr.total {
    background: #b6b6b6;
    border-top: 1px solid #000;
}
.table-mini tr.total td {
    border: 1px solid #858585;
}

.quot-preview {
    border: 1px solid #00196d;
    width: 100%;
    padding: 14px;
    font-size: 1em;
}
.quot-preview h2 {
    color: #02029e;
    margin-bottom: .5em;
    font-size: 1.6em;
}
.quot-preview p {
    margin-bottom: .5em;
}

.quot-preview .tbl-preview {
    width: 100%;
    border: 1px solid #8a8a8a;
    margin-bottom: 20px;
    border-collapse: collapse;
    font-size: 1em;
}
.quot-preview .tbl-preview tr th {
    background: #d6d6d6;
    padding: 2px 8px;
}
.quot-preview .tbl-preview tr td {
    padding: 2px 10px 2px 4px;
}