/*==========================================================
 OMAI UI Kit v1.0

 Table Component

==========================================================*/


/*==================================================
 TABLE WRAP
==================================================*/

.om-table-wrap{

margin:40px 0;

overflow-x:auto;

-webkit-overflow-scrolling:touch;

}



/*==================================================
 TABLE
==================================================*/

.om-table{

width:100%;

min-width:680px;

background:#fff;

border-collapse:collapse;

border:1px solid var(--om-border);

border-radius:var(--om-radius);

overflow:hidden;

box-shadow:var(--om-shadow);

}



/*==================================================
 HEAD
==================================================*/

.om-table thead th{

background:var(--om-green);

color:#fff;

padding:18px 20px;

font-size:16px;

font-weight:700;

text-align:center;

border-right:1px solid rgba(255,255,255,.15);

white-space:nowrap;

}

.om-table thead th:last-child{

border-right:none;

}



/*==================================================
 BODY
==================================================*/

.om-table tbody td{

padding:18px 20px;

border-bottom:1px solid var(--om-border);

font-size:15px;

line-height:1.7;

vertical-align:middle;

}



/*==================================================
 FIRST COLUMN
==================================================*/

.om-table tbody td:first-child{

background:var(--om-bg);

font-weight:700;

color:var(--om-green);

width:24%;

white-space:nowrap;

}



/*==================================================
 ALIGN
==================================================*/

.om-table tbody td:not(:first-child){

text-align:center;

}



/*==================================================
 HOVER
==================================================*/

.om-table tbody tr{

transition:var(--om-transition);

}

.om-table tbody tr:hover{

background:#F8FBF6;

}



/*==================================================
 LAST ROW
==================================================*/

.om-table tbody tr:last-child td{

border-bottom:none;

}



/*==================================================
 STAR
==================================================*/

.om-star{

color:#D4A017;

font-weight:bold;

letter-spacing:2px;

}



/*==================================================
 GOOD
==================================================*/

.om-good{

background:#F2F8EE;

font-weight:700;

color:var(--om-green);

}



/*==================================================
 BAD
==================================================*/

.om-bad{

background:#FFF6F5;

color:#B94A48;

}



/*==================================================
 PRICE
==================================================*/

.om-price-high{

color:#B94A48;

font-weight:bold;

}

.om-price-middle{

color:#C48817;

font-weight:bold;

}

.om-price-low{

color:var(--om-green);

font-weight:bold;

}



/*==================================================
 RECOMMEND
==================================================*/

.om-recommend{

display:inline-block;

padding:4px 10px;

background:var(--om-green);

color:#fff;

font-size:12px;

border-radius:20px;

}



/*==================================================
 MINI TABLE
==================================================*/

.om-table-mini{

min-width:520px;

}

.om-table-mini th{

padding:14px;

font-size:15px;

}

.om-table-mini td{

padding:14px;

}



/*==================================================
 SPEC TABLE
==================================================*/

.om-spec-table{

width:100%;

border-collapse:collapse;

background:#fff;

}

.om-spec-table th{

width:32%;

background:var(--om-bg);

padding:16px;

text-align:left;

border-bottom:1px solid var(--om-border);

font-weight:700;

color:var(--om-green);

}

.om-spec-table td{

padding:16px;

border-bottom:1px solid var(--om-border);

}



/*==================================================
 STRIPE
==================================================*/

.om-table-striped tbody tr:nth-child(even){

background:#FCFCFA;

}



/*==================================================
 BORDERLESS
==================================================*/

.om-table-borderless td{

border:none;

}



/*==================================================
 COMPACT
==================================================*/

.om-table-compact td{

padding:12px 16px;

font-size:14px;

}



/*==================================================
 NOTE
==================================================*/

.om-table-note{

margin-top:12px;

font-size:13px;

color:var(--om-sub);

line-height:1.6;

}



/*==================================================
 RESPONSIVE
==================================================*/

@media (max-width:768px){

.om-table{

min-width:620px;

font-size:14px;

}

.om-table thead th{

padding:14px;

font-size:14px;

}

.om-table tbody td{

padding:14px;

font-size:14px;

}

.om-table tbody td:first-child{

min-width:120px;

}

}