/*
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, html .ui-widget {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: #fff; padding: 0 8px; line-height: 48px; min-width: 48px; 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: 16px}

.button {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: 1px solid transparent; white-space: nowrap;   }
.button {border-radius: 5px; font-weight: 400}
.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: #e3e3e3; }
.button.orange{ background: #00bfbc; border-color: #008c8a }
.button.orange:hover, .button.ghost:hover { background: #00a4a1; border-color: #008c8a; color: #fff }
.button img { margin: -2px 5px 0 0; max-width: 20px }
.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 !important }
.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; padding-right: 40px }
.button.marktplaats { background: #eea566; border-color: #c97f3e }
.button.green {background-color: #00C45E; border-color: #00C45E; 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; }

/* custom input fields */
select { background: #fff 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: 1 }
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; }

.panel { background: #fff; margin-top: 15px; margin-bottom: 30px; padding: 15px; border: 0; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px; }

.row.panel { margin: 15px 0 30px 0 }
.panel.block label {display: inline-block; width: 30%}
.inner-panel-orders {max-height: 580px; overflow-y: scroll}

h1, h2, h3, h4, h5, h6 { font-family: 'Inter Tight', sans-serif; font-weight: 600; color: #000; line-height: 125% }
h1, .title {font-size: 26px; display: block; margin-bottom: 10px /*text-align: center*/ }
h2 { font-family: 'Inter Tight', sans-serif; font-size: 24px }
h3 { color: #3e3e3e; font-family: 'Inter Tight', sans-serif; font-size: 24px }
h4 { color: #3e3e3e; font-family: 'Inter Tight', sans-serif; font-size: 22px }
h5 { color: #3e3e3e; font-family: 'Inter Tight', sans-serif; font-size: 16px; }
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.status { display: inline-block; text-indent: -999px; border-radius: 8px; width: 16px; height: 16px; background: #999; overflow: hidden }
.icon.status.wait { background: #ff6c00 }
.icon.status.wait.parts { background: #e7cb94 }
.icon.status.wait.customer { background: #f88c8c }
.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') }

.popupframe { padding: 15px; text-align: center }
.popupframe.clonestatus { background: #000; color: #fff }
.popupframe.clonestatus h1, .popupframe.clonestatus strong { color: #fff }

.dataTables_info { float: left; margin-top: 15px }
.paging_simple_numbers { margin: 15px 0; text-align: right }
.paging_simple_numbers a { display: inline-block; line-height: 42px; height: 42px; border: 1px solid #eee; background: #fafafa; padding: 0 15px; margin-left: 5px; color: #333; font-weight: 500; font-size: 14px; border-radius: 5px; cursor: pointer }
.paging_simple_numbers a.disabled { color: #ccc; cursor: default }
.paging_simple_numbers a.current { background: #fff0e5; border-color: #f5d8c3; color: #ff6b00 }
.paging_simple_numbers a { text-decoration: none; color: #333 }
.paging_simple_numbers a:hover { color: #01aef3 }

div.dataTables_wrapper .dataTables_filter { float: none; text-align: left }
div.dataTables_wrapper .dataTables_filter select { max-width: 300px; margin-right: 10px }
div.dataTables_wrapper .dataTables_filter label { width: 390px; text-align: right; float: right }
div.dataTables_wrapper .dataTables_filter input { border-color: #e3e3e3; display: inline-block; max-width: 300px; margin-left: 5px }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { border: 0; box-shadow: none; font-family: inherit; font-weight: 600; background: #01aef3 }
div.dataTables_wrapper .dtr-details { list-style: none; margin: 0 10px; font-size: 14px; }
div.dataTables_wrapper .dtr-details .dtr-title { display: inline-block; width: 45%; font-weight: 500; }
table th.winkel { font-size: 10px; transform: rotate(-45deg); padding-bottom: 10px }


header { line-height: 70px; background: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px; padding: 0 15px }
header .logo img { max-width: 210px; width: 100% }
header #frmSearch { position: relative; padding-top: 12px; display: inline-block; max-width: 550px }
header #frmSearch input[type="text"] { border: 1px solid #F4F5F8; margin: 0; width: 100%; padding: 0 15px 0px 40px; height: 48px; color: #3e3e3e; background: #F4F5F8; box-shadow: none; border-radius: 2px; font-weight: 500; font-size: 15px }
header #frmSearch input[type="text"]::placeholder { color: #3e3e3e; opacity: 0.75 }
header #frmSearch #ButtonZoeken, #subheader #frmSearch #ButtonZoeken:hover { position: absolute; left: 0; background: url('/images/icon-search-black.svg') center center no-repeat; background-size: 16px 16px; width: 40px; height: 50px; min-width: 40px; border: none; box-shadow: none; top: 10px; margin: 0; opacity: 0.75 }
header .header-icons a {color : #000; text-decoration: none}
header .header-icons .username { font-weight: 500; }
header .header-icons .username img { max-width: 28px }
header .header-icons .button { margin-left: 15px }
header .header-icons img { max-width: 18px; margin: 0 2px; }

.menu-button { width: 50px; height: 50px; border: none; background: #fff; position: absolute; top: 6px; right: 0; z-index: 9; cursor: pointer; display: none }
.menu-button .touch-button { width: 50px; height: 50px; background: none }
.menu-button .touch-button img { display: none; }

.menu-button #hamburger { width: 24px; position: absolute; display: block; top: 25px; left: 10px; cursor: pointer; }
.menu-button #hamburger span { width: 100%; height: 2px; background-color: #000; display: block; position: absolute; transition: 0.3s; border-radius: 2px }
.menu-button #hamburger span:first-child { transform: translateY(-7px) }
.menu-button #hamburger span:last-child { transform: translateY(7px) }
.menu-button:hover #hamburger span:first-child { transform: translateY(-9px) }
.menu-button:hover #hamburger span:last-child { transform: translateY(9px) }
.menu-button.active #hamburger span:first-child { transform: rotate(-45deg) }
.menu-button.active #hamburger span:nth-child(2) { transform: rotate(-45deg); opacity: 0 }
.menu-button.active #hamburger span:last-child { transform: rotate(45deg) }

.search-toggle { display: none; cursor: pointer; width: 36px; height: 50px; background: #fff; position: absolute; top: 6px; right: 50px; line-height: 50px; }

nav { background: #ff6c00; max-width: 90px; min-height: 100vh !important; /*box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px;*/ }
nav #sidenav ul li a { text-decoration: none; display: block; text-align: center; line-height: 56px; transition: all 0.25s; position: relative; }
nav #sidenav ul li img {  max-width: 24px; opacity: 1 }
/*nav #sidenav ul li:first-child a { line-height: 70px }
nav #sidenav ul li:first-child a img { max-width: 24px }*/
nav #sidenav ul li.metorders { position: relative }
nav #sidenav ul li .icon-orders { position: absolute; right: 0; left: 50px; top: 10px;font-size: 10px; color: #fff; background: #00C45E; border: 1px solid #00C45E; border-radius: 2px; line-height: 16px; width: 18px; text-align: center }
nav #sidenav ul li a .label-text {  padding: 0px 5px; color: #fff; font-size: 11px; line-height: 10px; margin: -8px 0 10px 0; opacity: 1 }
nav #sidenav ul li a:hover img, nav #sidenav ul li a:hover .label-text {opacity: 0.8}
nav #sidenav ul li a.active img {opacity: 0.8}
nav #sidenav ul li a.active .label-text {font-weight: 500; opacity: 0.8}
nav #sidenav ul li:first-child a .label-text { top: 21px }
nav #sidenav ul li a.active:after{content: "";position:absolute;width: 15px;height: 15px;background: #ff6c00;transform:rotate(-45deg);right: -5px;top: 23px;}
nav #sidenav ul#menu {padding-bottom: 15px;}


/* fixed menu on top */
nav #sidenav .sm-screen { position: fixed; top: 0; left: 0; right: 0; padding-top: 65px; width: 100%; height: 100%; background: rgba(255,255,255,0.95); z-index: 7; overflow: auto; -webkit-overflow-scrolling: touch; }
header .menu-button.icon.active { position: fixed; }
body.nav-active { position: fixed; overflow: hidden }
body.nav-active nav { position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; overflow-y: auto; }
.flexnav.flexnav-show { width: 85%; margin-left: 0 }

footer { display: none }

#topButtonBar {background: #fff; margin: -30px -30px 15px -30px; padding: 15px 30px; border-top: 1px solid #e3e3e3; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px;}

div.dataTables_wrapper .dataTables_filter select { max-width: 200px; font-size: 14px; font-weight: 500 }
div.dataTables_wrapper .dataTables_filter input { font-size: 14px; font-weight: 500; border-radius: 3px }
div.dataTables_wrapper tr:hover { background: #eaf5fe }

ul.bestandenoverzicht { list-style: none; margin: 15px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
ul.bestandenoverzicht li { display: inline-block; font-size: 14px; }
ul.bestandenoverzicht li img { max-width: 100% }
ul.bestandenoverzicht li a.fancybox {font-size: 11px; word-break: break-all;}

#searchframe { display: block; position: absolute; left: 90px; right: 0; top: 70px; background: rgba(255,255,255,0.95); width: calc(100% - 90px); padding: 15px; display: none; box-shadow: 0px 10px 15px -10px rgba(0,0,0,0.35); }
#searchframe .icon { margin-right: 7px; top: 3px; }
#searchframe ul { margin: 10px 0 }
#searchclosebutton { display: block; width: 50px; height: 50px; line-height: 50px; background: #00C45E; text-align: center; position: absolute; top: 30px; right: 110px; }
#searchclosebutton:hover { background: #f00 }

#searchresults ul { margin: 15px 0; list-style: none }
#searchframe li.extended, #searchresults li.extended { clear: both; margin-bottom: 20px; }
#searchframe li.extended img, #searchresults li.extended img { display: block; float: left; width: 60px; height: 60px; border: 5px solid #eee; padding: 5px; margin: -3px 10px 10px 0 }
#searchframe li.extended span, #searchresults li.extended span { display: block; }
#searchframe li.extended.status4 img, #searchresults li.extended.status4 img { border-color: #00ff1d }
#searchframe li.extended.status6 img, #searchresults li.extended.status6 img { border-color: #ffae00 }

#box-postcode-lookup { max-width: 700px }

body.loginpage #loginimage { background: url('../images/foto-login.jpg') center center; background-size: cover; }
body.loginpage form { height: 100% }

#loginimage { height: 100%; }
#loginpanel { background: rgba(255,240,229,0.9); box-shadow: -3px 0px 20px 0px rgba(0,0,0,0.05); }
#loginpanel div { padding: 15px 90px; margin-top: 40% }
#loginpanel .button { width: 100% }
#loginpanel a { text-decoration: underline }
#loginpanel h4 {background: none}

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

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

#contents { padding: 30px 15px; }
#contents p.nav { font-size: 14px;color: #ABAEC1}
#contents p.nav a {color: #313131}
#contents p.nav a:hover {color: #555}

.button-bar { margin-bottom: 15px }
.button-bar .button { margin-right: 15px; }
.button-bar .button:last-child { margin-right: 0; }

.dashboard .equal-height .panel {height: 100%}
.dashboard .equal-height {margin-bottom: 30px}
.dashboard .panel .small-2 {text-align: center}
.dashboard .panel .small-10 {border-left: 1px solid #eee; padding-left: 30px;}

.dashboard .panel.topstat h1 { margin: 0; font-size: 32px }
.dashboard .panel.topstat img { max-height: 42px; margin-bottom: 10px; margin-right: 15px }
.dashboard .panel.topstat p { margin: 0 }

.dashboard .quotepanel { background: #ff6b00; padding: 30px; border: 0; text-align: center; font-family: 'Inter', sans-serif; color: #ffbb88 }
/*.dashboard .quotepanel .inner { transform: rotate(2deg) }*/
.dashboard .quotepanel h1, .dashboard .panel.werknemer h1 { color: #fff; font-family: 'Inter', sans-serif; margin: 0; font-weight: 400 }
.dashboard .quotepanel h1 strong, .dashboard .panel.werknemer strong { font-family: 'Inter', sans-serif; font-weight: 600; color: #fff }

.dashboard .panel.piechart { position: relative; text-align: center; padding: 15px 15px 0 15px }
.dashboard .panel.piechart svg { margin-bottom: 15px; width: 300px; height: 300px }
.dashboard .panel.piechart .inner { position: absolute; top: 70px; width: 100%; left: 0; }
.dashboard .panel.piechart .inner h5, .dashboard .panel .inner p { margin: 0; line-height: 1.25 }
.dashboard .panel.piechart .inner strong { font-size: 14px }
.dashboard .panel.piechart .ct-series-a .ct-slice-donut-solid { fill: #00C45E }
.dashboard .panel.piechart .ct-series-b .ct-slice-donut-solid { fill: #dbf4e4 }

.dashboard .panel.werknemer { background: #05b547; color: #cdf0da;  }

.panel.weblog a { color: #3e3e3e; font-family: 'Inter Tight', sans-serif; font-size: 18px; background: #eff6f6; border-radius: 15px; margin-bottom: 15px; padding: 15px; transition: 0.25s all; text-decoration: none }
.panel.weblog a:hover { background: #ff6b00; color: #fff }
.panel.weblog .imagecell { width: 130px }
.panel.weblog a .imageholder { width: 100px; height: 100px; overflow: hidden; border-radius: 50px; margin-right: 15px }
.panel.weblog a .imageholder img { height: 100px; max-width: 150px; }
.panel.weblog .intro { font-family: 'Inter', sans-serif; font-size: 16px }

.panel .ct-chart-bar .ct-series-a .ct-bar { stroke: #00C45E; stroke-width: 20px; }
.panel .ct-chart-bar .ct-series-b .ct-bar { stroke: #dbf4e4; stroke-width: 20px; }
.panel .ct-chart-bar .ct-series-c .ct-bar { stroke: #f4c63d; stroke-width: 20px; }
.panel .ct-chart-bar .ct-series-d .ct-bar { stroke: #d17905; stroke-width: 20px; }

.panel .ct-chart-bar.ct-horizontal-bars .ct-series-a .ct-bar:nth-child(2) { stroke: #dbf4e4; stroke-width: 20px; }
.panel .ct-chart-bar.ct-horizontal-bars .ct-series-a .ct-bar:nth-child(1) { stroke: #eaf5fe; stroke-width: 20px; }

.panel > h1, .panel > h2, .panel > h3, .panel > h4, .panel > h5:first-child {margin: 15px -15px 15px -15px; background: #F3F5F9; padding: 15px ; font-size: 16px}
.panel > h1:first-child, .panel > h2:first-child, .panel > h3:first-child, .panel > h4:first-child, .panel > h5:first-child {margin: -15px -15px 15px -15px;}


.cell > h2, .cell > h3, .cell > h4, .cell > h5:first-child {margin: -15px -15px 15px -15px; background: #F3F5F9; padding: 15px; font-size: 16px}

.ui-tabs.ui-widget.ui-widget-content { padding: 0; margin-bottom: 15px; border-radius: 2px; border: none; }
.ui-tabs .ui-tabs-nav { border: none; border-bottom: 1px solid #f1f1f1; margin: -1px 0 1px 0; padding: 0; background: #fff0e5; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 10px 20px; font-weight: 500; font-size: 15px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {background: #F3F5F9; border-color: #dce3f0}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: #fff; border-color: #fff;  }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #333 }
.ui-tabs .ui-tabs-panel { border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px; margin-top: -1px }

.stack .small { color: #999 }

tr.voorraad_oud {background: #ffdede}
/*tbody tr:nth-child(2n).voorraad_oud {background: #ead8d8}*/
tbody tr {border-bottom: 1px solid #E1E2E6}
tbody tr:nth-child(2n) {background: none; border-bottom: 1px solid #E1E2E6}
tbody tr:hover {background-color: #F3F5F9}
td.voorraadcell { position: relative; text-decoration: dotted underline #666; cursor: help }
td.voorraadcell .voorraadcell_popup { display: none; position: absolute; top: 50px; background: #fff; border: 1px solid #eee; padding: 15px; z-index: 9; font-size: 14px; width: 200px; box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1) }
td.voorraadcell:hover .voorraadcell_popup { display: block; }

#timeline { margin: 0; list-style: none }
#timeline .timeline_datum { display: inline-block; width: 100px; color: #aaa; vertical-align: top; font-weight: 500; font-size: 15px; padding: 5px 15px 0 0; line-height: 1.25; text-align: right }
#timeline .timeline_tijd { display: block; font-size: 13px; color: #ccc }
#timeline .timeline_details { display: inline-block; position: relative; border-left: 2px solid #fff0e5; padding: 5px 0 10px 15px; width: calc(100% - 110px); line-height: 1.25 }
#timeline .timeline_details::after { content: ""; width: 14px; height: 14px; background: #ff6c00; border: 2px solid #fff; border-radius: 2px; position: absolute; left: -8px; top: 8px; z-index: 2; }
#timeline .timeline_actie { display: block; color: #333; font-weight: 500; }
#timeline .timeline_user { display: block; font-size: 15px; font-weight: 500; color: #999 }
#timeline .timeline_user strong { font-weight: 500; color: #01aef3 }
#timeline li:last-child .timeline_details { padding-bottom: 0 }

.part-icon { font-size: 11px; font-weight: 600; border: 1px solid #00C45E; border-radius: 5px; color: #00C45E; padding: 5px }
.part-icon.missing { color: #f00; border-color: #f00 }

.fancybox-slide--iframe .fancybox-content { max-width: 1200px }

#password-message {background: #f00;color: #fff;padding: 5px 15px;font-size: 14px;}

#circularMenuFixed {position: fixed; bottom: 15px; right: 15px}
#circularMenuFixed a {display: block; width: 48px; height: 48px; border-radius: 50%; background: #00C45E; text-align: center; line-height: 48px; cursor: pointer; z-index: 99;}
#circularMenuFixed a:hover{ background-color: #00B456}
#circularMenuFixed a img {width: 16px;}
#circularMenuFixed #circularMenuFixedItems {display: none;}
#circularMenuFixed #circularMenuFixedItems a {position: absolute}
#circularMenuFixed #circularMenuFixedItems a.verkoop {top: -70px}
#circularMenuFixed #circularMenuFixedItems a.reparatie {top: -52px; left: -52px}
#circularMenuFixed #circularMenuFixedItems a.bezoeker {left: -70px; top: 0}
#circularMenuFixed.toggle #circularMenuFixedToggle img {transform: rotate(-45deg);}
#circularMenuFixed.toggle #circularMenuFixedItems {display: block}

ul.shortcuts {max-width: 500px}
ul.shortcuts li {display: inline-block; margin: 0 5px 10px 0; padding: 5px 8px; border: 1px solid #e3e3e3; background: #fafafa; border-radius: 3px; font-size: 14px;}

#smoelenboek .cell  {padding: 15px; }
#smoelenboek .cell img { box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px;}

/* Small and medium */
@media screen and (max-width: 768px) {
    .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; }

    div.dataTables_wrapper .dataTables_filter input { float: none; max-width: 100% }
    div.dataTables_wrapper .dataTables_filter select { max-width: 100%; margin: 0 0 5px 0 }
    div.dataTables_wrapper .dataTables_filter label { float: none; width: 100%; text-align: left }
    div.dataTables_wrapper .dataTables_filter label input { float: right }
    div.dataTables_wrapper table { font-size: 14px }

    #MainContentPlaceHolder_PanelOmzetDag table th, #MainContentPlaceHolder_PanelOmzetDag table td { width: 150px; padding: 10px !important; display: inline-block;}

    .menu-button { display: inline-block }
    nav { max-width: 110px; display: none; opacity: 0; transition: 0.25s all; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 8px }
    
    body.nav-active nav { display: block; opacity: 1 }
    nav #sidenav ul li .icon-orders { left: 60px }

    nav #sidenav ul li a.active::after {display: none}

    header { line-height: 60px; }
    header .header-icons { display: none }
    header .logo img { max-width: 65% }

    header #frmSearch { display: none; position: absolute; top: 60px; left: 0; right: 0; max-width: 100%; padding: 5px 15px 15px 15px; background: #fff; }
    header #frmSearch.visible { display: block; }
    header #frmSearch #ButtonZoeken, #subheader #frmSearch #ButtonZoeken:hover { top: 3px; right: 15px; }
    header .search-toggle { display: inline-block }
    header .search-toggle img { max-width: 20px }

    #searchframe { top: 60px; left: 0; width: 100% }
    #searchclosebutton { right: 10px }

    /* 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 }

    #loginimage { display: none }
    #loginpanel { position: absolute; top: 0; height: 100% }
    #loginpanel div { margin-top: 0; padding: 90px 45px }

    
    .panel.weblog { padding-bottom: 1px }
    .dashboard .quotepanel { padding: 30px 30px 15px 30px; }

    #circularMenuFixed {display: none}
    nav #sidenav ul#menu {padding-bottom: 60px;}
}

@media screen and (min-width: 1600px) {
    /*header, article, #contents { padding-left: 90px; padding-right: 90px}
    #topButtonBar { padding-left: 105px; padding-right: 105px; margin: -30px -105px 15px -105px;}*/
}