/* <weight>: Use a value from 200 to 700 */
/* <uniquifier>: Use a unique and descriptive class name */
.oswald-600 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.inter-500 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body {
    font-family: "Inter";
    /* font-size:16px; */
}

body.in-iframe .navbar, 
body.in-iframe .sidebar,
body.in-iframe .page-inner .page-title,
body.in-iframe .page-footer,
body.in-iframe .hide-in-iframe,
body.in-iframe .login-form div.hide-in-iframe,
body.in-iframe .register-form div.hide-in-iframe,
body.in-iframe .login-background.hide-in-iframe {
    display:none !important;
}
body.in-iframe .login-form form,
body.in-iframe .register-form form {
    background-color:#fff !important;
    box-shadow:unset !important;
    border:none !important;
}

body.in-iframe .set-full-iframe-width {
    width: 100% !important;
}


#main-wrapper {
    margin-top: 0px !important;
}
body.in-iframe #main-wrapper {
    margin: 0px 5px 0px 0px !important;
    padding: 0px !important;
}
body, .page-inner, .page-title, #main-wrapper {
    background-color: #FFFFFF !important;
}
.page-title {
    border-bottom: none;
}
#menu-overlay {
    position:fixed;
    top:0;
    right:0;
    background: #f9faff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding-top:0 !important;
}
#menu-overlay.sidebar {
    width: 200px !important;
    /* display: block; */
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: opacity 0.3s ease-in-out !important;
    -moz-transition: opacity 0.3s ease-in-out !important;
    -o-transition: opacity 0.3s ease-in-out !important;
    transition: opacity 0.3s ease-in-out !important;
}


/* Overrule modern dropdown!!! */
.navbar .dropdown .dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    margin-top: 0px !important;
}
.top-menu .navbar-nav>li>a>i {
    font-size: 20px;
}
.top-menu .navbar-nav>li>a {
    padding: 8px 18px;
    margin-top: 13px;
}
.top-menu .navbar-nav>li>a.btn {
    color:#FFF;
}

.link-divider {
    line-height:24px;
    margin: 0 5px;
}
.footer-link, .copyright {
    font-family: "Inter";
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #000;
}
.copyright {
   font-size: 14px;
}

@media (max-width: 767.98px) {
  .footer-text-xs {
    font-size: 0.75rem !important;
  }
}

.color-default {
    background:#F0F0F0;
}
.bg-color-red {
    background-color:#DA2E4C;
}
.color-red {
    color:#DA2E4C;
}
.color-blue {
    background-color:#1A9AFA;
}
.text-blue {
    color:#1A9AFA;
}
.text-bold {
    font-weight:600;
}
.text-gray {
    color: #A5A5A5;
}
.text-darkblue {
    color: #0C2C84;

}
button.text-blue:hover, button.text-gray:hover {
    color:#008BD5;
}


.page-title h3 {
    font-weight: 400;
}

.page-footer {
    left: 0;
    background: #f9faff;
}
.container-fluid {
  padding: 0;
}
.top-menu, .top-menu .navbar-nav>li  {
  background:#fff;
  height: 60px;
}
a {
  text-decoration:none;
}
.user-profile {
    margin-top: 130px;
}

.page-breadcrumb ol.breadcrumb li a, .page-breadcrumb ol.breadcrumb li.active, .page-breadcrumb ul li a {
    font-family: "Inter";
    font-size: 15px;
    font-weight:400;
    color: #000;
    line-height:20px;
    /* padding-top:1px; */
}
.breadcrumb>li+li:before {
    font-family: "Font Awesome 6 Pro";
    padding: 0 4px;
    color: #DA2E4C;
    line-height:22px;
    /* content: "/\00a0"; */
    content: "\3e";
}
.breadcrumb>li+li div {
    line-height:20px;
}
.menu-icon {
  font-size: 1.75em; 
}

.menu-icon a {
  color: #899dc1;
}

.menu.accordion-menu a span.menu-icon {
    margin-bottom: 0;
}    
.menu.accordion-menu a {
    padding: 10px 18px;
}

.sidebar-header {
    clear: both;
    padding: 10px;
}

.menu.accordion-menu li>a>.arrow:before {
    font-family: "Font Awesome 6 Pro";
    font-size: 14px;
    font-weight: 100;
}

.btn-group-xs>.btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}


element.style {
}
.menu.accordion-menu > li.active > a, .menu.accordion-menu > li.active.open > a {
    background: #34425a;
    color: #ffffff;
}
.menu.accordion-menu > li.active > a, .menu.accordion-menu > li.active.open > a {
    background: #2b384e;
    color: #fff;
}
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu>li>a {
    padding: 15px 25px;
    text-align: center;
    position: relative;
    width: 265px;
}

.small-sidebar:not(.page-sidebar-fixed) .accordion-menu>li>a {
    padding: 15px 25px;
    text-align: center;
    position: relative;
    width: 55px !important;
}

.small-sidebar:not(.page-sidebar-fixed) .accordion-menu li a span.menu-icon {
    margin: 0 10px 0 0 !important;
}

.small-sidebar:not(.page-sidebar-fixed) .accordion-menu>li>ul.sub-menu {
    top: 10px !important;
    left:50px!important;
}
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu>li>ul.sub-menu.large {
    width:300px !important;
}

/* 
.btn-primary {
    background-color: #F54341;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus,.btn-primary:active:focus, .btn-primary:active:hover {
    background-color: #E24645 !important;
}

.btn-secondary {
    background-color: #34425A;
    color: white;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus,.btn-secondary:active:focus, .btn-secondary:active:hover {
    background-color: #2b384e !important;
    color: white;
} */

.btn-default {
    background-color: #fff;
    color: #333;
    border: 1px solid #34425A;
}
.btn-default:hover, .btn-default:active, .btn-default:focus,.btn-default:active:focus, .btn-default:active:hover {
    background-color: #2E3A4F !important;
    color: #fff;
}


.form-right-side-button {
    float: right;
    margin-top: -50px;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background: #f84b4a;
    border-color: #f84b4a;
}

body.datepicker-week .datepicker.dropdown-menu tr:hover, .datepicker.dropdown-menu table tr td.day:hover, .datepicker table tr td.day.focused {
    background-color: #f84b4a;
}
div.datepicker {
    z-index:10000 !important;
}
/* .datepicker.dropdown-menu table tr:hover {
  background-color: #33b122;
} */

.panel {
    border-radius: 10px;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.15);
    font-family: "Inter";
}
#selectable-map {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.12);
}
.panel-title {
    font-size: 24px !important;
    font-weight:400 !important;
    line-height:25px;
}
.panel-info {
    font-size: 14px !important;
    line-height: 25px;
    margin-bottom:4px;
}
.panel-table {
    position: inherit;
    top: -36px;
}
.panel .panel-heading {
     padding-top: 5px !important;
     padding-bottom: 5px !important;
     border-bottom: 1px solid #e7e7e7 !important;
     height: 55px;
     display: flex;
     align-items: center;
}
/* Vertically centre the title; keep right-aligned controls/icons on the right. */
.panel .panel-heading > * {
     margin-top: 0;
     margin-bottom: 0;
}
.panel .panel-heading > .float-end,
.panel .panel-heading > .panel-control {
     margin-left: auto;
}
/* modern.css zeros the top padding of a panel-body that follows a heading;
   give it some breathing room below the (now bordered) title bar. */
.panel .panel-heading + .panel-body {
     padding-top: 15px;
}

.dashboard-big-panel {
    height:320px;
    display:flex;
    flex-direction:column;
}
.dashboard-small-panel {
    height:196px;
}
.dashboard-xsmall-panel {
    height:100px;
}
/* Keep the title bar at its full height; only the body (which scrolls) absorbs
   the shrinking — otherwise a tall body squeezes the flex heading smaller. */
.dashboard-big-panel .panel-heading{
    flex:0 0 auto;
}
/* Let the body fill the panel down to the bottom (was a fixed 75%, which left a
   gap and a too-short scrollbar). min-height:0 lets the flex child scroll. */
.dashboard-big-panel .panel-body{
    flex:1 1 auto;
    height:auto;
    max-height:none;
    min-height:0;
    margin-bottom:10px;
    overflow-y:auto;
}
/* .datepicker.dropdown-menu table tr td.day:hover {
    background: unset !important;
} */
.available-range {
    background: #90e294;
}
 .available-range.set-unfocused {
    background: #90e294 !important;
}
.delivery-day {
    background: #77c07c;
}
.possible-delivery-range {
    background: #f8888d !important;
}
.datepicker table tr td.day.set-unfocused:hover {
    background: #90e294 !important;
    /* color: inherit !important; */
}
.datepicker table tr td.day.available-range.set-unfocused:hover,
.datepicker table tr td.day.disabled.available-range.set-unfocused:hover {
    background: #90e294 !important;
    /* color: inherit !important; */
}
.datepicker table tr td.day.possible-delivery-range.set-unfocused:hover, 
.datepicker table tr td.day.disabled.possible-delivery-range.set-unfocused:hover {
    background: #f8888d !important;
    /* color: inherit !important; */
}
.datepicker table tr td.day.disabled.set-unfocused:hover {
    background: inherit !important;
    /* color: inherit !important; */
}
.login-background {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    margin: auto;
    filter: blur(8px);
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 768px) {
    .login-form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 360px;
        font-size: 15px; 
    }

    .register-form {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 360px;
        font-size: 15px;
    }

}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 768px) {
    .login-form, .register-form {
        position:relative;
        width: 100%;
        font-size: 15px;
    }
}

.login-form.password-reset, .login-form.register, 
.register-form.password-reset, .register-form.register {
    width: inherit;
}
.login-form form, .register-form form {
    border-radius: 12px;
    margin-bottom: 15px;
    background: #f7f7f7;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    padding: 30px; }

.full-width {
    max-width:100% !important;
}

table tbody tr td .btn {
    width: 25px;
    height: 25px;
    border-radius: 3px;
}

table {
    width: 100%;
    font-size: 12px;
}

.form-group {
    margin-bottom: 15px;
}

.profile-image-container > img {
    display: block;
    margin: 0 auto;
    width: 200px;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 5px #fff;
    -moz-box-shadow: 0 0 0 5px #fff;
    -o-box-shadow: 0 0 0 5px #fff;
    box-shadow: 0 0 0 5px #fff;
}

.nav-tabs.distribution-steps li.disabled, .nav-tabs.advertisement-steps li.disabled {
    pointer-events: none;
}

.d-none {
    display: none;
}

.clickable-tile, .clickable-subtile {
    display: block;
    width: 100%;
    height: 100px;
    /* border: 2px solid black; */
    float: left;
    padding: 10px;
    margin-right: 10px;
    position: relative;
    font-weight: 600;
    -webkit-box-shadow: -2px 4px 9px -4px rgba(0,0,0,0.41); 
    box-shadow: -2px 4px 9px -4px rgba(0,0,0,0.41);    
}

.clickable-subtile {
    height: 58px;
    padding: 0 4px;
}

.small-tile {
    height: 50px;
}
.format-tile {
    height: 60px;
}

.tile-info-body {
    font-size:12px;
}

.clickable-tile.size-select {
    width: 100%;
    padding: 20px;
    height: auto;
}

.clickable-tile:hover, .clickable-subtile:hover {
    cursor: pointer;
    background-color: #f3f3f3;
}

.clickable-tile .fa {
    position: absolute;
    font-size: 50px;
    bottom: 15px;
    right: 50px;
}

.clickable-tile.selected, .clickable-subtile.selected {
    border: 2px solid #35abff;
    background-color: #f1f1f1;
}

.clickable-tile.selected .fa {
    bottom: 13px;
    right: 48px;
}
.clickable-tile.disabled {
    opacity:.3;
}
img.option-thumbnail {
    height: 64px;
    max-width:100%;
}
.icon-button {
    color: #35abff;
    background-color: #f1f1f1;
    cursor:pointer;
}
.tile-icon {
    font-size:40px;
}
.tile-info-header {
    color: #34425A;
    font-weight:bold;
    font-size:14px;
}
.tile-info-header.distribution, .tile-info-header.advertisement {
    margin-top:-14px;
}
.tile-info-header.product {
    margin-top: -4px;
}
.tile-info-price, .tile-edition-rayon-info {
    color: #AAA;
}
.tile-info-hover, .send-info-hover {
    position:absolute;
    right:5px;
    top:5px;
    color: #1A9AFA;
    font-weight: normal;
    font-size: 12px;
}
.card-title {
    font-size: 14px;
    font-weight:500;
}
.card-title {
    font-size: 14px;
    font-weight:500;
}
.send-info-hover {
    position: absolute;
    right: 5px;
    top: 5px;
    color: #1A9AFA;
    font-weight: normal;
    font-size: 12px;
}
label.clickable-tile.quantity-option {
    -webkit-box-shadow: unset;
    box-shadow: unset;
    border: 1px solid #dee2e6;
    font-size: 13px;
    line-height: 33px;
}
label.clickable-tile.quantity-option.selected {
    background-color: #1a9aFa;
    color: #fff !important;
    font-size: 13px;
}

label.clickable-tile.quantity-option:hover, label.clickable-tile.quantity-option.selected:hover {
    background: #0687e9;
    font-weight:normal;
}

label.clickable-tile.quantity-option:hover .tile-info-header, 
label.clickable-tile.quantity-option.selected .tile-info-header,
label.clickable-tile.quantity-option.selected:hover .tile-info-header {
    color: #fff !important;
    font-weight: normal;
    font-size: 14px;
}


/* Complains */
#postcode_list {
    display: flex;
    margin-top: 10px;
}
#postcode_list .postcode {
    background-color: #e9edf2;
    padding: 5px 10px;
    border: 1px solid black;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 10px 10px 0px;
    display: flex;
}

#postcode_list .postcode div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
#postcode_list .postcode .text {
    position: relative;
    /* top: 2px; */
}
#postcode_list .postcode .close {
    padding-left: 5px;
    cursor:pointer;
}

.form-control.invalid {
    border: 1px solid red;
}
.form-control.disabled {
    background-color: #e9ecef;
}
.clickable-tile .newspaper {
    max-width: 100%;
    max-height: 100%;
}

.search {
    position: relative;
}
.search .suggestion {
    position: absolute;
    top: 30px;
    width: 100%;
    z-index: 999;
    background-color: white;
    border: 1px solid #ddd;
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden;
    display: none;
}
.search .suggestion .row {
    width: 100%;
    line-height: 30px;
    border-bottom: 1px solid #ddd;
    position: relative;
    margin-left: 0px;
    margin-right: 0px;
}
.search .suggestion .row:last-child {
    border-bottom: 0px solid #ddd;
}
.search .suggestion .row:hover {
    cursor: pointer;
    background-color: #ddd;
}
.undoredo {
    padding-top: 20px;
}

.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    background: none;
    color: #BBB !important;
    cursor: default;
}

.wizard-step-indicator {
    width:25px;
    height:25px;
    background-color:#AAA;
    border-radius:25px;
    text-align:center;
    padding-top: 3px;
    float: left;
}
.wizard-step-label {
    font-family: "Inter";
    margin-left:6px;
    float: left;
    line-height:25px;
    color:#AAA;
}
.active .wizard-step-indicator {
  background-color:#34425A;
}
.active .wizard-step-label {
  color:#4E5E6A;
  font-weight:600;
}

.wizard-step-connection-line hr {
  padding:0;
  margin:13px;
}

@media (min-width: 992px) {
    .distribution-panel, .advertisement-panel {
        min-height: 338px; 
    }
}
.distribution-panel, .advertisement-panel {
     overflow:visible;
}

.nav {
    /* padding-left: 15px; */
}
.nav-pills .nav-item {
  width:30%;
}

.nav-link, .nav-link.active {
    width: 100%;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #4E5E6A;
  background-color: transparent;
  font-weight:600;
  border-bottom:2px solid #4E5E6A;
  padding: 10px 0 0 0;
  width: 100%;
}

.nav-pills .nav-link, .nav-pills>.nav-link {
  color: #4E5E6A;
  background-color: transparent;
  padding: 10px 0 0 0;
  width: 100%;
}

.tab-content-container {
  margin-top: -36px;
}
.portal-tab {
    font-weight:bold;
    font-size:14px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999 !important;
  opacity: 1; /* Firefox */
}
.dropzone {
  background:#F1F4F9 !important;
}

.small-scroll {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: darkgrey white;   /* scroll thumb and track */
}

.small-scroll::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}

.small-scroll::-webkit-scrollbar-track {
  background: white;        /* color of the tracking area */
  border:1px solid #ccc;
}

.small-scroll::-webkit-scrollbar-thumb {
  background-color: darkgrey;    /* color of the scroll thumb */

  border-radius: 5px;       /* roundness of the scroll thumb */
  border: 1px solid darkgrey;  /* creates padding around scroll thumb */
}

.postalcode-remove-icon, .postalcode-last-added-icon, .newspaper-remove-icon, .newspaper-last-added-icon, .point-remove-icon, .point-edit-icon {
    position:absolute;
    top:4px;
    right:10px;
    color:#999;
    cursor:pointer;
}
.point-edit-icon {
    right:30px;
}

.postalcode-remove-icon:hover, .newspaper-remove-icon:hover, .point-remove-icon:hover, .point-edit-icon:hover {
    color:#ff3b3b;
}
.geo-coordinates {
    position:absolute;
    bottom:4px;
    right:10px;
    color:#287dfd;
}

.accordion-button, .accordion-button:not(.collapsed) {
    color:#34425A;
}
.accordion-button:not(.collapsed) {
    background-color: #f0f0f0;
}
.accordion-button div.checker, .accordion-body div.checker, form div.checker, .form-group div.checker, .default-checkbox div.checker  {
    background: #1A9AFA;
}
.accordion-button {
    font-size: 14px;
    font-weight: bold;
}
.default-checkbox {
    padding-top: 5px;
}
.default-checkbox label {
    padding-top:2px;
}
/* .tile-container {
    width: 50%;
    float:left;
    padding: 10px;
} */
.subtile-container {
    float: left;
    padding: 0 0 0 10px;
}
.selected-value {
    position: absolute;
    right: 50px;
    text-align: right;
    font-size:12px;
    font-weight: normal;
}

#step-upload-form div.checker {
    margin-top:-3px;
}

.radio-item button.info {
    cursor:pointer;
    font-size:14px;
    color:#A5A5A5;
    padding-top:0;
}

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
  cursor:pointer;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #9B9B9B;
  background-color: transparent;
  cursor:pointer;
}
.radio-item label.selected:before {
  border: 2px solid #1A9AFA;
}

.radio-item label.selected:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #1A9AFA;
  cursor:pointer;
}

.radio-item label.disabled,
.radio-item label.disabled:before,
.radio-item label.disabled:after {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.spec-fieldname {
    width:180px;
    font-weight:900;
}
.overview-devider {
    background:#34425A;
    opacity:1;
}
.overview-devider {
    background:#34425A;
    opacity:1;
}
.payment-method-logo {
    height:50px;
}
.base-price {
    font-size: 20px;
    font-weight: 600;
}
.error-description {
    font-size: 12px;
}

.map-loading-info-box {
    position:relative;
    margin: 0 10px 20px 0;
}
.loading-spinner {
  z-index: 2000;
  float:left; 
  width: 20px;
  height: 20px;
  margin-right:10px;
  border: solid 2px transparent;
  border-top-color: #2299dd;
  border-left-color: #2299dd;
  border-radius: 10px;
  -webkit-animation: loading-spinner 400ms linear infinite;
  -moz-animation: loading-spinner 400ms linear infinite;
  -ms-animation: loading-spinner 400ms linear infinite;
  -o-animation: loading-spinner 400ms linear infinite;
  animation: loading-spinner 400ms linear infinite;
}

@-webkit-keyframes loading-spinner {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-spinner {
  0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-spinner {
  0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-spinner {
  0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
} 
.address-spinner {
    position:absolute;
    left:20px;
    top:-1px;
}
.inline-mini-spinner {
    float:right;
    height:10px;
    width:10px;
    margin-top:0px !important;
}

.select2-selection {
    height: 38px !important;
}
.multi-select span.select2-selection{
    height: unset !important;
    min-height: 38px !important;
}
.multi-select button.select2-selection__clear{
    margin-top:1px !important;
}

.has-error span.select2-selection, .has-error input {
    border:1px solid #ff0000 !important;
    color:#ff0000 !important;
}
.has-error {
    color:#ff0000 !important;
}
.tier-row {
    background:#fff;
    color: #4e5e6a;
    cursor:pointer;
}

.tier-row:hover, .tier-row.selected:hover {
    background:#0687e9;
    color: #fff;
}

.tier-row.selected {
    background:#1a9aFa;
    color: #fff;
}

.print-com-logo, .connect-logo {
    height: 30px;
    max-height: 30px;
    max-width: 80px;
}

.mailstreet-logo {
    height: 32px;
    max-height: 32px;
}
.required:after {
  content: "*";
  color:red;
  padding-left:4px;
}
.add-column-button, .remove-column-button {
    cursor:pointer;
}
.column-selector {
    width:100px;
    max-width:100px;
}
.address-label {
    width:100px;
}
.table>tfoot>tr>th.datacell-padding {
    padding:5px 15px !important;
}
.table>tfoot>tr>th.datacell-total {
    color:#4169e1;
    font-weight:bold;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #5f5f5f !important;
    border: 1px solid transparent;
    background: #f7f7f7 !important;
    box-shadow: none;
}

table.dataTable tr.dtrg-group.dtrg-level-0 th {
    font-weight: bold;
    font-size: 14px;
    background-color:#86acbf !important;

}
.date-range-filter {
    position: absolute;
    top: 16px;
    right: 300px;
}
.bg-info-light {
    background: rgba(18, 175, 203, 0.1) !important;
    color: #000 !important;
}
.bg-info {
    color: #000 !important;
}
/* #log-table_length, #log-totals-table_length, #log-totals-table_length {
    position:absolute;
    top:0px;
} */
/* #log-table_filter, #log-totals-table_filter {
    display:none !important;
} */
/* #log-totals-table tbody tr rd {
    border-right: 1px solid #dee2e6 !important;
} */

.error-border {
    border: solid 1px red;
}

.error-message, .red-label {
    color: red;
    font-weight:600;
}
.green-label {
    color: #71c575;
}
.orange {
    color: orange;
}
.red {
    color: red;
}
.green {
    color: green;
}
.loading-overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.6;
}
.loading-overlay-message{
    position:absolute;
    top:50%;
    color:#fff;
    font-size:24px;
    font-weight:600;
    text-align:center;
    width:100%;
}
.input-group.inline {
    width:unset;
}

.note-editor .note-toolbar .note-para .note-dropdown-menu,
.note-popover .popover-content .note-para .note-dropdown-menu {
    min-width: 240px !important;
}
.note-editor .note-toolbar .note-color-all .note-dropdown-menu,
.note-popover .popover-content .note-color-all .note-dropdown-menu {
    min-width: 348px !important;
}
.note-editor .dropdown-toggle::after {
    display: none !important;
}

#product-options-overview-table th select.form-control {
    width: 95%;
}
.drag-sort-icon {
    color: #0d6efd;
}
.opt-in-area {
    color: #0d6efd;
    font-size:12px;
}
.col-total {
    width:50%;
}

.paper-checkbox-container, .info-checkbox-container {
    position:relative;
}
.paper-checkbox, .info-checkbox {
    height: 18px;
    width: 18px;
}
.paper-checkbox-label {
    position: absolute;
    top: 0;
    padding-left:10px;
}
.info-checkbox-label {
    position: absolute;
    padding-left: 10px;
}
.link-mark {
    color:red;
    margin-right:5px;
}
.order-info-label {
    float:left;
    width:25%;
}
.order-info-value {
    float: left;
    width: 75%;
}

/* dataTables Select overruling styles */
table.dataTable.selectable tbody td.select-checkbox:before,
table.dataTable.selectable tbody td.select-checkbox:after,
table.dataTable.selectable tbody th.select-checkbox:before,
table.dataTable.selectable tbody th.select-checkbox:after {
    display: block;
    position: absolute;
    top: 1.2em;
    left: 23px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
}

table.dataTable.selectable tbody td.select-checkbox:before,
table.dataTable.selectable tbody th.select-checkbox:before {
    content: " ";
    margin-top: -6px;
    margin-left: -6px;
    border: 1px solid rgb(177, 177, 177);
    border-radius: 0px;
}
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
    font-size: 15px !important;
    margin-top: -16px !important;
}

.folder-flyer {
    display: none;
}
.document-preview {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(177, 177, 177);
    border-radius: 0px;
}
.address-position-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.address-position-container img {
    top: 0px;
    left: 0px;
    width: 100%;
}
.address-position-container .address-block {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 50px;
    border: 1px dashed rgb(30, 80, 120);
    background-color: rgba(110, 190, 255, .3);
    cursor:move;
}
.placement-area-overlay {
    position:absolute;
    opacity: .9;
    height: 100%;
}
#logo-overlay {
    position:absolute;
    opacity: 1;
    height: 8%;
    width:unset;
}
#retour-overlay {
    position:absolute;
    opacity: 1;
    width:unset;
}

.datapicker-container {
    position:relative;
}
.datepicker-calendar-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
.article-thumbnail {
    border-radius:7px;
}
.article-image {
    max-height: 100px;
    max-width: 130px
}
.article-hover:hover{
    border-radius:7px;
    background-color:rgba(155, 186, 207, 30%);
    cursor:pointer;
}
.article-item {
    color:#4E5E6A;
}
.article-info {
    width: calc(100% - 150px) !important; 
    min-width:300px !important;
}
.article-info .article-date{
    font-size:12px;
    font-weight: bold;
}
.article-info .article-title{
    font-size:16px;
    font-weight: bold;
}

.article-info .article-description{
    font-size:14px;
}


/* Set defaults for Summernote editor */
.note-editable, .note-editable ol, .note-editable ul {
    font-family:Arial;
    font-size: 14px;
    font-weight:normal;
}
p {
    font-weight: unset;
    letter-spacing: unset;
    line-height: unset;
    margin: unset;
    font-style: unset;
    white-space: unset;
}


/* Do this… */
table.postalcode-listing tr:nth-of-type(odd) {
    background-color: #caddfa;
}

/* …or this */
table.postalcode-listing tr:nth-of-type(even) {
    background-color: #edffde;
}
table.postalcode-listing th, table.postalcode-listing td {
    padding: 2px 5px;
}
.bg-white {
    background-color: #fff !important;
}
.bg-header {
    background-color: #ccc !important;
    font-weight:900;
}

.tile-button {
    position:relative;
    height: 90px;
    max-height: 200px;
    width: 220px;
    max-width:220px;
}
.tile-button:hover {
    background-color:#e9edf2;
}

.tile-button .icon {
    top:6px;
    left:18px;
}
.tile-button .label {
    left: 70px;
    top: 14px;
    right:10px;
}


.blue-placeholder::-webkit-input-placeholder {
    color: #1A9AFA !important;
    font-style: italic;
}
.blue-placeholder:-ms-input-placeholder {
    color: #1A9AFA !important;
    font-style: italic;
}
.blue-placeholder::-ms-input-placeholder {
    color: #1A9AFA !important;
    font-style: italic;
}
.blue-placeholder::-moz-placeholder {
    color: #1A9AFA !important;
    opacity: 1;
    font-style: italic;
}
.blue-placeholder:-moz-placeholder {
    color: #1A9AFA !important;
    opacity: 1;
    font-style: italic;
}
.picker-enabled {
    cursor: pointer;
}
.picker-disabled {
    cursor: default;
}

.provider-logo.small {
    height:30px;
    max-height:30px;
    line-height:30px;
}
.provider-logo img {
    height:100%;

}
#media-table tr td {
    vertical-align:middle;
}

.action-column-2 {
    width:100px;
}

.field-error {
    font-size:12px;
    color:#FF0000;
}
.radius-selector {
    position: absolute;
    top: 4px;
    right: 20px;
    color: #999;
}

.clickable-tile.media-format {
    height:150px !important;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.media-format-rectangle {
    border:1px solid #000000;
    background-color: lightblue;
    display:flex;
    align-items: center;
    justify-content: center;
}

.media-format-preview {
    /* height:350px !important; */
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.media-format-img {
    border:1px solid #000000;
    background-color: lightblue;
    display:flex;
    align-items: center;
    justify-content: center;
}

.clickable-tile.printed-product {
    height:150px !important;
    display:flex;
    flex-wrap: wrap;
    align-items: left;
    justify-content: left;
}
.clickable-tile.printed-product img {
    max-height:100px !important;
    max-width:100px !important;
}

.magnify-icon {
    position:absolute;
    top:15px;
    left:15px;
    color:white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Zachte zwarte schaduw */
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}
.select2-container--disabled .select2-selection {
    background-color: #eee !important;
}
.product-name {
    font-size:14px;
}
.product-info {
    color:#a18f8f;
    font-size:11px;
}
.product-nav-button {
    line-height:20px;
    padding: 6px 10px;
}
.product-nav-button .page {
    font-size:14px;
}


.panel-pagination { gap: .5rem; margin-top: 1rem; }
.panel-pagination a, .panel-pagination span { padding: .3rem .6rem; border: 1px solid #ccc; text-decoration: none; }
.panel-pagination .active { background: #007bff; color: white; }
.panel-pagination .active:hover { color: white; }
.panel-pagination .disabled { color: #aaa; }

.modal-content {
    -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 5px -5px rgba(0,0,0,.1);
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .1);
    border: 0;
    border-radius: 10px;
}

/* Modal body separator lines: the .border-light utility (#f8f9fa) is almost
   invisible — darken slightly to match the panel-heading divider. */
.modal-body.border-light {
    border-color: #e7e7e7 !important;
}

@media screen and (max-width: 767px) {
    div.dataTables_wrapper div.dataTables_length, 
    div.dataTables_wrapper div.dataTables_filter, 
    div.dataTables_wrapper div.dataTables_info, 
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left !important; 
    }
}

body.in-iframe .page-inner {
    padding: 0 !important;
}

.submenu-arrow .color-default {
    color: #DA2E4C !important;
}
.submenu-link .text-black {
    color: #000000 !important;
}

.menu.accordion-menu > li > a.no-hover:hover {
    background: unset;
    color:  unset;
}

.menu.accordion-menu a span.menu-icon {
    font-size: 16px !important;
    width: 18px !important;
    text-align:center;
}

.submenu-link {
    width: unset;
    float:unset;
}

.form-switch {
    padding-left:10px;
}
.form-switch div.checker input {
    opacity:1;
    border: 2px solid #dce1e4;
    background-repeat: no-repeat;
    width: 35px;
}
.form-switch div.checker input:focus {
    outline-offset:1px !important;
}
.form-switch div.checker {
    background:none;
    margin-right:20px;
}
.form-switch div.checker span {
    display:unset !important;
}
.form-switch .form-check-input {
    margin-left: 0px;
}

.bb-icon, .bb-icon-no-hover {
    fill: currentColor;
    transition: 0.3s;
}

.bb-icon:hover {
    fill: white !important;
}

/* PAA "lure" hint (partials/ai_hint) + the small mint balloon, reused in the
   AI-assistent tab label of distribution / advertisement / rayons. */
.ai-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    cursor: pointer;
    color: #1b7a4b;
    font-size: .88rem;
    font-weight: 600;
}
.ai-hint:hover .ai-hint-text { text-decoration: underline; }
.ai-hint:hover .ai-hint-bubble { transform: scale(1.12); }
.ai-hint-bubble {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    background: #d6f5e3;
    color: #1b7a4b;
    border: 1.5px solid #8fdcb6;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
    transition: transform .12s ease;
    vertical-align: middle;
}
.ai-hint-bubble > span { font-size: .85rem; line-height: 1; }
.ai-hint-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 9px 0 0;
    border-color: #d6f5e3 transparent transparent transparent;
}
/* ACB (AiChatBot) layout: keep the whole panel within the viewport. The body
   is a flex column; the message list scrolls (needs min-height:0 to actually shrink
   instead of growing past the bottom) and the controls are capped so a long option
   list scrolls within itself — so the send/choice area stays visible at the bottom. */
#acbPanel .offcanvas-body {
    min-height: 0;
    overflow: hidden;
}
#acbPanel #acb-messages {
    min-height: 0;
}
#acbPanel #acb-controls {
    max-height: 50%;
    overflow-y: auto;
    flex-shrink: 0;
}

/* Standalone iframe embed (acb/embed.blade.php): the chat fills the whole iframe
   instead of sliding in as an offcanvas. The #acbPanel above is reused as a plain
   full-viewport flex column so all the chat styling still applies. */
.acb-embed-page,
.acb-embed-page body {
    margin: 0;
}
.acb-embed-page #acbPanel.acb-embed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    max-width: 100%;
}

/* ACB (AiChatBot) choice buttons: a light-blue fill so the user immediately
   sees these are selectable answers. Scoped to the chat panel. */
#acbPanel .acb-choice {
    background-color: #d6ecfb;
    border: 1.5px solid #8fc8ec;
    color: #155e8a;
    font-weight: 600;
}
#acbPanel .acb-choice:hover,
#acbPanel .acb-choice:focus {
    background-color: #bfe0f7;
    border-color: #5fa8db;
    color: #0f4763;
}
/* A toggled multi-select choice (e.g. a newspaper linked to a file). */
#acbPanel .acb-choice.active {
    background-color: #155e8a;
    border-color: #155e8a;
    color: #fff;
}
/* A "group" choice that opens further sub-filters (e.g. Whize segmenten) — light green so
   it's clear more filters sit underneath it. */
#acbPanel .acb-choice.acb-choice-group {
    background-color: #d8f0d8;
    border-color: #8fce8f;
    color: #1f6b1f;
}
#acbPanel .acb-choice.acb-choice-group:hover,
#acbPanel .acb-choice.acb-choice-group:focus {
    background-color: #c4e8c4;
    border-color: #6cba6c;
    color: #14501a;
}
#acbPanel .acb-choice.acb-choice-group.active {
    background-color: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
}

/* ACB (AiChatBot) lure balloon: same shape as the PAA hint but light-blue. */
.ai-hint.acb-hint { color: #155e8a; margin-left: 18px; }
.acb-hint .ai-hint-bubble {
    background: #d6ecfb;
    color: #155e8a;
    border-color: #8fc8ec;
}
.acb-hint .ai-hint-bubble::after {
    border-color: #d6ecfb transparent transparent transparent;
}

/* AI-assistent tab "history": recently applied commands shown as clickable chips above
   the textarea. Long commands are truncated with an ellipsis. */
.ai-history-item {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On a narrower screen (tablet / mobile width) the header PAA lure collapses to just
   the balloon — the text is hidden to save space, the balloon (.ai-hint-bubble) stays. */
@media (max-width: 991.98px) {
    .navbar .ai-hint .ai-hint-text {
        display: none;
    }
    .navbar .ai-hint {
        gap: 0;
    }
}
/* AI-assistent tab (distribution / advertisement / rayons): green, bold label + green
   icon, no background/border accent. The .active selector (ID + class) keeps it green
   even when Bootstrap marks the tab active. */
#pills-ai-tab,
#pills-ai-tab:hover,
#pills-ai-tab:focus,
#pills-ai-tab.active {
    color: #1b7a4b;
    font-weight: 700;
}
#pills-ai-tab i {
    color: #1b7a4b;
}
/* Responsive label swap (handled by partials/ai_tab_label): hide "PAA" until the JS
   decides the full "AI-assistent" no longer fits on one line. */
#pills-ai-tab .ai-tab-short {
    display: none;
}

/* =========================================================================
   Fixed left sidebar (desktop) + collapse-to-icons toggle.

   - The sidebar stays put while the page scrolls and gets its OWN scrollbar
     when it is taller than the viewport (overflow-y on .page-sidebar-inner).
   - The collapse toggle (top-right of the menu, #sidebar-collapse-toggle)
     shrinks the bar to icons only via body.sidebar-collapsed; hovering the
     collapsed bar expands it as an overlay so labels and the normal
     accordion submenus work exactly as in the expanded state.
   - Scoped to html.standalone (set before first paint in head.blade.php, so
     never inside the iframe embed and no load flash) and to >=768px. Below
     768px the existing mobile hamburger/overlay behaviour is untouched
     (.sidebar is display:none there).
   ========================================================================= */
@media (min-width: 768px) {
    html.standalone .page-sidebar {
        position: fixed;
        top: 60px;            /* sit directly below the fixed 60px header */
        left: 0;
        bottom: 0;
        width: 200px;
        padding-top: 0;       /* top offset is handled by top:60px above */
        z-index: 998;
        overflow: visible;
        /* No explicit background here: the portal's menu colour is applied to
           .sidebar via the inline <style> in head.blade.php (dark mode overrides
           it). Setting one would out-specify that and paint the column white. */
    }

    html.standalone .page-sidebar-inner {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Reserve space for the now out-of-flow fixed sidebar. */
    html.standalone .page-inner {
        margin-left: 200px;
    }

    .sidebar-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .sidebar-collapse-toggle {
        flex: 0 0 auto;
        padding: 4px 6px;
        font-size: 13px;
        line-height: 1;
        cursor: pointer;
        /* Colour + hover colour come from the portal's menu_text_color /
           menu_hover_text_color (inline <style> in head.blade.php, dark mode
           overrides them) so they match the menu items exactly. */
    }

    /* ---- Collapsed: icons only (40px bar) ---- */
    html.standalone body.sidebar-collapsed .page-sidebar {
        width: 40px;
    }
    html.standalone body.sidebar-collapsed .page-inner {
        margin-left: 40px;
    }
    /* Deterministically hide every label / caret / submenu so only the icons
       remain (relying on overflow clipping was unreliable). */
    html.standalone body.sidebar-collapsed .menu-item-title,
    html.standalone body.sidebar-collapsed .menu.accordion-menu > li > a > .arrow,
    html.standalone body.sidebar-collapsed .menu.accordion-menu .sub-menu {
        display: none !important;
    }
    /* Keep the icon at a FIXED position (same left padding as the hover state)
       and vertically centred, so expanding on hover never moves it — only the
       label appears to its right. The 8px left padding keeps the icon roughly
       centred in the 40px bar while staying identical to the expanded state. */
    html.standalone body.sidebar-collapsed .menu.accordion-menu > li > a {
        padding-left: 8px !important;
        padding-right: 0 !important;
        text-align: left;
    }
    /* Fixed-width, centred icon box so every icon (regardless of glyph width)
       has its centre at 8px + 12px = 20px — the same centre as the toggle
       above, which is centred in the 40px bar. */
    html.standalone body.sidebar-collapsed .menu.accordion-menu a .menu-icon {
        display: inline-block;
        width: 24px;
        text-align: center;
        vertical-align: middle;
    }
    /* Header: hide the "Menu" title but keep its height so nothing shifts up,
       and keep the header layout identical between resting and hover. */
    html.standalone body.sidebar-collapsed .menu-title {
        display: inline-block;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }
    /* The header sits inside a Bootstrap .row whose negative gutter margins
       shift it left of the menu's origin; neutralise them so the toggle shares
       the same x-origin as the icons below. */
    html.standalone body.sidebar-collapsed .page-sidebar-inner > .row {
        margin-left: 0;
        margin-right: 0;
    }
    html.standalone body.sidebar-collapsed .sidebar-header-row {
        justify-content: flex-start;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Pin the toggle to a 40px box (the collapsed bar width) and centre the
       icon in it, so it sits centred above the icons below and stays put when
       the bar expands on hover. */
    html.standalone body.sidebar-collapsed .sidebar-collapse-toggle {
        width: 40px;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    /* The default divider margin (0 16px) leaves almost nothing in a 40px bar;
       tighten the side margins so it clearly reads as a separator. */
    html.standalone body.sidebar-collapsed hr.menu-divider {
        margin-left: 6px;
        margin-right: 6px;
    }

    /* ---- Collapsed + hover: expand as an overlay over the content ----
       Suppressed via .sidebar-suppress-hover right after collapsing (while the
       cursor is still on the sidebar) so the collapse feels immediate; the
       suppression lifts as soon as the mouse leaves the sidebar once. Only the
       labels / submenus are revealed — the icons, paddings and header stay put
       so nothing jumps. */
    html.standalone body.sidebar-collapsed:not(.sidebar-suppress-hover) .page-sidebar:hover {
        width: 220px;
        z-index: 1000;
        -webkit-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
        /* Expand instantly: animating the width would reflow the labels mid-
           transition (they pop in while the bar is still narrow), which reads
           as the menu jumping. */
    }
    html.standalone body.sidebar-collapsed:not(.sidebar-suppress-hover) .page-sidebar:hover .menu-item-title,
    html.standalone body.sidebar-collapsed:not(.sidebar-suppress-hover) .page-sidebar:hover .menu.accordion-menu > li > a > .arrow {
        display: inline !important;
    }
    html.standalone body.sidebar-collapsed:not(.sidebar-suppress-hover) .page-sidebar:hover .menu.accordion-menu li.open > .sub-menu {
        display: block !important;
    }
}

/* Inline header search (desktop only, >=768px). On mobile the .show-search icon and
   the slide-down .search-form remain; from md up that icon is hidden and this centered
   field takes over for faster searching. */
@media (min-width: 768px) {
    .header-search-inline {
        flex: 0 1 480px;
        max-width: 480px;
        align-items: center;
        margin: 0;
    }
    .header-search-inline .input-group-text,
    .header-search-inline .form-control {
        height: 44px;
        border-color: #DDD;
    }
    .header-search-inline .input-group-text {
        background: transparent;
        border-right: 0;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    .header-search-inline .input-group-text i {
        color: #999;
    }
    .header-search-inline .form-control {
        border-left: 0;
        box-shadow: none;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}

/* Diagnostic "(AI-bron: …)" source tag prefixed to AI assistant replies on
   local/staging (PAA/ACB). On its own line, smaller, italic, grey in light mode. */
.ai-source-tag {
    display: block;
    font-size: 0.8em;
    font-style: italic;
    color: #6c757d;
}

/* Dropzone upload-error tooltip: give the longer "…, zie aanleverspecificaties."
   message room so it doesn't clip against the bottom edge. Higher specificity than
   the plugin rule so it wins regardless of stylesheet order; the pointer (:after)
   keeps its position over the thumbnail. */
.dropzone .dz-preview.dz-error .dz-error-message {
    width: 175px;
    padding: 0.6em 1.1em 0.75em;
    line-height: 1.35;
}