/*
 * 🪵🪓🪚🌲🌳 PROJECT NIRAK 🪵🪓🪚🌲🌳
 *
 * Copyright (c) 2025.
 * Made with heart ❤ and much coffee ☕ by Project Nirak for FRITZ EGGER GmbH & Co. OG
 *
 * @version   Pimcore XI
 * @copyright Copyright (C) 2002-2025 Project Nirak
 * @author    Nikolaus Flamann <nikolaus@nirak.at>
 * @license   https://nirak.at/license
 * @license   GNU General Public License v3.0 (GPL-3.0)
 *            See https://www.gnu.org/licenses/gpl-3.0.html for details.
 */

/* Fonts */

@font-face {
    font-family: 'MProNorm';
    src: url('/static/fonts-mp/MetaPro.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*@font-face {
    font-family: 'MProNorm';
    src: url('/static/fonts-mp/MetaPro-Medium.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}*/

/*@font-face {
    font-family: 'MProNorm';
    src: url('/static/fonts-mp/MetaPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}*/

@font-face {
    font-family: 'MProMed';
    src: url('/static/fonts-mp/MetaPro-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Override Bootstrap Vars, are they used? */
:root {
    --gauge-size-multiplier: 0.2;
    --blue: #199FFF;
    --indigo: #3b5998;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #E31937; /*#dc3545;*/
    --orange: #E98849; /*#fd7e14;*/
    --yellow: #FFE26E; /*#ffc107;*/
    --green: #50BE00; /*#28a745;*/
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #7C7C7C; /*#6c757d;*/
    --gray-dark: #494949; /*#343a40;*/
    --primary: #E31937; /*#007bff;*/
    --secondary: #7C7C7C; /*#6c757d;*/
    --success: #50BE00; /*#28a745;*/
    --info: #17a2b8;
    --warning: #E98849; /*#ffc107;*/
    --danger: #FF0000; /*#dc3545;*/
    --light: #F6F6F6; /*#f8f9fa;*/
    --dark: #494949; /*#343a40;*/
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1480px; /* 1200 */
    /*--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
    --font-family-sans-serif: 'MProNorm', sans-serif;
    --font-family-monospace: 'MProNorm', sans-serif;
}

body {
    margin: 0;
    font-family: 'MProNorm', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #494949;
    text-align: left;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'MProMed', sans-serif;
}

h1 {
    font-size: 2.2rem;
}

b, strong, .font-weight-bold {
    font-weight: normal;
    font-family: 'MProMed', sans-serif;
}

/* Größerer Contentbereich */
.container-xl {
    max-width: 1480px;
}

.card {
    border-radius: 0 0 4px 4px;
}

/*Inputs mit Border Radius*/
.input-group > .form-control, .input-group > .form-control-plaintext {
    border-radius: 4px 0 0 4px;
}

.input-group-text {
    border-radius: 0 4px 4px 0;
}

.form-control {
    border-radius: 4px;
}

/*Tabs*/
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #e31937;
    background-color: #fff;
    /* border-color: #adb5bd #adb5bd #fff; */
    border-top: 2px solid #d50022 !important;
}

.nav-tabs .nav-link {
    border: 0;
    border-top: 2px solid transparent;
}

.nav-tabs .nav-link:hover {
    border-top: 2px solid #E3E3E3;
}

.nav-tabs {
    border-bottom: 0;
}

/*Pills*/
.nav-pills .nav-link {
    color: #494949;
    background-color: #F6F6F6;
    font-size: 15px;
    padding: 0.5rem 0.5rem 0.2rem 0.5rem;
}

.nav-pills .nav-link:hover {
    /*color: #fff;*/
    /*background-color: #e31937;*/
    background-color: #D1D1D3;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    /*background-color: #e31937;*/
    background-color: #AFAFAF;
}

/*Buttons (Border Radius)*/
.btn {
    border-radius: 4px;
}

.btn-primary {
    color: #fff;
    background-color: #d50022;
    border-color: #d50022;
    border-radius: 4px;
}


/* Application CSS */
#confirmations {
    font-size: 0.9rem;
}

#logo {
    max-width: 600px;
    padding-bottom: 60px;
}

.content #site {
    margin: 20px;
}

.pdf .gauge {
    display: none;
}

.confirmation-true i {
    /*background: #89ff89;*/
}

li.confirmation-false {
    color: #d50022;
}

li.confirmation-true > [data-hint] {
    display: none;
}

[data-static-value],
[data-calculated-value],
[data-unit] {
    font-weight: 600;
}

.list-item-heading {
    background: rgb(246, 246, 246);
    font-weight: 600;
}

/* Gauge */
.gauge {
    position: relative;
    overflow: hidden;

    display: inline-block;
    width: calc(200px * var(--gauge-size-multiplier));
    height: calc(100px * var(--gauge-size-multiplier));
    margin: 0 calc(20px * var(--gauge-size-multiplier));
}

.gauge-circle {
    position: relative;

    display: block;
    width: calc(200px * var(--gauge-size-multiplier));
    height: calc(100px * var(--gauge-size-multiplier));

    background: linear-gradient(to right, #1abc9c 0%, #f1c40f 50%, #c0392b 100%);

    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.gauge-min-max .gauge-circle {
    background: linear-gradient(to right, #c0392b 0%, #f1c40f 25%, #55bc1a 50%, #f1c40f 75%, #c0392b 100%);

}

.gauge-circle::before {
    content: "";

    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;

    display: block;
    width: calc(140px * var(--gauge-size-multiplier));
    height: calc(70px * var(--gauge-size-multiplier));
    margin-left: calc(-70px * var(--gauge-size-multiplier));

    background: #fff;

    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.gauge-value {
    position: absolute;
    top: 0;
    left: 0;

    width: calc(200px * var(--gauge-size-multiplier));
    height: calc(200px * var(--gauge-size-multiplier));

    background: transparent;

    transform: rotate(20deg) translate3d(0, 0, 0);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: all .3s ease-in-out;
}

.gauge-value::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    display: block;
    width: calc(202px * var(--gauge-size-multiplier));
    height: calc(102px * var(--gauge-size-multiplier));

    background: #f2f2f2;

    border-radius: 50% 50% 50% 50% / 100% 100% 0 0;
}

.tooltip-inner {
    max-width: 300px;
}

.full-image {
    width: 100%;
    height: auto;
    text-align: center;
}

.full-image img {
    width: 100% !important;
    height: auto;
    border-radius: 0 50px 0 50px;
}

/**
 * Maße Box
 */

.boxDrawing {
    width: 250px;
    height: 350px;
    margin: 30px;
}

.masse > div {
    border: 6px solid #f3c360;
}

.masse .rippen div {
    background: #f3c360;
    border-color: #f3c360 !important;
}

.masse.stuetzen > div {
    border-color: #c2c2c2;
}

.masse.schwelle > div {
    border-left-color: #c2c2c2;
    border-right-color: #c2c2c2;
}

.masse.schwelle .rippen div {
    background: #c2c2c2;
}

.masse .breite {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 102%;
    text-align: center;
}

.masse .breite span:after,
.masse .hoehe span:after,
.masse .abstand span:after {
    content: 'm';
    margin-left: -1px;
}

.masse .hoehe {
    position: absolute;
    right: 102%;
    top: 45%;
    text-align: center;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    transform-origin: center center;
    transform: rotate(-90deg);
    min-width: 62px;
}

.masse .abstand {
    position: absolute;
    left: 27%;
    right: 0;
    top: 50%;
    /*transform: translateY(-50%);*/
    text-align: center;
}

.withIcon .bi {
    display: block;
    font-size: 25px;
    margin-bottom: -8px;
}

.withIcon span {
    font-size: 13px;
}

.masse .rippen div {
    position: absolute;
    top: 0;
    bottom: 0;
}

.masse .rippen div:nth-child(1) {
    left: 21%;
    right: 74%;
}

.masse .rippen div:nth-child(2) {
    left: 47%;
    right: 47%;
}

.masse .rippen div:nth-child(3) {
    left: 74%;
    right: 21%;
}

.masse .drawingArrow {
    position: absolute;
    color: #AFAFAF;
}

.masse .drawingArrow .bi {
    display: block;
    font-size: 24px;
    line-height: 1;
    margin-top: -5px;
}

.masse .drawingArrow span {
    display: inline-block;
    font-size: 13px;
}

.arrowFvwEK {
    top: 2%;
    right: 105%;
    text-align: right;
}

.arrowFd {
    bottom: 4%;
    left: -2%;
    text-align: left;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-90deg);
    transform-origin: center center;
    transform: rotate(-90deg);
    min-width: 62px;
}

.arrowFd bi {
    margin-top: 0;
    margin-bottom: -7px;
}

.arrowFcdi {
    bottom: 60%;
    left: 24%;
    text-align: left;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform-origin: center center;
    transform: rotate(90deg);
    min-width: 62px;
}

.arrowFcdi .bi, .arrowFcda .bi {
    margin-top: 0;
    margin-bottom: -10px;
}

.arrowFcda {
    bottom: 60%;
    left: 51%;
    text-align: left;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(90deg);
    transform-origin: center center;
    transform: rotate(90deg);
    min-width: 62px;
}

/**
 * PDF Styles
 */

.pagebreak {
    page-break-after: always;
}