/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 01 2025 | 20:17:12 */
.main_size_chart_section h1 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 20px;
    }

    /* Tab Styles */
    .main_size_chart_section .tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .main_size_chart_section .tabs button {
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      background-color: #ddd;
      border: 1px solid #bbb;
      font-size: 16px;
    }
    .main_size_chart_section .tabs button.active {
      background-color: #333;
      color: white;
    }

    /* Unit Toggle Links */
    .main_size_chart_section .unit-toggle {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 18px;
    }
    .main_size_chart_section .unit-toggle a {
      text-decoration: none;
      margin: 0 15px;
      cursor: pointer;
      color: #333;
    }
    .main_size_chart_section .unit-toggle a.active {
      font-weight: bold;
      color: #333;
    }

    /* Chart Container */
    .main_size_chart_section .chart-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .main_size_chart_section .chart {
      margin: 10px;
      border: 1px solid #ddd;
      padding: 20px;
      background-color: white;
      border-radius: 8px;
      width: 100%;
      max-width: 800px;
      display: none;
    }
    .main_size_chart_section .chart.active {
      display: block;
    }

    /* Table Styling */
    .main_size_chart_section table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
    }
    .main_size_chart_section th, .main_size_chart_section td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
    }

    /* Hover Effect */
    .main_size_chart_section table td:hover,
   .main_size_chart_section table th:hover {
      background-color: #cfcece;
      cursor: pointer;
    }

    /* Row and Column Highlighting */
   .main_size_chart_section  table td.active,
    .main_size_chart_section table th.active {
      background-color: #cfcece !important;
    }
    .main_size_chart_section table td.highlighted {
      background-color: #cfcece !important;
    }

    .main_size_chart_section table td.highlighted:hover{
        background: #333232!important;
        color: #fff;
    }

   .main_size_chart_section table th.highlighted{
        background-color: rgb(44, 48, 44) !important;
        color:#fff ;
    }
    .main_size_chart_section table td.highlighted, 
    .main_size_chart_section table th.highlighted,
   .main_size_chart_section table tr.highlighted {
      background-color: #cfcece;
    }

    /* Highlight row and column */
   .main_size_chart_section table td.active, table th.active {
      background-color: #cfcece;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
     .main_size_chart_section table {
        font-size: 12px;
      }
      .main_size_chart_section .unit-toggle a {
        font-size: 16px;
      }
    }