/*---------------------tables---------------------*/
table{
    margin: auto;
    border-collapse: collapse;
}

thead{
    position: sticky;
    top:0;
    z-index: 1;
}/*to leave titles fixed*/

th{
    font-weight: lighter;
    padding: 5px 0px;
    position: relative;
}

.divTablesRow{
    display: flex;
    justify-content: center;
    column-gap: 50px;
}

.divTableRow{
    position: relative;
}

.divTable{
    overflow-y: auto;
    overflow-x: auto;
    width: fit-content;
    margin: auto;
}

.divTable-m{
    max-height: 430px;
}

.theadCss{
    font-size: 13px;
    text-align: center;
    background-color: var(--color1);
    color: var(--color2);
    font-weight: lighter;
    min-height: 30px
}

.thLeftBorder{
    border-top-left-radius: 15px;
}/*Add radius to left top border*/

.thRightBorder{
border-top-right-radius: 15px;
}/*Add radius to right top border*/

.thTall{
    height: 25px;
}

.divThWithIcon{
    display: flex;
    column-gap: 10px;
    justify-content: center;
    align-items: center;
}

/*------Tbody------*/
.tBody1{
    font-weight: lighter;
    padding: 9px 0px;
    font-size: 12px;
}

.tBody2{
    font-weight: lighter;
    padding: 2px 0px;
    font-size: 13px;
}

.tBody3{
    font-weight: lighter;
    padding: 3px 0px;
    font-size: 12px;
}

.tBody4{
    font-weight: lighter;
    padding: 4px 0px;
    font-size: 12px;
}

.tBodyEven{
    background-color: var(--color2);
}/*background when row number is even*/

.tBodyOdd{
    background-color: var(--color3);
}/*background when row number is odd*/

.tBodyComplete{
    background-color: rgb(220, 248, 220);
    border-bottom: black solid 1px;
}

.tBodyIncomplete{
    background-color: rgb(241, 194, 194);
    border-bottom: black solid 1px;
}

.tBody-2-5{ /* completo, pagado */
    background-color: rgb(211, 250, 211);
    border-bottom: black solid 1px;
}

.tBody-2-4{ /* completo, pago parcial */
    background-color:rgb(139, 227, 139);
    border-bottom: black solid 1px;
}

.tBody-1-3{ /* incompleto, sin pagar */
    background-color: rgb(209, 116, 116);
    border-bottom: black solid 1px;
}

.tBody-1-4{ /* incompleto, pago parcial */
    background-color:rgb(236, 153, 153);
    border-bottom: black solid 1px;
}

.tBody-1-5{ /* incompleto, pagado */
    background-color: rgb(241, 185, 185);
    border-bottom: black solid 1px;
}

.tBody-2-3{ /* completo, sin pagar */
    background-color: rgb(78, 159, 78);
    border-bottom: black solid 1px;
}



.tBody-3-3{ /* entregado, sin pagar */
    background-color:rgb(247, 247, 17);
    border-bottom: black solid 1px;
}

.tBody-3-4{ /* entregado, pago parcial */
    background-color: rgb(247, 228, 105);
    border-bottom: black solid 1px;
}

.tBody-1-6,.tBody-2-6,.tBody-3-6{ /* pago en verificación */
    background-color: rgb(167, 160, 160);
    border-bottom: black solid 1px;
}



.allowedIcon{
    cursor: pointer;
}

.notAllowedIcon{
    color: rgb(159, 157, 157);
}

.tableIcon{
    cursor: pointer;
}

.tableInfo{
    font-size: 12px;
    position: absolute;
    display: none;
    text-align: center;
}

/*table summary*/
.tableSummary{
    display: flex;
    font-size: 13px;
    column-gap: 15px;
    justify-content: center;
    align-items: center;
    height: 4vh;
}

/*Table title*/
.tableTitle{
    display: flex;
    column-gap: 10px;
    justify-content: center;
    align-items: center;
}

.tableTitleText{
    font-weight: bold;
    text-align: center;
}

.tableTitleIcon{
    font-size: 20px;
    position: relative;
    width: 30px;
    text-align: center;
}

.tableTitleInfo{
    display: none;
    width: 200px;
    text-align: center;
    position: absolute;
    font-size: 12px;
    top: -75%;
    right: -85px;
}

.tableTitleIcon:hover .tableTitleInfo{
    display: block;

}

.thWithIcon{
    display: flex;
    column-gap: 10px;
    justify-content: center;
    align-items: center;
}

.orderIcon{
    font-size: 14px;
    cursor: pointer;
}

.th-order{
    position: absolute;
    cursor: pointer;
}