* {
box-sizing: border-box;
}
html{
font-family:arial, verdana, sans-serif; 
line-height:1.5;
word-wrap:break-word;
font-size:100%;
width:100%;overflow-y: auto;
}

/* force block layout */
html, body {
    margin: 0;
    padding: 0;
}

/* prevent float collapse */
body::after {
    content: "";
    display: table;
    clear: both;
}
p,h1,h2,h3,h4,h5,h6{display:block;clear:both;float:left;margin-right:5px;}
#shopWrapper{display:none;width:98%;margin:5px 1%;}
#shopWrapper:after{display:table;clear:both;content:'';}
#loader{height:25px;}
.catalogueform_cont{width:100%;padding:5px}
.catalogueform_cont:after{clear:both;display:table;content:'';}
.catalogueform_cont button,.catalogueform_cont input,.catalogueform_cont select{
float:left;clear:both;margin:5px 0;
}
#shop,h2 {text-align: center;}
.container {
  width:98%;margin-left:1%;margin-bottom:5px;
  margin-top:5px;overflow-y:auto;
  background: #8fbc8f;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 8px;
height:auto;display:none;
}
#cusDateWrapper{display:none;max-width:205px;background:#696969; border-radius:5px;border:1px solid #696969;}
#cusDateWrapper input{float:left;display:block;}
#cusDateWrapper button{float:right;}
#cusD{max-width:200px;clear:both;margin-bottom:5px;}
#cusDateWrapper button:hover,#cusDateWrapper button:focus{cursor:pointer;}
#customD{display:none;}
.tbWrapper{width:100%;overflow-x: auto;background:#cd853f;
border:1px solid #cd853f;border-radius:5px;padding:5px;margin-top:5px;
margin-bottom:5px;}
.tbWrapper:after,.container :after,progress:after{display:table;clear:both;content:'';}
.tbWrapper p{margin:0;}

th,td {
border: 1px solid #000;
  padding: 8px;
  text-align: center;
    white-space: normal;        /* allow wrapping */
    overflow-wrap: anywhere;    /* best modern behavior */
    word-wrap: break-word;      /* legacy */
    min-width: 0;               /* CRITICAL inside flex layouts */
}

table:after,th:after,td:after{display:table;clear:both;content:'';}
.container button {
  border: none;
  cursor: pointer;
  max-width: 100%;
min-width: 0;
white-space: normal;        /* allow wrapping */
    overflow-wrap: anywhere;    /* wrap long text */
    word-wrap: break-word;/* legacy */
    text-align: center;
    line-height: 1.2;
    padding: 8px 10px;
    box-sizing: border-box;
}


table {float:left;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;   /* keeps table flexible */
    min-width: 0;margin-top:10px;clear:both;
}

th {
    background: #f4f4f4;
    white-space: normal !important;   /* override nowrap */
    overflow-wrap: anywhere;          /* wrap long text */
    word-break: break-word;           /* fallback */
    min-width: 0;                     /* REQUIRED in flex */
    line-height: 1.2;
}

.add { background: #28a745; color: #fff; }
.edit { background: #007bff; color: #fff; }
.remove { background: #dc3545; color: #fff; }
.save { background: #000080; color: #fff; 
float:right; margin: 0;
margin-top:5px;}
input, select {
  padding: 5px;
  border-radius: 5px;
  border: 0.5px solid #fff;
}
.status {
  text-align: center;
  font-size: 14px;
  color: #666;
width:100%;height:auto;
}
#netStatus{width:100%;height:3.5px;border-radius:5px;background:#ff0000;}
#brandSelect,.cartFooter{width:100%;}
#bselWrapper {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

#brandSelect {
  min-width: 765px; 
}
#brandSelect option:hover,#brandSelect option:focus{
background:#006400;color:white;cursor:pointer;}
#brandSelect option:checked{
background:maroon;color:white;font-weight:bold;max-width:200%;}
.inputs{
background:#c0c0c0;color:#000;display:none;
padding:5px;margin-top:5px; width:100%;border:0.5px solid #c0c0c0;
border-radius:5px;margin-bottom:5px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
max-width: 100%;    
}
#selprod{color:#000080;font-weight:bold;}
#selectedProd p{margin:0;}
.cartFooter{margin-top: 5px;padding:3px 3px 3px 0;}
.container :after,.cartFooter:after,#bselWrapper:after{display:table;clear:both;content:'';}
#countCart{text-align:center;color:#000080;}
.catalogueOptions{width:100%}
.catalogueOptions:after{content:'';display:table;clear:both;}
.catInq{width:88%;}
.closeCatalogue{width:10%; float:right;}
#clsbtn{float:right;background:#ff0000;color:#fff}
#clsbtn:focus,#clsbtn:hover{background:#006400;color:#000080;}
.catInq input[type='button']{background:#569821;border-radius:none;
    display:inline; margin-top:5px;border:none;
}

input[type='button']:hover,input[type='button']:focus{cursor:pointer;background:#0000ff;color:#fff;}
button:hover,button :focus{color:#0000ff;cursor:pointer}
.container input[type='text']{width:100%;}
.container textarea{float:left;clear:both;width:100%;}
label{margin:0;float:left;width:100%;}
.save:hover,.save:focus{background:#006400;color:#000080;}
.wrappers{width:100%}
.wrappers:after{content:'';clear:both;display:table;}
.sqWrapper{width:100%;float:left;margin-bottom:5px;}
.termsWrapper{width:50%;float:right;}
.termsWrapper:after{content:'';display;table;clear;both;}
#terms{display:inline;padding:0; }
.termsLbl{float:left;text-align:right;display:inline}
.leftWrapper{float:right;}
#cartWrapper{width:100%;margin-top:5px;padding:5px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
max-width: 100%;    
}
#theCart,.termsWrapper{display:none;}
#cartWrapper:after,#theCart:after,table:after{
clear:both;display:table;content:'';}

#pdlist{margin:0;padding:0;line-height:1;clear:both;}
#ps{float:left;}
#clrAll{float:right; margin-bottom:5px;display:none;}
#selectSearch{padding:5px;width:100%;border:none;border-radius:0;}
#promptContainer{margin-top:20px;}
#qtyInput{width:80px;}
#priceInput{max-width:100px;}
#notfound{color:#ff0000;}
.salePreview{background:#c0c0c0;border-radius:5px;padding:3px;display:none;margin-top:8px;border:1px solid #c0c0c0;}

@media only screen and (max-width:300px){
 /*For Very Minimized width: */
.container input,.container button,#qtyInput,#priceInput,#clsbtn{display:block;
float:left; width:98%;
margin:5px 0;clear:both;}
.closeCatalogue{max-width:98%;min-width:99%;width:0;float:left;}
/* then every element to float left */
body * {
    float: left;
    width: 100%;marngin:0; padding:5px;
    clear: both;
}
}