body {
    background-color: rgb(82, 86, 89);
}

canvas, .canvas-container {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.pdf-data-body {
    height: 20rem;
    width: 100%;
}

.checkbox-size {
    max-height: 0.85rem;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    z-index: 1000;
    top: 50%;
    left: 50%;
    opacity: 100%;
    position: fixed;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader-wrapper {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 0px;
    opacity: 75%;
    background: black;
}

.toolbar {
    width: 100%;
    background-color: rgb(50, 54, 57);
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#pdf-container {
    margin-top: 60px;
    padding-left: 10px;
    text-align: center;
}

button:focus {
    outline: 0;
}

.toolbar .tool {
    display: inline-block;
    color: #fff;
    height: 100%;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 5px;
}

.toolbar .tool label,
.toolbar .tool select,
.toolbar .tool input {
    display: inline-block;
    width: auto;
    height: auto !important;
    padding: 0;

}

.toolbar .tool input {
    width: 50px;
}

.toolbar .tool .color-tool {
    height: 25px;
    width: 25px;
    border-radius: 25px;
    border: 0;
    cursor: pointer;
    display: inline-block;
}

.toolbar .tool .color-tool.active {
    -webkit-box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.75);
}

.toolbar .tool:nth-last-child(1) {
    float: right;
}

.disabled-button {
    opacity: 0.65;
    background-color: #48594c !important;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.w-3-4 {
    width: 75%
}


.w-2-4 {
    width: 50%
}

.mw-50 {
    min-width: 50%;
}

.toolbar .tool .btn {
    margin-bottom: 0.5rem;
}

.toolbar .tool .tool-button {
    background-color: rgb(50, 54, 57);
    border: 1px solid rgb(50, 54, 57);
    color: #fff;
    cursor: pointer;
}

.toolbar .tool .tool-button:hover,
.toolbar .tool .tool-button.active {
    background-color: rgb(82, 86, 89);
    border-color: rgb(82, 86, 89);
}


.textLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
}

.textLayer span,
.textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    z-index: 10;
}

.textLayer .highlight {
    position: relative;
    margin: -1px;
    padding: 1px;
    background-color: rgba(180, 0, 170, 1);
    border-radius: 4px;
}

.textLayer .highlight.begin {
    border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
    border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
    border-radius: 0;
}

.textLayer .highlight.selected {
    background-color: rgba(0, 100, 0, 1);
}

.textLayer ::-moz-selection {
    background: rgba(0, 0, 255, 0.1);
    z-index: 10;
}

.textLayer ::selection {
    background: rgba(0, 0, 255, 0.1);
    z-index: 10;
}

.textLayer .endOfContent {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    bottom: 0;
    z-index: -1;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.textLayer .endOfContent.active {
    top: 0;
}


.annotationLayer section {
    position: absolute;
    text-align: initial;
}

.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
    position: absolute;
    font-size: 1em;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover {
    opacity: 0.2;
    background: rgba(255, 255, 0, 1);
    box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
    position: absolute;
    cursor: pointer;
}

.annotationLayer .textWidgetAnnotation input,
.annotationLayer .textWidgetAnnotation textarea,
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
    background-color: rgba(0, 54, 255, 0.13);
    border: 1px solid transparent;
    box-sizing: border-box;
    font-size: 9px;
    height: 100%;
    margin: 0;
    padding: 0 3px;
    vertical-align: top;
    width: 100%;
}

.annotationLayer .choiceWidgetAnnotation select option {
    padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
    border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
    font: message-box;
    font-size: 9px;
    resize: none;
}

.annotationLayer .textWidgetAnnotation input[disabled],
.annotationLayer .textWidgetAnnotation textarea[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
    background: none;
    border: 1px solid transparent;
    cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
.annotationLayer .buttonWidgetAnnotation.radioButton input:hover {
    border: 1px solid rgba(0, 0, 0, 1);
}

.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
    background: none;
    border: 1px solid transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
    background-color: rgba(0, 0, 0, 1);
    content: "";
    display: block;
    position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
    height: 80%;
    left: 45%;
    width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
    transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
    transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
    border-radius: 50%;
    height: 50%;
    left: 30%;
    top: 20%;
    width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
    font-family: monospace;
    padding-left: 2px;
    padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
    /*
     * Letter spacing is placed on the right side of each character. Hence, the
     * letter spacing of the last character may be placed outside the visible
     * area, causing horizontal scrolling. We avoid this by extending the width
     * when the element has focus and revert this when it loses focus.
     */
    width: 115%;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
}

.annotationLayer .popupWrapper {
    position: absolute;
    width: 20em;
}

.annotationLayer .popup {
    position: absolute;
    z-index: 200;
    max-width: 20em;
    background-color: rgba(255, 255, 153, 1);
    box-shadow: 0 2px 5px rgba(136, 136, 136, 1);
    border-radius: 2px;
    padding: 6px;
    margin-left: 5px;
    cursor: pointer;
    font: message-box;
    font-size: 9px;
    white-space: normal;
    word-wrap: break-word;
}

.annotationLayer .popup > * {
    font-size: 9px;
}

.annotationLayer .popup h1 {
    display: inline-block;
}

.annotationLayer .popup span {
    display: inline-block;
    margin-left: 5px;
}

.annotationLayer .popup p {
    border-top: 1px solid rgba(51, 51, 51, 1);
    margin-top: 2px;
    padding-top: 2px;
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
    cursor: pointer;
}


.xfaLayer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    transform-origin: 0 0;
}

.xfaLayer * {
    color: inherit;
    font: inherit;
    font-style: inherit;
    font-weight: inherit;
    font-kerning: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-decoration: inherit;
    vertical-align: inherit;
    box-sizing: border-box;
    background: transparent;
}

.xfaLayer a {
    color: blue;
}

.xfaRich li {
    margin-left: 3em;
}

.xfaFont {
    color: black;
    font-weight: normal;
    font-kerning: none;
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0;
    text-decoration: none;
    vertical-align: 0;
}

.xfaDraw {
    z-index: 100;
}

.xfaExclgroup {
    z-index: 200;
}

.xfaField {
    z-index: 300;
}

.xfaRich {
    z-index: 300;
    line-height: 1.2;
}

.xfaSubform {
    z-index: 200;
}

.xfaLabel {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
}

.xfaCaption {
    flex: 1 1 auto;
}

.xfaBorderDiv {
    background: transparent;
    position: absolute;
    pointer-events: none;
}

.xfaWrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.xfaContentArea {
    overflow: hidden;
}

.xfaTextfield,
.xfaSelect {
    background-color: rgba(0, 54, 255, 0.13);
}

.xfaTextfield:focus,
.xfaSelect:focus {
    background-color: transparent;
}

.xfaTextfield,
.xfaSelect {
    width: 100%;
    height: 100%;
    flex: 100 1 0;
    border: none;
    resize: none;
}

.xfaLabel > input[type="radio"] {
    /* Use this trick to make the checkbox invisible but
         but still focusable. */
    position: absolute;
    left: -99999px;
}

.xfaLabel > input[type="radio"]:focus + .xfaCheckboxMark {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}

.xfaCheckboxMark {
    cursor: pointer;
    flex: 0 0 auto;
    border-style: solid;
    border-width: 2px;
    border-color: #8f8f9d;
    font-size: 10px;
    line-height: 10px;
    width: 10px;
    height: 10px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.xfaCheckbox:checked + .xfaCheckboxMark::after {
    content: attr(mark);
}

.xfaButton {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
}

.xfaButton:hover {
    background: Highlight;
}

.xfaRich {
    white-space: pre-wrap;
}

.xfaImage {
    width: 100%;
    height: 100%;
}

.xfaRich {
    width: 100%;
    height: auto;
}

.xfaPosition {
    display: block;
}

.xfaLrTb,
.xfaRlTb,
.xfaTb {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.xfaLr,
.xfaRl,
.xfaTb > div {
    flex: 1 1 auto;
}

.xfaTb > div {
    justify-content: left;
}

.xfaLr > div {
    display: inline;
    float: left;
}

.xfaRl > div {
    display: inline;
    float: right;
}

.xfaPosition {
    position: relative;
}

.xfaArea {
    position: relative;
}

.xfaValignMiddle {
    display: flex;
    align-items: center;
}

.xfaLrTb > div {
    display: inline;
    float: left;
}

.xfaRlTb > div {
    display: inline;
    float: right;
}

.xfaTable {
    display: flex;
    flex-direction: column;
}

.xfaTable .xfaRow {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
}

.xfaTable .xfaRow > div {
    flex: 1 1 auto;
}

.xfaTable .xfaRlRow {
    display: flex;
    flex-direction: row-reverse;
    flex: 1;
}

.xfaTable .xfaRlRow > div {
    flex: 1;
}

:root {
    --pdfViewer-padding-bottom: none;
    --page-margin: 1px auto -8px;
    --page-border: 9px solid transparent;
    --spreadHorizontalWrapped-margin-LR: -3.5px;
}

@media screen and (forced-colors: active) {
    :root {
        --pdfViewer-padding-bottom: 9px;
        --page-margin: 9px auto 0;
        --page-border: none;
        --spreadHorizontalWrapped-margin-LR: 4.5px;
    }
}

.pdfViewer {
    padding-bottom: var(--pdfViewer-padding-bottom);
}

.pdfViewer .canvasWrapper {
    overflow: hidden;
}

.pdfViewer .page {
    direction: ltr;
    width: 816px;
    height: 1056px;
    margin: var(--page-margin);
    position: relative;
    overflow: visible;
    border: var(--page-border);
    background-clip: content-box;
    /*-o-border-image: url(images/shadow.png) 9 9 repeat;*/
    /*border-image: url(images/shadow.png) 9 9 repeat;*/
    background-color: rgba(255, 255, 255, 1);
}

.pdfViewer.removePageBorders .page {
    margin: 0 auto 10px;
    border: none;
}

.pdfViewer.singlePageView {
    display: inline-block;
}

.pdfViewer.singlePageView .page {
    margin: 0;
    border: none;
}

.pdfViewer.scrollHorizontal,
.pdfViewer.scrollWrapped,
.spread {
    margin-left: 3.5px;
    margin-right: 3.5px;
    text-align: center;
}

.pdfViewer.scrollHorizontal,
.spread {
    white-space: nowrap;
}

.pdfViewer.removePageBorders,
.pdfViewer.scrollHorizontal .spread,
.pdfViewer.scrollWrapped .spread {
    margin-left: 0;
    margin-right: 0;
}

.spread .page,
.pdfViewer.scrollHorizontal .page,
.pdfViewer.scrollWrapped .page,
.pdfViewer.scrollHorizontal .spread,
.pdfViewer.scrollWrapped .spread {
    display: inline-block;
    vertical-align: middle;
}

.spread .page,
.pdfViewer.scrollHorizontal .page,
.pdfViewer.scrollWrapped .page {
    margin-left: var(--spreadHorizontalWrapped-margin-LR);
    margin-right: var(--spreadHorizontalWrapped-margin-LR);
}

.pdfViewer.removePageBorders .spread .page,
.pdfViewer.removePageBorders.scrollHorizontal .page,
.pdfViewer.removePageBorders.scrollWrapped .page {
    margin-left: 5px;
    margin-right: 5px;
}

.pdfViewer .page canvas {
    margin: 0;
    display: block;
}

.pdfViewer .page canvas[hidden] {
    display: none;
}

.pdfViewer .page .loadingIcon {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*background: url("images/loading-icon.gif") center no-repeat;*/
}

.pdfPresentationMode .pdfViewer {
    margin-left: 0;
    margin-right: 0;
}

.pdfPresentationMode .pdfViewer .page,
.pdfPresentationMode .pdfViewer .spread {
    display: block;
}

.pdfPresentationMode .pdfViewer .page,
.pdfPresentationMode .pdfViewer.removePageBorders .page {
    margin-left: auto;
    margin-right: auto;
}

.pdfPresentationMode:-webkit-full-screen .pdfViewer .page {
    margin-bottom: 100%;
    border: 0;
}

.pdfPresentationMode:fullscreen .pdfViewer .page {
    margin-bottom: 100%;
    border: 0;
}

.header {
    position: absolute;
    z-index: 5;
}

.w-2\/5 {
    width: 40%;
}

/* --- Preisrechner modal -------------------------------------------------- */
.boq-modal-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    z-index: 9999
}

.boq-modal-backdrop.is-open {
    display: flex
}

.boq-modal {
    width: min(880px, 95vw);
    background: #cfe5f7;
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
    padding: 14px
}

.boq-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.boq-modal__title {
    font: 600 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif
}

.boq-modal__close {
    border: 0;
    background: transparent;
    font-size: 24px;
    cursor: pointer;
    line-height: 1
}

.boq-modal__grid {
    display: grid;
    grid-template-columns: 1.5fr .6fr 1.5fr .6fr;
    gap: 0;
    border: 1px solid #78a8c5
}

.boq-cell {
    padding: 10px;
    border-right: 1px solid #78a8c5;
    border-bottom: 1px solid #78a8c5;
    background: #e3f0fb
}

.boq-cell--right {
    background: #bcd8ef
}

.boq-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #6ea3c3;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box
}

.boq-readonly {
    background: rgba(241, 238, 238, 0.55);
    padding-left: 0.35rem;
}

.boq-muted {
    font-size: 12px;
    opacity: .85;
    margin-top: 4px
}

.boq-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 10px
}

.calc-popup-btn {

}

.dialogue-btn {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #6ea3c3;
    background: #fff;
    cursor: pointer
}

.dialogue-btn.primary {
    background: #2b7de9;
    border-color: #2b7de9;
    color: #fff
}