html, body {
    height: 100%; /* Ensure the body takes up full screen height */
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
 

/*
    WORKS - also add something in html and "include" the file back into the project 
    @font-face {
    font-family: 'googlesans-regular';
    src: url('/Content/fonts/googlesans-regular.ttf') format('truetype');
}
    
html {

font-family:googlesans-regular, sans-serif;
}

    */

header {
    background-color: #1a73e8;
    color: #fff;
    padding: 20px;
    text-align: center;
}

h1 {
    font-size: 36px;
    margin-bottom: 10px;
}

p {
    /* Value before converting to em on 03/24/25 font-size: 18px; margin-bottom: 20px; */
    font-size: 1.125rem;
    margin-bottom:1.25rem;
}

.button {
    background-color: #1a73e8;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

    .button:hover {
        background-color: #0d47a1;
    }

.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.feature {
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 20px;
    padding: 20px;
    text-align: center;
    width: 300px;
}

    .feature h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .feature p {
        font-size: 16px;
        margin-bottom: 0;
    }


/* Main Content Styles */


/* JITSI */
#jaas-container {
    height: 100%;
}
/* / JITSI */


.mdc-list-item_FIX{
padding-left:0;
height:48px;
}

.turnblack_all_p p {
    color: #000;
}
.card {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.card__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

.card__content {
    font-size: 14px;
    color: #666;
}



.distributor_headertext_css {
    border: 0px solid red;
  
}

/* Footer Styles */
.wrapper_1000 {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}

.content {
    min-height: calc(100vh - 50px); /* Subtract the height of the footer */
    /* Adjust the 50px based on the footer height */
}

.footer_outside {
    background-color: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    min-height: 50px; /* Adjust footer height */
    margin-top: auto; /* Makes footer stick to the bottom of the content */
}
.footer_spacer {
    background-color: #ffffff;
    height: 80px;
    border:0px solid red;
    display: flex;

}

.footer_two {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0 0 0; /* was top 20px when we had content-container outside */
    border: 0px solid #ccc;
    color: #616161;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-align: left;
}

    .footer_two a {
        width: 100%;
        box-sizing: border-box;
        padding: 4px 0 0 0; /* was top 20px when we had content-container outside */
        border: 0px solid #ccc;
        color: #616161;
        text-decoration: none;
        line-height: 26px;
        text-align: left;
    }

        .footer_two a:hover {
            color: #325ad6;
        }

.span_footerwords_corp {
    /*font-size: 14px; */
}
/* / Footer Styles */


.ahref_reset_to_normal {
 cursor:pointer;
}

/* Top App Bar Styles */
.top-app-bar {
    background-color: #fff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-app-bar__title {
    font-size: 20px;
    font-weight: bold;
}

.top-bar_logo {
    width: 238px;
    min-width: 238px;
    max-width: 238px;
    border: 0px solid red;
    display: flex;
    align-items: center;
    padding-left: 59px;
}

.top-bar_navigation {
    border: 0px solid red;
    display: flex;
    align-items: center;
    padding-right: 59px;
    border: 0px solid red;
}

    .top-bar_navigation .active{
        background-color: #f8f9fa;
    }
    .top-bar_navigation .active:hover {
        background-color: #f8f9fa;
    }

.md3-text-button_topnav {
    background-color: transparent;
    border: none;
    color: #1a73e8; /* Primary color */
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    .md3-text-button_topnav:hover {
        background-color: #e8f0fe; /* 12% opacity of primary color */
    }

.btn-disabled {
    background-color: #cccccc;
    color: #999;
    cursor: not-allowed;
}

.ahref_bold_nounderline {
    text-decoration: none;
    color: #202124;
     
}

    .ahref_bold_nounderline:hover {
        text-decoration: underline;
        color: #5f6368;
    }

.ahref_nounderline {
    text-decoration: none;

}

    .ahref_nounderline:hover {
        text-decoration: underline;
   
    }


.width_100Percent {
width:100%;
}

.text_align_right
{
  
    text-align:right;
}
/* Use as a base for Open Sans (from Goog example)*/
.open-sans-rm {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}


.carousel_descript_text {
    font-family: Roboto-regular,Arial,sans-serif;
    font-size: 34px;
    line-height: 42px;
    font-weight: 500;
    letter-spacing: -.25px;
}

.carousel_descript_text_small {
    color: #5f6368;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

 

.carousel_descript_text_sidebox_1 {
    color: #5f6368;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing antialiased;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.carousel_descript_text_sidebox_1 a {
text-decoration:none;
}

.box_side_style_1 {
    background-color: white;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 9px 20px 20px 20px;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}



    .box_side_style_1:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }



.carousel_descript_text h1 {
    margin: 0;
    font-weight: 700;
}

    .carousel_descript_text h2 {
        color: #5f6368;
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
    }

.box_variation1_words, li {
    color: #5f6368;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    font-family: "Open Sans", Roboto, Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

    .box_variation1_words li {
        margin: 10px 0;
    }

    .box_variation1_words_tighter li {
        margin: 7px 0;
    }
.box_picture {
    height:auto;width:100%;object-fit: contain;
}
.box_picture_width {
    max-width: 566px;
    min-width:100px;

}
.carousel-control-next-icon {
    /* OVERRIDE OF BOOTSTRAP size of 20px */

    width: 30px;
    height: 30px;
}

.carousel-control-prev-icon {
    /* OVERRIDE OF BOOTSTRAP size of 20px */

    width: 30px;
    height: 30px;
}

 
 
.content-container {
    /* Supposedly sets any child div to be relative to this master div */
    position: relative;
}

.box_variation1_container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
 
 
}

.span_words_pages_header_top {
    display: inline-block;
    padding-bottom: 6px;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size:21px;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.span_words_pages_header_top_nopadding {
    display: inline-block;
    padding-bottom: 0px;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: 1rem;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.biotext {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5 !important;
    text-align: left;
    display: block;
    text-align: justify; /* Makes each line equally spaced. */
    padding: 0 50px 0 50px;
    border: 0px solid red;
}

.biotext_noindent {
    font-size: 16px;
    margin-top: 10px;
    line-height: 1.5 !important;
    text-align: left;
    display: block;
    text-align: justify; /* Makes each line equally spaced. */
    margin-bottom: 10px;
    border: 0px solid red;
}

.biotext_noindent_nomargin {
    font-size: 16px;
    line-height: 1.5 !important;
    text-align: left;
    display: block;
    text-align: justify; /* Makes each line equally spaced. */
    margin: 0px;
    border: 0px solid red;
}

.marginbottom_10 {
margin-bottom:10px;
}

.box_variation2 {
    height: 100%;
    box-sizing: border-box;
    padding: 0px;
    border: 0px solid #ccc;
    /* background-color: #fff; */

    align-items: center; /* Align items to the top */
}


.box_variation1 {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 0px;
    border: 0px solid #ccc;
    /* background-color: #fff; */
    text-align: center;
    align-items: flex-start; /* Align items to the top */
}



.box_variation1_abovecontainer_header {
    flex: 1;
    box-sizing: border-box;
    padding: 0 0 26px 0; 
    background-color: #fff;
    text-align: left;
    align-items: flex-start; /* Align items to the top */
}


.box_variation1_abovecontainer_header_lessbottompadding {
    flex: 1;
    box-sizing: border-box;
    padding: 0 0 8px 0;
    background-color: #fff;
    text-align: left;
    align-items: flex-start; /* Align items to the top */
}

.box_variation1_abovecontainer_header_Nobottompadding {
    flex: 1;
    box-sizing: border-box;
    padding: 0 0 0 0;
    background-color: #fff;
    text-align: left;
    align-items: flex-start; /* Align items to the top */
}

 
 


.box_variation1_padding_for_alternator_rightwords {
    text-align: left;
    padding-left: 59px;
    padding-top: 36px;
    padding-bottom: 36px;
}

.box_variation1_padding_for_alternator_leftwords {
    text-align: left;
    padding-left: 0px;
    padding-top: 36px;
    padding-bottom: 36px;
    padding-right: 61px;    
}


.clear_my_text_size {
    /* Just setting it to something not crazy in case another class is waiting to load and it's too big from above in html */
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
}

.separator_79 {

height:77px;
}

.seperator_hero_words {
    margin-top: 84px; /* This is where the scrolling section starts */ /* Note: Was 100px before we added the bottom footer which I think pushed it up */
    margin-bottom: 10px;
} 


.content_wrapper_fullwidth {
  
    display: flex;
    justify-content: center;
    align-items: center;
}


.midpage_container {
    /* Just some adjustments since a midpage container we take on to main container so we don't have to update that */
    clear: both;
    padding: 0px;
    align-content: center;
    vertical-align: middle;
 
}

.background-grey-changer {
    background-color: #f8f9fa;
}


.color_changer_anchor_header_coloronlynorollover {
    color: black;
}


.color_changer_anchor_olive {
    color: darkolivegreen;

}

    .color_changer_anchor_olive a:visited {
        color: darkolivegreen;
    }

    .color_changer_anchor_olive:hover {
        color: olive;
        cursor: pointer;
       
    }

.color_changer_anchor_olive_nounderline {
    color: darkolivegreen;
    text-decoration: none;
}

    .color_changer_anchor_olive_nounderline a:visited {
        color: darkolivegreen;
    }

    .color_changer_anchor_olive_nounderline:hover {
        color: olive;
        cursor: pointer;
    }


.color_changer_anchor_olive_underlineonhover {
    color: darkolivegreen;
    text-decoration: none;
}

    .color_changer_anchor_olive_underlineonhover a:visited {
        color: darkolivegreen;
    }

    .color_changer_anchor_olive_underlineonhover:hover {
        color: olive;
        text-decoration: underline;
        cursor: pointer;
    }

.middlesection_words {
    font-size: 18px;
    line-height: 28px;
    color: #5f6368;
}

.h2_item_words {
    font-size: 36px;
    line-height: 44px;
    font-weight: 500;
    letter-spacing: -.5px;
    margin-bottom:16px;
}

.spacer_text_blocks_1 {
    border:0px solid red;
    display:block;
    margin: 20px 0 0 0;
}

/* CAROUSEL TWEAKS */
 


.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l4 4-4 4-1.5-1.5 2.5-2.5-2.5-2.5 1.5-1.5z'/%3E%3C/svg%3E");
}
.carousel-item {
    transition: transform .3s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
    transition: opacity 0s .3s;
}


.carousel_image_sizer {

/* height makes it scew when resized and max-height doesn't seem to do anytihng */
}

.carousel_image_sizer_small {
    width: 200px;
    object-fit: cover;
}
/* / CAROUSEL TWEAKS */

.sidepadding_24 {
padding:0 0 0 24px;
}

/* BOTTOM GRAY IMAGES */
.gray_image-row {
    display: flex;
    gap: 24px;
    justify-content: flex-start; /* Align to the left */
    align-items: center;
    padding-top:10px; /* Seems to be the padding that works event h*/
    width: 100%;
}

    .gray_image-row img {
        display: block;
        border-radius: 8px; 
    }
 
/* / BOTTOM GRAY IMAGES */


/* MEDIA CSS=============================================================== */
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
    .content-container {
        padding-top: 37px;
        padding-left: 37px;
        padding-right: 0px;
        border: 0px solid purple;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        box-sizing: border-box;
    }

    .top-bar_logo {
        padding-left: 7px;
    }

    .top-bar_navigation {
        padding-right: 7px;
    }
}

@media (min-width:360px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    .content-container {
        padding-left: 0px;
        padding-right: 0px;
    }
}

        @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
            .content-container {
                margin: 0 auto;
                padding-top: 84px;
                padding-left: 37px;
                padding-right: 37px;
                /* will put it in the middle    width: 50%;*/
                border: 0px solid blue;
                display: flex;
                justify-content: center;
                align-items: left;
                margin-bottom: 1rem;
                flex-wrap: wrap;
                width: 100%;
                box-sizing: border-box;
                /* Should be 91 pixels from top of gray line down to top of text. Currently this does that 05142024*/
            }
        }

        @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
            .content-container {
                border: 0px solid green;
            }
        }

        @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
            .content-container {
                border: 0px solid red;
            }
        }

        @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
            .content-container {
                max-width: 1025px;
                margin: 0 auto;
                padding-top: 82px;
                padding-left: 10px;
                padding-right: 10px;
                border: 0px solid blue;
                display: flex;
                margin-bottom: 1rem;
                flex-wrap: wrap;
                width: 100%;
                box-sizing: border-box;
                /* Should be 91 pixels from top of gray line down to top of text. Currently this does that 05142024*/
            }
        }

        @media (min-width:1281px) { /* hi-res laptops and desktops */
            .content-container {
                max-width: 1281px;
                margin: 0 auto;
                padding-top: 82px;
                padding-left: 55px;
                padding-right: 55px;
                border: 0px solid red;
                display: flex;
                margin-bottom: 1rem;
                flex-wrap: wrap;
                width: 100%;
                box-sizing: border-box;
                /* Should be 91 pixels from top of gray line down to top of text. Currently this does that 05142024*/
            }
        }

        @media (max-width: 768px) {
            .content-container {
                border: 0px solid red;
            }

            .md3-text-button_topnav {
                font-size: 2vw;
                padding: 4px 8px;
                border-radius: 1px;
            }
        }


@media (max-width: 767px) { /* Supposedly 767 is a common breakpoint for mobile. Possibly to replace others. Found on  09/04/2024 */
    .grid_table {
        font-size: 12px;
    }

    .grid_table th, td {
        padding: 2px; /* Adjust padding for smaller screens. This is what made it literally match the 100% width on a small screen with no horizontal overflow. */
    }

        .grid_table th, td {
            
            border-bottom: 1px solid #e0e0e0 !important; 
            border-width: 0 !important;
            
        } 


    .h2_item_words {
        font-size: 24px;
    }

    .middlesection_words {
        font-size: 16px;
        line-height: 24px;
    }

    .grid_table li {
        font-size: 14px;
    }

    .footer_spacer {
        height: 24px;
    }

    .box_variation1_words, li {
        font-size: 16px;
        line-height: 24px;
    }

    .box_variation1_words, ol, ul{
        padding-left:2px;
 
    }

    /* Will make the boxes in this container stack in mobile */
    .box_variation1_container {
        flex-direction: column;
    }

    .box_variation1 {
        width: 100%;
        margin-bottom: 20px;
    }

    .content-container {
        /* These need to be unchecked but the below setting seems to fix it  justify-content: initial;
        align-items: initial; */
        flex-direction: column;
        align-content:center;   /* Now this will center even headers so you might want to remove this and do it more granularly. For instance "Contact" on the contact page becomes centered using this sweeping center */
    }
    /* / Will make the boxes in this container stack in mobile */

    .seperator_hero_words {
        margin-top: 50px;
    }

    .separator_79 {
        height: 10px;
    }

    .content-container {
        width: 90%; /* Set a width for the div */
        margin: 0 auto; /* This centers the div horizontally */
    }

    .top-app-bar {
         
        padding: 7px 0 0 0; /* Is 7px in regular screen all-around */
    }

    .top-bar_navigation {
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        box-sizing: border-box; /* Ensures padding is included in width */
        flex-wrap: wrap;
    }

    .sidepadding_24 {
        padding: 0;
    }
}


@media print {
    #div_top_nav_container {
        visibility:hidden;
    }

}