:root {
    --gold: rgb(210, 190, 95);
    --black: rgb(0, 0, 0);
    --lightgrey: rgb(160, 160, 160);
    --middlegrey: rgb(60, 60, 60);
    --darkgrey: rgb(37, 37, 37);

    --window-height: 150%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* font-weight: 400; */
    font-weight: 500;
    /* font-weight: bold; */
    letter-spacing: 0.3px;
}

html {
    scroll-behavior: smooth;
    margin: 0;
    height: 100%;
    overflow-y: hidden;
}

body {
    /* border: 3px solid lawngreen; */
    /* position: fixed; */
    /* background-color: var(--middlegrey); */
    /* overflow: hidden !important; */
    margin: 0;
    height: 100%;
    overflow-y: hidden;
    /* padding: 1rem; */
}

/*================
main
==================*/

.main {
    /* border: 3px solid green; */
    height: 100%;
    display: none;
}

.main-start {
    /* border: 3px solid green; */
    position: relative;
    height: 100vh;
    padding-top: 80px;
    overflow-y: scroll;
}

.main-start::-webkit-scrollbar {
    /* display: none; */
}

.main-start::-webkit-scrollbar {
    width: 5px;
}

.main-start::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.main-start::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.main-start-chat-home,
.main-start-chat {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 94%;
    max-width: 180px;
    position: absolute;
    bottom: 0;
    /* left: 0px; */
    right: 3%;
    z-index: 9999;
    /* display: none; */
}
.main-start-chat-home.show,
.main-start-chat.show {
    max-width: 350px;
}
.main-start-chat-header-home,
.main-start-chat-header {
    /* border: 3px solid blue; */
    background-color: rgb(165, 200, 70);
    background-color: rgb(215, 233, 220);
    color: black;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.3rem 1rem;
    padding: 2px 1rem;
    width: 100%;
    height: 50px;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
}
.main-start-chat-header-home {
    display: none;
}

.main-start-chat-header-home.show,
.main-start-chat-header.show {
    border: 2px solid black;
    border-bottom: 1pt solid black;
    border-radius: 10px 10px 0 0;
    justify-content: space-between;
}
.main-start-chat-header-home.show {
    display: flex;
}

.main-start-chat-header-home:hover,
.main-start-chat-header:hover {
    scale: 1.03;
    transition: 0.2s;
}
.main-start-chat-header-home.show:hover,
.main-start-chat-header.show:hover {
    cursor: inherit;
    scale: 1;
    transition: 0.2s;
}
.main-start-chat-home-input-header-text,
.main-start-chat-input-header-text {
    font-size: 0.9rem;
    color: rgb(25, 110, 40);
    line-height: 1.6;
    padding: 1.2rem 0 0.3rem !important;
    padding: 0.8rem 0 0rem !important;
}
.main-start-chat-header-home svg,
.main-start-chat-header svg {
    display: inherit;
}
.main-start-chat-header-home svg.hide,
.main-start-chat-header svg.hide {
    display: none;
}
.main-start-chat-header-home img,
.main-start-chat-header img {
    display: block;
    object-fit: cover;
    max-height: 100%;
    margin-bottom: -3px;
    padding: 3px 0;
    display: none;
}
.main-start-chat-header-home img.show,
.main-start-chat-header img.show {
    display: block;
}
.main-start-chat-x-home,
.main-start-chat-x {
    font-size: 1.5rem;
    cursor: pointer;
    margin-top: -5px;
    padding: 0.3rem;
    padding-right: 0;
    display: none;
}
.main-start-chat-x-home:focus,
.main-start-chat-x-home:hover,
.main-start-chat-x:focus,
.main-start-chat-x:hover {
    scale: 1.02;
    font-weight: bold;
}
.main-start-chat-x-home.show,
.main-start-chat-x.show {
    display: inherit;
}

.main-start-chat-box-home,
.main-start-chat-box {
    /* border: 3px solid purple; */
    background-color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.1rem;
    padding-top: 0;
    width: 100%;
    display: none;
}
.main-start-chat-box-home.show,
.main-start-chat-box.show {
    display: flex;
    border: 2px solid black;
    border-top: none;
}

.main-start-chat-box-home-message-sended,
.main-start-chat-box-message-sended {
    /* border: 3px solid purple; */
    background-color: white;
    color: rgb(25, 110, 40);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    display: none;
}
.main-start-chat-box-home-message-sended svg,
.main-start-chat-box-message-sended svg {
    margin: 1rem;
}
.main-start-chat-box-home-message-sended p,
.main-start-chat-box-message-sended p {
    text-align: center;
}
.main-start-chat-box-home-message-sended.show,
.main-start-chat-box-message-sended.show {
    display: flex;
}

.main-start-chat-home-input,
.main-start-chat-input {
    /* border: 3px solid green; */
    width: 100%;
}
.main-start-chat-home-input p,
.main-start-chat-input p {
    /* border: 3px solid yellow; */
    padding: 1.2rem 0 0.3rem;
    padding: 0.8rem 0 0.25rem;
}
.main-start-chat-home-input textarea,
.main-start-chat-home-input input,
.main-start-chat-input textarea,
.main-start-chat-input input {
    /* border: 3px solid yellow; */
    font-size: 1rem;
    color: black;
    border: 2px solid rgb(70, 70, 70);
    border: 2px solid rgb(130, 130, 130);
    border: 1px solid rgb(30, 30, 30);
    padding: 0.5rem;
    border-radius: 5px;
    width: 100%;
    outline: none;
}
.main-start-chat-home-input textarea.fail,
.main-start-chat-home-input input.fail,
.main-start-chat-input textarea.fail,
.main-start-chat-input input.fail {
    border: 2px solid rgb(220, 0, 0);
}
.main-start-chat-home-input input,
.main-start-chat-input input {
    max-width: 250px;
    height: 37px;
}
.main-start-chat-home-input textarea,
.main-start-chat-input textarea {
    resize: none;
}
.main-start-chat-home-input textarea::placeholder,
.main-start-chat-home-input input::placeholder,
.main-start-chat-input textarea::placeholder,
.main-start-chat-input input::placeholder {
    color: rgb(100, 100, 100);
}
.main-start-chat-home-input textarea:focus,
.main-start-chat-home-input input:focus,
.main-start-chat-home-input textarea:hover,
.main-start-chat-home-input input:hover,
.main-start-chat-input textarea:focus,
.main-start-chat-input textarea:hover,
.main-start-chat-input input:focus,
.main-start-chat-input input:hover {
    border: none;
    border-bottom: 2px solid rgb(30, 30, 30);
}

.chat-submit-btn-home,
.chat-submit-btn {
    border: 2px solid rgb(30, 130, 50);
    border: 2px solid rgb(25, 110, 40);
    color: rgb(30, 130, 50);
    color: rgb(25, 110, 40);
    font-weight: bold;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    margin-top: 1.3rem;
    margin-top: 0.9rem;
    /* margin-bottom: 0.3rem; */
    cursor: pointer;
}
.chat-submit-btn-home:focus,
.chat-submit-btn-home:hover,
.chat-submit-btn:focus,
.chat-submit-btn:hover {
    scale: 1.03;
    transition: 0.1s;
    background-color: rgb(30, 130, 50);
    background-color: rgb(25, 110, 40);
    color: white;
    font-weight: inherit;
}


.main-start-rabatt {
    /* border: 3px solid yellow; */
    border-bottom: 1px solid rgb(245, 245, 245);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    height: calc(30% - 80px);
    min-height: 250px;
    width: 100%;
    position: absolute;
    top: 80px;
    z-index: 1;

    opacity: 1;
    transition: 0.2s;

    display: none;
}
.main-start-rabatt.scroll {
    height: fit-content;
    min-height: 112.5px;
}
.main-start-rabatt.hide {
    height: 0;
    min-height: 0;
    opacity: 0;

    /* display: none; */
}
.main-start-rabatt-x {
    /* border: 3px solid red; */
    position: absolute;
    top: 15px;
    right: 20px;
    /* left: 20px; */
    font-size: 1.8rem;
    /* font-weight: bold; */
    padding: 0.2rem 0.5rem 0.3rem;
    color: black;
    color: white;
    z-index: 2;

    cursor: pointer;
}

.main-start-rabatt-x.scroll {
    top: 10%;
    right: 10px;
}

.main-start-rabatt-x:hover {
    transition: 0.2s;
    /* scale: 1.05; */
}

.main-start-rabatt .main-start-rabatt-box {
    border: 2px solid white;
    font-size: 0.9rem;
    font-weight: 500;
    /* min-width: 720px; */
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(30, 30, 30, 0.2);
    position: absolute;
    color: white;
    margin: 1rem 1rem 0;
    padding: 1.2rem 1.5rem;
    line-height: 1.7;
    transition: 0.1s;
    cursor: pointer;

    text-shadow: 0 0 3px black;
}

.main-start-rabatt .main-start-rabatt-box.scroll {
    margin: 0;
    width: 100%;
    height: fit-content;
    padding: 1.2rem 2.5rem;
    background-color: rgba(30, 30, 30, 1);
    border: none;
    border-bottom: 1px solid rgb(245, 245, 245);
}

.main-start-rabatt .main-start-rabatt-box b {
    font-weight: 500;
    color: rgb(80, 200, 80);
    /* color: rgb(0, 185, 60); */
    /* color: rgb(40, 185, 60); */

}
.main-start-rabatt .main-start-rabatt-box:focus,
.main-start-rabatt .main-start-rabatt-box:hover {
    border: none;
    font-weight: 500;
    background-color: rgba(30, 30, 30, 1);
}

.main-start-rabatt::before {
    content: "";

    display: block;
    /* position: fixed; */
    width: 100%;
    height: 100%;

    background-image: url(images/Bergpanorama-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 0.8), transparent);
    background-image: url(images/Bergpanorama-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1) 100%, transparent);

    background-blend-mode: screen;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    /* background-position: 0%; */
    background-position: 50% 37%;
    /* background-attachment: scroll; */
    /* background-attachment: fixed; */
    background-size: cover;
    /* top: 0;
    right: 0;
    bottom: 0;
    left: 0; */
    
    z-index: -2;
}


.main-start-container-box {
    /* border: 3px solid blue; */
    height: 100%;
    height: calc(100% - 80px);
    width: 100%;
    position: fixed;
    top: 80px;
    z-index: -1;

    /* display: none; */
}

.main-start-container {
    /* border: 3px solid purple; */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    height: 100%;
    padding: 1rem;
    padding-top: 15vh;
    padding-left: 5vw;
    padding-bottom: 10vh;
    padding-bottom: 7vh;
    overflow: hidden;
}

.main-start-container-arrow {
    /* border: 3px solid yellow; */
    /* position: absolute;
    top: -63px;
    left: 0;
    right: 0; */
    height: 60px;
    width: 100%;
    width: fit-content;
    margin: 0 auto;
    
    margin-top: calc(100vh - 80px);
    margin-top: var(--window-height);
    margin-top: calc(var(--window-height) - 60px);

    padding: 0 0.5rem;
    padding-top: 0.1rem;
    cursor: pointer;

    /* scroll-margin-top: 2rem; */

    /* display: none; */
    visibility: hidden;
    opacity: 0;
}

.main-start-container-arrow svg {
    color: rgba(255, 255, 255, 0.9);
}

.main-start-description {
    /* border: 3px solid yellow; */
    background-color: whitesmoke;
    display: flex;
    justify-content: end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 100%;
    right: 0;
    width: 100%;
    max-width: 410px;
    height: 100%;
    max-height: 180px;
    padding: 2rem;
    padding-right: 0.5rem;
    border-radius: 500px 0 0 0;
}
.main-start-industrie.hide {
    display: none;
}
.main-start-bergrettung {
    display: none;
}
.main-start-feuerwehr {
    display: none;
}
.main-start-bergrettung.show {
    display: flex;
}
.main-start-feuerwehr.show {
    display: flex;
}

.main-start-logo {
    /* border: 3px solid blue; */
    height: 60%;
    width: 40%;
}
.main-start-logo-ind {
    /* border: 3px solid blue; */
    height: 100%;
    width: 20%;
}
.main-start-bergrettung .main-start-logo {
    padding-top: 1.7rem;
    padding-right: 1rem;
}
.main-start-feuerwehr .main-start-logo {
    padding-top: 1.5rem;
    padding-right: 1.3rem;
}
.main-start-logo img {
    /* border: 3px solid green; */
    display: block;
    height: 100%;
    max-height: 100%;
    /* width: 100%; */
    /* max-width: 100%; */
    object-fit: cover;
    margin-left: auto;
}
.main-start-description-box {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 0 0.5rem;
    height: 100%;
    width: 55%;
    /* width: 90%; */
    max-width: 200px;
}
.main-start-description-box span {
    text-decoration: underline;
    font-size: 1rem;
    color: black;
}
.main-start-bergrettung h1 {
    /* margin-bottom: 2rem; */
    font-size: 1rem;
    color: black;
    line-height: 1.2;
}
.main-start-bergrettung h1 b {
    color: rgb(0, 80, 52);
    color: rgb(0, 100, 45);
    font-size: 1.1rem;
    font-weight: bold;
}
.main-start-feuerwehr h1 {
    /* margin-bottom: 2rem; */
    font-size: 1rem;
    color: black;
    line-height: 1.2;
}
.main-start-feuerwehr h1 b {
    color: rgb(220, 20, 20);
    font-size: 1.1rem;
    font-weight: bold;
}
.main-start-industrie h1 {
    /* margin-bottom: 2rem; */
    font-size: 1rem;
    color: black;
    line-height: 1.2;
}
.main-start-industrie h1 b {
    color: rgb(40, 60, 110);
    color: rgb(45, 80, 180);
    font-size: 1.1rem;
    font-weight: bold;
}

@media (min-width: 330px) {
    .main-start-logo {
        height: 90%;
    }

    .main-start-bergrettung .main-start-logo {
        padding-right: 1.7rem;
    }
    .main-start-feuerwehr .main-start-logo {
        padding-right: 2rem;
    }

    .main-start-description-box span {
        font-size: 1.1rem;
    }

    .main-start-bergrettung h1,
    .main-start-feuerwehr h1,
    .main-start-industrie h1 {
        /* margin-bottom: 2rem; */
        font-size: 1.1rem;
    }

    .main-start-bergrettung h1 b,
    .main-start-feuerwehr h1 b,
    .main-start-industrie h1 b {
        font-size: 1.2rem;
    }
}

@media (min-width: 1000px) {
    .main-start-description {
        width: 40vw;
        height: 100%;
        max-height: 180px;
        padding: 2rem;
        padding-right: 0.5rem;
        border-radius: 500px 0 0 0;
    }
    .main-start-logo {
        height: 100%;
    }

    .main-start-description-box span {
        font-size: 1.25rem;
    }

    .main-start-bergrettung h1,
    .main-start-feuerwehr h1,
    .main-start-industrie h1 {
        /* margin-bottom: 2rem; */
        font-size: 1.25rem;
    }

    .main-start-bergrettung h1 b,
    .main-start-feuerwehr h1 b,
    .main-start-industrie h1 b {
        font-size: 1.4rem;
    }
}

.main-start-container::before {
    content: "";

    /* background-image: url(images/background-start-page.jpg), linear-gradient(90deg, rgba(20, 20, 20, 1), rgba(20, 20, 20, 1) 40%, transparent); */
    /* background-image: url(images/background-img-start-small.PNG), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 50%, transparent); */
    /* background-image: url(images/background-img-start-small.PNG),
    linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, transparent),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5) 40%, transparent); */
    /* background-image: url(images/background-img-start-small.PNG), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.9) 30%, transparent); */
    background-image: url(images/main-start-background-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 35%, transparent);
    /* background-image: url(images/österreichische-freiwillige-feuerwehr.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 35%, transparent); */
    /* background-image: url(images/österreichische-bergrettung.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 35%, transparent); */
    /* background-image: url(images/industrieklettern.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 35%, transparent); */


    /* background-color: rgba(255, 255, 255, 0.3); */
    background-blend-mode: screen;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    background-position: 70% 50%;
    background-attachment: fixed;
    background-size: cover;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* background: inherit; */
    /* transition: inherit; */
    animation: start-animate-container 30s infinite;

    scale: 1;
    z-index: -1;
}

.main-start-header-one {
    font-size: 1.25rem;
    font-weight: bold;
    color: rgb(240, 240, 240);
    letter-spacing: 1.5px;
    height: fit-content;
    margin-top: auto;
    transform: translateX(-100%);
    /* margin-left: -100%; */

    animation: start-animate-header-one 1s ease-in-out 0s forwards;
    /* animation-delay: 0.3s; */
    /* animation-fill-mode: forwards; */
}

.main-start-header-two {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(240, 240, 240);
    color: rgb(0, 80, 52);
    color: rgb(0, 240, 0);
    color: rgb(0, 185, 60);
    /* text-shadow: 0 0 0.5px white; */
    margin: 0.2rem 0 1.5rem;
    letter-spacing: 1.5px;

    transform: translateX(150%);

    animation: start-animate-header-two 1s ease-in-out 0s forwards;
    /* animation-delay: 0.3s; */
}
.main-start-header-caption {
    /* border: 3px solid red; */
    font-size: 0.9rem;
    color: rgb(240, 240, 240);
    /* max-width: 460px; */
    line-height: 1.5;
    letter-spacing: 0.8px;

    opacity: 0;

    animation: start-animate-header-caption 1.5s ease-in-out 0s forwards;
    animation-delay: 1s;

}
.main-start-header-caption b {
    /* color: rgb(20, 170, 55); */
    color: rgb(0, 185, 60);
}

@keyframes start-animate-container {
    0% {
        scale: 1;
    }
    100% {
        scale: 1.4;
    }
}
@keyframes start-animate-header-one {
    100% {
        transform: translateX(0);
    }
}
@keyframes start-animate-header-two {
    100% {
        transform: translateX(0);
    }
}
@keyframes start-animate-header-caption {
    100% {
        opacity: 1;
    }
}

.main-start-body-info {
    /* border: 3px solid green; */
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    color: white;
    background-color: rgb(30, 30, 30);
    /* background-color: rgb(30, 30, 30); */
    padding: 3rem 7%;

    overflow: hidden;
    /* display: none; */

    /* margin-top: calc(100vh - 80px);
    margin-top: var(--window-height); */

    /* display: none; */
    /* scroll-margin: 5rem; */
    /* scroll-margin-top: var(--window-scroll); */
}

.navigation-function {
    margin-top: 1rem;
}

.main-start-body-info-box-top {
    /* border: 3px solid purple; */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 680px;
    /* margin: 0 1rem; */
    padding-bottom: 100px;
}

.main-start-body-info-text {
    /* border: 3px solid red; */
    max-width: 520px;
}
.main-start-body-info-text h2 {
    margin-bottom: 1rem;
}

.main-start-body-info-text p {
    /* border: 3px solid blue; */
    padding-bottom: 1rem;
    line-height: 1.35;
    letter-spacing: 0.7px;
}
.main-start-body-info-text p b {
    color: rgb(0, 150, 0);
    color: rgb(0, 185, 60);
    color: rgb(30, 220, 60);
    color: rgb(100, 230, 100);
    color: rgb(80, 200, 80);
}

.main-start-body-info-icon-container {
    /* border: 3px solid yellow; */
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    width: calc(50vw + 120px);
    width: 100vw;
    margin-left: calc(50% - 125px);
    overflow: hidden;
}
.main-start-body-info-icon-box {
    /* border: 3px solid blue; */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    max-width: 250px;
    height: 70px;

    /* margin: auto; */
    /* overflow: hidden; */
}

.main-start-body-info-box-bottom {
    /* border: 3px solid lawngreen; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: end;
    align-items: start;
    /* margin-top: 3rem; */
    /* margin: 0 1rem; */
}
.main-start-body-info-box-bottom-up {
    /* border: 3px solid blue; */
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}
.main-start-body-advantage-video {
    /* border: 3px solid yellow; */
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    display: none;
}

.main-start-body-advantage-text {
    /* border: 3px solid red; */

    max-width: 680px;
}
.main-start-body-advantage-text h2 {
    margin-bottom: 1rem;
}
.main-start-body-advantage-text ul {
    /* border: 3px solid purple; */
    padding-left: 1rem;
    /* padding-bottom: 2rem; */
}
.main-start-body-advantage-text li {
    /* border: 3px solid blue; */
    list-style-position: outside;
    line-height: 1.35;
    letter-spacing: 0.7px;
    padding-bottom: 0.7rem;
}
.main-start-body-advantage-text li b {
    color: rgb(80, 200, 80);
}

.main-start-body-devices {
    /* border: 3px solid orchid; */
    position: relative;

    background-color: white;
    background-color: rgb(245, 245, 245);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 0 4rem;

    overflow: hidden;
}
.shadow-one {
    /* border: 3px solid purple; */
    background: linear-gradient(90deg, transparent, rgba(0, 80, 52, 0.1) 50%, transparent);
    position: absolute;
    top: -230px;
    bottom: 0;
    left: -5%;
    width: 20%;
    height: 900px;
    transform: rotate(-35deg);
}
.shadow-two {
    /* border: 3px solid purple; */
    background: linear-gradient(90deg, transparent, rgba(0, 80, 52, 0.1) 50%, transparent);
    position: absolute;
    top: -230px;
    bottom: 0;
    /* left: 40%; */
    width: 20%;
    height: 900px;
    transform: rotate(-35deg);
}
.shadow-three {
    /* border: 3px solid purple; */
    background: linear-gradient(90deg, transparent, rgba(0, 80, 52, 0.1) 50%, transparent);
    position: absolute;
    top: -230px;
    bottom: 0;
    right: -5%;
    width: 20%;
    height: 900px;
    transform: rotate(-35deg);
}
.shadow-one,
.shadow-two,
.shadow-three {
    display: none;
}

.main-start-body-devices-text {
    /* border: 3px solid red; */
    font-size: 1.1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 90%;
    max-width: 325px;
    /* max-width: 550px; */

    padding: 3rem 0 0;

    /* height: 200px; */
    line-height: 1.6;

}
.main-start-body-devices-text span {
    /* border: 3px solid blue; */

    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.6;

}
.devices-txt-first,
.devices-txt-second {
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(0, 80, 52);
    color: rgb(0, 110, 0);
    color: rgb(0, 185, 60);
    color: rgb(0, 135, 30);
    color: rgb(50, 160, 50);
}
/* .devices-txt-second {} */

.main-start-body-devices-img {
    /* border: 3px solid lawngreen; */
    position: relative;
    /* display: flex; */
    /* flex-direction: row; */
    /* width: 50%; */
    height: 250px;
    padding: 1rem 1rem 3rem;
    width: 90%;
    max-width: 630px;
    margin: 0 auto;
}

.main-start-body-devices-img .img-pc {
    /* border: 3px solid red; */
    position: absolute;
    bottom: 20%;
    left: 22%;
    display: inline-block;
    /* object-fit: cover; */
    width: 100%;

    max-width: 70%;
    max-height: 100%;

    margin-top: auto;
}

.main-start-body-devices-img .img-tablet {
    /* border: 3px solid black; */
    position: absolute;
    bottom: 10%;
    left: 2.5%;
    display: inline-block;
    /* object-fit: cover; */
    max-width: 25%;
    max-height: 100%;

    margin-top: auto;
}

.main-start-body-devices-img .img-smartphone {
    /* border: 3px solid black; */
    position: absolute;
    bottom: 13%;
    left: 87.5%;
    display: inline-block;
    /* object-fit: cover; */
    max-width: 10%;
    max-height: 60%;

    margin-top: auto;
}


.main-start-body-function {
    /* border: 3px solid yellow; */
    color: whitesmoke;
    position: relative;
    background-color: rgb(30, 30, 30);
    padding: 1rem 2rem 0;

    scroll-margin-top: 5rem;
}

.main-start-body-function h2 {
    padding: 1rem 0 2rem;
    text-align: center;
}

.main-start-body-function-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
}

.main-start-body-function-box {
    /* border: 3px solid blue; */
    position: relative;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    margin: 0 auto 3rem;

    /* overflow: hidden; */
}

.function-header {
    /* border: 3px solid blue; */

    position: absolute;
    top: -70px;
    right: -32px;
    width: fit-content;
    font-size: 4rem;
    font-weight: bold;
    color: rgb(0, 65, 45);
    color: rgb(0, 130, 90);
}

.main-start-body-function-video-box {
    /* border: 3px solid green; */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* background-color: whitesmoke; */
    /* background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), transparent 25%); */
    /* background: linear-gradient(0deg, rgba(255, 0, 0, 0.9), transparent 25%); */
    /* background: linear-gradient(0deg, rgba(30, 30, 30, 0.9), transparent 25%); */
    height: 200px;
    width: 100%;
    /* margin: 0 auto 1rem; */
    /* overflow: hidden; */
}
.main-start-body-function-video-box img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.main-start-body-function-video-box-video3,
.main-start-body-function-video-box-video2,
.main-start-body-function-video-box-video1 {
    /* display: block; */
    width: 100%;
    max-width: 100%;
    /* max-height: 100%; */
    /* object-fit: cover; */
}


.main-start-body-function-box span {
    color: rgb(180, 255, 110);
    margin-top: calc(200px);
}

.main-start-body-function-box h4 {
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1.2rem 0;
}

.main-start-body-top-ref,
.main-start-body-top-company {
    /* border: 3px solid yellow; */
    background-color: rgb(150, 150, 150);
    background-color: whitesmoke;
    /* height: 100%; */
    padding: 2rem 1rem 3rem;
    /* margin-top: 350px; */
    /* margin-top: calc(100vh - 80px); */
    /* margin-top: var(--window-height); */
    scroll-margin-top: 5rem;
}
.main-start-body-top-ref {
    background-color: rgb(215, 233, 220);
    background-color: rgb(225, 225, 225);
    background-color: whitesmoke;
    /* background-color: rgb(185, 230, 160); */
    /* background-color: rgb(148, 208, 160); */
    /* background-color: rgb(170, 220, 130); */
    /* background-color: rgb(180, 220, 140); */
}

.main-start-body-top-company-container {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    width: 100%;
    /* max-width: 1100px; */
    height: fit-content;
    /* margin: 0 auto 1rem; */
    margin: 0 auto;
}

.main-company-top {
    /* border: 3px solid blue; */
    font-size: 1.5rem;
    /* font-weight: bold; */
    /* color: white; */
    text-align: center;
    letter-spacing: 0px;
}

.main-company-bottom {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    max-width: 680px;
    padding: 1.5rem 0;
    margin: 1.5rem auto 0;
    flex-wrap: wrap;
}

.main-company-bottom-container {
    /* border: 3px solid red; */
    max-width: 250px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-basis: 170px;
    flex-grow: 1;
    /* margin: auto; */
    margin: 0.5rem;
}
.main-company-bottom-container-edelrid {
    max-width: 260px;
}
.main-company-bottom .main-company-bottom-container-austrialpin {
    margin-top: 0;
}
.main-company-bottom-container-immoos {
    padding: 1rem 2rem;
}
.main-company-bottom-container-haberkorn {
    padding: 1rem 0 0;
}

.main-company-bottom-container img {
    /* border: 3px solid lawngreen; */
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.main-company-bottom-container-bergwacht img {
    /* border: 3px solid red; */
    max-height: 90%;
    object-fit: contain;
}
.main-company-bottom-container-bergrettung img {
    /* border: 3px solid rebeccapurple; */
    max-height: 100%;
    object-fit: contain;
}
.main-company-bottom-container-raich img {
    /* border: 3px solid rebeccapurple; */
    max-height: 100%;
    object-fit: contain;
}

.main-start-body {
    /* border: 3px solid yellow; */
    background-color: whitesmoke;
    background-color: rgb(70, 130, 90);
    background-color: rgb(50, 50, 50);
    background-color: rgb(30, 30, 30);
    /* height: 100%; */
    padding: 1rem;
    /* color: white; */

    /* display: none; */
}
.main-start-body-scroll {
    scroll-margin-top: 80px;
}

.main-start-body-container-bottom,
.main-start-body-container {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    height: fit-content;
    /* margin: 0 auto 1rem; */
    margin: 0 auto;
    /* padding-bottom: 1rem; */
}
.main-start-body-container-bottom {
    margin-top: 2rem;
}
.main-start-body-container-bottom-header {
    color: rgb(180, 180, 180);
    font-size: 0.9rem;
    padding-top: 0.5rem;
}

.main-start-body-container-bottom h2,
.main-start-body-container h2 {
    padding: 1rem 0;
    color: white;
}

.main-container {
    /* border: 3px solid blue; */
    padding-top: 80px;
    height: 100%;
}


.main-child-container {
    /* border: 3px solid purple; */
    display: none;
    height: 100%;
}

/* .main-stuff {
    display: inherit;
} */

/* .main-user-profil {
    display: inherit;
} */

.main-product {
    display: inherit;
}

.main-child-header {
    border-bottom: 1px solid rgba(30, 30, 30, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    /* font-weight: bold; */
    background-color: rgb(220, 235, 225);
    /* background-color: white; */
    padding: 0 1rem;
    letter-spacing: 0.8px;
}
.main-child-header-profil {
    /* background-color: white; */
}

.section-header {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

@media (min-width: 400px) {
    .main-start-body-function-box span {
        color: rgb(180, 255, 110);
        margin-top: calc(200px + 1rem);
    }
}

@media (min-width: 450px) {
    .main-start-body-function-box span {
        color: rgb(180, 255, 110);
        margin-top: calc(200px + 3rem);
    }
}

@media (min-width: 500px) {
    .main-start-body-devices-text {
        font-size: 1.2rem;
        /* max-width: 418px; */
        max-width: 420px;
        line-height: 1.8;

        padding: 5rem 0;
    }

    .main-start-body-devices-text span {
        line-height: 1.8;
    }

    .devices-txt-first,
    .devices-txt-second {
        font-size: 1.45rem;
        line-height: 1.8;
    }

    .main-start-body-devices-img{
        padding: 1rem 1rem 5rem;
    }
}

@media (min-width: 600px) {
    .function-header {
        top: 75px;
        right: -45px;
    }
    .function-header-one {
        right: -37px;
    }
}

@media (min-width: 700px) {
    .main-start-body-devices-text {
        padding: 5rem 0 7rem;
    }

    .main-start-body-devices-img {
        max-width: 570px;
    }

    .main-start-body-devices-img .img-pc {
        bottom: 20%;
        display: inline-block;
        margin-top: auto;
        /* left: 22.5%; */
        left: 17%;
        max-width: 80%;
        max-height: 100%;
    }
    .main-start-body-devices-img .img-tablet {
        bottom: 10%;
        display: inline-block;
        margin-top: auto;
        /* left: 2.5%; */
        left: -2.5%;
        max-width: 25%;
        max-height: 100%;
    }
    .main-start-body-devices-img .img-smartphone {
        bottom: 13%;
        display: inline-block;
        margin-top: auto;
        /* left: 87.5%; */
        left: 92.5%;
        max-width: 10%;
        max-height: 60%;
    }

    .main-start-body-scroll {
        scroll-margin-top: 100px;
    }

    .main-start-body-function {
        scroll-margin-top: calc(5rem + 20px);
    }
}

@media (min-width: 800px) {
    .main-start-body-devices-text {
        max-width: 600px;
    }
}

@media (min-width: 1000px) {
    .main-start-body-function-container {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .main-start-body-function-box-middle {
        margin: 0 2rem 3rem;
    }

    .main-start-body-function h2 {
        padding: 1rem 0 4rem;
    }

    .main-start-body-function-box span {
        color: rgb(180, 255, 110);
        margin-top: calc(200px);
    }

    .function-header {
        top: -70px;
        left: 43%;
    }

    .main-start-body-info {
        /* flex-direction: row; */
        /* justify-content: space-evenly; */
        padding: 3rem;
    }

    .main-start-body-info-text {
        max-width: 629px;
    }

    .main-start-body-info-box-top {
        /* flex-direction: row; */
        /* width: 100%; */
        /* max-width: 1100px; */

        /* text-align: center; */

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5rem;
    }
    .main-start-body-info-box-bottom {
        /* flex-direction: row; */
        /* justify-content: space-between; */
        /* align-items: center; */
        /* align-items: start; */
        /* width: 100%; */
        /* max-width: 1100px; */
        margin-left: auto;
        margin-right: auto;
    }
    .main-start-body-info-box-bottom-up {
        /* flex-direction: row; */
        /* justify-content: space-between; */
        /* align-items: center; */
        /* align-items: start; */
        /* width: 100%; */
        /* max-width: 1100px; */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }

    .main-start-body-advantage-video {
        /* display: flex; */
    }

    .shadow-one,
    .shadow-two,
    .shadow-three {
        display: inherit;
    }

    .main-start-body-devices-text {
        font-size: 1.35rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        max-width: 465px;
        line-height: 2;

        height: fit-content;

        padding: 2rem 0 0;
        margin-right: 3rem;
    }

    .main-start-body-devices {
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        padding: 3rem;
        height: 450px;
    }
    
    .main-start-body-devices-text span {
        line-height: 2;
    }

    .devices-txt-first,
    .devices-txt-second {
        font-size: 1.55rem;
        line-height: 2;
    }
    
    .main-start-body-devices-img {
        /* border: 3px solid red; */

        margin: 0;
        margin-bottom: -4rem;
    }

    .main-start-body-devices-img .img-pc {
        /* border: 3px solid red; */
        bottom: 20%;
        display: inline-block;
        margin-top: auto;
        left: 17.5%;
        /* width: 100%; */
        max-width: 80%;
        max-height: 100%;
        /* object-fit: cover; */
        /* object-fit: inherit; */
    }
    .main-start-body-devices-img .img-tablet {
        /* border: 3px solid black; */
        bottom: 10%;
        display: inline-block;
        margin-top: auto;
        left: -2.5%;
        max-width: 25%;
        max-height: 100%;
    }
    .main-start-body-devices-img .img-smartphone {
        /* border: 3px solid grey; */
        bottom: 13%;
        display: inline-block;
        margin-top: auto;
        left: 92.5%;
        max-width: 10%;
        max-height: 60%;
    }

}

@media (min-width: 1150px) {
    .main-start-body-function-box span {
        color: rgb(180, 255, 110);
        margin-top: calc(200px + 1.5rem);
    }
}

@media (min-width: 1200px) {
    .main-start-body-info-text {
        max-width: 629px;
    }
    .main-start-body-info-icon-box {
        max-width: 300px;
    }

    .main-start-body-devices-img .img-pc {
        bottom: 20%;
        /* left: 25%; */
        left: 17.5%;
        /* width: 80%; */
        max-width: 80%;
        max-height: 100%;
    }

    .main-start-body-devices-img .img-tablet {
        bottom: 10%;
        left: -2.5%;
        max-width: 25%;
        max-height: 100%;
    }

    .main-start-body-devices-img .img-smartphone {
        bottom: 13%;
        /* left: 90%; */
        left: 92.5%;
        max-width: 10%;
        max-height: 60%;
    }
}

@media (min-width: 1250px) {
    .main-start-body-function-box span {
        color: rgb(180, 255, 110);
        margin-top: calc(200px + 3rem);
    }
}


    
/* ===============
Impressum
===============*/


.main-start-impressum {
    /* border: 3px solid green; */
    display:  none;
    background: white;
    font-size: 1rem;

    scroll-margin-top: 80px;
}
@media (min-width: 700px) {
    .main-start-impressum {
        scroll-margin-top: 100px;
    }
}

.impressum-container {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 2rem;
}
.impressum-container b {
    font-weight: bold;
}

.impressum-container img {
    margin-top: 1.5rem;
}

.impressum-container p {
    margin-top: 0.7rem;
}

.impressum-container h1 {
    padding: 1.8rem 0;
}

.impressum-container h2 {
    padding: 1.5rem 0 0.5rem;
}

.impressum-container h3 {
    padding: 1rem 0 0.3rem;
}

.impressum-child-container p:not(:last-of-type) {
    margin-bottom: 0.7rem;
}

.impressum-child-container p:last-of-type {
    padding-bottom: 2rem;
}

.impressum-br-copywright {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
}

.impressum-br-copywright-child {
    /* border: 3px solid green; */
    width: 100%;
}

.impressum-br-copywright p {
    font-size: 0.85rem;
}

.impressum-br-copywright p:not(:last-of-type) {
    margin-bottom: 0.5rem;
}

.impressum-br-copywright p:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0.7rem;
}

.contact-number-impressum, .contact-email-impressum, .website {
    color: black;
}

.y-lam {
    color: black;
    text-decoration: none;
}

.contact-number-impressum:hover,
.contact-number-impressum:focus,
.contact-email-impressum:hover,
.contact-email-impressum:focus,
.website:hover,
.website:focus,
.y-lam:hover,
.y-lam:focus {
    font-size: 1.03rem;
}

@media (min-width: 400px) {
    .impressum-container {
        font-size: 1.1rem;
    }

    .impressum-container h1 {
        padding: 2rem 0;
    }

    .contact-number-impressum:hover,
    .contact-number-impressum:focus,
    .contact-email-impressum:hover,
    .contact-email-impressum:focus,
    .website:hover,
    .website:focus,
    .y-lam:hover,
    .y-lam:focus {
        font-size: 1.13rem;
    }
}

@media (min-width: 700px) {
    .impressum-br-copywright {
        flex-direction: row;
    }

    .impressum-br-copywright-child {
        width: 50%;
    }
}


.main-start-agb {
    /* border: 3px solid purple; */
    display:  none;
    width: 100%;
    padding: 0 5%;
    scroll-margin-top: 80px;
    font-size: 1rem;
    background: white;
}

.main-start-agb-for-registration,
.main-start-datenschutz-for-registration {
    /* border: 3px solid blue; */
    font-size: 0.9rem;
    width: 100%;
}

.main-start-agb-for-registration h1,
.main-start-datenschutz-for-registration h1 {
    font-size: 1.5rem;
    padding: 0.5rem 0;
}
.main-start-agb-for-registration h2,
.main-start-datenschutz-for-registration h2 {
    font-size: 1.25rem;
}

.main-start-datenschutz {
    /* border: 3px solid blue; */
    display:  none;
    width: 100%;
    padding: 0 5%;
    scroll-margin-top: 80px;
    font-size: 1rem;
    background: white;
}
@media (min-width: 700px) {
    .main-start-agb,
    .main-start-datenschutz,
    .main-start-impressum {
        scroll-margin-top: 100px;
    }
}

.main-start-areas {
    /* border: 3px solid yellow; */
    width: 100%;
    height: var(--window-height);
}
.main-start-areas::before {
    content: "";

    display: block;
    position: fixed;
    width: 100%;
    height: 100Vh;

    background-image: url(images/industrieklettern-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 25%, transparent);

    background-blend-mode: screen;
    /* background-blend-mode: multiply; */
    background-repeat: no-repeat;
    background-position: center;
    background-position: 40% 40%;
    /* background-attachment: scroll; */
    /* background-attachment: fixed; */
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    z-index: -2;
}
.main-start-areas.active::before {
    z-index: -1;
}
.main-start-areas.fw::before {
    background-position: 40% top;
    background-image: url(images/industrieklettern-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 25%, transparent);
}
.main-start-areas.br::before {
    background-position: 55% top;
    /* background-image: url(images/österreichische-bergrettung.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 25%, transparent); */
    background-image: url(images/österreichische-bergrettung-new-start-img.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 25%, transparent);
}
.main-start-areas.ind::before {
    background-position: 40% top;
    background-image: url(images/österreichische-freiwillige-feuerwehr-small.jpg), linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.7) 25%, transparent);
}

.main-start-body-image-devices {
    /* border: 3px solid yellow; */
    width: 100%;
    /* height: 100Vh; */
    height: var(--window-height);


    /* background-color: rgb(150, 150, 150);

    background-image: url(images/smartphone+pc.jpg);


    background-blend-mode: screen;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: bottom;
    background-position: 70% 50%;
    background-attachment: fixed;
    background-attachment: scroll;
    background-size: cover; */

}
.main-start-body-image-devices::before {
    content: "";
    /* border: 3px solid yellow; */
    display: block;
    position: fixed;
    width: 100%;
    height: 100Vh;

    /* background-color: rgb(150, 150, 150); */

    background-image: url(images/smartphone+pc.jpg);


    background-blend-mode: screen;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    /* background-position: 70% 50%; */
    /* background-attachment: scroll; */
    /* background-attachment: fixed; */
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    z-index: -2;
}
.main-start-body-image-devices.active::before {
    z-index: -1;
}




.main-start-footer {
    /* border: 3px solid red; */
    background-color: rgb(30, 30, 30);
    padding: 2rem 1rem 8.5rem;
}

.main-start-footer-container {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: column;
}

.main-start-footer-header {
    /* border: 3px solid blue; */
}

.main-start-footer-body {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
}

.main-start-footer-body-container {
    /* border: 3px solid yellow; */
    padding: 1rem 0;
    margin: 0 2rem 3rem;
}
.main-start-footer-body-container-first {
    margin: 1.5rem 2rem 2rem;
}

.main-start-footer-body-header {
    /* border: 3px solid blue; */
    font-size: 15px;
    color: whitesmoke;
    width: fit-content;
    margin-bottom: 1rem;
    text-decoration: underline;
    letter-spacing: 0;
}

.main-start-footer-body-caption {
    /* border: 3px solid green; */
    font-size: 14px;
    /* color: rgb(197, 242, 228); */
    color: rgb(200, 240, 230);
    width: fit-content;
    margin-top: 0.7rem;
    cursor: pointer;
    letter-spacing: 0;
}
.main-start-footer-body-caption-contact-email a {
    color: rgb(200, 240, 230);
}
.main-start-footer-body-caption-contact {
    /* border: 3px solid green; */
    font-size: 14px;
    /* color: rgb(197, 242, 228); */
    color: rgb(200, 240, 230);
    width: fit-content;
    margin-top: 0.7rem;
    letter-spacing: 0;
}
.main-start-footer-body-caption:hover {
    scale: 1.01;
    transition: 0.2s;
}

.main-start-footer-bottom {
    /* border: 3px solid lawngreen; */
    font-size: 14px;
    border-top: 1pt solid rgb(130, 130, 130);
    color: rgb(170, 170, 170);
    /* width: 100%; */
    text-align: center;
    margin: 0 1.5rem;
    padding: 1.3rem 0 0;
}

.main-start-footer .main-start-footer-bottom span {
    letter-spacing: -0.3px !important;
}






@media (min-width: 350px) {
    .main-start-header-one {
        font-size: 1.5rem;    
    }
    .main-start-header-two {
        font-size: 1.75rem;
    }
}
@media (min-width: 400px) {
    .main-start-rabatt.scroll {
        height: fit-content;
        min-height: 88px;
    }

    .main-company-bottom-container {
        margin: 0.5rem 1rem;
    }
}
@media (min-width: 450px) {
    .main-start-header-one {
        font-size: 1.75rem;    
    }
    .main-start-header-two {
        font-size: 2rem;
    }
}

@media (min-width: 600px) {
    .main-start-container-arrow {
        /* display: inherit; */
        visibility: inherit;
        opacity: 1;
        animation: start-animation-arrow 5s infinite;
    }
    @keyframes start-animation-arrow {
        0% {
            padding-top: 0.1rem;
        }
        42% {
            padding-top: 0.1rem;
        }
        46% {
            padding-top: 1.1rem;
        }
        50% {
            padding-top: 0.1rem;
        }
        54% {
            padding-top: 1.1rem;
        }
        58% {
            padding-top: 0.1rem;
        }
        100% {
            padding-top: 0.1rem;
        }
    }

    .main-start-container {
        padding-bottom: 12vh;
    }
    .main-start-container::before {
        /* background-image: url(images/main-start-background.jpg), */
        /* background-image: url(images/österreichische-freiwillige-feuerwehr.jpg), */
        /* background-image: url(images/österreichische-bergrettung.jpg),    
        linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 45%, transparent); */
        /* animation: start-animate-container-2 21s infinite; */
    }
    @keyframes start-animate-container-2 {
        0% {
            /* scale: 1; */
            /* background-image: url(images/österreichische-bergrettung.jpg),    
            linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 45%, transparent); */
        }
        /* 33% {
            scale: 1.1;
        } */
        34% {
            background-image: url(images/österreichische-freiwillige-feuerwehr-small.jpg),
            linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 45%, transparent);
            /* scale: 1; */
        }
        /* 67% {
            scale: 1.1;
        } */
        68% {
            background-image: url(images/industrieklettern-small.jpg),
            linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 45%, transparent);
            /* scale: 1; */
        }
        0% {
            background-image: url(images/österreichische-bergrettung.jpg),    
            linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 45%, transparent);
            /* scale: 1.1; */
        }
    }
    
    .main-start-header-one {
        font-size: 2rem;    
    }
    .main-start-header-two {
        font-size: 2.5rem;
    }
    .main-start-header-caption {
        font-size: 1rem;
    }
    .main-company-bottom-container {
        margin: 0.5rem 2rem;
    }
}

@media (min-width: 700px) {
    .main-start {
        padding-top: 100px;
    }
    .main-start-container-arrow {
        scroll-margin-top: 20px;
    }
    .main-start-rabatt {
        height: calc(30% - 100px);
        top: 100px;
    }
    .main-start-rabatt.scroll {
        height: fit-content;
        min-height: 88px;
    }
    .main-start-rabatt-x.scroll {
        top: 10%;
        right: 10px;
    }
    .main-start-rabatt .main-start-rabatt-box.scroll {
        margin: 0;
        width: 100%;
        height: fit-content;
        padding: 1.2rem 2.7rem;
        background-color: rgba(30, 30, 30, 1);
        border: none;
        border-bottom: 1px solid rgb(245, 245, 245);
    }

    .main-start-rabatt.hide {
        height: 0;
        min-height: 0;
        opacity: 0;
    }

    .main-start-container-box {
        height: calc(100% - 100px);
        top: 100px;
    }

    .main-start-body-info {
    /* .main-start-body-top-company { */
    /* .main-start-body-devices { */

        /* margin-top: calc(100vh - 100px);
        margin-top: var(--window-height); */
    }

    .main-container {
        padding-top: 100px;
    }

    .main-child-header {
        height: 100px;
    }
}

@media (min-width: 750px) {
    .main-start-rabatt.scroll {
        height: fit-content;
        min-height: 63.5px;
    }
}

@media (min-width: 800px) {
    .main-start-rabatt .main-start-rabatt-box {
        min-width: 720px;
    }

    .main-start-rabatt::before {
        background-position: 50% 25%;
    }

    .main-start-footer-body {
        flex-direction: row;
    }

    .main-start-footer-body-container {
        margin: 0 0 1.5rem 3rem;
    }
}

@media (min-width: 900px) {
    .main-start-header-one {
        font-size: 2.25rem;    
    }
    .main-start-header-two {
        font-size: 2.75rem;
    }
}

@media (min-width: 1000px) {
    .main-company-bottom {
        max-width: 1000px;
    }
}

/*================
  logo
==================*/

.logo {
    /* font-size: 0.233rem; */
    font-size: 1rem;
    /* font-size: 0.7rem; */
    /* font-size: 0.2rem; */
    /* border: 3px solid black; */
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    width: fit-content;
    padding: 1rem;
    padding-left: 0.5rem;

    display: none;
}

.logo-header {
    /* border: 0.7em solid orangered; */
    display: inherit;
    font-size: 0.25rem;
    padding-right: 0.3rem;
    -webkit-text-size-adjust: none;
}

.logo p {
    font-size: 5.66em;
}

.logo-container {
    /* border: 0.7em solid gray; */
    border: 0.7em solid;
    /* border: none; */
    /* border-color: black black black black; */
    border-color: black transparent black black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* width: 9.375em;
    height: 9.375em; */
    width: 10em;
    height: 10em;
    /* margin: 1rem; */
    margin-right: -1.5em;
}
.site-title-footer .logo-container {
    border-color: rgb(220, 220, 220) transparent rgb(220, 220, 220) rgb(220, 220, 220);
}

.logo-parent {
    /* border: 3px solid blue; */
    position: relative;
    width: fit-content;
    height: fit-content;
    transform: rotate(-45deg);
}

.logo-child-one {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 3.75em;
    height: 0.6em;
    border-radius: 0.66em 0.66em 0.66em 0;
}
.logo-child-one-footer {
    background-color: rgb(220, 220, 220);
}

.logo-child-two {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 0.6em;
    height: 1.875em;
}
.logo-child-two-footer {
    background-color: rgb(220, 220, 220);
}

.logo-child-three {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 2.8125em;
    height: 0.6em;
    border-radius: 0 0.66em 0.66em 0.66em;
}
.logo-child-three-footer {
    background-color: rgb(220, 220, 220);
}

.logo-child-four {
    /* border: 1px solid rgb(0, 150, 0); */
    background-color: rgb(0, 150, 0);
    position: relative;
    width: 0.6em;
    height: 1.875em;
    margin-top: 0.1em;
    border-radius: 0.66em 0.66em 0 0;
}

.logo-child-five {
    /* border: 1px solid rgb(0, 150, 0); */
    background-color: rgb(0, 150, 0);
    position: relative;
    width: 3.75em;
    height: 0.6em;
    border-radius: 0 0.66em 0.66em 0.66em;
}

@media (min-width: 400px) {
    .logo-header {
        font-size: 0.3rem;
    }
}

@media (min-width: 420px) {
    .logo {
        padding: 1rem;
    }
}

@media (min-width: 700px) {
    .logo-header {
        font-size: 0.4rem;
    }
}

.top {
    /* border: 3px solid orangered; */
    /* background-color: var(--gold); */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
}

.theme {
    display: flex;
    background-color: var(--lightgrey);
    padding: 0.5rem;
}

.dark {
    background-color: rgb(0, 0, 0);
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.8rem;
    border: 0.1rem solid rgb(210, 190, 95);
    cursor: pointer;
}

.bright {
    background-color: rgb(210, 190, 95);
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.8rem;
    border: 0.1rem solid rgb(0, 0, 0);
    cursor: pointer;
}

h1 {
    /* color: var(--black); */
}

/* button{
    position: absolute;
    right: 4vw;
    z-index: 1;
} */

.bar {
    width: 30px;
    height: 4px;
    /* background-color: var(--black); */
    background-color: black;
    border-radius: 10px;
    transition: all 0.3s ease-in;
}

#bar2,
#bar3 {
    margin-top: 4px;
}

a {
    /* color: var(--gold); */
    text-decoration: none;
}

/* a, button{
    cursor: pointer;
} */

.navigation {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(30, 30, 30);
    position: fixed;
    top: 0px;
    right: -500px;
    width: 100%;
    height: 100vh;
    transition: 0.3s;
    z-index: 99;
    overflow: scroll;
}

.navigation::-webkit-scrollbar {
    display: none;
}

.nav {
    /* border: 3px solid green; */
    position: absolute;
    width: 80%;
    max-width: 250px;
    padding: 100px 0;
}

.nav-child,
.nav-list-child {
    /* border: 3px solid rebeccapurple; */
    /* color: var(--gold); */
    /* color: black; */
    color: whitesmoke;
    text-align: left;
    /* text-transform: uppercase; */

    display: flex;
    flex-direction: row;
    align-items: center;

    list-style-type: none;
    font-size: 1rem;
    padding: 20px 0;
    padding-left: 25px;
    border-bottom: 1pt solid rgb(70, 70, 70);
    cursor: pointer;
}

.nav-child svg {
    margin-right: 0.8rem;
}

.nav-child.show-border {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.1), transparent 50%);
    background: linear-gradient(0deg, rgba(0, 80, 52, 0.2), rgba(245, 245, 245, 0.03) 35%, transparent);
    border-bottom: 3px solid rgb(0, 80, 52);
}

/* zusammen mit mouseover function over navChild in js:1556 */

.nav-child:hover {
    transition: 0.2s;
    scale: 1.01;
    border-bottom: 3px solid rgb(30, 65, 160);
    border-bottom: 3px solid rgb(0, 80, 52);
}

.navigation-signup:hover,
.navigation-login:hover,
.navigation-logout:hover {
    border: none;
}

.navigation-login {
    text-align: center;
    padding: 37px 0 17px;
    border: none;
}

.navigation-logout {
    text-align: center;
    padding: 37px 0 17px;
    padding: 1.5rem 0 1rem;
    padding: 1rem 0 1rem;
    border: none;
}

.navigation-signup {
    text-align: center;
    padding: 0;
    border: none;
}

.hamburger.bar {
    /* border: 3px solid blue; */
    position: fixed;
}

.hamburger {
    background: 0;
    border: 0;
    /* border: 3px solid yellow; */
    cursor: pointer;
}

.navigation.active {
    right: 0;
}

.hamburger.open #bar1 {
    /* background-color: var(--gold); */
    transform: rotate(45deg) translate(5px, 6px);
}

.hamburger.open #bar2 {
    background-color: transparent;
    transform: translateX(-30px);
}

.hamburger.open #bar3 {
    /* background-color: var(--gold); */
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (min-width: 450px) {
    .navigation {
        width: 300px;
    }

    .nav {
        width: 220px;
    }
}

@media (min-width: 700px) {
    .top {
        display: none;
    }

    .navigation {
        display: none;
    }
}

/* START MIN-HEIGHT !!! */

@media (min-height: 750px) {
    .nav-child {
        margin-top: 0.75rem;
    }
}

@media (min-height: 900px) {
    .nav-child {
        margin-top: 1.5rem;
    }
}

/*================
  header
==================*/

.header {
    /* border: 3px solid red; */
}

.header-container {
    /* border: 3px solid pink; */
    /* position: relative; */
    position: fixed;
    background-color: whitesmoke;
    /* background-color: rgb(235, 235, 245); */
    width: 100%;
    min-height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-shadow: 0 1px 0.5rem rgb(170, 170, 170);
    z-index: 999;
}

.header-container-start {
    background-color: whitesmoke;
    background-color: rgb(225, 245, 237);
    background-color: rgb(215, 233, 220);
    /* background-color: rgb(51, 51, 51); */
}

.header-links-container {
    /* border: 3px solid lawngreen; */
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    display: none;
}

.header-links {
    /* border: 3px solid red; */
    /* font-size: 0.9rem; */
    padding: 0.3rem 1rem;
    color: black !important;
    letter-spacing: 0px;
    cursor: pointer;
}

.header-links:hover {
    scale: 1.02;
    transition: 0.2s;
}

.site-title {
    /* border: 3px solid purple; */
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem;
    cursor: pointer;
}

.site-title h1 {
    /* border: 3px solid red; */
    text-align: start;
    display: none;
    font-size: 1rem;
    font-weight: bold;

    /* display: none !important; */
}
.site-title-footer {
    /* border: 3px solid lawngreen; */
    /* cursor: inherit; */
}
.site-title-footer h1 {
    color: rgb(220, 220, 220);
    /* color: rgb(255, 255, 0);
    color: rgb(240, 240, 40);
    color: #f5f514; */
    display: inherit;
    font-weight: inherit;
}

.site-title-pdf-portrait {
    /* border: 3px solid red; */
    /* margin-top: 2rem; */
    padding: 0 !important;
}
.site-title-pdf-portrait div {
    font-size: 0.9rem !important;
    font-size: 0.55rem !important;
}
.site-title-pdf-portrait h1 {
    font-size: 3.5rem !important;
    font-size: 2rem !important;
    line-height: 1.3;
}

.btn-container {
    /* border: 3px solid yellow; */
    display: none;
}

.user-container {
    /* border: 3px solid orange; */
    position: relative;
    /* min-width: fit-content; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    padding-right: 2rem;
    margin-left: auto;

    overflow: hidden;
}

.user-name-box {
    /* border: 3px solid blue; */
    font-size: 0.9rem;
    /* position: relative; */
    /* max-width: fit-content; */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: start; */
    /* text-align: right; */
    /* max-width: calc(100% - 60px); */
    width: 100%;
}

.user-name-company-container,
.user-name-container {
    /* border: 3px solid red; */
    /* position: relative; */
    /* max-width: fit-content; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    overflow: hidden;

    flex-wrap: wrap;
}
.user-name-container {
    margin-top: 0.3rem;
}

.user-name-company-container b,
.user-name-container b {
    font-weight: bold;
}

.user-name-company-container div,
.user-name-container div {
    /* border: 3px solid lawngreen; */
    width: fit-content;
    display: inline-block;
    margin-right: 0.5rem;
}

.user-name-company {
    /* border: 3px solid green; */
    /* text-align: right; */
    overflow: hidden;
    white-space: nowrap;
}

.user-name {
    /* border: 3px solid black; */
    /* text-align: right; */
    overflow: hidden;
    white-space: nowrap;
}

.user-infobox {
    /* border: 3px solid red; */
    /* background-color: whitesmoke; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */

    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(30, 30, 30);
    position: fixed;
    top: 0px;
    right: -500px;
    width: 100%;
    height: 100vh;
    transition: 0.3s;
    z-index: 99;
    overflow: scroll;
}

.user-infobox::-webkit-scrollbar {
    display: none;
}

.user-infobox.active {
    right: 0;
}

.user-infobox-child {
    /* border: 3px solid orangered; */
    position: absolute;
    width: 80%;
    max-width: 220px;
    padding: 100px 0;
}

.display,
.display-proof-person,
.display-bill-to-pay,
.display-create-new-account,
.display-update,
.display-filter,
.display-pdf,
.display-pdf-portrait,
.display-filter-agb,
.display-filter-agb-use,
.display-filter-loading {
    /* border: 3px solid green; */
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: -99999999999999;
}

.display.show,
.display-filter.show {
    opacity: 1;
    z-index: 97;
    position: fixed;
    /* transition: 0.2s; */
}

.display-filter.img {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    z-index: 99 !important;
    position: fixed;
}

.display-proof-person.show {
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 1;
    z-index: 99 !important;
    position: fixed;
}
.display-proof-person.show-account-deleted {
    background-color: rgba(0, 0, 0, 1);
    opacity: 1;
    z-index: 99 !important;
    position: fixed;
}

.display-create-new-account.show,
.display-bill-to-pay.show {
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 1;
    z-index: 99 !important;
    position: fixed;
}
.display-update {
    /* background-color: rgba(0, 0, 0, 0.9); */
    background-color: rgb(0, 80, 52);
    opacity: 1;
    z-index: 999999 !important;
    position: fixed;

    display: none;
}

.display-pdf {
    /* border: 3px solid red; */
    background-color: rgba(0, 0, 0, 1);
    opacity: 1;
    z-index: 99 !important;
    position: fixed;

    /* A4 Masse in mm: 210mm x 297mm und in px: 2480px x 3508px  */

    width: calc(3508px * 0.5);
    height: 1223px;
    /* height: calc(2480px * 0.5); */


    /* DAMIT PDF ERSTELLEN AUF HANDY FUNKTIONIERT .display-pdf KLEINER MACHEN */
    /* height: 210mm;
    GENAUER ALS 210mm:
    height: 207mm;
    width: 297mm; */
    /* DAMIT PDF ERSTELLEN AUF HANDY FUNKTIONIERT .display-pdf KLEINER MACHEN */


    overflow: hidden;

    margin: auto;

    display: none;
}
.display-pdf-portrait {
    /* border: 3px solid red; */
    background-color: rgba(0, 0, 0, 1);
    background-color: white;
    opacity: 1;
    z-index: 99 !important;
    position: fixed;

    /* A4 Masse in mm: 210mm x 297mm und in px: 2480px x 3508px  */

    height: calc(3508px * 0.5);
    height: calc(calc(3508px * 0.5) / 4);
    height: 295mm;
    
    /* height: 147.5mm; */
    /* mit width 1223px wäre das Format genauer! */
    width: 1223px;
    width: calc(2480px * 0.5);
    width: calc(calc(2480px * 0.5) / 4);
    width: 210mm;

    
    /* width: 105mm; */
    overflow: hidden;

    margin: auto;

    /* scale: 0.33; */

    display: none;
}

.display-pdf-container {
    /* border: 3px solid yellow; */
    background-color: whitesmoke;
    background-color: rgb(130, 130, 130);
    background-color: white;
    
    /* background-color: rgb(170, 170, 170); */
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */


    /* A4 Masse in mm: 210mm x 297mm und in px: 2480px x 3508px  */
    width: calc(3508px * 0.5);
    width: 100%;
    /* width: 35080px; */
    /* height: calc(2480px * 0.5); */
    /* height: 2480px; */
    /* height: fit-content; */
    /* width: 1000px; */
    height: 1223px;
    height: 100%;
    /* height: 1123px; */

    /* height: 1089.6px; */
    /* height: 1189.6px; */

    /* height: 1223px; */
    /* height: 600px; */
    /* height: 1200px; */
    padding: 1rem;
    line-height: 1.5;


}
.display-pdf-container-portrait {
    /* border: 3px solid yellow; */
    background-color: white;
    /* background-color: rgb(170, 170, 170); */
    
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;

    /* A4 Masse in mm: 210mm x 297mm und in px: 2480px x 3508px  */
    /* width: calc(3508px * 0.5); */
    width: 100%;

    /* height: 1223px; */
    height: 100%;


    padding: 3.5rem 5.5rem 1rem;
    padding: 2rem 3.4rem 1rem;
    line-height: 1.5;
    /* line-height: 1.4; */

    /* hier die Schriftgröße der PDF verändern! */
    font-size: 0.95rem;
    /* font-size: 1rem; */

    /* display: none; */

    /* scale: 0.33; */
}

/* .test-a {
    border: 3px solid red;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 33.33%;
}
.test-b {
    border: 3px solid blue;
    position: absolute;
    width: 100%;
    top: 33.33%;
    left: 0;
    height: 33.33%;
}
.test-c {
    border: 3px solid purple;
    position: absolute;
    width: 100%;
    top: 66.66%;
    left: 0;
    height: 33.33%;
} */


.display-pdf-container-parent {
    /* border: 3px solid green; */
    font-size: 1.1rem;
}
.display-pdf-container-child {
    /* border: 3px solid blue; */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: end;
    /* height: 101px; */
    /* height: 37px; */



}

.display-pdf-container-box {
    /* border: 3px solid purple; */
    /* margin-top: -136px; */
    /* margin-top: -1226px; */
    /* margin-top: -1223px; */
}

.display-pdf-container-header {
    /* border: 3px solid lawngreen; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -1rem;
}
.display-pdf-container-header-portrait {
    /* border: 3px solid lawngreen; */
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.display-pdf-container-box-portrait {
    /* border: 3px solid purple; */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pdf-portrait-address {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1rem;
    margin-top: 0.5rem;
}
.pdf-portrait-address-container {
    /* border: 3px solid red; */
    font-size: 1.1rem;
    font-size: 0.75em;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}
.pdf-portrait-address-container-right {
    /* border: 3px solid blue; */
    align-items: end;
    justify-content: end;
}

.pdf-portrait-contact {
    /* border: 3px solid yellow; */
    font-size: 1.1rem;
    font-size: 0.75em;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.pdf-portrait-contact b {
    font-weight: bold;
}

.pdf-portrait-overview-header-up {
    /* border: 3px solid orangered; */
    text-align: start;
    font-size: 2rem;
    font-size: 1.3em;
    margin-top: 6.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.bill-header {
    /* border: 3px solid blue; */
    font-size: 2.5rem;
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-top: 0.8rem;
    letter-spacing: 1px;
}

.pdf-portrait-overview-header-paymentinfo,
.pdf-portrait-overview-header {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.pdf-portrait-overview-header {
    font-size: 1.1rem;
    font-size: 0.75em;
    /* margin-top: 3rem; */
    margin-top: 6.5rem;
}

.pdf-portrait-overview-header-paymentinfo {
    font-size: 1.1rem;
    font-size: 0.75em;

    border-top: 1px solid black;
    padding-top: 1rem;
    padding-top: 0.5rem;
    margin-top: 1.5rem;
    margin-top: 0.8rem;
}
.pdf-portrait-overview-header-companyinfo {
    font-size: 1.1rem;
    font-size: 0.75em;

    /* text-align: start; */
    margin: 4rem 0 4rem;
    margin: 3rem 0 3rem;
    letter-spacing: 1px;
}
.pdf-portrait-overview-header-companyinfo span {
    letter-spacing: 1px;
}


.pdf-portrait-overview-header-footer {
    border-bottom: 1px solid black;
    font-size: 0.7rem;
    text-align: start;
    font-style: italic;
    margin-top: 0.6rem;
    margin-top: 0.5rem;
    padding-bottom: 1rem;
    padding-bottom: 0.8rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.pdf-portrait-overview-header-paymentinfo-footer {
    /* border: 3px solid green; */
    font-size: 1.1rem;
    font-size: 0.75em;
    text-align: start;
    margin-top: 0.4rem;
    padding-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.pdf-portrait-overview-header-paymentinfo b,
.pdf-portrait-overview-header b {
    font-weight: bold;
}

.pdf-portrait-overview-header .pdf-portrait-overview-header-time-period,
.pdf-portrait-overview-header .pdf-portrait-overview-header-bill-number,
.pdf-portrait-overview-header .pdf-portrait-overview-header-date {
    font-weight: inherit;
}

.pdf-portrait-overview {
    /* border: 3px solid red; */
    margin-top: 1.5rem;
    margin-top: 1rem;

}
.pdf-portrait-payment {
    /* border: 3px solid blue; */
    font-size: 1.1rem;
    font-size: 0.75em;
    height: 140px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 0 0.5rem;

    margin-top: 4rem;
    /* margin-top: 3rem; */

    line-height: 1.5;
}

.pdf-portrait-payment-child {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    /* justify-content: space-between; */
}
.pdf-portrait-payment-child-bottom {
    /* border: 3px solid red; */
    width: 355px;
}
.pdf-portrait-payment-child span {
    text-align: start;
    color: black !important;
}
.pdf-portrait-payment-child span:first-of-type {
    margin-bottom: 0.3rem;
}

.pdf-portrait-payment-child b {
    font-weight: bold;
}

.pdf-portrait-footer {
    /* border: 3px solid red; */
    /* font-size: 1rem; */
    /* font-size: 0.65em; */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: start; */

    margin-top: auto;

    line-height: 1.5;
}
.pdf-portrait-footer span {
    font-size: 0.6rem;
    /* font-weight: bold; */
    color: black !important;
}
.pdf-portrait-footer div {
    font-size: 0.6rem;
    font-weight: bold;
    text-decoration: underline;
}


.display-pdf-container-header-space {
    /* border: 3px solid red; */
    padding-top: 1rem;
}

.pdf-header-title {
    /* border: 3px solid blue; */
    /* border-left: 1px solid rgb(70, 70, 70); */
    font-size: 1.8rem;
    /* font-weight: bold; */
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-left: 1rem; */
    /* padding-left: 2rem; */
    /* height: 100%; */
}
.pdf-header-proof-date-box,
.pdf-header-date-box {
    /* border: 3px solid yellow; */
    font-size: 1.1rem;
    min-width: 220px;
    text-align: end;
    /* margin-left: auto; */
    margin-right: 2.2rem;
}
.pdf-header-proof-date-box {
    margin-top: 2.5rem;
}

.pdf-header-date-box div:first-of-type {
    /* color: white; */
    text-decoration: underline;
}

.pdf-header-proof-date-box {
    /* border: 3px solid yellow; */
    text-align: start;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1rem;
}
.pdf-header-proof-date-box div:first-of-type {
    /* color: white; */
    text-decoration: inherit;
    margin-right: 0.5rem;
    margin-left: 2rem;
}

.pdf-header-proof-date-box .pdf-header-file {
    /* color: white; */
    text-decoration: inherit;
    margin-right: 0.5rem;
    margin-left: auto;
}

.file-info {
    display: none;
}
.file-info.show {
    display: inherit;
}

.soon-expired-info {
    display: none;
}
.soon-expired-info.show {
    display: inherit;
}

.pdf-header-date {
    /* border: 3px solid blue; */
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0.3rem;
}
.pdf-header-proof-date {
    /* border: 3px solid blue; */
    font-size: 1rem;
    font-weight: bold;
}

.create-new-account-box,
.proof-person-deleted-info-box {
    /* border: 3px solid yellow; */
    background-color: whitesmoke;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 600px;

    padding: 2.5rem 2rem;
    line-height: 1.5;
    border-radius: 10px;

    /* display: none; */
}
.create-new-account-box {
    padding: 2rem;
}
.proof-person-deleted-info-box-close,
.create-new-account-box-close {
    /* border: 3px solid red; */
    font-size: 1.5rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 0.4rem;
    margin: 0.4rem;
    cursor: pointer;
}
.proof-person-deleted-info-box-close {
    font-weight: 3rem;
    top: -50px;
    color: white;
    display: none;
}
.proof-person-deleted-info-box-close.show {
    display: inherit;
}
.proof-person-deleted-info-box-close:hover,
.create-new-account-box-close:hover {
    scale: 1.03;
    transition: 0.2s;
}

.create-new-account-box-header {
    /* border: 3px solid red; */
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 0px;
}
.create-new-account-box-child {
    /* border: 3px solid purple; */
}

.update-info-box {
    /* border: 3px solid yellow; */
    padding: 3rem 2rem;
}
.bill-to-pay-info-box {
    /* border: 3px solid yellow; */
    padding: 1.5rem 1rem;
}

.bill-to-pay-info-box-child {
    /* border: 3px solid green; */
    max-height: 350px;
    overflow-y: scroll;
    padding-right: 0.5rem;
    margin-right: -0.5rem;
}

.bill-to-pay-info-box-child::-webkit-scrollbar {
    width: 5px;
}

.bill-to-pay-info-box-child::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.bill-to-pay-info-box-child::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.proof-person-deleted-info-box-child-one {
    margin-bottom: 1.5rem;
}
.proof-person-deleted-info-box-child-one b {
    text-decoration: underline;
}
.proof-person-deleted-info-box-child-two {
    margin-bottom: 1rem;
}
.proof-person-deleted-info-box-child-two svg {
    color: rgb(200, 0, 0);
}
.proof-person-deleted-info-box-child-two b,
.proof-person-deleted-info-box-child-four b {
    font-weight: bold;
}
.proof-person-deleted-info-box-child-three {
    font-size: 0.9rem;
    /* color: rgb(70, 70, 70); */
    margin-bottom: 1rem;
}
.proof-person-deleted-info-box-child-four {
    text-decoration: underline;
    margin-bottom: 2rem;
}

.display-filter-img-container-proofinfo,
.display-filter-img-container {
    /* border: 3px solid yellow; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 300px;
    height: 90%;
    max-height: 300px;

    display: none;
}

.display-filter-image-proofinfo,
.display-filter-image {
    /* border: 3px solid blue; */
    background: white;
    display: block;
    /* height: 100%; */
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.display-filter-img-container-proofinfo-x,
.display-filter-img-container-x {
    /* border: 3px solid red; */
    position: absolute;
    top: -45px;
    right: -8px;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0.2rem 0.5rem 0.3rem;
    color: white;

    cursor: pointer;
}

.display-filter-img-container-proofinfo-x:hover,
.display-filter-img-container-x:hover {
    transition: 0.2s;
    scale: 1.05;
}

.display-filter-agb {
    display: none;
}
.display-filter-agb.show {
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    z-index: 9999;
    position: fixed;
    /* transition: 0.2s; */
}

.display-filter-agb-use {
    display: none;
}
.display-filter-agb-use.show {
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    z-index: 9999;
    position: fixed;
    /* transition: 0.2s; */
}

.display-filter-loading.show {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1;
    z-index: 9999;
    position: fixed;
    /* transition: 0.2s; */
}

.display-process-fail,
.display-process-completed-index,
.display-process-completed {
    /* border: 3px solid lawngreen; */
    top: -500px;
    opacity: 0;
    z-index: -99999999999999;
    display: none;
}

.display-process-completed-index.show,
.display-process-completed.show {
    /* border: 4px solid rgb(0, 120, 0); */
    background-color: rgb(220, 235, 225);
    background-color: white;
    background-color: rgb(0, 135, 0);
    /* color: rgb(0, 128, 0); */
    color: rgb(0, 120, 0);
    color: white;
    /* color: rgb(0, 150, 0); */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* max-width: 350px; */
    min-height: 100px;
    padding: 1rem;
    top: 0;
    right: 0;
    bottom: inherit;
    left: 0;
    border-radius: 7px;
    box-shadow: 0 1rem 1rem rgb(0, 0, 0);
    position: fixed;
    opacity: 1;
    z-index: 99999;
    transition: 0.5s;
}
.display-process-completed.show-fail {
    background-color: rgb(170, 0, 0);
    background-color: rgb(255, 230, 230);

    color: white;
    color: black;
}

.display-process-fail.active {
    /* border: 4px solid rgb(220, 0, 0); */
    background-color: rgb(220, 235, 225);
    background-color: rgb(0, 135, 0);
    background-color: white;
    background-color: rgba(220, 0, 0, 0.1);
    background-color: rgb(255, 230, 230);

    /* color: rgb(0, 128, 0); */
    color: rgb(0, 120, 0);
    color: white;
    color: black;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* max-width: 350px; */
    min-height: 100px;
    padding: 1rem 1rem;
    top: 0;
    right: 0;
    bottom: inherit;
    left: 0;
    border-radius: 7px;
    box-shadow: 0 1rem 1rem rgb(0, 0, 0);
    position: fixed;
    opacity: 1;
    z-index: 99999;
    transition: 0.5s;
}

.display-process-completed-index-child-left,
.display-process-completed-child-left {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 1rem;
    width: fit-content;
    height: fit-content;
}
.display-process-completed-child-left.hide {
    display: none;
}
.display-process-fail-child-left {
    /* border: 3px solid red; */
    color: rgb(220, 0, 0);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-right: 1rem;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
}
.display-process-fail-child-left:hover {
    transition: 0.2s;
    scale: 1.03;
}
.display-process-fail-child-left.hide {
    display: none;
}

.display-process-completed-index-child-right,
.display-process-completed-child-right {
    /* border: 3px solid blue; */
    /* font-weight: bold; */
    width: fit-content;
    text-align: center;
    /* max-width: 600px; */
    height: fit-content;
    line-height: 1.5;
}
.display-process-fail-child-right {
    /* border: 3px solid blue; */
    width: fit-content;
    text-align: center;
    max-width: 560px;
    height: fit-content;
    line-height: 1.5;
}
.display-process-fail-child-right b {
    font-weight: bold;
}

.loading-logo-container {
    /* border: 3px solid red; */
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    max-width: 350px;
    padding: 1.5rem 1rem;
    margin: 1rem;
    border-radius: 20px;
    /* color: whitesmoke; */
}
.agb-container-use,
.agb-container {
    /* border: 3px solid red; */
    background-color: rgb(225, 225, 225);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    max-height: 65vh;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    /* color: whitesmoke; */
}
.agb-container-use {
    position: relative;
    padding-top: 3.6rem;
}
.agb-container-use-close {
    position: absolute;
    font-weight: bold;
    top: 1.3rem;
    right: 1.3rem;
    cursor: pointer;
}
.agb-container-use-close:hover {
    scale: 1.01;
    transition: 0.2s;
}


.agb-container-parent {
    /* border: 3px solid green; */
    background-color: white;
    width: 100%;
    padding: 0.5rem;
    border-radius: 10px;
    overflow-y: scroll;

}

.agb-container-child {
    /* border: 3px solid blue; */
    width: 100%;
}
.agb-container-child-agb-check,
.agb-container-child-datenschutz-check {
    /* border: 3px solid yellow; */
    position: relative;
    display: flex;
    width: 100%;
    padding: 1rem 0.5rem 3rem;
    border-top: 1pt solid rgb(70, 70, 70);
}
.agb-container-child-agb-check {
    padding-bottom: 1rem;
}
.agb-container-child-agb-check.fail,
.agb-container-child-datenschutz-check.fail {
    padding-top: 2rem;
    border-top: 2px solid rgb(230, 0, 0);
}

.agb-container-child-agb-check-required,
.agb-container-child-datenschutz-check-required {
    font-size: 0.9rem;
    color: rgb(230, 0, 0);
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;

    display: none;
}

.agb-container-child-agb-check input,
.agb-container-child-datenschutz-check input {
    /* border: 3px solid red; */
}
.agb-container-child-agb-check p,
.agb-container-child-datenschutz-check p {
    /* border: 3px solid green; */
    width: calc(100% - 1.7rem);
    margin-left: auto;
}

.loading-logo-container-body {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.logo-loading-page {
    /* border: 3px solid yellow; */
    display: inherit;
    font-size: 0.5rem;
    padding: 0;
    padding-right: 0.5rem;
}

.loading-logo-container-body h1 {
    font-size: 1.5rem;
}

.loading-logo-container-body .logo-container {
    /* border: 0.7em solid black; */
    border: 0.7em solid;
    /* border: none; */
    /* border-color: black black black black; */
    border-color: whitesmoke transparent whitesmoke whitesmoke;
    border-color: black transparent black black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    /* width: 9.375em;
    height: 9.375em; */
    width: 10em;
    height: 10em;
    /* margin: 1rem; */
    margin-right: -1.5em;
}

.loading-logo-container-body .logo-parent {
    /* border: 3px solid blue; */
    position: relative;
    width: fit-content;
    height: fit-content;
    transform: rotate(-45deg);
}

.loading-logo-container-body .logo-child-one {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: whitesmoke;
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 3.75em;
    height: 0.6em;
    border-radius: 0.66em 0.66em 0.66em 0;
}

.loading-logo-container-body .logo-child-two {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: whitesmoke;
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 0.6em;
    height: 1.875em;
}

.loading-logo-container-body .logo-child-three {
    /* border: 1px solid rgb(30, 30, 30); */
    background-color: whitesmoke;
    background-color: rgb(30, 30, 30);
    position: relative;
    width: 2.8125em;
    height: 0.6em;
    border-radius: 0 0.66em 0.66em 0.66em;
}

.loading-logo-container-body .logo-child-four {
    /* border: 1px solid rgb(0, 150, 0); */
    background-color: rgb(0, 150, 0);
    position: relative;
    width: 0.6em;
    height: 1.875em;
    margin-top: 0.1em;
    border-radius: 0.66em 0.66em 0 0;
}

.loading-logo-container-body .logo-child-five {
    /* border: 1px solid rgb(0, 150, 0); */
    background-color: rgb(0, 150, 0);
    position: relative;
    width: 3.75em;
    height: 0.6em;
    border-radius: 0 0.66em 0.66em 0.66em;
}

.loading-logo-caption {
    /* border: 3px solid purple; */
    margin-top: 1.5rem;
}

.proof-loading-element {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start !important;
}

.proof-loading-element-files {
    /* border: 3px solid purple; */
    background-color: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start !important;
    padding-left: 1rem;
    margin-bottom: 0.5rem;
}

.proof-loading-element-no-results {
    /* border: 3px solid purple; */
    color: rgb(70, 70, 70);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start !important;

    display: none;
}

.loading-logo-spinner {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.3rem;
}

.loading-logo-spinner-proof {
    /* border: 3px solid blue; */
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    margin-bottom: 0;
    margin-left: 1.5rem;
}

.loading-logo-spinner svg {
    /* border: 3px solid green; */
    position: relative;
    width: 46px;
    height: 46px;
    animation: cool-spin 2s linear infinite;
}

.loading-logo-spinner svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 6;
    stroke: red;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    /* stroke-dasharray: 0; */
    stroke-dasharray: 125;
    /* stroke-dashoffset: 0; */
    stroke-dashoffset: 125;
    animation:
    cool-animate 2s linear infinite,
    cool-color 6s ease infinite;
}

.loading-logo-spinner-proof svg {
    /* border: 3px solid green; */
    position: relative;
    width: 38px;
    height: 38px;
    animation: cool-spin 2s linear infinite;
}

.loading-logo-spinner-proof svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 5;
    stroke: red;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    /* stroke-dasharray: 0; */
    stroke-dasharray: 102;
    /* stroke-dashoffset: 0; */
    stroke-dashoffset: 102;
    animation:
    cool-animate-loading-proof 2s linear infinite,
    cool-color 6s ease infinite;
}

.loading-logo-spinner-search {
    /* border: 3px solid blue; */
    position: absolute;
    right: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loading-logo-spinner-search svg {
    /* border: 3px solid green; */
    position: relative;
    width: 30px;
    height: 30px;
    animation: cool-spin 2s linear infinite;
}

.loading-logo-spinner-search svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 3;
    stroke: red;
    stroke-linecap: round;
    transform: translate(5px, 5px);
    /* stroke-dasharray: 0; */
    stroke-dasharray: 62;
    /* stroke-dashoffset: 0; */
    stroke-dashoffset: 62;
    animation:
    cool-animate-loading 2s linear infinite,
    cool-color 6s ease infinite;
}

@keyframes cool-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);        
    }
}
@keyframes cool-animate-loading {
    0% {
        stroke-dashoffset: 62;
    }
    50% {
        stroke-dashoffset: 0;
    }
    50.01% {
        stroke-dashoffset: 124;
    }
}
@keyframes cool-animate-loading-proof {
    0% {
        stroke-dashoffset: 102;
    }
    50% {
        stroke-dashoffset: 0;
    }
    50.01% {
        stroke-dashoffset: 204;
    }
}
@keyframes cool-animate {
    0% {
        stroke-dashoffset: 125;
    }
    50% {
        stroke-dashoffset: 0;
    }
    50.01% {
        stroke-dashoffset: 250;
    }
}

@keyframes cool-color {
    0% {
        stroke: rgb(10, 110, 50);
    }
    30% {
        stroke: rgb(10, 140, 40);
    }
    50% {
        stroke: rgb(10, 170, 30);
    }
    70% {
        stroke: rgb(10, 140, 40);
    }
    100% {
        stroke: rgb(10, 110, 50);
    }
}


.loading-logo-caption-child {
    /* border: 3px solid green; */
    text-align: center;
}

.loading-logo-caption-patience {
    /* border: 3px solid red; */
    margin-bottom: 0.5rem;
}

/* .user-profil {
    color: whitesmoke;
    text-align: left;
    list-style-type: none;
    font-size: 1.3rem;
    padding: 20px 30px;
    border-bottom: 1pt solid rgb(70, 70, 70);
    cursor: pointer;
}

.user-profil:hover {
    scale: 1.02;
    transition: 0.2s;
}

.user-profil svg {
    margin: 0 0.5rem 0 0.7rem;
} */

.arrow-img {
    /* border: 3px solid grey; */
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

.arrow-img-big-screen {
    /* position: relative; */
    /* border: 3px solid grey; */
    /* width: 100%; */
}

.arrow-img:hover {
    scale: 1.03;
    transition: 0.2s;
}

.arrow-img svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 350px) {
    .loading-logo-container {
        padding: 1.5rem 1.3rem;
    }

    .site-title h1 {
        display: inherit;
        font-size: 1.1rem;
    }

    .site-title {
        padding: 0 1rem;
    }

    .user-infobox {
        width: 300px;
    }
}

@media (min-width: 400px) {
    .site-title h1 {
        font-size: 1.3rem;
    }
}

@media (min-width: 420px) {
    .user-container {
        padding-right: 45px;
    }

    .arrow-img {
        padding: 0.5rem;
        padding-right: 1rem;
    }
}

@media (min-width: 500px) {
    .logo-loading-page {
        font-size: 0.55rem;
    }

    .loading-logo-container {
        padding: 2rem;
    }
    
    .loading-logo-container-body h1 {
        font-size: 1.8rem;
    }

    .loading-logo-caption {
        margin-top: 2rem;
    }
}

@media (min-width: 650px) {
    .bill-to-pay-info-box {
        padding: 2.5rem 2rem;
    }
}

@media (min-width: 700px) {
    .header-container {
        min-height: 100px;
    }

    .site-title h1 {
        font-size: 1.5rem;
    }

    .btn-container {
        display: inherit;
    }

    .user-infobox-child {
        padding: 130px 0 100px;
    }

    .display,
    .display-proof-person,
    .display-bill-to-pay,
    .display-create-new-account,
    .display-update,
    .display-filter,
    .display-pdf,
    .display-filter-agb,
    .display-filter-loading {
        top: 100px;
    }
}

@media (min-width: 1000px) {
    .body.big-screen {
        padding-right: 300px;
    }

    .user-container.big-screen {
        padding-right: 2rem;
    }

    .user-infobox.big-screen {
        right: 0;
    }

    .arrow-img-big-screen.big-screen {
        display: none;
    }

    .header-links-container {
        display: flex;
    }

    .user-container {
        margin-left: var(--margin-user-container);
    }
}

/*================
  auth
==================*/

.authdiv-container {
    /* border: 3px solid yellow; */
    min-height: 100vh;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    display: none;

    background: linear-gradient(90deg,
            /* rgb(90, 200, 255),
            rgb(90, 200, 255),
            rgb(80, 180, 245),
            rgb(70, 160, 230),
            rgb(60, 140, 215),
            rgb(50, 110, 200),
            rgb(40, 85, 185),
            rgb(33, 73, 173),
            rgb(30, 65, 160),
            rgb(30, 65, 160),
            rgb(33, 73, 173),
            rgb(40, 85, 185),
            rgb(50, 110, 200),
            rgb(60, 140, 215),
            rgb(70, 160, 230),
            rgb(80, 180, 245),
            rgb(90, 200, 255),
            rgb(90, 200, 255)); */

            /* rgb(37, 177, 77), */
            /* rgb(37, 177, 77), */
            /* rgb(30, 165, 70), */
            /* rgb(25, 155, 65), */
            rgb(70, 140, 90),
            rgb(70, 140, 90),
            rgb(55, 135, 80),
            rgb(35, 130, 70),
            rgb(20, 130, 63),
            rgb(15, 120, 58),
            rgb(10, 110, 55),
            rgb(5, 100, 52),
            /* rgb(0, 80, 52), */
            /* rgb(0, 80, 52), */
            rgb(5, 100, 52),
            rgb(10, 110, 55),
            rgb(15, 120, 58),
            rgb(20, 130, 63),
            rgb(35, 130, 70),
            rgb(55, 135, 80),
            rgb(70, 140, 90),
            rgb(70, 140, 90));
    background-size: 400%;
    animation: cool 30s linear infinite;
    transition: opacity 0.3s ease-in-out;
}

@keyframes cool {
    0% {
        background-position: 400% 0;
    }

    /* 50% {
      background-position: 400% 0;
    } */
    100% {
        background-position: 0 0;
    }
}


.authdiv {
    /* border: 3px solid rebeccapurple; */
    background-color: rgb(245, 245, 245);
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 90%;
    max-width: 400px;
    padding: 1rem;
    /* margin-top: 10vh; */
    /* margin-bottom: 1rem; */
    /* margin: auto; */
    border-radius: 13px;
}

.authdiv .home {
    width: 100%;
    max-width: 260px;
    margin: 10px auto -22px;
}

.authdiv .home svg {
    width: 37px;
    height: 37px;
    padding: 0.5rem 0.5rem 0.5rem 0;
    cursor: pointer;
}

.authdiv .home svg:focus,
.authdiv .home svg:hover {
    scale: 1.02;
    transition: 0.2s;
}

/* .login-form {
    margin-top: calc(80px + 12vh);
}

.signup-form {
    display: none;
    margin-top: calc(80px + 4vh);
}

.reset-pw-form {
    display: none;
    margin-top: calc(80px + 16vh);
} */

.authdiv-input-container {
    border: none;
    border-bottom: 1px solid rgba(30, 30, 30, 0.7);
    width: 90%;
    max-width: 260px;
    margin: 1rem auto 0;
    overflow: hidden;
}

/* .authdiv-input-container:not(:first-of-type) {
    margin-top: 1rem;
} */

.authdiv-input-container input {
    font-size: 1rem;
    background-color: transparent;
    /* background-color: rgb(30, 30, 30); */
    /* background-color: rgba(255, 255, 255, 0.85); */
    color: black;
    width: 100%;
    /* color: white; */
    /* display: block; */
    /* width: 100%;
    max-width: 250px;
    margin: 0 auto; */
    padding: 0.3rem;
    padding-left: 1rem;
    line-height: 2;
    outline: none;
    border: none;
    /* border-radius: 20px; */
}

.authdiv-input-container .bi {
    width: 20px;
}

.svg-eye-open-login,
.svg-eye-open-proof-person-pw,
.svg-eye-close-login,
.svg-eye-close-proof-person-pw,
.svg-eye-open-signup,
.svg-eye-close-signup {
    /* border: 3px solid rebeccapurple; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    padding: 0.3rem;
    cursor: pointer;
}
.svg-eye-open-proof-person-pw,
.svg-eye-close-proof-person-pw {
    padding: 0 0.3rem;
}

.svg-eye-open-proof-person-pw,
.svg-eye-open-login,
.svg-eye-open-signup {
    display: none;
}

.aic-top {
    /* border: 3px solid red; */
    color: rgb(30, 30, 30);
    z-index: 0;
}

.aic-top-login,
.aic-top-login-password,
.aic-top-name-signup,
.aic-top-signup,
.aic-top-signup-password,
.aic-top-signup-password-check,
.aic-top-email-reset {
    position: relative;
    top: 30px;
    left: 35px;
    width: fit-content;
}

.aic-top-login.active,
.aic-top-login-password.active,
.aic-top-name-signup.active,
.aic-top-signup.active,
.aic-top-signup-password.active,
.aic-top-signup-password-check.active,
.aic-top-email-reset.active {
    position: relative;
    top: 4px;
    left: 0;
    width: fit-content;
    transition: 0.2s;
}

.aic-middle-login,
.aic-middle-login-password,
.aic-middle-name-signup,
.aic-middle-signup,
.aic-middle-signup-password,
.aic-middle-signup-password-check,
.aic-middle-email-reset {
    display: flex;
    flex-direction: row;
    align-items: center;

    position: relative;
    z-index: 9;
}

.aic-middle-login.active,
.aic-middle-login-password.active,
.aic-middle-name-signup.active,
.aic-middle-signup.active,
.aic-middle-signup-password.active,
.aic-middle-signup-password-check.active,
.aic-middle-email-reset.active {
    top: 4px;
    transition: 0.2s;
}


.aic-bottom {
    /* border: 3px solid blue; */
    font-size: 0.7rem;
    /* font-style: italic; */
    color: rgb(200, 0, 0);
}

.aic-bottom-login-password,
.aic-bottom-signup,
.aic-bottom-signup-password,
.aic-bottom-proof-password,
.aic-bottom-new-password-save,
.aic-bottom-signup-password-check {
    display: none;
    /* position: relative; */
    /* top: 10px; */
    width: 90%;
    max-width: 260px;
    margin: 0 auto;
    padding: 0.4rem 0.2rem;
    /* width: fit-content; */
}
.aic-bottom-new-password-save {
    /* display: inherit; */
    width: fit-content;
    margin-bottom: 1rem;
    margin-top: -1rem;
}

::placeholder {
    color: rgb(30, 30, 30);
}

.authdiv .authdiv-header {
    font-size: 1.25rem;
    /* font-weight: bold; */
    text-align: center;
    color: black;
    margin: 0.7rem 0 0;
    letter-spacing: 0.3px;
}

.authdiv .authdiv-header-pw-reset {
    font-size: 1.1rem;
}

.authdiv p {
    text-align: center;
    color: black;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.authdiv .p-info {
    font-size: 0.9rem;
    /* color: rgba(255, 255, 255, 0.8); */
    color: rgb(30, 30, 30);
}

.authdiv .p-info a {
    font-weight: bold;
    color: rgb(65, 135, 255);
    color: rgb(0, 170, 0);
    color: rgb(35, 130, 70);
    /* text-decoration: underline; */
    letter-spacing: 0.3px;
    cursor: pointer;
}

.p-info a:hover,
.p-info a:focus {
    transition: 0.2s;
    color: rgb(45, 90, 190);
    color: rgb(0, 200, 0);
    color: rgb(55, 170, 80);
}

.button {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: column;
}

button:hover,
button:focus,
#logout-btn:hover,
#logout-btn:focus,
.agb-btn:hover,
.agb-btn:focus,
.take-over-user-abo-btn:hover,
.take-over-user-abo-btn:focus,
.test-is-ending-btn:hover,
.test-is-ending-btn:focus,
.test-ended-btn:hover,
.test-ended-btn:focus,
.create-proof-person-btn:hover,
.create-proof-person-btn:focus,
.create-company-and-proof-person-btn:hover,
.create-company-and-proof-person-btn:focus,
.take-over-btn:hover,
.take-over-btn:focus,
.start-now-btn:hover,
.start-now-btn:focus,
.take-over-company-btn:hover,
.take-over-company-btn:focus,
.create-own-company-btn:hover,
.create-own-company-btn:focus,
.create-new-account-btn:hover,
.create-new-account-btn:focus,
.update-logout-btn:hover,
.update-logout-btn:focus,
.final-logout-btn:hover,
.final-logout-btn:focus,
#header-login-btn:hover,
#header-login-btn:focus,
#header-signup-btn:hover,
#header-signup-btn:focus,
#header-login-side-btn:hover,
#header-login-side-btn:focus,
#header-signup-side-btn:hover,
#header-signup-side-btn:focus,
.add-product:hover,
.add-product:focus {
    scale: 1.03;
    transition: 0.2s;
}

.button #reset-pw-btn,
.button #signup-btn,
.button #login-btn,
.send-chat-msg,
#logout-btn,
.agb-btn,
.take-over-user-abo-btn,
.test-is-ending-btn,
.test-ended-btn,
.create-proof-person-btn,
.create-company-and-proof-person-btn,
.take-over-btn,
.start-now-btn,
.take-over-company-btn,
.create-own-company-btn,
.create-new-account-btn,
.update-logout-btn,
.final-logout-btn,
#header-login-btn,
#header-signup-btn,
#header-login-side-btn,
#header-signup-side-btn,
.add-product {
    font-size: 0.9rem;
    /* background-color: rgba(30, 110, 150); */
    /* background-color: rgb(65, 135, 255); */
    background-color: rgb(30, 65, 160);
    background-color: rgb(50, 50, 50);
    /* background-color: rgb(0, 120, 0); */
    text-transform: uppercase;
    color: whitesmoke;
    color: white;
    width: 100%;
    max-width: 180px;
    margin: 1.3rem auto;
    border: none;
    border-radius: 50px;
    /* box-shadow: 2px 2px 5px rgb(50, 50, 50); */
    padding: 0.7rem 1.3rem;
    letter-spacing: 0.8px;
    cursor: pointer;
}
#header-login-btn,
#header-signup-btn {
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
}

#logout-btn,
.take-over-user-abo-btn,
.test-is-ending-btn,
.test-ended-btn,
.create-proof-person-btn,
.create-company-and-proof-person-btn,
.take-over-btn,
.start-now-btn,
.take-over-company-btn,
.create-own-company-btn,
.create-new-account-btn,
.update-logout-btn,
.final-logout-btn,
#header-login-btn,
#header-signup-btn,
#header-login-side-btn,
#header-signup-side-btn {
    margin: 0 auto;
    height: fit-content;
}
.take-over-user-abo-btn,
.test-is-ending-btn,
.test-ended-btn,
.create-proof-person-btn,
.create-company-and-proof-person-btn,
.take-over-btn,
.start-now-btn,
.take-over-company-btn,
.create-own-company-btn,
.create-new-account-btn,
.update-logout-btn,
.final-logout-btn {
    background-color: rgb(30, 30, 30);
    margin: 1rem auto 0;
    height: fit-content;
}
.create-new-account-btn {
    max-width: 230px;
    margin-top: 2rem;
}
.agb-btn {
    font-size: 1rem;
    background-color: rgb(20, 150, 80);
    max-width: 200px;
    text-align: center;
    text-transform: inherit;
    margin-top: 1.2rem;
    margin-bottom: 0;
    line-height: 1.5;
}
.agb-btn.hide {
    display: none;
}

.create-own-company-btn {
    background-color: rgb(20, 150, 80);
    max-width: 200px;
    text-align: center;
    text-transform: inherit;
    margin-top: 1.2rem;
    line-height: 1.5;
}
.start-now-btn {
    background-color: rgb(80, 200, 80);
    background-color: rgb(20, 150, 80);
    background-color: rgb(30, 130, 50);
    max-width: 230px;
    text-align: center;
    text-transform: inherit;
    margin-top: 2rem;
    line-height: 1.5;
}

.take-over-company-btn,
.start-now-btn,
.take-over-user-abo-btn,
.test-is-ending-btn,
.test-ended-btn,
.create-proof-person-btn,
.create-company-and-proof-person-btn,
.take-over-btn {
    text-align: center;
}

.send-chat-msg,
#logout-btn,
#header-login-side-btn,
#header-signup-side-btn {
    background-color: transparent;
    border: 1px solid whitesmoke;
}

#header-login-btn,
#header-signup-btn {
    margin: 0 0.5rem;
}

.add-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-transform: inherit;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    min-width: fit-content;
}

.add-product p {
    padding-left: 0.1rem;
}

.proof-person-add,
.abo-add,
.save-btn {
    font-size: 0.9rem;
    text-align: center;
    /* background-color: rgba(30, 110, 150); */
    /* background-color: rgb(65, 135, 255); */
    background-color: rgb(30, 65, 160);
    background-color: rgb(37, 37, 37);
    background-color: rgb(0, 150, 0);
    background-color: rgb(20, 150, 80);
    text-transform: uppercase;
    color: whitesmoke;
    width: 100%;
    max-width: 150px;
    /* margin: 1.3rem auto; */
    border: none;
    border-radius: 50px;
    /* box-shadow: 2px 2px 5px rgb(50, 50, 50); */
    padding: 0.7rem 1.3rem;
    letter-spacing: 0.8px;
    cursor: pointer;
}

.proof-person-add {
    min-width: fit-content;
    margin: 1.5rem auto 0;
}

.abo-add {
    min-width: fit-content;
    margin: 1rem auto 0.5rem;
    scroll-margin: 1rem;
}

.create-products {
    max-width: 120px;
    padding: 0.7rem 1rem;
    letter-spacing: 1px;
}

.proof-person-add:focus,
.proof-person-add:hover,
.abo-add:focus,
.abo-add:hover,
.save-btn:focus,
.save-btn:hover {
    scale: 1.03;
    transition: 0.2;
}

.abo-container {
    /* border: 3px solid green; */
    width: 100%;
    padding: 1rem;

    display: flex;
    flex-direction: column;
    
    display: none;
}

@media (min-width: 360px) {
    .authdiv .authdiv-header-pw-reset {
        font-size: 1.25rem;
    }
}

@media (min-width: 700px) {
    .authdiv {
        top: 100px;
    }
}

/*================
  start page
==================*/

.start-page {
    /* border: 3px solid red; */
    background-color: whitesmoke;
    /* padding-top: calc(80px + 30vh); */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* cursor: pointer; */

    width: 100vw;
    height: 100vh;

    position: relative;
    z-index: 999999999999999;

    display: none;

}

.start-page h1 {
    /* border: 3px solid blue; */
    /* font-size: 1.5rem; */
    font-weight: bold;
}
.start-page h1:first-of-type {
    /* border: 3px solid blue; */
    /* font-size: 1.5rem; */
    font-weight: bold;
    transform: translateX(100vw);

    animation: start-page-animation 1s ease-in-out 0s forwards;
    animation-delay: 2.2s;
}
.start-page h1:last-of-type {
    /* border: 3px solid blue; */
    /* font-size: 1.5rem; */
    font-weight: bold;
    transform: translateX(100vw);

    animation: start-page-animation 1s ease-in-out 0s forwards;
    animation-delay: 2.5s;
}

.logo-start-page {
    /* border: 3px solid purple; */
    display: inherit;
    font-size: 0.5rem;
    padding: 0;
    padding-right: 0.3rem;
    opacity: 0;
    /* transform: translateX(-100vw); */
    
    animation: start-page-logo-animation 0.5s ease-in-out 0s forwards;
    animation-delay: 2s;
}

@keyframes start-page-logo-animation {
    0% {
    }
    100% {
        opacity: 1;
    }
}
@keyframes start-page-animation {
    0% {
    }
    100% {
        transform: translateX(0);
    }
}

@media (min-width: 700px) {
    .start-page {
        /* padding-top: calc(100px + 30vh); */
    }
}

/*================
  profil
==================*/

.profil-container {
    /* border: 3px solid red; */
    background-color: rgb(0, 80, 52);
    /* background: linear-gradient(
        rgb(130, 202, 173),
        rgba(0, 120, 30, 0.7),
        rgb(0, 80, 52)
    ); */
    width: 100%;
    height: calc(100% - 80px);
    padding: 1rem;
    overflow-y: scroll;
}
.profil-container-scroll-profil {
    /* border: 3px solid yellow; */
    background-color: rgb(0, 80, 52);
    width: 100%;
    height: calc(100% - 80px);
    /* padding-bottom: 1rem; */
}

.profil-container-box {
    /* border: 3px solid purple; */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(700px, 1fr)); */
    /* gap: 2rem; */
    /* height: 100%; */
    /* width: 100%; */
    /* padding: 1rem; */
}
.profil-container-box-scroll-profil {
    /* border: 3px solid black; */
    width: 100%;
    height: 100%;
    padding: 1rem;
    /* margin-bottom: 2rem; */
    overflow-y: scroll;
}
.just-for-scrolling {
    scroll-margin-top: 1rem;
}

.profil-container::-webkit-scrollbar,
.profil-container-box-scroll-profil::-webkit-scrollbar {
    width: 5px;
}

.profil-container::-webkit-scrollbar-track,
.profil-container-box-scroll-profil::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.profil-container::-webkit-scrollbar-thumb,
.profil-container-box-scroll-profil::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.profil-container-parent {
    /* border: 3px solid yellow; */
    /* background-color: rgb(130, 250, 170); */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 700px;
    height: fit-content;
    margin: 0 auto 1rem;
    border-radius: 1rem;

    overflow: hidden;
}

.create-own-admin-section-container,
.choose-company-section-container,
.creator-section-container {
    display: none;
}
.creator-section-container {
    padding-bottom: 1.5rem;
}
.profil-container-parent.hide {
    display: none !important;
}


.profil-container-parent-faq {
    border-radius: 1rem 1rem 5px 5px;
}

.profil-container-parent:last-of-type {
    margin-bottom: 0;
}

.col-vers-one {
    background-color: rgb(130, 255, 230);
    background-color: rgb(235, 235, 235);
    background-color: rgb(225, 245, 237);
    background-color: whitesmoke;
}

.col-vers-two {
    background-color: rgba(130, 230, 255, 0.7);
    background-color: rgb(215, 215, 215);
    background-color: rgb(230, 235, 233);
    background-color: whitesmoke;
}

.profil-container-child {
    /* border: 3px solid pink; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 1.5rem 0;
    padding: 0 1rem;
}
.profil-container-child-next {
    padding: 0 1.5rem;
}
.profil-container-child-next-bottom {
    padding: 0 1.5rem;
    margin-top: 0;
}
.profil-container-child-next-bottom.margin {
    margin-top: 1.5rem;
}

.profil-container-child-faq {
    /* border: 3px solid red; */
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* padding-bottom: 1rem; */
}

.profil-container-child-faq-container {
    /* border: 3px solid orchid; */
    position: relative;
}

.profil-container-child-faq-container b {
    font-size: 0.9rem;
    font-weight: bold;
}

.profil-container-child-faq-parent {
    border-top: 1pt solid rgb(170, 170, 170);
    border-bottom: 1pt solid rgb(170, 170, 170);
    /* border: 3px solid red; */
    background-color: whitesmoke;
    padding: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* letter-spacing: -0.3px; */
    /* cursor: pointer; */

    position: relative;
    z-index: 97;

}

.profil-container-child-faq-parent span {
    /* border: 3px solid green; */
    font-size: 0.95rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
}
.profil-container-child-faq-parent .faq-plus-btn {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 0.45rem;
    cursor: pointer;
}
.profil-container-child-faq-parent .faq-plus-btn:hover {
    scale: 1.05;
    transition: 0.2s;
}
.faq-plus {
    /* border: 3px solid yellow; */
    /* cursor: pointer; */
}
.faq-plus.show {
    transform: rotate(45deg);
    transition: 0.2s;
}

.profil-container-child-faq-child {
    /* border: 3px solid blue; */
    background-color: white;
    letter-spacing: -0.2px;
    height: fit-content;
    opacity: 0;
    height: 0;
    padding: 0;

    position: relative;
    z-index: 0;
}
.profil-container-child-faq-child.show {
    transition: 0.2s;
    opacity: 1;
    height: fit-content;
    padding: 1rem;
}

.faq-child-state {
    margin-bottom: 1rem;
    line-height: 1.5;
}
.faq-child-defekt {
    margin-bottom: 0;
}

.faq-child-plus svg {
    /* border: 3px solid yellow; */
    margin-bottom: -0.3rem;
}

.faq-child-choose svg {
    /* border: 3px solid yellow; */
    margin: 0 0.3rem -0.3rem;
}

@media (min-width: 500px) {
    .profil-container-child-faq-child.show {
        padding: 1.2rem;
    }

    .profil-container-child-faq-parent {
        padding: 1.2rem;
    }
}

.profil-container-child-boolean-bottom,
.profil-container-child-boolean-top {
    /* border: 3px solid red; */
    justify-content: space-between;
    margin: 0.3rem 0;
    padding: 0 1.3rem;

    margin: 0.7rem 0 1.5rem;
}
.profil-container-child-boolean-bottom {
    margin: 0.7rem 0 1.5rem;

    display: none;
}

.boolean-right-abo,
.boolean-right-newsletter {
    /* border: 3px solid yellow; */
    margin: auto 0;
    margin-left: 0.5rem;
}

.profil-container-child-proof-person {
    /* border: 3px solid lawngreen; */
    width: 100%;
    padding: 0 1rem;
    margin: 1.5rem 0;
}
.profil-container-child-abo {
    /* border: 3px solid lawngreen; */
    width: 100%;
    max-width: inherit;
}

.profil-container-parent h3 {
    /* border: 3px solid lawngreen; */
    border-bottom: 1px solid rgba(30, 30, 30, 0.5);
    background-color: rgb(220, 235, 225);
    background-color: white;
    font-size: 1rem;
    font-weight: bold;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem;

    letter-spacing: 0.5px;
}
.profil-container-parent-faq h3 {
    /* border: 3px solid purple; */
    color: whitesmoke;
    background-color: rgb(30, 30, 30);
    padding: 1.2rem;
}

.profil-container-child h3 {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.profil-container-child-proof-person-bill,
.profil-container-child-proof-person-list {
    /* border: 3px solid blue; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.profil-container-bill {
    /* border: 3px solid red; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1rem 1rem 0.5rem;
}
.profil-container-service {
    padding: 0 1rem;
}
.profil-container-overview {
    display: none;
}

.profil-person-bill-header,
.profil-person-bill-info-header,
.profil-person-list-header {
    /* border: 3px solid green; */
    /* font-weight: bold; */
    padding: 1rem 0.5rem 0.5rem;
    border-bottom: 3px solid rgb(20, 20, 20);
}

.profil-person-bill-header {
    padding: 0 0.5rem 0.5rem;
}

.profil-person-list-box {
    /* border: 3px solid purple; */
    padding: 0.7rem 0.5rem 0;
}

.profil-person-bill-box {
    /* border: 3px solid purple; */
    margin-top: 0.7rem;
    padding: 0.5rem 0.5rem 0;
    max-height: 163px;
    overflow-y: scroll;
}

.profil-person-bill-box::-webkit-scrollbar {
    width: 5px;
}

.profil-person-bill-box::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.profil-person-bill-box::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.profil-person-bill-info-box {
    /* border: 3px solid purple; */
    margin-top: 1rem;
}
.profil-person-bill-payinfo-box {
    /* border: 3px solid purple; */
    margin-top: 2rem;
}

.profil-person-bill-top,
.profil-person-list-top {
    /* border: 3px solid red; */
    color: rgb(70, 70, 70);
    margin-bottom: 0.7rem;
}

.profil-person-bill-bottom-bill-to-pay,
.profil-person-bill-bottom,
.profil-person-list-bottom {
    /* border: 3px solid yellow; */
    /* display: none; */
}
.profil-person-bill-bottom-bill-to-pay {
    /* border: 3px solid yellow; */
    border-top: 2px solid rgb(70, 70, 70);
    border-bottom: 2px solid rgb(70, 70, 70);
    display: none;
    padding: 1rem 0.7rem 0.3rem;
    margin-bottom: 2rem;
}

.profil-person-bill-bottom-bill-to-pay-box,
.profil-person-bill-bottom-box,
.profil-person-list-bottom-box {
    /* border: 3px solid red; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.7rem;
}
.profil-person-bill-bottom-bill-to-pay-box {
    /* max-width: 400px; */
    cursor: pointer;
}
.profil-person-bill-bottom-box {
    cursor: pointer;
}

.profil-person-bill-bottom-bill-to-pay-box:hover,
.profil-person-bill-bottom-box:hover {
    scale: 1.01;
    /* transition: 0.2s; */
    background-color: rgb(220, 220, 220);
    border-radius: 5px;
}

.profil-person-bill-bottom-bill-to-pay-bill-container,
.profil-person-bill-bottom-bill-container,
.profil-person-list-bottom-person {
    border: 3px solid green;
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    /* align-items: end; */
    padding: 0.2rem;
}
.profil-person-bill-bottom-bill-to-pay-bill-container svg,
.profil-person-bill-bottom-bill-container svg {
    color: rgb(200, 0, 0);
}
.profil-person-list-bottom-person svg {
    min-width: 23px;
}
.profil-person-bill-bottom-bill-to-pay-bill-number,
.profil-person-bill-bottom-bill-number,
.profil-person-list-bottom-person-name {
    margin-left: 0.7rem;
}
.profil-person-bill-bottom-bill-to-pay-bill-number {
    text-align: start;
}

.profil-person-bill-bottom-bill-to-pay-bill-date,
.profil-person-bill-bottom-bill-date {
    margin-right: 0.5rem;
}

.profil-person-list-bottom-delete {
    /* border: 3px solid yellow; */
    display: flex;
    color: rgb(220, 0, 0);
    padding: 0.2rem;
    cursor: pointer;
}

.profil-person-list-bottom-delete:hover {
    scale: 1.03;
    transition: 0.2s;
}

.profil-container-child-proof-person-box {
    /* border: 3px solid blue; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.profil-container-child-proof-person-box-margin {
    /* border: 3px solid blue; */
    /* margin-bottom: 0.5rem; */
}

.profil-container-child-proof-person-box-company {
    display: none;
}

.profil-container-child-proof-person-box-left {
    /* border: 3px solid yellow; */
    width: 100%;
    max-width: 300px;
    margin-bottom: 0.8rem;
}
.profil-container-child-proof-person-box-left-users {
    /* border: 3px solid yellow; */
    width: 100%;
    max-width: 500px;
    margin-bottom: 0.8rem;
}

.profil-container-child-proof-person-box-right {
    /* border: 3px solid green; */
    width: 100%;
    max-width: 300px;
    height: 100%;
    margin-bottom: 0.8rem;
}
.profil-container-child-proof-person-box-right-empty {
    display: none;
}
.take-over-user-abo-btn-container,
.test-is-ending-btn-container,
.test-ended-btn-container,
.take-over-btn-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: end; */
}
.test-is-ending-btn-container,
.test-ended-btn-container {
    justify-content: center;
}
.take-over-user-abo-btn-container span,
.test-is-ending-btn-container span,
.test-ended-btn-container span,
.take-over-btn-container span {
    text-align: center;
}
.take-over-user-abo-btn-container span b,
.test-is-ending-btn-container span b,
.test-ended-btn-container span b,
.take-over-btn-container span b {
    font-weight: bold;
}
.profil-container-child-proof-person-box-right .take-over-btn {
    /* border: 3px solid purple; */
    margin-top: 1rem;
}
.create-own-company-container,
.create-own-company-container-right,
.take-over-company-btn-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.create-own-company-container-right {
    /* border: 3px solid blue; */
    height: fit-content;
    /* width: fit-content; */
}
.create-own-company-container {
    max-width: 70% !important;
}

.create-own-company-container b {
    font-weight: bold;
}

.bank-left {
    /* border: 3px solid blue; */
    width: 100%;
    min-height: 100px;
    max-width: 250px;
}

.bank-right {
    /* border: 3px solid purple; */
    width: 100%;
    max-width: 330px;
    min-height: 100px;
    max-width: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pay-methode-container {
    /* border: 3px solid red; */
    text-transform: uppercase;
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(0, 130, 0);
    /* cursor: pointer; */
}

.pay-methode-container svg {
    /* border: 3px solid lawngreen; */
    color: rgb(70, 70, 70);
}

.pay-methode {
    /* border: 3px solid purple; */
    /* font-weight: bold; */
    margin-left: 1.5rem;
    letter-spacing: 0.7px;
}

.bank-info-container {
    /* border: 3px solid red; */
}

.bank-info-container div {
    /* border: 3px solid blue; */
    padding: 0.5rem 0;
    color: black !important;
}

.bank-info-container div b {
    /* border: 3px solid lawngreen; */
    font-weight: bold;
    margin-right: 7px;
}

.profil-container-child-proof-person-box-overview {
    /* border: 3px solid purple; */
    width: 100%;
    margin-bottom: 1rem;
    margin-bottom: 0.8rem;
    letter-spacing: 1px;
}
.pdf-portrait-overview-bill-overview-container {
    width: 100%;
    font-size: 1.1rem;
    font-size: 0.75em;
}

.abo-service-overview,
.abo-overview-gutschein,
.abo-overview {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-bottom: 0.7rem;

    display: none;
}
.abo-overview-gutschein {
    margin: 0;
}

.abo-overview-header {
    /* border: 3px solid orangered; */
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding-bottom: 0.5rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.abo-overview-gutschein-container,
.abo-old-container {
    /* border: 3px solid red; */
    border-top: 1px solid black;
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;

    display: none;
}

.bill-overview-gutschein-container,
.bill-old-container {
    /* border: 3px solid red; */
    border-top: 1px solid black;
    margin-top: 1rem;
    margin-top: 0.8rem;
    padding-top: 1rem;
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;

    display: none;
}

.abo-service-overview-old,
.abo-overview-old,
.bill-service-overview-old,
.bill-overview-old,
.bill-service-overview,
.bill-overview-gutschein,
.bill-overview {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    /* margin-bottom: 0.7rem; */
    padding: 0 1rem;

    height: 50px;

    display: none;
}

.bill-service-overview-old,
.bill-overview-old,
.bill-service-overview,
.bill-overview-gutschein,
.bill-overview {
    height: 30px;
}
.bill-service-overview-old,
.bill-overview-old {
    width: 100%;
}
.abo-service-overview-old,
.abo-overview-gutschein,
.abo-overview-old {
    /* height: inherit; */
    padding: 0 0.2rem;
    width: 100%;
}

.bill-overview-header {
    /* border: 3px solid orangered; */
    background-color: rgb(50, 50, 50);
    color: white;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 0.5rem 1rem;
    padding: 0.3rem 0.8rem;
    margin-bottom: 1rem;
    margin-bottom: 0.8rem;
}
.abo-overview-footer,
.bill-overview-footer,
.bill-overview-footer-exkl,
.abo-overview-footer-exkl {
    /* border: 3px solid orangered; */
    font-size: 1rem;

    border-top: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding-top: 0.8rem;
    margin-top: 1rem;
}
.bill-overview-footer,
.bill-overview-footer-exkl {
    /* font-size: 0.75em; */
    margin-top: 1rem;
    margin-top: 0.8rem;
    padding: 1.5rem 1rem 0;
    padding: 0.8rem 1rem 0;
}

.abo-overview-footer {
    font-size: 1rem;
    border: none;
    margin-top: 0;
}
.bill-overview-footer {
    /* font-size: 0.65em; */
    border: none;
    padding-top: 0.5rem;
    margin-top: 0;
}
.bill-overview-footer div {
    /* font-size: 1.1rem; */
    /* font-size: 0.75em; */
    font-weight: bold;
    /* margin-top: 0.5rem; */
}

.abo-overview-header-left,
.abo-overview-footer-left,
.abo-overview-footer-exkl-left,
.abo-service-overview-left,
.abo-overview-gutschein-left,
.abo-overview-left {
    /* border: 3px solid blue; */
    margin-right: auto;
    margin-left: 0.3rem;
}
.bill-overview-gutschein-left {
    margin-right: auto;
}

.abo-overview-left-old,
.abo-service-overview-left-old,
.bill-overview-left-old,
.bill-service-overview-left-old,
.bill-overview-left,
.bill-overview-footer-left,
.bill-overview-footer-exkl-left,
.bill-service-overview-left,
.bill-overview-header-left {
    /* border: 3px solid blue; */
    margin-right: auto;
}
.bill-service-overview-left {
    justify-content: start;
    align-items: start;
    text-align: inherit;
    /* margin-right: 0; */
}

.abo-overview-footer-left {
    font-weight: bold;
}

.abo-overview-left b,
.abo-service-overview-left b {
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 0.7rem;
}
.old-abo-overview-left-abo,
/* .bill-overview-gutschein-left-abo, */
.abo-overview-gutschein-left-abo,
.old-abo-service-overview-left-abo,
.old-bill-overview-left-abo,
.old-bill-service-overview-left-abo,
.bill-overview-left b,
.bill-service-overview-left b {
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 0.5rem;
}
.bill-overview-gutschein-left-abo,
.abo-overview-gutschein-left-abo {
    letter-spacing: 1px;
}

.abo-overview-header-middle,
.abo-overview-footer-middle,
.abo-overview-footer-exkl-middle,
.abo-service-overview-middle,
.bill-overview-gutschein-middle,
.abo-overview-gutschein-middle,
.abo-overview-middle {
    /* border: 3px solid green; */
    /* margin-right: 1.5rem; */
}
.bill-overview-middle,
.bill-overview-footer-middle,
.bill-overview-footer-exkl-middle,
.bill-service-overview-middle,
.bill-overview-header-middle {
    /* border: 3px solid red; */
}
.bill-overview-footer-exkl-right,
.bill-overview-footer-exkl-middle {
    font-size: 0.7em;
}
.bill-overview-footer-right,
.bill-overview-footer-middle {
    font-size: 0.75em;
}

.abo-overview-footer-middle {
    font-weight: bold;
}

.abo-overview-header-right,
.abo-overview-footer-right,
.abo-overview-footer-exkl-right,
.abo-service-overview-right,
/* .bill-overview-gutschein-right, */
.abo-overview-gutschein-right,
.abo-overview-right {
    /* border: 3px solid green; */
    margin-right: 0.3rem;
    font-weight: bold;
    width: 100px;
    text-align: right;
}
.abo-service-overview-right-sum-old,
.abo-overview-right-sum-old {
    width: 100px;
    text-align: right;
}

.bill-service-overview-right-mwst,
.bill-overview-footer-right,
.bill-overview-footer-exkl-right,
.bill-overview-right-mwst,
.bill-overview-header-right {
    /* border: 3px solid green; */
    width: 70px;
    text-align: right;
}
.bill-overview-header-single-price {
    width: 90px;
    line-height: 1.3;
}
.bill-overview-header-right-sum,
.bill-overview-header-right-sum-old,
.bill-overview-right-sum,
.bill-service-overview-right-sum,
.bill-service-overview-right-sum-old {
    /* border: 3px solid purple; */
    text-align: right;
    width: 70px;
}
.bill-overview-single-month,
.bill-overview-single-year,
.bill-service-overview-single-month,
.bill-service-overview-single-year {
    /* border: 3px solid purple; */
    text-align: right;
    width: 90px;
}

.abo-overview-footer-exkl-right {
    font-weight: inherit;
}


.profil-parent {
    /* border: 3px solid purple; */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.profil-parent-next-container {
    max-width: inherit;
}
.profil-parent-users {
    /* border: 3px solid orange; */
    width: 100%;
    max-width: 500px;
}

.profil-parent:not(:last-of-type) {
    /* border: 3px solid blue; */
    margin-bottom: 1rem;
}

.profil-parent-abo {
    /* border: 3px solid orangered; */
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
    /* align-items: center; */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    gap: 1.7rem;
}

.profil-parent-service {
    /* border: 3px solid orangered; */
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    padding: 1rem 0;
    gap: 1.7rem;
}

.profil-parent-abo-hint {
    /* border: 3px solid red; */
    font-size: 0.9rem;
    text-align: center;
    margin: 0.5rem 0 1rem;
    padding: 0 1rem;
}
.profil-parent-abo-hint-index {
    color: white;
}
.profil-parent-abo-hint b {
    font-weight: bold;
}

.profil-child {
    /* border: 3px solid green; */
}

.profil-child-email {
    /* margin-bottom: 0.5rem; */
}

.new-proof-person-container{
    display: none;
}

.profil-child-abo-container {
    /* border: 3px solid red; */
    position: relative;

    /* flex: 1 1 250px; */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* height: 300px; */
    /* height: 100%; */

    max-width: 300px;
    margin: 0 auto;
}
.profil-child-abo-container-start {
    height: 300px;
    /* height: 100%; */
}

@media (min-width: 500px) {
    .profil-child-abo-container-platin {
        max-width: 205px;
    }
}

.profil-child-abo-container-child-test {
    /* border: 3px solid purple; */
    background-color: rgba(220, 220, 220, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    display: none;
}

.profil-child-service-abo,
.profil-child-abo {
    /* border: 3px solid black; */
    border: 4px solid transparent;
    background-color: white;

    /* flex: 1 1 250px; */
    /* flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 200px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

    max-width: 300px;
    margin: 0 auto; */

    width: 100%;

    /* padding: 2rem 0; */
    box-shadow: 0px 0px 5px rgb(70, 70, 70);
    border-radius: 10px;

    overflow: hidden;
    cursor: pointer;
}

.main-start-body-service-abo,
.main-start-body-abo {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 280px;
    min-height: 255px;


    margin: 0 auto;

    /* padding: 2rem 0; */
    box-shadow: 0px 0px 5px rgb(70, 70, 70);
    border-radius: 10px;

    overflow: hidden;
    cursor: pointer;
}

.main-start-body-service-abo {
    min-height: 300px;
}

.profil-child-service-abo:focus,
.profil-child-service-abo:hover,
.profil-child-abo:focus,
.profil-child-abo:hover {
    scale: 1.01;
    transition: 0.2s;
}

.profil-child-abo-test .profil-child-abo-plan,
.profil-child-abo-eisen .profil-child-abo-plan,
.profil-child-abo-bronze .profil-child-abo-plan,
.profil-child-abo-silber .profil-child-abo-plan,
.profil-child-abo-gold .profil-child-abo-plan,
.profil-child-abo-premium .profil-child-abo-plan,
.profil-child-abo-standard .profil-child-abo-plan,
.profil-child-abo-free .profil-child-abo-plan,
.profil-child-abo-diamant .profil-child-abo-plan,
.profil-child-abo-platin .profil-child-abo-plan {
    /* border: 3px solid black; */
    font-size: 1.2rem;
    position: relative;
    width: 100%;
    height: 110px;
    /* height: 100%; */
    /* max-height: 100%; */

    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    font-weight: inherit;
    letter-spacing: 1px;

    border-radius: 10px 10px 0 0;
}
.profil-child-abo-premium .profil-child-abo-plan-start,
.profil-child-abo-free .profil-child-abo-plan-start {
    /* border: 3px solid green; */
    height: 100%;
    max-height: 100%;
}

.profil-child-abo-container .profil-child-abo-plan-free-service {
    /* border: 1px solid red; */
    padding-bottom: 0;
    margin-bottom: 0;
}

.profil-child-abo-container .profil-child-abo-plan-free-service-home {
    height: calc(110px + 27.2px);
}

.profil-child-abo-gold .profil-child-abo-plan-fav {
    /* border: 1px solid red; */
    background-color: rgb(0, 150, 0);
    background-color: rgb(0, 135, 0);
    /* text-transform: uppercase; */
    text-align: center;
    position: absolute;
    font-size: 0.9rem;
    color: white;
    padding: 0.3rem 0.6rem;
    width: 150px;
    /* height: 50px; */
    top: 14px;
    left: -48px;
    border-radius: 0 0 0 0;
    box-shadow: 0px 0px 5px rgb(30, 30, 30);
    letter-spacing: 0.7px;
    transform: rotate(-45deg);
}

.profil-child-abo-current-plan {
    border: 2px solid rgb(0, 110, 0);
    background-color: white;
    /* background-color: rgba(0, 150, 0, 0.8); */
    background-color: rgba(0, 135, 0);
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    font-size: 0.9rem;
    color: black;
    color: white;
    padding: 0.4rem;
    /* width: 150px; */
    /* height: 50px; */
    top: -1rem;
    border-radius: 5px;
    /* box-shadow: 0px 0px 5px rgb(30, 30, 30); */
    letter-spacing: 0.7px;

    z-index: 2;

    display: none;
}

.profil-child-abo-current-plan-test.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-eisen.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-bronze.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-silber.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-gold.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-premium.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-standard.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-free.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-diamant.profil-child-abo-current-plan-active,
.profil-child-abo-current-plan-platin.profil-child-abo-current-plan-active {
    display: inherit;
}

.profil-child-abo-test.profil-child-abo-border,
.profil-child-abo-eisen.profil-child-abo-border,
.profil-child-abo-bronze.profil-child-abo-border,
.profil-child-abo-silber.profil-child-abo-border,
.profil-child-abo-gold.profil-child-abo-border,
.profil-child-abo-premium.profil-child-abo-border,
.profil-child-abo-standard.profil-child-abo-border,
.profil-child-abo-free.profil-child-abo-border,
.profil-child-abo-diamant.profil-child-abo-border,
.profil-child-abo-platin.profil-child-abo-border {
    border: 3px solid rgba(0, 150, 0, 0.6);
    box-shadow: 0px 0px 10px rgb(0, 110, 0);
}

.profil-child-service-abo:hover,
.profil-child-abo:hover {
    border: 3px solid rgba(0, 150, 0, 0.6);
    box-shadow: 0px 0px 10px rgb(0, 110, 0);
}

.profil-child-abo-test .profil-child-abo-price-border-box,
.profil-child-abo-eisen .profil-child-abo-price-border-box,
.profil-child-abo-bronze .profil-child-abo-price-border-box,
.profil-child-abo-silber .profil-child-abo-price-border-box,
.profil-child-abo-gold .profil-child-abo-price-border-box,
.profil-child-abo-premium .profil-child-abo-price-border-box,
.profil-child-abo-standard .profil-child-abo-price-border-box,
.profil-child-abo-free .profil-child-abo-price-border-box,
.profil-child-abo-diamant .profil-child-abo-price-border-box,
.profil-child-abo-platin .profil-child-abo-price-border-box {
    /* border: 1px solid blue; */
    position: absolute;
    width: 150%;
    height: 50px;
    bottom: -25px;
    overflow: hidden;
}

.profil-child-abo-test .profil-child-abo-price-border,
.profil-child-abo-eisen .profil-child-abo-price-border,
.profil-child-abo-bronze .profil-child-abo-price-border,
.profil-child-abo-silber .profil-child-abo-price-border,
.profil-child-abo-gold .profil-child-abo-price-border,
.profil-child-abo-premium .profil-child-abo-price-border,
.profil-child-abo-standard .profil-child-abo-price-border,
.profil-child-abo-free .profil-child-abo-price-border,
.profil-child-abo-diamant .profil-child-abo-price-border,
.profil-child-abo-platin .profil-child-abo-price-border {
    /* border: 1px solid red; */
    background-color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -25px;

    transform: rotate(-6deg);
}

.profil-child-abo-price-box {
    /* border: 3px solid red; */
    background-color: white;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    bottom: -45px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    max-width: 160px;
    height: 90px;
    padding: 0.7rem 0 0.3rem;
    border-radius: 15px;

}

.profil-child-abo-test .profil-child-abo-price-border-box,
.profil-child-abo-test .profil-child-abo-plan {
    /* background-color: rgb(108, 217, 142); */
    background-color: rgb(137, 225, 165);
}
.profil-child-abo-test .profil-child-abo-price-box {
    border: 7px solid rgb(137, 225, 165);
}
.profil-child-abo-free .profil-child-abo-price-border-box,
.profil-child-abo-free .profil-child-abo-plan {
    /* background-color: rgb(108, 217, 142); */
    background-color: rgb(137, 225, 165);
    background-color: rgb(160, 240, 185);
}
.profil-child-abo-free .profil-child-abo-price-box {
    border: 7px solid rgb(137, 225, 165);
}
.profil-child-abo-eisen .profil-child-abo-price-border-box,
.profil-child-abo-eisen .profil-child-abo-plan {
    background-color: rgb(170, 170, 170);
}
.profil-child-abo-eisen .profil-child-abo-price-box {
    border: 7px solid rgb(170, 170, 170);
}
.profil-child-abo-bronze .profil-child-abo-price-border-box,
.profil-child-abo-bronze .profil-child-abo-plan {
    /* background-color: rgb(219, 122, 95); */
    background-color:  rgb(226, 149, 127);
}
.profil-child-abo-bronze .profil-child-abo-price-box {
    /* border: 7px solid rgba(245, 90, 90, 0.8); */
    border: 7px solid  rgb(226, 149, 127);
}
.profil-child-abo-silber .profil-child-abo-price-border-box,
.profil-child-abo-silber .profil-child-abo-plan {
    background-color: rgb(230, 230, 230);
}
.profil-child-abo-silber .profil-child-abo-price-box {
    border: 7px solid rgb(230, 230, 230);
}
.profil-child-abo-standard .profil-child-abo-price-border-box,
.profil-child-abo-standard .profil-child-abo-plan {
    background-color: rgb(230, 230, 230);
}
.profil-child-abo-standard .profil-child-abo-price-box {
    border: 7px solid rgb(230, 230, 230);
}
.profil-child-abo-premium .profil-child-abo-price-border-box,
.profil-child-abo-premium .profil-child-abo-plan {
    background-color: rgb(50, 50, 50);
}
.profil-child-abo-premium .profil-child-abo-price-box {
    border: 7px solid rgb(50, 50, 50);
}
.profil-child-abo-premium .profil-child-abo-plan-premium {
    color: white;
}
.profil-child-abo-premium .profil-child-abo-price-box,
.profil-child-abo-premium .profil-child-abo-price-border-box {
    color: black;
}
.profil-child-abo-gold .profil-child-abo-price-border-box,
.profil-child-abo-gold .profil-child-abo-plan {
    background-color: rgb(241, 199, 67);
}
.profil-child-abo-gold .profil-child-abo-price-box {
    border: 7px solid rgb(241, 199, 67);
}
.profil-child-abo-diamant .profil-child-abo-price-border-box,
.profil-child-abo-diamant .profil-child-abo-plan {
    /* background-color: rgb(101, 214, 255); */
    background-color: rgb(132, 222, 255);
}
.profil-child-abo-diamant .profil-child-abo-price-box {
    border: 7px solid rgb(132, 222, 255);
}
.profil-child-abo-platin .profil-child-abo-price-border-box,
.profil-child-abo-platin .profil-child-abo-plan {
    /* background-color: rgb(216, 161, 244); */
    background-color: rgb(224, 180, 246);
}
.profil-child-abo-platin .profil-child-abo-price-box {
    border: 7px solid rgb(224, 180, 246);
}
.profil-child-abo-plan {
    /* border: 3px solid purple; */
    font-weight: bold;
    margin-bottom: 1rem;
}

.profil-child-abo-days {
    font-size: 0.9rem;
    text-transform: initial;
}
.profil-child-abo-days-test b {
    font-weight: bold;
}

.profil-child-abo-price {
    font-size: 1rem;
    font-weight: bold;
}
.profil-child-abo-price b {
    font-weight: bold;
}

.profil-child-abo-test .profil-child-abo-amount,
.profil-child-abo-eisen .profil-child-abo-amount,
.profil-child-abo-bronze .profil-child-abo-amount,
.profil-child-abo-silber .profil-child-abo-amount,
.profil-child-abo-gold .profil-child-abo-amount,
.profil-child-abo-premium .profil-child-abo-amount,
.profil-child-abo-standard .profil-child-abo-amount,
.profil-child-abo-free .profil-child-abo-amount,
.profil-child-abo-diamant .profil-child-abo-amount,
.profil-child-abo-platin .profil-child-abo-amount {
    /* border: 3px solid red; */
    background-color: white;
    font-size: 1.1rem;
    width: 100%;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding-top: 35px;
    letter-spacing: 1px;
}

.profil-child-abo-service {
    /* border: 3px solid red; */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-decoration: underline;
    font-size: 0.8rem;
    width: 100%;
    line-height: 1.3;
    text-align: center;
    padding-bottom: 1rem;
}
.profil-child-abo-service .profil-child-abo-service-svg {
    /* border: 3px solid red; */
    color: rgb(0, 80, 52);
    color: rgb(30, 130, 30) !important;
    margin-right: 0.3rem;
}
.profil-child-abo-service-top {
    padding-top: 3.5rem;
}
.profil-child-abo-service-bottom {
    padding-bottom: 2rem;
}
.profil-child-abo-free-service-top {
    padding: 2rem 0 1rem;
}


.password-proof-info {
    /* border: 3px solid red; */
    font-size: 0.9rem;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    /* align-items: center; */
    line-height: 1.4;
    letter-spacing: 0.7px;
}

.password-proof-info b {
    font-weight: bold;
}
.password-proof-info-star {
    /* font-weight: bold; */
    margin-right: 0.3rem;
}

.profil-child-input-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.5rem;
    /* margin-bottom: 0.5rem; */
    padding: 0.4rem 0.5rem;
    border: 1pt solid rgb(30, 30, 30);
    /* border: 3px solid rebeccapurple; */

    width: 100%;
    height: 35px;
    background-color: white;

    border-radius: 5px;
}
.boolean-left-abo,
.boolean-left-newsletter,
.profil-child-next {
    line-height: 1.7;
}
.profil-child-input-container-next {
    max-width: 280px;
}
.profil-child-input-container-parent {
    /* border: 3px solid orange; */
    flex-direction: column;
    justify-content: start;
    align-items: start;
    height: fit-content;
    max-height: 150px;
    overflow-y: scroll;
}
.profil-child-input-container-child {
    /* border: 3px solid purple; */
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    /* padding-left: 1.3rem; */
    border-bottom: 1pt solid rgb(30, 30, 30);
}
.profil-child-input-container-child span {
    font-size: 0.9rem;
    letter-spacing: 0;
}
.profil-child-input-container-child span:first-of-type {
    margin-bottom: 0.3rem;
}
.profil-child-input-container-child span b {
    font-weight: bold;
    letter-spacing: 0;
}
.profil-child-input-container-child.warning {
    background-color: rgba(255, 0, 0, 0.2);
}
.profil-child-input-container-child b {
    font-weight: bold;
}
/* .profil-child .profil-username-disabled-container, */
.profil-child .profil-username-container {
    display: none;
}

.profil-child-input {
    font-size: 1rem;
    background-color: transparent;
    width: 100%;
    border: none;
    /* border: 3px solid red; */
    /* max-width: 300px; */
    letter-spacing: 0.5px;
    outline: none;
}

.profil-company-container-abo-info,
.profil-firstname-container-abo-info,
.profil-surname-container-abo-info,
.profil-private-company-container-abo-info,
.profil-country-container-abo-info,
.profil-address-container-abo-info,
.profil-location-container-abo-info,
.profil-zipcode-container-abo-info,
.profil-useradminemail-container,
.profil-username-disabled-container,
.profil-useremail-container {
    margin-top: 0.5rem;
    background-color: whitesmoke !important;
}

.profil-company-abo-info,
.profil-firstname-abo-info,
.profil-surname-abo-info,
.profil-private-company-abo-info,
.profil-country-abo-info,
.profil-address-abo-info,
.profil-location-abo-info,
.profil-zipcode-abo-info,
.profil-username-disabled,
.profil-useremail {
    color: black !important;
}

.profil-child-input-container:focus-within,
.profil-child-input-container:hover {
    border: none;
    border-bottom: 3px solid rgb(30, 65, 160);
    border-bottom: 3px solid rgb(0, 150, 0);
    border-bottom: 2px solid rgb(30, 30, 30);
}
.profil-child-input-container-parent:focus-within,
.profil-child-input-container-parent:hover {
    border: 1pt solid rgb(30, 30, 30);
}

.profil-child-pen {
    color: rgb(50, 50, 50);
    display: flex;
    justify-content: center;
    align-items: center;
}

.profil-child-input-container:focus-within>.profil-child-pen,
.profil-child-input-container:hover>.profil-child-pen {
    display: none;
    visibility: hidden;
}

.profil-child-input-fail {
    border: none;
    border-bottom: 2px solid rgb(220, 0, 0);
}

.profil-child-input-fail:focus,
.profil-child-input-fail:hover {
    border: none;
    border-bottom: 2px solid rgb(220, 0, 0);
}

@media (min-width: 700px) {
    .profil-container-scroll-profil,
    .profil-container {
        height: calc(100% - 100px);
    }

    .profil-container-child-boolean-bottom,
    .profil-container-child-boolean-top {
        padding: 0 2rem;
    }

    .profil-container-child-next-bottom,
    .profil-container-child-next {
        padding: 0 2rem;
    }

    .profil-container-child-proof-person-box-overview {
        padding: 0 0.3rem;
    }
}

@media (min-width: 720px) {
    .profil-container-child-proof-person-box {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: start;
    }
    
    .profil-container-child-proof-person-box-left {
        /* margin-bottom: 0; */
    }

    
    .profil-container-child-proof-person-box-left,
    .profil-container-child-proof-person-box-right,
    .profil-parent {
        max-width: 280px;
    }
    .profil-parent-next-container {
        max-width: inherit;
    }

    .profil-container-child-proof-person-box-right-empty {
        display: inherit;
        opacity: 0;
        visibility: hidden;
    }

    .bank-left {
        max-width: inherit;
        width: 40%;
    }
    
    .bank-right {
        max-width: inherit;
        width: 50%;
    }

}


/*================
  stuff
==================*/

.stuff-container {
    /* border: 3px solid red; */
    background-color: rgb(0, 80, 52);
    /* background: linear-gradient(
        rgb(130, 202, 173),
        rgba(0, 120, 30, 0.7),
        rgb(0, 80, 52)
    ); */
    height: calc(100% - 80px);
    padding: 1rem;
}

.stuff-container-parent {
    /* border: 3px solid yellow; */
    /* background-color: rgb(130, 250, 170); */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
}

.stuff-container-parent:last-of-type {
    margin-bottom: 0;
}

.stuff-container-child-top {
    /* border: 3px solid purple; */
    color: whitesmoke;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 55px;
    padding: 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(145, 145, 145, 0.8);
}

.stuff-container-settings {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.stuff-container-settings-left {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.stuff-between {
    border: 1px solid rgba(145, 145, 145, 0.8);
    height: 25px;
    margin: -0.2rem 0.5rem 0 0.6rem;
}

.stuff-container-settings-right {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.stuff-a-z-view,
.stuff-z-a-view {
    padding: 0.3rem;
    cursor: pointer;
}

.stuff-a-z-view {
    display: none;
}

.stuff-box-view,
.stuff-list-view,
.stuff-add {
    /* border: 3px solid lawngreen; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.3rem;
    cursor: pointer;
}

.stuff-box-view {
    display: none;
}

.stuff-a-z-view:hover,
.stuff-z-a-view:hover,
.stuff-box-view:hover,
.stuff-list-view:hover,
.stuff-add:hover {
    scale: 1.03;
}

.stuff-box-view span,
.stuff-list-view span {
    margin-left: 0.7rem;
}

.stuff-container-child-bottom {
    /* border: 3px solid blue; */
    width: 100%;
    height: fit-content;
    max-height: calc(100% - 55px);
    display: flex;
    flex-direction: row;
    justify-content: center;

    /* justify-content: space-evenly; */
    flex-wrap: wrap;
    padding-top: 0.5rem;
    overflow-y: scroll;
}

.stuff-container-child-bottom::-webkit-scrollbar {
    width: 5px;
}

.stuff-container-child-bottom::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.stuff-container-child-bottom::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.stuff-box-container {
    /* border: 3px solid orangered; */
    background-color: whitesmoke;
    text-align: center;
    /* min-width: 270px; */
    /* max-width: 280px; */
    max-width: 480px;
    max-width: 450px;
    /* width: 270px; */
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    padding: 1rem;
    /* padding-bottom: 2rem; */
    /* margin: 1rem auto; */
    margin: 1rem;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgb(30, 30, 30);
    
    /* flex: 1 1 280px; */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 280px;
    
    cursor: pointer;
}

.z-a-ordered {
    display: none;
}

.stuff-box-container:hover {
    scale: 1.015;
    transition: 0.2s;
}

.stuff-box-container div {
    /* border: 3px solid black; */
    min-height: 50px;
    width: 100%;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    
    overflow: hidden;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
}

.stuff-box-container-active div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stuff-box-container div .new-stuff-plus {
    /* border: 3px solid red; */
    vertical-align: middle;
    font-size: 1.5rem;
    padding: 0 0.1rem;
    /* line-height: 2; */
}

/* .stuff-container-child h3 {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
} */


.stuff-container-child-bottom.active {
    padding: 0.5rem;
    height: fit-content;
}

.stuff-box-container.active {
    min-width: 100%;
    text-align: start;
    flex-direction: row;
    justify-content: start;
    /* height: fit-content; */
    height: 37px;
    padding: 0.2rem 1rem;
    margin: 0.2rem 0;
    border-radius: 7px;
}

.stuff-box-container-no-stuff.active {
    height: 60px;
    padding-bottom: 0.5rem;
}

.stuff-box-container.active svg {
    width: 30px;
    height: 30px;
}

.stuff-box-container.active div {
    min-height: inherit;
    width: 90%;
    display: block;
    text-overflow: inherit;
    margin-left: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 532px) {
    .stuff-box-container-no-stuff.active {
        padding-bottom: 0;
    }
}

@media (min-width: 700px) {
    .stuff-container {
        height: calc(100% - 100px);
    }
}


/*================
  company
==================*/

.company-container {
    /* border: 3px solid red; */
    background-color: rgb(0, 80, 52);
    /* background: linear-gradient(
        rgb(130, 202, 173),
        rgba(0, 120, 30, 0.7),
        rgb(0, 80, 52)
    ); */
    height: calc(100% - 80px);
    padding: 1rem;
    overflow-y: scroll;
}

.company-container::-webkit-scrollbar {
    width: 5px;
}

.company-container::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.company-container::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.stuff-container-parent:last-of-type {
    margin-bottom: 0;
}
 
.company-container-child-bottom {
    /* border: 3px solid blue; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    /* justify-content: space-evenly; */
    flex-wrap: wrap;
}

.company-container-child-bottom a {
    color: black;
}
.company-container-child-bottom a:focus,
.company-container-child-bottom a:hover {
    color: black;
}

.company-box-container-frame {
    /* border: 3px solid purple; */
    margin: 1rem;

    /* flex: 1 1 300px; */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 250px;
}


.company-box-container {
    /* border: 3px solid orangered; */
    background-color: whitesmoke;
    text-align: center;
    /* min-width: 270px; */
    /* width: 100%; */
    /* max-width: 350px; */
    /* width: 270px; */
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    /* padding-bottom: 2rem; */
    /* margin: 1rem; */
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgb(30, 30, 30);
    
    cursor: pointer;
}

.company-box-container:hover {
    scale: 1.015;
    transition: 0.2s;
}

.company-box-container .company-logo {
    /* border: 3px solid purple; */
    /* height: 100%; */
    height: 70px;
    width: 100%;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.company-box-container .company-logo img {
    /* border: 3px solid red; */
    display: block;
    /* width: 100%; */
    max-width: 100%;
    /* height: 100%; */
    max-height: 100%;
    object-fit: cover;
}

.company-box-container .company-name {
    /* border: 3px solid black; */
    /* font-weight: bold; */
    text-decoration: underline;
    width: fit-content;
    margin: 1rem auto 0.4rem;
    /* overflow: hidden; */
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
}

@media (min-width: 700px) {
    .company-container {
        height: calc(100% - 100px);
    }
}


/*================
  help
==================*/

.main-help-container {
    /* border: 3px solid red; */
    height: calc(100% - 80px);
}

.main-help-container-box {
    /* border: 3px solid yellow; */
    height: 100%;
    overflow-y: scroll;
}

.main-help-container-box::-webkit-scrollbar {
    width: 5px;
}

.main-help-container-box::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.main-help-container-box::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.main-help-container-box-links {
    background-color: rgb(0, 80, 52);
    /* border: 3px solid green; */
    padding: 1.5rem 1rem 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.main-help-container-box-links li {
    /* border: 3px solid red; */
    color: whitesmoke;
    width: 100%;
    max-width: 700px;
    padding-left: 1rem;
    padding-bottom: 1rem;
    margin: 0 auto;
}

.main-help-container-box-links li:hover {
    scale: 1.01;
    transition: 0.2s;
}
.main-help-container-box-links li a {
    /* border: 3px solid lawngreen; */
    color: whitesmoke;
    text-decoration: underline;
    cursor: pointer;
}

.main-help-container-box-category {
    /* border: 3px solid blue; */
    background-color: rgb(0, 80, 52);
    padding: 1rem;
}


/*================
  products
==================*/

.proof-container,
.products-container {
    /* border: 3px solid red; */
    background-color: rgb(0, 80, 52);
    /* background: linear-gradient(
        rgb(130, 202, 173),
        rgba(0, 120, 30, 0.7),
        rgb(0, 80, 52)
    ); */
    height: calc(100% - 80px);
    /* height: 100%; */
    /* height: 250px; */
    /* overflow-y: hidden; */

    padding: 1rem;
    padding-top: 0.7rem;
    /* overflow: hidden; */
}

.products-container-parent-container {
    /* border: 3px solid pink; */
    /* RECHNUNG 100% (= .products-container) - 37px (= .filter-search-header inkl. margin) - 37px (= .home-file-path-container) */
    height: calc(100% - 37px - 37px);
    /* height: 100%; */
    /* padding-bottom: 100px; */
}

.products-container-parent-container-proof {
    /* border: 3px solid pink; */
    /* RECHNUNG 100% (= .products-container) - 37px (= .filter-search-header inkl. margin) - 13px (= evtl. margin) */
    height: calc(100% - 37px - 13px);
    /* height: 100%; */
    /* padding-bottom: 100px; */
    /* margin-bottom: 0.5rem; */
}

.products-container-parent {
    /* border: 3px solid yellow; */
    /* background-color: rgb(130, 250, 170); */
    position: relative;
    height: 100%;
    
    width: 100%;
    overflow-x: scroll;
    /* padding: 2rem 1rem; */
    margin-bottom: 2rem;
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */
}
.products-container-parent-import {
    /* border: 3px solid blue; */
    background-color: white;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: scroll;
    z-index: 999;
    border-radius: 0 0 10px 10px;
    padding: 1rem;
    padding-top: 0;
    display: none;
}
.products-container-parent-import.show {
    display: inherit;
}
/* 
.products-container-parent-proof {
    margin-bottom: 0.5rem;
} */

.products-container-parent-import::-webkit-scrollbar,
.products-container-parent::-webkit-scrollbar {
    height: 5px;
}

.products-container-parent-import::-webkit-scrollbar-track,
.products-container-parent::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.products-container-parent-import::-webkit-scrollbar-thumb,
.products-container-parent::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.products-container-child-import,
.products-container-child {
    /* border: 3px solid brown; */
    min-width: fit-content;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.products-container-parent:last-of-type {
    margin-bottom: 0;
}

.products-container-header {
    /* border: 3px solid pink; */
    background-color: rgb(20, 20, 20);
    color: whitesmoke;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* width: fit-content; */
    height: 50px;
    padding: 0 1rem;
    border-radius: 10px 10px 0 0;
    letter-spacing: 0.3px;
}

.products-container-header-child-list,
.products-container-header-child {
    /* border: 3px solid red; */
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 120px;
    cursor: pointer;
}
.products-container-header-child-proof {
    /* border: 3px solid red; */
    text-align: center;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: center;
    width: 120px;
    cursor: pointer;
    line-height: 1.1;
}

.products-container-header-child-top {
    /* border: 3px solid green; */
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 120px;
    cursor: pointer;
}

.products-container-header-child-top-proof {
    /* border: 3px solid blue; */
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 120px;
    cursor: pointer;
}

.open-current-product {
    /* border: 3px solid blue; */
}

.html-span-no-results-home-start-check {
    border-bottom: 1pt solid rgba(30, 30, 30, 0.5);
}

.html-span-no-results-home-start {
    border-radius: 0 0 10px 10px;
}

.no-results,
.no-results-home-start,
.no-results-home-search {
    /* border: 3px solid blue; */
    color: rgb(70, 70, 70);
    min-width: fit-content;
    padding-left: 1.2rem;
}

.no-results-home-start span {
    font-size: 1.5rem;
    /* font-weight: bold; */
    margin: 0 0.2rem;
}

.products-list-product-no-results {
    display: none;
}

.products-container-header-child.hide {
    display: none;
}
.products-container-header-child-top.hide {
    display: none;
}

.hideaway {
    display: none;
}

.product-checkbox {
    /* color: rgb(0, 150, 0); */
    /* accent-color: rgb(20, 150, 80); */

    /* accent-color: rgb(10, 150, 50); */
    /* padding: 0.1rem; */
    /* width: 22px; */
    /* height: 22px; */
    /* cursor: pointer; */
}

.product-checkbox {
    opacity: 0;
}

.product-checkbox-label,
.product-checkbox-label-header {
    /* border: 3px solid purple; */
    position: relative;
    padding-left: 40px;
    font-size: 1.6rem;
    line-height: 1rem;
    color: white;
    cursor: pointer;
}

.product-checkbox-label-header {
    display: none;
}

.product-checkbox-label::before,
.product-checkbox-label-header::before {
    /* border: 1pt solid transparent; */
    /* border: 3px solid lawngreen; */
    content: "";
    position: absolute;
    /* top: -11px; */
    top: -6px;
    left: 0;
    width: 22px;
    height: 22px;
    /* border: 1px solid rgb(50, 50, 50); */
    border-radius: 50%;
    background-color: whitesmoke;
    box-shadow: 0 0 5px black;
}

.product-checkbox-label::after,
.product-checkbox-label-header::after {
    content: "";
    position: absolute;
    /* top: -8px; */
    top: -3px;
    left: 8px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transition: 0.2s ease;

    transform: scale(0);
    opacity: 0;
}

.product-checkbox.checked+.product-checkbox-label::before,
.product-checkbox.checked+.product-checkbox-label-header::before {
    background-color: rgb(10, 150, 50);
}

.product-checkbox.checked+.product-checkbox-label::after,
.product-checkbox.checked+.product-checkbox-label-header::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.checkbox-container {
    /* border: 3px solid lawngreen; */
    width: 50px;
    /* padding-left: 1rem; */

    display: none;
}

.state-col {
    /* border: 3px solid purple; */
    color: whitesmoke;
    width: 130px;
}

.state-col-child {
    /* border: 3px solid blue; */
    text-align: center;
    /* vertical-align: top; */
}

.state-col .state-col-child-pdf {
    height: 35px !important;
    max-height: 35px !important;
    padding: 0.5rem 0.5rem 0.8rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-state-positiv {
    /* border: 3px solid blue; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proof-state-positiv svg {
    /* border: 3px solid purple; */
    color: rgb(0, 130, 20);
    background-color: white;
    /* box-shadow: 0 0 3px rgb(0, 130, 20); */
    /* box-shadow: 0 0 1px rgb(20, 20, 20); */
    border-radius: 10px;
    /* padding: 6px 6px 8px; */
    padding: 3px 3px 4px;
    outline: none;
}

.proof-state-neutral {
    /* border: 3px solid blue; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proof-state-neutral svg {
    /* border: 3px solid purple; */
    color: rgb(230, 150, 0);
    background-color: white;
    /* box-shadow: 0 0 3px rgb(255, 90, 0); */
    /* box-shadow: 0 0 1px rgb(20, 20, 20); */
    border-radius: 10px;
    /* padding: 6px 6px 8px; */
    padding: 3px 3px 4px;
    outline: none;
}

.proof-state-negativ {
    /* border: 3px solid blue; */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proof-state-negativ svg {
    /* border: 3px solid purple; */
    color: rgb(200, 0, 0);
    background-color: white;
    /* box-shadow: 0 0 3px rgb(200, 0, 0); */
    /* box-shadow: 0 0 1px rgb(20, 20, 20); */
    border-radius: 10px;
    /* padding: 6px 6px 8px; */
    padding: 3px 3px 4px;

    outline: none;
}

.state-col-geprüft {
    /* border: 3px solid red; */
    background-color: rgb(0, 150, 0);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.faq-child-geprüft-proofed,
.faq-child-geprüft b {
    font-weight: inherit !important;
    background-color: rgb(0, 150, 0);
    color: whitesmoke;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.faq-child-geprüft-proofed {
    padding: 0.2rem 0.4rem;
}

.state-col-demnächst {
    /* border: 3px solid red; */
    color: black;
    background-color: rgb(255, 165, 0);
    background-color: rgb(255, 210, 0);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.profil-child-next b,
.faq-child-demnächst b {
    font-weight: inherit;
    background-color: rgb(255, 210, 0);
    color: black;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.state-col-zuprüfen {
    /* border: 3px solid red; */
    background-color: rgb(220, 0, 0);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
    white-space: nowrap;
}
.faq-child-zu-prüfen b {
    font-weight: inherit;
    background-color: rgb(220, 0, 0);
    color: whitesmoke;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.state-col-abgelaufen {
    /* border: 3px solid red; */
    background-color: rgb(30, 30, 30);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.faq-child-abgelaufen b {
    font-weight: inherit;
    background-color: rgb(30, 30, 30);
    color: whitesmoke;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.state-col-defekt {
    /* border: 3px solid red; */
    background-color: rgb(40, 60, 110);
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.faq-child-defekt-proofed,
.faq-child-defekt b {
    font-weight: inherit !important;
    background-color: rgb(40, 60, 110);
    color: whitesmoke;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}
.faq-child-defekt-proofed {
    padding: 0.2rem 0.4rem;
}

.open-current-product {
    width: 120px;
}

.small-container {
    width: 50px;
}

.middle-container {
    width: 135px;
}

.big-container {
    width: 145px !important;
}

.giant-container {
    width: 200px !important;
}

/* .law-col, */
.proof-state-container {
    width: 120px !important;
}

.timeline-col {
    width: 125px !important;
}


.law-col {
    width: 130px !important;
    padding: 0 5px;
}

.qrcode-col,
.buy-date-col {
    width: 135px !important;
}

.company-col {
    width: 150px !important;
}

.file-col {
    width: 160px !important;
    line-height: 1;
}
/* .file-col {
    width: 135px !important;
} */

.product-col {
    width: 170px !important;
}

.category-col {
    width: 150px !important;
    min-width: 150px !important;
}

.stuff-col,
.proof-person-col {
    width: 170px !important;
}

.last-proof-col-proof {
    display: none;
}

.filter-search-header {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* margin: 0 0.2rem 0.7rem; */
    margin: 0 0.2rem;

    /* display: none; */
}

.filter-search-header-proof {
    /* border: 3px solid red; */
    margin-bottom: 1rem;
}

.filter-container-proof-box,
.filter-container-box {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: row;
}


.filter-container,
.filter-container-proof,
/* .create-pdf-container, */
.edit-container,
.search-container {
    /* border: 3px solid red; */
    /* background-color: rgb(20, 20, 20); */
    background-color: rgb(245, 245, 245);
    /* color: whitesmoke; */
    color: rgb(20, 20, 20);
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
}
/* .send-chat-msg, */
.create-pdf-container,
.create-pdf-container-my-products {
    font-size: 0.9rem;
    text-align: center;
    /* background-color: rgba(30, 110, 150); */
    /* background-color: rgb(65, 135, 255); */
    background-color: rgb(30, 65, 160);
    background-color: rgb(37, 37, 37);
    background-color: rgb(0, 150, 0);
    background-color: rgb(20, 150, 80);
    /* text-transform: uppercase; */
    color: whitesmoke;
    width: 100%;
    max-width: 160px;
    /* margin: 1.3rem auto; */
    border: none;
    border-radius: 50px;
    /* box-shadow: 2px 2px 5px rgb(50, 50, 50); */
    padding: 0.7rem 1.3rem;
    letter-spacing: 0.8px;
    cursor: pointer;
}
.send-chat-msg {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: inherit;
    width: 100%;
    max-width: 180px;
    margin: 1rem auto 0;
    height: fit-content;
    padding: 0.6rem 1.3rem;
    /* border: none; */
}

#logout-btn {
    text-transform: inherit;
    padding: 0.6rem 1.3rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#logout-btn svg {
    margin-right: 10px;
}

.send-chat-msg svg {
    margin-right: 10px;
    /* margin-right: 5px; */
}

.filter-container,
.filter-container-proof {
    /* border: 3px solid red; */
    cursor: pointer;
    padding-right: 0;
}

/* .create-pdf-container-my-products,
.create-pdf-container {
    min-width: fit-content;
    margin-left: 0.7rem;
    cursor: pointer;
    letter-spacing: 0;
} */
/* .create-pdf-container-my-products b,
.create-pdf-container b {
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 3px;
} */

.filter-header {
    display: none;
}

.filter-inherit,
.filter-inherit-proof {
    position: relative;
    width: fit-content;
    background-color: rgb(20, 20, 20);
    color: whitesmoke;
    border: 1px solid white;
    /* border: 3px solid green; */
    box-shadow: 0 0 2px whitesmoke;
    margin-left: 0.5rem;
    padding: 0.7rem;
    padding-right: 0;
    display: none;
    /* display: none !important; */
}

/* both .filter-inherit are IMPORTANT */
.filter-inherit.show,
.filter-inherit-proof.show {
    display: inherit;
    padding: 0.5rem 0.7rem;
}

.filter-inherit.active,
.filter-inherit-proof.active {
    display: none;
}

/* both .filter-inherit are IMPORTANT */

.filter-exit-one {
    border-bottom: 1px solid rgb(245, 245, 245);
    width: 33px;
    position: absolute;
    bottom: 17px;
    left: 4px;
    transform: rotate(-40deg);
}

.filter-exit-two {
    border-bottom: 1px solid rgb(245, 245, 245);
    width: 33px;
    position: absolute;
    bottom: 17px;
    right: 3px;
    transform: rotate(40deg);
}

.edit-container {
    /* border: 3px solid purple; */
    background-color: transparent;
    color: whitesmoke;
    min-width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    padding-left: 0.5rem;
    /* margin-left: 0.7rem; */
    /* margin-left: auto; */
}

.create-product-box-child-header-child-product-choose,
.create-product-box-child-header-child-product-add,
.create-product-box-child-header-child-choose-file,
.create-product-box-child-header-child-add-file {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50px;
    cursor: pointer;
}

.create-product-box-child-header-child-import-products,
.create-product-box-child-header-child-move,
.create-product-box-child-header-child-save-proof,
.create-product-box-child-header-child-save-copy,
.create-product-box-child-header-child-save-edit {
    display: none;
}

.save-copy-text {
    margin: 0 5px;
}
.save-copy-text-small {
    display: inherit;
}
.save-copy-text-big {
    display: none;
}

.create-product-box-child-header-child-add-file {
    width: fit-content;
}

.create-product-box-child-header-child-product-choose:hover,
.create-product-box-child-header-child-product-add:hover,
.create-product-box-child-header-child-choose-file:hover {
/* .create-product-box-child-header-child-add-file:hover { */
    background-color: rgba(200, 200, 200, 0.1);
}

.search-container {
    /* border: 3px solid orchid; */
    position: relative;
    margin-left: 0.5rem;
    width: 100%;
    max-width: 600px;
}

.search-container.active {
    margin: 0 1rem;
    display: none;
}

.search-container.active .filter-search-header {
    margin: 0 0.5rem 0.7rem;
}

.search-product {
    margin: 0;
    background-color: rgb(230, 230, 230);
}

.filter-container:hover,
.filter-container:focus,
/* .create-pdf-container:hover,
.create-pdf-container:focus, */
.filter-container-proof:hover,
.filter-container-proof:focus {
    scale: 1.01;
    box-shadow: 0 0 2px whitesmoke;
}
.send-chat-msg:hover,
.send-chat-msg:focus,
.create-pdf-container:hover,
.create-pdf-container:focus,
.create-pdf-container-my-products:hover,
.create-pdf-container-my-products:focus {
    scale: 1.03;
    transition: 0.2s;
}

.filter-container.active,
.filter-container-proof.active {
    background-color: rgb(20, 20, 20);
    color: whitesmoke;
    border: 1px solid white;
    box-shadow: 0 0 2px whitesmoke;
}

.filter-icon,
.search-icon {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 0.7rem;
}

.search-loading {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 0.7rem;

    display: none;
}

.filter-icon-slider-inherit {
    margin: 0;
}

.search-icon-filter.active {
    display: none;
}

.search-input-container {
    /* border: 3px solid orangered; */
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin: 0;
    /* margin-right: 1.7rem; */
}

.search-input-container.loading {
}

.search-input {
    font-size: 1rem;
    background-color: transparent;
    color: whitesmoke;
    color: rgb(20, 20, 20);
    width: 100%;
    border: none;
    outline: none;
    /* border: 3px solid green; */
}

.search-icon-x {
    /* border: 3px solid green; */
    color: rgb(70, 70, 70);
    margin: 0 0 0 0.5rem;
    cursor: pointer;

    display: none;
}

.search-icon-x:hover svg {
    scale: 1.05;
}

.search-input::placeholder {
    color: rgba(245, 245, 245, 0.8);
    color: rgba(20, 20, 20, 0.8);
}

.product-category {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.product-category-header {
    /* border: 3px solid yellow; */
    text-align: center;
    width: fit-content;
}

.product-category-header-small {
    max-width: 120px;
}

.filter-arrow-icon {
    /* border: 3px solid orchid; */
    font-weight: bold;
    /* display: flex; */
    flex-direction: row;
    align-items: center;
    margin-left: 0.5rem;
    display: none;
}

.filter-arrow-icon.upsidedown {
    transform: rotate(180deg);
}

.products-container-header-child:hover .filter-arrow-icon,
.products-container-header-child:focus .filter-arrow-icon {
    display: flex;
}

.filter-icon-full,
.filter-icon-empty {
    display: none;
}

.products-list-home {
    /* border: 3px solid purple; */
    /* max-height: 45vh; */
    /* min-height: 220px; */
    /* max-height: 1%; */
    max-height: calc(100% - 50px);
    /* height: 100%; */
    overflow-y: scroll;
    /* -ms-overflow-style: none; */
    /* padding-bottom: 70px; */
    /* scrollbar-width: none; */
    /* display: none; */
}

.products-list-home::-webkit-scrollbar {
    width: 5px;
}

/* .products-list-home::-webkit-scrollbar {
    display: none;
} */

.products-list-home::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.products-list-home::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.products-list-container,
.products-list-container-choose-import,
.products-list-container-choose {
    /* border: 3px solid aqua; */
    width: 100%;
    border-radius: 0 0 10px 10px;
}

.products-list-product {
    /* border: 3px solid orangered; */
    background-color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* width: 100%; */
    min-height: 70px;
    height: 70px;
    padding: 0 1rem;
}
.products-list-product-own {
    /* border: 3px solid orangered; */
    background-color: white;
    color: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* width: 100%; */
    min-height: 70px;
    height: 70px;
    /* padding: 0 1rem; */
    margin-top: 1.5rem;
    margin-left: 0.5rem;
}

.products-list-product:has(.products-container-header-child:hover) {
    background-color: rgb(230, 230, 230);
    transition: 0.2s;
}
.products-list-product:has(.products-container-header-child-proof:hover) {
    background-color: rgb(230, 230, 230);
    transition: 0.2s;
}

.products-list-product.checked {
    background-color: rgb(230, 230, 230);
}

/* .products-list-even {
    background-color: white;
} */

/* .products-list-odd {
    background-color: rgb(225, 225, 225);
} */

.products-list-product:last-of-type {
    margin-bottom: 0;
    border-radius: 0 0 10px 10px;
}

.filter-box,
.delete-box,
.proofed-product-box,
.create-stuff-box,
.create-product-box {
    /* border: 3px solid green; */
    background-color: whitesmoke;
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;

    /* display: flex; */
    /* align-items: center;
    justify-content: center; */

    width: 92%;
    max-width: 800px;

    /* height = 100% - .header (= 80px) - (4rem) = 2rem margin oben und unten */
    height: calc(100% - 80px - 4rem);
    /* min-height: calc(100% - 80px - 4rem); */
    /* max-height: 650px; */
    max-height: 905px;
    /* max-height: fit-content; */


    /* max-height: 70vh; */
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 5px rgb(100, 100, 100);

    opacity: 0;
    z-index: -99999999999999;
}

.filter-box,
.delete-box,
.proofed-product-box {
    /* max-height: 905px; */
    max-height: 650px;
}

.create-stuff-box {
    /* max-height: 905px; */
    max-height: 530px;
}

.delete-box {
    max-width: 450px;
}
.proofed-product-box {
    /* max-width: 650px; */
}

.filter-box.resize,
.create-product-box.resize {
    /* border: 3px solid red; */
    min-height: 415px;
    height: fit-content;
}

/* .filter-box {
    opacity: 1;
    z-index: 97;
    position: fixed;
} */

/* .create-stuff-box {
    opacity: 1;
    z-index: 97;
    position: fixed;
} */

/* .create-product-box {
    opacity: 1;
    z-index: 97;
    position: fixed;
} */

/* .delete-box {
    opacity: 1;
    z-index: 97;
    position: fixed;
} */

/* .proofed-product-box {
    opacity: 1;
    z-index: 97;
    position: fixed;
} */

.filter-box.show,
.delete-box.show,
.proofed-product-box.show,
.create-stuff-box.show,
.create-product-box.show {
    opacity: 1;
    z-index: 97;
    position: fixed;
    /* transition: 0.2s; */
}

.filter-box-parent,
.delete-box-parent,
.proofed-product-box-parent,
.create-stuff-box-parent,
.create-product-box-parent {
    /* border: 3px solid black; */
    height: 100%;
    /* height: fit-content; */
    position: relative;
    /* max-height: 650px; */
    max-height: 905px;
    /* max-height: fit-content; */
    /* max-height: 100%; */



    /* display: flex;
    flex-direction: column;
    align-items: center; */


    /* overflow: hidden; */
}

.filter-box-parent,
.delete-box-parent,
.proofed-product-box-parent {
    /* max-height: 905px; */
    max-height: 650px;
}

.create-stuff-box-parent {
    /* max-height: 905px; */
    max-height: 530px;
}

.create-stuff-box-parent {
    /* border: 3px solid blue; */
    height: calc(100% - 60px);
}

.create-stuff-box-parent.hide-delete-btn {
    height: 100%;
}

.stuff-box-info {
    /* border: 3px solid green; */
    height: 100%;
    overflow-y: hidden;
}

.filter-box-child,
.filter-box-child-proof,
.delete-box-child,
.proofed-product-box-child,
.create-stuff-box-child,
.create-product-box-child {
    /* border: 3px solid orangered; */
    /* position: relative; */
    width: 100%;
    /* max-height: 60vh; */
    height: calc(100% - 70px);
    padding: 1rem;
    padding-top: 1.5rem;

    overflow-y: scroll;
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */
}

.filter-box-child,
.filter-box-child-proof {
    display: none;
}

.filter-box-child::-webkit-scrollbar,
.filter-box-child-proof::-webkit-scrollbar {
    width: 5px;
}

.filter-box-child::-webkit-scrollbar-track,
.filter-box-child-proof::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.filter-box-child::-webkit-scrollbar-thumb,
.filter-box-child-proof::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}


.filter-box-child-proof-child {
    /* border: 3px solid red; */
    /* width: 47%; */
}

.filter-box-child::-webkit-scrollbar {
    /* display: none; */
    /* border-radius: 10px; */
}

.filter-box-child-header,
.delete-box-child-header,
.proofed-product-box-child-header,
.create-stuff-box-child-header,
.create-product-box-child-header {
    /* border: 3px solid red; */
    background-color: rgb(220, 220, 220);
    background-color: rgb(20, 150, 80);
    background-color: rgb(220, 235, 225);
    background-color: rgb(0, 80, 52);
    color: rgb(0, 80, 52);
    color: rgb(50, 50, 50);
    color: rgb(20, 20, 20);
    color: whitesmoke;
    color: white;
    height: 70px;
    /* font-weight: bold; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* position: fixed; */
    /* width: 80%; */
    /* max-width: 600px; */
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0; */
    padding: 0.5rem;
    border-radius: 10px 10px 0 0;
}

.create-product-box-child-header {
    padding: 0.5rem 0.4rem;
}

.filter-box-child-header-child,
.delete-box-child-header-child,
.proofed-product-box-child-header-child,
.create-stuff-box-child-header-child,
.create-product-box-child-header-child,
.choose-all-header-container,
.choose-all-header-container-proof,
.choose-none-header-container,
.choose-none-header-container-proof,
.exit-header-container-proof,
.exit-header-container {
    /* border: 3px solid yellow; */
    /* border: 1px solid rgb(20, 20, 20); */
    /* background-color: whitesmoke; */
    background-color: rgb(20, 150, 80);
    /* background-color: rgb(69, 125, 88); */
    /* background-color: rgb(220, 235, 225); */
    /* background-color: rgb(220, 220, 220); */

    border-radius: 50px;
    padding: 0.4rem 0.4rem !important;
    box-shadow: 0 0 2px rgb(20, 20, 20);
    box-shadow: 0 0 2px whitesmoke;
    /* font-weight: bold; */
    cursor: pointer;
}

.filter-box-child-header-child-exit,
.filter-box-child-header-child-exit-proof,
.filter-box-child-header-child-save,
.filter-box-child-header-child-save-proof {
    display: none;
}

.create-stuff-box-child-header-child-save {
    display: none;
}

.choose-all-header-container,
.choose-all-header-container-proof,
.choose-none-header-container,
.choose-none-header-container-proof,
.exit-header-container-proof,
.exit-header-container {
    color: whitesmoke;
    min-width: fit-content;
    margin: 2.5px 0;
    padding: 0.4rem 0.7rem;
    letter-spacing: 0.5px;

    display: none;
}

.choose-add-box-container-file {
    /* border: 3px solid yellow; */
    background-color: transparent;
    color: whitesmoke;
    min-width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    padding-left: 0.5rem;
    /* margin-left: 0.7rem; */
    /* margin-left: auto; */
}

.create-product-box-child-header-child-choose,
.create-product-box-child-header-child-add {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 37px;
    height: 37px;
    border-radius: 50px;
    cursor: pointer;
}

.create-product-box-child-header-child-choose:hover,
.create-product-box-child-header-child-add:hover {
    background-color: rgba(200, 200, 200, 0.1);
}

.filter-box-child-header-child:hover,
.delete-box-child-header-child:hover,
.proofed-product-box-child-header-child:hover,
.create-stuff-box-child-header-child:hover,
.create-product-box-child-header-child:hover {
    scale: 1.01;
}

.choose-add-box-container-file,
.create-product-box-child-header-child-collect-all,
.create-product-box-child-header-child-discollect-all,
.create-product-box-child-header-child-choose-exit,
.create-product-box-child-header-child-import-exit,
.create-product-box-child-header-child-new-file-exit,
.create-product-box-child-header-child-file,
.create-product-box-child-header-child-save {
    display: none;
}


.filter-box-child-top-proof,
.filter-box-child-top {
    /* border: 3px solid rebeccapurple; */
    border-bottom: 2px solid rgb(20, 20, 20);
    padding: 0 0.5rem 0.2rem;
    margin-bottom: 0.7rem;
}

.filter-box-child-top svg {
    margin-bottom: -3px;
    color: rgb(255, 175, 0);
}

.filter-box-child-body {
    /* border: 3px solid green; */
    /* display: grid; */
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.7rem;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    
    /* grid-template-rows: repeat(12, auto); */
    /* grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); */
}

.filter-box-child-body-next-expired-top {
    margin-bottom: 0.5rem;
}
.filter-box-child-body-next-expired-bottom {
    margin-bottom: -0.5rem;
}

.filter-box-child-body span {
    /* border: 3px solid green; */
    display: block;
}

.filter-box-child-body .filter-box-child-body-child-disable {
    /* border: 2px solid red; */
    box-shadow: none;
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;

    display: none;
}

.filter-box-child-body-proof {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}
.filter-box-child-body-proof-result {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0.7rem;
}
.filter-box-child-body-proof-time {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}

.filter-box-child-body div {
    /* border: 3px solid red; */
    background-color: rgb(20, 150, 80);
    background-color: rgb(0, 80, 52);
    color: whitesmoke;
    width: fit-content;
    padding: 0.5rem 1.3rem;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 2px rgb(70, 70, 70);
}

.profilinfo-child-input-container:has(.filter-box-child-body-child-next-expired-time-period) {
    /* border: 3px solid red !important; */
    max-width: 180px !important;
}

.filter-box-child-body .filter-box-child-body-child-proofed {
    background-color: rgb(0, 150, 0);
    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-next {
    color: black;
    background-color: rgb(255, 165, 0);
    background-color: rgb(255, 210, 0);
    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-to-proof {
    background-color: rgb(220, 0, 0);
    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-expired {

    color: whitesmoke;
    background-color: rgb(30, 30, 30);

    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-broken {

    color: whitesmoke;
    background-color: rgb(40, 60, 110);

    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-next-expired {
    border: 2px solid rgb(100, 0, 100);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);
    height: 39px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1.3rem;
    border-radius: 50px;
}

.filter-box-child-body .filter-box-child-body-child-proofed.hide-filter {
    border: 2px solid rgb(0, 150, 0);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);
}
.filter-box-child-body .filter-box-child-body-child-next.hide-filter {
    border: 2px solid rgb(255, 165, 0);
    border: 2px solid rgb(255, 210, 0);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);
}
.filter-box-child-body .filter-box-child-body-child-to-proof.hide-filter {
    border: 2px solid rgb(220, 0, 0);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);
}
.filter-box-child-body .filter-box-child-body-child-expired.hide-filter {
    border: 2px solid rgb(30, 30, 30);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);

    /* color: whitesmoke;
    background-color: rgb(30, 30, 30); */

    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-broken.hide-filter {
    border: 2px solid rgb(40, 60, 110);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);

    /* color: whitesmoke;
    background-color: rgb(40, 60, 110); */

    border-radius: 50px;
}
.filter-box-child-body .filter-box-child-body-child-next-expired.hide-filter {
    color: whitesmoke;
    background-color: rgb(100, 0, 100);
    border-radius: 50px;
}

.filter-box-child-body .filter-box-child-body-child-proofed.next-expired-active,
.filter-box-child-body .filter-box-child-body-child-next.next-expired-active,
.filter-box-child-body .filter-box-child-body-child-to-proof.next-expired-active,
.filter-box-child-body .filter-box-child-body-child-expired.next-expired-active,
.filter-box-child-body .filter-box-child-body-child-broken.next-expired-active {
    color: white;
    color: black;
    color: rgb(70, 70, 70);
    background-color: rgb(210, 210, 210);
    border: 2px solid rgb(190, 190, 190);
    border-radius: 50px;
}

.filter-box-child-body-child.hide-filter {
    background-color: rgb(220, 235, 225);
    background-color: rgb(230, 235, 233);
    color: rgb(20, 20, 20);
}

.filter-box-child-body div:hover {
    scale: 1.02;
}

.delete-box-home,
.proofed-product-box-home,
.product-box-home,
.product-box-file,
.product-choose-box,
.product-box-all,
.product-box-import,
.product-box-proof,
.product-box-edit,
.stuff-box-info,
.product-box-own {
    /* border: 3px solid yellow; */
    height: calc(100% - 70px);
    min-height: fit-content;
}

/* .product-box-home, */
.product-box-file,
.product-choose-box,
.product-box-proof,
.product-box-edit,
.product-box-all,
.product-box-import,
.product-box-own {

    display: none;
}

.home-file-path-container {
    /* border: 3px solid red; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 37px;
    margin: 0.1rem 0;
}

.root-container,
.root-container-home,
.root-container-home-placeholder {
    /* border: 3px solid lawngreen; */
    font-size: 0.9rem;
    height: 46px;
    /* max-height: fit-content; */
    /* height: 50px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem;
}

.root-container-proof,
.root-container-edit {
    /* border: 3px solid red; */
    color: whitesmoke;
    background-color: rgb(20, 20, 20);
    /* display: none; */
}

.root-proof-child-number,
.root-edit-child-number {
    /* border: 3px solid blue; */
    font-weight: bold;
    color: black;
    background-color: whitesmoke;
    height: fit-content;
    margin: auto 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 50px;
}

.root-child-move {
    /* border: 3px solid lawngreen; */
    font-size: 1rem;
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;

    display: none;
}

.root-container-home {
    /* border: 3px solid yellow; */
    width: calc(100% - 130px);

    height: 37px;
    color: white;

    display: none;
}

.root-container-home-placeholder {
    height: 37px;
    color: white;
}

.root-container {
    position: relative;
}

.root-container-header {
    /* border: 3px solid yellow; */
    background-color: white;
    color: #005034;
    font-weight: 600;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    letter-spacing: 0.5px;

    display: none;
}
.root-container-header.show {
    display: flex;
}

.root-container .arrow-back,
.root-container-home .arrow-back-home,
.root-container .arrow-back-file,
.root-container .arrow-back-first-step,
.root-container .arrow-back-sec-step {
    /* border: 3px solid aqua; */
    color: rgb(50, 50, 50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: -0.3rem;
    margin-right: -0.3rem;
    margin-bottom: -0.2rem;
}

.root-container-home .arrow-back-home {
    margin-bottom: 0;
}

.root-container-home .arrow-back-home {
    color: white;
}

/* .root-container .arrow-back-first-step, */
.root-container .arrow-back-file,
.root-container .arrow-back-sec-step {
    display: none;
}

.root-container .arrow-back:hover,
.root-container .arrow-back-first-step:hover,
.root-container .arrow-back-sec-step:hover {
    color: rgb(0, 80, 52);
}

.root-container-home .arrow-back-home:hover,
.root-container-home .arrow-back-file-home:hover {
    /* color: rgb(20, 150, 80); */
    color: rgb(220, 235, 225);
}

.root-container .span-split,
.root-container-home .span-split-home {
    font-size: 1.3rem;
    font-weight: inherit;
    /* margin: -0.2rem 0.7rem 0 0.2rem; */
    margin: -0.2rem 0.5rem 0 0.2rem;
}

.root-container .span-product-home {
    /* border: 3px solid purple; */
    padding: 10px 0.5rem;
}

.root-container .span-product-info {
    display: none;
}

.span-hover:hover {
    color: rgb(0, 80, 52);
    cursor: pointer;
}

.span-hover-home:hover {
    color: rgb(220, 235, 225);
    cursor: pointer;
}

.root-container .span-file-path-container,
.root-container-home .span-file-path-container-home {
    /* border: 3px solid purple; */
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    overflow-x: hidden;
}

.root-container .span-file-path-parent,
.root-container-home .span-file-path-parent-home {
    /* border: 3px solid green; */
    height: 100%;
    width: fit-content;

    display: flex;
    flex-direction: row;
    align-items: center;

    margin-right: auto;
    
    overflow-x: scroll;
}

.root-container .span-file-path-parent::-webkit-scrollbar,
.root-container-home .span-file-path-parent-home::-webkit-scrollbar {
    display: none;
}

.span-show-path-container,
.span-show-path-container-home {
    /* border: 3px solid red; */
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    white-space: nowrap;
}

.span-show-path-container-home svg {
    color: rgb(220, 220, 220);
}

.span-show-path,
.span-show-path-home {
    margin-left: 0.5rem;
}

.span-file-creation {
    margin: 0;
}

.span-file-creation-home {
    min-width: fit-content;
    margin: 0;
}

.span-slash,
.span-slash-home {
    /* border: 3px solid pink; */
    margin: 0 0.3rem;
}

.delete-box-container,
.proofed-product-box-container {
    /* border: 3px solid purple; */
    position: relative;
    height: 100%;
    padding: 1rem;
}

.delete-box-container-parent,
.proofed-product-box-container-parent {
    /* border: 3px solid red; */
    height: 100%;
}

.proof-box-container-child-top,
.proofed-product-box-container-child-top,
.delete-box-container-child-top {
    /* border: 3px solid green; */
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.proof-box-container-child-top {
    border: 1px solid rgb(20, 20, 20);
    max-height: 220px;
}

.delete-box-container-child-top-header {
    /* border: 3px solid purple; */
    width: 100%;
}

.proof-box-container-child-top-header {
    /* border: 3px solid purple; */
    font-size: 0.9rem;
    /* font-weight: inherit !important; */
    background-color: rgb(20, 20, 20);
    color: whitesmoke;
    width: 100%;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.5rem;
}

.proof-box-container-child-number {
    /* border: 3px solid blue; */
    font-weight: bold;
    color: black;
    background-color: whitesmoke;
    height: fit-content;
    margin: auto 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 50px;
}


.proof-box-container-child-top-body,
.proofed-product-box-container-child-top-body,
.delete-box-container-child-top-body {
    /* border: 3px solid yellow; */
    width: 100%;
    flex-grow: 1;
    padding: 0.7rem 0.5rem 1.3rem;
    overflow-y: scroll;
}
.proofed-product-box-container-child-top-body {
    padding: 0 0.2rem 1rem;
}
.proof-box-container-child-top-body {
    padding: 0 0.5rem;
    margin: 0.7rem 0;
}

.proof-box-container-child-top-body::-webkit-scrollbar,
.proofed-product-box-container-child-top-body::-webkit-scrollbar,
.delete-box-container-child-top-body::-webkit-scrollbar {
    width: 5px;
}

.proof-box-container-child-top-body::-webkit-scrollbar-track,
.proofed-product-box-container-child-top-body::-webkit-scrollbar-track,
.delete-box-container-child-top-body::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.proof-box-container-child-top-body::-webkit-scrollbar-thumb,
.proofed-product-box-container-child-top-body::-webkit-scrollbar-thumb,
.delete-box-container-child-top-body::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.proof-box-container-child-top-body-child,
.delete-box-container-child-top-body-child {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.5rem;
}

.file-folder-delete {
    color: rgb(0, 80, 52);
}

.proof-box-pic-container,
.delete-box-pic-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.proof-box-pic-container img,
.delete-box-pic-container img {
    display: block;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-box-container-child-bottom-proof-person,
.delete-box-container-child-bottom-account,
.delete-box-container-child-bottom {
    /* border: 3px solid blue; */
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
}

.delete-box-container-child-bottom-account,
.delete-box-container-child-bottom-proof-person {
    display: none;
}

.delete-box-container-child-bottom .proofed-product-box-child-header-child-final-delete,
.delete-box-container-child-bottom .delete-box-child-header-child-final-delete,
.proof-person-deleted-info-box .delete-box-child-header-child-final-proof-person-own-delete,
.profil-child .delete-box-child-header-child-account-delete,
.delete-box-container-child-bottom-account .delete-box-child-header-child-final-account-delete,
.delete-box-container-child-bottom-proof-person .delete-box-child-header-child-final-proof-person-delete {
    /* border: 3px solid lawngreen; */
    width: 100%;
    max-width: 140px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    background-color: rgb(200, 30, 30);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 2px rgb(20, 20, 20);
    box-shadow: 0 0 2px whitesmoke;
    cursor: pointer;
}

.profil-child .delete-box-child-header-child-account-delete {
    margin: auto;
}

.delete-box-container-child-bottom .proofed-product-box-child-header-child-final-delete {
    max-width: 210px;
}

.delete-box-container-child-bottom .proofed-product-box-child-header-child-final-delete:hover,
.delete-box-container-child-bottom .delete-box-child-header-child-final-delete:hover,
.proof-person-deleted-info-box .delete-box-child-header-child-final-proof-person-own-delete:hover,
.profil-child .delete-box-child-header-child-account-delete:hover,
.delete-box-container-child-bottom-account .delete-box-child-header-child-final-account-delete:hover,
.delete-box-container-child-bottom-proof-person .delete-box-child-header-child-final-proof-person-delete:hover {
    scale: 1.01;
}

.create-product-box-container {
    /* border: 3px solid pink; */
    position: relative;
    min-height: fit-content;
    height: calc(100% - 45px);
    /* max-height: 390px; */

    /* padding: 1rem 1rem 0.5rem; */
    padding: 1rem;
    padding-top: 0.3rem;
}

.proof-box-container.single-proof {
    height: calc(100%);
}

.edit-box-container.single-edit {
    height: calc(100%);
}

.create-stuff-box-container {
    /* border: 3px solid purple; */
    position: relative;
    height: 100%;
    /* height: calc(100% - 40px); */
    /* height: fit-content; */
    padding: 1.8rem 1rem 0.5rem;
    overflow-y: scroll;
}

.create-stuff-box-container::-webkit-scrollbar {
    width: 5px;
}

.create-stuff-box-container::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.create-stuff-box-container::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.create-product-box-container-move {
    height: calc(100% - 65px);
}

.create-product-choose-box-proof,
.create-product-choose-box {
    /* border: 3px solid blue; */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
}

.create-product-choose-box-import {
    margin-top: 0.5rem;
    display: none;
}

@media (min-width: 800px) {
    .create-product-choose-box-import {
        display: flex;
    }
}

.create-product-choose-box-proof {
    margin-top: 28px;
    display: none;
}

.create-product-choose-box-proof-child,
.create-product-choose-box-child {
    /* border: 3px solid green; */
    background-color: rgb(220, 235, 225);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 250px;
    height: 100px;
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: -2px 2px 5px rgb(100, 100, 100);
    cursor: pointer;
}

.create-product-choose-box-proof-child:hover,
.create-product-choose-box-child:hover {
    scale: 1.01;
}

.create-file-product-choose-box-child-top,
.create-product-choose-box-proof-child-top,
.create-product-choose-box-child-top {
    margin-bottom: 1.5rem;
}

.create-product-choose-box-proof-child svg,
.create-product-choose-box-child svg {
    height: 37px;
    margin-bottom: 1.2rem;
}

.create-product-choose-box-proof-child span,
.create-product-choose-box-child span {
    text-align: center;
}



.create-file-container {
    /* border: 3px solid blue; */
    height: 100%;

    /* display: none; */
}

.create-file-container.active {
    padding-bottom: 2rem;
}

.file-footer-container-home,
.file-footer-container {
    /* border: 3px solid purple; */

    background-color: rgb(20, 20, 20);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    height: 3rem;
    position: absolute;
    position: fixed;
    right: 1rem;
    left: 1rem;
    bottom: 18px;
    padding: 0 0.5rem;
    border-radius: 10px;

    display: none;
}

.file-footer-edit-home,
.file-footer-copy-home,
.file-footer-proof-home,
.file-footer-move-home,
.file-footer-delete-home,
.file-footer-move,
.file-footer-delete {
    /* border: 3px solid yellow; */
    position: relative;
    color: rgb(70, 70, 70);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.7rem;
    border-radius: 50%;
    cursor: pointer;
}

.footer-description {
    /* border: 3px solid purple; */
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 0.5rem;
    top: -2.5rem;
    border-radius: 7px;

    display: none;
}

.file-footer-edit-home:hover,
.file-footer-copy-home:hover,
.file-footer-proof-home:hover,
.file-footer-move-home:hover,
.file-footer-delete-home:hover,
.file-footer-move:hover,
.file-footer-delete:hover {
    background-color: rgba(200, 200, 200, 0.1);
}

.footer-description-arrow {
    position: absolute;
    border-top: 8px solid rgba(0, 0, 0, 0.6);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    top: -1rem;

    display: none;
}

.file-footer-edit-home:hover .footer-description-edit,
.file-footer-edit-home:focus .footer-description-edit,
.file-footer-edit-home:hover .footer-description-arrow-edit,
.file-footer-edit-home:focus .footer-description-arrow-edit,
.file-footer-copy-home:hover .footer-description-copy,
.file-footer-copy-home:focus .footer-description-copy,
.file-footer-copy-home:hover .footer-description-arrow-copy,
.file-footer-copy-home:focus .footer-description-arrow-copy,
.file-footer-proof-home:hover .footer-description-proof,
.file-footer-proof-home:focus .footer-description-proof,
.file-footer-proof-home:hover .footer-description-arrow-proof,
.file-footer-proof-home:focus .footer-description-arrow-proof,
.file-footer-move-home:hover .footer-description-move,
.file-footer-move-home:focus .footer-description-move,
.file-footer-move-home:hover .footer-description-arrow-move,
.file-footer-move-home:focus .footer-description-arrow-move,
.file-footer-delete-home:hover .footer-description-delete,
.file-footer-delete-home:focus .footer-description-delete,
.file-footer-delete-home:hover .footer-description-arrow-delete,
.file-footer-delete-home:focus .footer-description-arrow-delete {
    display: flex;
}

.file-footer-proof-home,
.file-footer-delete-home {
    padding-bottom: 0.6rem;
}

.file-footer-edit-home.active {
    color: rgb(200, 200, 200);
}

.file-footer-copy-home.active {
    color: rgb(230, 150, 0);
    /* color: rgb(255, 90, 0); */
}

.file-footer-proof-home.active {
    color: rgb(55, 200, 80);
}

.file-footer-move-home.active,
.file-footer-move.active {
    color: rgb(60, 150, 220);
}

.file-footer-delete-home.active,
.file-footer-delete.active {
    color: rgb(220, 60, 60);
}

.create-file-container-box {
    /* border: 3px solid lawngreen; */

    /* max-height: 45vh; */
    /* min-height: 220px; */
    /* max-height: calc(100vh - 420px); */
    height: 100%;
    overflow-y: scroll;
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */

    /* margin-top: -1rem; */

    /* margin-bottom: 2.5rem; */
}

.create-file-container-box::-webkit-scrollbar {
    width: 5px;
}

.create-file-container-box::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.create-file-container-box::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}


.create-file-container-parent-top {
    /* border: 3px solid purple; */
    width: 100%;
}

.create-file-container-child-empty {
    /* border: 3px solid red; */
    width: 100%;

    display: none;
}

.create-file-container-child-empty-exist,
.create-file-container-child-empty-path,
.create-file-container-child-empty-no-more-files {
    /* border: 3px solid red; */
    position: relative;
    background-color: rgb(230, 230, 230);
    background-color: rgb(255, 190, 200);
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.8rem;
    border-radius: 10px;
    box-shadow: 0 0 3px rgb(220, 0, 0);

    display: none;
}
.create-file-container-child-empty-exist {
    position: absolute;
    z-index: 999;
    padding: 2rem 1rem;
    
    display: none;
}

.create-file-container-child-empty-exist-close,
.create-file-container-child-empty-path-close,
.create-file-container-child-empty-no-more-files-close {
    /* border: 3px solid yellow; */
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 0;
    right: 0;
    padding: 0.2rem 0.7rem 0.4rem;
    cursor: pointer;
}

.create-file-container-child-empty-path-close:hover,
.create-file-container-child-empty-path-close:focus,
.create-file-container-child-empty-exist-close:hover,
.create-file-container-child-empty-exist-close:focus,
.create-file-container-child-empty-no-more-files-close:hover,
.create-file-container-child-empty-no-more-files-close:focus {
    scale: 1.1;
}

.create-file-container-child-empty-no-more-path {
    /* border: 3px solid purple; */
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 0.5rem;
}

.create-file-container-child-empty-no-more-path span {
    font-weight: bold;
}

.no-more-path {
    /* border: 3px solid green; */
    margin-right: 0.5rem;
}

.create-file-container-child-empty-no-more-path-child {
    /* border: 3px solid blue; */
    width: 100%;
}

.create-file-container-child-empty-child {
    /* border: 3px solid blue; */
    color: rgb(70, 70, 70);
    width: 100%;
    padding-left: 1.2rem;
}

.create-file-container-child-empty-child span {
    font-weight: bold;
}

.create-file-container-parent {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: column;

    width: 100%;
    /* overflow-x: scroll; */

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

    /* padding-bottom: 0.5rem; */
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */
}

.create-file-container-child {
/* #html-span-file-creation { */
    /* border: 3px solid brown; */
    position: relative;
    min-width: fit-content;
    height: 42px;
    width: 100%;
}

.create-file-container-child-top {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3rem 0.5rem;
    border-top: 1px solid rgb(200, 200, 200);
}

.show-information {
    /* border: 3px solid purple; */
    
    /* background-color: rgba(245, 245, 245, 0.5); */
    position: absolute;
    width: 100%;
    height: 100%;
    /* z-index: 99999; */
}

.show-information::before {
    /* border: 3px solid green; */
    content: "";
    background-color: rgba(245, 245, 245, 0.5);
    position: absolute;
    left: -0.5px;
    width: 100%;
    height: 100%;

    cursor: pointer;
}

.create-home-container-child-top-pdf {
    margin: 0;
    padding: 0;
}

.create-home-container-child-top-proof,
.create-home-container-child-top {
    border-right: 1pt solid rgba(30, 30, 30, 0.5);
    border-bottom: 1pt solid rgba(30, 30, 30, 0.5);
    border-left: 1pt solid rgba(30, 30, 30, 0.5);
}

.create-home-container-child-top.checked,
.create-file-container-child-top.checked {
    background-color: rgb(220, 220, 220);
}

.create-home-container-child-top.hide {
    display: none;
}

.html-span-no-results,
.html-span-no-results-home {
    display: none;
}

.proof-loading-element-home {
    /* border: 3px solid purple; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start !important;
}

.create-file-container-child-top-child {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 0;
    margin-left: 14px;
    cursor: pointer;
}

.file-name-header {
    /* border: 3px solid red; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin-left: 0.7rem;
}

.file-name-header-text {
    /* border: 3px solid blue; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.file-name-header-arrow {
    /* border: 3px solid green; */
    margin-left: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    display: none;
}

.file-name-header-arrow svg {
    /* border: 3px solid purple; */
}

.create-file-container-child-bottom {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    margin-left: 2.5rem;
    cursor: pointer;

    display: none;
}

.create-file-container-child-bottom.show {
    display: flex;
}

.create-file-container-child-bottom-up {
    /* border: 3px solid rebeccapurple; */
    display: flex;
    flex-direction: row;
    align-items: center;
}



.product-checkbox-file {
    opacity: 0;
}

.product-checkbox-label-file {
    /* border: 3px solid purple; */
    position: relative;
    /* padding-left: 40px; */
    /* padding-bottom: 40px; */
    font-size: 1.6rem;
    line-height: 1rem;
    color: white;
    cursor: pointer;
}

.product-checkbox-label-file::before {
    content: "";
    position: absolute;
    /* top: -11px; */
    /* left: 0px; */
    top: 7px;
    left: -11px;
    width: 22px;
    height: 22px;
    /* border: 1px solid rgb(50, 50, 50); */
    border-radius: 50%;
    background-color: whitesmoke;
    box-shadow: 0 0 5px black;
}

.product-checkbox-label-file::after {
    content: "";
    position: absolute;
    /* top: -8px; */
    /* left: 8px; */
    top: 10px;
    left: -3px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transition: 0.2s ease;

    transform: scale(0);
    opacity: 0;
}

.product-checkbox-file.checked+.product-checkbox-label-file::before {
    background-color: rgb(10, 150, 50);
}

.product-checkbox-file.checked+.product-checkbox-label-file::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}


.file-children-arrow {
    /* border: 3px solid aqua; */
    width: 50px;
    /* height: 30px; */
    cursor: pointer;
    /* padding: 0 0.3rem; */

    /* display: block; */
    display: none;
}

.file-children-minus {
    display: none;
}

.file-children-minus.show {
    display: inherit;
}

.file-children-plus.hide {
    display: none;
}

.create-file-container-child-top:hover .file-folder,
.create-file-container-child-top:hover .file-name-header-arrow,
.create-file-container-child-bottom-up:hover .file-folder {
    color: rgb(0, 80, 52);
}

.show-information:hover .file-folder,
.show-information:hover .file-name-header-arrow {
    color: inherit;
}

.create-costumer-file-container-edit,
.create-costumer-file-container {
    /* border: 3px solid purple; */
    text-align: center;
    height: 130px;
    max-width: 300px;
    margin: 0 auto;
    

    /* display: none; */
}
.create-costumer-file-container-edit {
    margin-top: 0.8rem;

    display: none;
}

.create-costumer-file-header-edit,
.create-costumer-file-header {
    /* border: 3px solid green; */
    text-align: center;
    margin-top: 0.7rem;
    margin-bottom: 0.5rem;
}

.create-costumer-file-body {
    /* border: 3px solid orangered; */
}

.create-costumer-file-footer {
    /* border: 3px solid blue; */
    padding-top: 0.2rem;
    height: 35px;

    display: none;
}


.open-file-path-container {
    /* border: 3px solid red; */
    

    display: none;
}



.create-import-product-container {
    /* border: 3px solid rebeccapurple; */
    height: 100%;
    /* display: none; */
}

.create-import-product-container #my-table {
    /* border: 3px solid red; */
    height: 90%;
    overflow: hidden;
}

.create-all-product-container {
    /* border: 3px solid rebeccapurple; */
    height: 100%;
    /* display: none; */
}

.search-product {
    /* border: 3px solid red; */
    margin: 0;
    margin-bottom: 7px;
    background-color: rgb(230, 230, 230);
    /* border-radius: 10px 10px 0 0; */
    border-radius: 10px;
}

.search-results {
    /* border: 3px solid hotpink; */
    font-size: 0.9rem !important;
    margin-bottom: 7px;
    padding-left: 1rem;
}

.search-results span {
    font-weight: bold;
    margin-left: 0.1rem;
}

.search-results-home {
    /* border: 3px solid blue; */
    font-size: 0.9rem !important;
    min-width: fit-content;
    /* width: 100%; */
    color: white;
    margin-bottom: 0px;
    padding: 0;
    padding-right: 0.5rem;
}

.search-results-home span {
    /* font-weight: bold; */
    margin-left: 0.1rem;
}

.products-list-choose {
    /* border: 3px solid lawngreen; */
    /* min-height: 220px; */
    /* max-height: calc(100vh - 420px); */
    
    /* height 100% - .search-product - .search-results */
    height: calc(100% - 42px - 23px);
    /* overflow-y: scroll; */
    /* -ms-overflow-style: none; */
    /* scrollbar-width: none; */
}

.products-choose-header-import,
.products-choose-header {
    /* border: 3px solid aqua; */
    height: 50px;
    padding: 0 0.5rem;
}

.list-product-choose {
    padding: 0 0.5rem;
}

.products-list-container-choose-import,
.products-list-container-choose {
    /* border: 3px solid purple; */
    overflow-y: scroll;
    height: calc(100% - 50px);
    /* height: auto; */
    /* max-height: calc(100% - 50px); */
}
.products-list-container-choose-import {
    background-color: whitesmoke;
    border-radius: 0 0 10px 10px;
    height: fit-content;
    max-height: calc(100% - 50px);
}

.products-list-container-choose-import::-webkit-scrollbar,
.products-list-container-choose::-webkit-scrollbar {
    width: 5px;
}

.products-list-container-choose-import::-webkit-scrollbar-track,
.products-list-container-choose::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.products-list-container-choose-import::-webkit-scrollbar-thumb,
.products-list-container-choose::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.list-product-choose {
    border: 1px solid rgb(230, 230, 230);
    /* border: 3px solid green; */
}

.pic-box {
    /* border: 3px solid green; */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.pic-box img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.pic-box-multicolor {
    border: 1pt solid black;
    /* background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet); */
    background: conic-gradient(
        red 0deg 60deg,
        orange 60deg 120deg,
        purple 120deg 180deg,
        green 180deg 240deg,
        yellow 240deg 300deg,
        blue 300deg 360deg
    );
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
}

.pic-box-warning {
    /* border: 3px solid purple; */
    position: absolute;
    bottom: 11px;
    left: -15px;
    /* color: yellow; */
    /* color: rgb(255, 200, 0); */
    color: rgb(255, 175, 0);
    
    cursor: pointer;
}

.pic-box-warning.active {
    left: -65px;
}

.pic-box-warning-text {
    /* border: 3px solid red; */
    background-color: rgb(255, 175, 0);
    position: absolute;
    min-width: 280px;
    max-height: 35.2px;
    padding: 0.5rem 0.7rem;
    /* bottom: -10px; */
    left: 50px;
    left: 8px;
    border-radius: 7px;

    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}
.pic-box-warning-text.active {
    left: -5px;
}

.pic-box-warning-text.show {
    padding: 0.5rem 0.7rem;
    opacity: 1;
    visibility: inherit;
}


.pic-box-warning svg {
    /* border: 3px solid green; */
    /* background-color: white; */
    width: 23px;
    height: 23px;
}

.pic-box-multicolor.hide {
    display: none;
}

@media (min-width: 600px) {
    .pic-box-warning {
        bottom: 9.5px;
        left: -24px;
    }
    .pic-box-warning.active {
        bottom: 9.5px;
        left: -30px;
    }

    .pic-box-warning svg {
        width: inherit;
        height: inherit;
        width: 25px;
        height: 25px;
    }

    .pic-box-warning-text.active {
        left: 15px;
    }
    .pic-box-warning-text.active {
        left: 5px;
    }

}





.create-productinfo-container {
    /* border: 3px solid aqua; */
    /* padding: 1rem 1rem 0.5rem; */
    /* min-height: 220px; */
    /* max-height: calc(100vh - 420px); */
    height: 100%;
    overflow-y: scroll;

    /* display: none; */
}

.create-productinfo-container::-webkit-scrollbar {
    width: 5px;
}

.create-productinfo-container::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

.create-productinfo-container::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}

.profilinfo-stuff-container-parent {
    /* border: 3px solid lawngreen; */
    /* background-color: rgb(130, 250, 170); */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    min-height: fit-content;
    /* Für Abstand zu löschen Button (100% - 1rem); */
    /* height: calc(100% - 1rem); */
    height: fit-content;
    width: 100%;
    /* Für Abstand zu löschen Button 1rem; */
    margin-bottom: 1rem;
    /* overflow-y: scroll; */
}

.profilinfo-stuff-container-parent.hide-delete-btn {
    height: 100%;
    margin-bottom: 0;
}

.profilinfo-container-parent:last-of-type {
    margin-bottom: 0;
}

.profilinfo-container-child {
    /* border: 3px solid pink; */
    width: 100%;
    /* max-width: 300px; */
}

.profilinfo-container-child-top {
    /* border: 3px solid purple; */
}

.profilinfo-container-child-top-child {
    /* border: 3px solid yellow; */
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.profilinfo-container-child-top-child-delete {
    /* border: 3px solid red; */
    height: 60px;
    align-items: center;
    justify-content: center;
}

.profilinfo-container-child-top-child-delete.hide-delete-btn {
    display: none;
}

.create-stuff-box-delete {
    /* border: 3px solid yellow; */
    width: 100%;
    max-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    background-color: rgb(200, 30, 30);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 2px rgb(20, 20, 20);
    box-shadow: 0 0 2px whitesmoke;
    cursor: pointer;
}

.profilinfo-pic-container {
    /* border: 3px solid black; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-between;
}

.profilinfo-picture-container {
    /* border: 3px solid blue; */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.profilinfo-picture-proof-proofinfo,
.profilinfo-picture {
    /* border: 3px solid aqua; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 80px;
}

.profilinfo-picture-proof-proofinfo img,
.profilinfo-picture img {
    /* border: 3px solid red; */
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.profilinfo-picture-list {
    /* border: 3px solid aqua; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    padding-top: 0.5rem;

    display: none;
}

.profilinfo-picture-list.show {
    display: flex;
}

.profilinfo-picture-list-color {
    /* border: 2px solid black; */
    /* background-color: white; */
    width: 30px;
    height: 30px;
    /* width: 27px; */
    /* height: 27px; */
    border-radius: 50%;
    margin: 0.7rem 0.5rem 0;
    padding: 3px;
    cursor: pointer;
}

.profilinfo-picture-list-color:focus,
.profilinfo-picture-list-color:hover {
    border: 2px solid rgb(70, 70, 70);
    /* box-shadow: 0 0 10px black; */
}

.profilinfo-picture-list-color div {
    border: 1pt solid rgb(70, 70, 70);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}


.profilinfo-container-child-bottom {
    /* border: 3px solid orangered; */
}

.profilinfo-container-child-footer-import,
.profilinfo-container-child-footer-edit,
.profilinfo-container-child-footer-own,
.profil-abo-check,
.profilinfo-container-child-footer {
    /* border: 3px solid blue; */
    font-size: 0.8rem;
    padding: 0.3rem 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
@media (min-width: 450px) {
    .profilinfo-container-child-footer-import {
        margin-top: 0.5rem;
    }
}


.profil-abo-check {
    align-items: start;
    /* margin-bottom: 1rem; */
}

.profilinfo-container-child-footer-input-box-import,
.profilinfo-container-child-footer-input-box-edit,
.profilinfo-container-child-footer-input-box-own,
.profil-abo-check-input-box,
.profilinfo-container-child-footer-input-box {
    /* border: 3px solid red; */
    position: relative;
    /* padding-top: 0.3rem; */
    margin-left: 0.5rem;
    width: 30px;
    height: 30px;
}

.create-product-agb-import,
.create-product-agb-edit,
.create-product-agb-own,
.create-product-agb {
    opacity: 0;
}
.create-abo-agb,
.create-product-abo,
.agb-checkbox,
.datenschutz-checkbox,
.create-product-newsletter {
    accent-color: rgb(0, 130, 0);
    width: 17px;
    height: 17px;
    cursor: pointer;
}
.create-abo-agb:hover,
.create-product-abo:hover,
.agb-checkbox:hover,
.datenschutz-checkbox:hover,
.create-product-newsletter:hover {
    scale: 1.03;
    transition: 0.2s;
}
.create-abo-agb.fail {
    box-shadow: 0 0 6px 1px red;
}

.create-product-label-agb-import,
.create-product-label-agb-edit,
.create-product-label-agb-own,
/* .create-product-label-abo, */
/* .create-product-label-newsletter, */
.create-product-label-agb {
    /* border: 3px solid purple; */
    padding-left: 30px;
    font-size: 1.6rem;
    line-height: 1rem;
    color: white;
    cursor: pointer;
}

.create-product-label-agb-import::before,
.create-product-label-agb-edit::before,
.create-product-label-agb-own::before,
.create-product-label-agb::before {
    /* border: 1pt solid transparent; */
    /* border: 3px solid lawngreen; */
    content: "";
    position: absolute;
    /* top: -11px; */
    top: 2px;
    left: 0px;
    width: 17px;
    height: 17px;
    /* border: 1px solid rgb(50, 50, 50); */
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0 3px black;
}

.create-product-label-agb-import::after,
.create-product-label-agb-edit::after,
.create-product-label-agb-own::after,
.create-product-label-agb::after {
    content: "";
    position: absolute;
    /* top: -8px; */
    top: 5px;
    left: 6px;
    width: 3px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transition: 0.2s ease;

    transform: scale(0);
    opacity: 0;
}


/* .create-product-agb.checked+.profilinfo-container-child-footer-input-box::before { */
.profilinfo-container-child-footer-input-box-import.checked>.create-product-label-agb-import::before,
.profilinfo-container-child-footer-input-box-edit.checked>.create-product-label-agb-edit::before,
.profilinfo-container-child-footer-input-box-own.checked>.create-product-label-agb-own::before,
.profil-abo-check-input-box-own.checked>.create-abo-label-agb::before,
.profilinfo-container-child-footer-input-box.checked>.create-product-label-agb::before {
    background-color: rgb(10, 150, 50);
    background-color: rgb(70, 100, 255);
}

.profilinfo-container-child-footer-input-box-import.agb-failed>.create-product-label-agb-import::before,
.profilinfo-container-child-footer-input-box-edit.agb-failed>.create-product-label-agb-edit::before,
.profilinfo-container-child-footer-input-box-own.agb-failed>.create-product-label-agb-own::before,
.profil-abo-check-input-box-own.agb-failed>.create-abo-label-agb::before,
.profilinfo-container-child-footer-input-box.agb-failed>.create-product-label-agb::before {
    box-shadow: 0 0 5px red;
    border: 1px solid rgb(220, 0, 0);
}

/* .create-product-agb.checked+.profilinfo-container-child-footer-input-box::after { */
.profilinfo-container-child-footer-input-box-import.checked>.create-product-label-agb-import::after,
.profilinfo-container-child-footer-input-box-edit.checked>.create-product-label-agb-edit::after,
.profilinfo-container-child-footer-input-box-own.checked>.create-product-label-agb-own::after,
.profil-abo-check-input-box-own.checked>.create-abo-label-agb::after,
.profilinfo-container-child-footer-input-box.checked>.create-product-label-agb::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.profilinfo-container-child-footer-import span,
.profilinfo-container-child-footer-edit span,
.profilinfo-container-child-footer-own span,
.profil-abo-check span,
.profilinfo-container-child-footer span {
    /* border: 3px solid yellow; */
    margin-left: 0rem;
}

.profil-abo-check span {
    max-width: 450px;
}

.profilinfo-container-child-footer-import a,
.profilinfo-container-child-footer-edit a,
.profilinfo-container-child-footer-own a,
.profil-abo-check a,
.profilinfo-container-child-footer a {
    color: blue;
    text-decoration: underline;
}

.profilinfo-container-child h3 {
    /* border: 3px solid orangered; */
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.profilinfo-parent {
    /* border: 3px solid blue; */
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.profilinfo-parent-proof {
    /* border: 3px solid red; */
    margin: 0;
    margin-left: 0.5rem;
    padding-right: 1rem;
}

.profilinfo-parent-oneliner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.profilinfo-stuff-city {
    width: 62%;
    margin: 0 !important;
}

.profilinfo-stuff-zip-code {
    width: 33%;
    margin: 0 !important;
}

.profilinfo-parent:not(:last-of-type) {
    margin-bottom: 1rem;
}

.profilinfo-productname {
    /* border: 3px solid gray; */
    width: 100%;
    max-width: 300px;
    margin-top: 0.5rem;
}

.profilinfo-child {
    /* border: 3px solid green; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */

}

.profilinfo-productname-child {
    /* border: 3px solid purple; */
    margin: 0 auto;
}

.profilinfo-child-header {
    /* border: 3px solid red; */
    width: 100%;
    margin-bottom: 0.3rem;
    /* margin-right: 0.5rem; */
}

.textarea-proofinfo,
.profilinfo-child-info-container {
    /* border: 3px solid rebeccapurple; */
    border-bottom: 1pt solid rgb(30, 30, 30);
    background-color: rgb(235, 235, 235);
    width: 100%;
    min-height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* margin-top: 0.5rem; */
    padding: 0 0.5rem;
    overflow-x: scroll;

    -ms-overflow-style: none;
    scrollbar-width: none;

}

.textarea-proofinfo {
    border: 1pt solid rgb(30, 30, 30);
    border: none;
    border-radius: 10px;
    /* box-shadow: 0 0 2px rgb(70, 70, 70); */
    padding: 0.7rem;
    margin-bottom: 0.5rem;
    overflow-x: inherit;
}

.profilinfo-child-info-container::-webkit-scrollbar {
    display: none;
}

.profilinfo-child-info-container span {
    white-space: nowrap;
    /* overflow: hidden; */
    /* text-overflow: ellipsis; */
}

.profil-abo-input {
    display: flex;
}
.profil-abo-info {
    display: none;
}

.abo-gutschein {
    /* border: 3px solid red; */
    display: flex;
    align-items: center;
    margin: -0.7rem auto 1.5rem;
    padding: 0 0.2rem;
}
.abo-gutschein-info {
    /* border: 3px solid blue; */
    margin: -1.2rem auto 1.5rem;
    padding: 0 0.2rem;
    
    display: none;
}
.abo-gutschein-info p {
    font-size: 0.85rem;
    text-align: center;
    color: rgb(220, 0, 0);
}

.abo-gutschein p {
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 1rem;
    letter-spacing: 1px;
}

.filter-box-child-body .profilinfo-child-input-container,
.profil-gutschein-abo,
.profilinfo-child-input-container {
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    /* margin-top: 0.5rem; */
    padding: 0.4rem 0.5rem;
    border: 1pt solid rgb(30, 30, 30);
    /* border: none; */
    border-radius: 5px;
    /* box-shadow: 0 0 3px rgb(20, 20, 20); */
    /* border: 3px solid yellow; */
}
.profilinfo-child-input-container-upload-product {
    width: 100%;
    border: none;
    border-radius: inherit;
    background-color: inherit;
}

.profil-gutschein-abo.ok {
    border: 2px solid green;
}
.profil-gutschein-abo.fail {
    border: 2px solid rgb(230, 0, 0);
}

.file-input-copy,
.file-input-edit {
    display: none;
}

.profilinfo-child-input {
    font-size: 1rem;
    background-color: transparent;
    width: 100%;
    border: none;
    /* max-width: 300px; */
    letter-spacing: 0.5px;
    outline: none;
    /* border: 3px solid blue; */
}
.profil-choose-company {
    color: black !important;
}

.profilinfo-input-container-product-sidefact,
.profilinfo-input-container-product-own-sidefact,
.profilinfo-input-container-edit-sidefact,
.profilinfo-input-container-proof-sidefact,
.profilinfo-input-container-proof-proofinfo-sidefact,
.profilinfo-input-container-stuff-sidefact {
    /* border: 3px solid green; */
    height: fit-content;
    width: 100%;
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: start; */
}

.profilinfo-input-product-sidefact,
.profilinfo-input-product-own-sidefact,
.profilinfo-input-edit-sidefact,
.profilinfo-input-proof-sidefact,
.profilinfo-input-proof-proofinfo-sidefact,
.profilinfo-input-stuff-sidefact {
    /* border: 3px solid red; */
    resize: none;
    /* height: 100%; */
}
.profilinfo-input-proof-sidefact,
.profilinfo-input-proof-proofinfo-sidefact {
    color: black;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.profilinfo-input-product-sidefact::placeholder,
.profilinfo-input-product-own-sidefact::placeholder,
.profilinfo-input-edit-sidefact::placeholder,
.profilinfo-input-proof-sidefact::placeholder,
.profilinfo-input-proof-proofinfo-sidefact::placeholder,
.profilinfo-input-stuff-sidefact::placeholder {
    color: rgb(70, 70, 70);
    font-size: 0.9rem;
}

.profilinfo-date-style {
    /* border: 3px solid blue; */
    color: black;
    width: 100%;
    height: 100%;
    margin-right: 10px;
}

.profilinfo-child-input-container:focus-within,
.profilinfo-child-input-container:hover {
    border: none;
    border-bottom: 2px solid rgb(30, 30, 30);
}

.profilinfo-child-pen {
    /* border: 3px solid yellow; */
    color: rgb(50, 50, 50);
    display: flex;
    justify-content: center;
    align-items: center;
}

.profilinfo-child-input-container:focus-within>.profilinfo-child-pen,
.profilinfo-child-input-container:hover>.profilinfo-child-pen {
    display: none;
    visibility: hidden;
}

.info-fail {
    border: none;
    /* border-bottom: 2px solid rgb(220, 0, 0); */
    border: 2px solid rgb(220, 0, 0);
    box-shadow: 0 0 3px rgb(220, 0, 0);
    border-radius: 5px;
}

.profilinfo-child-input-fail {
    border: none;
    border-bottom: 2px solid rgb(220, 0, 0);
}

.profilinfo-child-input-fail:focus,
.profilinfo-child-input-fail:hover {
    border: none;
    border-bottom: 2px solid rgb(220, 0, 0);
}

.profilinfo-child-input-container-edit-file-fail.active,
.profilinfo-child-input-container-new-file-fail.active {
    border: none;
    border-bottom: 2px solid rgb(220, 0, 0);
}

.create-costumer-file-container.active {
    margin-bottom: 1.5rem;
}




.create-united-proof-product-container,
.create-single-proof-product-container,
.create-edit-product-container,
.create-own-product-container {
    /* border: 3px solid orangered; */
    height: 100%;

    /* display: none; */
}
.create-united-proof-product-container,
.create-single-proof-product-container,
.create-edit-product-container {
    padding-top: 0.5rem;
}

.create-productinfo-proof-container {
    /* border: 3px solid blue; */
    overflow-x: hidden;
}

.profilinfo-container-parent-header-container-proof,
.profilinfo-container-parent-header-container-proof-proofinfo,
.profilinfo-container-parent-header-container {
    /* border: 3px solid red; */
    height: 50px;
    background-color: rgba(0, 80, 52, 0.1);
    background-color: rgb(220, 235, 225);
    /* color: whitesmoke; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    margin: 0.2rem 0.2rem 0;
    border-radius: 3px;
    box-shadow: 0 0 3px rgb(20, 20, 20);
    
    scroll-margin-top: 2px;
}
.profilinfo-container-parent-header-container-proof-proofinfo,
.profilinfo-container-parent-header-container-proof {
    margin-top: 1rem;
}

.profilinfo-container-parent-header-proof,
.profilinfo-container-parent-header {
    font-weight: bold;
    letter-spacing: 0.7px;
}

.productinfo-proof-open-close-proofinfo,
.productinfo-proof-open-close,
.productinfo-open-close-proofinfo,
.productinfo-open-close {
    /* border: 3px solid purple; */
    height: 100%;
    /* transform: rotate(180deg); */
    cursor: pointer;
    transition: all 0.2s;
}
.productinfo-proof-open-close-proofinfo.open-close,
.productinfo-proof-open-close.open-close,
.productinfo-open-close-proofinfo.open-close,
.productinfo-open-close.open-close {
    transform: rotate(180deg);
}
.productinfo-proof-open-close-proofinfo:hover,
.productinfo-proof-open-close:hover,
.productinfo-open-close-proofinfo:hover,
.productinfo-open-close:hover {
    scale: 1.07;
}

.profilinfo-container-parent-proof-proofinfo,
.profilinfo-container-parent-proof {
    /* border: 3px solid yellow; */
    /* background-color: rgb(130, 250, 170); */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    min-height: fit-content;
    /* width: 100%; */
    padding: 1rem 0.5rem 0;
    margin: 0 0.2rem;
    transition: all 0.2s;
    overflow: hidden;
    box-shadow: 0 0 3px rgb(20, 20, 20);
}

.profilinfo-container-parent-proof-proofinfo.open-close,
.profilinfo-container-parent-proof.open-close {
    min-height: 0;
    height: 0;
    padding: 0;
    box-shadow: none;
}

.proof-section-container-proofinfo,
.proof-section-container {
    /* border: 3px solid green; */
    padding: 0.5rem 0.5rem 0;
    margin: 0 0.2rem 0.3rem;
    transition: all 0.2s;
    overflow: hidden;
    box-shadow: 0 0 3px rgb(20, 20, 20);
}

.proof-section-container-proofinfo.open-close,
.proof-section-container.open-close {
    height: 0;
    padding: 0;
    box-shadow: none;
}

.proof-section-container-top-proofinfo {
    /* border: 3px solid blue; */
    /* width: 63%; */
    width: 100%;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    /* justify-content: space-between; */
    align-items: center;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.proof-section-container-top {
    /* border: 3px solid yellow; */
    
    /* display: none; */
}

.proof-section-company-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 1rem; */

    line-height: 1.5;
    letter-spacing: 0.5px;
}

.proof-section-company-container-top {
    /* border: 3px solid black; */
    width: 100%;
    height: 75px;
    padding: 0 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* height: 0; */
}

.proof-section-company-logo {
    /* border: 3px solid purple; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


.proof-section-company-container-top img {
    /* border: 3px solid green; */
    display: block;
    /* width: 100%; */
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.proof-section-company-container-bottom {
    /* border: 3px solid lawngreen; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    padding: 1rem 0;
}

.proof-section-company-container-bottom b {
    font-weight: bold;
}

.proof-section-company-header {
    margin-bottom: 0.5rem;
}

.proof-section-company-link {
    text-decoration: underline;
    cursor: pointer;
}

.proof-section-all-products-container {
    /* border: 3px solid lawngreen; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.proof-section-icon-container {
    /* border: 3px solid blue; */
    /* width: 63%; */
    width: 100%;
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
    justify-content: center;
    /* justify-content: space-between; */
    align-items: center;
    /* align-items: start; */
    padding-top: 0.5rem;
    margin: 0 auto;

    line-height: 1.5;
    letter-spacing: 0.5px;
}

.proof-section-icon-header-proofinfo,
.proof-section-icon-header {
    /* border: 3px solid green; */
    /* font-size: 0.95rem; */
    font-weight: bold;
    width: 100%;
    /* width: 65%; */
    /* max-width: 330px; */
    text-align: center;
    text-decoration: underline;
    margin-bottom: 0.5rem;
}
.proof-section-icon-header-proofinfo {
    text-align: start;
    max-width: fit-content;
    margin: 0 0.5rem 0 0;
}

.proof-section-icon-choose-proofinfo,
.proof-section-icon-choose {
    /* border: 3px solid purple; */
    width: 100%;
    max-width: 260px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.proof-section-icon-choose-proofinfo {
    width: fit-content;
}

.filter-box-child-body-child-positiv,
.proof-section-icon-positiv-proofinfo,
.main-start-body-section-icon-positiv,
.proof-section-icon-positiv {
    border: none;
    /* border: 3px solid orangered; */

    padding: 0.3rem;
    padding: 0.7rem;
    /* margin: 0 1rem; */
    border-radius: 10px;
    cursor: pointer;
}
.proof-section-icon-positiv-proofinfo {
    padding: 0.3rem 0.3rem 0;
}

.proof-section-icon-negativ-faq,
.proof-section-icon-neutral-faq,
.proof-section-icon-positiv-faq {
    /* border: 3px solid green; */
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.proof-section-icon-negativ-faq div,
.proof-section-icon-neutral-faq div,
.proof-section-icon-positiv-faq div {
    margin-left: 1rem;
    line-height: 1.4;
}

.filter-box-child-body-child-positiv svg,
.proof-section-icon-positiv-proofinfo svg,
.main-start-body-section-icon-positiv svg,
.proof-section-icon-positiv-faq svg,
.proof-section-icon-positiv svg {
    /* border: 3px solid lawngreen; */
    color: rgb(70, 70, 70);
    background-color: white;
    width: 55px;
    height: 55px;
    box-shadow: 0 0 3px rgb(20, 20, 20);
    border-radius: 10px;
    padding: 0.6rem 0.4rem 0.8rem;
    margin: 0.3rem 0;
    outline: none;
}
.proof-section-icon-positiv-faq svg {
    min-width: 37px;
    height: 37px;
    padding: 0.2rem 0 0.3rem;
    border-radius: 5px;
}

.proof-section-icon-positiv-faq svg,
.proof-section-icon-positiv-proofinfo svg,
.main-start-body-section-icon-positiv svg,
.filter-box-child-body-child-positiv.active svg,
.proof-section-icon-positiv.active svg {
    color: rgb(0, 130, 20);
    box-shadow: 0 0 3px rgb(0, 130, 20);
}

.filter-box-child-body-child-neutral,
.proof-section-icon-neutral-proofinfo,
.main-start-body-section-icon-neutral,
.proof-section-icon-neutral {
    /* border: 3px solid orchid; */
    border: none;

    padding: 0.3rem;
    padding: 0.7rem;
    /* margin: 0 1rem; */
    border-radius: 10px;
    cursor: pointer;
}
.proof-section-icon-neutral-proofinfo {
    padding: 0.3rem 0.3rem 0;
}

.filter-box-child-body-child-neutral svg,
.proof-section-icon-neutral-proofinfo svg,
.main-start-body-section-icon-neutral svg,
.proof-section-icon-neutral-faq svg,
.proof-section-icon-neutral svg {
    /* border: 3px solid brown; */
    color: rgb(70, 70, 70);
    background-color: white;
    width: 55px;
    height: 55px;
    box-shadow: 0 0 3px rgb(20, 20, 20);
    border-radius: 10px;
    padding: 0.6rem 0.4rem 0.8rem;
    margin: 0.3rem 0;
    outline: none;
}
.proof-section-icon-neutral-faq svg {
    min-width: 37px;
    height: 37px;
    padding: 0.2rem 0 0.3rem;
    border-radius: 5px;
}

.proof-section-icon-neutral-proofinfo svg,
.proof-section-icon-neutral-faq svg,
.main-start-body-section-icon-neutral svg,
.filter-box-child-body-child-neutral.active svg,
.proof-section-icon-neutral.active svg {
    color: rgb(230, 150, 0);
    /* box-shadow: 0 0 3.5px rgb(230, 162, 0); */
    box-shadow: 0 0 3.5px rgb(255, 90, 0);
}

.filter-box-child-body-child-negativ,
.proof-section-icon-negativ-proofinfo,
.main-start-body-section-icon-negativ,
.proof-section-icon-negativ {
    /* border: 3px solid black; */
    border: none;

    padding: 0.7rem;
    /* margin: 0 1rem; */
    border-radius: 10px;
    cursor: pointer;
}
.proof-section-icon-negativ-proofinfo {
    padding: 0.3rem 0.3rem 0;
}

.filter-box-child-body-child-negativ svg,
.proof-section-icon-negativ-proofinfo svg,
.main-start-body-section-icon-negativ svg,
.proof-section-icon-negativ-faq svg,
.proof-section-icon-negativ svg {
    /* border: 3px solid blue; */
    color: rgb(70, 70, 70);
    background-color: white;
    width: 55px;
    height: 55px;
    box-shadow: 0 0 3px rgb(20, 20, 20);
    border-radius: 10px;
    padding: 0.6rem 0.4rem 0.8rem;
    margin: 0.3rem 0;
    outline: none;
}
.proof-section-icon-negativ-faq svg {
    min-width: 37px;
    height: 37px;
    padding: 0.2rem 0 0.3rem;
    border-radius: 5px;
}

.proof-section-icon-negativ-proofinfo svg,
.proof-section-icon-negativ-faq svg,
.main-start-body-section-icon-negativ svg,
.filter-box-child-body-child-negativ.active svg,
.proof-section-icon-negativ.active svg {
    color: rgb(200, 0, 0);
    box-shadow: 0 0 3px rgb(200, 0, 0);
}

.main-start-body-section-icon-positiv,
.main-start-body-section-icon-neutral,
.main-start-body-section-icon-negativ {
    position: absolute;
    padding: 0;
}
.main-start-body-section-icon-positiv {
    bottom: 20%;
    left: 0;
}
.main-start-body-section-icon-neutral {
    bottom: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
.main-start-body-section-icon-negativ {
    bottom: 20%;
    right: 0;
}
.main-start-body-section-icon-positiv svg,
.main-start-body-section-icon-neutral svg,
.main-start-body-section-icon-negativ svg {
    background-color: transparent;
    width: 40px;
    height: 40px;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.main-start-body-section-icon-positiv svg {
    color: rgb(0, 130, 20);
    color: rgb(80, 200, 80);
    color: rgb(80, 160, 80);
    transform: translateX(110vw);
}
.main-start-body-section-icon-neutral svg {
    color: rgb(230, 150, 0);
    color: rgb(230, 150, 0);
    color: rgb(205, 175, 50);
    transform: translateX(110vw);
}
.main-start-body-section-icon-negativ svg {
    color: rgb(200, 0, 0);
    color: rgb(210, 60, 60);
    color: rgb(190, 80, 80);
    transform: translateX(110vw);
}
.main-start-body-section-icon-positiv.start svg {
    animation: start-icon-animation 1.5s ease-in-out 0s forwards;
    animation-delay: 0s;
}
.main-start-body-section-icon-neutral.start svg {
    animation: start-icon-animation 1.5s ease-in-out 0s forwards;
    animation-delay: 0.1s;
}
.main-start-body-section-icon-negativ.start svg {
    animation: start-icon-animation 1.5s ease-in-out 0s forwards;
    animation-delay: 0.2s;
}

@keyframes start-icon-animation {
    0% {
    }
    100% {
        transform: translateX(0);
    }
}

.filter-box-child-body-child-positiv:hover,
.proof-section-icon-positiv:hover,
.filter-box-child-body-child-neutral:hover,
.proof-section-icon-neutral:hover,
.filter-box-child-body-child-negativ:hover,
.proof-section-icon-negativ:hover {
    scale: 1.03;
    transition: all 0.2s;
}

@media (min-width: 1000px) {
    .main-start-body-section-icon-positiv {
        bottom: 0;
    }
    .main-start-body-section-icon-neutral {
        bottom: 0;
    }
    .main-start-body-section-icon-negativ {
        bottom: 0;
    }
    
    .main-start-body-section-icon-positiv svg,
    .main-start-body-section-icon-neutral svg,
    .main-start-body-section-icon-negativ svg {
        width: 50px;
        height: 50px;
    }
}

/* .filter-box-child-body-child-positiv:hover svg,
.proof-section-icon-positiv:hover svg {
    transition: all 0.2s;
    color: rgb(0, 130, 20);
    box-shadow: 0 0 3px rgb(0, 130, 20);
}
.filter-box-child-body-child-neutral:hover svg,
.proof-section-icon-neutral:hover svg {
    transition: all 0.2s;
    color: rgb(230, 150, 0);
    box-shadow: 0 0 3.5px rgb(255, 90, 0);
}
.filter-box-child-body-child-negativ:hover svg,
.proof-section-icon-negativ:hover svg {
    transition: all 0.2s;
    color: rgb(200, 0, 0);
    box-shadow: 0 0 3px rgb(200, 0, 0);
} */


.proof-section-icon-positiv.animation svg,
.proof-section-icon-neutral.animation svg,
.proof-section-icon-negativ.animation svg {
    animation: proof-icon 0.9s;
}

@keyframes proof-icon {
    0% {
        box-shadow: none;
        border: 1px solid rgb(130, 130, 130);
        transform: rotate(-7deg);
    }
    10% {
        transform: rotate(7deg);
    }
    20% {
        transform: rotate(-7deg);
    }
    30% {
        transform: rotate(7deg);
    }
    40% {
        transform: rotate(-7deg);
    }
    50% {
        transform: rotate(7deg);
    }
    60% {
        transform: rotate(-7deg);
    }
    70% {
        transform: rotate(7deg);
    }
    80% {
        transform: rotate(-7deg);
    }
    90% {
        transform: rotate(7deg);
    }
    99% {
        box-shadow: none;
        border: 1px solid rgb(130, 130, 130);
    }
    100% {
        border: none;
        box-shadow: 0 0 3px rgb(20, 20, 20);
        transform: rotate(0deg);        
    }
}

.proof-section-container-bottom-proofinfo,
.proof-section-container-bottom {
    /* border: 3px solid lawngreen; */
    height: fit-content;
    display: flex;
    flex-direction: column-reverse;
    /* flex-direction: row-reverse; */

    justify-content: center;
    /* align-items: start; */
    
    /* height: 0; */
    display: none;
}

.proof-section-upload-container-proofinfo,
.proof-section-upload-container {
    /* border: 3px solid red; */
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;

    padding: 0.5rem;
    width: 100%;
    /* width: 50%; */
    min-height: 100%;
}
.upload-product-upload-container {
    /* border: 3px solid red; */
    width: 100%;
    /* width: 50%; */
    min-height: 100%;
}
.proof-section-upload-container-proofinfo {
    justify-content: start;
    align-items: start;
    padding: 0;
    margin-top: 1rem;
}

.proof-section-uploaded-proofinfo {
    /* border: 3px solid purple; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.upload-product-upload-file-container,
.proof-section-upload-file-container {
    font-size: 0.9rem;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.1rem 1rem;
    /* margin-bottom: 1rem; */
    border: 2px dashed rgb(0, 80, 52);
    border-radius: 10px;
    /* border: 3px solid orchid; */
}
.upload-product-upload-file-container {
    /* border: 3px solid blue; */
}
.upload-product-upload-file-container.active,
.proof-section-upload-file-container.active {
    border: 3px dashed rgb(0, 80, 52);
}

.upload-product-upload-file-container svg,
.proof-section-upload-file-container svg {
    /* border: 3px solid gray; */
    color: rgb(0, 80, 52);
    margin-bottom: 1rem;
}

.upload-product-upload-file-container span,
.proof-section-upload-file-container span {
    font-size: 0.9rem;
    /* border: 3px solid blue; */
    text-align: center;
    margin-bottom: 0.5rem;
}

.upload-product-span-one,
.proof-section-span-one {
    font-weight: bold;
    letter-spacing: 0.7px;
}

.upload-product-upload-file-container input,
.proof-section-upload-file-container input {
    display: none;
}

.upload-product-upload-file-btn,
.proof-section-upload-file-btn {
    /* border: 3px solid purple; */
    background-color: rgb(220, 235, 225);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    box-shadow: 0 0 3px rgb(30, 30, 30);
    cursor: pointer;
}

.upload-product-upload-file-btn:hover,
.proof-section-upload-file-btn:hover {
    scale: 1.03;
    transition: all 0.2s;
}

.proof-section-upload-history-top-box {
    /* border: 3px solid green; */
    /* max-height: 100px; */
    width: 100%;
    max-height: 170px;

    display: flex;
    flex-direction: column;
    
    overflow-y: scroll;

    display: none;
}
.upload-product-upload-history-top-box {
    border: 3px solid green;
    width: 100%;
    /* max-height: 170px; */

    display: flex;
    flex-direction: column;
    
    /* overflow-y: scroll; */
}
.upload-product-upload-history-top-box-span {
    /* border: 3px solid blue; */
    text-align: center;
    color: rgb(50, 50, 50);
    margin-top: 0.5rem;
}

/* .upload-product-upload-history-top-box::-webkit-scrollbar, */
.proof-section-upload-history-top-box::-webkit-scrollbar {
    width: 5px;
}

/* .upload-product-upload-history-top-box::-webkit-scrollbar-track, */
.proof-section-upload-history-top-box::-webkit-scrollbar-track {
    background-color: rgb(70, 70, 70);
    border-radius: 50px;
}

/* .upload-product-upload-history-top-box::-webkit-scrollbar-thumb, */
.proof-section-upload-history-top-box::-webkit-scrollbar-thumb {
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 50px;
}



.upload-product-upload-history-box,
.proof-section-upload-history-box {
    /* border: 3px solid purple; */
    width: 100%;    
    /* display: none; */
}

.upload-product-upload-history-top-container,
.proof-section-upload-history-top-container,
.proof-section-upload-history-container-proofinfo,
.upload-product-upload-history-container,
.proof-section-upload-history-container {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;

    /* display: none; */
}
.proof-section-upload-history-container-proofinfo {
    justify-content: start;
}


.proof-section-upload-history-top-proofinfo,
.upload-product-upload-history-top,
.proof-section-upload-history-top {
    /* border: 3px solid lawngreen; */
    background-color: rgb(220, 220, 220);
    background-color: rgb(235, 235, 235);
    height: 60px;
    padding: 0 1rem;

    padding: 0 0.5rem;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 7px;
    width: 100%;
    max-width: 350px;

    cursor: pointer;
}
.upload-product-upload-history-top {
    border: 3px solid blue;
    max-width: 90%;
}
.proof-section-upload-history-top-proofinfo {
    /* max-width: 250px; */
}

.upload-product-upload-history-left,
.proof-section-upload-history-left {
    /* border: 3px solid blue; */
    color: rgb(0, 80, 52);
}

.upload-product-upload-history-middle,
.proof-section-upload-history-middle {
    /* border: 3px solid red; */
    width: 100%;
    height: 100%;
    padding: 0.5rem 0;
    margin: 0 0.5rem;    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.upload-product-load-box,
.proof-section-load-box {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.upload-product-load-box-text,
.proof-section-load-box-text {
    font-size: 0.8rem;
    font-weight: bold;
    /* letter-spacing: 0.5px; */
}

.upload-product-kb,
.proof-section-kb {
    /* border: 3px solid lawngreen; */
    font-size: 0.9rem;
    color: rgb(50, 50, 50);
}

.upload-product-load-range,
.proof-section-load-range {
    /* border: 3px solid lawngreen; */
    background-color: white;
    width: 100%;
    height: 7px;
    border-radius: 5px;
}

.upload-product-load-range-inner,
.proof-section-load-range-inner {
    background-color: rgb(0, 150, 0);
    /* background-color: rgb(0, 170, 0); */
    height: 100%;
    width: 0%;
    /* width: 0%; */
    border-radius: 5px;
}

.upload-product-upload-history-right,
.proof-section-upload-history-right {
    /* border: 3px solid green; */
    color: rgb(0, 150, 0);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.3rem;
}

.upload-product-upload-history-bottom,
.proof-section-upload-history-bottom {
    /* border: 3px solid orangered; */
}

.upload-product-upload-history-x,
.proof-section-upload-history-x {
    /* border: 3px solid black; */
    height: 60px;
    width: 30px;
    
    width: 20px;
    
    font-size: 1.4rem;
    font-weight: bold;
    display: flex;
    justify-content: end;
    align-items: center;
    /* padding: 0 0.7rem; */
    /* margin-left: 0.2rem; */
    color: rgb(220, 0, 0);
    cursor: pointer;

    /* display: none; */
}

.upload-product-upload-history-x:hover,
.proof-section-upload-history-x:hover {
    font-size: 1.5rem;
    transition: all 0.2s;
}



.proof-section-comment-container-proofinfo,
.proof-section-comment-container {
    /* border: 3px solid purple; */
    width: 100%;
    /* width: 50%; */
    min-height: 100%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}
.proof-section-comment-container-proofinfo {
    padding: 0;
    justify-content: start;
    margin-top: 1rem;
}

.proof-section-upload-container-proofinfo span,
.proof-section-comment-container-proofinfo span,
.proof-section-comment-container span {
    /* border: 3px solid green; */
    /* font-size: 0.95rem; */
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 0.2rem;
}
.proof-section-upload-container-proofinfo span,
.proof-section-comment-container-proofinfo span {
    margin-bottom: 0.5rem;
}

.proof-section-comment-container label {
    /* border: 3px solid green; */
    font-size: 0.9rem;
    margin-bottom: 0.7rem;
    letter-spacing: 0;
}

.proof-section-comment-container textarea {
    /* border: 3px solid blue; */
    height: 100%;
}

.proof-section-comment-textarea {
    font-size: 1rem;
    width: 100%;
    padding: 0.5rem;
    resize: none;
    border-radius: 5px;
    letter-spacing: 0.5px;
    outline: none;
}

.proof-section-comment-textarea::placeholder {
    color: rgb(70, 70, 70);
    font-size: 0.9rem;
}

.profilinfo-picture-proof,
/* .profilinfo-picture-proof-proofinfo, */
.profilinfo-picture-edit,
.profilinfo-picture-own {
    /* border: 3px solid yellow; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* min-width: 80px; */
    /* height: 80px; */

}

.profilinfo-picture-proof-child,
/* .profilinfo-picture-proof-proofinfo-child, */
.profilinfo-picture-edit-child,
.profilinfo-picture-own-child {
    /* border: 3px solid black; */
    background-color: rgb(200, 200, 200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}
.picture-proof-upload {
    /* border: 3px solid red; */
    position: fixed;
    background-color: rgb(200, 200, 200);
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;

    /* z-index: 99999; */
    display: none;
    /* opacity: 1; */
}

.picture-proof-upload-container,
.profilinfo-picture-edit-child-container,
.profilinfo-picture-own-child-container {
    /* border: 3px solid red; */
    max-width: 100%;
    max-height: 100%;
}

.profilinfo-picture-proof-child-notavailable,
.profilinfo-picture-edit-child-notavailable,
.profilinfo-picture-pdf-child-notavailable,
.profilinfo-picture-own-child-notavailable {
    /* border: 3px solid black; */
    background-color: rgb(200, 200, 200);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 7px;
    position: relative;
    cursor: pointer;
}

.profilinfo-picture-proof-child-notavailable {
    width: 65px;
    height: 65px;
}

.profilinfo-picture-edit-child input,
.profilinfo-picture-own-child input {
    display: none;
}

.profilinfo-picture-edit-child-container-img,
.profilinfo-picture-own-child-container-img {
    /* border: 3px solid red; */
    border-radius: 3px;

    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;

    /* display: none; */
}
.picture-proof-upload-container-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.profilinfo-picture-edit-child-img {
    /* border: 3px solid green; */
    border-radius: 3px;

    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;

    /* display: none; */
    /* opacity: 0; */

}

.profilinfo-picture-proof-child-crossbar-notavailable,
.profilinfo-picture-edit-child-crossbar-notavailable,
.profilinfo-picture-own-child-crossbar-notavailable {
    border: 1px solid whitesmoke;
    position: absolute;
    width: 100%;
    transform: rotate(-45deg);
}

.profilinfo-picture-edit-child-svg-cam,
.profilinfo-picture-own-child-svg-cam {
    /* border: 3px solid green; */
    color: whitesmoke;
    position: absolute;
    top: 19px;
    left: 22px;
}

.profilinfo-picture-proof-child-svg-cam-notavailable,
.profilinfo-picture-edit-child-svg-cam-notavailable,
.profilinfo-picture-own-child-svg-cam-notavailable,
.profilinfo-picture-pdf-child-svg-cam-notavailable {
    /* border: 3px solid purple; */
    color: rgb(230, 230, 230);
    position: absolute;
    top: 9px;
    left: 10px;
}
.profilinfo-picture-proof-child-svg-cam-notavailable {
    top: 11px;
    left: 12.5px;
}
.profilinfo-picture-pdf-child-svg-cam-notavailable {
    /* border: 3px solid green; */
    position: relative;
    top: 0;
    left: 0;

    /* top: 9px; */
    /* left: 10px; */
    /* min-width: 100%; */
    /* min-height: 100%; */
}

.profilinfo-picture-edit-child-svg-plus,
.profilinfo-picture-own-child-svg-plus {
    color: whitesmoke;
    position: absolute;
    bottom: 4px;
    right: 0px;
}

@media (min-width: 360px) {
    .filter-box-child-header-child,
    .delete-box-child-header-child,
    .proofed-product-box-child-header-child,
    .create-stuff-box-child-header-child,
    .create-product-box-child-header-child,
    .choose-all-header-container,
    .choose-all-header-container-proof,
    .choose-none-header-container,
    .choose-none-header-container-proof,
    .exit-header-container-proof,
    .exit-header-container {
        padding: 0.4rem 0.5rem !important;
    }
}

@media (min-width: 365px) {
    .root-edit-child-number {
        margin: auto 0.7rem;
    }
}

@media (min-width: 370px) {
    .filter-box-child-header,
    .delete-box-child-header,
    .proofed-product-box-child-header,
    .create-stuff-box-child-header {
        padding: 0.5rem 1rem;
    }

    .save-copy-text-small {
        display: none;
    }
    .save-copy-text-big {
        display: inherit;
    }
}

@media (min-width: 390px) {
    .create-stuff-box-child-header-child {
        padding: 0.4rem 0.8rem;
    }

    .proof-section-icon-header-proofinfo {
        margin: 0 1rem 0 0;
    }

    .filter-box-child-header-child,
    .delete-box-child-header-child,
    .proofed-product-box-child-header-child,
    .create-stuff-box-child-header-child,
    .create-product-box-child-header-child,
    .choose-all-header-container,
    .choose-all-header-container-proof,
    .choose-none-header-container,
    .choose-none-header-container-proof,
    .exit-header-container-proof,
    .exit-header-container {
        padding: 0.4rem 0.7rem !important;
    }
}

@media (min-width: 400px) {
    .create-product-box-child-header {
        padding: 0.5rem 1rem;
    }

    .search-container {
        margin-left: 0.7rem;
    }

    .search-product {
        margin: 0 0 7px 0;
        max-width: 100%;
    }

    .filter-container,
    .filter-container-proof {
        cursor: pointer;
        padding: 0.5rem 0.7rem;
    }

    .filter-header {
        display: inherit;
    }

    .search-icon-filter.active {
        display: flex;
    }
}

@media (min-width: 470px) {
    .upload-product-upload-history-top-container,
    .proof-section-upload-history-top-container,
    .upload-product-upload-history-container,
    .proof-section-upload-history-container {
        padding-left: 25px;
    }

    .upload-product-upload-history-middle,
    .proof-section-upload-history-middle {
        margin: 0 1rem;
    }
}

@media (min-width: 500px) {
    .search-container.active {
        margin: 0 1rem;
        display: inherit;
    }
}

@media (min-width: 600px) {
    .root-container {
        padding: 0 1rem;
    }

    .root-container .arrow-back,
    .root-container .arrow-back-first-step,
    .root-container .arrow-back-sec-step {
        margin-left: 0;
        margin-right: 0;
    }

    .root-container .span-split {
        margin: -0.2rem 0.7rem 0 0.2rem;
    }

    .edit-container {
        min-width: 120px;
    }

    .choose-add-box-container-file {
        min-width: 120px;
    }

    .products-container-header-child,
    .state-col {
        width: 135px;
    }

    .checkbox-container {
        width: 70px;
    }

    .small-container {
        width: 70px;
    }

    .middle-container {
        width: 160px;
    }

    .big-container {
        width: 200px;
    }

    .profilinfo-parent {
        /* min-width: 48%; */
        margin: 0 0.5rem;
    }

    .profilinfo-parent-proof-until {
        margin-top: 1rem;
    }

    .profilinfo-product-sidefact,
    .profilinfo-product-own-sidefact,
    .profilinfo-edit-sidefact,
    .profilinfo-proof-sidefact,
    .profilinfo-proof-proofinfo-sidefact,
    .profilinfo-stuff-sidefact {
        max-width: 680px;
    }

    .profilinfo-container-child-top-child-delete {
        padding-bottom: 1rem;
    }

    .profilinfo-parent:not(:last-of-type) {
        margin-bottom: 0;
    }

    .profilinfo-productname {
        margin-top: auto;
    }

    .profilinfo-picture-container {
        width: 100%;
        max-width: 300px;
        margin: 0 0.5rem;
    }

    .profilinfo-container-child-top-child {
        flex-direction: row;
        justify-content: space-around;
    }


    
    .proof-section-company-container {
        flex-direction: row-reverse;
    }

    .proof-section-company-container-top {
        width: 40%;
    }

    .proof-section-company-container-bottom {
        width: 57%;
    }

    .proof-section-container-bottom-proofinfo,
    .proof-section-container-bottom {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    
    .proof-section-upload-container {
        width: 50%;
    }
    .proof-section-upload-container-proofinfo {
        width: 48%;
    }

    .proof-section-comment-container {
        width: 50%;
    }
    .proof-section-comment-container-proofinfo {
        width: 48%;
    }

    .upload-product-upload-history-top-container,
    .proof-section-upload-history-top-container,
    .upload-product-upload-history-container,
    .proof-section-upload-history-container {
        padding-left: 0px;
    }

    .upload-product-upload-history-middle,
    .proof-section-upload-history-middle {
        margin: 0 0.5rem;
    }
}

@media (min-width: 700px) {
    .main-help-container,
    .proof-container,
    .products-container {
        height: calc(100% - 100px);   
    }

    .filter-box,
    .delete-box,
    .proofed-product-box,
    .create-stuff-box,
    .create-product-box {
        top: 100px;
        /* height = 100% - .header (= 100px) - (4rem) = 2rem margin oben und unten */
        height: calc(100% - 100px - 4rem);
        /* max-height: 650px; */
    }

    .upload-product-upload-history-middle,
    .proof-section-upload-history-middle {
        margin: 0 1rem;
    }

    .profilinfo-container-child-footer-import,
    .profilinfo-container-child-footer-edit,
    .profilinfo-container-child-footer-own,
    .profilinfo-container-child-footer {
        align-items: start;
    }
    .profilinfo-container-child-footer-import span,
    .profilinfo-container-child-footer-edit span,
    .profilinfo-container-child-footer-own span,
    .profilinfo-container-child-footer span {
        margin-top: 0.2rem;
    }

}

/* ACHTUNG MIN HEIGHT !!! */
/* 782px = 650px max.height + 1rem margin top + bottom */
@media (min-height: 782px) {
    .filter-box,
    .delete-box,
    .proofed-product-box,
    .create-stuff-box,
    .create-product-box {
        margin: auto;
    }
}

@media (min-width: 800px) {
    .filter-box.resize,
    .create-product-box.resize {
        min-height: 271px;
    }

    .create-product-choose-box-proof-child,
    .create-product-choose-box-child {
        height: 120px;
    }

    .create-product-choose-box-proof,
    .create-product-choose-box {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .create-product-choose-box-proof-child-top,
    .create-product-choose-box-child-top,
    .create-file-product-choose-box-child-top {
        margin-bottom: 0;
    }
}

@media (min-width: 1000px) {
    .filter-box,
    .delete-box,
    .proofed-product-box,
    .create-stuff-box,
    .create-product-box {
        right: 300px;
        width: calc(92% - 300px);
    }

    .file-footer-container-home,
    .file-footer-container {
        right: calc(1rem + 300px);
    }
}