#tb-customer th:first-child{
    width:50px;
}
#tb-supplier th:first-child{
    width:50px;
}
/*=============================================[   DZ   ]===============================================*/
.dzbox {
    float:left;
    width:100%;
    height:200px;
}
/*=============================================[   SUPPLIER ConTACT   ]===============================================*/
#tb-ct {
    padding:0;
}
#tb-ct div {
    margin:0;
}
#tb-ct th:first-child{
    width:40px;
}
.icon-page-edit {
    cursor:pointer;
    color:#2196F3;
}
.icon-page-edit:hover {
    color:#FB8C00
}
ul[id$='-res']{
    float:right;
}

/*=============================================[   DEV hold   ]===============================================*/

.a-like{
    color: #0690cf;
}
.a-like:hover {
    color: #FB8C00;
}
input.readonly{
    background-color:#ccc;
}
.red,
a.red:visited {
    color: red;
}
[class*='hold-alert-'] {
    background-image: linear-gradient(to bottom,#FF9797 0,#FF7575 100%);
    background-repeat: repeat-x;
    border-color: #b2dba1;
}

/* =============================================[   VIEW TITLE   ]=============================================== */
.view-title {
    padding: 15px 15px 0 15px;
}
.view-title h1 {
    float:left;
    font-weight: 700;
    font-size: 28px;
}
.view-title .v-link {
    float:left;
    padding-top:9px;
}
.view-title .v-link a {
    font-size: 16px;
    font-weight: 600;
    background-color: #3989c9;
    color: #fff;
    display: inline-block;
    padding: 2px 7px;
    margin-left: 15px;
    text-decoration: none;
}
.view-title .v-right {
    float:right;
    padding-top:9px;
}


/* =============================================[   FLEX BOX   ]=============================================== */
.pap-flex-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
    align-items:flex-start;
    gap: 0.1rem;
}
.pap-item-g1{
    flex-grow: 1;
}
.pap-item-g2{
    flex-grow: 2;
}
.pap-item-g3{
    flex-grow: 3;
}

/* =============================================[   CHECKBOX W INPUT   ]=============================================== */
.checkbox-input label {
    margin:0;
    font-size:13px;
    color: gray;
}

input[type='text'].input-min {
    width:100%;
    font-size:13px;
    line-height: 110%;
    padding:2px;
}

.checkbox-flex ul {
    list-style :none;
    display:flex;
    flex-wrap: wrap;
    gap: 5px;
}
.checkbox-flex ul li label{
    font-size:13px;
}
.checkbox-flex ul li input{
    width:20px !important;
}

.mb-16 {
    margin-bottom:16px;
}

/* =============================================[   LIST AUTO NO SEARCH   ]=============================================== */

[id$='-result-list'] ul li{
    list-style: none;
}


/* =============================================[   DEV MENU COLOR   ]=============================================== */
#panel.dev-test,
#top-panel.dev-test {
    background-color:#FB8C00;
    color:#fff;
}

/* tailwind */


.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.justify-center {
    justify-content: center;
}
.content-start {
    align-content: flex-start;
    align-items: flex-start;
}
.gap-1 {
    gap: 8px;
}
.grid {
    display: grid;
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.grow {
    flex-grow: 1;
}
.grow-0 {
    flex-grow: 0;
}
.pb-1 {
    padding-bottom: 8px;
}