html, body{ padding:0; margin:0; }
html { height:100%; }
body { min-height:100%; }
body { font-family:'copperplateregular', serif; margin-bottom:5vw; }
#main-body { background:#fff; padding-top:10px; padding-bottom:10px; }
.nbb, .nbb th, .nbb td { border-bottom:0 none !important; }
.nbt, .nbt th, .nbt td { border-top:0 none !important; }
.nbb th, .nbb td, .nbt th, .nbt td { padding:4px; }
#invitation { margin:10px auto; text-align:center; width:650px; }
#domain-search-group h5 { display:inline-block; margin-right:10px; }
.navbar-brand { font-size:2em; }
.navbar-brand h1 { margin-top:.3em; font-size:1.4em; }
img#logo { max-height:2.4em; margin-right:.2em; }
.navbar-nav { background-color:#fff; height:3em; line-height:2em; border-bottom:1px solid #3D2C22; }
.nav-item { -webkit-transition-duration:0.4s; transition-duration:0.4s; }
.nav-item.active, .nav-item:hover { background-color:#3D2C22; }
.nav-item.active a.nav-link, .nav-item a.nav-link:hover { color:#fff !important; }
.nav-link { font-size:18px; color:#3D2C22 !important; }
.dropdown-menu { background-color:#eee; }
.dropdown-menu li a.nav-link { color:#000 !important; }
li.nav-item.dropdown.show a[aria-expanded=true] { background-color:#3D2C22; color:#fff !important; }
h1#home-heading { line-height:1em; font-size:3.4em; text-transform:uppercase; }
h2#home-subheading { font-size:1.4em; margin-top:1em; margin-bottom:1em; text-transform:uppercase; }
table { width:100%; border-collapse:collapse; }
.tc { text-align:center; }
.table-wrapper{ overflow-x:auto; padding:0; border-top-left-radius:6px; border-top-right-radius:6px; }
td, th { border-bottom:1px solid #e3e3e3; padding:.4em; }
.responded td { padding:.05em; }
th { cursor:pointer; font-weight:normal; }
.ar { text-align:right; }
.po_details td { background:#eee; }
tbody tr.po_details:hover { color:#212529; }
.noborder { border:0 none; }
#specs-table { margin:0 0 10px;  min-height:88px; }
#specs-table .address-box { padding:0 30px; }
#specs-table .address-box p { border:1px solid #333; margin-bottom:0; text-indent:5px; }
.supp-address-box p { border:1px solid #333; margin-bottom:0; padding:5px; }

#theTable { height:88px; margin-bottom:10px; }
#theTable thead tr { border-bottom:2px solid #333; }
#theTable td { border-bottom:none; }
#theTable td input[type="text"] { font-size:14px; line-height:16px; }
#theTable td .button { font-size:12px; line-height:20px; }
.quote-table td, quote-table th, .quote-table tr { border-bottom:2px solid #333; border-top:2px solid #333; font-size:.95em; }
.vendor-row { font-size:.9em; }
.head-row, .head-row th { border-bottom:0 none !important; }
.note-row, .note-row th { border-top:0 none !important; }
.vendor-row, .vendor-row td, .vendor-row th { border:0 none !important; }
.vendors tr, .vendors td { border-bottom:0 none !important; border-top:0 none !important; }
.vendors tbody tr .button { margin:0; }
.vendors tbody tr .award { display:none; }
.option-col { width:105px; text-align:right; }
.responded { text-align:right; font-size:.85em; }
.col-spacer { width:100px; }
.vendors .col-spacer { width:175px; }
#data-buttons { text-align:center; }
#data-buttons .button.dt-button { font-weight:normal; margin:0 0 10px 0; font-size:.95em; }
#data-buttons .button.selected { color:#fff; background-color:#000; font-weight:bold; }
#logo-holder p { font-size:14px; }
#logo-holder h3 { margin:0; margin-top:.6em; line-height:.95em; }
#logo-holder #logo { float:left; }
.ui-autocomplete { font-size:.75em; }
#invite-wrapper { text-align:center; }
.last-sale { font-size:.75em; }
.navbar-collapse { flex-basis:auto; }
.navbar-text { font-size:1.25em; margin-top:-40px; }
.hide { display:none; }
.tooltip { font-size:.8em; }
#invite-row { position:relative; }
#invite-row .button { position:absolute; top:-60px; }
#invite-row .button.buyers { left:80px; }
#invite-row .button.suppliers { left:70px; }

.qty { width:100px; }
.ship_date { width:200px; }
.price { width:105px; }
.ext { width:175px; }
.freight { width:150px; }
.total { width:200px; }

button.button { padding:.4em 1em; font-weight:bold; border:1px solid #000; background-color:#fff; color:#000; cursor:pointer; margin:.5em; -webkit-transition-duration:0.4s; transition-duration:0.4s; font-family:'copperplateregular', serif; }
button.button:hover, button.button.selected { color:#fff; background-color:#000; }
.center { text-align:center; }
table#award_PO tbody tr:hover { background-color:unset; }
form[name=PO_AWARD] { width:100%; }
td.supp { cursor:pointer; }
td:empty { background-color:#fff; }
.sortedA, .sortedD { xbackground-color:#4F5AC0; }
.sortedD:after { content:'\23F6'; }
.sortedA:after { content:'\23F7'; }
.dollar:before { content:'$'; }
.goldenrod { color:#DAA520; }
.row1 td { background-color:#fff; }
.row2 td { background-color:#ddd; }
table tr td .button { padding:0.05em 1em; font-size:.75em; }
footer { background-color:#eee; position:fixed; bottom:0; width:100%; height:5vw; }
#buyer { color:#5d5d5d; }
.info-box { width:100%; border:1px solid #000; padding:10px; height:11.6em; }
.info-box h2 { font-size:1.8em; margin:-10px; padding:.2em 0; margin-bottom:.2em; border-bottom:2px solid #000; text-align:center; }
.info-box p { font-size:1.2em; margin-bottom:.5em; }
.signup-info p.center-btn { text-align:center; width:100%; }
.info-box, { xdisplay:table-cell; }
.ruler { background-color:rgb(0, 46, 93);  border-radius:7px; box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.25) inset; height:0; min-height:2px; margin-bottom:1em;}
.steps p, #home-heading, #home-subheading, #home-subheading + p { font-family:'Playfair Display', serif; }
#steps-area { position:relative; float:left; }
svg {
    bottom:0;
    fill:#002e5d;
    fill-opacity:0;
    height:100%;
    xleft:-30px;
    margin:auto;
    position:relative;
    right:0;
    stroke:rgba(27, 27, 30, 0.8);
    stroke-width:1px;
    top:0;
    width:100%;
}
svg * {
    vector-effect:non-scaling-stroke;
}
svg {
    fill:#002e5d;
    fill-opacity:0;
    stroke:rgba(27, 27, 30, 0.8);
    stroke-width:1px;
}

button.big-button { display:block; width:100%; margin:.5em 0; }
#camera-holder { position:relative; }
#camera-canvas { position:absolute; z-index:100; }
#camera { border:1px solid #333; width:100%; min-height:500px; }

#order-table .selected td { background:#ddd; }

.controls {
    position: relative;
    padding-bottom: 3em;
}
.d-button {
    cursor: pointer;
    box-shadow: 0 0 3px 1px #555;
    color: $label;
    text-align: center;
}
.d-button:hover {
    box-shadow: 0 0 5px 1px #333;
}
.d-button:active {
    box-shadow: 0 0 5px 1px #333 inset;
}
.d-button .label {
    font-size: .8em;
    position: relative;
    text-transform: uppercase;
}


.d-pad {
    width: 3em;
    height: 3em;
    position: relative;
    margin:0 auto 4em;
}

.d {
    width: 2em;
    height: 2em;
    background: #1d2323;
    position: absolute;
    border-top: .05em solid lighten(#1d2323, 40%);
    border-bottom: .05em solid darken(#1d2323, 20%);
}
.d:hover, .d:active {
    background: lighten(#1d2323, 15%);
}

.up {
    left: 1em;
    top: 0;
    border-radius: .25em .25em 0 0;
}
.up .label {
    top: -2em;
}
.right {
    top: 2em;
    right: -2em;
    border-radius: 0 .25em .25em 0;
}
.right .label {
    top: .2em;
    right: -2em;
}
.down {
    left: 1em;
    bottom: -3em;
    border-radius: 0 0 .25em .25em;
}
.down .label {
    bottom: -2.4em;
}
.left {
    top: 2em;
    left: -1em;
    border-radius: .25em 0 0 .25em;
}
.left .label {
    top: .2em;
    left: -2em;
}
#settings { cursor:pointer; }
#moveModal input[type="text"] { width:35px; border:0 none; }

#camera img { max-width:1108px; }
#camera-fix { width:100px; height:100px; background:#fff; display:block; position:absolute; top:51px; left:51px; z-index:50; }

#top-button .big-button[disabled] { background:#eee; color:#ccc; }
#top-button .big-button[disabled]:hover { background:#eee; color:#ccc; }
.manual .btn, .header-controls .btn { width:32.4%; height:30%; margin:0 2px 5px; background:#f0f0f0; font-size:30px}
.modal .manual .btn { width:30%; height:19% }
.manual .btn.enter { width:100%;box-sizing:border-box }
.control-panel img { max-width:100%; }
.order-line, .line-item { cursor:pointer; }
input[name='current_setting'], input[name='keypad']{height:30%;position:relative;top:0;font-size:30px}
#mobile-logo { display:none; }
#desktop-logo { display:block; }
#current-setting{font-size:16px;margin-left:15px;}
#orders .highlight td { background:#106c3e; color:#fff; }
#orders .btn { height:20px; font-size:14px; line-height:7px; }

.hiddenSelect { visibility:hidden; }
#stop{background:red}
.hiddenSelect {
    position: absolute;
    height: 0px !important;
    width: 0px !important;
    border: none !important;
    z-index: -4;
    color: #fff;
    background: transparent;
    padding: 0;
}
.hiddenSelect option { height:0; width:0; }
.hiddenSelect:focus {
    border: none !important;
    box-shadow: none !important;
}
.nws ul li a {
    white-space: normal !important;
}
.selectthis {
    position: relative;
    margin-bottom: 10px;
    display:inline-block;
    width:84%;
    top:8px;
    text-align:left;
}
.selectthis .selectthisselected:focus {
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.selectthis .selectthisselected {
    cursor: pointer;
    padding: 2px 6px;
    margin-top: 1px;
    display: block;
    
    background: #ffffff;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    height: 22px;
    width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #828576;
}
.selectthis .selectthisselected .arrow {
    background: url("/images/select-arrows.png") no-repeat;
    height: 10px;
    position: relative;
    display: inline-block;
    top: -6px;
    width: 8px;
    left: 4px;
}
.selectthis .selectthisselected .selected {
    line-height: 22px;
    color: #828576;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85%;
    font-size:12px;
    font-weight:notmal;
}
.selectthis .selectthisselected .selected a:hover {
    text-decoration: none !important;
}
.selectthis ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    display: none;
    position: absolute;
    z-index: 100;
    top: 100%;
    border:1px solid #ccc;
    border-top:0;
    
}
.selectthis ul li {
    float: none !important;
    text-transform: none;
    margin: 0 !important;
}
.selectthis ul li a {
    padding: 4px;
    display: block;
    cursor: pointer;
    white-space: nowrap;
    color: #828576;
    font-size: 12px;
    font-weight:normal;
}
.selectthis ul li a:hover {
    background: #ccd5e1;
    text-decoration: none !important;
}
table tr th{font-weight:bold}
table tr.order-line td{background:#f1f1f1}
#calibrate{cursor:pointer}
.green{color:#00d43d}
#stop{position:relative;z-index:999999999}

@media (max-width:974px) {
    .navbar-nav{background-color:unset;height:unset;line-height:unset;border-bottom:unset}
    .nav-item{-webkit-transition-duration:0.4s;transition-duration:0.4s}
    .nav-item.active, .nav-item:hover{background-color:unset}
    .nav-item.active a.nav-link, .nav-item a.nav-link:hover{color:#aaa !important}
    .nav-link{font-size:2.4em;color:unset !important}
    .dropdown-menu{background-color:unset}
    .dropdown-menu li a.nav-link{color:#000 !important}
    li.nav-item.dropdown.show a[aria-expanded=true]{background-color:unset;color:unset !important}
    .info-box p{font-size:1em}
}

@media (min-width:768px) and (max-width:974px){
    .manual .btn{width:32.1%; height:150px;font-size:50px}
    .manual .btn.setting{width:30%}
    .manual .btn.enter{width:99%;box-sizing:border-box}
    input[name="current_setting"], input[name="keypad"]{height:140px;top:4px;font-size:33px;width:115px;text-align:center}
    button.button{font-size:30px;padding:1em}
    #desktop-logo{display:none}
    #calibrate{position:relative;top:20px}
}
@media only screen and (max-width:767px) {
    #desktop-logo { display:none; }
    #mobile-logo { display:block; }
    #invite-row .button { position:initial; margin:0 0 10px; width:100%; }
    .steps{
	position:relative;
	padding-top:7em;
    }
    .num-container{
	position:absolute;
	top:0;
	xclear:both;
    }
    .num-wrapper{
	position:relative;
	top:0;
	transform:none;
	-webkit-transform:none;
    }
    #steps-area:before{
	xbackground-size:cover;
    }
    .data-table { font-family:sans-serif; }

    .manual .btn.keypad { width:32%; height:50px; margin:0 0 5px; background:#f0f0f0; }
    .manual .btn.keypad.enter { width:100%; }
}
@media (max-width:500px){
    .signup-info{
	display:inline;
	width:100%;}
    
    h1#home-heading{
	font-size:13vw;
    }
}
@media only screen and (max-width:600px) {
    #name{
	position:relative;
    }
}
@font-face {
    font-family:'copperplateregular';
    src:url('fonts/Copperplate_Regular.woff2') format('woff2'), url('fonts/Copperplate_Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}