@charset "utf-8";
button:hover {outline: none;}
button:focus {outline: none;}
button {outline: none;}
button {transition: 0.3s;}

.button190 {min-width: 190px;}

/*<<<<<<<<<< MENU BUTTONS >>>>>>>>>>*/
.menubutton {
  font-size: 14pt;
  padding: 15px 0px;
  line-height: 20px;
  color: #FFFFFF;
}
.menubutton:hover {
  background-color: #333333;
  color: #F59C00;
  box-shadow: 0 2px 6px rgb(58 57 68 / 20%);
}
.menubutton2 {
  font-size: 14pt;
  padding: 15px 0px;
  line-height: 20px;
  color: #000000;
}
.menubutton2:hover {
  background-color: #F59C00;
  color: #FFFFFF;
}
@media screen and (max-width: 1000px) {
  .menubutton2 {
    font-size: 12pt;
    padding: 10px 0px;
  }
}
.menubutton3 {
  font-size: 12pt;
  padding: 0px;
  color: #000000;
}
.menubutton3:hover {
  color: #F59C00;
}
@media screen and (max-width: 1000px) {
  .menubutton3 {
    font-size: 8pt;
  }
}
.menubuttoncustomers {
  font-size: 12pt;
  padding: 0px;
  color: #008CD1;
}
.menubuttoncustomers:hover {
  color: #FFFFFF;
}
@media screen and (max-width: 1000px) {
  .menubuttoncustomers {
    font-size: 8pt;
  }
}
.menubuttonsuppliers {
  font-size: 12pt;
  padding: 0px;
  color: #E1031C;
}
.menubuttonsuppliers:hover {
  color: #FFFFFF;
}
@media screen and (max-width: 1000px) {
  .menubuttonsuppliers {
    font-size: 8pt;
  }
}
.tablebutton2 {
  cursor: pointer;
  border-top: none;
  border-bottom: 2px solid transparent;
  border-left: none;
  border-right: none;
  background-color: transparent;
  color: #1B5C95;
  font-weight: bold;
  padding-left: 0px;
  padding-right: 0px;
}
.tablebutton2:hover {
  color: #1B5C95;
  border-bottom: 2px solid #1B5C95;
}
.tablebutton3 {
  cursor: pointer;
  border-top: none;
  border-bottom: 1px solid transparent;
  border-left: none;
  border-right: none;
  background-color: transparent;
  color: #000000;
  font-weight: bold;
  padding-left: 0px;
  padding-right: 0px;
}
.tablebutton3:hover {
  color: #000000;
  border-bottom: 1px solid #000000;
}
.tablebutton4 {
  cursor: pointer;
  background-color: transparent;
  color: #AF2C2A;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #AF2C2A;
  text-underline-offset: 5px;
}
.tablebutton4:hover {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #AF2C2A;
  text-underline-offset: 5px;
}
.tablebutton5 {
  cursor: pointer;
  background-color: transparent;
  color: #4a148c;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #FF0000;
  text-underline-offset: 5px;
}
.tablebutton5:hover {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: #000000;
  text-underline-offset: 5px;
}
/*<<<<<<<<<< BACK TO TOP >>>>>>>>>>*/
#backtotop {
  width:100%; 
  height: 40px; 
  font-family: 'Montserrat', sans-serif; 
  font-size: 12pt;
  color: #FFFFFF;
  background-color: rgb(0, 17, 34);
  border: none;
  border-bottom: solid 1px #1E90FF;
  transition: 0.3s;
}

#backtotop:hover {
  color: #001122;
  background-color: #1E90FF;
}
#bttBtn4 {
  color: #F59C00;
  background-color: #000000;
  position: fixed;
  right: 0px;
  bottom: 0px;
  display: none;
  z-index: 100;
  transition: 0.3s;
}
#bttBtn4:hover {
  color: #000000;
  background-color: #F59C00;
}
#bttBtn5 {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 0;
  padding: 0.7em;
  line-height: 125%;
  color: #D3D3D3;
  background-color: #1B5C95;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 100;
  transition: 0.3s;
}
#bttBtn5:hover {
  color: #1B5C95;
  background-color: #D3D3D3;
}
#bttBtn6 {
  display: none;
  position: fixed;
  bottom: 70px;
  right: 0;
  padding: 0.7em;
  line-height: 125%;
  color: #000000;
  background-color: rgba(255,255,255,0.5);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 100;
  transition: 0.3s;
}
#bttBtn6:hover {
  color: #000000;
  background-color: #FFFFFF;
}
/*<<<<<<<<<<  HAMBURGER  >>>>>>>>>>*/
.mobilenavbtn {
  font-size: 20pt;
  /*font-weight: bold;*/
}
.mobilenavbtn2 {
  font-size: 10pt;
}
#mobilenavbtn {
  margin-right: 20px;
  position: absolute;
  right: 0px;
  color: #FFFFFF;
  font-size: 30pt;
  /*font-weight: bold;*/
  padding: 0px;
  margin-top: 0px;
}
@media screen and (max-width: 350px) {
  .mobilenavbutton {
    margin-top: -100px;
  }
}

/*<<<<<<<<<< HOME BUTTON STYLING >>>>>>>>>>*/
.homebutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
  font-family: 'Montserrat', sans-serif; 
  text-align: center;
  color: #000000;
  background-color: #F59C00;
  border: 1px solid #F59C00;
  border-radius: 0px;
  transition: 0.3s;
}
.homebutt:hover {
  color: #FFFFFF; 
  background-color: #000000;
  border: 1px solid #000000;
}
.homebutt.active {
  color: #000000; 
  background-color: #F59C00;
  border: 1px solid #F59C00;
}
.homebutt a {
  color: #000000;
}
.homebutt:hover a {
  color: #FFFFFF;
}
.homebutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
  font-family: 'Montserrat', sans-serif; 
  text-align: center;
  color: #FFFFFF;
  background-color: #000000;
  border: 1px solid #000000;
  border-radius: 0px;
  transition: 0.3s;
}
.homebutt2:hover {
  color: #000000; 
  background-color: #F59C00;
  border: 1px solid #F59C00;
}
.homebutt2.active {
  color: #FFFFFF; 
  background-color: #000000;
  border: 1px solid #000000;
}
.closebutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 8px 10px 8px 10px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12pt; 
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-align: center;
  color: #000000;
  background-color: #F59C00;
  border: 2px solid #F59C00;
  border-radius: 50%;
  transition: 0.3s;
}
.closebutt:hover {
  color: #FFFFFF; 
  background-color: #000000;
  border: 2px solid #FFFFFF;
}
/*ACCORDIAN BUTTONS*/
.butt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
  width:100%; 
  min-height:40px; 
  max-width:1000px; 
  background: linear-gradient(to bottom, rgba(255, 255, 128, 0.66), rgba(255, 255, 0, 0.66));
  cursor: pointer;
  font-size:18pt; 
  font-family: 'Montserrat', sans-serif; 
  color: #3B3B3B;
  font-weight:bold; 
  text-align: left;
  border-bottom: solid 1px #7f7f7f;
  transition: 0.3s;
}
.butt:hover {
  background-color: rgba(0, 0, 0, 0.75);
  background: linear-gradient(to top, #336A4E, #006A4E);
  color: yellow; 
}
.butt.active {
  background-color: rgba(0, 0, 0, 0.75);
  background: linear-gradient(to top, #336A4E, #006A4E);
  color: yellow; 
}

/*<<<<<<<<<< GROUP BUTTONS >>>>>>>>>>*/
.groupbutt {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px;
  width:100%; 
  min-height:40px; 
  width: 150px;
  max-width:1000px; 
  background-color: #EBEBEB;
  cursor: pointer;
  font-size:18pt; 
  font-family: 'Montserrat', sans-serif; 
  font-weight:bold; 
  text-align: center;
  transition: 0.3s;
}
.groupbutt:hover {
  background: linear-gradient(to bottom, #7F7F7F, #000000);
  color: yellow; 
}
.groupbutt.active {
  background: linear-gradient(to bottom, #7F7F7F, #000000);
  color: yellow; 
}
.groupbutt1 {
  width: 150px;
}
@media screen and (max-width: 768px) {
  .groupbutt1 {
    width: 100px;
  }
}
.groupbutt2 {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin:0px 0px 0px 0px;
  padding: 20px;
  /*width:100%; */
  min-height:40px; 
  /*width: 150px;*/
  max-width:1000px;
  background-color: #EBEBEB;
  cursor: pointer;
  font-size:18pt; 
  font-family: 'Montserrat', sans-serif; 
  font-weight:bold; 
  text-align: center;
  border: initial;
  box-shadow: 1px 1px 2px #2E2E2E;
  transition: 0.3s;
}

/*HTABS BUTTONS*/
.homebuttv {
  vertical-align: top; 
  position:relative; 
  display: inline-block; 
  margin: 0px;
  padding: 10px 15px;
  margin-right: 10px;
  cursor: pointer;
  font-size:18pt; 
  font-family: 'Montserrat', sans-serif; 
  text-align: center;
  color: #FFFF00;
  background-color: #2E2E2E;
  border: none;
  transition: 0.3s;
}
.homebuttv:hover {
  color: #2E2E2E; 
  background-color: #FFFF00;
}
.homebuttv.active {
  color: #2E2E2E; 
  background-color: #FFFF00;
}

/*FORWRD/BACK BUTTONS*/
.stepbutt {
  color:#F3F3EE;
  transition: 0.3s;
}
.stepbutt:hover {
  color:yellow;
  transition: 0.3s;
  }

/*INFO/DEMO BUTTONS*/
#infoIcon {
  padding: 5px 11px;
  transition: 0.3s;
  border-radius: 50%;
}
.infoicon {
  padding: 5px 11px;
  transition: 0.3s;
  border-radius: 50%;
  color: #FFFF00;
  border: solid 1px #FFFF00;
  margin-right: 10px;
  cursor: pointer;
  font-size: 14pt;
  bottom: -1px;
}
.infoicon:hover {
  background-color: #FFFF00;
  color: #001122;
}
.demoIcon {
  position: absolute;
  padding: 5px 11px;
  margin-left: 10px;
  transition: 0.3s;
  color: #FFFF00;
  border: none;
  cursor: pointer;
  font-size: 14pt;
  bottom: -19px;
}
.demoIcon:hover {
  background-color: #FFFF00;
  color: #001122;
}

/*<<<<<<<<<<  ADD TO CART / BASKET  >>>>>>>>>>*/
.addtocartbutton {
  background-color: #223A5E;
  color:  #FFFFFF;
  border: 1px solid #223A5E;
  border-radius: 0px;
  margin-left: 10px;
}
.addtocartbutton:hover {
  color: #223A5E;
  background-color:  #FFFFFF;
}
#basketButton {
  text-align: left;
  padding-left: 40px;
  z-index: 18;
  position: sticky;
  top: 50px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px;
}
.basketbuttons {
  font-size: 12pt;
  background-color: #223A5E;
  color: #FFFFFF;
  border: 1px solid #223A5E;
  padding: 10px;
  border-radius: 0px;
}
.basketbuttons:hover {
  color: #223A5E;
  background-color: #FFFFFF;
}
.basketbuttons2 {
  float: right;
  margin-right: 40px;
}
.basketbuttons3 {
  float: left;
  margin-left: 40px;
}
.basketbuttonslg {
  width: 300px;
  height: 50px;
}
.deletebutton {
  background-color: #FF0000;
  color:  #FFFFFF;
  border: 1px solid #FF0000;
  border-radius: 0px;
}
.deletebutton:hover {
  color: #FF0000;
  background-color:  #FFFFFF;
}

/*<<<<<<<<<<  COOKIE BUTTONS  >>>>>>>>>>*/
.cookieButtonContainer {
  position: fixed;
  bottom: 10px;
  z-index: 30;
  background-color: rgba(0,0,0,0.75);
  padding: 10px;
  transition: all 0s ease 3s;
  transform: scale(0);
  transform-origin: bottom;
  width: auto;
  text-align: center;
  border-radius: 10px;
  border: solid 5px #000000;
  left: 10px;
  right: 10px;
}
.cookiebuttons {
  display: inline-block;
}

/*<<<<<<<<<<  SAMPLE BUTTONS  >>>>>>>>>>*/
.sampleButtonContainer {
  position: fixed;
  bottom: 10px;
  background-color: rgba(0,0,0,0.75);
  padding: 10px;
  transition: all 0s ease 7s;
  transform: scale(0);
  transform-origin: bottom;
  width: auto;
  text-align: center;
  border-radius: 10px;
  border: solid 5px #000000;
  right: 10px;
}
@media screen and (max-width: 768px) {
  .sampleButtonContainer {
    top: 86px;
    bottom: auto;
    left: 10px;
    right: 10px;
  }
}
.samplebuttons {
  display: inline-block;
}

/*<<<<<<<<<<  CHECK BOXES  >>>>>>>>>>*/
/* Create a custom checkbox */
.checkmark {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border: solid 1px #FFFFFF;
  margin-left: -20px;
  top: 7px;
}
/* On mouse-over, add a background color */
.cxbcontainer:hover input ~ .checkmark {
  background-color: #F59C00;
}
/* When the checkbox is checked, add a background */
.cxbcontainer input:checked ~ .checkmark {
  background-color: #F59C00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: relative;
  display: none;
}
/* Show the checkmark when checked */
.cxbcontainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.cxbcontainer .checkmark:after {
  left: 9px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Create a custom checkbox */
.checkmark2 {
  display: inline-block;
  position: relative;
  height: 25px;
  width: 25px;
  background-color: #FFFFFF;
  border: solid 1px #F59C00;
  margin-left: -20px;
  top: 7px;
}
/* On mouse-over, add a background color */
.cxbcontainer:hover input ~ .checkmark2 {
  background-color: #F59C00;
}
/* When the checkbox is checked, add a background */
.cxbcontainer input:checked ~ .checkmark2 {
  background-color: #F59C00;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
  content: "";
  position: relative;
  display: none;
}
/* Show the checkmark when checked */
.cxbcontainer input:checked ~ .checkmark2:after {
  display: block;
}
/* Style the checkmark/indicator */
.cxbcontainer .checkmark2:after {
  left: 9px;
  top: 3px;
  width: 7px;
  height: 15px;
  border: solid #000000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*<<<<<<<<<<  ADMIN BUTTONS  >>>>>>>>>>*/
.updatebox {
  border: 1px solid #88B04B;
  color: #223A5E;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 14pt;
  text-align: center;
}
.updatebox2 {
  border: 1px solid #000000;
  color: #000000;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 14px;
  text-align: left;
  width: 100%;
  max-width: 500px;
  margin-bottom: 10px;
}
.updatebox2a {
  border: 1px solid #000000;
  color: #000000;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 12pt;
  text-align: center;
  width: 100%;
  max-width: 450px;
}
.updatebox3 {
  border: 1px solid transparent;
  color: #000000;
  background-color: #F5F5F5;
  padding: 5px;
  font-size: 14px;
  text-align: right;
  width: 100%;
  font-style: italic;
  margin-bottom: 10px;
}
.updatebox4 {
  border: 1px solid #000000;
  color: #000000;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 12pt;
  text-align: center;
}
.updatebox5 {
  border: 1px solid #000000;
  color: #000000;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}
.updatebox6 {
  border: 1px solid #000000;
  color: #000000;
  background-color: #EBEBEB;
  padding: 5px;
  font-size: 12pt;
  text-align: center;
  width: 100%;
  max-width: 75px;
  margin-left: 25px;
}
.updatebutton {
  background-color: #223A5E;
  color: #FFFFFF;
  margin: 20px;
  border: 2px solid #223A5E;
  font-size: 14pt;
  padding: 3px 15px;
  width: 175px;
}
.updatebutton:hover {
  background-color: #FFFFFF;
  color: #223A5E;
  border: 2px solid #223A5E;
}
.updatebutton2 {
  background-color: #1B5C95;
  font-size: 0.9em;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  margin-top: 20px;
  padding: 10px 12px;
  border: 0;
  border-radius: 3px;
  font-weight: 700;
}
.updatebutton2:hover {
  background-color: #00A80c;
  color: #FFFFFF;
}
.updatebutton2:hover .iconstyle2 {
  color: #FFFFFF;
}
.updatebutton3 {
  background-color: #BE1621;
  font-size: 0.9em;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  margin-top: 20px;
  padding: 10px 12px;
  border: 0;
  border-radius: 3px;
  font-weight: 700;
}
.updatebutton3:hover {
  background-color: #1B5C95;
  color: #FFFFFF;
}
.updatebutton3:hover .iconstyle2 {
  color: #FFFFFF;
}
.updatebutton4 {
  background-color: #808080;
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  padding: 4px 15px 5px 15px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.updatebutton4:hover {
  background-color: #000000;
  color: #ffffff;
}
.updatebutton4:hover .iconstyle2 {
  color: #FFFFFF;
}
.editbutton {
  background-color: #1B5C95;
  font-size: 1.2em;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  padding: 0px 5px 0px 8px;
  border: 0;
  border-radius: 3px;
  font-weight: 700;
}
.editbutton:hover {
  background-color: #00A80c;
  color: #FFFFFF;
}
.editbutton2 {
  background-color: #AF2C2A;
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  padding: 5px 15px 5px 15px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.editbutton2:hover {
  background-color: #000000;
  color: #FFFFFF;
}
.editbutton3 {
  background-color: #AF2C2A;
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  color:#FFFFFF;
  cursor: pointer;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.editbutton3:hover {
  background-color: #000000;
  color: #FFFFFF;
}
.logoutbutton {
  background-color: rgba(255,255,255,0.5);
  font-size: 8pt;
  font-family: Roboto, sans-serif;
  color:#000000;
  cursor: pointer;
  padding: 7px 10px 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.logoutbutton:hover {
  background-color: #FFFFFF;
  color: #000000;
}
.logoutbutton2 {
  background-color: rgba(255,255,255,0.5);
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  padding: 7px 10px 5px 10px;
  border: 0;
  font-weight: normal;
  position: absolute;
  right: 20px;
  top: 11px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  color: #a9a9a9;
}
.logoutbutton2:hover {
  background-color: #FFFFFF;
  color: #000000;
}
.logoutbutton3 {
  background-color: rgba(255,255,255,0.5);
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  padding: 7px 10px 5px 10px;
  border: 0;
  font-weight: normal;
  position: absolute;
  right: 20px;
  top: 16px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  color: #a9a9a9;
}
.logoutbutton3:hover {
  background-color: #FFFFFF;
  color: #000000;
}
.logoutbutton4 {
  background-color: rgba(255,255,255,0.5);
  font-size: 10pt;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  padding: 7px 10px 5px 10px;
  border: 0;
  font-weight: normal;
  position: absolute;
  right: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  color: #a9a9a9;
}
.logoutbutton4:hover {
  background-color: #FFFFFF;
  color: #000000;
}
.checkoutbutton {
  background-color: #FFFFFF;
  font-size: 8pt;
  font-family: Roboto, sans-serif;
  color:#000000;
  cursor: pointer;
  padding: 7px 10px 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.checkoutbutton:hover {
  background-color: #000000;
  color: #FFFFFF;
}
.comparebutton {
  background-color: #DCEEFB;
  font-size: 8pt;
  font-family: Roboto, sans-serif;
  color:#000000;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  border: 0;
  border-radius: 5px;
  font-weight: normal;
}
.comparebutton:hover {
  background-color: #000000;
  color: #DCEEFB;
}
.grade48button:hover {
  background-color: #000000;
  color: #E5E5E5;
}
.grade88button:hover {
  background-color: #000000;
  color: #F8D448;
}
.grade109button:hover {
  background-color: #000000;
  color: #EAE6CA;
}
.gradeA2button:hover {
  background-color: #FFFFFF;
  color: #008B32;
}
.gradeA4button:hover {
  background-color: #FFFFFF;
  color: #E4003A;
}
.historybutton:hover {
  background-color: #000000;
  color: #FFFFFF;
}
.tablebutton {
  background-color: #000000;
  color: #FFFFFF;
}
.tablebutton:hover {
  background-color: #F59C00;
  color: #000000;
  border: solid 1px #F59C00;
}
.labelbutton {
  background-color: #223A5E;
  color: #FFFFFF;
  padding: 10px;
  margin: 20px;
  border: 2px solid #223A5E;
  font-size: 14pt;
  padding: 3px 15px;
  width: 175px;
}
.labelbutton:hover {
  background-color: #FFFFFF;
  color: #223A5E;
  border: 2px solid #223A5E;
}
.labelbutton2 {
  background-color: #000000;
  color: #FFFFFF;
  margin: 20px;
  border: 2px solid #000000;
  font-size: 12pt;
  padding: 10px 15px;
  width: 175px;
}
.labelbutton2:hover {
  background-color: #F59C00;
  color: #000000;
  border: 2px solid #F59C00;
}
.labelbutton2:hover .iconstyle2 {
  color: #000000;
}
.iconstyle {
  color: #FFFFFF;
}
.iconstyle2 {
  color: #FFFFFF;
}
.iconstylesales {
  color: #008CD1;
}
.iconstylepurchase {
  color: #E1031C;
}
/*<<<<<<<<<<  SUB MENU BUTTONS  >>>>>>>>>>*/
.submenu:hover {
  border-bottom: 2px solid #1B5C95;
}
.submenuwhite:hover {
  border-bottom: 2px solid #FFFFFF;
}

/*<<<<<<<<<< SELECTOR 1 >>>>>>>>>>*/
/* The container must be positioned relative: */
.custom-select1 {
  position: relative;
  font-size: 10pt;
  display: inline-block;
}
.custom-select1 select {
  display: none; /*hide original SELECT element: */
}
.select-selected1 {
  background-color: #D3D3D3;
  color: #000000;
}
/* Style the arrow inside the select element: */
.select-selected1:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000000 transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected1.select-arrow-active1:after {
  border-color: transparent transparent #000000 transparent;
  top: 4px;
}
/* style the items (options), including the selected item: */
.select-items1 div,.select-selected1 {
  color: #000000;
  background-color: #D3D3D3;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/* Style items (options): */
.select-items1 {
  position: absolute;
  background-color: #1A1C3C;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide1 {
  display: none;
}
.select-items1 div:hover, .same-as-selected1 {
  background-color: black;
  color: #EBEBEB;
}
/*<<<<<<<<<< SELECTOR 2 >>>>>>>>>>*/
/* The container must be positioned relative: */
.custom-select2 {
  position: relative;
  font-size: 10pt;
  display: inline-block;
}
.custom-select2 select {
  display: none; /*hide original SELECT element: */
}
.select-selected2 {
  background-color: #D3D3D3;
  color: #000000;
}
/* Style the arrow inside the select element: */
.select-selected2:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000000 transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected2.select-arrow-active2:after {
  border-color: transparent transparent #000000 transparent;
  top: 4px;
}
/* style the items (options), including the selected item: */
.select-items2 div,.select-selected2 {
  color: #000000;
  background-color: #D3D3D3;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/* Style items (options): */
.select-items2 {
  position: absolute;
  background-color: #1A1C3C;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide2 {
  display: none;
}
.select-items2 div:hover, .same-as-selected2 {
  background-color: black;
  color: #EBEBEB;
}
/*<<<<<<<<<< SELECTOR 3 >>>>>>>>>>*/
/* The container must be positioned relative: */
.custom-select3 {
  position: relative;
  font-size: 10pt;
  display: inline-block;
}
.custom-select3 select {
  display: none; /*hide original SELECT element: */
}
.select-selected3 {
  background-color: #D3D3D3;
  color: #000000;
}
/* Style the arrow inside the select element: */
.select-selected3:after {
  position: absolute;
  content: "";
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #000000 transparent transparent transparent;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected3.select-arrow-active3:after {
  border-color: transparent transparent #000000 transparent;
  top: 4px;
}
/* style the items (options), including the selected item: */
.select-items3 div,.select-selected3 {
  color: #000000;
  background-color: #D3D3D3;
  padding: 5px 15px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}
/* Style items (options): */
.select-items3 {
  position: absolute;
  background-color: #1A1C3C;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide3 {
  display: none;
}
.select-items3 div:hover, .same-as-selected3 {
  background-color: black;
  color: #EBEBEB;
}
.buttonshadow {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.importantbutton {
    background: #DCEEFB; 
    animation: colorChange 5s infinite; 
}
@keyframes colorChange {
    0% { background: #DCEEFB;  color: #000000;}
    50% { background: #008B32; color: #FFFFFF; transform: scale(1.025); box-shadow: 0px 0px 10px #F8D448;}
    100% { background: #DCEEFB;  color: #000000;}
}