:root {
    --bs-empty-rgb: rgba(255, 253, 56);
}

/* jAlert */
#popup_message {
    min-width: 230px; 
    max-width: 400px;
}
#popup_title {
    display: none;
}

/* TinyMCE */
.wysiwyg-frame {
    width: 100%; 
    min-height: 400px; 
    border: none;
}
.tox-statusbar__branding {
    display: none !important;
}
.tox-toolbar__group {
    padding-left:6px !important;
    padding-right:6px !important;
}
.tox-tbtn:not([aria-haspopup="true"]) {
    max-width: 28px !important;
}

/* Header styles */
.homelogo{
    opacity: .2;
    cursor: pointer;
    margin-right: 1em;
}
.homelogo > img {
    max-width: 100%;
}
.homelogo:hover{
    opacity: .5;
}
.homelogo.active{
    opacity: 1;
}

.widgetMetalRates {
    font-size: 0.875rem;
    line-height: 1.3;
    white-space: nowrap;
}

.dropdown-menu {
  font-size: 0.875rem;
  padding: 0.25rem 0;
}
.dropdown-item {
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
}
.dropdown-item:hover {
    background: var(--bs-secondary);
    color: var(--bs-white);
}
.dropdown-hover {
    position: relative;
    min-width: 0;
    white-space: nowrap;
}
.dropdown-hover .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: max-content;
    max-width: 90vw;
    z-index: 1000;
    max-height: 80vh;
    overflow-y: auto;
}
.dropdown-hover:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
}
.dropdown-hover .dropdown-toggle::after {
    display: none;
}

/* Language switcher */
.langSwitcher {
    display: inline-flex;
    gap: .35em;
    margin-left: 1em;
    align-self: center;
    vertical-align: middle;
}
.lang.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    min-width: 1.25em;
    width: auto;
    padding: 0;
    border: 0;
    opacity: .2; 
    cursor: pointer;
    box-shadow: 0px 0px 1px 0px #888; 
}
.lang.icon > img{
    height: 1em;
    vertical-align: middle;    
}
.lang.icon.active{
    opacity: 1; 
    outline: 2px solid #696;
    outline-offset: 1px; 
}
.lang.input{
    position: relative;
    display: none;
}
.input-group .lang.input {
    flex: 1 1 auto;
}
.input-group .lang.input .form-control {
    width: 100%;
}

/* Cards */
a > .card, 
.card.hoverable {
    transition: background-color 0.2s ease;
}
a > .card.bg-light:hover,
.card.hoverable.bg-light:hover {
    background-color: var(--bs-secondary) !important;
    background-image: var(--bs-gradient);
    color: var(--bs-white);
}
a > .card.bg-light:hover p,
.card.hoverable.bg-light:hover p {
    color: var(--bs-white) !important;
}

@media (min-width: 768px) {
    a > .card > .card-body > p:first-child,
    .card.hoverable > .card-body > p:first-child {
        min-height:3em;
    }
}

/* Tables */
tr[data-href] {
    cursor:pointer;
}
table tr.active > td, 
table tr.active > th {
    cursor: pointer;
    background: var(--bs-table-bg);
}
tr.table-info:hover td {
    background: var(--bs-table-bg) !important;
}
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-primary a {
    border-bottom: 1px dotted #000;
}
.table-transparent {
    background-color: transparent !important;
}
.table-transparent th,
.table-transparent td {
    background-color: transparent !important;
}
.table-form-columns td:first-child,
.table-form-columns th:first-child {
    white-space: nowrap;
    padding-right: 1em;
}
.table-striped-cols tbody tr td:nth-child(even),
.table-striped-cols thead tr th:nth-child(even) {
    background-color: rgba(0, 0, 0, .05);
}

/* Pagination */
.pagination .page-link.disabled {
    background: var(--bs-white) !important;
    color: var(--bs-secondary);
}

/* Breadcrumbs */
nav > ol.breadcrumb:after{
    display: inline-block; 
    padding-left: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, "/");    
}

/* Tabs */
ul.nav-tabs {
    gap: .5em;
}
ul.nav-tabs > li.nav-item > a.nav-link {
    cursor: pointer;
    background-color: var(--bs-light);
    padding: 0.5rem;
    font-size: 0.875rem;
    color: var(--bs-secondary);
    border-bottom: 1px solid var(--bs-border-color);
}
ul.nav-tabs > li.nav-item > a.nav-link.active {
    font-weight: bold;
    background-color: var(--bs-white);
    color: var(--bs-dark);
    border-bottom: 1px solid var(--bs-white);
}

/* Modal */
.modal-dialog {
    width: auto;
    max-width: 90%;
    max-height: 90%;
}
.modal-dialog .btn-close {
    z-index: 1100;
    right: -.8em;
    top: -.8em;
    border-bottom: 2px solid var(--bs-secondary);
}
.modal-dialog .modal-body img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;    
}
.modal-dialog .modal-body #blockForm {
    padding-right: .5em;
    max-height: 80vh;
    overflow-y: auto;    
    overflow-x: hidden; 
}

/* Misc */
input::placeholder {
    color: var(--bs-light);
    opacity: .5;
    font-weight: lighter;
}
.error-msg {
    color: var(--bs-danger);
}
.valid-msg {
    color: var(--bs-success);
}
small {
    color: var(--bs-secondary);
}
h1 > a {
    text-decoration: none;
}
a {
   text-decoration: none !important;
}
a:not(.btn):has(> i[class*="fa-"]) {
    padding: .25em;
    cursor: pointer;
}
a:not(.btn):hover:has(> i[class*="fa-"]) i{
    transform: scale(1.2);
}
.no-border td,
.no-border th,
.no-border tr {
    border: none !important;
}

.affiliateOrdersList {
    overflow-y: auto;
    max-height: 4.5em;
}

.url > .input-group-text:first-child {
    font-size: .8em;
}
.url > .input-group-text:last-child {
    padding-left: .5em !important;
    padding-right: .25em !important;
    font-size: .9em;
}
.lang.input .url-copied-msg{
    position:absolute; 
    z-index:5; 
    right:0; 
    top: -.75em; 
    padding:0 .5em; 
    line-height:24px; 
    color:#393; 
    background: rgba(255,255,255,.5);
}
.w-lg-auto { width: 100%;}
@media (min-width: 1280px) {
    .w-lg-auto {
        width: auto;
    }
}
.vw-75 {
    max-width: 75vw;
}
.vh-50 {
    max-height: 50vh;
}
.vh-75 {
    max-height: 75vh;
}
.mw-25 {
    min-width: 25% !important;
}
.min-vw-25 {
    min-width: 25vw;
}
.min-vw-50 {
    min-width: 50vw;
}
.min-vw-75 {
    min-width: 75vw;
}
.drag-handle {
    cursor: move;
}
.rotated {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    vertical-align: middle;
}

#copyRowForm #pageList,
#bulkPageList {
    max-height: 50vh;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .productlistContainer {
        min-height: 550px;
        overflow-y: auto;
    }
}

.ajax-saved-msg{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 1;
    background: inherit;
    color: var(--bs-success);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
}

.line-amsterdamsafe{
    z-index: -1;
    position: fixed;
    right: 0;
    width: 66px;
    top: 0;
    bottom: 0;
    background: #d9cdb8;
    padding: 2em 1em;
}
.line-amsterdamsafe > span{
    writing-mode: vertical-lr;
    transform:rotate(180); 
    color:#fff; 
    font-size:26px; 
    box-sizing: border-box;
}
.bg-amsterdamsafe{
    background-color: #e9e1d4;
}
.bg-empty {
    background-color: var(--bs-empty-rgb);
}

input + .lock {
    top:11px;
    right:17px;
}
input + .lock.fa-lock {
    right:20px;
}

.colorPreview {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #000;
    vertical-align: middle;
}

.checkboxList {
    max-height: 240px;
    overflow-y: auto;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .5em;
    box-sizing: border-box;
    width: 100%;
}
@media (min-width: 992px) {
    .checkboxList {
        display: inline-block;
        width: auto;
    }
}

.batch-saved-msg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: inherit;
    color: #336633;
    padding: 5px 6px;
    display: flex;
    gap: .5rem;
    align-items: center;
}
.text-center .batch-saved-msg{
    text-align:center;
    justify-content: center;
}

.save-overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    opacity: .5
}


.highlight:hover {
    background-color: var(--bs-gray-200);
    outline: 1px solid var(--bs-gray-300);
    border-radius: var(--bs-border-radius);
}
.highlight:hover:not(.row) {
    margin-left:-12px;
    margin-right:-12px;
    padding-left:12px;
    padding-right:12px;
}

.required-row  {
    background-color: #fff3cd;
    border-radius: var(--bs-border-radius);
}
.required-row:hover{
    background-color: #f2e7c3;
    border-radius: var(--bs-border-radius);
}

span.required-field {
    display: unset !important; 
    margin: unset !important; 
    padding: unset !important;
}
span.required-field::after {
    content:'*'; 
    font-size: small; 
    vertical-align: top;
    color: var(--bs-danger);
}

.hoverHint {
    cursor: help;
}

#hoverTooltipBox{
    position: absolute; 
    z-index: 2; 
    background: #333; 
    width: auto; 
    max-width:600px; 
    padding: 5px 10px; 
    border-radius: 5px; 
    color: #fff; 
    margin-left:20px;
}

/* Order planning */
.orderPlanningContainer {padding: 5px;}
.orderPlanningHead{margin-left:2px; margin-right:2px; margin-top:-2px;} 
.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;}
.orderPlanningTable {width: 1284px;}
.orderPlanning {border-collapse: collapse; font-size: 13px;}
.orderPlanning a{color: #000}
.orderPlanning a:hover{color: var(--bs-primary);}
.orderPlanning td {border-right: 1px solid #333; padding-left:6px; padding-right:6px;}
.orderPlanning td:last-child {border-right:0;}
.orderPlanning td .info{color:#000; display:block; padding:.2em 0; margin:0;}
.orderPlanning td .email{width: 130px; height:25px; overflow: hidden; position: relative; cursor: default; white-space: nowrap;}
.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{white-space: nowrap;}
.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;}
.orderRow.fraud {background-color: #ee6969;}
.orderRow.red {background-color: #ffc9c9;}
.orderRow.green {background-color: #97df8a;}
.orderRow.blue {background-color: #a4d1ff;}
.criticalOrder{outline: 5px solid #f00;}
.notpaidOrder{outline: 5px solid #333;}
.shippingDayArrived{outline: 5px solid #a4d1ff;}

/* RGraph */
.svg-position-abs{top: 0; left: 0; position: absolute}
.rgraph-block{width: 100%; height: 520px}

/* Storage Accounts */
div.cdd_holder_container:has(.cdd_holder button:hover) {
    outline: 1px solid var(--bs-secondary);
    outline-offset: 6px;
    border-radius: var(--bs-border-radius);
}

.table-tariff td{
    min-width: 120px;
}
.table-tariff tr > td:nth-child(1), .table-tariff tr > td:nth-child(2){
    min-width: 0;
}