body {
    font-family: Arial, sans-serif;
    color: #4D4D4D;
    background-color: #EBEBEB;
    margin:auto;
}

.welcome {
    margin: 20 auto;
    font-size: small;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bolder;
    color: #EBEBEB;
    text-align: justify;
    width: 580px;
    overflow: auto;
}

.welcome h1 {
    text-align: center;
}


/*  link */
.welcome a:link, .welcome a:visited {
    color:#EBEBEB;
    font-weight: bold;
}

/* mouse over link, selected */
.welcome a:hover, .welcome a:active {
    color: #b4b4b4;
    font-weight: bold;
    
}

.pagecontainer {
    width: 960px;
    margin: auto;
}
.pagecontainer2 {
    width: auto;
    margin: auto;
}

.pagecontainer3 {
    width: 500px;
    margin: 20px;
}


/*  link */
a:link, a:visited {
    color:#355;
    font-weight: bold;
}

/* mouse over link, selected */
a:hover, a:active {
    color: #577;
    font-weight: bold;
    
}


a:link.fill-div, a:visited.fill-div {
    color:#fff;
    font-weight: bold;
    position:relative;
    
}

/* mouse over link, selected */
a:hover.fill-div, a:active.fill-div {
    color: crimson;
    font-weight: bold;
    position:relative;
}


a.arrows, a:link.arrows, a:visited.arrows {
    font-size: 18px;
    color: #577;
    text-decoration: none;
    cursor: pointer;
}
a:hover.arrows, a:active.arrows {
    font-size: 18px;
    color: #9bb;
    text-decoration: none;
    cursor: pointer;
}

.message {
    color: crimson;
}

.imessage {
    color: crimson;
    font-size: 12px;
    font-weight: bold;
}

img {
  border-radius: 7%;
}

.imgpos {
  position: absolute;
  bottom: 12px;

    width: 100%;
}


body.loginhead{
    background-color: #31313B
}

h1.loginhead {
    color: #FCB535;
}




login {
  margin: 20px 0;
  padding: 10px;
}

login div {
  margin: 0 auto;
  padding: 15px;
  margin: 5px auto;
}

login div:nth-child(1) {
  /*width: 700px;*/
    text-align: center;
}
login div:nth-child(2) {
  width: 400px;
    text-align: center;
    background-color: #4D4D5C;
}

login a:link, login a:visited {
    color:#7DBDFF;
    font-weight: bold;
}

login a:hover, login a:active {
    color: #2c96ff;
    font-weight: bold;
}

.footer{ 
       position: fixed;     
       bottom: 0px; 
       width: 100%;
    color: #9898AF;
    font-weight: bold;
    font-size: 18px;
    border-top: 1px solid #9898AF;
    overflow: auto;
    z-index: 300;
    background-color:#31313B;
   }  

.alignleft {
    margin: 10px;
    float: left;
}

.alignright {
    margin: 10px;
    float: right;
}

.footer a {
    color: #9898AF;
    text-decoration: underline;
  }
  
.footer a:hover {
    color: #c1c1dd;
    text-decoration: none;
}



login input[type=submit] {
    font-size: 20px;
    background-color: #4D4D5C; 
    border: 2px solid white;
    color: white;
    /*padding: 15px 32px;*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
} 



.navbar {
  position: sticky;
  top: 0;
  background-color: #31313B;
  z-index: 300;
  width: 100%;
  height: 98px;
  text-align: center;
  white-space: nowrap;
}

.mobilenavbar {
    display: none;
 }

.mainlogo {
    display: inherit;
}

.mobilemainlogo {
    display: none;
}

/* Links inside the navbar */
.navbar a {
  color: #FFB633;
  text-decoration: underline;
}

/* Change background on mouse-over */
.navbar a:hover {
    color: #ffca67;
  text-decoration: none;
}

.navbaritems {
    vertical-align: middle;
    display: inline-block;
    color: #818181;
}

.navbaritems img {
    border-radius: unset;
}

.navbarfront {
    vertical-align: middle;
    display: inline-block;
}

.navbarmiddle {
    vertical-align: middle;
    display: inline-block;
}
.navbarrear {
    vertical-align: middle;
    display: inline-block;
}
.navbarspace {
    vertical-align: middle;
    display: inline-block;
    width: 20;
}

input[type=submit]#navbargo {
    font-size: 14px;
    background-color: #FFB633; 
    border: 1px solid white;
    color: #4D4D4D;
    border-radius: 9px;
    padding: 2px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
} 



.navbar2 {
  position: sticky;
  top: 98;
  background-color: #4BA0F4;
  z-index: 300;
  width: 100%;
  padding: 5px;
  text-align: center;

}



/* Links inside the navbar */
.navbar2 a {
  color: white;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar2 a:hover {
  color: #ccffff;
  text-decoration: none;
}

.navbaritems2 {
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    color: white;
    font-weight: bold;
    margin-left: 15px;
    margin-right: 15px;
}



.bottombar {
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;    
background-color: #31313B;
font-weight: bold;    
z-index: 300;
text-align: center;
white-space: nowrap;
}




.gradient-multiline {
  position: relative;

}


.gradient-multiline span {
  
  background-color: #000;
  
  /* Needs prefixing */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@supports(mix-blend-mode: lighten) {
  
  .gradient-multiline::after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(60deg, #3629a2, #00ceff);

    mix-blend-mode: lighten;
  }
  
}


table.aligner{
margin: 0;
}


table#page {
    width: 100%;
    border: none;
    border-radius: 10px;
    margin: auto;
    
}
table#storeman{
    min-width: 70%;
margin-left: 50%;
transform: translateX(-50%);    
    border: 1px solid black;
    border-collapse:separate;
    border-radius: 5px;
}


table.cart {
    width: 80%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-collapse:separate;
    border-spacing: 10px;
    border-radius: 5px;
}
.cart th {
    vertical-align: bottom;
    background-color: #EBEBEB;
}
.cart td {
    /*background-color: white;*/
    font-size: 12px;
    padding: 6px;
}
.cart tr:nth-child(odd) td{
    background-color: white;
}
.cart tr:nth-child(even) td{
    background-color: white;
}

.cart tr#itemremoved td{
    background-color: pink;
}

.cart tr#itemadded  td{
    background-color: lightgreen;
}


table.divsdepts {
    width: 100%;
    border: 1px solid black;
    border-collapse: separate;
    border-radius: 5px;
    background-color: #ffb633;
}

.divsdepts tr:nth-child(1) td{
    background-color: #ffb633;
}



table.filters {
    min-width: 70%;

}



table.prod {
    min-width: 70%;
    border: 1px solid black;
    border-collapse:separate;
    border-radius: 5px;
}


.prod1 th {
    vertical-align: bottom;
    background-color: #9bb;
}

.prod1 td {
    font-size: 12px;
    padding: 6px;    
}

.prod1 tr:nth-child(4n+1) td, .prod1 tr:nth-child(4n+2) td {
    background-color: white;
}

.prod1 tr:nth-child(4n+3) td, .prod1 tr:nth-child(4n+4) td{
    background-color: #d8e9e9;
}

table.prod {
    min-width: 70%;
    border: 1px solid black;
    border-collapse:separate;
    border-radius: 5px;
}


.prod2 th {
    vertical-align: bottom;
    background-color: #9bb;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 300;
}

.prod2 td {
    font-size: 12px;
    padding: 6px;    
}

.prod2 tr:nth-child(4n+1) td, .prod2 tr:nth-child(4n+2) td {
    background-color: white;
}

.prod2 tr:nth-child(4n+3) td, .prod2 tr:nth-child(4n+4) td{
    background-color: #d8e9e9;
}


table.import {
    min-width: 70%;
    border: 1px solid black;
    border-collapse:separate;
    border-radius: 5px;
    text-align: left;
    position: relative;

}


.import th {
    vertical-align: bottom;
    background-color: #9bb;
    padding: 0.25rem;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 300;
}

.import td {
    font-size: 12px;
    padding: 6px;    
}

.import tr:nth-child(odd) td {
    background-color: white;
}

.import tr:nth-child(even) td {
    background-color: #d8e9e9;
}



table.orders {
    width: 80%;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    border-collapse:separate;
    border-spacing: 3px;
    border-radius: 5px;
}
.orders th {
    vertical-align: bottom;
    background-color: #EBEBEB;
}
.orders td {
    /*background-color: white;*/
    font-size: 12px;
    padding: 2px;
}
.orders tr:nth-child(odd) td{
    background-color: white;
}
.orders tr:nth-child(even) td{
    background-color: #d8e9e9;
}





table#storeman tr:nth-child(odd) td{
    background-color: white;
}

table#storeman tr:nth-child(even) td{
    background-color: #e9f0f0;
}


table#storeman th {
    vertical-align: bottom;
    background-color: #9bb;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    z-index: 300;

}

table#storeman td {
    /*background-color: white;*/
    font-size: 12px;
    padding: 6px;    
}


.breadcrumb {
    font-weight: bold;
    font-size: 24px;
}

.cartsummary {
    font-size: 13px;
    color: #CECECE;
}



.catlistcontain {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.catlistcontain>div {
    margin: 10px;
    border: 1px solid black;
    border-radius: 7%;
    width: 150px;
    height: 150px;
    background-color: #4BA0F4;
}


div.division {
    font-weight: bold;
    font-style: italic;
    font-size: 22px;
}
div.department {
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
    padding-left: 10px;
}

div.cattitle {
    font-weight: bold;
    font-size: 14px;
}
div.catprice {
    font-weight: bold;
    /*font-style: italic;*/
    font-size: 13px;
}
div.catnote {
    max-width: 400px;
    color: #799;
}

div.dpwin {
    font-size: smaller;
    color: #AAA;
    text-align: center;
}

.thumbnail {
position: relative;
}

.thumbnail:hover {
background-color: transparent;
}

.thumbnail:hover img {
z-index: 0;
}
 

.thumbnail span { /*CSS for enlarged image*/
position: absolute;
background-color: #A4A4A4;
padding: 5px;
left: -1000px;
border: 1px solid grey;
border-radius: 5%;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 301;
}

.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
border-radius: 5%;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -100;
left: 60px; /*position where enlarged image should offset horizontally */
    

}

input[type=number] {
    width: 50px;
    font-size: 12px;
    background-color: #DBDBDB;
    border: none;
} 

input[type=date] {
    font-family: Arial, sans-serif;
}

input[type=submit]#addtocart {
    font-size: 14px;
    
    background-color: #FFB633; 
    border: 2px solid white;
    color: #4D4D4D;
    border-radius: 9px;
    padding: 1px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
} 
/*
input[type=submit]#delete, input[type=submit]#addnew {
    font-size: 10px;
} */


div.ordertotal {
    font-style: italic;
    font-weight: bold;
    font-size: 28px;
}
div.vendordeptsubtotal {
    font-style: italic;
    font-weight: bold;
    font-size: 20px;
}

input.smallinputs, input.vmsmallinputs, input.pmsmallinputs, select.smallinputs, select.vmsmallinputs, select.pmsmallinputs,textarea.smallinputs {
    font-size: 10px;
}
input[type=number].smallinputs {
    width: 45px;
}
input[type=number].vmsmallinputs {
    width: 70px;
}

input[type=number].pmsmallinputs {
    width: 50px;
    font-size: 10px;
    background-color: #ffffff;
    border-style: solid;
    border-width: .25px;
    border-color: #767676;
}

input[id^='upc_'] {
    width: 90px;
}
input[id^='walmart_item_no_'] {
    width: 90px;
}
input[id^='dept_'] {
    width: 40px;
}
input[id^='vendor_id_'] {
    width: 90px;
}
input[id^='cost_'],input[id^='retail_'] {
    width: 60px;
}
input[id^='case_pack_'] {
    width: 60px;
}




input[type=radio].smallinputs, input[type=radio].pmsmallinputs {
    transform: scale(.75);
    vertical-align: text-bottom;
}


.smalllables {
    font-size: 10px;
    white-space: nowrap;
}
.smalllableshead {
    font-size: 8px;
    font-weight: bold;
    white-space: nowrap;
}






@media screen and (max-width: 800px) {

    .welcome {
        font-size: x-small;
        width: 90%;
    }

    .welcome h1 {
        font-size: small;
    }

    .navbar2 {
       display:none;
    }

    .bottombar {
    max-width: 100%;
    white-space: normal;
    font-size: 10px;
    }

    .pagecontainer {
        width: 95%;
        margin: auto;
    }
    .pagecontainer2 {
        width: auto;
        margin: auto;
    }
    
    .pagecontainer3 {
        width: 95%;
        margin: auto;
    }


      
      .navbar {
          display: none;
      }
      
 
    .cartsummary {
        font-size: 8px;
        color: #CECECE;
    }
    

    .mobilenavbar a {
        color: #FFB633;
        text-decoration: underline;
      }
      
      .mobilenavbar a:hover {
        color: #ffca67;
        text-decoration: none;
      }
      

      
      .mobilenavbar {
        display: inline-block;
        position: sticky;
        top: 0;
        background-color: #31313B;
        z-index: 300;
        width: 100%;
        height: auto;
        text-align: center;
        white-space: nowrap;
      }
      
      .navbar {
          display: none;
      }

      .mainlogo {
          display: none;
          }

      .mobilemainlogo {
          display: inherit;
      }
                 
      .mobilenavbaritems {
          vertical-align: middle;
          display: inline-block;
          color: #818181;
      }
      
      .mobilenavbarfront {
          vertical-align: middle;
          display: inline-block;
      }
      
      .mobilenavbarmiddle {
          vertical-align: middle;
          display: inline-block;
      }
      .mobilenavbarrear {
          vertical-align: middle;
          display: inline-block;
      }
      .mobilenavbarspace {
          vertical-align: middle;
          display: inline-block;
          width: 20;
      }

      .thumbnail:hover span{ /*CSS for enlarged image on hover*/
        left: -100px;
        transform: scale(.5,.5);
      }
        

        .thumbnail span { /*CSS for enlarged image*/
            left: -1000px;
            }

        input[type=date] {
            font-size: 8px;
        }

        input[type=number] {
            width: 20px;
        } 

        input[type=text] {
            font-size: 8px;
            width: 60px;
        } 

        input[type=text]#ordered_by_name, input[type=text]#ordered_by_phone, input[type=text]#ordered_by_email  {
            font-size: 8px;
            width: 160px;
        } 

        input[type=text]#username {
            font-size: 18px;
            width: 100px;
        } 

        input[type=text]#si {
            font-size: 18px;
            width: 60px;
        } 


        .nonessential {
            display: none;
        }

        input[type=submit]#addtocart {
            font-size: 12px;
            padding: 1px 10px;
        } 
        
        div.department {
            font-size:xx-small;
        }
                    

}