/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 10 1, 21, 3:18:27 PM
    Author     : Primark
*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;/*this is to ensure that the actual size of an element contains already the padding and the margin*/
}
html, body{
    height: 100%;/*needed so that page occupies 100% height*/
}
a, li, span, input[type="text"], input[type="number"], button, p{
    font-family: Arial, Helvetica, sans-serif;
}
.mainPanel{
    display: flex;
    background: whitesmoke;
    justify-content: center;
    min-width: 100%;
    max-width: 100%;
    min-height: 100%;
}
.mainPanel p{
    border-top: #cccccc solid thin;
    color: #111111;
    font-weight: bold;
    padding: 25px;
    letter-spacing: 2px;
    font-size: 24px;
}
.northPanel{
    min-height: 15%;
    max-height: 15%;
    display: grid;
    grid-template-rows: auto auto;
    background: aliceblue;
    position: fixed;
    min-width: 100%;
    max-width: 100%;
    padding-bottom: 20px;
}
.northPanel_1{
    display: flex;
    justify-content: flex-end;    
    max-height: 33px;
    min-width: 100%;
    border-bottom: darkgray solid thin;
}
.northPanel_1 nav ul{
    padding: 7px 5px;    
}
.northPanel_1 nav ul li{
    display: inline;
    min-width: 120px;
    padding: 7px 5px;
    display: inline;
    list-style: none;
}
.northPanel_1 nav ul li:hover{
    background-color: skyblue;
}

.northPanel_1 nav ul li a{
    letter-spacing: 3px;
    font-weight: bold;
    color: #111111;
    text-decoration: none;
    vertical-align: central;
}
.northPanel_2{
    display: flex;
    justify-content: space-between;    
}
.northPanel_2_left{
    display: flex;
    justify-content: flex-start;
}

.userDropDown{
    position: fixed;    
    min-width: 100%;
    margin-top: 4%;
    display: none;
    justify-content: flex-end;
}
.userDropDown li{
    list-style: none;
}
.userDropDown button{
    min-width: 150px;
    font-size: 0.8em;
    text-align: left;
    background: white;
    border: #777777 solid thin;
    padding: 2px;   
}
.userDropDown button:hover{
    background: aqua;    
}
.northPanel_2_right{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5px;
}
.northPanel_2_right:hover .userDropDown{
    display: flex; 
    z-index: 100;
}
.northPanel_2_right:hover .centerPanel_flexColumn{
    z-index: 0;
}
.northPanel_2_right span{
    display: inline-block;
    font-size: 0.95em;
    color: #777777;
    padding: 0px 5px;
}
.northPanel_2_right span img{
    vertical-align: middle;
}
.northPanel_2_search{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-width: 80%;
    padding-left: 5px;
}
.northPanel_2_search input[type="text"]{
    margin-left: 20px;
    margin-right: 5px;
    padding: 5px;
    font-size: 0.95em;
    min-width: 50%;    
}

.northPanel_2_search a{
    margin-top: 10px;
}
.searchPanel{    
    display: inline-block;
    padding: 5px 10px;
}
.searchPanel span{
    font-size: 0.95em;
    margin-right: 5px;
}
.searchPanel input[type="text"]{
    display: inline-block;
    min-width: 30%;
    font-size: 0.95em;
    padding: 3px 5px;
}
.sessionPanel{    
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sessionPanel span{
    display: inline-block;
    font-size: 0.95em;
    color: #777777;
    padding: 0px 10px;
}
.centerPanel{
    margin-top: 7%;
    background: whitesmoke;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;    
    align-items: flex-start;
    padding: 0px 10px;
}
.centerPanel_center{
    min-width: 75%; 
    max-width: 75%;
    display: flex;
    flex-direction: column;
}
.centerPanel_center_navi{
    padding-left: 20px;
    padding-right: 50px;
    padding-bottom: 20px;
    
    display: flex;
    justify-content: space-between;    
}
.centerPanel_center_navi a{
    font-size: 1.25em;
    text-decoration: none;
}
.centerPanel_flexColumn{
    margin-top: 7%;
    background: whitesmoke;
    min-width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;    
}
.centerPanel_banner{
    display: flex;
    min-width: 100%;
    min-height: 540px;
    max-height: 540px;
    margin-top: 1px;    
    background: whitesmoke;
}
.centerPanel_banner img{
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
    border: #eeeeee solid none;
    border-radius: 10px;
}
.centerPanel_banner .slider{
    animation: fadeIn ease-in 1s;
    animation-fill-mode: forwards;
}
@keyframes fadeIn{
    0%{
        opacity: 0.2;
    }
    100%{
        opacity: 1;
    }
}

.mobileCenterPanel_banner{
    display: none;
    min-width: 100%;
    min-height: 360px;
    max-height: 360px;
    margin-top: 1px;    
    background: whitesmoke;    
}
.mobileCenterPanel_banner img{
    min-width: 100%;
    max-width: 100%;
    max-height: 100%;
}
.mobileCenterPanel_banner .slider2{
    animation: fadeIn ease-in 1s;
    animation-fill-mode: forwards;
}

.centerPanel_brands{
    display: flex;
    min-width: 100%;
    min-height: 200px;
    justify-content: space-around;
    align-content: space-between;
    flex-wrap: wrap;
    margin-top: 5px;
    padding: 20px;        
    box-shadow: 5px 5px 20px #111111;   
}
.centerPanel_brands img{
    padding: 10px;
}
.centerPanel_products{
    display: flex;
    justify-content: center;
    background-color: whitesmoke;
    padding-bottom: 20px;
}
.centerPanel_products_grid{
    display: grid;
    grid-template-columns: 19% 19% 19% 19% 19%;
    grid-template-rows: auto;
    row-gap: 30px;
    column-gap: 1%;
    margin-left: auto;
    margin-right: auto;
    background: whitesmoke;
    max-width: 95%;
}
.centerPanel_east{
    position: fixed;
    margin-top: 3.5%;
    margin-left: 80%;
    min-width: 18%;;
}
.centerPanel_footer{
    display: grid;
    grid-template-columns: 38% 28% 28%;
    grid-template-rows: auto;
    column-gap: 20px;
    background: darkslategrey;    
    padding-bottom: 20px;
}
.centerPanel_footer .cp_f_header{
    font-size: 24px;
    font-weight: bold;
    color: white;  
    letter-spacing: 2px;
    padding: 20px;
}
.centerPanel_footer img{
    padding: 10px 20px;
}
.centerPanel_footer_map{
    display: inline-block;
}
.centerPanel_footer_map span{
    margin-left: 30px;
    color: white;
}
.centerPanel_footer_branches{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 5px;    
}
.centerPanel_footer_branches li{
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.centerPanel_footer_branches a{
    color: white;
    padding-left: 30px;
    text-decoration: none;
}
.centerPanel_footer_social{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 5px;    
}
.centerPanel_footer_social li{
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.centerPanel_footer_social a{
    color: white;
    padding-left: 30px;
    text-decoration: none;
}

.mobileCenterPanel_footer{
    display: none;
    grid-template-columns: auto;
    grid-template-rows: auto;
    column-gap: 20px;
    background: darkslategrey;    
    padding-bottom: 20px;
}
.mobileCenterPanel_footer .cp_f_header{
    font-size: 24px;
    font-weight: bold;
    color: white;  
    letter-spacing: 2px;
    padding: 20px;
}
.mobileCenterPanel_footer img{
    padding: 10px 20px;
}
.mobileCenterPanel_footer_map{
    display: inline-block;
}
.mobileCenterPanel_footer_map span{
    margin-left: 30px;
    color: white;
}
.mobileCenterPanel_footer_branches{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 5px;    
}
.mobileCenterPanel_footer_branches li{
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.mobileCenterPanel_footer_branches a{
    color: white;
    padding-left: 30px;
    text-decoration: none;
}
.mobileCenterPanel_footer_social{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    row-gap: 5px;    
}
.mobileCenterPanel_footer_social li{
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.mobileCenterPanel_footer_social a{
    color: white;
    padding-left: 30px;
    text-decoration: none;
}

.noItemsPanel{
    max-width: 800px;
    background-color: white;
    border: appworkspace solid thin;
    color: #111111;    
    margin-top: 20px;
}
.tabletCart_table{
    display: none;
    max-width: 100%;
}
.mobileCart_table{
    display: none;
    max-width: 100%;    
}
.mobileCart_table .th_product{
    min-width: 160px;
    max-width: 160px;
}

.mobileCart_table .td_product{
    min-width: 160px;
    max-width: 160px;
}

.mobileCart_table .td_product input[type="number"]{
    min-width: 60px;
    max-width: 60px;
}
.mobileCart_table .th_image{
    min-width: 170px;
    max-width: 170px;
}
.mobileCart_table .td_image{
    min-width: 170px;
    max-width: 170px;
    text-align: center;
}
.mobileCart_table .td_image img{
    min-width: 160px;
    max-width: 160px;    
}

.cart_table{
    max-width: 800px;    
}
.cart_table thead{
    border-bottom: appworkspace solid thin;
    color: #111111;    
}
.cart_table tbody{    
}
.cart_table tbody tr{
    display: inline-block;
    padding: 5px 5px;
    margin-bottom: 20px;
    background-color: white;
}
.cart_table th{
    padding: 7px 5px;
}
.cart_table td{
    padding: 3px 5px;
}
.th_image{
    min-width: 180px;
    max-width: 180px;
}
.td_image{
    min-width: 180px;
    max-width: 180px;
    text-align: center;
}
.td_image img{
    min-width: 170px;
    max-width: 170px;    
}
.th_barcode{
    min-width: 120px;
    max-width: 120px;
}
.td_barcode{
    min-width: 120px;
    max-width: 120px;
    text-align: center;
}
.th_price{
    min-width: 120px;
    max-width: 120px;
}
.td_price{
    min-width: 120px;
    max-width: 120px;
    text-align: right;
}
.th_amount{
    min-width: 130px;
    max-width: 130px;
}
.td_amount{
    min-width: 130px;
    max-width: 130px;
    text-align: right;
}
.th_product{
    min-width: 250px;
    max-width: 250px;
}
.td_product{
    min-width: 250px;
    max-width: 250px;
}
.th_qty{
    min-width: 70px;
    max-width: 70px;
}
.td_qty{
    min-width: 70px;
    max-width: 70px;
    text-align: center;
}
.th_input_qty{
    min-width: 90px;
    max-width: 90px;
}
.td_input_qty{
    min-width: 90px;
    max-width: 90px;
    text-align: center;
}
.td_input_qty input[type="number"]{
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
.th_no{
    min-width: 90px;
    max-width: 90px;
}
.td_no{
    min-width: 90px;
    max-width: 90px;
}
.th_date{
    min-width: 110px;
    max-width: 110px;
}
.td_date{
    min-width: 110px;
    max-width: 110px;
    text-align: center;
}
.tablePanel_300{
    max-width: 300px;
}
.tablePanel_300 th{
    background-color: seagreen;
    color: white;
}
.tablePanel_300 table thead{
    display: inline-block;
}
.tablePanel_300 table tbody{
    display: inline-block;
    overflow-y: scroll;
    max-height: 300px;
}
.tablePanel_300 table tbody tr:nth-of-type(odd){
    background-color: #FFFFFF;    
}
.tablePanel_300 table tbody tr:nth-of-type(even){
    background-color: #cccccc;    
}
th{
    padding: 5px 10px;
}
td{
    padding: 5px 10px;
}
.cartSummaryPanel{
    padding: 5px;
    background-color: white;
    border: #777777 thin solid;
}
.cartSummaryPanel_detail{
    display: grid;
    grid-template-columns: 110px 10px 100px;
    grid-template-rows: auto;
    row-gap: 20px;
    padding: 5px;
}
.cartSummaryPanel_detail button{
    font-size: 0.95em;
    padding: 3px 5px;
}
.cartSummaryPanel_button{
    display: grid;
    grid-template-columns: 105px 105px;
    grid-template-rows: auto;
    column-gap: 10px;
    padding: 5px;
}
.cartSummaryPanel_button button{
    font-size: 0.95em;
    padding: 3px 5px;
}
.productsGridPanel{
    display: grid;
    padding: 20px;
    grid-template-columns: 18% 18% 18% 18% 18%;
    grid-template-rows: auto;
    column-gap: 20px;
    row-gap: 20px;    
}

.productPanel{
    display: flex;
    flex-direction: column;    
    justify-content: center;    
    background-color: white;
    padding: 20px;
}
.productPrice{
    color: red;
    text-align: right;
    font-weight: bold;    
    padding-bottom: 5px;
    font-size: 20px;
}
.productPanel img{
    min-height: 150px;
    max-height: 150px;
}
.productPanel h3{
    min-height: 100px;
    padding: 5px 0px;
}
.productPanel button{
    background: turquoise;
    color: white;
    border: lightsteelblue solid thin;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 3px;    
    padding: 5px 0px;
    font-size: 0.95em;
}

.productPanel button:hover{
    background: aquamarine;    
    font-weight: bolder;
}
.cartQtyPanel{
    margin-left: 20px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    border: #777777 solid thin;
    padding: 10px;
}
.categoryNavPanel{
    margin-left: 20px;
    margin-top: 10px;
    background-color: white;
    border: #777777 solid thin;
    padding: 10px;
}
.categoryNavPanel li{
    list-style: none;  
    padding: 3px 0px;
}
.categoryNavPanel li a{
    letter-spacing: 2px;
    text-decoration: none;
    color: #777777;
}
.categoryNavPanel li a:hover{
    color: #111111;
}
.inputPanel{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 20px auto 30px 30px;    
    row-gap: 20px;
    min-width: 500px;
    background-color: white;
    padding: 20px;
}
.inputPanel_info{
    display: grid;
    grid-template-columns: 120px auto;
    grid-template-rows: auto;    
    row-gap: 20px;
}
.inputPanel_info span, .inputPanel_info select{
    font-size: 0.95em;
    padding: 2px 5px;
}
.inputPanel_info input[type="text"], .inputPanel_info input[type="number"], .inputPanel_info input[type="password"], 
.inputPanel_info input[type="email"]{
    font-size: 0.95em;
    padding: 2px 5px;
}

.inputPanel_info span{
    font-size: 0.95em;
}
.inputPanel_button{
    display: flex;
    justify-content: flex-end;
}
.inputPanel_button button{
    font-size: 0.95em;
    padding: 3px 5px;
    min-width: 80px;
    margin-left: 5px;
}
.errorPanel{
    
}
.errorPanel span{
    color: red;
}
.anchorAsButton{
    display: inline-block;
    font-size: 0.95em;
    text-align: center;
    text-decoration: none;
    border: #777777 solid thin;    
    border-radius: 3px;
    padding: 4px 10px;
    color: black;
    background: #eeeeee;
}
.anchorAsButton:hover{
    text-decoration: none;
    background: #dddddd;
    color: black;
    cursor: pointer;
}
.anchorAsButton_FS{
    display: inline-block;
    font-size: 0.95em;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    text-decoration: none;
    border: #777777 solid thin;    
    border-radius: 3px;
    padding: 4px 10px;
    color: black;
    background: #eeeeee;
}
.anchorAsButton_FS:hover{
    text-decoration: none;
    background: #dddddd;
    color: black;
    cursor: pointer;
}

.mobileNorthPanel{
    display: none;
    flex-direction: column;
    justify-content: space-between;
    min-width: 100%;
    position: fixed;    
    padding: 5px 10px;
    background: aliceblue;
}
.mobileNorthPanel_split{
    display: flex;
    min-width: 100%;    
    justify-content: space-between;
}
.mobileNorthPanel_split_left{
    display: flex;
    justify-content: flex-start;    
}
.mobileNorthPanel_split_right{
    display: flex;
    justify-content: flex-end;        
}
.mobileNorthPanel_split_right img{
    margin-left: 5px;    
}
.mobileNorthPanel_split_right a{
    margin-top: 5px;        
}
.mobileNorthPanel_search{
    display: grid;
    grid-template-columns: auto 50px;
    grid-template-rows: auto;
    padding: 5px 0px;
}
.mobileNorthPanel_search button{
    font-size: 14px;
}
.mobileNorthPanel_search input[type="text"]{
    font-size: 14px;
    padding: 5px;
}
.hamburgerButton{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 45px;    
    padding: 3px;
    margin-right: 10px;
}
.hamburgerButton div{
    display: inline-block;
    min-height: 5px;
    background: #FFFFFF;
    border: #777777 solid thin;
}
.mobileDropDownMenu{
    display: none;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
    background: white;
    z-index: -1;
}
.mobileDropDownMenu li{
    text-align: center;
    padding: 10px 5px;
    border-bottom: #dddddd solid thin;
}
.mobileDropDownMenu a{
    text-decoration: none;
    color: black;
    font-size: 14px;
}
.mobileConfirmPanel{
    display: none;
    justify-content: space-between;
    padding: 5px 0px;
}
.mobileConfirmPanel a{
    font-size: 0.95em;
    padding: 5px;
    min-width: 25%;
}
.mobileConfirmPanel button{
    font-size: 0.95em;
    padding: 5px;
    min-width: 25%;
}
.mobileTotalPanel_la{
    display: flex;
    justify-content: flex-start;    
}
.mobileTotalPanel_la span{
    font-size: 14px;    
    padding-top: 5px;
}
.mobileTotalPanel_la input[type="text"]{
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    margin-left: 5px;
    padding: 5px;
    background: #FFFFFF;
    max-width: 120px;
}

.mobileTotalPanel{
    display: flex;
    justify-content: flex-end;    
}
.mobileTotalPanel span{
    font-size: 14px;    
    padding-top: 5px;
}
.mobileTotalPanel input[type="text"]{
    font-size: 14px;
    font-weight: bold;
    text-align: right;
    margin-left: 5px;
    padding: 5px;
    background: #FFFFFF;
    max-width: 120px;
}
#mobileDropDownLoginMenu{
    display: none;
}
#mobileDropDownLoginMenu button{
    min-width: 100%;
    background: white;
    border: #cccccc solid thin;
    padding: 10px 5px;
}
@media screen and (max-width: 1400px){
    .productsGridPanel{
        display: grid;
        padding: 20px;
        grid-template-columns: 18% 18% 18% 18% 18%;
        grid-template-rows: auto;
        column-gap: 20px;
        row-gap: 20px;
    }
    .centerPanel_flexColumn{
        margin-top: 8%;        
    }        
}
@media screen and (max-width: 1050px){    
    .northPanel{
         min-height: 12%;
         max-height: 12%;
    }
    .northPanel_2_search{
        display: flex;
        justify-content: flex-start;
    }
    .northPanel_2_search input[type="text"]{
        padding: 0px 5px;
        font-size: 0.95em;       
    }
    
    #companyLogo{
        margin-top: 2px;
        width: 100px;
        height: 50px;        
    }
    #searchLogo{
        margin-top: 2px;
        width: 50px;
        height: 50px;
    }
    #cartLogo{
        margin-top: 2px;
        width: 50px;
        height: 50px;
    }
    #userLogo{
        margin-top: 2px;
        width: 50px;
        height: 50px;
    }
    .northPanel_2_search img{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 5px;
    }
    .northPanel_2_search a{
        margin-top: 0px;
    }
    .centerPanel{
        margin-top: 20%;
    }
    .centerPanel_flexColumn{
        margin-top: 15%;
    }
    .centerPanel_center{
        min-width: 70%; 
        max-width: 70%;
        margin-left: 5px;
    }
    .centerPanel_east{
        margin-top: 9%;
        margin-left: 72%;
        min-width: 25%;        
    }
    .centerPanel_products_grid{
        display: grid;
        grid-template-columns: 24% 24% 24% 24%;
        grid-template-rows: auto;
        row-gap: 30px;
        column-gap: 1%;
        margin-left: auto;
        margin-right: auto;
        background: whitesmoke;
        max-width: 95%;
    }
    .productsGridPanel{
        display: grid;
        padding: 20px;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: auto;
        column-gap: 1%;
        row-gap: 20px;
    }
    .th_product{
        min-width: 200px;
        max-width: 200px;
    }
    .td_product{
        min-width: 200px;
        max-width: 200px;
    }
    .th_input_qty{
        min-width: 70px;
        max-width: 70px;
    }
    .td_input_qty{
        min-width: 70px;
        max-width: 70px;
        text-align: center;
    }
    .td_input_qty input[type="number"]{
        min-width: 60px;
        max-width: 60px;
        text-align: center;
    }
}
@media screen and (max-width: 830px){
    .northPanel{
        min-width: 100%;
    }
    .northPanel_2_search{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-width: 70%;
    }
    .northPanel_2_search input[type="text"]{
        padding: 0px 5px;
        font-size: 0.95em;        
    }   
    #companyLogo{
        margin-top: 2px;
        width: 100px;
        height: 30px;           
    }
    #searchLogo{
        margin-top: 2px;
        width: 30px;
        height: 30px;
    }
    #cartLogo{
        margin-top: 2px;
        width: 30px;
        height: 30px;
    }
    #userLogo{
        margin-top: 2px;
        width: 30px;
        height: 30px;
    }
    .northPanel_2_search img{
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 5px;
    }
    .northPanel_2_search a{
        margin-top: 0px;
    }
    .centerPanel{
        margin-top: 20%;
        padding: 3px;        
    }
    .centerPanel_center{
        display: inline-block;
        min-width: 75%;              
    }
    .centerPanel_east{
        margin-top: 9%;
        min-width: 25%;
    }
    .cartSummaryPanel{
        padding: 5px;
        background-color: white;
        border: #777777 thin solid;
    }
    .cartSummaryPanel_detail{
        display: grid;
        grid-template-columns: auto 5px auto;
        grid-template-rows: auto;
        row-gap: 20px;
        padding: 5px;
    }
    .cartSummaryPanel_detail button{
        font-size: 0.95em;
        padding: 3px 5px;
    }
    .cartSummaryPanel_button{
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        column-gap: 10px;
        padding: 5px;
    }
    .cartSummaryPanel_button button{
        font-size: 0.95em;
        padding: 3px 5px;
    }
    .productsGridPanel{
        display: grid;
        padding: 20px;
        grid-template-columns: 160px 160px 160px;
        grid-template-rows: auto;
        column-gap: 20px;
        row-gap: 20px;
    }
    .cart_table{
        display: none;
    }
    .mobileCart_table{
        display: none;
    }
    .tabletCart_table{
        display: inline-block;
    }
    .th_image{
        min-width: 170px;
        max-width: 170px;
    }
    .td_image{
        min-width: 170px;
        max-width: 170px;
        text-align: center;
    }
    .td_image img{
        min-width: 160px;
        max-width: 160px;    
    }
    .th_product{
        min-width: 190px;
        max-width: 190px;
    }
    .td_product{
        min-width: 190px;
        max-width: 190px;
    }
    .th_price{
        min-width: 130px;
        max-width: 130px;
    }
    .td_price{
        min-width: 130px;
        max-width: 130px;
        text-align: right;
    }
    .td_price input[type="number"]{
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }
    .th_amount{
        min-width: 100px;
        max-width: 100px;
    }
    .td_amount{
        min-width: 100px;
        max-width: 100px;
        text-align: right;
    }
}
@media screen and (max-width: 450px){
    .productsGridPanel{
        display: grid;
        padding: 0px 20px;
        grid-template-columns: 48% 48%;
        grid-template-rows: auto;
        column-gap: 5%;
        row-gap: 20px;
    }
    
    .centerPanel_center{
        display: inline-block;
        margin-top: 5%;
        min-width: 100%;        
        margin-left: 0px;        
    }
    .centerPanel_brands{
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        flex-wrap: wrap;
    }
    .centerPanel_brands img{
        padding: 20px;
        flex-grow: 1;
    }
    .centerPanel_east{
        display: none;
    }
    .cart_table{
        display: none;
    }
    .tabletCart_table{
        display: none;
    }
    .mobileCart_table{
        display: inline-block;
    }
    .mobileConfirmPanel{
        display: flex;
    }
    .northPanel{
        display: none;
    }
    .mobileNorthPanel{
        display: flex;
    }
    .inputPanel{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 20px auto 30px 30px;    
        row-gap: 20px;
        min-width: 100%;
        max-width: 100%;
        background-color: white;
        padding: 20px;
    }
    .inputPanel_info{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        row-gap: 5px;
    }
    .centerPanel_flexColumn{
        margin-top: 22%;
    }
    .centerPanel_banner{
        display: none;
    }
    .mobileCenterPanel_banner{
        display: flex;
    }
    .centerPanel_banner img{
        width: 100%;
    }
    
    .centerPanel_products_grid{
        display: grid;
        grid-template-columns: 47% 47%;
        grid-template-rows: auto;
        row-gap: 30px;
        column-gap: 5%;
        margin-left: auto;
        margin-right: auto;
        background: whitesmoke;
        max-width: 95%;
    }
    .centerPanel_footer{
        display: none;
    }
    .mobileCenterPanel_footer{
        display: grid;
    }
    .centerPanel_center_navi{
        padding-top: 20px;
        padding-right: 20px;
    }
}