/*
Custom styles in this file
will be loaded last by css compressor
*/

/* Kleuren
oranje 		#ff6c00
lichtoranje	#fff0e5
groen 		#00C45E
blauw		#01aef3
lichtgrijs	#f9f9f9

    /* Kleuren
oranje 		#ff6c00		rgba(252,155,84,0.9)
lichtoranje	#fff0e5
groen 		#00C45E
blauw		#01aef3
lichtgrijs	#f9f9f9
geel		#FFEE00
*/

html, body { width: 100%; height: 100% }
body { background: #fff0e5;}

html body{font-family: 'Inter', sans-serif; font-weight: 400; font-size: 15px; color: #3e3e3e; letter-spacing: 0; line-height: 1.75}


header .row, nav .row, footer .row, .row.full-widht { max-width: 100% }

.row.grid-x { max-width: 100% }

ul { list-style: none; margin: 0; padding: 0; }
[type="text"], [type="password"], textarea, select { border: 1px solid #e3e3e3; border-radius: 2px; font-size: 15px; height: 50px; box-shadow: none; background: #fafafa; color: #3e3e3e; }
label { line-height: 50px; font-weight: 500; color: #3e3e3e; }
.label { display: inline-block; width: 40% }
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"] { padding: 0 10px; height: 50px; box-shadow: none }
textarea { padding: 5px 10px }
.inputtype { display: block; position: relative; right: 1px; margin-top: -65px; float: right; background: #f5f5f5; padding: 0 8px; line-height: 48px; min-width: 55px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #e3e3e3; color: #555; font-size: 13px; text-align: center; font-weight: 500; }
.inputtype img {max-width: 18px}

.button { border: none; border-radius: 2px; padding: 0 15px; text-decoration: none; min-width: 200px; text-align: center; line-height: 50px; font-size: 15px; font-weight: 500; border-bottom: 2px solid #DB4800;border-right: 2px solid #DB4800 }
.button, .button.inverted:hover, input[type="submit"] { color: #fff; background: #ff6c00; }
.button:hover, .button.inverted { color: #fff; background: #e86200; border-color: #DB4800; }
.button.ghost { background: #fff; color: #3e3e3e; border-color: #e9e9e9; }
.button.ghost:hover { background: #ff6c00; border-color: #DB4800; color: #fff }
.button.orange{ background: #00bfbc; border-color: #008c8a }
.button.orange:hover{ background: #00a4a1; border-color: #008c8a; color: #fff }
.button img { margin: -2px 5px 0 0; max-width: 16px }
.button.icon-next, .button.icon-next:hover { background-image: url(../images/icon-arrow-right.svg); background-position: right 10px center; background-size: 10px; background-repeat: no-repeat; padding-right: 30px }
.button.ghost.icon-next {background-image: url(../images/icon-arrow-right-black.svg); background-size: 8px}
.button.small { min-width: 120px; line-height: 42px; margin: 0; font-size: 14px }
.button.marktplaats { background: #eea566; border-color: #c97f3e }
.button.green {background-color: #00C45E; border-color: #00923D; color: #fff }
.button.green:hover {background-color: #00B456; }
.button.red {background-color: #ff2400; border-color: #bc1b00;}
.button.red:hover {background-color: #ee2200}
.button.blue {background-color: #4099f2; border-color: #2875c3; color: #fff}
.button.blue:hover {background-color:#2e85db }

table tr td .button { line-height: 30px; font-size: 12px; min-width: 0; background: #eee; color: #333; font-weight: normal; border-color: #ccc; margin: 0 !important; padding: 0 8px; box-shadow: none }
table tr td .button img { height: 14px; margin-right: 0 }
table tr td {vertical-align: top}
table tr.begindag {background: #ddd}

.nomargin { margin: 0 }

.clickable { cursor: pointer; }

.hide-ok-button .panel .button.ok-button {display: none}

/* custom input fields */
select { background: #fafafa url('/images/selector.png') center right no-repeat; color: #3e3e3e; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 45px }
.selectgroup::after { content: ' '; display: table; clear: both; }
.selectgroup select { float: left; width: 50% }
.selectgroup select:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0 }
.selectgroup select:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0 }
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label, .filter label { background: url('/images/checkbox.png') center left no-repeat; cursor: pointer; padding-left: 30px; margin: 0 10px 5px 10px; user-select: none; line-height: 30px; user-select: none; -moz-user-select: none; font-size: 14px }
input[type="checkbox"]:checked + label, .filter label.checked, .filter label:hover { background-image: url('/images/checkbox-checked.png') }



input::placeholder { opacity: 0.6 }
input:focus::placeholder { opacity: 0.2 }
*:focus { outline-color: #000; }
[type="text"]:focus, [type="password"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="week"]:focus, [type="email"]:focus, [type="number"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="url"]:focus, [type="color"]:focus, textarea:focus { border: 1px solid #ccc }

hr { max-width: 100%; border-color: #ddd; display: none }

input:focus, textarea:focus { border: none; background-color: #fefefe; outline: none; box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); transition: box-shadow 0.25s, border-color 0.25s ease-in-out; }

h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', sans-serif; font-weight: 700; color: #000; line-height: 125% }
h1, .title {font-size: 26px; display: block; margin-bottom: 10px /*text-align: center*/ }
h2 { font-family: 'Roboto Slab', sans-serif; font-size: 24px }
h3 { color: #3e3e3e; font-family: 'Roboto Slab', sans-serif; font-size: 24px }
h4 { color: #3e3e3e; font-family: 'Roboto Slab', sans-serif; font-size: 22px }
h5 { color: #3e3e3e; font-family: 'Roboto Slab', sans-serif; font-size: 18px; }
h6 { font-size: 16px }
h2, h3, h4 { margin-bottom: 5px }

a { color: #01aef3; }
a:hover { color: #ff6b00; }
.quote { font-style: italic }
.small { font-size: 13px; }
.hidden { display: none }
label { font-size: 14px }
strong, b { font-weight: 600; color: #313131 }

.code_format { display: inline-block; background: #000; border: 1px solid #333; text-align: left; color: #3f0; font-size: 12px; margin: 15px 0; padding: 15px 30px; width: 1000px; font-family: monospace, Consolas, "Liberation Mono", Courier, monospace; font-size: 14px }

.icon {max-width: 16px; max-height: 16px }
.icon.status { display: inline-block; text-indent: -999px; border-radius: 8px; width: 16px; height: 16px; background: #999; overflow: hidden }
.icon.status.wait { background: #ff6000 }
.icon.status.new { background: #00aeef }
.icon.status.checked { background: #00aeef }
.icon.status.ready { background: #ffae00 }
.icon.status.active { background: #00ff1d }
.icon.status.cancel { background: #f22323 }
.icon.status.pause { background: #ff6000 }

.validate { color: #f22323; margin-bottom: 15px; border: 1px solid #f22323; padding: 15px }

input.error, select.error, textarea.error { border: 1px solid #f00 !important; }

.errorMessage, .okMessage, .infoMessage, .message.error, .validate, .message { padding: 15px 15px 15px 55px; font-weight: bold; color: #836247; border: solid 1px #ede4dc; border-left: solid 8px #e64c3c; background: #fff url('../images/message-icon-error.png') 15px center no-repeat; margin: 30px 0px 30px 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px; font-size: 15px }
.okMessage, .message.success { color: #1f6446; border: solid 1px #d3ede2; border-left: solid 8px #2ecc71; background-image: url('../images/message-icon-success.png') }
.infoMessage, .message.info { color: #276183; border: solid 1px #cbdee9; border-left: solid 8px #3498da; background-image: url('../images/message-icon-ok.png') }
.infoMessage, .message.info { color: #276183; border: solid 1px #cbdee9; border-left: solid 8px #3498da; background-image: url('../images/message-icon-ok.png') }


#loginpanel {max-width: 500px; padding: 45px; border: 1px solid #ddd !important; border-radius: 10px; background: #fff; margin: 50px auto; text-align: center}
#loginpanel img {max-width: 60%; margin-bottom: 15px}

header { line-height: 70px; background: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px; }
header .logo img { max-width: 260px }

header .header-icons img { max-width: 38px; }

footer { display: none }

footer img {max-width: 160px}

footer { font-size: 14px; color: #3e3e3e; padding: 30px 0 }
footer p { margin: 0 }

#footerbar { margin-top: 60px; padding: 15px 0; font-size: 12px; text-align: center; background: #fff; color: #444 }
#footerbar strong { color: #3e3e3e }

#MainContentPlaceHolder_PanelOrderScan > p, #MainContentPlaceHolder_PanelAssetScan > p {font-weight: 500; font-size: 16px;}

#qr-reader {max-width: 500px; padding: 20px !important; border: 1px solid #ddd !important; border-radius: 10px; background: #fff; margin: 50px auto;}

#qr-reader img[alt="Info icon"] {display: none;}
 
#qr-reader img[alt="Camera based scan"] {width: 100px !important; height: 100px !important;}
 
#qr-reader button {padding: 10px 20px;border: 1px solid #2875c3; color: #fff; margin: 15px 0; background-color: #4099f2; transition: 0.3s background-color; cursor: pointer}
#qr-reader button:hover {background-color: #2e85db;}
 
#html5-qrcode-anchor-scan-type-change {text-decoration: none !important; color: #1d9bf0;}
 
#qr-reader video { width: 100% !important; border: 1px solid #b2b2b2 !important; border-radius: 0.25em;}

.panel {margin: 50px auto; max-width: 500px; text-align: center}
.panel .button {display: block; width: 100%}

#manualscan {max-width: 500px; padding: 20px !important; border: 1px solid #ddd !important; border-radius: 10px; background: #fff; margin: 50px auto;}


#order-dashboard {margin-top: 30px}
#order-dashboard ul {margin: 15px 0; margin-right: 30px; max-height: 60vh; overflow:auto}
#order-dashboard ul li a {text-decoration: none; color: #3e3e3e; display: inline-block; width: 50px;}
#order-dashboard ul li a:hover {text-decoration: underline; color: #01aef3;}


.checkitem {display: block; border: none; min-width: 200px; text-align: left; line-height: 50px; font-size: 15px; font-weight: 500; margin: 8px 0 }
.checkitem input[type="checkbox"] + label {width: 100%; border-radius: 2px; margin: 0; line-height: inherit; padding: 0 0 0 45px; background-position: 15px center; background-color:#fff; border-bottom: 2px solid #eee;border-right: 2px solid #eee;}
.checkitem input[type="checkbox"]:checked + label {background-color: #85ffbf !important; border-color:#0ec465}
.checkitem input[type="checkbox"].required + label {background-color: #fff}
.checkitem input[type="checkbox"] + label {background-color: #fafafa}

.panel h5 {margin: 20px 0}

body.scandevice #manualscan .button{width: 100%; display: block; margin: 15px 0}

/* Small and medium */
@media screen and (max-width: 768px) {

    #loginpanel {margin: 30px}
    #loginpanel img {max-width: 90%}
    .button.small { width: 48%; margin: 0 1% 1% 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    table.stack tr { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #dedede; }

    header { line-height: 60px; }

    header .logo img { max-width: 75% }


    /* responsive tables */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    table thead, table tbody { display: table; width: 100%; }

    td { padding: 1% !important; width: 25%; display: inline-block; overflow: hidden }
    .button-bar .button { width: 100%; margin-bottom: 10px }

}

@media screen and (min-width: 1600px) {
    header, article { padding: 0 90px }
}