﻿@font-face {
    font-family: 'NeueHaasGroteskText';
    src: url('/Content/fonts/Neue-Haas-Grotesk-Text-Pack/Linotype - NHaasGroteskTXPro-75Bd.otf') format('opentype'); /* truetype for .ttf opentype of .ot*/
}

.grid_table {
    width: 100%;
    border-collapse: collapse;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(0, 0, 0, 0); /* should remove shadow from top and left if you want that */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
    /* margin: 20px; */

}

    .grid_table th, td {
        padding: 20px;
        text-align: left;
        /* Section Border */
        /* For original regular table use this .... and erase the new one I just added below this border-bottom: 1px solid #e0e0e0 !important; */

        border-bottom: 1px solid #e0e0e0 !important;
        border-top: 1px solid #e0e0e0 !important;
        /* / Section Border */

    }

 
.grid_table th {
    background-color: #f1f1f1;
    font-weight: bold;
    color: #333;
}
    .grid_table th img {
        max-width: 100%;
        height: auto;
    }
    .grid_table tr:hover {
        background-color: #f9f9f9;
    }

.grid_feature {
    text-align: left;
    padding-left: 30px;
}

.grid_table th:first-child,
.grid_table td:first-child {
    text-align: left;
    padding-left: 20px;
    background-color: #f1f1f1;
}


.whitebg th:first-child,
.whitebg td:first-child {
    background-color: #fff;
}

 

.grid_table li {
    /* Mostly here to reset the stuff this div is setting for something else */
    /* NOTE: Still not matching so just stop using the LI for now. */
    color: initial;
    font-size: initial;
    line-height: initial;
    font-weight: initial;
 
    font-optical-sizing: initial;
    font-weight: initial;
    font-style: initial;
    font-variation-settings: initial;
   
    margin-bottom: 10px;

}
.grid_table td ul {
    margin: 0; /* remove default ul spacing */
    padding-left: 1em; /* controlled indent */
    max-width: 100%; /* never wider than cell */
    box-sizing: border-box; /* include padding in width */
}

.grid_table td li {
    word-break: break-word; /* break long words */
    overflow-wrap: break-word; /* wrap content */
    white-space: normal; /* allow wrapping */
}
.grid_table td {
    min-width: 0; /* critical! allows children to shrink */
}

.highlight {
    background-color: #e8f0fe;
}

.material-icons {
    vertical-align: middle;
    color: #4CAF50;
}

.iw_story_hero_text {
    letter-spacing: 0.1px;
    margin: 0;
    font-family: NeueHaasGroteskText, Helvetica, Arial, sans-serif;
    font-weight: 900;
    line-height: 1.1;
    font-size: 3rem;
     
}

.iw_story_hero_text_shrink {
     
    font-size: 7vw;
  
}

.iw_story_hero_text_shrink_2 {
    font-size: 4vw;
}
.iw_story_hero_text_preface {
    font-size: 20px;
    margin:0;
    padding:0;
}

.grid_table_listing_header {
    margin-bottom: 8px;
    display:block;
  
}

 


@media (max-width: 767px) { /* Supposedly 767 is a common breakpoint for mobile. Possibly to replace others. Found on  09/04/2024 */

    .iw_story_hero_text_shrink {
        font-size: 22vw;
    }
    .iw_story_hero_text_shrink_2 {
        font-size: 22vw
    }
}

@media print {
    /* Style for the table during printing */
    .grid_table {
        width: 100%;
        border-collapse: collapse;
        box-shadow: none; /* Remove shadows for printing */
        background-color: #fff;
        border: 1px solid #000; /* Add a border for clear grid lines */
        font-size: 10px; /* Adjust size if needed for printing */
    }

        .grid_table th,
        .grid_table td {
            padding: 10px; /* Adjust padding for print optimization */
            text-align: left;
            border: 1px solid #000; /* Add grid lines */
            page-break-inside: avoid; /* Prevent breaking inside a row */
        }

 
        .grid_table th {
            background-color: #f0f0f0; /* Light grey for header background */
            color: #000; /* Black text for better readability */
        }

        .grid_table tr {
            background-color: #fff !important; /* Ensure consistent background on print */
        }

    /* Page break rules for long tables */
    .grid_table {
        page-break-inside: auto;
    }

        .grid_table tr {
            page-break-inside: avoid; /* Avoid breaking rows */
            page-break-after: auto;
        }

    /* Optional: Hide unnecessary elements when printing */
    body * {
        /*  visibility: hidden;*/ /* Hide everything that is not this table... works! */
    }

    .grid_table,
    .grid_table * {
        visibility: visible; /* Make table visible */
    }

    .grid_table {
        position: absolute;
        top: 0;
        left: 0;
    }

    #th_Wagyu_link {
        color: black;
        text-decoration:none;
    }


    .grid_table th, td {
        border-width: 1px !important;
    }

    .footer_outside {
        visibility: hidden;
    }
}
