.em2-table{
    & table{
        & thead {
            & tr{
                background: var(--navy);
            }
            & th {
                padding: 18px 24px;
                text-align: left;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: rgba(255, 255, 255, .7);
                border: none;
            }
        }
        & tbody{
            & tr{
                border-bottom: 1px solid var(--border);
                &:last-child, &:last-child td{
                    border-bottom: none;
                }
            }
            & td{
                padding: 20px 24px;
                font-size: 14px;
                color: var(--text-mid);
                & .bold{
                    font-weight: 500;
                    color: var(--navy);
                }
                & .success, & .warning, & .error, & .grey, & .blue{
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    font-size: 11px;
                    font-weight: 600;
                    padding: 5px 12px;
                    border-radius: 20px;
                }
                & .success{
                    background: #e8f5e9;
                    color: #2e7d32;
                }
                & .warning{
                    background: #fff8e1;
                    color: #f57f17;
                }
                & .error{
                    background: #fce4e4;
                    color: #c62828;
                }
                & .grey{
                    background: #f5f5f5;
                    color: #666;
                }
                & .blue{
                    background: #e8f0fd;
                    color: #1a4aa8;
                }
            }
        }
    }
    &.default{
        & table{
            & thead th{
                &:first-child{
                    border-top-left-radius: 8px;
                }
                &:last-child{
                    border-top-right-radius: 8px;
                }
            }
            & tbody tr:hover{
                background: var(--wood-ultra);
            }
        }
    }
    &.style_1{
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        & .title{
            background: var(--smoke);
            padding: 20px 24px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--text-soft);
        }
        & table{
            margin: 0px;
            & thead th{
                text-transform: none;
                letter-spacing: 0.5px;
                &:first-child{
                    border-right: 1px solid var(--border);
                }
            }
            & tbody tr{
                & td{
                    padding: 18px 24px;
                    vertical-align: middle;
                    &:first-child{
                        border-right: 1px solid var(--border);
                    }
                }
            }
        }
    }
    &.style_2{
        & table{
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            & tr{
                border-bottom: 1px solid var(--wood-pale);
                &:hover{
                    background: #f9f8f6;
                }
            }
        }
    }
}
@media (max-width: 768px){
    .em2-table{
        & table{
            & thead{
                display: none;
            }
            & tbody td{
                display: flex;
                justify-content: space-between;
                align-items: center;
                &::before{
                    content: attr(data-title);
                    
                }
            }
        }
    }
}