@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.element-example {
    position: relative;
    text-align: left;
}
.comment_msg {

}

/*
Make sure user can only use pubble elements
 */
.delete-annotation,
.r6o-arrow-down {
    display: none !important;
}

.selected_msg {
    border-left: 4px solid #4483c4;
}
.a9s-annotation {
    transition: stroke 0.5s ease; /* Smooth transition for stroke property */

}
.a9s-annotation.hovered .a9s-inner, .a9s-selection .a9s-inner {
    stroke: #fff000;
    stroke-width: 2px;
    fill: rgba(222, 177, 22, 0.32);
}


.a9s-annotation.hovered .a9s-outer, .a9s-selection .a9s-outer {
    stroke-width: 1px !important
}


.element-example:before {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 9;
    content: ' ';
}

.over-border {
    border: 1px solid #005cbf;
    cursor: pointer;
}

.modal-xxl {
    max-width: min(96vw, 1880px);
}

.modal-content {
    background: #f7f7f7;
}

.chat .card {
    background-color: initial;
}


.showblocks .fr-view span.price-in-text {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none !important;
    background: #1b6ec2;
    color: #c1c1c1;
    cursor: default;
    white-space: nowrap;
}


.tab-content {
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
}


.showblocks .fr-view span.price-in-text:before {
    content: attr(data-price-type) ' \20AC' !important;
    font-size: 10px;
    vertical-align: middle;
    color: #c1c1c1;
}

#notificationbar {
    height: 0px;
    font-size: 18px;
    line-height: 52px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    color: #fff;
    vertical-align: middle;
    transition: height 0.25s ease-in;
    z-index: 999;
}

.connected-user {
    padding: 12px;
    border-radius: 24px;
    min-width: 38px;
    min-height: 38px;
    vertical-align: middle;
}

.connected-users {
    position: absolute;
    right: 32px;
    z-index: 0;
    top: 68px;
}

#kruimel {
    position: sticky;
    background-color: #353c3e;
    color: #fff;
    padding: 10px; /* margin: 0px; */

    margin-top: 0px !important;
    padding-left: 0px !important;
}

#kruimel .row {
    margin-left: 0px;
    margin-right: 0px;
}


.msg_textbox:focus, .valid {
    border: 0px !important;
    outline: 0px !important;
}

.msg_textbox {
    padding: 8px;
    border: 0px;
    resize: none;
    height: 100px;
}

.page-number .badge {
    border-radius: 4px;
    padding: 6px;
    opacity: .4;
}

.box-border-left:before {
    width: 1px;
    height: 100%;
    left: -1px;
    content: " ";
    position: absolute;
    background: #f7f7f7;
    z-index: 1;
}

.box-border-top:before {
    width: 101%;
    height: 1px;
    left: -1px;
    top: -1px;
    content: " ";
    position: absolute;
    background: #f0efef;
    z-index: 1;
}

.box-border-bottom:before {
    width: 101%;
    height: 1px;
    left: -1px;
    bottom: -1px;
    content: " ";
    position: absolute;
    background: #f7f7f7;
    z-index: 1;
}

.box-border-right:before {
    width: 1px;
    height: 100%;
    right: -1px;
    content: " ";
    position: absolute;
    background: #f7f7f7;
    z-index: 1;
}

.promotion-card .card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
}

.edition-page-info {
    width: 100%;
    text-align: center;
    position: absolute;
}

.page-number {
    font-family: Roboto, Arial;
    color: #000 !important;
    margin-top: 2px;
    display: block;
    font-size: 14px;
    text-align: center;
    min-height: 50px;
}

.page-number .oi:not(.visible) {
    display: none;
}

.page-number .oi {
    margin-top: 10px;
    color: #353c3e
}

.page-number .oi.unread {
    color: #e10e0e;
}


.comment-count-bubble {
    padding: 4px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: black;
    color: #fff;
}

.page-number:hover .oi {
    display: block;
}


.page-number {
    position: absolute;
    top: 12px;
    left: -24px;
}

.page-number .badge {
    width: 24px;
}

.page-preview:nth-child(even) .page-number {
    left: auto;
    right: -24px !important;
    top: auto;
    bottom: 12px;
}

.Body {
    z-index: 1000 !important;
}

.popover-header {
    border: 0px !important;
    background-color: #fff !important;
    padding-top: 0px !important;
}

/*always fill up*/
.tag-contents {
    position: absolute;
    bottom: 0px;
}

.tag-contents-top {
    top: 0px;
    bottom: auto;
}

.Prijstekst {
    font-size: 105% !important;
}

.narrow .HoofdnavigatieLink svg {
    width: auto !IMPORTANT;
    display: block;
    margin: 0 auto !important;
    margin-bottom: auto !important;
    margin-top: 18px !important;
}

#nav-layout p {
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: 'Overpass', Arial, sans-serif;
}

p[class*="naam"] {
    font-weight: 800;
}

.modal {
    z-index: 10500;
}

.second-toolbar #logo {
    display: none !important;
}

.Aanbiedingspanel {
    background-color: #e80511 !important;
    color: #fff;
}

#choose-planner-mode img {
    filter: invert(1);
    height: 20px;
    vertical-align: middle;
    display: inline;
    margin-right: 4px;
}

#choose-planner-mode .active {
    background: #005cbf
}

.modal-backdrop {
    z-index: 10400;
}

.page-preview form {
    width: 100%;
    height: 100%;
}

#choose-planner-mode {
    z-index: 99;
    position: sticky;
    top: 20px;
    width: 100%;
    text-align: center;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
}

.product-switch-target-button img {
    width: 15px;
    height: 15px;
    filter: invert(1);
    margin-bottom: 5px;
}


.product-switch-target-button
.grid-controls-buttoncontainer {
    margin: 0 auto;
    text-align: center;
}

.grid-controls-buttoncontainer--small {
    transform: scale(0.5);
}


.product-deleted:before, .product-deleted:after {
    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
}

.product-deleted-yellow:before, .product-deleted-yellow:after {
    background: yellow;
}

.product-deleted:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 9;
}


.product-switch-target-button {
    width: 100%;
    background: #0003;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 99;
    display: none;
}

.product-switch-target-button-container {
    display: flex;
    align-items: center;
    align-content: center;
    height: 100%;
}

.product-switch-mode .grid-controls-buttoncontainer {
    display: none;
}

.product-switch-mode .product-switch-target-button .grid-controls-buttoncontainer {
    display: block;
}

.product-switch-mode
.product-switch-target-button {
    display: block;
}

.product-subgrid {
    overflow: hidden;
    position: relative;
}

.image-description {
    max-height: 27px;
    overflow: hidden;
}

.tag-image-unfilled, .tag-text-unfilled {
    opacity: .1;
    transition: opacity 0.3s ease;
}

.tag-image-unfilled {
    background-color: lightblue;
    border: 1px solid #143a46;
    border-radius: 2px;
}

.target-highlight::before {
    content: '';
    position: absolute;
}

.target-highlight {
    overflow: hidden;
}

.target-highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.5) 50%, rgba(229, 172, 142, 0));
    transform: rotateZ(60deg) translate(-5em, 7.5em);
    animation: sheen 1s forwards;
}

@keyframes sheen {
    100% {
        transform: rotateZ(60deg) translate(1em, -9em);
    }
}


.tag-text-unfilled:hover {
    opacity: .6
}

.tag-image-unfilled:hover {
    opacity: .6
}

.partial-card p {
    margin-bottom: 0px !important;
}

.partial-card img {
    min-width: 400px;
    max-width: 450px;
}

.popover {
    width: 600px;
    max-width: 100%;
}

.product-details .card {
    flex-direction: row;
    cursor: pointer;
    border: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0px
}

.template-picker {
}

.template-pick img {
    max-width: 100%;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
}


.template-pick {
}

.ProductAction {
    width: 20px;
    height: 20px;
    background-image: url(/icons/divide.svg) !important;
    background-repeat: no-repeat;
    background-position: center;
}

del, ins {
    display: inline-flex;
}


.Productkeuze .divide,
.Teksten .divide,
.Productcategorie .divide,
.Productdetails .divide {
    transform: none !important;
}

.PlannerModeButton {
    display: none;
}

.Planner .PlannerButton,
.Productkeuze .ProductkeuzeButton,
.Productcategorie .ProductcategorieButton {
    display: inline-block;
    padding: 0px;
}


.Teksten .ProductAction {
    background-image: url(/icons/paragraph.svg) !important;
}

.Productkeuze .ProductAction {
    background-image: url(/icons/product.svg) !important;
}

.Productcategorie .ProductAction {
    background-image: url(/icons/label.svg) !important;
}

.Productdetails .ProductAction {
    background-image: url(/icons/comment.svg) !important;
}

.ProductAction {
    filter: invert(90%);
}

.grid-controls-buttoncontainer {
    background: rgba(0, 0, 0, 0.69);
    border-radius: 30px;
    width: 42px;
    height: 40px;
    padding-top: 8px;
    z-index: 99;
}

.blazor-context-menu__list {
    max-height: 368px;
    overflow-y: auto;
}

.page-category-data {
    font-size: 10px;
    max-height: 36px;
    overflow-y: auto;
    margin-top: 12px;
    line-height: 1.6;
}

.category-color {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
}

.page-category-data .category-color {
    width: 14px;
    height: 14px;
}

.page-category-data .category-color {
    margin-right: 2px;
}

.blazor-context-menu__list .category, .page-category-data .category {
    vertical-align: middle;
    margin-right: 14px;
}

.grid-controls {
    display: none;
}

[class*="product-grid-"] {
    background: #ededed;
    outline: 1px solid #b6b6b69e
}

/*
    these options  should only appear when the user is in .Planner mode
*/

.Planner [class*="product-grid-"]:hover > .grid-controls-top-left {
    display: block;
}


[class*="product-subgrid-"] {
    display: flex;
    align-items: center;
    outline: 1px solid #b6b6b6;
    position: absolute;
}

.grid-controls-top-left select {
    font-size: 12px;
    vertical-align: middle;
    border: 0px;
}

.grid-controls-top-left {
    z-index: 3;
    position: absolute;
    top: 5px;
    right: 10px;
}

.main {
    background: #f7f7f7;
}

.color-option {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-option:hover {
    border: 2px solid #000;
}
.color-option:focus {
    outline: none;
    border-color: #000;
}

.product-page-item-placeholder {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.product-page-item {
    padding: 0px;
    display: flex;
    flex-direction: row;
    background-size: contain;
    position: absolute;
    color: #5f5f5f;
    font-size: 8px;
    width: 100%;
    bottom: 0px;
    border-radius: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 0;
    height: calc(100% - 3px);
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    padding: 4px;
}

.product-page-item .category-color {
    position: absolute;
    bottom: 4px;
    right: 3px;
    width: 12px;
    height: 12px;
    margin-right: 0px;
}

.product-page-item .card-body {
    padding: 0px;
}

.product-page-item img {
    max-height: 100%;
    max-width: 33%;
    margin-left: 10px;
}

.product-in-grid img {
    max-height: 100%;
    max-width: 100%;
}

.grid-controls-centered {
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.grid-controls button {
    background: none;
    border: none;
}

.grid-controls-top-left button {
    padding: 0px;
    padding-left: 6px;
}

.grid-controls .sub-control {
    width: 12px;
}

.grid-controls .rotate {
    transform: rotate(90deg);
}


.Horizontal.divide {
    transform: rotate(90deg);
}

.grid-controls-visible .grid-controls-buttoncontainer {
    background: rgba(0, 0, 0, 0.49);
}

[class*="product-subgrid-"]:hover > .grid-controls,
.grid-controls-visible > .grid-controls  
{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
}


[class*="product-subgrid-"]:hover > .grid-controls-centered,
.grid-controls-visible > .grid-controls-centered {
    display: flex;
}

#imagePicker .image {
    max-width: 200px;
    float: left;
    cursor: pointer;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}


.card-body select {
    width: 100% !important;
    margin-bottom: 4px;
}

.card-body form {
    font-size: 12px;
    margin-top: 10px;
}


/* Pubble Navigation classes */
.narrow #plogo {
    transform: rotate(270deg);
    bottom: 50px;
    width: 34px;
    left: 15px;
}

#plogo {
    width: 100%;
    text-align: center;
    bottom: 17px;
    position: absolute;
    z-index: -1;
}

.sidebar
.nav-item {
    display: none !important;
}

.HoofdnavigatieLink {
    font: 90%/43px "Open Sans" !important;
    color: #fff;
    clear: both;
    margin-bottom: 10px;
    width: 100% !important;
    height: 26px !important;
    text-align: left !important;
    float: none;
    position: relative;
}

.HoofdnavigatieLink div:not(.InvoiceNumber) {
    width: 100%;
    margin-bottom: -5px;
    border-bottom: 1px solid #1f1f1f;
    opacity: .5;
    height: 2px !important;
    opacity: .5;
}

.narrow .HoofdnavigatieLink a {
    color: transparent !important;
}

.HoofdnavigatieLink a {
    white-space: nowrap;
    text-decoration: none;
    color: #e1e1e1 !important;
    vertical-align: middle;
    font-family: "Open Sans", Arial !important;
    font-size: 12px;
    line-height: 42px;
}

.HoofdnavigatieLink svg {
    height: 20px !important;
    margin-right: 4px;
    opacity: .8;
    vertical-align: middle;
    margin-bottom: 1px;
    color: #fff;
    width: 26px !IMPORTANT;
}

.vkl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #ed218c;
}

.rdh {
    background: #518ebd;
    width: 100%;
    position: absolute;
    height: 1px;
    bottom: 0;
}

.rdl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #a3c939;
}

.rdc {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #463693;
}

.fgl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #e35b5a;
}

.opml {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #00ace4;
}

.fcl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #93b0bc;
}

.rpl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #faa71d;
}

.wbl {
    width: 100%;
    position: absolute;
    height: 1px;
    display: block;
    bottom: 0;
    background: #44576b;
}


@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/css/fonts/overpass-v3-latin-regular.woff2) format("woff2")
}

@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/css/fonts/overpass-v3-latin-800.woff2) format("woff2")
}

@font-face {
    font-family: 'Overpass';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/css/fonts/overpass-v3-latin-800.woff2) format("woff2")
}