/* general */
[v-cloak] {
	display: none !important;
}

.boxer-audit .form-legend {
    width:inherit; /* Or auto */
    padding:0 10px; /* To give a bit of padding on the left and right */
    border-bottom:none;
}
.audit-form{
	border: 1px solid lightgray;
	padding:10px;
}
.audit-form .form-title{
	font-weight: bold;
}
.boxer-header{
	padding:16px;
	border-bottom: 1px solid lightgray;
}
.boxer-header h1{
	font-size:32px;
	font-weight: bold;
	color: #3a6d9d;
}

.boxer-header h2{
	margin-top: 0px;
	font-size: 16px;
	font-weight: normal;
}
#app {
	margin: 0 auto;
	max-width: 1000px;
	color: #666;
}

header {
	position: fixed;
	top: 0;
	width: 100%;
	max-width: 1000px;
	padding: 20px 0;
	background-color: #fff;
	z-index: 2;
}
header:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	width: calc(100% - 30px);
	margin-left: 15px;
	height: 1px;
	background-color: #ddd;
}

header h1 {
	font-size: 32px;
	font-weight: bold;
	margin: 0 0 16px;
}

header .app-details h1 {
	color: #3a6d9d;
}

header h2 {
	margin-top: 0;
	font-size: 16px;
	font-weight: normal;
}

header .btn-reset {
	font-size: 20px;
	width: 100%;
	margin: 10px 0;
	padding: 25px 0;
}

main {
	margin-top: 120px;
}

.item-totals {
	margin: 20px 0 30px 0;
	font-size: 20px;
}

.loading-icon {
	text-align: center;
	padding-top: 100px;
}

/* icons */
#app-body .glyphicon {
	font-size: 40px;
	vertical-align: middle;
	padding-right: 10px;
}

#app-body .glyphicon-ok-sign {
	color: #009e11;
}

#app-body .glyphicon-question-sign {
	color: #f1c233;
}

#app-body .glyphicon-remove-sign {
	color: red;
}

.spinner-white {
	margin-right: 10px;
}

/* messages */
.message {
	margin-top: 50px;
	text-align: center;
}

.message h1 {
	font-weight: bold;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#app-body .glyphicon {
	margin-top: -5px;
	font-size: 70px;
}

.ready-message {
	padding-top: 50px;
}

.success-message + .ready-message {
	padding-top: 20px;
}

.error-message {
	margin-bottom: 50px;
}

body.logo-contain{
	width: 100%;
	text-align: center;
}

body.card-success{
	background-color: #518139;
}
body.card-success .message,
body.card-success #app-body .glyphicon {
	color: #fff;
}
/* success styling */
body.complete {
	background-color: #518139;
}
body.complete .message,
body.complete #app-body .glyphicon {
	color: #fff;
}

/* error styling */
body.error {
	background-color: #d7462e;
}
body.error .message,
body.error #app-body .glyphicon,
body.error .table {
	color: #fff;
}
body.error button{
	width: 300px;
    height: 174px;
    border: none;
    background-color: #3a6d9d;
    color: white;
	font-size: 30px;
	margin-top: 30px;
	text-transform: uppercase;
	border-radius: 15px;
}

body.error-loading {
	background-color: #d7462e;
}
body.error-loading .message,
body.error-loading #app-body .glyphicon,
body.error-loading .table {
	color: #fff;
}

/* lock style */
body.lock {
	background-color: purple;
}
body.lock .message,
body.lock .message .glyphicon,
body.lock .table {
	color: #fff;
}


/* items table */
#items {
	width: 100%;
	font-size: 16px;
}

#items tr td {
	width: 25%;
	height: 100px;
	vertical-align: middle;
	padding-bottom: 5px;
}

#items tr td.img {
	text-align: center;
}

#items tr td img {
	max-height: 100px;
}

#items tr.scanned td {
	color: #aaa;
}

.hideInput { 
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.cards-container {
	text-align: center;
}
.cards-container h1 {
	font-size: 40px;
	margin-bottom: 30px;
}
.cards-container .glyphicon {
	font-size: 70px;
}
.cards-container .buttons {
	margin-top: 30px;
}
.cards-container .btn {
	max-width: 100%;
	font-size: 34px;
	padding: 136px 350px;
}

.cards-container p {
	padding: 28px 0 0 ;
	font-size: 24px;
}

.dropdown-menu {
	padding-top: 10px;
	padding-bottom: 10px;
}

.dropdown-menu li > span {
	display: block;
	padding: 3px 20px;
	line-height: 1.42857143;
}

@keyframes ldio-wq10vl6eg7-1 {
    0% { transform: rotate(0deg) }
   50% { transform: rotate(-45deg) }
  100% { transform: rotate(0deg) }
}
@keyframes ldio-wq10vl6eg7-2 {
    0% { transform: rotate(180deg) }
   50% { transform: rotate(225deg) }
  100% { transform: rotate(180deg) }
}
.ldio-wq10vl6eg7 > div:nth-child(2) {
  transform: translate(-15px,0);
}
.ldio-wq10vl6eg7 > div:nth-child(2) div {
  position: absolute;
  top: 40.199999999999996px;
  left: 40.199999999999996px;
  width: 120.6px;
  height: 60.3px;
  border-radius: 120.6px 120.6px 0 0;
  background: #3a6d9d;
  animation: ldio-wq10vl6eg7-1 1.0638297872340425s linear infinite;
  transform-origin: 60.3px 60.3px
}
.ldio-wq10vl6eg7 > div:nth-child(2) div:nth-child(2) {
  animation: ldio-wq10vl6eg7-2 1.0638297872340425s linear infinite
}
.ldio-wq10vl6eg7 > div:nth-child(2) div:nth-child(3) {
  transform: rotate(-90deg);
  animation: none;
}@keyframes ldio-wq10vl6eg7-3 {
    0% { transform: translate(190.95px,0); opacity: 0 }
   20% { opacity: 1 }
  100% { transform: translate(70.35px,0); opacity: 1 }
}
.ldio-wq10vl6eg7 > div:nth-child(1) {
  display: block;
}
.ldio-wq10vl6eg7 > div:nth-child(1) div {
  position: absolute;
  top: 92.46px;
  left: -8.04px;
  width: 16.08px;
  height: 16.08px;
  border-radius: 50%;
  background: #000000;
  animation: ldio-wq10vl6eg7-3 1.0638297872340425s linear infinite
}
.ldio-wq10vl6eg7 > div:nth-child(1) div:nth-child(1) { animation-delay: -0.6298s }
.ldio-wq10vl6eg7 > div:nth-child(1) div:nth-child(2) { animation-delay: -0.31020000000000003s }
.ldio-wq10vl6eg7 > div:nth-child(1) div:nth-child(3) { animation-delay: 0s }
.loadingio-spinner-bean-eater-lducxgii5il {
  width: 201px;
  height: 201px;
  display: inline-block;
  overflow: hidden;
  background: rgba(NaN, NaN, NaN, 0);
}
.ldio-wq10vl6eg7 {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-wq10vl6eg7 div { box-sizing: content-box; }

.loader {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 200px;
}

.lds-dual-ring {
  /* change color here */
  color: #3a6d9d
}
.lds-dual-ring,
.lds-dual-ring:after {
  box-sizing: border-box;
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 44px;
  height: 44px;
  margin: 8px;
  border-radius: 50%;
  border: 5px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: lds-dual-ring 0.9s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}