@font-face {
  font-family: Roboto;
  src: url("css/fonts/Roboto-Regular.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Light;
  src: url("css/fonts/Roboto-Light.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Thin;
  src: url("css/fonts/Roboto-Thin.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Medium;
  src: url("css/fonts/Roboto-Medium.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Bold;
  src: url("css/fonts/Roboto-Bold.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-Italic;
  src: url("css/fonts/Roboto-Italic.ttf") format("truetype")
}

@font-face {
  font-family: Roboto-BoldItalic;
  src: url("css/fonts/Roboto-BoldItalic.ttf") format("truetype")
}

@font-face {
  font-family: OpenSans;
  src: url("css/fonts/OpenSans.ttf") format("truetype")
}

.m50 {margin: 50px;}
.mr20 {margin-right: 20px;}
.mtb50 {margin: 50px 0px;}
.mtb100 {margin: 100px 0px;}

.spacer40 {margin-bottom: 40px;}

.bold {font-weight: bold;}
.invalidField {background-color: #FCC; border-color: red !important;}
.logoLink {outline: none; text-decoration: none;}

.center {text-align: center;}
.floatRight {float: right;}

body {margin: 0px; font-family: OpenSans; font-size: 14px; background-color: #F5F5F5;}
h1 {margin: 0px 0px 20px;}

.select1,.select1 option {font-family: OpenSans; font-size: 14px; padding: 10px; width: 320px; background-color: #FFF; border: 1px solid #CCC; border-radius: 5px;}

.controlLink {color: blue; text-decoration: none;}
.controlLink:active, .controlLink:visited {color: blue;}

.topBgTall {height: 300px; background-color: #FEC83D;}
.top,.top2 {width: 100%; height: 80px; background-color: #FEC83D; border-collapse: collapse;}
.menu1 {padding-left: 50px;}
.menu2 {width: 2%; text-align: center; padding: 0px 40px 0px 0px; vertical-align: bottom;}
.menu3 {width: 2%; text-align: center; padding: 0px 40px 0px 0px; vertical-align: bottom;}
.menu4,.menu44 {width: 160px; position: relative; padding: 0px 20px 0px 0px;}
.menu5,.menu55 {width: 100px; font-size: 16px; font-weight: bold; background-color: #FED977; text-align: center; cursor: pointer;}
.menu5:hover,.menu55:hover {background-color: #F0AE05;}
.menu9 {width: 1px; padding: 0px;}
.logoArea,.logoAreaOper {display: inline-block;}
.menuItem {display: inline-block; margin: auto; padding-top: 27px; padding-bottom: 20px; font-size: 20px; font-weight: bold; cursor: pointer; border-width: 0px 0px 6px; border-style: solid; border-color: transparent; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none;}
.menuItem:hover, .menuActive {border-color: black;}


.dd {position: absolute; top: 23px; left: 0px; width: 160px; color: #333; border: 1px solid #F0AE05; }
.listHeader {display: table; cursor: pointer; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; background-color: #F0AE05; font-family: Roboto-Bold; font-size: 16px;}
.listHeaderZero {display: table; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; font-family: Roboto-Bold; font-size: 16px;}
.listHeaderLeft {display: table-cell; padding: 8px 0px 8px 24px; position: relative;}
.listHeaderRight {display: table-cell; text-align: center; width: 30px; }
.geoIcon {position: absolute; left: 10px;}
.arrowIcon {vertical-align: middle; transition: transform .3s;}
.expanded { background-color: #FFF; }
.expanded .arrowIcon {transform: rotate(-180deg); transition: all .3s;}

.listContent {display: none; width: 160px; background-color: #FFF;}
.listItem {font-family: Roboto-Bold; padding: 8px 10px; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }
.listItem:hover {background-color: #FEC83D; transition: all .2s;}
.selectedItem {margin-left: 10px;}





.logoWrapper { position: relative; top: -240px; margin: 0px auto 0px; }
.logo {border-collapse: collapse; border: 2px solid #FEC83D; outline: 1px solid black; margin: 0px auto; color: #FEC83D; background-color: black; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }
.logo2 {border-collapse: collapse; border: 2px solid #FEC83D; outline: 1px solid black; margin: 0px; color: #FEC83D; background-color: black; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none; }
.logo td,.logo2 td {border: 2px solid #FEC83D;}
.logoCell1 {text-align: center; padding: 5px;}
.logoCell1Top {font-family: Roboto-BoldItalic; font-size: 24px;}
.logoCell1Bottom { font-size: 8px;}
.logoCell2 {font-family: Roboto-BoldItalic; padding: 5px 10px;}

.loginContainer {position: relative; top: -200px; text-align: center;}
.loginForm {width: 320px; background-color: white; padding: 40px 60px; margin: 0px auto 30px; border: 1px solid #CCC; border-radius: 5px; }
#requestResetPwForm {display: none;}
.loginCaption {margin-bottom: 40px; font-family: Roboto-Bold; font-size: 24px;}
.loginCaption2 {margin-bottom: 20px; font-family: Roboto-Bold; font-size: 24px;}
.loginField {margin-bottom: 40px;}
.lastField {margin-bottom: 20px;}
.loginField input {width: 300px; border-width: 0px 0px 2px; border-color: #CCC; padding: 5px 10px; outline: none; font-family: OpenSans; font-size: 14px;}
.loginField input:focus {border-color: #FEC83D;}
.loginForgotPass {margin-bottom: 30px; padding: 0px 10px; text-align: left; color: blue; cursor: pointer;}
.loginResetNote {margin-bottom: 30px; }
.loginSubmitArea {text-align: center;}
.btn { font-family: Roboto-Bold; font-size: 1em; background-color: #FEC83D; padding: 15px 30px; border-radius: 5px; border: none; cursor: pointer;}
.btn:hover {background-color: #f9b300;}
.btn2 { font-family: Roboto-Bold; font-size: 1em; background-color: #FEC83D; padding: 8px 15px; border-radius: 5px; border: none; cursor: pointer;}
.btn2:hover {background-color: #f9b300;}
.btn3 { font-family: Roboto-Bold; font-size: 1em; background-color: #CCC; padding: 15px 30px; border-radius: 5px; border: none; cursor: pointer;}
.btn3:hover {background-color: #AAA;}

.fieldName {color: #555; padding-left: 10px; margin-bottom: 5px;}
.inputNote {padding: 3px 0px 0px 10px; font-family: Roboto-Italic; font-size: 12px;}

#pageContent {padding: 0px;}
.captionContainer {background-color: #FFF; padding: 30px 50px 10px;}
.newUserBtn {float: right; margin-top: -4px;}
.tableContainer {padding: 0px 50px 20px;}
.usersTable {border-collapse: separate; border-spacing: 0px; width: 100%;}
.usersTable th {text-align: left; padding: 20px 10px;}
.tableData {}
.tableData td {padding: 10px; border-width: 1px 0px; border-style: solid; border-color: #CCC; background-color: #FFF;}
.rowSeparator td {height: 4px;}
.tableData td.leftTD {border-width: 1px 0px 1px 1px; border-radius: 5px 0px 0px 5px;}
.tableData td.rightTD {border-width: 1px 1px 1px 0px; border-radius: 0px 5px 5px 0px; text-align: right; height: 34px;}
.sort {display: inline-block; width: 15px; height: 18px; margin-left: 10px; cursor: pointer; vertical-align: middle;}
.sortDefault {background: url(images/sort.png);}
.sortDescend {background: url(images/sort_descend.png);}
.sortAscend {background: url(images/sort_ascend.png);}


.scanCanvas {background-color: #F5F5F5; padding: 50px 0px;}
.scan {display: table; margin: 0px auto;}
.scanCell1,.scanCell2,.scanCell3 {display: table-cell; vertical-align: middle;}
.scan1container {width: 400px; height: 190px; background-color: white; padding: 40px 60px; border: 1px solid #CCC; border-radius: 5px;}
.scanArea {text-align: center; margin-bottom: 30px;}
.scanNote {font-family: Roboto-Bold; font-size: 24px; text-align: center;}
.scan2table {width: 150px; height: 272px; text-align: center; font-family: Roboto-Bold; font-size: 24px; border-collapse: collapse; border: none;}
.rightBorder {height: 105px; border-width: 0px 2px 0px 0px; border-style: solid; border-color: #AAA;}
.leftBorder {height: 105px; border-width: 0px 0px 0px 2px; border-style: solid; border-color: #AAA;}
.barcodeForm {width: 400px; height: 190px; background-color: white; padding: 40px 60px; border: 1px solid #CCC; border-radius: 5px;}
#barcode {font-family: Roboto-Medium; font-size: 22px;}
.formErrorArea {height: 20px;}
.formError {display: none; color: red; padding-left: 10px; position: relative; top: -10px;}


.previewTable {border-collapse: collapse; width: 100%;}
.previewTable td.outer { height: 83px; padding: 0px; border-width: 15px 0px; border-style:solid; border-color: transparent; vertical-align: top;}
.previewBarcodeForm {max-width: 520px; background-color: white; padding: 40px 40px; border: 1px solid #CCC; border-radius: 5px; margin: 0px auto;}
.previewCaption {margin-bottom: 10px; font-family: Roboto-Bold; font-size: 24px;}
.customerNumber {margin-bottom: 10px; font-family: Roboto-Bold; font-size: 24px;}
.previewCell {height: calc(100% - 30px); background-color: #EEE; border-radius: 5px; padding: 15px;}
.previewTable td.previewRB {border-right-width: 15px;}
.cellCaption {margin-bottom: 10px;}
.cellData {font-family: Roboto-Medium; font-size: 20px;}

.datePickerTable {border-collapse: collapse; width: 100%;}
.datePickerTable td {padding: 0px;}
.datePickerTable .dateTD {padding-right: 15px;}
.datePickerTable .pickerTD {width: 32px;}
.calendar {display: block; cursor: pointer;}
#date {border: none; width: 115px; padding: 0px; background-color: transparent; font-family: Roboto-Medium; font-size: 20px; outline: none;}
/*#date:focus {background-color: #FFF;}*/

.confImg {text-align: center; }
.confThank {font-family: Roboto-Bold; font-size: 24px; text-align: center; margin-bottom: 30px;}
.confBtn {text-align: center;}

.paginator {display: table; margin: 20px auto; text-align: center; border-collapse: separate;}
.pBtn {display: table-cell; width: 40px; height: 40px; background-color: #FFF; border-width: 1px 0px 1px 1px; border-style: solid; border-color: #CCC; padding: 3px; text-align: center; vertical-align: middle; cursor: pointer;  -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -o-user-select: none;}
.pBtn:hover {background-color: #FEC83D;}
.currentPage {background-color: #FEC83D; font-weight: bold;}
.leftBTN {border-width: 1px 0px 1px 1px; border-radius: 5px 0px 0px 5px;}
.rightBTN {border-width: 1px; border-radius: 0px 5px 5px 0px;}

.dialog {display: hidden;}
.green {background-color: green; color: white; cursor: default;}
.green:hover {background-color: green;}
.valid {color: green; border-color: green !important;}

@media (max-width: 1240px) {
  .rightBorder,.leftBorder {height: 75px;}
  .loginCaption,.loginCaption2,.scanNote {font-size: 18px;}
  .scan1container {padding:10px 20px; width: 270px;}
  .barcodeForm {padding:10px 20px; width: 270px;}
  .scan2table {font-size: 18px; width: 100px; height: 212px;}
  #barcode {font-size: 18px;}
  .loginField input {width: 250px;}
}

@media (max-width: 1100px) {
  .select1 {width: 270px;}
  .loginForm {width: 270px;}
}

@media (max-width: 910px) {
  .menu1 {padding-left: 10px;}
  .menu2 {padding-right: 20px;}
  .menu3 {padding-right: 20px;}
  .menu4,.menu44 {padding-right: 10px;}
  .menu5,.menu55 {width: 70px; font-size: 14px;}
  .menuItem {font-size: 16px; padding-bottom: 22px;}
  h1 {margin: 0px 0px 10px; font-size: 1.5em;}
  .captionContainer {padding: 15px 10px 15px;}
  .tableContainer {padding: 0px 10px;}
}

@media (max-width: 750px) {
  .scanCell1 {display: block;}
  .scanCell2 {display: block;}
  .scanCell3 {display: block;}
  .rightBorder,.leftBorder {height: 15px; border-color: transparent;}
  .scan2table {font-size: 16px; width: 100%; height: auto;}
  .usersTable th {font-size: 12px; padding: 10px 5px;}
  .tableData td {font-size: 12px; padding: 5px; }
  .btn2 {font-size: 12px; padding: 4px;}
}

@media (max-width: 715px) {
  .logoCell1Top {font-family: Roboto-BoldItalic; font-size: 16px;}
  .logoCell1Bottom { font-size: 6px;}
  .logoCell2 {font-family: Roboto-BoldItalic; padding: 2px 4px;}
  .menuItem {font-size: 14px; padding-bottom: 24px;}
  .listHeader {font-size: 14px;}
  .menu2 {padding-right: 10px;}
  .menu3 {padding-right: 10px;}
  .menu5,.menu55 {width: 50px; font-size: 12px;}
  .dd,.listContent,.menu4,.menu44 {width: 130px;}
  .scanCanvas {padding: 20px 10px;}
  .previewCaption,.customerNumber {font-size: 20px;}
}

@media (max-width: 590px) {
  .top {height: 115px;}
  .logoArea {position: absolute; top:3px; left: 3px;}
  .logoCell2 {font-size: 12px;}
  .dd {top: 58px;}
  .menu1 {width: 0px; padding-left: 0px;}
  .menu2,.menu3 {width: 12%;}
  .menu44 {width: 110px;}
  .menu5 {padding-top: 36px;}
  .previewBarcodeForm {padding: 20px 5px;}
  .loginForm {padding: 10px 15px;}
  .usersTable th {font-size: 10px; padding: 8px 3px;}
  .tableData td {font-size: 10px; padding: 3px; }
  .btn,.btn3 {font-size: 12px; padding: 6px;}
  .btn2 {font-size: 10px; padding: 3px; margin: 2px 0px;}
}

@media (max-width: 425px) {
  h1 {font-size: 1.2em;}
  .menu5 {width: 40px; font-size: 9px;}
  .cellData,#date {font-size: 16px;}
}

@media (max-width: 390px) {
  .menuItem {font-size: 12px;}
  .menu2,.menu3 {width: 10%; padding-right: 6px;}
}