/* Grid CSS Code */

/* =====================================
   UNIVERSAL RESPONSIVE GRID SYSTEM
===================================== */

[class*="grid-"]{
width:100% !important;
box-sizing:border-box;
}

.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
display:grid !important;
width:100% !important;
gap:20px;
align-items:start;
}

.grid-2 > *,
.grid-2-1 > *,
.grid-1-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-1-2-1 > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
}

/* Desktop */
.grid-2{grid-template-columns:1fr 1fr !important;}
.grid-2-1{grid-template-columns:2fr 1fr !important;}
.grid-1-2{grid-template-columns:1fr 2fr !important;}
.grid-3{grid-template-columns:1fr 1fr 1fr !important;}
.grid-4{grid-template-columns:repeat(4,1fr) !important;}
.grid-1-2-1{grid-template-columns:1fr 2fr 1fr !important;}

/* Tablet + Mobile */
@media (max-width:1024px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:18px;
}
}

@media (max-width:767px){
.grid-2,
.grid-2-1,
.grid-1-2,
.grid-3,
.grid-4,
.grid-1-2-1{
grid-template-columns:1fr !important;
gap:16px;
}
}
/* Table View CSS Code */

/* ==================================================
   FINAL RESPONSIVE TABLE CSS
   Title | Details | Action
================================================== */

.jp-table-wrap{
width:100%;
margin:15px 0;
}

.jp-table{
width:100%;
border-collapse:collapse;
table-layout:fixed;
font-size:14px;
background:#fff;
}

.jp-table th:nth-child(1),
.jp-table td:nth-child(1){
width:42%;
}

.jp-table th:nth-child(2),
.jp-table td:nth-child(2){
width:33%;
}

.jp-table th:nth-child(3),
.jp-table td:nth-child(3){
width:25%;
text-align:center;
}

/* Cells */
.jp-table th,
.jp-table td{
border:1px solid #e8e8e8;
padding:10px 8px;
vertical-align:middle;
word-break:break-word;
}

.jp-table th{
background:#f8f8f8;
font-weight:700;
}

/* Links */
.jp-table td a{
text-decoration:none;
font-weight:600;
}

/* Button */
.jp-btn{
display:inline-block;
margin-top:6px;
padding:8px 12px;
background:#0066ff;
color:#fff !important;
border-radius:6px;
text-decoration:none !important;
font-size:13px;
font-weight:700;
white-space:nowrap;
}

.jp-btn:hover{
background:#0052cc;
}

/* Expired Date */
.jp-expired{
text-decoration:line-through;
color:#d11a2a;
font-weight:700;
}

/* Tablet */
@media (max-width:1024px){

.jp-table{
font-size:13px;
}

.jp-table th,
.jp-table td{
padding:8px 6px;
}

.jp-btn{
font-size:12px;
padding:7px 10px;
}

}

/* Mobile */
@media (max-width:767px){

.jp-table{
font-size:11px;
}

.jp-table th,
.jp-table td{
padding:7px 4px;
}

.jp-btn{
font-size:10px;
padding:6px 8px;
}

}