@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: #000000;
  background: -webkit-linear-gradient(left, #b39163, #e9c9f8, #b39163);
  background: linear-gradient(to right, #b39163, #e9c9f8, #b39163);
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
}

a:link {
    color: #b39163;
}

/* visited link */
a:visited {
    color: #7c5d22;
}

/* mouse over link */
a:hover {
    color: #7c5d22;
}

/* selected link */
a:active {
    color: #7c5d22;
}

section{
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
}

h1 {
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}

/********************************************************************************************************
Old Table
*********************************************************************************************************/
table {
  width: 100%;
  table-layout: fixed;
}
.tbl-content table {
    min-width: 1000px;
    table-layout: fixed;
}

td {
  padding: 16px;
  text-align: left;
  vertical-align:middle;
  font-weight: 200;
  font-size: 13px;
  color: #000;
  border-bottom: solid 1px rgba(255,255,255,0.1);
  background-color: rgba(255,255,255,1.0);
}

th {
  padding-left: 16px;
  text-align: left !important;
  font-weight: 500;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  height: 50px;

}
td, th {
    word-wrap: break-word;
    /* or word-break: break-all; */
}
.tbl-content {
  height:auto;
  overflow-x:auto;
  background-color: white;
  /*border: 1px solid rgba(255,255,255,0.3);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23);
  /*border-radius: 2px;*/
}
.tbl-content-unisex {
  height:auto;
  overflow-x:auto;
  background-color: white;
  /*border: 1px solid rgba(255,255,255,0.3);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23);
  /*border-radius: 2px;*/
}
.tbl-header {
    padding: 0px;
    padding-left: 16px;
    background-color: #f2e4bc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border-radius: 0px;
    position: sticky;
    top: 0px;
    z-index: 3;
}

.like-img {
  filter: brightness(80%) contrast(90%);
}



#tbl-content-list tr:hover {
    color: #b39163;
    opacity: 1;
}
.clickable-row {
  color: #b39163;
}

.media-img {
    max-width: 98px;
}
@media (max-width: 1233px) {
  .tbl-content {
    overflow-x: auto; /* Ensure horizontal scroll */
  }
  .tbl-content table {
    min-width: 1233px; /* Force table to be at least 1233px wide */
  }
}

/********************************************************************************************************
Mobile
*********************************************************************************************************/

/* Hide the mobile grid on larger screens (use the table) */
.mobile-grid {
    display: none;
}

/* Show the mobile grid & hide the table on screens below 767px */
@media (max-width: 766px) {
    /* Hide the table on mobile */
    .tbl-content table {
        display: none;
    }
    section{
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 20px;
    }
    .tbl-header {
        padding-left: 0px;
    }
    td {
        padding: 8px;
    }
    th {
        padding-left: 16px;
    }
    /* Stack grid items vertically */
    .mobile-grid {
        display: flex;
        flex-direction: column;
        gap: 16px; /* space between items */
        margin: 0 auto;
        max-width: 100%;
    }
    /* Each grid item is 100% wide and fixed 130px height */
    .mobile-grid-item {
        position: relative;  /* Ensure children position relative to the grid item */
        width: 100%;
        height: 134px;
        display: flex;
        background-color: #ffffff;
        border: 1px solid #ccc;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        overflow: hidden;
        box-sizing: border-box;
    }
    /* Image container with no padding */
    .mobile-grid-media {
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }
    .mobile-grid-media img {
        height: 134px;  /* fixed image height */
        width: auto;    /* preserve aspect ratio */
        max-width: 77px;
        margin: 0;
        padding: 0;
        object-fit: cover;
        display: block;
    }
    /* Info container with 4px padding, smaller font, and wrapping text */
    .mobile-grid-info {
        flex: 1;
        padding: 4px;
        font-size: 12px;  /* adjust as needed for smaller text */
        overflow: hidden;
        word-wrap: break-word;
    }

    /* "Is Liked" image in the top right corner within each grid item */
    .mobile-grid-item .is-liked {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 10;
    }
    .mobile-grid-item .is-liked img {
        display: block;
        height: 24px; /* Set a fixed height if needed */
        width: auto;
    }
}

/********************************************************************************************************
Pagination
*********************************************************************************************************/


.tbl-paginator {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: white;
    padding: 10px 0;
    margin-top: 15px;
    font-size: 14px;
    opacity: 1.0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between elements */
}

.step-links a {
    text-decoration: none;
    padding: 5px 10px;
    background: #b39163;
    color: white;
    border-radius: 5px;
    transition: 0.3s ease;
}

.step-links a:hover {
    background: #7c5d22;
}

.current {
    font-weight: bold;
    color: #333;
}


/* for custom scrollbar for webkit browser*/

::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-preview {
    display: none;
    position: absolute;
    top: 100%; /* Show below the thumbnail */
    left: 0;
    z-index: 1000;
    max-width: 600px;
    border: 1px solid #ccc;
    background-color: white;
    padding: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.image-container:hover .image-preview {
    display: block;
}


/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}
.modal-content {
    display: block;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
}
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}