.disabled {
    display: none !important;
}

.syncforms { /* comment out to see hidden forms */
    display: none !important; 
}

.developer { /* comment out to see hidden inputs */ 
    display: none !important; 
}

.no-show {
  display: none !important;
}

.fhidden {
  display: none !important;
}

.ffhidden {
  display: none;
}

.message {
  /*display: none !important;*/
}

.mobile {
  /*display: block !important; 
  position: relative !important;*/ 
  background-color: #fff;    
  color: #000; 
  /*width: 720px !important;*/
  /*height: 960px;*/  
  padding-top: 5px !important;
  margin: 0 auto 0 !important;
  /*overflow: hidden;*/
}

.readonly {
    background-color: #000 !important;
}

#calicon {
  float: right;
}

#calpopup {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  z-index: 999;
}

.ui-datepicker-calendar tr {
  background-color: #fff !important;
}

.ui-datepicker-calendar td a, .ui-datepicker-calendar th span{
  color: #000 !important;
}

.tempspacer {
  /*display: none !important;*/
  /* display when .developer is display none */
}

.greyedout {
  color: #666;
}

.fdropdown {
  /*display: none !important;*/
  display: none;
  background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.closebutton {
  width: 20px;
  height: 20px;
  background-color: red;
  cursor: pointer;
}

.static-content { 
  width: 160px;
  height: 33px;
  padding: 6px 0 0 0;
  color: #fff;
  font-size: 12px;
  overflow: hidden;
}

.skew-content { 
  width: 300px;
  height: 33px;
  padding: 6px 0 0 0;
  color: #fff;
  font-size: 16px;
  overflow: hidden;
}


* {
  -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*body, html, .container, .frugal {
  min-height: 100% !important; 
    
}*/

p {
  margin: 0;
  padding: 0;
}

.nopad {
  padding: 0 !important;
}

.atable td, .atable th {
  border-right: 1px solid #fff;
}

.atable tr {
    border: none;
  } 

.attention {
  color: #ff6 !important;
  font-weight: bold;
} 

.boldfont {
  font-weight: bold;
}

.frugal .actions {
  color: #ff0;
}

 .frugal .actions a {
  font-weight: bold;
  color: #f00;
}

.frugal .actions a:visited {
  font-weight: bold;
  color: #f00;
}

.frugal .actions a:hover {
  font-weight: bold;
  color: #ff0;
}

@font-face {
font-family: "CustomFont";
src: url("/css/fonts/CustomFont.eot");
src: url("/css/fonts/CustomFont.woff") format("woff"),
url("/css/fonts/CustomFont.otf") format("opentype"),
url("/css/fonts/CustomFont.svg#filename") format("svg");
}

@media (min-width: 1px) {
  p {
    font-size: .4em;
  }
   li {
    font-size: .4em;
   }
    h1 {
      font-size: 1em;
      letter-spacing: 6px;
    }
     h2 {
      font-size: .6em;
     }
      h3 {
        font-size: .6em;
      }
       h4 {
        font-size: .6em;
       }
        h5 {
          font-size: .4em;
        }
         h6 {
          font-size: .4em;
         }

          
  h1, h2, h3, h4, h5, h6 {
    
  }
}

@media (min-width: 360px) {
  p {
    font-size: .6em;
  }
   li {
    font-size: .6em;
   }
    h1 {
      font-size: 1.4em;
      letter-spacing: 8px;
    }
     h2 {
      font-size: 1em;
     }
      h3 {
        font-size: .8em;
      }
       h4 {
        font-size: .8em;
       }
        h5 {
          font-size: .6em;
        }
         h6 {
          font-size: .6em;
         }

          
  h1, h2, h3, h4, h5, h6 {
    
  }
}

@media (min-width: 720px) {
  p {
    font-size: .8em;
  }
   li {
    font-size: .8em;
   }
    h1 {
      font-size: 1.8em;
      letter-spacing: 10px;
    }
     h2 {
      font-size: 1.4em;
     }
      h3 {
        font-size: 1em;
      }
       h4 {
        font-size: 1em;
       }
        h5 {
          font-size: .8em;
        }
         h6 {
          font-size: .8em;
         }

          
  h1, h2, h3, h4, h5, h6 {
    
  }
  
}

@media (min-width: 1200px) {
  p {
    font-size: 1em;
  }
   li {
    font-size: 1em;
   }
    h1 {
      font-size: 2.2em;
      letter-spacing: 12px;
    }
     h2 {
      font-size: 1.8em;
     }
      h3 {
        font-size: 1.4em;
      }
       h4 {
        font-size: 1.4em;
       }
        h5 {
          font-size: 1em;
        }
         h6 {
          font-size: 1em;
         }

          
  h1, h2, h3, h4, h5, h6 {
    
  }
  
}

.frugal li {
  list-style-type: none;  
}

.frugal .menu li, .frugal .menu li ul li {
  color: #fff;
}

.menu li {
    font-size: 20px;
}

.blackbox {
  padding: 5px;
  /*background-color: #000;
  color: #fff;*/
}

.greybox {
  padding: 5px;
  background-color: #ccc;
  color: #000;
}

.greybox li a, .greybox li a:visited {
  color: #000;
}

.frugal .greybox p {
  color: #000;
}

.boxpad {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 50px;
}

.bdrbox {
  
  padding: 5px;
  margin: 5px;
  border: 2px solid #000;
}

.wht {
  background-color: #fff !important;
  
}

.textwht {
  color: #fff !important;
  
}

.text12, .text12 th, .text12 td {
  font-size: 12px !important;
}

.text14 {
  font-size: 14px !important;
}

.blk {
  background-color: #000 !important;
  
}

.help {
  clear: both !important;
  margin: 3px !important;
  font-size: 16px !important;
}


/*.menu li a:focus {
  background: yellow;
}*/

.aselected {
  background: #111;
  color: #eee !important;
}

.aselected a {
  color: #eee !important;
}



.frugal .column {    
    padding: 0;
}

.frugal p {
  padding: 0, 10px, 0, 10px;
}

.frugal .insetborder {  
  border: 2px solid #000;
  margin: 5px;
}


.frugal .input input, .frugal legend, .frugal textarea, .frugal fieldset legend  {
  background: transparent;
  color: #fff;
  border-color: 1px solid #fff;

  /*font-size: 18px;
   height: 44px;
   padding: 10px; 
   width: 100px;*/
}

.frugal textarea {
  background: #ccc;
  color: #000;
  padding: 2px;
}

#wocomplete textarea {
  width: 500px;
  /*height: 88px;*/
}

/*.frugal div {
    position: relative !important;  needed for popup error 
    overflow: hidden;
}*/

.frugal fieldset legend {
  
  color: #fff;
  border-bottom-color: #fff;
}

/*.datetime .input select {
  width: 50px;
}*/

.withgrid th, .withgrid td {
  border: 1px solid #000;
}

.noborder {
  border: none !important;
}

.bdrwhite {
  border: 1px solid #fff;
}

.bdrdouble {
  border: 4px double #000;
}

.bdrsides {
  border-top: none !important;
  border-bottom: none !important;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.bdrleft {
  border-left: 1px solid #fff;  
}

.bdrright {
  border-right: 1px solid #fff; 
}

.bdrtop {
  border-top: 1px solid #fff;  
}

.bdrbottom {
  border-bottom: 1px solid #fff;  
}

.bdrnone {
  border: none !important;
}

.borderall {
  border: 1px solid #000;
}

.flex {
  display: flex;
  flex-direction: column;
}

.flexbox {  
  align-items: stretch;
}

.posrel {
  position: relative;
}

.pr {
  position: relative;  
}

.pushdown {
  /*flex-grow: 1;*/
}

.unit {
   
}

#outeropening {
  min-height: 200px;
}

#openingholder {
  min-height: 240px;
}

.opening {
  height: 200px;
  padding: 6px !important;
}

.openheight {
  width: 80px;
  padding-left: 5px;
}

.ovalopening {
  /*height: 200px !important;*/
  border-radius: 50% / 50%;
  padding: 30px 0 0 0;
  /*position: relative;
  width: 50%;
  
  margin: 10% auto;*/
  /*height: 130px;*/
}

.selection {
  margin: 30px;
}

.fltlft {
  float: left;
}

.fltrt {
  float: right;
}

.clear {
  clear: both;
}

.inlineblock {
  display: inline-block;
}

.textleft {
  text-align: left;
}

.textright {
  text-align: right;
}

.textcenter {
  text-align: center;
}

.center input {
  margin: 0 auto 10px;
}

.center {
  text-align: center;
}

.middle { 
  /*width: 100%;*/
  margin: auto;
  /*border: 1px solid #fff;*/
  /*width: 440px;*/
}

.mid {
  display: inline-block;
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.verttop {
  vertical-align: top;
}

.vertalign {
  vertical-align: middle;
  line-height: 120px;
}

.vertbottom {
  vertical-align: bottom;
}

.pad {
  padding: 5px !important;
}

.padtop {
  padding-top: 5px;
}

.padleft {
  padding-left: 5px;
}

.long {
  width: 100px !important;
}

.short {
  width: 30px !important;
}

.med {
  width: 66px !important;
}

.inline {
  display: inline-block !important;
}


.fixedbutton {
  position: fixed;
  top: 400px;
  left: 200px;
  z-index: 9998;
}

.calculated, .costholder {
  background-color: #222 !important;
  color: #fff !important;
  font-weight: bold !important;
}

.combo {
  background-color: #ccc !important;
  color: #000 !important;
  font-weight: bold !important;
}

.developer { 
  background-color: #4C5C3D !important;
}


.quantity {
    background-color: #aaa !important;
}

/*.invalid {  
  width: 200px;
  height: 100px;
  position: fixed !important;
  float: left;
  top: 0;
  left: 0;
  background: #333;
  border: 1px solid #fff;
}*/


.override, .invalid {
    background-color: #f00 !important;
}

.framer {

}

.framer input {
  margin: 0 5px 5px 0 !important;
}



.framer input[type="button"] {
  color: #000;
}


.framer-12 {  
  width: 100%;

}

.framer-11 {  
  width: 91.666%;

}

.framer-10 {  
  width: 83.333%;

}

.framer-9 { 
  width: 75%;

  
}

.framer-8 { 
  width: 66.666%;

}

.framer-7 { 
  width: 58.333%;

}

.framer-6 { 
  width: 50%;
  /*padding: 5px 0 0 0 !important;*/
  
}

.framer-5 { 
  width: 41.666%;
  /*padding: 5px 0 0 0 !important;*/
}

.framer-4 { 
  width: 33.333%;
  /*padding: 5px 0 0 0 !important;*/
  
}

.framer-35 { 
  width: 29.167%;
  /*width: 29%;*/
  /*padding: 5px 0 0 0 !important;*/
    
}


.framer-3 { 
  width: 25%;
  /*padding: 5px 0 0 0 !important;*/
    
}
.framer-2 { 
  width: 16.666%;
  
}
.framer-1 { 
  width: 8.333%;
    
}

.framer-0 { /* for auto width */  
  width: auto;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.framer-12, .framer-11, .framer-10, .framer-9, .framer-8, .framer-7, .framer-6, .framer-5, .framer-4, .framer-3, .framer-35, .framer-2, .framer-1 {
  vertical-align: top;
  display: inline-block;  
}

.framer input[type="text"] {
  display: inline-block;
  width: 72px;
  height: 30px;
  background: #BBB;
  font-size: 18px !important;
  padding: 1px 2px 1px 2px;
  color: #000;
}

.longtext {
     width: 200px !important;
}

.xlongtext {
    width: 260px !important;
}

.smallselect {
    width: 80px !important;
}

.framer select {
  display: inline-block;
  width: 120px;
  height: 30px !important;
  background-color: #fff !important;
  /*background: url('chosen-sprite.png') no-repeat -30px -20px;*/
  font-size: 18px !important;
  color: #000 !important;
  padding: 0;
  margin: 0 5px 5px 0;
  border-radius: 5px;
}

.framer option {
    font-size: 18px !important;
}

.framer input[type="number"] {
  display: inline-block;
  width: 100px;
  height: 30px;
  background: #BBB;
  font-size: 18px !important;
  color: #000;
  padding: 0;
}

.framer input[type="button"] {
  height: 33px;
  background: #BBB;
  font-size: 16px;
  padding: 0 5px;
}

.framer select {
  background: #BBB !important;
}

.framer input[type="text"]:focus, .framer input[type="number"]:focus, .framer select:focus, .framer input[type="button"]:focus {
  background: #fff !important;
}

.inputSpacer {
  height: 35px;
  border: 1px solid #333;
}

.framer select:focus, .framer input:focus {
  box-shadow: 0 0 5px yellow !important;
}

#pickupdate select:nth-of-type(2) { 
  width: 33px !important;
}

#pickupdate select:nth-of-type(3) { 
  width: 66px !important;
}

.noalpha {
  background-color: transparent !important;
}

.checks .warning {
    margin-left: 10px;
}
.checks .warning:before {
    line-height: 0px;
    font-size: 28px;
    height: 12px;
    width: 12px;
    border-radius: 15px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    left: -11px;
}

.checks .warning:before {
    content: "!";
    color: yellow;
    margin-right: 9px;
}

div.message.warning {
    background-color: #ff0;
    color: #000;
}

div.message.warning:before {
    padding: 11px 16px 14px 7px;
    color: #C3232D;
    content: "!";
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].numinput {
    -moz-appearance: textfield;
}

input[type="number"].readonly, input[type="number"].noarrow, input[type="number"].quantity, .customers input[type="number"] {
  -moz-appearance: textfield;
  width: 75px;
}

input[type="number"].calculated {
    color: #fff !important;
}

.container {
  min-height: 50% !important;
}

#blocker {  
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 200px;
  text-align: center;
  background: rgba(44, 44, 44, 0);  
  z-index: 9998;
}

.spinner {
  display: inline-block;
  margin: auto;
  z-index: 9999;  
}

.spinner h1 {
    color: #a0d3e8 !important;
  }


#completeorder {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 44, 44, 0.9);
  font-size: 16px;
  z-index: 200;
}

#openingdesign, #wogallery {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 44, 44, 0.9);
  font-size: 16px;
  z-index: 50;
}

#totals input {
  width: 180px;
}

.opaque {  
  width: 1000px;
  height: 600px;
  margin-top: 100px;
  background: #000;
  border: 3px solid #fff;
}

.scroll {
  overflow: scroll;
}

.hover-container {
    position: relative;
}

/*.hover-content { 
  right: 150px !important;
  color: #fff;
  font-size: 16px;
}
*/
.hover-content {
    position: absolute;    
    top: 0px;
    right: 80px;
    width: 330px;
    height: 640px;
    overflow: scroll;
    color: #fff !important;
    background: #333;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 9px;    
    display: none;
    z-index: 100;
}

.hover-content h4 {
    color: #fff !important;
}

.fildropdown {
  width: 100% !important;

}

.spacer-menu {   

}

.spacer-menu li {
    font-size: 12px !important;
     margin: 2px !important;
     padding: 0 5px 0 0 !important;
     border-radius: 3px;
     font-weight: bold;
     color: #000 !important;
     background-color: #fff;
     cursor: pointer;
}

.spacer-menu li:hover {
      background-color: #306BC8;
  }

#ponum {
  text-align: right;
}

.openingtemplate {
  background-color: #000;
}

.openingtemplate input[type="number"] {
  display: inline-block;
  position: relative;
  margin: 20px 0 5px 0 !important;
  padding-left: 2px;
  width: 90px;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  z-index: 200;
}

.openingtemplate input[readonly], .openingtemplate input:focus[readonly] {
  background-color: #333 !important;
}
 
#openingdiv input[type="number"] {

  position: relative;
  z-index: 5;
}

#openingdiv {
  background: transparent;
  position: relative;
  z-index: 30;
}

.open {
  width: 200px;
}

.pr {
  position: relative;  
}

#openwidth {
  top: 10px;
}

.heightline {
  display: block;
  position: absolute;
  top: 5px;
  left: 30px;
  width: 10px;
  /*height: 120px;*/
  border-left: 1px solid #fff;
  z-index: 50;
}

.heightline2 {
  display: block;
  position: absolute;
  top: 5px;
  left: 150px;
  width: 10px;
  /*height: 200px;*/
  border-left: 1px solid #fff;
  z-index: 50;
}

.heightline3 {
  display: block;
  position: absolute;
  top: -50px;
  left: 50px;
  width: 10px;
  /*height: 200px;*/
  border-left: 1px solid #fff;
  z-index: 50;
}

.widthline {
  display: block;
  position: absolute;
  top: 30px;
  left: 5px;
  width: 98%;
  height: 20px;
  border-top: 1px solid #fff;
  z-index: 50;
}

.openwidthline {
  display: block;
  position: absolute;
  top: 25px;
  left: 10px;
  width: 90%;
  height: 20px;
  border-top: 1px solid #fff;
  
}

.openheightline {
  display: block;
  position: absolute;
  top: -30px;
  left: 30px;
  width: 10px;
  /*height: 120px;*/
  border-left: 1px solid #fff;
  
}

.widthmove {
  width: 150px;
  position: relative;
  top: -60px;
  left: 200px;
}

.leftspacer {
  height: 22px;
}

.height20 {  
  height: 20px;
}

.height40 {  
  height: 40px;
}

.height50 {  
  height: 50px;
}

.height60 {  
  height: 60px;
}

.height80 {  
  height: 80px;
}

.height100 {  
  height: 100px;
}

.height120 {  
  height: 120px;
}

.height140 {  
  height: 140px;
}

.height160 {  
  height: 160px;
}

.height180 {  
  height: 180px;
}

.height200 {  
  height: 200px;
}

.height230 {  
  height: 230px;
}

.height250 {  
  height: 250px;
}

.height400 {  
  height: 350px;
}

.width40 {  
  width: 40px !important;
}

.width50 {  
  width: 50px !important;
}

.width60 {  
  width: 60px !important;
}

.width80 {  
  width: 80px !important;
}

.width100 {  
  width: 100px !important;
}

.width120 {  
  width: 120px !important;
}

.width140 {  
  width: 140px !important;
}

.width160 {  
  width: 160px !important;
}

.width180 {  
  width: 180px !important;
}

.width200 {  
  width: 200px !important;
}

.width240 {  
  width: 240px !important;
}

.width280 {  
  width: 280px !important;
}

.width300 {  
  width: 300px !important;
}

.width360 {  
  width: 360px !important;
}

.width480 {  
  width: 480px !important;
}

.width540 {  
  width: 540px !important;
}

.formgrid label {
  font-size: 16px;
}

.toprint th, .toprint td {
  /*font-size: 12px;*/
  padding: 0;
  margin: 0;

}

.toprint tr {
  border-bottom: 1px solid #777;
}

.toprint {
  display: block !important; 
  position: relative !important; 
  background-color: #fff;    
  color: #000; 
  width: 720px !important;
  /*height: 960px;*/  
  padding-top: 5px !important;
  margin: 0 auto 0 !important;
  /*overflow: hidden;*/

  
    
}

.printfont {
  font-family: 'Cinzel';
  }

.numberfont {
  font-family: 'Arial';
  font-size: 14px !important;
}

.toprint * {
  border-color: #000 !important;
  }

.medprint td, .medprint th, .medprint span {
  font-size: 12px !important;
}

.printbold {
  font-weight: bold;  
}

.printstrike {
  text-decoration: line-through solid currentcolor !important;
}

.printhighlight {
  background-color: #eee !important;  
}

.smallprint td, .smallprint th {
  font-size: 10px !important;
}

.initialbox {
  width: 40px;
  height: 30px;
  border: 1px solid #333;
}

.printtable th {
  text-align: center;
  }

.printtable td {
    vertical-align: top;
}

.selectbox {
  width: 160px;
  height: 160px;
  border: 4px double #fff;
  padding-top: 10px;
  text-align: center;
  color: #fff;
}

.selectbox input {
    width: 40px;
    font-size: 20px;
    color: #000;
}

.bottomalign {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.incomplete {
  background-color: #8B0000;
}

.complete {
  background-color: #006400 !important;
}

.galleria{ max-width: 1200px; height: 800px; background: #000 }