@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Open+Sans:wght@400;700&family=Raleway:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
    /* Colors */
    --active-navlink: #3284ff;

    /* Box Shadow */
    --price-shadow: 0px 4px 24px 6px rgba(0, 0, 0, 0.12);

    /* Transition Delay */
    --2ms-delay: all 0.2s ease-in-out;
}

html,
body {
    margin: 0;
    padding: 0 !important;
    width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: "Poppins", sans-serif;
    background-color: #ffffff;
}


.section {
    min-height: 100%;
}

p {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 1.6;
    color: #252525;
}

a {
    font-size: 14px;
    font-weight: 300;
    line-height: 120%;
    color: black;
    letter-spacing: 0.03em;
    -webkit-letter-spacing: 0.03em;
    -moz-letter-spacing: 0.03em;
    -ms-letter-spacing: 0.03em;
}

i {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 1.6;
    color: black;
}

li {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 1.6;
    color: #252525;
}

span {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 1.6;
    color: #252525;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
}

h1 {
    font-size: 60px;
    font-weight: 900;
    line-height: 120%;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
}


h2 {
    font-size: 58px;
    font-weight: 900;
    line-height: 120%;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
}

h3 {
    font-size: 42px;
    font-weight: 700;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
    line-height: 120%;
    color: black;
}

h4 {
    font-weight: 500;
    font-size: 36px;
    line-height: 120%;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    color: #252525;
}

h5 {
    font-size: 28px;
    font-weight: 400;
    line-height: 120%;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
}

h6 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 120%;
    -webkit-letter-spacing: 0.05em;
    -moz-letter-spacing: 0.05em;
    -ms-letter-spacing: 0.05em;
    letter-spacing: 0.05em;
    color: #3E3C3C;
}

/*
====================================================================================
Navbar Part
====================================================================================
*/

nav {
    height: 65px;
    z-index: 999;
}

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

.navbar.active {
    box-shadow: var(--price-shadow);
}

.nav-links {
    gap: 90px;
}

.nav-links a {
    color: #000;
    font-size: 14px;
    transition: var(--2ms-delay);
}

.nav-links a:hover {
    transform: translateY(5px);
}

.nav-links a.active {
    color: var(--active-navlink);
}

/*
====================================================================================
Welcome Orange
====================================================================================
*/

.con_welcome {
    width: 100vw;
    margin: 0;
    margin-top: 80px;
    height: calc(100vh - 70px - 5vh - 40px);
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row-welcome {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    width: 70vw;
}

.col-welcome {
    flex: 1;
    margin: 0;
    padding: 0;
    width: auto;
}

.btn-welcome-clas {
    margin-top: 5vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 10px;
}

.welcome-button {
    position: relative;
    background-color: #4285F4;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 24px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.welcome-button:hover {
    background-color: #357ae8;
    color: white;
}

.welcome-button:active {
    background-color: #357ae8;
    color: white;
}

.welcome-image {
    margin: 0;
    padding: 0;
    width: auto;
    max-height: calc(100vh - 70px - 5vh - 40px);
    border-radius: 24px;
    height: 50vh;
    object-fit: cover;
}

.con_welcome h1 {
    font-size: 54px;
    font-weight: 800;
    line-height: 120%;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    font-family: "Roboto", sans-serif;
}

.con_welcome h4 {
    padding-top: 18px;
    padding-bottom: 15px;
    font-size: 30px;
    font-weight: 400;
    line-height: 135%;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    font-family: "Roboto", sans-serif;
}

.author_img{
    height: 130px;
    width: 130px;
}

.author_details{
    padding: 40px 0 25px;
    font-size: 18px;
    color: #252525;
    text-decoration: none;
}

@media (max-width: 834px) {
    .nav-links {
        display: none !important;
    }
    .col-welcome {
        padding-right: 0;
    }
    .mobile_mt{
        margin-top: 1rem !important;
    }

    .welcome-image {
        height: 35vh;
        margin-bottom: 5vh;
    }
    .mobile_hide{
        display: none;
    }

    .con_welcome h1 {
        font-size: 42px;
        font-weight: 600;
    }

    .con_welcome h4 {
        padding-top: 12px;
        font-size: 22px;
    }

    .con_welcome p {
        font-size: 14px;
    }

    .row_welcome {
        height: auto;
        height: 100vh;
    }

    .row-welcome {
        width: 100vw;
    }

    .con_welcome {
        max-height: 100vh;
        margin: 2vw;

    }
    .welcome_content {
        max-width: 100% !important;
        text-align: center;
    }
    .mobile_width_p{
        width: 100% !important;
    }
    .col-dashboard h3 {
        font-size: 25px !important;
    }
    .mobile_br{
        display: block !important;
    }
    /* .scrollable-form{
        display: none !important;
    } */
     .logo_p{
        padding-top: 20px;
     }
     .dashboard-text{
        padding-right: 20px;
     }
     .mobile_justify{
        justify-content: start !important;
     }
     .navbar{
        padding-top: 20px !important;
        justify-content: center !important;
     }
}

/*
====================================================================================
LogIn and Registration
====================================================================================
*/
.log-container {
    width: 100vw;
    margin-top: 10vh;
    margin-bottom: 10vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo-login {
    height: 45px;
    width: auto;
    margin: 20px;
}

 

/*
.col-login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
*/
.login_form {
    display: flex;
    flex-direction: column;
}

.input-container {
    position: relative;
    margin-bottom: 4px;
}

.select-log {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.06em;
    border: 1px solid #4285F4;
    border-radius: 6px;
    margin-top: 15px;
    padding: 12px 5px;
    width: 300px;
    top: 18px;
    left: 8px;
}

.label-log {
    position: absolute;
    top: 4px;
    left: 8px;
    background-color: white;
    padding: 0 4px;
    color: #4285F4;
    font-size: 12px;
    font-weight: 400;
    pointer-events: none;
}

.forget-pass {
    align-items: flex-start;
    font-size: 12px;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    text-align: left;
    width: 300px;
}

.login-button {
    position: relative;
    width: fit-content;
    margin: 15px 0;
    background-color: #4285F4;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    width: 300px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.login-button:hover {
    background-color: #357ae8;
    color: white;
}

.login-button:active {
    background-color: #357ae8;
    color: white;
}

.log-a-information {
    padding-top: 10px;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    text-align: left;
    color: #4285F4;
}

.log-a-information:hover {
    color: #357ae8;
}

.log-a-information:active {
    color: #357ae8;
}

.icon-login {
    height: 24px;
    margin: 0;
    padding-right: 8px;
    width: auto;
}

.continue-button {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 8px;
    padding: 12px 18px;
    border: 1px solid #757575;
    border-radius: 6px;
    width: 300px;
    text-align: left;
    background-color: #FFF;
}

.continue-button:hover {
    color: black;
    background-color: #f5f5f5;
}

.continue-button:active {
    color: black;
    background-color: #f5f5f5;
}

.span-information-login {
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
}

.log-container h4 {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    font-family: "Roboto", sans-serif;
}

.line-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0px 0 20px;
    max-width: 250px;
    text-transform: uppercase;
    font-size: 12px;
    color: #757575;
}

.line-with-text::before,
.line-with-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #757575;
}

.line-with-text:not(:empty)::before {
    margin-right: .8em;
}

.line-with-text:not(:empty)::after {
    margin-left: .8em;
}

@media (max-width: 834px) {
    .log-container {
        margin-top: 5vh;
    }

    .welcome_mb_content{
        align-items: center;
        text-align: center;
        position: absolute;
        top: 50%;
        display: flex;
        justify-content: center;
    }

    .welcome_head h2 {
        color: #fff;
        font-size: 35px !important;
    }
    .welcome_head h5 {
        color: #fff;
        /* font-size: 35px !important; */
    }
    .welcome_head > div{
        justify-content: center;
    }
    .mobile_p p{
        color: #fff;
        line-break: 30px;
    }
    .welcome_content{
        padding: 80px 5px !important;
        line-height: 70px;
        width: 100%;
        margin-left: 0 !important;
    }
    .banner_btn {
        padding: 15px 40px !important;
    }

    .mobile_flex{
        justify-content: center;
    }
}

.reg-container {
    width: 100vw;
    min-height: 70vh;
    display: flex;
    margin-top: 10vh;
    margin-bottom: 10vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.span-register_code {
    font-weight: 300;
    color: #454545;
    text-align: center;
    font-size: 16px;
    padding: 15px 0;
}

.btn-new-code {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    padding: 2px 4px;
    color: #4285F4;
    border: none;
    border-radius: 0;
}

.btn-new-code i {
    color: #4285F4;
}

.btn-new-code:hover {
    background-color: #FAFAFA;
}

.btn-new-code:active {
    background-color: #FAFAFA;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


.input-group {
    display: flex;
    justify-content: center;
    gap: 15px;
    background: white;
}

.code-input {
    width: 42px;
    height: 54px;
    margin: 8px;
    font-size: 24px;
    font-weight: 300;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color 0.3s;
    background: #fff;
}

.code-input:focus {
    border-color: #4285F4;
}

.code-input::placeholder {
    color: transparent;
}

.register-button {
    position: relative;
    width: fit-content;
    margin: 0;
    background-color: #4285F4;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    width: 300px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register-button:hover {
    background-color: #357ae8;
    color: white;
}

.register-button:active {
    background-color: #357ae8;
    color: white;
}

.reg-container h4 {
    margin-top: 20px;
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    font-family: "Roboto", sans-serif;
}

.card {
    margin: 0px 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    width: 100%;
    height: auto;
    transition: border-color 0.3s, box-shadow 0.3s;
    overflow: hidden;
    cursor: pointer;
}

.card.active {
    border: 2px solid #49e9b0;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

.card-header {
    padding: 15px 0px 0px 15px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    border: none;
    -webkit-letter-spacing: 0.005em;
    -moz-letter-spacing: 0.005em;
    -ms-letter-spacing: 0.005em;
    letter-spacing: 0.005em;
    font-family: "Roboto", sans-serif;
}

.card-body {
    padding: 15px 20px;
    margin: 0;
    text-align: left;
}

.price-info {
    color: #3284ff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.building-info {
    font-size: 14px;
    font-weight: 300;
}

.card-link {
    padding-top: 12px;
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    color: #757575;
}

.card-link:hover {
    text-decoration: underline;
}

@media (max-width: 834px) {
    .code-input {
        width: 36px;
        height: 48px;
    }
}

/*
====================================================================================
Dashboard
====================================================================================
*/

.con-dashboard {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding-right: 50px;
}

#sidebar {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    margin: 100px 0px 40px 0px;
    padding: 0;
    position: relative;
}

#sidebar .d-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#menu {
    flex: 1;
    width: 100%;
}

#sidebar ul {
    width: 100%;
    height: calc(100vh - 140px);
    padding: 0px;
    margin: 0px;
}

.nav-item {
    margin: 0;
    padding: 10px 0px;
    width: 100%;
}

.nav-link {
    display: flex;
    flex-direction: row;
    color: black;
    align-items: center;
}

.nav-link span {
    padding-left: 5px;
    font-weight: 400;
}

#sidebar .nav-link.active {
     background-color: #4285f4;
}

#sidebar .nav-link.active i{
    color: #fff;
}


#sidebar .nav-link.active span {
    color: #fff;
    font-weight: 400;
}

#sidebar .nav-link.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* #sidebar .nav-link:hover {
    background-color: #c2d9f1;
} */

.col-dashboard h3{
    color: #4285f4;
}

.nav-item:last-child {
    position: relative;
    margin-top: auto;
}

.col-dashboard {
    display: flex;
    position: relative;
    flex-direction: column;
    height: calc(100vh - 140px);
    margin: 100px 0px 40px 0px;
    padding: 0px 40px 20px 40px;
}

.col-dashboard h3 {
    font-size: 36px;
    padding-bottom: 20px;
}

.col-dashboard p {
    font-weight: 300;
    /* padding-top: 20px; */
    line-height: 150%;
    color: #454545;
    font-size: 14px;
}

.dashboard-button {
    position: relative;
    width: fit-content;
    margin: 15px 0;
    background-color: #4285F4;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 50px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dashboard-button:hover {
    background-color: #357ae8;
    color: white;
}

.dashboard-button:active {
    background-color: #2B68C2;
    color: white;
}

.dashboard-button-delete {
    position: relative;
    width: fit-content;
    margin: 15px 4px;
    background-color: #ef5350;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 50px;
    border: none;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dashboard-button-delete:hover {
    background-color: #e57373;
    color: white;
}

.dashboard-button-delete:active {
    background-color: #c62828;
    color: white;
}


.dashboard-button-discard {
    position: relative;
    width: fit-content;
    margin: 15px 0;
    background-color: #808080;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 50px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dashboard-button-discard:hover {
    background-color: #6d6d6d;  /* etwas dunkleres Grau beim Hover */
    color: white;
}

.dashboard-button-discard:active {
    background-color: #5a5a5a;  /* etwas dunkleres Grau beim Klicken */
    color: white;
}

/*
Projektübersicht
*/
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}


tr:nth-child(even) {
    background-color: transparent;
}

tr:hover {
    background-color: #e2e2e2;
}

.btn-pencil {
    background: transparent;
    margin: 0px;
    padding: 0px;
    border: none;
}

.btn-pencil i {
    color: #4285F4;
}

.btn-pencil i:hover {
    color: #357ae8;
}

.btn-pencil i:active {
    color: #2a56c6;
}

.btn-bi-printer {
    background: transparent;
    margin: 0px 20px 0px 20px;
    padding: 0px;
    border: none;
}

.btn-bi-printer i {
    color: grey;
}

.btn-trash {
    background: transparent;
    margin: 0px;
    padding: 0px;
    border: none;
}

.btn-trash i {
    color: #e57373;
}

.btn-trash i:hover {
    color: #ef5350;
}

.btn-trash i:active {
    color: #c62828;
}

@media (max-width: 834px) {
    .col-dashboard {
        padding: 0px 15px 20px 15px;
    }

    .d-none.d-sm-table-cell {
        display: none;
    }
}


welcome-button:hover {
    background-color: #357ae8;
    color: white;
}

/*
====================================================================================
Main CSS
====================================================================================
*/

.btn_steps {
    margin: 5vh 0px;
}

/* Container für Rechtsausrichtung */
.optional-settings-container {
    text-align: right; /* Rechtsbündig wie die Felder darüber */
    margin-top: 0.5rem; /* Abstand anpassen */
}

.btn_optional_settings {
    display: inline-flex;
    align-items: center;
    justify-content center:
    font-weight: 500;
    font-size: 0.925rem;
    gap: 0.5rem;
    color: #252525;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 0;
    background-color: transparent;
    transition: all 0.25s ease;
    cursor: pointer;
    text-decoration: none;
    width: auto;
    padding: 12px 20px;
    background-color: rgba(50, 132, 255, 0.07);
}

.btn_optional_settings:hover {
    color: #3284FF;
    background-color: rgba(50, 132, 255, 0.12);
}

.btn_optional_settings[aria-expanded="true"] {
    color: #3284FF; /* Konsistent mit Hover */
}


.btn_optional_settings:focus-visible {
    outline: 2px solid #3284FF;
    outline-offset: 2px;
}


.con_template {
    position: relative;
}

.con_area {
    position: relative;
    text-align: center;
    margin-top: 24vh;
    margin-bottom: 15vh;
}

.header_text h3 {
    font-size: 32px;
    margin-top: 1rem;
}

.header_text span {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
    color: #d9534f;
}

.con_template_2 {
    position: relative;
    margin-top: 12vh;
    margin-bottom: 15vh;
}

.header_text_2 h3 {
    font-size: 32px;
    margin-top: 1rem;
}

.header_text_2 span {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
    color: #5cb85c;
}

.header_text_3 h3 {
    text-align: center;
    font-size: 2rem;
    color: #252525;
    font-weight: 600;
}

.header_text_3 p {
    text-align: center;
}

.header_text_3 span {
    text-align: center;
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 400;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
    color: #00CC88;
}

.col_form {
    align-items: center !important;
    /* margin: 24px 0px; */
}

.col_form_div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.bottom-text p{
    padding-top: 30px;
    font-size: 36px;
    text-align: center;
}

.col_form label {
    font-size: 16px;
    font-weight: 400;
    color: #252525;
    margin: 0;
    padding-bottom: 15px;
}

.form-control {
    padding: 10px 0px;
    margin: 0;
    border-radius: 0px;
    border: none;
    color: #252525;
    font-size: 14px;
    font-weight: 300;
    border-bottom: 2px solid steelblue;
}

.form-control::-webkit-inner-spin-button,
.form-control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control:focus {
    box-shadow: none;
    outline: none;
    background-color: white;
}

.form-select {
    padding: 10px 10px;
    margin: 0;
    border-radius: 4px;
    border: none;
    color: #252525;
    font-size: 14px;
    font-weight: 300;
    border: 2px solid #3284FF;
    background-color: white;
    width: 25vw !important;

}

.form-select:focus {
    box-shadow: none;
    outline: none;
    background-color: white;
}

.form-check-label {
    margin: 0;
    line-height: 30px;
    accent-color: #3284FF;
}

.form-check-label label {
    padding: 0.5px 0px;
    font-size: 14px;
    font-weight: 300;
    color: #252525;
}


.optional_settings {
    background-color: white;
    margin-top: 10px;
}

.optional_settings label {
    font-weight: 300;
    font-size: 12px;
}

.form-check-labe_template {
    padding: 10px 0px 0px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: #3E3C3C;
}

.form_check_template {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: #3E3C3C;
}

.form_range_style {
    border-radius: 0px;
    border: none;
    width: 400px;
    padding: 10px 0px 5px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 120%;
    color: #3E3C3C;
}

.input_area {
    position: relative;
    width: 250px;
    left: 50%;
    transform: translate(-50%);
}

.input_area input {
    text-align: center;
}


.custom-switch .form-check-input:checked {
    background-color: #5cb85c;
    border-color: #28a745;
    margin: 0px;
    padding: 0px;
     accent-color: #3284FF;
}

.custom-switch .form-check-input[type="checkbox"] {
    position: relative;
    margin-top: 7px;
    margin-right: 0px;
    width: 28px;
    height: 14px;
    accent-color: #3284FF;
}


.autosave span {
    padding-right: 36px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.5;
    color: white;
}

.demoversion_span span {
    display: inline-block;
    color: white;
    letter-spacing: 0.8px;
    font-size: 14px;
    margin-right: 30px;
}

.settings {
    position: relative;
    text-align: center;
    margin: 0px 15px;
    padding: 12px 0;
    width: 30px;
    background-color: black;
}

.settings i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: gray;
    font-size: 18px;
}

.over_view {
    padding: 12px 0px;
    text-align: center;
    width: calc((100vw - 120px) / 4);
    background-color: black;
}

.navbar-toggler .fa {
    color: white;
    font-size: 18px;
}

@media screen and (max-width: 700px) {
    .navbar {
        min-height: 60px;
        height: auto;
        padding-bottom: 20px;
    }

    .over_view {
        width: 100vw;
    }

    .navbar-toggler .fa {
        color: white
    }

    .settings {
        width: 100vw;
        margin: 0;
    }

    .navbar_con {
        height: 40px;
    }

    .navbar-brand {
        margin: 15px 15px 0;
    }

}

.over_view .nav-link {
    text-decoration: none;
    border: none;
    color: white
}

.over_view a:link {
    font-weight: 300;
}

.over_view a:visited {
    font-weight: 300;
}

.over_view a:hover {
    font-weight: 400;
}

.over_view a:active {
    background-color: white;
    color: black
}

.over_view .active:link {
    text-transform: uppercase;
    font-weight: 600;
    -webkit-letter-spacing: 0.03em;
    -moz-letter-spacing: 0.03em;
    -ms-letter-spacing: 0.03em;
    letter-spacing: 0.03em;
    color: #0275d8;
}

.over_view .active:visited {
    text-transform: uppercase;
    font-weight: 600;
    -webkit-letter-spacing: 0.03em;
    -moz-letter-spacing: 0.03em;
    -ms-letter-spacing: 0.03em;
    letter-spacing: 0.03em;
    color: #0275d8;
}

.over_view .active:hover {
    color: lightskyblue;
    font-weight: 600;
}

.over_view .active:active {
    background-color: white;
    color: black
}

.detail_nav {
    display: flex;
    vertical-align: middle;
    background-color: lightgrey;
    margin-top: 60px;
    z-index: 888;
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.36);
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.36);
}

.detail_nav li {
    margin: 0;
    text-align: center;
    width: calc(100vw / 5);
}

.detail_view a:link {
    color: black;
    padding-top: 20px;
}

.detail_view a:visited {
    color: black;
    padding-top: 20px;
}

.detail_view a:hover {
    font-weight: 600;
}

.detail_view a:active {
    background-color: #0275d8;
    color: white;
    font-weight: 600;
    border-bottom: 3px solid #0275d8;
}


.detail_view_a .active:link {
    border-bottom: 3px solid #0275d8;
    font-weight: 900;
    padding-top: 20px;
    color: black;
}

.detail_view_a .active:visited {
    padding-top: 20px;
    border-bottom: 3px solid #0275d8;
    color: black;
}

.detail_view_a .active:hover {
    color: #0275d8;
}

.detail_view_a .active:active {
    background-color: #0275d8;
    color: white;
    font-weight: 600;
    border-bottom: 3px solid #0275d8;
}



@media screen and (max-width: 992px) {
    .detail_view_a a {
        font-size: 12px
    }

    .detail_view a {
        font-size: 12px
    }
}


.submit_button {
    text-align: left;
    margin-top: 10vh;
}

.overview_header {
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    width: 100%;
    border-radius: 50px;
    border: 4px solid #405AA5;
    background-color: white;
}

.overview_header_text h4 {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: black;
}

.overview_header_text ul {
    list-style-type: none;
}

.overview_header_text li {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 1.5;
    color: black;
}

.overview_header_text i {
    padding-right: 10px;
    color: black;
}

.overview_header_overview {
    text-align: center;
    padding: 7vh 0px 5vh 24px;
}

.overview_header_overview h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 130%;
    margin: 0;
    color: black;
}

.overview_header_text {
    margin: 0px 0px 0px 24px;
    padding: 0;
}

.hr_header hr {
    border-bottom: 1px solid #fff;
    ;
    margin: 2.5rem 0;
    ;
    border: 0;
}


@media screen and (max-width: 992px) {
    .overview_header {
        width: 70%;
        margin-top: 10vh;
    }
}

@media screen and (max-width: 768px) {
    .overview_header {
        width: 90%;
        margin-top: 10vh;
    }
}

@media screen and (max-width: 576px) {
    .overview_header {
        width: 100%;
        margin-top: 10vh;
    }
}

.con_footer {
    height: 80px;
    background-color: black;
    color: white;
    margin: 0px;
    padding: 0px;
}

.demo_landing {
    position: relative;
    margin-top: 100px;
    text-align: center;
}

.demo_landing h2 {
    -webkit-letter-spacing: 0.04em;
    -moz-letter-spacing: 0.04em;
    -ms-letter-spacing: 0.04em;
    letter-spacing: 0.04em;
}


.demo_h3 {
    color: #0275d8;
}

.demo_register {
    position: relative;
    margin-top: 100px;
}

.col_landing {
    position: relative;
    text-align: center;
}

.demo_email {
    margin: 5vh auto;
    width: 30vw;
}

.demo_email label {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 2rem;
}

.demo_email input {
    margin-top: 1rem;
}

@media screen and (max-width: 992px) {
    .demo_email {
        width: 50vw;
    }
}

@media screen and (max-width: 768px) {
    .demo_email {
        width: 60vw;
    }
}

@media screen and (max-width: 576px) {
    .demo_email {
        width: 70vw;
    }
}

.ora_login_title {
    padding-bottom: 2rem;
}

.ora_login_title h1 {
    color: black;
    text-align: center;
    font-size: 6rem;
    font-weight: 900;
    line-height: 120%;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
}

.ora_login_title span {
    text-align: center;
    font-size: 6rem;
    font-weight: 500;
    line-height: 120%;
    -webkit-letter-spacing: 0.01em;
    -moz-letter-spacing: 0.01em;
    -ms-letter-spacing: 0.01em;
    letter-spacing: 0.01em;
}

.form_sigin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}

.registration_terms {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 120%;
    color: black;
}

.registration_link {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.4;
    line-height: 120%;
    color: black;
}

.remember_me_lable {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.4;
    color: black;
}




/* Results CSS */


.con_template_results {
    position: relative;
    margin-bottom: 15vh;
}

.con_template_results p {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.6;
    color: #252525;

}

.chart_text span i{
    font-size: 40px;
}

.chart_text p{
    font-size: 25px;
}

.chart_text p:last-child{
    font-size: 15px;
    color: #767676;
}

.chart_text .card_pt{
    margin-top: 15px;
    font-size: 20px;
    font-weight: 300;
}

.chart_text .card_pt_blue {
    font-size: 28px;
    color: #3284FF;
    font-weight: 600;
}

.text_support {
    text-align: center;
    border: 0.5px solid #3284FF;
    border-radius: 12px;
    padding: 12px;
    margin: 0px 5vw 8vh 5vw;
}

.text_support p {
    font-size: 16px;
}

.con_template_results hr {
    color: black;
    opacity: 0.15;

}

.header_results h2 {
    font-size: 36px;
    margin-top: 1rem;
    padding-bottom: 18px;
}

.header_results span {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 90%;
}


.row_overview_results {
    margin: 0vh 0px 8vh 0px;
}

.card_overview {
    background-color: white;
    -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
}

.col_overview_results {
    position: relative;
    text-align: center;
    padding: 36px 0px 36px 0px
}

.row_header_one_results {
    margin-bottom: 8vh;
}

.col_header_one_results span {
    position: relative;
    color: #3284FF;
    font-size: 20px;
    margin: 0;
    padding: 0;
    padding-bottom: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.col_header_one_results h4 {
    color: #252525;
    font-size: 30px;
    text-align: center;
    padding-bottom: 5vh;
}

.col_header_one_results h5 {
    position: relative;
    text-align:center;
    margin: 0px;
    padding: 0px;
    margin-bottom: 18px;
    color: #3284FF;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
}

.col_header_one_results h6 {
    color: black;
    margin-top: 20px;
    font-size: 22px;
    font-weight: 500;
}

.col_ist_graphs {
    margin-bottom: 8vh;
}

.col_pieChart {
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: block;
}

.results_heads {
    color: #3284FF;
    font-size: 17px;
}

.paypal_design {
    padding: 12px 60px;
    border: 2px solid #3284FF;
    text-align: center;
    border-radius: 12px
}

.con_template_results .text-start p {
    font-size: 14px;
    color: #767676;
    line-height: 24px;
    text-align: left;
}

.con_template_results .span_results_heads {
    color: #767676;
    font-size: 16px;
}

.line_results_heads {
    width: 50%;
    height: 0.7px;
    background-color: #767676;
    margin-top: 8px;
}

.line_side_notion {
    width: 100%;
    height: 0.7px;
    background-color: #767676;
    margin-top: 8px;
}

.con_template_results .side_notion {
    color: #767676;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}

.table_ist {
    height: 100%;
}

.table_ist table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

.table_ist th,
td {
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
    font-weight: 500;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_ist th:first-child,
.table_ist td:first-child {
    max-width: 60%;
    font-size: 18px;
    font-weight: 500;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_ist th:nth-child(2),
.table_ist td:nth-child(2) {
    width: auto;
    text-align: right;
    font-size: 18px;
    font-weight: 500;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_ist th:last-child,
.table_ist td:last-child {
    text-align: left;
    padding-left: 4px;
    font-weight: 300;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.col_primaer_ist {
    text-align: center;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.6;
    color: #252525;
}

.col_primaer_ist p span{
    color: #3284FF;
}


.col_soll_energy_table {
    margin-bottom: 5vh;
}

.col_soll_energy_table table {
    table-layout: fixed;
    width: 100%;
    font-weight: 300;
    font-size: 15px;
}


.col_soll_energy_table th,
.col_soll_energy_table td {
    position: relative;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: right;
    font-weight: 300;
    line-height: 150%;
    color: #252525;
    -webkit-letter-spacing: 0.4;
    -moz-letter-spacing: 0.4;
    -ms-letter-spacing: 0.4;
    letter-spacing: 0.4;
}




.col_soll_energy_table th:first-child,
.col_soll_energy_table td:first-child {
    text-align: left;
    font-weight: 300;
}

@media screen and (max-width: 992px) {
    .col_soll_energy_table table {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .col_soll_energy_table table {
        font-size: 12px;
    }
}

@media screen and (max-width: 576px) {
    .col_soll_energy_table table {
        font-size: 11px;
    }
}

.col_header_one_results li {
    padding: 12px 0px 12px 0px;
    font-weight: 300;

}


.table_renovation {
    width: 100%;
}

.table_renovation table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

.table_renovation th,
td {
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
    font-size: 14px;
    font-weight: 300;
    line-height: 150%;
    color: black;
    -webkit-letter-spacing: 0.4;
    -moz-letter-spacing: 0.4;
    -ms-letter-spacing: 0.4;
    letter-spacing: 0.4;
}

.table_renovation th:first-child,
.table_renovation td:first-child {
    max-width: 60%;
    font-size: 15px;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_renovation th:nth-child(2),
.table_renovation td:nth-child(2) {
    width: auto;
    text-align: right;
    font-size: 15px;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_renovation th:last-child,
.table_renovation td:last-child {
    text-align: left;
    padding-left: 4px;
    -webkit-letter-spacing: 0.1em;
    -moz-letter-spacing: 0.1em;
    -ms-letter-spacing: 0.1em;
    letter-spacing: 0.1em;
}

.table_renovation tr:last-child td,
.table_renovation tr:last-child th {
    font-size: 17px;
    font-weight: 400;
    line-height: 150%;
    color: #252525;
    -webkit-letter-spacing: 0.4;
    -moz-letter-spacing: 0.4;
    -ms-letter-spacing: 0.4;
    letter-spacing: 0.4;
    border: none;
}

.col_bar_chart {
    position: relative;
    margin: 0px auto 8vh;
}

.scale_amortisation {
    position: relative;
    margin: 0px auto 8vh;
}

.scale_chart {
    padding: 12px;
    margin: 2vh 0px 8vh;
}

.scale_chart h5 {
    position: relative;
    text-align:center;
    margin: 0px;
    padding: 0px;
    margin-bottom: 18px;
    color: #3284FF;
    font-size: 24px;
    font-weight: normal;
    text-transform: uppercase;
}

.download_report_button {
    /* margin: 5vh 0px 0px; */
    text-align: center;
}


/* CSS for Primaer-Energy-Scale */

#geg-requirement-indicator {
    position: absolute;
    width: 1px;
    /* Width of the indicator line */
    height: calc(100% + 70px);
    /* Height matching the scale */
    bottom: 0px;
    background-color: #000000;
    /* Color of the line */
    left: 0;
    /* Initial position, adjust in JS */
}

#geg-requirement-label {
    position: absolute;
    top: -17px;
    /* Position above the scale */
    transform: translateX(-50%);
    padding: 2px 5px;
    font-size: 12px;
    white-space: nowrap;
}

#humidity-indicator {
    position: absolute;
}

#humidity-value-label {
    position: absolute;
}

#temperature-indicator {
    position: absolute;
    height: calc(100% + 50px);
    /* Increase height */
    bottom: -0px;
    /* Position it partly below the scale */
    width: 1px;
    /* Width of the indicator line */
    background-color: black;
    /* Color of the line */
    left: 0;
    /* This will be dynamically updated by JavaScript */
}

#temp-value-label {
    position: absolute;
    top: -10px;
    /* Position it above the extended line */
    background-color: #fff;
    /* Background color of the label */
    padding: 6px 12px;
    /* Padding around the label */
    border: 1px solid #000;
    /* Border around the label */
    font-size: 16px;
    /* Font size of the label */
    white-space: nowrap;
    /* Keep the label text on one line */
    transform: translateX(-50%);
    /* Center the label horizontally */
    font-weight: bold;
}

#energy-scale,
#color-layer {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 30px;
    background: linear-gradient(to right, #4caf50, #ffeb3b, #f44336);
    margin: 20px auto;
}

#color-layer {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#energy-scale {
    margin-top: 90px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.bar {
    position: relative;
    flex-grow: 1;
    /* Allow bars to grow and fill the container */
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    color: #000;
    display: flex;
    justify-content: center;
    /* Center text horizontally */
    align-items: center;
    /* Center text vertically */
}

.color-div {
    flex-grow: 1;
    height: 30px;
    /* Height of the color layer */
}

/* New styles for positioning numbers */
.number {
    position: absolute;
    bottom: -20px;
    transform: translateX(-50%);
    font-size: 17px;
    font-weight: bold;
}

/* Existing styles for bar colors and initial flex basis */
.aa {
    flex-basis: 12%;
}

.a {
    flex-basis: 8%;
}

.b {
    flex-basis: 10%;
}

.c {
    flex-basis: 10%;
}

.d {
    flex-basis: 12%;
}

.e {
    flex-basis: 12%;
}

.f {
    flex-basis: 16%;
}

.g {
    flex-basis: 20%;
}

.h {
    flex-basis: 12%;
}

.color-aa {
    flex-basis: 12%;
}

.color-a {
    flex-basis: 8%;
}

.color-b {
    flex-basis: 10%;
}

.color-c {
    flex-basis: 10%;
}

.color-d {
    flex-basis: 12%;
}

.color-e {
    flex-basis: 12%;
}

.color-f {
    flex-basis: 16%;
}

.color-g {
    flex-basis: 20%;
}

.color-h {
    flex-basis: 12%;
}

.bar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    /* Width of the black line */
    background-color: #000;
    /* Black color */
}

/* Ensure the last bar doesn't have a black line */
.bar:last-child::after {
    content: none;
}

/*
Energy Scale 2
*/

/* CSS for Primaer-Energy-Scale */

#geg-requirement-indicator_soll {
    position: absolute;
    width: 1px;
    /* Width of the indicator line */
    height: calc(100% + 70px);
    /* Height matching the scale */
    bottom: 0px;
    background-color: #000000;
    /* Color of the line */
    left: 0;
    /* Initial position, adjust in JS */
}

#geg-requirement-label_soll {
    position: absolute;
    top: -17px;
    /* Position above the scale */
    transform: translateX(-50%);
    padding: 2px 5px;
    font-size: 12px;
    white-space: nowrap;
}

#humidity-indicator_soll {
    position: absolute;
    width: 1px;
    height: 70px;
    /* Height of the indicator line */
    background-color: rgb(0, 0, 0);
    /* Color of the line */
    bottom: -40px;
    /* Position it below the scale */
    left: 0;
    /* This will be dynamically updated by JavaScript */
}

#humidity-value-label_soll {
    position: absolute;
    bottom: -15px;
    /* Position it below the extended line */
    background-color: #fff;
    /* Background color of the label */
    padding: 6px 12px;
    /* Padding around the label */
    border: 1px solid #000;
    /* Border around the label */
    font-size: 16px;
    /* Font size of the label */
    white-space: nowrap;
    /* Keep the label text on one line */
    transform: translateX(-50%);
    /* Center the label horizontally */
    font-weight: bold;
}

#temperature-indicator_soll {
    position: absolute;
    height: calc(100% + 50px);
    /* Increase height */
    bottom: -0px;
    /* Position it partly below the scale */
    width: 1px;
    /* Width of the indicator line */
    background-color: black;
    /* Color of the line */
    left: 0;
    /* This will be dynamically updated by JavaScript */
}

#temp-value-label_soll {
    position: absolute;
    top: -10px;
    /* Position it above the extended line */
    background-color: #fff;
    /* Background color of the label */
    padding: 6px 12px;
    /* Padding around the label */
    border: 1px solid #000;
    /* Border around the label */
    font-size: 16px;
    /* Font size of the label */
    white-space: nowrap;
    /* Keep the label text on one line */
    transform: translateX(-50%);
    /* Center the label horizontally */
    font-weight: bold;
}

#energy-scale_soll,
#color-layer_soll {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 30px;
    background: linear-gradient(to right, #4caf50, #ffeb3b, #f44336);
    margin: 20px auto;
}

#color-layer_soll {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#energy-scale_soll {
    margin-top: 90px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* heating area form */
.heating-area-container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.heating-area-header-text {
    display: flex;
    flex-direction: column;
    font-family:  "Poppins", sans-serif;
    align-items: center;
    gap: 0;
}

.heating-area-header-text p {
    width: 100vw;
    font-size: 20px;
    font-weight: 400;
    color: #3284FF;
}

.heating-area-header-text h3 {
    width: 100vw;
    font-size: 1.813rem;
    color: #252525;
    font-weight: 600;
}

.heating-area-form-input label.form-label {
    font-size: 1rem;
    color: #454545;
    font-weight: 300;
    width: 100vw;
    margin-top: 6px;
}

.heating-area-form-input div.form_input {
    width: 350px;
    height: 56px;
    border: 2px solid #3284FF;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.heating-area-form-input div.form_input .error-icon {
    position: absolute;
    right: 9px;
    font-size: 22px;
    color: #EF4444;
    display: block;
    top: 13px;
}

.heating-area-form-input div.form_input.has-error .error-icon {
    display: block;
}

.heating-area-form-input div.form_input input {
    border-bottom: none;
    padding: 15px;
    text-align: center;
}

.heating-area-form-input div.form_input input::placeholder {
    width: 100%;
    font-size: 14px;
    color: #808080;
    font-weight: 300;
    text-align: center;
}

.heating-area-form-input span.error-message {
    display: block;
    width: 301px;
    color: #EF4444;
    font-weight: 300;
    font-size: 12px;
    text-align: center;
    padding-left: 53px;
    margin-top: 16px;
}

.heating-area-container button.next-button {
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    margin-top: 45px;
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}


/* Building details page design */

.building-details-form-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
}

.building-details-form-container form {
    width: 71.5%;
}

.building-details-container {
    /* flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100vw;
    gap: 20px; */
}

.building-details-input {
    /* display: flex;
    flex-direction: row;
    gap: 100px; */
}

.building-details-input label {
    /* width: 25vw; */
    color: #252525;
    font-size: 16px;
}

.building-details-input input {
    /* width: 25vw; */
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.building-height-input{
     display: flex; 
     justify-content: space-between;
    /* flex-direction: row; */
    /* gap: 100px; */ 
}

.building-height-input label {
    /* width: 25vw; */
    font-size: 16px;
    color: #252525;
}

.building-height-input input {
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.building-height-input-with-unit {
   width: 35%;
}

.building-height-input-with-unit{
    position: relative;
}

 

.building-details-input{
    /* margin-bottom: 30px; */
}

.building-details-form-button .previous-button{
    margin-right: 30px;
}

.building-height-input-with-unit span {
    font-size: 14px;
    color: #252525;
    position: absolute;
    top: 10px;
    right: 10px;
}

.building-details-input input::placeholder {
    width: 25vw;
    font-size: 14px;
}

.building-details-input{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.building-type-input div.form_select {
    width: 35%;
    border: 2px solid #3284FF;
    border-radius: 4px;
    
}

.building-details-input .form_control{
    width: 35%;
}

 
.building-type-input div.form_select select {
    border: none;
    padding: 10px;
}

.building-year-input input::placeholder {
    color: #808080;
    font-size: 14px;
    width: 85vw;
}

.building-details-input-field {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

.building-details-header{
    text-align: left;
    padding-bottom: 50px;
    line-height: 45px;
}


.building-details-header span {
    /* display: block; */
    /* width: 100vw; */
    color: #D72802;
    font-size: 20px;
    font-weight: 400;
}

.building-details-header h3 {
    /* width: 100vw; */
    color: #252525;
    font-size: 2rem;
    font-weight:600 !important;
}

.building-details-header_soll{
    text-align: left;
    padding-bottom: 50px;
    line-height: 45px;
    text-align: center;
}


.building-details-header_soll span {
    /* display: block; */
    /* width: 100vw; */
    color: #00CC88;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.building-details-header_soll h3 {
    text-align: center;
    color: #252525;
    font-size: 1.813rem;
    font-weight: 600 !important;
}

.building-details-form-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: auto; /* Pushes it to the bottom */
    margin-bottom: 50px;
    padding-top: 75px;
}

.building-details-form-button button {
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 615px) {
    .building-details-form-container {
        margin: 0;
        padding: 0;
        width: 100vw;
        margin-top: 75px;
        margin-left: 3%;
    }
    .building-details-input input {
        width: 35vw;
    }
    .building-type-input div.form_select {
        width: 35vw;
    }
    .building-height-input-with-unit {
        width: 35vw;
    }
}

@media screen and (max-width: 480px) {
    .building-details-form-container {
        margin-left: 2%;
    }

    .building-details-input-field {
        display: flex;
        flex-direction: column;
    }

    .building-type-input{
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .building-type-input div.form_select {
        width: 90vw;
    }

    .building-year-input {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .building-year-input input {
        width: 90vw;
    }

    .building-height-input {
        display: flex;
        flex-direction: column;
        gap: 3px;
        /* width: 100vw; */
    }

    .building-height-input-with-unit input{
        width: 75vw;
    }

     
   
    .building-details-form-button  {
        margin-top: 10px;
    }

    .building-details-input div.form_control span {
        display: block;
        width: 85vw;
    }

    .building-height-input div.form_control span {
        display: block;
        width: 85vw;
    }
}

/* apartment-details-container */
.simulation-details-form-container {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     min-height: calc(100vh - 65px - 24px - 70px - 50px);
     overflow-y: auto;
}

.simulation-details-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

.simulation-details-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

.simulation-details-form-button .previous-button{
    margin-right: 30px;
}

.simulation-details-form-button-margin .previous-button{
    margin-right: 30px;
}
.simulation-details-header{
    padding-bottom: 50px;
    line-height: 45px;
}

.simulation-details-header span {
    color: #D72802;
    font-size: 20px;
    font-weight: 400;
 }

.simulation-details-header h3 {
    width: 100%;
    color: #252525;
    font-size: 2rem;
    font-weight: 600 !important;
}


.simulation-details-input-field-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 65vw;
}
.simulation-details-flex-spacer {
    flex-grow: 1;
}

.simulation-details-input {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.simulation-details-input label {
    width: 30vw;
    color: #252525;
    font-size: 16px;
}

.simulation-details-input input {
    width: 25vw;
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.simulation-details-input input::placeholder {
    width: 25vw;
    font-size: 14px;
}

.simulation-details-input div.form_select {
    width: 25vw;
    border: none;
}

.simulation-details-input div.form_control {
    width: 25vw;
    border: none;
}

.simulation-details-input div.form_select select {
    border: 2px solid #3284FF;
    border-radius: 4px;
    width: 100%;
    padding: 10px;
}

.simulation-details-input span {
    font-size: 14px;
    color: #252525;
    /* position: absolute; */
    /* top: 12px; */
    /* right: -35px; */
}

.simulation-details-input span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
    top: 45px;
}

.simulation-details-input div.form_select span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
    top: 45px;
}

.simulation-details-input div.form_select select option {
    width: 100%;
}

.simulation-details-form-button {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
    padding-top: 20px;
    position: sticky;
}


.simulation-details-form-button button{
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    /* margin-top: 45px; */
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.simulation-details-form-button-margin {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
    padding-top: 60px;
    position: sticky;
}


.simulation-details-form-button-margin button{
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    /* margin-top: 45px; */
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.simulation-details-input .form-check-label {
       width: 15vw;
       background-color: #fff;
       gap: 5px;
    }

.simulation-details-input .form-check-label label input {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding-left: 4px;
    font-size: 14px;

}

.simulation-details-input .form-check-label label {
    font-size: 14px;
}


@media screen and (max-width: 850px) {
    .simulation-details-form-container {
        margin-left: 3%;
    }
    
    .simulation-details-input label {
        width: 30vw;
    }

    .simulation-details-input input {
        width: 35vw;
    }
    .simulation-details-input div.form_select {
        width: 35vw;
    }
    .simulation-details-input div.form_select select {
        width: 100%;
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    .simulation-details-form-container {
        margin-left: 2%;
    }
    .simulation-details-input-field-container {
        display: flex;
        flex-direction: column;
    }

    .simulation-details-input{
        display: flex !important;
        flex-direction: column;
        gap: 3px;
    }
    .simulation-details-input div.form_select {
        width: 90vw;
    }

    .simulation-details-input label {
        width: 90vw;
    }
     
    .simulation-details-input input {
        width: 90vw;
    }

    .simulation-details-input div.form_control span {
        display: block;
        width: 90vw;
    }

    .simulation-details-form-button  {
        margin-top: 10px;
    }
}

/* heating details form container */

.heating-details-form-container {
    width: 100vw;
    margin-top: 75px;
    margin-left: 7.5%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.heating-details-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100vw;
    gap: 20px;
}

.heating-details-header span {
    display: block;
    width: 100vw;
    color: #D72802;
    font-size: 1.5rem;
    font-weight: 300;
}

.heating-details-header h3 {
    width: 100vw;
    color: #252525;
    font-size: 2rem;
    font-weight: 500;
}

.heating-details-input-field-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

}

.heating-details-input {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.heating-details-input label {
    width: 30vw;
    color: #252525;
    font-size: 1.125rem;
}

.heating-details-input input {
    width: 25vw;
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.heating-details-input input::placeholder {
    width: 25vw;
    font-size: 14px;
}

.heating-details-input div.form_select {
    width: 25vw;
    border: none;
}

.heating-details-input div.form_select select {
    border: 2px solid #3284FF;
    border-radius: 4px;
    width: 100%;
    padding: 10px;

}

.heating-details-input div.form_select span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}

.heating-details-input span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}


.heating-details-input div.form_select select option {
    width: 100%;
}

.heating-details-input .form-check-label {
   width: 30vw;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.heating-details-input .form-check-label label {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    gap: 8px;
    font-size: 1.125rem
}

.heating-details-input .form-check-label label input{
    width: 1.5vw;
    height: 1.5vw;
    padding-left: 2px;
}

.heating-details-form-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: auto; /* Pushes it to the bottom */
    margin-bottom: 50px;
}

.heating-details-form-button button{
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.heating-details-optional-settings {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.heating-details-optional-settings div#collapseExample {
    width: 100%;
    margin-bottom: 10px;
}

.span_info_refurb {
    padding: 0;
    margin: 0;
    opacity: 0.6;
}

.btn_info_refurb {
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 850px) {
    .heating-details-form-container {
        margin-left: 3%;
    }
    
    .heating-details-input label {
        width: 30vw;
    }

    .heating-details-input input {
        width: 25vw;
    }

    .heating-details-input div.form_select {
        width: 25vw;
    }

    .heating-details-input div.form_select select {
        width: 100%;
        font-size: 0.8rem;
    }
    
}

@media screen and (max-width: 480px) {
    .heating-details-form-container {
        margin-left: 2%;
    }

    .heating-details-input-field-container {
        display: flex;
        flex-direction: column;
    }

    .heating-details-input{
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .heating-details-input div.form_select {
        width: 90vw;
    }

    .heating-details-input label {
        width: 90vw;
    }
     
    .heating-details-input input {
        width: 90vw;
    }

    .heating-details-input div.form_control span {
        display: block;
        width: 90vw;
    }

    .heating-details-form-button  {
        margin-top: 10px;
    }
}


/* water details  */

.water-details-form-container {
    width: 100%;
    /* margin-top: 75px; */
    /* margin-left: 7.5%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.water-details-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* width: 100vw; */
    gap: 20px;
}

.water-details-header{
    text-align: left;
    padding-bottom: 50px;
    line-height: 45px;
}
.water-details-header span {
    /* display: block; */
    /* width: 100vw; */
    color: #D72802;
    font-size: 20px;
    font-weight: 400;
}

.water-details-header h3 {
    /* width: 100vw; */
    color: #252525;
    font-size: 2rem;
    font-weight: 500;
}

.water-details-input-field-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

}

.water-details-input {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.water-details-input label {
    width: 30vw;
    color: #252525;
    font-size: 16px;
}

.water-details-input input {
    width: 25vw;
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.water-details-input input::placeholder {
    width: 25vw;
    font-size: 14px;
}

.water-details-input div.form_select {
    width: 25vw;   
    border: none;
}

.water-details-input div.form_select select {
    border: 2px solid #3284FF;
    border-radius: 4px;
    width: 100%;
    padding: 10px;

}

.water-details-input span.error-message {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}

.water-details-input div.form_select span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}


.water-details-input div.form_select select option {
    width: 100%;
}

.water-details-input .form-check-label {
   width: 30vw;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.water-details-input .form-check-label label {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    gap: 8px;
    font-size: 14px;
}

.water-details-input .form-check-label label input{
    width: 1.5vw;
    height: 1.5vw;
    padding-left: 2px;
}

.water-details-form-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 50px;
    padding-top: 75px;
}

.water-details-form-button button{
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.water-details-form-button .previous-button{
    margin-right: 30px;
}

.water-details-optional-settings {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.water-details-optional-settings div#collapseExample {
    width: 100%;
    margin-bottom: 10px;
}

@media screen and (max-width: 850px) {
    .water-details-form-container {
        margin-left: 3%;
    }
    
    .water-details-input label {
        width: 30vw;
    }

    .water-details-input input {
        width: 35vw;
    }

    .water-details-input div.form_select {
        width: 35vw;
    }

    .water-details-input div.form_select select {
        width: 100%;
        font-size: 0.8rem;
    }
    
}

@media screen and (max-width: 480px) {
    .water-details-form-container {
        margin-left: 2%;
    }

    .water-details-input-field-container {
        display: flex;
        flex-direction: column;
    }

    .water-details-input{
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .water-details-input div.form_select {
        width: 90vw;
    }

    .water-details-input label {
        width: 90vw;
    }
     
    .water-details-input input {
        width: 90vw;
    }

    .water-details-input div.form_control span {
        display: block;
        width: 90vw;
    }

    .water-details-form-button  {
        margin-top: 10px;
    }
}


/* ventilation details  */

.ventilation-details-form-container {
    display: flex;
    justify-content: center;
 }

.ventilation-details-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* width: 100vw; */
     
    gap: 20px;
}

.ventilation-details-header{
    text-align: left;
    padding-bottom: 50px;
    line-height: 45px;
}

.ventilation-details-header span {
    display: block;
    /* width: 100vw; */
    color: #D72802;
    font-size: 20px;
    font-weight: 400;
}

.ventilation-details-header h3 {
    /* width: 100vw; */
    color: #252525;
    font-size: 2rem;
    font-weight: 500;
}

.ventilation-details-input-field-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;

}

.ventilation-details-input {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.ventilation-details-input label {
    width: 30vw;
    color: #252525;
    font-size: 16px;
}

.ventilation-details-input input {
    width: 25vw;
    border: 2px solid #3284FF;
    border-radius: 4px;
    padding-left: 8px;
}

.ventilation-details-input input::placeholder {
    width: 25vw;
    font-size: 14px;
}

.ventilation-details-input div.form_select {
    width: 25vw;   
    border: none;
}

.ventilation-details-input div.form_select select {
    border: 2px solid #3284FF;
    border-radius: 4px;
    width: 100%;
    padding: 10px;
}

.ventilation-details-input span.error-message {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}

.ventilation-details-input div.form_select span.text-danger {
    color: #EF4444;
    font-weight: 300;
    font-size: 0.75rem;
}


.ventilation-details-input div.form_select select option {
    width: 100%;
}

.ventilation-details-input .form-check-label {
   width: 25vw;
   background-color: #fff;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.ventilation-details-input .form-check-label label {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #fff;
    gap: 8px;
    font-size: 1.125rem
}

.ventilation-details-input .form-check-label label input{
    width: 1.5vw;
    height: 1.5vw;
    padding-left: 2px;
}

.ventilation-details-form-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
     margin-bottom: 50px;
    padding-top: 75px;
 }

.ventilation-details-form-button .previous-button{
    margin-right: 30px;
}

.ventilation-details-form-button button{
    background-color: #3284FF;
    border-radius: 4px;
    width: 172px;
    height: 46px;
    color: #F9F9F9;
    font-weight: 300;
    font-size: 14px;
    outline: none;
    border: 1px solid #3284FF;
    cursor: pointer;
    transition: transform 0.2s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.ventilation-details-optional-settings {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.ventilation-details-optional-settings div#collapseExample {
    width: 100%;
    margin-bottom: 10px;
}


.color_theme{
    color: #4285f4;
}

@media screen and (max-width: 850px) {
    .ventilation-details-form-container {
        margin-left: 3%;
    }
    
    .ventilation-details-input label {
        width: 30vw;
    }

    .ventilation-details-input input {
        width: 35vw;
    }

    .ventilation-details-input div.form_select {
        width: 35vw;
    }

    .ventilation-details-input div.form_select select {
        width: 100%;
        font-size: 0.8rem;
    }
    
}

@media screen and (max-width: 480px) {
    .ventilation-details-form-container {
        margin-left: 2%;
    }

    .ventilation-details-input-field-container {
        display: flex;
        flex-direction: column;
    }

    .ventilation-details-input{
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ventilation-details-input div.form_select {
        width: 90vw;
    }

    .ventilation-details-input label {
        width: 90vw;
    }
     
    .ventilation-details-input input {
        width: 90vw;
    }

    .ventilation-details-input div.form_control span {
        display: block;
        width: 90vw;
    }

    .ventilation-details-form-button  {
        margin-top: 10px;
    }
}


/* ... Rest des Codes bleibt unverändert ... */



/*--------------------------------------------------------------------------------------------------------------------------------
                                                                Footer
--------------------------------------------------------------------------------------------------------------------------------*/
.footer_results {
    position: fixed;
    margin-top: 5vh;
    height: 40px;
    width: 100%;
    bottom: 0px;
    background: #fff;
}

.footer_results_buttons {
    position: fixed;
    margin-top: 5vh;
    height: 60px;
    width: 100%;
    bottom: 0px;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.08);
    background: #F8FAFC;
    backdrop-filter: blur(4px);

}

    /* Desktop-Version (≥768px) */
    @media (min-width: 768px) {
        .footer_results_buttons {
            height: 60px;
        }
        .footer_copyright {
            display: none !important;
        }
    }

    /* Mobile-Version (<768px) */
    @media (max-width: 767.98px) {
        .footer_results_buttons {
            height: 40px;
            box-shadow: none;
            background: #fff;
        }
        .footer_results_buttons .d-md-flex {
            display: none !important;
        }
    }

.footer_copyright {
    text-align: center;
}

.footer_copyright span {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.4;
}


@media(max-width:992px) {
    .footer_copyright ul {
        font-size: 10px;
    }

    .footer_overview {
        margin-top: 1rem;
    }

    .footer_copyright span {
        margin: 0;
    }

    .footer_copyright {
        text-align: center;
    }

    .footer {
        margin: 0;
    }
}





.progress-fill {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: #3284ff;  
    width: 0;
    z-index: 2;
    transition: width 0.3s ease;
  } 

   
.navbar-brand{
    margin: 0;
}     
.navbar-brand img{
    width: 35px;
}

.logo_text{
    padding-left: 8px;
}

.logo_text h6 {
  font-weight: 700 !important;
  margin-bottom: 0;
  font-size: 18px;
  letter-spacing: 0.05em;
  font-family: "Poppins", sans-serif;
  color: #252525;
  text-transform: uppercase;
}

.breadcrumb_page{
    margin-bottom: -10px;
}
.breadcrumb_page span{
    color: #767676 !important;
    font-size: 12px !important;
    font-weight: 300;
}



.form_control .text-danger{
    font-size: 12px;
    display: block;
    color: #ED4337 !important;
    font-weight: 300;
    text-align: left;
    line-height: 0;
    margin-top: 14px !important;
}

.logout_btn{
    width: auto;
    height: 24px !important;
    max-height: 24px !important;

}


@media (max-width: 834px) {
    .form-select{
        width: 100% !important;
    }
    .simulation-details-header span {
         font-size: 16px;
      }
      .simulation-details-form-container{
        align-items: flex-start;
      }
      .simulation-details-form {
         width: 100%;
    }
    .simulation-details-input div.form_select{
        width: 100%;
    }
    .simulation-details-input-field-container{
        max-width: 100%;
    }
    .simulation-details-input input{
        width: 100%;
    }
    .building-height-input-with-unit{
        width: 100%;
    }
}

/* Modal Foerderung */
        .foerder-modal .foerder-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .foerder-modal .foerder-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            border-left: 4px solid #3498db;
            background: white;
        }

        .foerder-modal .foerder-card:hover {
            transform: translateY(-5px);
        }

        .foerder-modal .card-header {
            background-color: #2c3e50;
            color: white;
            padding: 15px;
        }

        .foerder-modal .card-header .modal-h3 {
            margin: 0;
            color: white;
            font-size: 1.25rem;
        }

        .foerder-modal .card-header .subtitle {
            font-size: 0.65em;
            opacity: 0.8;
            font-weight: normal;
        }

        .foerder-modal .card-body {
            padding: 15px;
        }

        .foerder-modal .foerder-saetze {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .foerder-modal .foerder-saetze .modal-h4 {
            margin-top: 0;
            color: #343a40;
            font-size: 1rem;
        }

        .foerder-modal .foerder-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        .foerder-modal .foerder-value {
            font-weight: bold;
            color: #27ae60;
        }

        .foerder-modal .bapa { border-left-color: #3498db; }
        .foerder-modal .kfw { border-left-color: #27ae60; }
        .foerder-modal .bapa-kfw { border-left-color: #9b59b6; }
        .foerder-modal .info-card { border-left-color: #E9C46A; }
        .foerder-modal .table-card { border-left-color: #2980b9; }

        .foerder-modal .card-header.bapa { background-color: #3498db; }
        .foerder-modal .card-header.kfw { background-color: #27ae60; }
        .foerder-modal .card-header.bapa-kfw { background-color: #9b59b6; }
        .foerder-modal .card-header.info { background-color: #E9C46A; }
        .foerder-modal .card-header.table { background-color: #2980b9; }

        .foerder-modal .conditions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 15px;
        }

        .foerder-modal .condition-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            min-width: 0; /* Wichtig für Flex-Items */
        }

        .foerder-modal .condition-icon {
            background-color: #E9C46A;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            flex-shrink: 0;
            font-size: 0.8em;
            font-weight: bold;
        }

        .foerder-modal .condition-text {
            flex: 1;
            min-width: 0;
        }

        .foerder-modal .condition-title {
            font-weight: 600;
            color: #343a40;
            margin-bottom: 3px;
        }

        .foerder-modal .condition-desc {
            color: #6c757d;
            font-size: 0.9em;
        }

        /* Tabellen-Card */
        .foerder-modal .table-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            border: 1px solid #dee2e6;
            margin: 2rem 0;
            background: white;
        }

        .foerder-modal .table-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #dee2e6;
            background-color: #2c3e50;
        }

        .foerder-modal .table-header .modal-h3 {
            margin: 0;
            font-size: 1.25rem;
            color: white;
        }

        .foerder-modal .table-container {
            overflow-x: auto;
            padding: 0;
        }

        .foerder-modal table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            font-size: 0.9rem;
        }

        .foerder-modal thead {
            border-bottom: 2px solid #dee2e6;
            background-color: #f8f9fa;
        }

        .foerder-modal th {
            padding: 1rem 0.75rem;
            text-align: left;
            font-weight: 600;
            color: #343a40;
            font-size: 0.85rem;
            letter-spacing: 0.3px;
        }

        .foerder-modal td {
            padding: 0.75rem;
            border-bottom: 1px solid #dee2e6;
            vertical-align: top;
            color: #495057;
        }

        .foerder-modal tr:last-child td {
            border-bottom: none;
        }

        .foerder-modal tr:hover td {
            background-color: rgba(0,0,0,0.02);
        }

        .foerder-modal td:empty::before {
            content: "-";
            color: #6c757d;
        }

        /* Farbliche Hintergründe für Durchführer */
        .foerder-modal .bapa-bg {
            background-color: #e3f2fd;
            border-left: 4px solid #3498db;
        }

        .foerder-modal .kfw-bg {
            background-color: #e8f5e9;
            border-left: 4px solid #28a745;
        }

        .foerder-modal .bapa-kfw-bg {
            background-color: #f3e5f5;
            border-left: 4px solid #6f42c1;
        }

        .foerder-modal .modal-title {
            color: #2c3e50;
            font-weight: 600;

        }

        .foerder-modal .modal-intro {
            margin-bottom: 1.5rem;
        }

        @media (max-width: 834px) {
            .foerder-modal .table-header {
                padding: 0.75rem 1rem;
            }

            .foerder-modal th,
            .foerder-modal td {
                padding: 0.6rem;
                font-size: 0.8rem;
            }

            .foerder-modal .foerder-container {
                grid-template-columns: 1fr;
            }
            .foerder-modal .conditions-grid {
                grid-template-columns: 1fr;
            }
        }



/* Alert Message Design */
.floating-alerts {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        width: 380px;
    }

    .floating-alert {
        position: relative;
        font-size: 14px;
        padding: 15px 30px 15px 20px;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-left: 4px solid;
        opacity: 0;
        transform: translateX(100%);
        animation: slideIn 0.3s forwards, fadeOut 0.5s forwards 10s;
    }

    .alert-success {
        background-color: rgba(236, 253, 245, 0.9);
        border-left-color: #10B981;
        color: #065F46;
        animation: slideIn 0.4s forwards, fadeOut 0.5s forwards 10s;
    }

    .alert-info {
        background-color: rgba(239, 246, 255, 0.9);
        border-left-color: #3B82F6;
        color: #1E40AF;
    }

    .alert-error {
        background-color: rgba(254, 242, 242, 0.9);
        border-left-color: #EF4444;
        color: #991B1B;
    }

    .alert-warning {
        background-color: rgba(255, 251, 235, 0.9);
        border-left-color: #F59E0B;
        color: #92400E;
    }

    .btn-close {
        position: absolute;
        top: 12px;
        right: 12px;
        background-size: 12px;
    }

    @keyframes slideIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }


    @keyframes fadeOut {
        to {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px); /* Optional: Leichter "Fall"-Effekt */
        }
    }

    /* Mobile only: kürzere Anzeigedauer */
    @media (max-width: 600px) {
        .floating-alert {
            animation: slideIn 0.3s forwards, fadeOut 0.5s forwards 2s;
        }
    }





    /* Toast Notification System */
    .notification-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        width: 380px;
        max-width: 90%;
    }

    /* Basis Toast Styling */
    .notification-toast {
        position: relative;
        font-size: 14px;
        padding: 15px 30px 15px 20px;
        margin-bottom: 15px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-left: 4px solid;
        opacity: 0;
        transform: translateX(100%);
    }

    .notification-toast.show {
        animation: notificationSlideIn 0.3s forwards;
    }

    .notification-toast.hiding {
        animation: notificationFadeOut 5s forwards;
    }

    /* Farbvarianten */
    .popup-success {
        background-color: rgba(236, 253, 245, 0.9);
        border-left-color: #10B981;
        color: #065F46;
    }

    .popup-info {
        background-color: rgba(239, 246, 255, 0.9);
        border-left-color: #3B82F6;
        color: #1E40AF;
    }

    .popup-error {
        background-color: rgba(254, 242, 242, 0.9);
        border-left-color: #EF4444;
        color: #991B1B;
    }

    .popup-warning {
        background-color: rgba(255, 251, 235, 0.9);
        border-left-color: #F59E0B;
        color: #92400E;
    }

    /* Close Button */
    .notification-close {
        position: absolute;
        top: 12px;
        right: 12px;
        background-size: 12px;
    }

    /* Animationen */
    @keyframes notificationSlideIn {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes notificationFadeOut {
        to {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px); /* Optional: Leichter "Fall"-Effekt */
        }
    }


input.is-invalid {
    border-color: #dc3545;
}

input.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}