/* Layout */

html {
    scroll-padding-top: 12rem;
}

.main {
    max-width: 960px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

h1 .header-button,
h2 .header-button,
h3 .header-button,
h4 .header-button,
h5 .header-button {
    float: right;
    margin-left:0.5rem;
}

.header-button .header-button-image {
    width:2rem;
    height: 2rem;
    opacity: 0.5;
}

.header-button .header-button-image:hover {
    opacity: 1;
}


footer {
    margin-top: 5rem;
}

/* Fixes for browser-default typographic nonsense */

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

sub {
    top: 0.4em;
}

/* Menu bar additions */
header .project-section {
    line-height: 3rem;
    height: 3rem;
    margin-top:0.25rem;
    cursor: pointer;
    padding-left: 1rem;
    padding-right: 1rem;
    text-decoration: none;
    color: rgb(38, 38, 38);
}

header .project-section:hover {
    color: var(--orange);
    text-decoration:underline;
    text-decoration-thickness: 2px;
}

header .project-section .order-count {
    background: var(--orange);
    padding: 0.0em 0.5em;
    border-radius: 2rem;
    margin-left: 0.4em;
}

header .project-section:hover .order-count {
    color: white;
}

/* To allow scrolling up while dragging */
.drag-ongoing header {
    pointer-events: none;
}


/* <choose-one> handling */

choose-one {
    display: contents;
}

choose-one > :not(.choose-one-selected) {
    display: none;
}

/* Global styling for UI parts */

.attention {
    font-style: italic;
}

.attention .marker {
    background: var(--error-marker);
    border-radius: 3px;
    padding: 0em 0.2em;
    font-weight: bold;
}


/* Buttons */

button {
    cursor: pointer;
}

button .action-icon {
    display: inline;
    height: 1em;
    width: 1em;
    vertical-align: text-bottom;
}


button.warning-button {
    background-color: #df0000;
    color: white;
    font-weight: bold;
    border-width: 0px;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

button.warning-button:hover,
button.warning-button:active {
    background-color: darkred;
}

button.cancel-button {
    background-color: var(--darker-marker);
    color: white;
    font-weight: bold;
    border-width: 0px;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

button.cancel-button:hover,
button.cancel-button:active {
    background-color: var(--darkest-marker);
}


button.next-button,
button.submit-button {
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: repeat-x;
    color: white;
    font-weight: bold;
    border-width: 0px;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

button.next-button:disabled,
button.submit-button:disabled {
    background: var(--dark-marker);
    /* Use same ✖️ marking the disabled button for the cursor */
    cursor: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 16px'><text y='20'>✖️</text></svg>"), auto;

}

button.next-button:not(:disabled) .enabled,
button.next-button:disabled .disabled,
button.submit-button:not(:disabled) .enabled,
button.submit-button:disabled .disabled {
    display:inline;
}
button.next-button:disabled .enabled,
button.next-button:not(:disabled) .disabled,
button.submit-button:disabled .enabled,
button.submit-button:not(:disabled) .disabled {
    display:none;
}

button.next-button:disabled:hover,
button.submit-button:disabled:hover {
    background: var(--dark-marker);
}

button.next-button:hover,
button.next-button:active,
button.submit-button:hover,
button.submit-button:active {
    background-image: linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat: repeat-x;
    transition: .4s
}


.help-button {
    background-color: var(--light-marker);
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: bold;
    border: 1px solid var(--dark-marker);
    color: var(--font-color);
}

.help-button:hover,
.help-button:active {
    background-color:var(--light-marker--highlight);
}


/* Input styling */


input,
select {
    height: 2rem;
    border: 1px solid var(--dark-marker);
    padding: 0.25rem 0.5rem;
    font-size: 1em;
    border-radius: 3px;
    background-color: var(--background-color);
    color: var(--font-color);
}

textarea {
    border: 1px solid var(--dark-marker);
    padding: 0.25rem 0.5rem;
    font-size: 1em;
    border-radius: 3px;
    background-color: white;
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--light-marker);
    color: var(--font-color);
    cursor: default;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position:center right 0.25rem;
    padding-right: 1.5em;
    cursor: pointer;
}

select:disabled {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiIGZpbGw9IiM5ZjlmYTgiLz48L3N2Zz4=");
}


/* Global step styling */

.step {
    margin-top: 2rem;
}

.step.joined-with-previous {
    margin-top: 0rem;
}

.step .actions {
    text-align: right;
}



/* Global question styling */

.question {
    display: grid;
    grid-template-columns: 16rem 1fr 5rem 3rem;
    grid-template-rows: 2rem auto;
    grid-template-areas:
        "label input input help-button"
        "help help help help";

    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.question:first-child {
    margin-top: 0;
}
.question:last-child {
    margin-bottom: 0;
}

.question.without-help {
    grid-template-areas:
        "label input input input"
        "help help help help";
}

.question.with-suffix {
    grid-template-areas:
        "label input suffix help-button"
        "help help help help";
}

.question > label {
    grid-area: label;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    line-height: calc(2rem - 2px);
    vertical-align: middle;
    background-color: var(--light-marker);
    text-align: right;

    border: var(--dark-marker) 1px solid;
    border-right: none;

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 0 0.5rem;
    cursor: pointer;
}

.question.draw-attention > label {
  border-color: var(--orange-dark);
  background-color: var(--orange);
  color: white;
}

.question > label:hover {
  background-color: var(--light-marker--highlight);
}

.question > label:hover + input,
.question > label:hover + select,
.question > label:hover + .input-group :where(input, select) {
    background-color: var(--light-marker);
}


.question > input,
.question > select,
.question > textarea,
.question > .input-group,
.question > .item-list {
    grid-area: input;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.question.draw-attention input,
.question.draw-attention select {
    border-color: var(--orange-dark);
}

.question .input-group {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

.question .input-group > * {
    border-radius: 0;
    border-right: none;
    min-width: 0;
}

.question .input-group :last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: var(--dark-marker) 1px solid;
}


.question .suffix {
    grid-area: suffix;
    margin-left: 0.5rem;
    line-height: 2rem;
}


.question .help-button {
    grid-area: help-button;
    margin-left: 1rem;
}

.question .help {
    display: none;
    grid-area: help;

    margin-top: 0.25rem;
    margin-bottom: .5rem;
    background-color: var(--light-marker);
    padding: .25rem .5rem;
    border-radius: 0.25rem;
}

.question .help.active {
    display: block;
}


/* Range question */

.question.range > label,
.question.item-selector > label {
    border: var(--dark-marker) 1px solid;
    border-radius: 3px;
}

.question.range > input {
    margin-left: 1rem;
    margin-right: 1rem;
}


/* Summation display */

.question.summation .text {
    text-align: right;
    line-height: 2rem;
    padding-top: 1px;
}

.question.summation .suffix {
    border-top: 1px solid var(--font-color);
}


/* Text area */

.question.text-area textarea {
    resize: vertical;
    border: 1px solid var(--dark-marker);
    border-radius: 3px;
    border-top-left-radius: 0px;
}

.question.text-area {
    grid-template-rows: 2rem minmax(0rem, auto) auto;
    grid-template-areas:
        "label input input help-button"
        ".     input input ."
        "help help help help"
    ;
}

.question.text-area.without-help {
    grid-template-areas:
        "label input input input"
        ".     input input input"
        "help help help help"
    ;
}

/* Item selector */

.question.item-selector {
    grid-template-rows: 2rem minmax(0rem, auto) auto;
    grid-template-areas:
        "label input input help-button"
        ".     input input ."
        "help help help help"
    ;
}

.question.item-selector:last-child {
    margin-bottom: 1rem;
}


.question.item-selector.without-help {
    grid-template-areas:
        "label input input input"
        ".     input input input"
        "help help help help"
    ;
}

.question.item-selector .item-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 0.5rem;
    margin-left: .5rem;
}

.question.item-selector .item {
    border: 1px solid var(--dark-marker);
    background-color: var(--light-marker);
    cursor: pointer;
    border-radius: 3px;
    padding: .5rem;
    text-align: center;
}

.question.item-selector .item > img {
    width: 100%;
    border-radius: 3px;
}

.question.item-selector .item:hover {
    border-color: var(--orange-dark);
}

.question.item-selector input:checked + .item {
    outline: 2px solid var(--orange);
    border-color: var(--orange-dark);
}

.question.item-selector input:disabled + .item {
    opacity: 0.5;
}
.question.item-selector input:disabled + .item:hover {
    border-color: var(--dark-marker);
}

.question.item-selector input[type="radio"] {
    display: none;
}


/* Wizard-specific styling */

.main.selection-wizard {
    margin-top: 10.5rem;
}

.wizard p {
    margin: 1rem 0rem;
}

.wizard p:first-child {
    margin-top: 0rem;
}

.wizard .existing-project-notice .project-box {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    background-color: var(--background-color); 
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin: 1rem 0rem;
}

.wizard .new-project-information {
    margin: 1rem 0rem;
}


.progress-whiteout {
    position: fixed;
    left: 0;
    top: 3.5rem;
    width: 100%;
    z-index: 1;
    background-color: var(--background-color);
}

.progress-overlay {
    max-width: 960px;
    padding: 1rem 0 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--light-marker--highlight); 
    margin: auto;
}

.progress-indicator {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-columns: 0rem 1fr;
    grid-auto-flow: column;
}

/* Special handling for element that will contain the product progess segments */
.progress-indicator #product-progress {
    display: contents; /* When filled, this should be a non-layout element */
}

.progress-indicator .phase {
    display: contents;
}

.progress-indicator .connector {
    display: block;
    height: 2rem;
    margin-top: 0.5rem;
    margin-left: -2rem;
}

.progress-indicator > .phase:first-child .connector {
    display: none;
}

.progress-indicator .phase:not(.active):not(.done) {
    pointer-events: none;
}


.progress-indicator .phase {
    --connector-color: var(--light-marker);
}
.progress-indicator .phase:is(.active, .done) {
    --connector-color: var(--green-marker);
}


.progress-indicator .phase-indicator {
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
}

.progress-overlay a {
    text-decoration: none;
}

.progress-indicator .phase-bubble {
    text-align: center;
    height: 3rem;
    width: 3rem;
    line-height: calc(3rem - 6px);
    font-size: 2rem;
    border-radius: 100%;
    border: 2px solid transparent;
    color: white;
    text-shadow: -1px 0 var(--dark-marker), 0 1px var(--dark-marker), 1px 0 var(--dark-marker), 0 -1px var(--dark-marker);
    background-color: var(--light-marker);
}

.progress-indicator .phase.active .phase-bubble {
    background-color: var(--light-marker--highlight);
    border: 2px solid var(--green-marker);
}

.progress-indicator .phase.done .phase-bubble {
    background-color: var(--green-marker);
}


.progress-indicator .phase-subscript {
    margin-top: 0.5rem;
    text-align: center;
    color: var(--dark-marker);
    font-size:95%;
}

.progress-indicator .phase:hover .phase-subscript {
    text-decoration: underline;
}

.progress-indicator .phase.active .phase-subscript {
    color:var(--darker-marker);
    font-weight:bold;
}

.progress-indicator .phase:not(.done) .if-done {
    display: none;
}

.progress-indicator .phase.done .if-not-done {
    display: none;
}

.diffusers.step .product-group-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
}

.diffusers.step .product-group-title .snelselectie {
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.diffusers.step .product-group-title .snelselectie input {
    cursor: pointer;
}

.diffusers.step .product-group-title .snelselectie label {
    cursor: pointer;
    line-height: 2rem;
    padding-right:0.5rem;
}
/*
.progress-indicator .phase {
}

.progress-indicator .phase:not(.completed):not(.active) a {
    pointer-events: none;
}

.progress-indicator .phase:not(.completed) .phase-bubble {
    background-color: var(--light-marker);
}

.progress-indicator .phase.completed .phase-bubble {
}

.progress-indicator .phase:not(.completed).active .phase-bubble {
    background-color: var(--light-marker--highlight);
    border: 2px solid var(--green-marker);
}

.progress-indicator .phase-bubble {
    text-align:center;
    height:3rem;
    width:3rem;
    line-height:calc(3rem - 6px);
    font-size:2rem;
    border-radius:100%;
    border:2px solid transparent;
    color:white;
    text-shadow: -1px 0 var(--dark-marker), 0 1px var(--dark-marker), 1px 0 var(--dark-marker), 0 -1px var(--dark-marker);
}

.progress-indicator .phase-bubble,
.progress-indicator a.phase-bubble:active,
.progress-indicator a.phase-bubble:visited {
    color:white;
    text-decoration:none;
}

.progress-indicator a.phase-subscript,
.progress-indicator a.phase-subscript:active,
.progress-indicator a.phase-subscript:visited {
    color:var(--dark-marker);
    text-decoration:none;
}

.progress-indicator .phase.active:hover .phase-subscript,
.progress-indicator .phase.active:active .phase-subscript,
.progress-indicator .phase.completed:hover .phase-subscript,
.progress-indicator .phase.completed:active .phase-subscript {
    text-decoration: underline;
}

.progress-indicator .phase-subscript {
    text-align:center;
    color:var(--dark-marker);
    margin-top:0.5rem;
}

.progress-indicator .phase.active .phase-subscript {
    color:var(--darker-marker);
    font-weight:bold;
}

.progress-indicator a.phase,
.progress-indicator a.phase:active,
.progress-indicator a.phase:visited {
    color: white;
    text-shadow: -1px 0 var(--dark-marker), 0 1px var(--dark-marker), 1px 0 var(--dark-marker), 0 -1px var(--dark-marker);
    text-decoration:none;
}
*/

/*
.progress-indicator #product-progress:empty {
    /* When empty, we display placeholder visuals * /
    display: block;
    grid-column: 3 / 7;
    /* The properties below are effectively those of a `.segment:last-child` * /
    position: relative;
    background-color: var(--light-marker--highlighter);
    color: white;
    padding: 0.25rem;
    text-align: center;
    padding-right: 0;
}
.progress-indicator #product-progress:empty::after {
    content: "...";
    display: inline;
}
*/

/*
.progress-indicator .segment {
    position: relative;
    background-color: var(--light-marker--highlighter);
    color: white;
    padding: 0.25rem;
    text-align: center;
}
.progress-indicator .segment:first-child {
    padding-left: 0;
}
.progress-indicator .segment:last-child {
    padding-right: 0;
}

.progress-indicator .segment:not(.active, .done) {
    pointer-events: none;
    text-decoration: none;
}
.progress-indicator .segment.active {
    background-color: var(--orange);
}
.progress-indicator .segment.done {
    background-color: var(--green-marker);
}

.progress-indicator .marker {
    position: absolute;
    z-index: 1;
    --height: 2rem;
    right: -10px;
    top: calc(50% - var(--height) / 2);
    height: var(--height);
}
.progress-indicator .segment:last-child img {
    display: none;
}

.progress-indicator .segment::after {

    display: block;
    position: absolute;
    z-index: 1;
    --height: 2rem;
    right: -8px;
    top: calc(50% - var(--height) / 2);
    height: var(--height);
}
*/


/* Projects */

.project h1 {
    margin-top: 5rem;
    margin-bottom: 1rem;
}

.project .project-info p,
.project .empty p {
    margin: 1rem 0rem;
}

.project .project-info p:first-child,
.project .empty p:first-child {
    margin-top: 0;
}

.project .project-info p:last-child,
.project .empty p:last-child {
    margin-bottom: 0;
}


.project .empty {
    padding: 1rem;
    border: 1px dashed var(--dark-marker);
    border-radius: .5rem;
    margin-top: 1rem;
}

.project .project-info {
    margin-bottom: 2rem;
    background-color: var(--light-marker);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.project .project-info .actions {
    text-align: right;
}

.project .unset {
    font-style: italic;
    color: var(--darker-marker);
}

.project .order-group {
    margin-top: 2rem;
    /* Drag-and-drop related */
    padding-left: 1rem;
    margin-left: calc(-1rem - 5px);
    border-left: 5px solid transparent;
    border-radius: 5px;
    padding-right: 1rem;
    margin-right: calc(-1rem - 5px);
    border-right: 5px solid transparent;
}

.project .summary {
    padding-right: 1rem;
    text-align: right;
    font-size: 140%;
}

.project .summary.with-line {
    padding: 0.5rem 1rem 0rem 0rem;
    border-top: 2px solid var(--light-marker);
}

.project .summary .dimmed {
    color: #bbb;
}

.project .total {
    margin-top: 2rem;
}


/* Project view */

.project-view .orders-actions {
      border-bottom: 2px solid var(--light-marker);
      display: grid;
      grid-template-columns: 1fr auto;
      margin: 1rem 0rem;
      padding-bottom: 0.5rem;
      align-items: end;
}


/* Project new */

.project-new p {
    margin: 1rem 0rem;
}


/* Project edit */

.project-edit .placeholder-button {
    font-size: 100%;
    color: var(--darker-marker);
    border: 1px dashed var(--dark-marker);
    background-color: transparent;
    text-align: center;
    padding: 0.25rem 0rem;
    width: 100%;
    border-radius: 3px;
}

.project-edit .placeholder-button:hover {
    background-color: var(--light-marker);
    border-color: var(--darker-marker);
}

.project-edit .orders-actions {
      border-bottom: 2px solid var(--light-marker);
      display: grid;
      grid-template-columns: 1fr auto;
      margin: 1rem 0rem;
      padding-bottom: 0.5rem;
      align-items: end;
}

.project-edit .project-info.edit-mode .edit-pane {
    display: block;
}

.project-edit .project-info:not(.edit-mode) .edit-pane,
.project-edit .project-info.edit-mode .display-pane {
    display: none;
}

.project-edit .project-actions {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto auto;
}

.project-edit .group-footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}

.project-edit .add-room-box {
    margin-bottom: 2rem;
    background-color: var(--light-marker);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.project-edit .add-room-box .actions {
    text-align: right;
}

.project-edit .add-room-box .name-invalid-notice {
    font-style: italic;
}

.project-edit .order-group .empty-hint {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 1rem;
    border: 2px solid var(--orange);
    border-radius: .5rem;
    margin: 1rem 0rem;
}


.project-edit .order-card-fixture {
    position: relative;
    margin-left: -4rem;
    padding-left: 4rem;
}

.project-edit .order-card-fixture .remove-button {
    position: absolute;
    width: 2rem;
    height: 2rem;

    left: 1rem;
    top: 1.5rem;

    --remove-icon-color: rgba(0, 0, 0, 0.05);

    border: none;
    background-color: transparent;
}

.project-edit .order-card-fixture:hover .remove-button {
    --remove-icon-color: var(--light-marker);
}

.project-edit .order-card-fixture .remove-button:hover {
    --remove-icon-color: rgba(255, 0, 0, 0.8);
}

.drag-ongoing .project-edit .order-card-fixture .remove-button {
    display: none;
}

.project-edit .order-card.collapsed .product-header {
    position: relative;
    padding-left: 1.5rem;
}

.project-edit .order-card.collapsed .product-details {
    padding-left: 1.5rem;
}
.project-edit .order-card.collapsed .product-header {
    color: var(--font-color);
    background-color: var(--light-marker);
}
.project-edit .order-card.collapsed .product-header::before {
    --grab-handle-color: #0002;
    content: "";
    position: absolute;
    width: 14px;
    height: calc(100% - 8px);

    background-image: repeating-linear-gradient(45deg, var(--grab-handle-color), var(--grab-handle-color) 5px, transparent 5px, transparent 10px);
    background-size: 100%;
    background-repeat: repeat-y;
    top: 4px;
    left: 4px;
    border-radius: 3px;

    cursor: grab;
}


.project-edit .dragged {
    opacity: 0.5;
    pointer-events: none;
}

.project-edit .dropzone {
    border-left: 5px solid var(--orange);
    border-right: 5px solid var(--orange);
}

/* Special magic to disable all pointer events from all elements under order groups */
.drag-ongoing .order-group * {
    pointer-events: none;
}


/* Categories */

.category-view h1 {
    margin-bottom: 0.5rem;
}

.category-view h2 {
    margin-top: 2rem;
}

.category-view .category-head {
    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 0.5rem;
    align-items: center;
}

.category-view .category-head > img {
    border-radius: 3px;
    max-width: 100%;
    border: 2px solid var(--light-marker);
}

.category-view .breadcrumbs {
    color: var(--dark-marker);
}

.category-view .breadcrumbs .breadcrumb {
    color: var(--dark-marker);
}

.category-view .breadcrumbs .breadcrumb:hover {
    color: var(--orange-dark);
}


.category-view .category-info {
    margin: 1rem 0rem;
}

/* Clear all floats in the category-info, so following blocks are not impeded upon by our floating content */
.category-view .category-info::after {
    content: "";
    display: block;
    clear: both;
}

.category-view hr {
    border: none;
    border-bottom: 1px solid var(--light-marker--highlight);
    margin: 1.5rem 0rem;
}

.category-view .tiles {
    margin: 1rem 0rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row;
    gap: 1rem;
}

.category-view .tiles a.tile {
    background: var(--light-marker);
    padding: 0.5rem;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: var(--font-color);
}


.category-view .tiles a.tile:hover,
.category-view .tiles a.tile:focus {
    outline: 2px solid var(--orange);
}

.category-view .tiles .tile img {
    width: 100%;
    border-radius: 3px;
}

/** Offerte **/
.offer-entry {
    width: 100%;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
}

.offer-entry .offer-description {
    flex-basis: calc(100% - 28rem);
    flex-grow: 0;
    flex-shrink: 0;
    padding-left:0.6rem;
}

.offer-entry .offer-price-each, .offer-entry .quantity, .offer-entry .total_price {
    flex-basis: 7rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-left:0.5rem;
}

.offer-entry .offer-price-each, .offer-entry .quantity, .offer-entry .korting {
    text-align:center;
}

.offer-entry .total_price {
    margin-left:0.5rem;
}

.offer-entry .korting {
    flex-basis: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right:0.5rem;
    margin-left:-0.5rem;
}

.offer-entry .delete-placeholder {
    flex-basis: 2rem;
}

.offerte-sectie {
    margin-top:2rem;
}

.offerte-extra-uitleg {
    margin-top:0.5rem;
    margin-bottom:-1rem;
}

.offerte-korting-uitleg {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.kortingen {
    display: grid;
    grid-template-columns: calc(25% - 1.5rem) calc(25% - 1.5rem) calc(25% - 1.5rem) calc(25% - 1.5rem);
    grid-column-gap: 2rem;
    grid-row-gap: 0.5rem;
}

.kortingen .korting_entry {
    width: 100%;
    display: flex;
    line-height: 2rem;
    flex-shrink: 1;
}

.kortingen .korting_entry label {
    flex-basis: calc(80% - 5rem);
    flex-grow: 0;
    flex-shrink: 0;
    font-weight:bold;
}

.kortingen .korting_entry input {
    width: 5rem;
    text-align: center;
}

.kortingen .korting_entry span {
    flex-basis: 20%;
    flex-grow: 0;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

.order-group .extra-item {
    width: 100%;
    display:flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top:0.5rem;
    margin-bottom: 0.5rem;
    text-align:left;
    cursor: move;
    line-height: 2rem;
}

.order-group .extra-item .delete {
    flex-basis: 2rem;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.order-group .extra-item .item-description {
    flex-basis: calc(100% - 26rem);
    flex-grow: 0;
    flex-shrink: 0;
}

.order-group .extra-item .quantity, .order-group .extra-item .item-price-each, .order-group .extra-item .total_price {
    width: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-left:0.5rem;
}

.order-group .extra-item .korting {
    width: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right:0.5rem;
    text-align: right;
}


.order-group .extra-item .item-description input {
    width: 100%;
}

.order-group .extra-item .quantity input, .order-group .extra-item .item-price-each input {
    width: 80%;
    margin-left:0.25rem;
    text-align:center;
}

.order-group .extra-item .korting input {
    width: 70%;
    margin-right:0.15rem;
    text-align:center;
}

.order-group .subtotal-line {
    line-height: 2rem;
    height: 2rem;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}

.order-group .subtotal-line .subtotal {
    width: 7rem;
    margin-right: 2rem;
    float: right;
    border-top: 1px solid black;
    padding-left: 1.35rem;
    margin-left:2.2rem;
}

.total-line {
    margin-top: 0.5rem;
    line-height: 2rem;
    height: 2rem;
    width: 100%;
    font-weight: bold;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.total-line .buttons {
    width: 20rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.total-line .buttons form {
    margin-right: 0.5rem;
}

.total-line .total-text {
    width: 12rem;
    margin-right: 2rem;
    float: right;
    text-align: right;
}

.total-line .total-price {
    width: 6rem;
    margin-right: 2rem;
    float: right;
    border-top: 1px solid black;
    padding-left: 1.35rem;
}

.order-group .header {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    font-weight: bold;
    background-color: var(--light-marker);
    border-radius: 4px;
    padding: 0.5rem;

}

.order-group .header .item {
    width: calc(100% - 25.5rem);
}

.order-group .header .price, .order-group .header .quantity {
    width: 6.5rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-left:0.5rem;
    text-align: center;
}

.order-group .header .total-price {
    width: 8rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right:1rem;
    text-align: center;
}

.order-group .header .korting {
    width: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right:0.5rem;
    text-align: center;
}

.side-image-block {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.side-image-block .left {
    flex-basis: calc(100% - 7rem);
    flex-grow: 0;
    flex-shrink: 0;
}

.side-image-block .right {
    flex-basis: 6rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.side-image-block .right img {
    width: 5rem;
    height: 5rem;
}

.side-image-block .right img:first-child {
    margin-top:0.5rem;
}

/* Overview table */

.project-overview-table {
    width: 100%;
}

.project-overview-table tr:nth-child(odd) {
    background-color: var(--light-marker);
}

.project-overview-table th[data-sort-field] {
    cursor: pointer;
    user-select: none;
}

.project-overview-table th[data-sort-field]:hover {
    text-decoration: underline;
}

.project-overview-table th[data-sort-field].ascending::after {
    content: "▲";
}

.project-overview-table th[data-sort-field].descending::after {
    content: "▼";
}

.project-overview-table tr td.quantity,
.project-overview-table tr td.air-volume,
.project-overview-table tr td.worp,
.project-overview-table tr td.drukverlies,
.project-overview-table tr td.geluidsdrukniveau {
    text-align: center;
}


.preselected-category .item {
    width: 8.5rem;
    border: 1px solid var(--dark-marker);
    background-color: #eee;
    cursor: pointer;
    border-radius: 3px;
    padding: .5rem;
    text-align: center;
    outline: 2px solid var(--orange);
    border-color: var(--orange-dark);
}

.preselected-category .item > img {
    width: 100%;
    border-radius: 3px;
}

.preselected-category h3 {
    margin-bottom:0.5rem;
}