:root {
    --primaryColor: #0091d7;
    --primaryColorLighter: #008fd780;
    --secondaryColor: #ccc;
    --defaultBgColor: #fff;
    --primaryTextColor: #fff;
    --secondaryTextColor: #333;
    --dangerColor: #933;
    --dangerTextColor: #fff;
    --menuLinkColor: #008;
    --menuLinkHoverColor: #fff;
    --menuLinkHoverBgColor: #2bf;
    --menuLinkActiveBgColor: #004EA3;
    --shadowColor: #666;
    --successColor: #090;
    --errorColor: #933;
}

body {background-color: #e6e6e6; background-position: left top; margin: 0 auto; padding: 0; overflow-y:scroll;}
body.popup{background-color:var(--defaultBgColor);padding:1em;}

* {
    font-family: Roboto, Oxygen, Cantarell, 'Open Sans', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size:14px;
}

:not(.anylinkcss,.sidenav) {
    transition-duration: 150ms;
    transition-property: all;
}

.homelogo{opacity:.2}
.homelogo:hover{opacity:.5}
.homelogo.active{opacity:1}
.homelogo>img {vertical-align:middle;width:200px}

h2{font-size:16px; color:#6a6a6a; line-height:18px; margin-bottom:6px;}
a {text-decoration: none;color: #111; cursor: pointer}
a.link {text-decoration: none;color: var(--primaryColor)}
a:hover {color: var(--menuLinkColor); text-decoration: none;}
a.sidenav {padding-right: 2px; padding-left: 2px; font-size: 12px; color: #777; text-decoration: none;}

.Text {text-align: left; color: #333;}
.tekst{text-align: left; color: #333;}
.lijst{background-color: #c3d0d8; font-weight: normal; font-size: 9pt; color: #000; text-align: left; margin: 3px 3px; padding-left: 9px; border-color:#c0c0c0; border-style: none;}
.lijstlicht{background-color: #fff; font-weight: normal; font-size: 9pt; color: #000;  text-align: left; margin: 3px 3px; padding-left: 9px; border-style: none;}
.formlicht{background-color: #eee; font-weight: normal; font-size: 9pt; color: #000; text-align: left; margin: 3px 3px; padding-left: 5px;}
.formdonker{background-color: #eee; font-weight: normal; font-size: 9pt; color: #000;   text-align: left; margin: 3px 3px; padding-left: 5px;}
.hidden-content {padding: 0 18px; display: none; overflow: hidden; background-color: #eee;}
.break-word{word-break: break-word}
.valign{vertical-align:middle;}

input[size="2"]{width:47px;}
input[size="3"]{width:54px;}
input[size="4"]{width:61px;}
input[size="5"]{width:68px;}
input[size="6"]{width:75px;}
input[size="7"]{width:82px;}
input[size="8"]{width:89px;}
input[size="9"]{width:96px;}
input[size="10"]{width:103px;}

.pa-0{padding: 0 !important}
.pa-6px{padding:6px !important}
.pa-12px{padding:12px !important}

.pl-0{padding-left: 0 !important}
.pl-1{padding-left: 0.5rem}
.pl-2{padding-left: 1rem}
.pl-3{padding-left: 1.5rem}
.pl-4{padding-left: 2rem}
.pt-0{padding-top: 0 !important}
.pt-1{padding-top: 0.5rem}
.pt-2{padding-top: 1rem}
.pt-3{padding-top: 1.5rem}
.pt-4{padding-top: 2rem}
.pr-0{padding-right: 0 !important}
.pr-1{padding-right: 0.5rem}
.pr-2{padding-right: 1rem}
.pr-3{padding-right: 1.5rem}
.pr-4{padding-right: 2rem}
.pb-0{padding-bottom: 0 !important}
.pb-1{padding-bottom: 0.5rem}
.pb-2{padding-bottom: 1rem}
.pb-3{padding-bottom: 1.5rem}
.pb-4{padding-bottom: 2rem}

.ml-0{margin-left: 0}
.ml-1{margin-left: 0.5rem}
.ml-2{margin-left: 1rem}
.ml-3{margin-left: 1.5rem}
.ml-4{margin-left: 2rem}
.mt-0{margin-top: 0}
.mt-1{margin-top: 0.5rem}
.mt-2{margin-top: 1rem}
.mt-3{margin-top: 1.5rem}
.mt-4{margin-top: 2rem}
.mr-0{margin-right: 0}
.mr-1{margin-right: 0.5rem}
.mr-2{margin-right: 1rem}
.mr-3{margin-right: 1.5rem}
.mr-4{margin-right: 2rem}
.mb-0{margin-bottom: 0}
.mb-1{margin-bottom: 0.5rem}
.mb-2{margin-bottom: 1rem}
.mb-3{margin-bottom: 1.5rem}
.mb-4{margin-bottom: 2rem}
.ma-auto{margin: auto !important}

.w50{width:50% !important;}
.w100{width:100% !important;}
.w30px{width:30px;}
.w40px{width:40px;}
.w50px{width:50px;}
.w60px{width:60px;}
.w70px{width:70px;}
.w80px{width:80px;}
.w90px{width:90px;}
.w100px{width:100px;}
.w120px{width:120px;}
.w130px{width:130px;}
.w140px{width:140px;}
.w150px{width:150px;}
.w160px{width:160px;}
.w170px{width:170px;}
.w180px{width:180px;}
.w190px{width:190px;}
.w200px{width:200px !important;}
.w300px{width:300px !important;}
.w400px{width:400px !important;}
.w450px{width:450px !important;}
.w500px{width:500px !important;}
.w600px{width:600px !important;}
.w800px{width:800px !important;}
.hidden{display:none;}
.h550px{height:550px;}
.passtrengthMeter.hidden{display:inherit !important;}

.t4px{top:4px;}
.r4px{right:4px;}

.float-right {float:right;}
.float-left {float:left;}

.no-pointer-events{pointer-events:none;}

.pos-rel{position:relative;}
.pos-abs{position:absolute;}

.text-color-primary{color: var(--primaryColor) !important;}
.text-color-danger{color: var(--dangerColor) !important;}
.text-color-white{color: white !important;}
.text-align-center{text-align: center;}
.text-align-right {text-align: right;}
.text-align-left {text-align: left;}

.bg-red{background: red !important;}
.bg-salmon{background-color: rgba(250, 128, 114, .4) !important;}

*:has(>.anylinkcss){position:relative;}
.anylinkcss{position:absolute; visibility: hidden; font:normal 11px Verdana; text-align: left; line-height: 15px; z-index: 100; padding: 7px 5px; background-color: var(--defaultBgColor); width: 205px; border: 1px solid var(--secondaryColor); border-radius:7px; -moz-border-radius:7px; -khtml-border-radius:7px; -webkit-border-radius:7px; -moz-box-shadow: 7px 7px 7px var(--shadowColor); -webkit-box-shadow: 7px 7px 7px var(--shadowColor); box-shadow: 7px 7px 7px var(--shadowColor); }
.anylinkcss a{width: 100%; display: block; text-indent: 3px; padding: 1px 0; text-decoration: none; text-indent: 5px; color: var(--menuLinkColor);}
.anylinkcss a.active{background-color: var(--menuLinkActiveBgColor); color: var(--menuLinkHoverColor);}
.anylinkcss a:hover{background-color: var(--menuLinkHoverBgColor) !important; color: var(--menuLinkHoverColor) !important;}

.Box {padding:12px; text-align: left; color: #333; font-size:14px; border: 1px solid #ddd; margin-top:5px; border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px;}
.BoxActive {background-color: #eee; font-size: 14px; text-align: left; color: #333; border: 1px solid #ddd; margin-top:5px; border-radius:10px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px;}
.BoxShadow, .BoxShadowNoHover {text-align: left; color: #333; border: 1px solid #ccc; margin-top:5px; border-radius:8px; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; -moz-box-shadow: 7px 7px 7px #ccc; -webkit-box-shadow: 7px 7px 7px #ccc; box-shadow: 7px 7px 7px #ccc;}
.BoxShadow:hover {border: 1px solid #999;}
.BoxHeader{font-stretch: condensed; margin: 0;}
.BoxAmount{font-size: 24px; margin-top: 18px; text-align: center;}
.TextAlert{color: red;}
.TextSuccess{color: green;}
.TdAlignTop{vertical-align: top;}

.ajax-saved-msg{position:absolute;left:0;right:0;top:0;bottom:0;background:#fff;color:#339933;display: flex;align-items:center;justify-content:center;text-align:center;line-height:28px;font-weight:bold;}
.orderBox{border: 1px solid #ddd; margin-top:5px; border-radius:6px; padding:.5em;}
.infoRow{display:flex; width:920px; padding-bottom:1em;}
.orderBox.w350{width:350px;}
.infoBox h4{margin-top:.5em;}
.whalf{width:48%;margin-right:2%; box-sizing: border-box;}
.whalf:last-child{margin-right:0;}

.hovermenu{position:absolute; font-family: Calibri,Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; line-height: 18px; z-index: 80; padding: 7px 5px; background-color: var(--defaultBgColor); margin-top:5px;  width: 205px; border: 1px solid var(--secondaryColor); border-radius:7px; -moz-border-radius:7px; -khtml-border-radius:7px; -webkit-border-radius:7px;}
.hovermenu a{width: 100%; display: block; text-indent: 3px; padding: 1px 0; text-decoration: none; font-weight: bold; text-indent: 5px; color: #000080;}
.hovermenu a:hover{background-color: var(--menuLinkHoverBgColor); color: var(--menuLinkHoverColor);}

ul.tabs{padding: 5px 0; padding-left:1em; list-style-type: none; text-align: left; border-bottom:1px solid #cdcdcd;}
ul.tabs > li{display:inline; margin:0; position:relative; top:-2px; height:30px; padding:7px; margin-right:3px; color:#808080; background-color:#eaeaea; border:1px solid #cdcdcd; border-radius:7px 7px 0 0;}
ul.tabs > li.active{color:#333; background-color:#fff; border: 1px solid #cdcdcd; border-bottom-color: white; font-weight:bold;}
ul.tabs > li:not(.active):hover{background-color:#f3f3f3; cursor:pointer;}
ul.tabs > li.hidden{display: none}
.tab-container{display:none;}

.paginate-wrapper{margin:1em 0;}
.paginate {border: 1px solid #0080c0; padding: 2px 6px 2px 6px; font-size: 1em; border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
a.paginate {border: 1px solid #0080c0; padding: 2px 6px 2px 6px; text-decoration: none; color: #009; border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
a.paginate:hover {background-color: #0080c0; color: #FFF; text-decoration: none; border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
a.current {border: 1px solid #0080c0; font-size: 1em; font-weight:bold; padding: 2px 6px 2px 6px; cursor: default; background:#0080c0; color: #FFF; text-decoration: none; border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
span.inactive {border: 1px solid #999; font-size: 1em; padding: 2px 6px 2px 6px; color: #999; cursor: default; border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
.paginate, a.current, span.inactive{font-size:12px;}

.main-container{background:#fff;border: 1px solid #808080;width:1300px;margin:0 auto;}
.menu-container{height:20px;border-top: 2px solid #808080;}
.page-container{background:#fff;padding: 1em 1.5em 1em;text-align:left;font-family:arial;font-size:12px;}
.min-container{width: 800px !important;}

textarea.wysiwyg{width:100%; }
.mceLayout{margin-bottom:1rem !important;}
.wysiwygSwitch{list-style:none;padding:0;margin:0;width:100%;font-size:1.1em;}
.wysiwygSwitch:after{content:"";display:block;clear:both;}
.wysiwygSwitch a{margin-top:.5em;float:left;padding:.4em .9em;color:#999;border: 1px solid transparent;border-radius: .4em .4em 0 0; text-decoration:none; font-size:12px;}
.wysiwygSwitch.right a{float:right}
.wysiwygSwitch a:hover{text-decoration:none;color:#005580;background:#eee}
.wysiwygSwitch a.active{color:#333; background:#f9f9f9;border:1px solid #dddddd;border-bottom:0}
.wysiwygSwitch.bottom a{margin:0 0 .5em;border-radius: 0 0 .4em .4em;}
.wysiwygSwitch.bottom a.active{border:1px solid #dddddd;border-top:0}

.valuesForm td{padding-top:.75em !important; vertical-align:middle;}
input + .lock{top:16px; right:16px; transition-property:none;}
input + .lock.fa-lock{right:20px; transition-property:none;}
input.noborder{border-color:transparent;}
input.noborder:focus{outline:0;}
select:disabled, input[type="checkbox"]:disabled{opacity:1; border-color:rgba(118, 118, 118, 0.8); color:#666;}
input[type="submit"]:disabled{background-color:#eee; color:#ccc !important;}
input[type="checkbox"]:disabled{background-color:#0f0;}
input[type="radio"]{margin: 0;padding: 0}
input[type="checkbox"], input[type="radio"]{vertical-align:middle;}
label{vertical-align:middle;}
select.error,
input.error{border:2px solid var(--errorColor) !important;}
p.error{font-size:.8em;font-weight:bold;color:var(--errorColor);}
tr[data-href]{cursor:pointer;}
td.clickable.hovered{cursor:pointer;}
.bold{font-weight:bold !important;}
.flex-wrapper{display: flex;}
.flex-grow{flex-grow:1}
.nowrap{white-space:nowrap;}
.nodecoration, .nodecoration:hover{text-decoration:none;border-bottom:0 !important;}
.icon{vertical-align:middle;margin-top:-2px;}
.copyright{color:#999;font-size:11px;text-align:center;padding:.5em 0;clear:both;}
.inline-block{display:inline-block;}
.clear{clear:both;}
.relative{position:relative;}
.hintIcon{margin-left: 1em;}
.hintIcon i{font-size:18px;}
.langSwitcher{display:inline-block; margin-left: 1em;}
.lang.icon{display:inline-block; margin-left:4px; border:2px solid #fff; padding:1px; opacity: .3; box-shadow: 0px 0px 1px 0px #888; cursor: pointer;}
.lang.icon > img{display:inline-block; height: 24px;}
.lang.icon.active{opacity:1; border:2px solid #696;}
.lang.input{display:none;}
span.red, small.red, p.red{color:#ff0000;}
i.yellow{color:#fffd38;}
i.orange{color:orange;}
i.green{color:green;}
i.red{color:red;}
i.blue{color:#4DA8DA;}
td.yellow{background:#fffd38;}


/* Fix for <details> in IE */
details summary{cursor: pointer; display:block; padding: 1em; margin-left:-1em;}
details summary h3{display:inline-block; margin:0;}
details > summary:after {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-left: 0.4em; font-size: 0.9em;}
details[open] > summary:after {display: inline-block; content: "\25bc"; padding: 0; margin-left: 0.35em;}

details.details_shim_closed,
details.details_shim_open {display: block;}
details.details_shim_closed > * {display: none;}
details.details_shim_closed > summary,
details.details_shim_open   > summary {display: block;}
details.details_shim_closed > summary:before {display: inline-block; content: "\25b6"; padding: 0 0.1em; margin-right: 0.4em; font-size: 0.9em;}
details.details_shim_open   > summary:before {display: inline-block; content: "\25bc"; padding: 0; margin-right: 0.35em;}

details.Box{margin-bottom:1em;}
details.Box .inner-container{margin:10px;}
details.Box summary, .customer-productflows-container details summary{margin-left:0px;outline: none;cursor:pointer;font-weight:bold;padding:.2em;}
details.Box details summary span{border-bottom:1px dotted #ccc;font-weight:normal;}
input.yellow{background:#fffd38;border:1px solid #666;padding-left:1px;padding-right:1px;}
select.yellow{background:#fffd38;}
input.yellow[disabled], select.yellow[disabled]{background:#eee;}
input.right, p.right{text-align:right;}
.date-tccontainer{width:55px;display:inline-block;padding:1px .5em 2px;border:1px solid transparent;margin-top:0px;font-size:12px;white-space:nowrap;}
.yellow .date-tccontainer{background:#fffd38;border:1px solid #666;}

.batch-saved-msg{position:absolute;left:0;right:0;top:0;bottom:0;background:#fff;color:#336633;font-size:11px; padding:5px 6px; display:flex; align-items: center;}
.batch-saved-msg img{vertical-align:middle; margin-left:2px; margin-right:2px; opacity:.9;}
.center .batch-saved-msg{text-align:center; justify-content: center;}
.saved-msg{position:absolute;left:0;right:0;top:0;bottom:0;background:#fff;color:#339933;text-align:center;line-height:24px;font-size:11px;}
.save-overlay{position:absolute;left:0;right:0;top:0;bottom:0;background:#fff;opacity:.5}

.tariff-save{margin:1em 0;}
.tariff-save input{font-size:1.1em;}
.tariff-save .result{padding-left:1em;color:#090;}
.tariff-metals td{vertical-align:middle;}

.tekst label{padding:.2em 0;display:inline-block;}

.invoiceButtonContainer{vertical-align:top;padding-top:20px;}
.invoiceButtonContainer .invoiceBtn{width:150px;height:40px;cursor:pointer;}
.invoiceBtn.redBtn{background:#ff0000;color:#fff;font-weight:bold;}

h1.title, h2.title, h3.title, h4.title{color:var(--primaryColor);}
h1.title{font-size:1.3em;font-weight:bold;margin-bottom:1em;}
h1.title a{font-size:1em;color:var(--primaryColor);border-bottom:1px dotted var(--primaryColor);text-decoration:none;}
h2.title{font-size:1.2em;margin-top:1em;}

table {position: relative; /* border-collapse: collapse; */}
thead {position: sticky; top: 0; z-index: 1;}
.striped thead{box-shadow: 0 1px 1px -1px var(--shadowColor);}

table.striped{font-weight: normal;color:#000;border-style: none; width: 100%}
table.sm-padding td, table.sm-padding th{padding:.3em .5em;}
table.striped.sm-font td, table.striped.sm-font th{font-size: 9.5pt;}
table.striped tbody tr:nth-child(even) {background:#f2f2f2;}
table.striped tbody tr:nth-child(odd) {background:#fff;}
table.striped tbody tr:hover {background: #ccc;}
table tr.active {background:#b4dbe7 !important;cursor:pointer;}
table.striped tr.inactive {color:#999;}
table.striped tr.active {background:#b4dbe7;cursor:pointer;}
table tr.yellow:not(:hover):not(.active) {background:#ffffa8 !important;}
table tr.active {background:#b4dbe7 !important;cursor:pointer;}
table.striped td, table.striped th{padding:4px 6px;}
table tr.selected {background:#b4dbe7 !important;}
table.striped div{margin-top: 2px; padding: 4px}
table.striped tr td div:nth-child(even) {background:#f2f2f2;}
table.striped tr td div:nth-child(odd) {background:#fff;}
table.striped tr.orange:not(.active) td{background:orange;}
table.striped tr.darkred:not(.active) td{background:#ff6666;}
table.striped tr.red:not(.active) td{background:#ffe0e0;}
table.striped tr.green:not(.active) td{background:#97df8a;}
table.striped > tbody > tr > td.red{background:#ff0000; color:#fff;}
thead.head th,
thead.head td{font-weight: bold; font-size: 10pt; background: #a4d1ff; color: #000; text-align: left; margin: 3px 3px;}
thead.head.invoice td{font-weight: bold; font-size: 10pt; background: #fff; border-bottom:1px solid #808080;}
thead.head td a, thead.head th a{font-size: 10pt; color: #000; border-bottom:1px dotted #000;text-decoration:none;}
thead.head td a:hover, thead.head th a:hover{border-bottom:0;}
thead.head.big th, thead.head.big td{font-size:13pt;}
table th.left, table td.left{text-align:left;}
table th.center, table td.center{text-align:center;}
table th.right, table td.right{text-align:right;}
table.striped tfoot.separate{background:#fff;;}
table.striped tfoot.separate th{border:1px solid transparent;}
table.striped tfoot.separate td{border:1px solid #999 !important;background:#eee;}
table.striped tfoot tr td{background:#ccc;}
table.striped tfoot.white  tr td{background:#f9f9f9;}
table.striped tfoot.blue  tr td{background:#a4d1ff;}
table.borders{border-collapse:collapse;background:#fff;}
table.borders thead{background:#fff !important;}
table.borders td, table.borders th{border:1px solid #999;}
table.noborders{border-collapse:collapse;}
table.noborders td, table.noborders th{border:0;}
table td.actions {display:flex; align-items:center; align-content:center; gap:8px; flex-direction:row; justify-content:space-between;}
tfoot.light tr:first-child td, tfoot.light tr:first-child th{padding-top:2em;}
tfoot.light td, tfoot.light th{background:inherit !important;padding:.5em .5em;}
table.highlight tr:hover{background:#eee;}
table.sm-padding td, table.sm-padding th{padding:.3em .5em;}
table.noborder{border:none; border-collapse:collapse;}
td.hiddenLinks a{visibility:hidden;vertical-align:middle;}
tr:hover td.hiddenLinks a{visibility:visible;}

table.sortableTable th[data-sortby]{cursor:pointer;}
table.sortableTable th.sorted[data-order]:after{display:inline-block;margin-left:.5em;}
table.sortableTable th.sorted[data-order="asc"]:after{content:"\2191";}
table.sortableTable th.sorted[data-order="desc"]:after{content:"\2193";}
table.striped tr td .phone{color:#666; background:transparent !important; padding:0; margin:0; display:block;}

.info.ip{display:block;width:100px; overflow:hidden; position:relative; cursor:default; white-space:nowrap;}
.info.ip span{font-family:inherit; font-size:13px;}
.info.ip:hover{overflow:inherit;padding:0;margin:0;}
.info.ip:hover span{padding:0 .2em; margin:0; left:0; background:#eee; opacity:.9; border-radius:.2em; transition-property: none;}


/* wrapper for table with vertical head cells (product_flows_per_groups) */
.table-wrapper{position:relative;}
.table-wrapper-inner{overflow-x:auto;overflow-y:visible;width:1030px;margin-left:228px;}
.table-wrapper table{margin:0;padding:0;border-collapse:collapse;background:#fff;overflow:hidden;}
.table-wrapper tbody, .table-wrapper thead{margin:0;padding:0;}
.table-wrapper th,
.table-wrapper td{border:1px solid #999;}
.table-wrapper thead.head th{border:1px solid #999;background:rgba(164, 209, 255, .5);}
.table-wrapper thead th.vertical{height:155px;font-size:12px;font-weight:normal;position:relative;line-height:1;vertical-align:middle;}
.table-wrapper thead th.vertical > div {transform: rotate(-90deg);width:140px;padding:0;z-index:5;position:absolute;top:0;bottom:3px;left:14px;right:14px;}
/* .table-wrapper.ie thead th.vertical{} */
.table-wrapper.ie thead th.vertical > div{position:absolute;top:75px;bottom:0;left:-60px;right:auto;width:140px;text-align:left;vertical-align:middle}
.table-wrapper thead th.vertical > div > span {padding: 0px 0px;}
.table-wrapper thead th:first-child{visibility:hidden;}
.table-wrapper th:first-child {position:absolute;left:5px;width:220px;text-align:right;border:0;font-weight:normal;}
.table-wrapper table.striped tbody tr:nth-child(even) th:first-child {background:#f2f2f2;}
.table-wrapper table.striped tbody tr:nth-child(odd) th:first-child {background:#fff;}
.table-wrapper tbody th div{padding:8px 12px;}

form.form {min-width:800px; width:auto; display:inline-block;}
table.form{border-collapse:collapse;width: 100%}
table.form tr{ font-size:9pt;vertical-align: top;margin-top: 6px}
table.form tr.required-row, table.form.required-row > tbody > tr, table.info tr.required-row, table.info.required-row > tbody > tr  {background: #ffd}
table.form tr.required-row:hover, table.form.required-row > tbody > tr:hover, table.info tr.required-row:hover, table.info.required-row > tbody > tr:hover{background:#eed;}

table.form > tbody > tr > td{padding:.5em .5em;}
table.form > tbody > tr > td:first-child{padding-top: .8em; padding-right:2em;}
table.form > tbody > tr > td > span {display: inline-block; margin: .33em; padding: .25em; margin-left:0; padding-left:0;}
table.form input[type="text"]:not([size]){width:400px;}
table.form textarea{width:100%;}
table.form ul{list-style-type: none; margin-left: -44px;}
table.form ul.flex-wrap{display: flex; flex-flow: wrap}

table.info{border-collapse:collapse;}
table.info tr{font-size:9pt;}
table.info > tbody > tr > td{padding:.4em .5em;}
table.info > tbody > tr > td:first-child{padding-right:2em;}

a.color{color:var(--primaryColor);}
a.color:hover{color: #ff8000;}
.note{color:#999;padding-left: 12px}
.storageMemo{width:98%; height: auto; overflow: auto; resize: vertical}

.btn{display:inline-block; width:auto; height:32px; border:1px solid #d1d1d1; border-radius:4px; box-sizing:border-box; padding:6px 12px; margin-left:.25em; margin-right:.25em;  vertical-align:middle; line-height:inherit; cursor:pointer;}
.btn:hover{box-shadow: 2px 2px 4px 0px #999;}
.btn:hover,
.btn:focus{color:#333; background-color: #eee; border-color:#888; outline:0; text-decoration:none;}
.btn.primary, .ui-button.primary{color:var(--primaryTextColor); background-color:var(--primaryColor); border-color:var(--primaryColor);}
.btn.secondary, .ui-button.secondary{color:var(--secondaryTextColor); background:var(--secondaryColor)}
.btn.delete, .ui-button.delete{color:var(--dangerTextColor); background-color:var(--dangerColor); border-color:var(--dangerColor);}
.btn img{vertical-align:middle; padding-right:.5em; margin-top:-2px}
.btn-tabs {position: relative; bottom: -1px; border-radius: 7px 7px 0 0; background-color: #808080; border-bottom: none;}
.btn a{color: #808080; text-decoration: none}
.btn-tabs a{color: #fff;}
.btn-active {background-color: white;}
.btn-active a {color: #808080;}

.btn-big{height:38px; padding:12px 4em; line-height:13px;}
.btn-small {display:inline-block;cursor:pointer;}
.btn-small:hover {outline:1px solid #ccc;border-radius:4px;}

.d-none {display:none}
.d-block {display:block}

#popup_container {font-size: 12px;min-width: 200px;max-width: 600px;background: #fff;border: solid 5px #999;color: #000;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {display:none;font-size: 14px;font-weight: bold;text-align: center;line-height: 1.75em;color: #666;background: #CCC url(../images/alerts/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding: .4em;margin: 0em;}
#popup_content {background: 16px 16px no-repeat url(../images/alerts/info.gif);padding: 1em 1.75em;margin: 0em;}
#popup_content.alert {background-image: url(../images/alerts/info.gif);}
#popup_content.confirm {background-image: url(../images/alerts/important.gif);}
#popup_content.prompt {background-image: url(../images/alerts/help.gif);}
#popup_content.popup select{margin-bottom:1px}
#popup_message {margin:0 0 0 43px;text-align:center;}
#popup_panel {text-align: center;margin: 1em 0em 0em 43px;white-space:nowrap}
#popup_prompt {margin: .5em 0em;}

.popupBox{font-size:.8em;min-width:250px;}
.popupBox h1{font-weight:bold;font-size:1em;margin-bottom:1em;}

.radio-wrapper {display: flex;align-items: center;}

.ui-autocomplete *{font-size:14px !important;font-weight:normal !important;}
/* .ui-autocomplete .ui-menu-item{} */
.ui-autocomplete .ui-menu-item{font-size:14px;}
.ui-autocomplete .ui-menu-item .ui-corner-all{margin:0;border:0;background:#fff;color:#000;padding:0 .5em;cursor:pointer;}
.ui-autocomplete .ui-menu-item .ui-corner-all:hover{font-weight:normal;background:#eee;}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{font-size:13px;}
.ui-widget-content .ui-priority-primary {color:#fff; background-color:var(--primaryColor); border-color:var(--primaryColor);}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{width:1.5em; height:1.5em;}
.ui-datepicker .ui-datepicker-title select{font-size:13px;}

hr {border: none; height: 1px; color: #999; background-color: #999;}

.loginForm .alert{text-align:center; background:none; border:0; margin:0;}
.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;}
.alert-heading{color:inherit}
.alert-link{font-weight:700}
.alert-dismissible{padding-right:4rem}
.alert-dismissible .close{position:absolute;top:0;right:0;z-index:2;padding:.75rem 1.25rem;color:inherit}
.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}
.alert-primary hr{border-top-color:#9fcdff}
.alert-primary .alert-link{color:#002752}
.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}
.alert-secondary hr{border-top-color:#c8cbcf}
.alert-secondary .alert-link{color:#202326}
.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}
.alert-success hr{border-top-color:#b1dfbb}
.alert-success .alert-link{color:#0b2e13}
.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}
.alert-info hr{border-top-color:#abdde5}
.alert-info .alert-link{color:#062c33}
.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}
.alert-warning hr{border-top-color:#ffe8a1}
.alert-warning .alert-link{color:#533f03}
.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}
.alert-danger hr{border-top-color:#f1b0b7}
.alert-danger .alert-link{color:#491217}
.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}
.alert-light hr{border-top-color:#ececf6}
.alert-light .alert-link{color:#686868}
.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}
.alert-dark hr{border-top-color:#b9bbbe}
.alert-dark .alert-link{color:#040505}
.alert-success{color:#090;}
.alert-danger{color:#f00;}
.text-center{text-align:center}
.text-right{text-align:right}
#marquee{position: absolute;}
label.disabled{color:#bbb;}

.memos{border:1px solid #ccc;background:#fff;height:250px;overflow-y:auto;padding:1em;box-shadow:1px 1px 1px #ccc;border-radius:6px;}
.memos table{font-size:1em;width:100%;}
.memos table tr.odd{background:#eee;}
.memos table td{padding:4px 8px;vertical-align:top;}
.memos table td.name{white-space:nowrap; padding-top:5px;}
.memos table td.date{white-space:nowrap;color:#999;font-size:.9em; padding-top:6px;}
.memos table td.text{width:100%;}

.metalRates{float:right;margin-right:3em;font-size:12px;}
.metalRates td,.metalRates th{padding:0 .5em;}
.metalRates td b{color:#000;}

.paymentDetailsOpener{border-bottom:1px dotted #333; cursor:pointer;}
.paymentDetails{padding-top:4px;}
.inline-payment-form{margin:1em 0; padding: 1em; border:1px solid #ccc; width:800px;}

#ui-datepicker-div{display:none;}

.printRangeForm input{padding:.5em;}
.printRangeForm button{padding:.5em 1em;}

.pageImages{margin-bottom:.5em;}
.pageImages .thumb{display:inline-block; margin:.25em .25em; vertical-align:top; padding:6 6px; border:1px solid #fff;border-radius:.6em;position:relative;}
.pageImages .thumb img{opacity:.9; background:#fff;}
.pageImages .thumb{border-color:#ddd; background:#fff;}
.pageImages .thumb:hover img{opacity:1}
.pageImages .thumb:hover .delete{display:block}
.pageImages .thumb .delete{display:none; width:13px; height:13px; background:url(../images/delete.gif) no-repeat; position:absolute; right:4px; top:6px}

.addScaleRow,
.removeScaleRow{cursor:pointer;}

.ui-sortable-helper{width:100%;display:table}
.ui-sortable-helper td{background:var(--primaryColor) !important; color:#fff !important; border-color:#fff !important;}
.pointer{cursor:pointer;}
.help{cursor:help;}
.checkboxList{display:inline-block; padding:.5em; width:auto; max-height:240px; overflow-y:auto; border:1px solid #999;}
.infoBox, .actionBox{line-height:1.3em;}
.actionBox a{display:block; padding:1px 8px; color:#009;}
.actionBox a:hover{background:#eee;}
ul.tabs li.notempty,
ul.tabs li.notempty.active{background:#ddffdd;}
ul.tabs li.notempty:hover{background:#ddffdd;}

.addressTable{font-size:14px}
.addressTable th{text-align:left; font-weight:normal; padding-right:2em;}
#shippingCountries{border-collapse:collapse;}
#shippingCountries tbody tr:hover td{--background:#eee;} 


#conditionsContainer > div,
#itemConditionsContainer > div{margin-bottom:.5em;}
hr.line{height:1px;border:0;background:#ccc; margin:1.5em 0;display:block;}
hr.line-dotted{height:0;border-top:1px dotted #ccc;}
label.label-info{margin-top:.25em; display:inline-block; color:#666;}
label.shippingMethod .edit{cursor:pointer; display: none;}
label.shippingMethod input[name="shippingMethod"]:checked ~ .edit{display:inline-block;}

.shippingRegion{border-bottom:1px solid #ccc; margin-bottom:1.5em; position:relative;}
.shippingRegion .removeRegionBtn{position:absolute; right:0; top: 0; color:red;}
.shippingRegion .daysToDeliver{vertical-align:top; display:inline-block; margin:0 1.5em 0 0;}
.shippingRegion .customerPlanning{vertical-align:top; display:inline-block; margin-top:.4em;}
.shippingRegion .regionSettings{display:block; vertical-align:top; padding-bottom:1.5em;}
.shippingRegion .regionSettings .postcodes{display:inline-block; vertical-align:top; margin-right:3em;}
.shippingRegion .regionSettings .postcodes textarea{width:220px; resize: vertical;}
.shippingRegion .regionSettings .daySettings{display:inline-block; vertical-align:top;}
.shippingRegion .regionSettings .daySettings .customWeekdays{margin-bottom:.5em;}
.addRegionBtn{margin-top:.25em; display:inline-block;}
.addRegionBtn.hidden{display:none;}

.fixed_header {width: 400px; table-layout: fixed; border-collapse: collapse;}
.fixed_header tbody {display: block; width: 100%; overflow: auto; height: 100px;}
.fixed_header thead tr {display: block;}
.fixed_header thead {background: black; color: #fff;}
.fixed_header th,
.fixed_header td {padding: 5px; text-align: left;}

.productSettingsBlock{float:left;width:60%;}
.productSettingsBlock .filters{margin:5px 0;}
.productlistContainer{overflow-y:scroll;border:1px solid #e1e1ff;}
.productlist .name{font-size:12px;}
.productlist .newvalue{margin:4px 5px;display:inline-block;}
.productlist .oldvalue, .productlist .oldvalue.error{color:var(--errorColor);text-decoration:line-through;}
.productlist .error{color:var(--errorColor);}
.productlist .info{color:var(--secondaryTextColor);display:block;margin-bottom:2px;}

.colorPreview{display:inline-block;width:18px;height:18px;border:1px solid #000; vertical-align:middle;}
span.sales{color:green;}
span.purchase{color:red;}
.removeFraudMark {float:right; font-weight:bold; color:#3a3;font-size:16px; line-height:24px;}

.url{display:flex; width:100%; white-space:nowrap; position:relative;}
.url .urlPrefix{padding-right:12px; line-height:24px; white-space:nowrap; font-size:13px; width:auto; display:inline-block;}
.url input{flex-grow:1;width:auto!important;min-width:100px;}
.url .url-clipboard, .url .url-open{margin-left:8px; cursor:pointer; position:relative;}
.url .url-copied-msg{position:absolute; top:0; left:100%; line-height:24px; padding-left:2em; color:#393;}
.filterBlock{display:inline-block;padding:0 3em 1em 0; vertical-align:top;}

#menuItems > a.sidenav{padding-right:12px; display:none;}
#menuItems > a.sidenav:after{display:inline-block; content:"|";padding-left:12px;}
.userMenuContainer{display:flex; width:100%;}
.userMenuContainer .userMenuItems{padding-right:24px; flex-shrink: 0; flex:1;}

.storageAccountHolder, .storageAccountParent{position:relative;}
.holderTitle, .parentTitle{display:inline-block;width:788px;}
.storageAccountHolderLinks, .storageAccountParentLinks{display:inline-block; text-align:right; position:absolute; top:3px;}
.storageAccountHolderLinks > a, .storageAccountParentLinks > a{margin:0 3rem 0 0; text-decoration:none; font-weight:bold; color:#205ad7; border-bottom:1px dotted #205ad7}
.storageAccountHolderLinks > a:hover, .storageAccountParentLinks > a:hover{text-decoration:none; border-bottom-color:transparent;}

.ledgerNavigation{display: flex; font-size:.9rem; margin-top:-.5rem;}
.ledgerNavigation .item{display:inline-block; vertical-align:middle; padding:10px; margin-left:10px; }
.ledgerNavigation .selectable{color:#999;}
.ledgerNavigation .selectable.selected{border:1px solid #ccc; border-radius:5px;color:#000}
.ledgerNavigation .selectable .content.on{display:none;}
.ledgerNavigation .selectable .content.off{display:inline-block; cursor:pointer; line-height:1rem}
.ledgerNavigation .selectable.selected .content.on{display:inline-block;}
.ledgerNavigation .selectable.selected .content.off{display:none;}
.ledgerNavigation .selectable .customPeriod{display:inline-block; vertical-align:middle; margin-top:-3px; text-align:right;}
.ledgerNavigation .selectable .imgBtn{width:40px; vertical-align:middle; display:inline-block; margin-left:10px;}

.file-list {padding: 0; margin: 10px -10px 20px -10px;}
.file-list-item {position: relative; padding:10px; margin:0 10px 20px 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;display: inline-block;vertical-align: top;}
.file-name {display:block; margin-top: 5px;width: 100%; text-align: center;}
.remove-button { background: none; border: none; padding: 0; cursor: pointer; position: absolute; top:-10px; right:-10px;}
.remove-text { color: #e74c3c; font-weight: normal; font-size: 16px; cursor: pointer; width: 20px; height: 20px; display: block;text-align: center;}
.remove-text:hover{font-weight: bold;}
.thumbnail {display:block;width:160px;}
.tab-container .btn {font-size: 13px}

.metalAccountTable{border-collapse:collapse;}
.metalAccountTable thead tr td,
.metalAccountTable thead tr th{background:#fff;}
/* .metalAccountTable thead tr.totalHead{} */
.metalAccountTable thead tr.totalHead td{border-top:1px solid #fff;}
.metalAccountTable thead tr.totalHead td:first-child{border-left:1px solid #fff;}
.metalAccountTable thead tr.totalHead th{background:#e0e0e0; padding:.4em; border:1px solid #999;}
.metalAccountTable thead tr.totalValues th,
.metalAccountTable thead tr.totalValues td{font-size:1.2em;padding-right:4px;border:0;}
.metalAccountTable thead tr.totalValues td{font-weight:normal;background:#eee;border:1px solid #999;}
.metalAccountTable thead tr.totalValues td.small{font-size:1em;}
.metalAccountTable thead tr.totalValues th:first-child{border-left:1px solid #fff;}
.metalAccountTable thead tr.head td{border:1px solid #999;background:#a4d1ff;}
.metalAccountTable thead tr.empty td{border-top:1px solid #fff;border-left:1px solid #fff; border-right:1px solid #fff;height:8px;}
.metalAccountTable tbody td{border:1px solid #999;}
.metalAccountTable td.pending{color:#f00;}
.metalAccountTable .paginate, .metalAccountTable .current{font-size:12px;}
.metalAccountTable .current{color:#fff}

.orderProductsTitle{display:inline-block; margin-top:0;}
.addOrderProductsContainer{float:right; margin:0 0 1em;}
.addOrderProductsContainer a{display:inline-block;margin-bottom:.5em;}
.addOrderExternalMetalContainer{float:right; margin:0 14px 1em 0;}

.w-unset {width:unset !important;}
table.imported td {vertical-align:top;}
code {background:#eee; border:1px solid #bbb; border-radius:4px; padding:2px; white-space:nowrap;}
code:hover {box-shadow:rgba(0,0,0,.15) 1px 1px;}
table.imported code {display:block; margin:2px;}
table.imported th {position:sticky; top:0;}
.nowrap {white-space: nowrap;}

div:has(.btn-idin) {position:relative;}
a.btn-idin {cursor:pointer;float:right;font-size:medium;margin:4px;position:relative;}
.ui-widget-overlay {opacity:.75}
.addspeech {cursor:help;}
code:has(.addspeech) {font-size:smaller;}

span.required-field {display:unset !important; margin: unset !important; padding: unset !important;}
span.required-field::after {content:'❇'; font-size: xx-small; vertical-align: super;}

fieldset { border: 1px solid #ccc; border-radius: 8px; padding: 6px 12px; }

.switch {position:relative; display:inline-block; width:32px; height:20px;}
.switch input {opacity:0; width:0; height:0;}
.switch .slider {position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#999; -webkit-transition:.4s; transition:.4s;}
.switch .slider.round {border-radius:20px;}
.switch .slider:before {position:absolute; content:""; height:12px; width:12px; left:4px; bottom:4px; background-color:#fff; -webkit-transition:.4s; transition:.4s;}
.switch .slider.round:before {border-radius:50%;}
.switch input:checked+.slider {background-color:var(--primaryColor);}
.switch input:focus+.slider {box-shadow:0 0 1px var(--primaryColor);}
.switch input:checked+.slider:before {-webkit-transform:translateX(12px); -ms-transform:translateX(12px); transform:translateX(12px);}

.cursor-default {cursor:default;}
.row-deleted {opacity:.4}

div:has(.cdd_holder) {position:relative;}
.cdd_holder {position:absolute; top:4px; right:4px;}
div:has(> .cdd_holder button:hover) {outline:1px solid var(--secondaryColor); border-radius: 5px;}

.customSettingsSection{border:1px dotted #ccc; border-radius:.5em; padding:0 1em 1em; margin-bottom:1.5em;}
.customSettingsSection table{width:auto;}
.customSettingsSection table td{padding-right:8px;}

.loader-large {width: 4rem; aspect-ratio: 1; border-radius: 50%; border: .5rem solid var(--primaryColor); display: inline-block; vertical-align: bottom; animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;}
.loader-small {width: 1rem; aspect-ratio: 1; border-radius: 50%; border: .2rem solid var(--primaryColor); display: inline-block; vertical-align: bottom; animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;}

.font-normal{font-weight:normal !important;}
.font-size-10 {font-size:10px}
.font-size-11 {font-size:11px}
.font-size-12 {font-size:12px}
.font-size-13 {font-size:13px}
.font-size-14 {font-size:14px}
.font-size-15 {font-size:15px}
.font-size-16 {font-size:16px}
.font-size-17 {font-size:17px}
.font-size-18 {font-size:18px}
.font-size-19 {font-size:19px}
.font-size-20 {font-size:20px}
.font-size-21 {font-size:21px}
.font-size-22 {font-size:22px}
.font-size-23 {font-size:23px}
.font-size-24 {font-size:24px}
.font-size-25 {font-size:25px}
.font-size-26 {font-size:26px}
.font-size-27 {font-size:27px}
.font-size-28 {font-size:28px}
.font-size-29 {font-size:29px}
.font-size-30 {font-size:30px}
.font-size-31 {font-size:31px}
.font-size-32 {font-size:32px}

@keyframes l20-1{
    0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
    12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
    25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
    50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
    100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{
    0%    {transform:scaleY(1)  rotate(0deg)}
    49.99%{transform:scaleY(1)  rotate(135deg)}
    50%   {transform:scaleY(-1) rotate(0deg)}
    100%  {transform:scaleY(-1) rotate(-135deg)}
}

.row-bg-animate {animation: background-fade 3s forwards;}
@keyframes background-fade {
    0% {background:var(--defaultBgColor);}
    10% {background:var(--primaryColorLighter);}
    20% {background:var(--defaultBgColor);}
    30% {background:var(--primaryColorLighter);}
    50% {background:var(--defaultBgColor);}
    60% {background:var(--primaryColorLighter);}
    70% {background:var(--defaultBgColor);}
    90% {background:var(--primaryColorLighter);}
    100% {background:var(--primaryColorLighter);}
}

@keyframes tilt-n-move-shaking {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(3px, 3px) rotate(3deg); }
    50% { transform: translate(0, 0) rotate(0eg); }
    75% { transform: translate(-3px, 3px) rotate(-3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.shake {animation: tilt-n-move-shaking .1s 5 normal;}

#headermenuAddForm{text-align:center; margin:1em 0}
#accountFailedFields{float:right;clear:right;}
#hoverTooltipBox{position: absolute; z-index: 2; background: #333; width: auto; max-width:600px; padding: 5px 10px; border-radius: 5px; color: #fff; margin-left:20px;}

.bg-amsterdamsafe{background:#e9e1d4;}
.line-amsterdamsafe{position:absolute;right:0;width:36px;top:0;bottom:0;background:#d9cdb8;padding:2em 1em;}
.line-amsterdamsafe > span{position:fixed; writing-mode: vertical-lr;transform:rotate(180); color:#fff; font-size:26px; box-sizing: border-box;}
table.uboBeneficials > tbody > tr > td{padding-right:6em; border-left:1px solid #ccc;}
table.uboBeneficials > tbody > tr > td:first-child{padding-right:2em; border-left:0}

div.info {display: inline; color: var(--secondaryColor); font-size: smaller;}
small {font-size: x-small;}
.success-text {color: var(--successColor)}
.error-text {color: var(--errorColor)}
tr.row-selected, 
tr.row-selected:hover{background-color: gold !important;}

.ath-values {text-align: right}
.ath-values>table {display: initial}
.ath-values > table td, .ath-values > table th {font-size: smaller}

.border-bottom-1 {border-bottom: 1px solid var(--shadowColor)}
.border-right-1 {border-right: 1px solid var(--shadowColor)}
.border-collapse {border-collapse: collapse}

a:not(.btn):hover:has(> i[class*="fa-"]) {
    background-color: var(--defaultBgColor);
    color: var(--primaryColor);
    padding: 3px;
    margin: -3px;
    border-radius: 4px;
}

/* --- ORDER PLANNING --- */
#loadMoreBtn{margin:2em auto 0;display:block;padding:1em 2em;}

.orderPlanning {border-collapse: collapse;}
.orderPlanning td {border-right: 1px solid black; padding-left:12px; }
.orderPlanning td:last-child {border-right:0;}
.orderPlanning td:first-child {padding-left:6px;}
.orderPlanning td .info{font-size:14px; color:#000; display:block; padding:.2em 0; margin:0; font-family:Calibri, Arial, Helvetica, sans-serif;}
.orderPlanning td .name{}
.orderPlanning td .email{width:100px; overflow:hidden; position:relative; cursor:default; white-space:nowrap;}
.orderPlanning td .email span{font-family:inherit; font-size:13px;}
.orderPlanning td .email.hover{overflow:inherit;}
.orderPlanning td .email.hover span{padding:.2em .2em; position:absolute; left:0; top:0; background:#eee; opacity:.9; border-radius:.2em; transition-property: none;}
.orderPlanning td .date{font-size:13px; white-space:nowrap;}

.orderRow.fraud{background-color:#ee6969;}
.orderRow.red{background-color:#ffc9c9;}
.orderRow.green{background-color:#97df8a;}
.orderRow.blue{background-color:#a4d1ff;}

.criticalOrder{border:5px solid #f00; border-collapse:collapse; box-sizing:border-box;}
.notpaidOrder{border:5px solid #333; border-collapse:collapse; box-sizing:border-box;}
.shippingDayArrived{border:5px solid #a4d1ff; border-collapse:collapse; box-sizing:border-box;}

.orderPlanningHead td { border-right: 0; padding-left:13px;}
.orderPlanningHead.notpaidHead td{color:#fff; text-shadow:-1px -1px 0 #666, 1px -1px 0 #666, -1px  1px 0 #666, 1px  1px 0 #666;}
.orderPlanningHint{height: 26px; margin-bottom:4px; display: none; margin-top:-8px; z-index:5; position:relative;}
.orderPlanningNoHint{height: 26px; margin-bottom:4px; display: block; margin-top:-8px; z-index:5; position:relative;}
.orderPlanningHint *{font-size:9px;}
.orderPlanning .item.notAvailable{background:#ffc9c9;}
.orderPlanning .orderingRequired{color:red; font-weight: bold;}
.orderPlanning .qtyAvailable.red{color:#ff0000;}
.orderPlanning .addressAlert{color:#c33}
.orderPlanning .storages{text-align:center; left:5px; right:5px; top:28px; color:#333; position:absolute; border-radius:3px; overflow:hidden; background:rgba(255,255,255,.5); padding:3px; font-size:13px}
.orderPlanning .storages img{vertical-align:middle;}

.toggle-btn td:first-child:after {content:''; width: 12px; height: 12px; background: url(../images/arrow_Up_Green.gif) no-repeat left center; vertical-align:middle; margin:-3px 0 0 8px; display: inline-block; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all .1s ease; -moz-transition: all .1s ease; transition: all .1s ease;}
.toggle-btn td.total-row:first-child:after{padding-left:8px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all .1s ease; -moz-transition: all .1s ease; transition: all .1s ease;}
.toggle-btn{cursor:pointer;}
.toggle-btn td:first-child {position: relative;}
.nested-row {display: none;}
.nested-row td:first-child{padding-left: 25px;}
.nested-row.active td, .opened .below-gwr td {border-top:1px solid #d5d5d5;}
.nested-row.active  ~ .nested-row.active td {border-top: none;}
.total-row{background: #c2e8fa!important;}