:root {
    --darkest0: rgb(2, 37, 55);

    --primary10: rgb(0, 70, 105);
    --primary20: rgb(7, 100, 138);
    --primary30: rgb(7, 117, 157);
    --primary40: rgb(20, 134, 175);
    --primary50: rgb(29, 147, 187);
    --primary60: rgb(55, 162, 195);
    --primary70: rgb(84, 177, 203);
    --primary80: rgb(126, 199, 217);
    --primary90: rgb(175, 221, 232);
    --primary100: rgb(223, 242, 246);

    --opacity-primary10: rgba(0, 70, 105, 0.95);
    --opactiy-darkest0: rgb(2, 37, 55);

    --secondary10: rgb(50, 98, 102);
    --secondary20: rgb(61, 133, 145);
    --secondary30: rgb(67, 153, 170);
    --secondary40: rgb(74, 174, 196);
    --secondary50: rgb(80, 190, 215);
    --secondary60: rgb(85, 200, 222);
    --secondary70: rgb(104, 210, 230);
    --secondary80: rgb(142, 223, 238);
    --secondary90: rgb(185, 236, 245);
    --secondary100: rgb(227, 247, 251);

    --tertiary10: rgb(173, 255, 90);
    --tertiary20: rgb(185, 255, 109);
    --tertiary30: rgb(192, 255, 119);
    --tertiary40: rgb(199, 255, 130);
    --tertiary50: rgb(204, 255, 138);
    --tertiary60: rgb(212, 255, 156);
    --tertiary70: rgb(219, 255, 173);
    --tertiary80: rgb(230, 255, 197);
    --tertiary90: rgb(240, 255, 220);
    --tertiary100: rgb(249, 255, 241);

    --greyscale0: rgb(0, 0, 0);
    --greyscale10: rgb(38, 38, 38);
    --greyscale20: rgb(67, 67, 67);
    --greyscale30: rgb(85, 85, 85);
    --greyscale40: rgb(123, 123, 123);
    --greyscale50: rgb(157, 157, 157);
    --greyscale60: rgb(196, 196, 196);
    --greyscale70: rgb(217, 217, 217);
    --greyscale80: rgb(233, 233, 233);
    --greyscale90: rgb(245, 245, 245);
    --greyscale100: rgb(255, 255, 255);

    --error50: rgb(200, 30, 30);
    --error70: rgb(193, 106, 106);
}

::-webkit-scrollbar {
    height: 12px;
    width: 16px;
}

::-webkit-scrollbar-track {
    background: var(--greyscale70);
    box-shadow: inset 0 0 5px var(--greyscale30);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--darkest0);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--darkest0), var(--primary10));
    border-radius: .5rem;
}

body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    font-family: 'Raleway', 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', 'Raleway', sans-serif;
}

.filter-tertiary50 {
    filter: brightness(0) saturate(100%) invert(91%) sepia(16%) saturate(1017%) hue-rotate(33deg) brightness(101%) contrast(105%);
}

.filter-primary10 {
    filter: brightness(0) saturate(100%) invert(19%) sepia(95%) saturate(1022%) hue-rotate(169deg) brightness(91%) contrast(104%);
}

.filter-greyscale100 {
    filter: brightness(0) saturate(100%) invert(89%) sepia(100%) saturate(4%) hue-rotate(271deg) brightness(110%) contrast(97%);
}

.bg-heading-banner-1 {
    background: url("../images/headingBanner/headingBanner1.webp");
}

.bg-heading-banner-2 {
    background: url("../images/headingBanner/headingBanner2.webp");
}

.bg-heading-banner-3 {
    background: url("../images/headingBanner/headingBanner3.webp");
}

.bg-heading-banner-4 {
    background: url("../images/headingBanner/headingBanner4.webp");
}

.bg-heading-banner-5 {
    background: url("../images/headingBanner/headingBanner5.webp");
}

.bg-heading-banner-6 {
    background: url("../images/headingBanner/headingBanner6.webp");
}

.bg-heading-banner-admin-1 {
    background: url("../images/headingBanner/headingBannerAdmin1.webp");
}

.bg-heading-banner-admin-2 {
    background: url("../images/headingBanner/headingBannerAdmin2.webp");
}

.bg-heading-banner-admin-3 {
    background: url("../images/headingBanner/headingBannerAdmin3.webp");
}

.bg-heading-banner-1, .bg-heading-banner-2, .bg-heading-banner-3, .bg-heading-banner-4, .bg-heading-banner-5,
.bg-heading-banner-6, .bg-heading-banner-admin-1, .bg-heading-banner-admin-2, .bg-heading-banner-admin-3 {
    background-size: 100% 100%;
}

.animated-border-bottom,
.animated-border-bottom:focus-visible {
    outline: none;
}

.animated-border-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
}

.animated-border-bottom:hover::after,
.animated-border-bottom:focus::after,
.animated-border-bottom:focus-visible::after {
    transform: scaleX(1);
    outline: none;
}

body {
    margin: 0;
    color: var(--primary10);
}

article {
    margin-block-start: 2em;
    margin-block-end: 1em;
    width: 100%;
}

article > p {
    padding-inline: 1em;
}

article h1 {
    line-height: 1.1;
    font-size: 2em;
    margin-block-start: 1em;
    margin-block-end: 0.5em;
    font-weight: bold;
}

/* Styles for the range input */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: var(--greyscale50);
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--darkest0);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--darkest0);
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--darkest0);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
    background: var(--darkest0);
}

iframe {
    display: inline;
}

.bannerArticle {
    margin-block-start: 1em;
}

#root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@keyframes stickyAnimation {
    from {
        top: -80px;
    }
    to {
        top: 0;
    }
}

@keyframes opacityIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.8;
    }
}

.aria-checked-focus-visible-bg-transparent[aria-checked="true"]:focus-visible {
    background-color: transparent;
}

.aria-checked-hover-bg-transparent[aria-checked="true"]:hover {
    background-color: transparent;
}

.aria-checked-focus-visible-bg-greyscale-100[aria-checked="true"]:focus-visible {
    background-color: var(--greyscale100);
}

.aria-checked-hover-bg-greyscale-100[aria-checked="true"]:hover {
    background-color: var(--greyscale100);
}

.aria-checked-disabled[aria-checked="true"]:is(:disabled, [aria-disabled="true"]) {
    background-color: #0000001F;
    color: #00000061;
    border-color: #0000001F;
}

.aria-checked-disabled[aria-checked="true"]:is(:disabled, [aria-disabled="true"]):after {
    color: #00000061;
}


.triangle-right::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid white;
    position: absolute;
    left: calc(50% + 1px);
    top: 50%;
    transform: translate(-50%, -50%);
}

.triangle-right:focus-visible::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--tertiary50);
    position: absolute;
    left: calc(50% + 1px);
    top: 50%;
    transform: translate(-50%, -50%);
}

.triangle-down::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid white;
    position: absolute;
    left: calc(50%);
    top: calc(50% + 1px);
    transform: translate(-50%, -50%);
}

.triangle-down:focus-visible::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--tertiary50);
    position: absolute;
    left: calc(50%);
    top: calc(50% + 1px);
    transform: translate(-50%, -50%);
}

.transparentHeader {
    background-color: rgba(0, 0, 0, 0);
}

.languageButton {
    float: left;
    margin: 1.5em;
    width: 32px;
    height: 32px;
    background-color: inherit;
    border: none;
}

.languageButton:hover {
    box-shadow: 0 0 2px 2px rgb(255 255 255);
    border-radius: 5px;
    border-color: var(--primary10);
    outline: 0;
    cursor: pointer;
}

.languageButton[selectedLang="DE_DE"] {
    background-image: url("../images/flagSwitchDe.svg");
}

.languageButton[selectedLang="EN_US"] {
    background-image: url("../images/flagSwitchUs.svg");
}

.headingArticle {
    margin-block-start: .5em;
    margin-block-end: .5em;
    font-size: 2em;
    color: var(--primary10);
}

.headingArticle h1 {
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 2em;
}

.headingArticleUnderline {
    margin-block-end: 1.5em;
    margin-inline: auto;
    width: 50%;
    height: 0.1em;
    background: var(--primary10);
}

.link, .link:link {
    color: var(--primary50);
    font-weight: bold;
    text-decoration: underline;
}

.link:hover, .link:focus-visible {
    color: var(--primary50);
    outline-color: var(--primary50);
    outline-offset: 3px;
    text-decoration: none;
}

.link:visited {
    color: var(--primary10);
}

.stickyHeader {
    width: 100vw;
    position: fixed;
    background-color: var(--opactiy-darkest0);
    animation: stickyAnimation 1.5s;
    z-index: 999;
}

.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: var(--greyscale100);
    cursor: pointer;
}

.skip:focus {
    position: static;
    width: auto;
    height: auto;
}

.trialContainer {
    margin-inline: auto;
    padding: .5em;
}

.trial {
    background-color: var(--tertiary50);
    color: var(--primary10) !important;
    border: solid 0.1em var(--tertiary10);
    padding: 0.65em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.25em;
    text-align: center;
    cursor: pointer;
}

.trial:hover, .trial:focus, .trial:focus-visible {
    background-color: var(--tertiary20);
    box-shadow: 0 0 18px 5px rgb(204 255 135 / 40%);
}

.navbar {
    display: flex;
    width: 100vw;
}

.navbar:hover {
    background-color: var(--darkest0);
}

.navbar ul {
    box-shadow: inset 0 7px 9px -7px rgb(0 0 0 / 0%);
    width: 100%;
    height: 2.8em;
}

.navbar li {
    float: left;
    margin-left: 1em;
    color: var(--primary100);
    cursor: pointer;
    padding: 0.5em 1em;
}

.navbar a {
    display: block;
    color: var(--primary100);
    margin-inline: auto;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.text-nowrap {
    text-wrap: nowrap;
}

.writing-mode-rl {
    writing-mode: vertical-rl;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: var(--greyscale60) transparent transparent transparent;
}

.inlineNavigation a:hover, .inlineNavigation a:focus, .inlineNavigation a:focus-visible {
    border-bottom: 3px solid var(--tertiary50);
}

.navbar li:hover a, .navbar li a:focus, .navbar li a:focus-visible {
    border-bottom: 3px solid var(--tertiary50);
}

.banner {
    background: linear-gradient(90deg, rgb(2, 37, 55) 0%, rgba(0, 70, 105, 1) 50%, rgb(2, 37, 55) 100%);
    text-align: left;
    padding: 0.5em 2em 0.5em 12em;
    box-shadow: inset 0 7px 9px -7px rgb(0 0 0 / 0%);
}

.bannerMessage {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--greyscale100);
    max-width: 500px;
    text-transform: uppercase;
}

#primary-navigation[data-state="opened"] {
    animation: clipPathCircleOpen 750ms ease-in-out forwards;
    display: block;
}

#primary-navigation[data-state="closing"] {
    animation: clipPathCircleClose 750ms ease-in-out forwards;
    display: block;
}

#primary-navigation[data-state="closed"] {
    display: none;
}

@keyframes clipPathCircleOpen {
    0% {
        clip-path: circle(0% at top center);
    }
    100% {
        clip-path: circle(250% at top center);
    }
}

@keyframes clipPathCircleClose {
    0% {
        clip-path: circle(250% at top center);
    }
    100% {
        clip-path: circle(0% at top center);
    }
}

.icon {
    width: inherit;
    aspect-ratio: 1/1;
}

.icon:after, .icon:before {
    border: none;
    box-sizing: inherit;
}

.card {
    width: 100%;
    text-align: center;
    margin-inline: auto;
    flex-grow: 1;
}

.menu-toggle {
    padding: 1em;
    background: transparent;
    border: 0;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    cursor: pointer;
    font-size: 1.5em;
}

.hamburger, .hamburger::before, .hamburger::after {
    content: "";
    display: block;
    background: var(--greyscale100);
    height: 3px;
    width: 1.75em;
    border-radius: 3px;
    transition: all ease-in-out 500ms;
}

.hamburger::before {
    transform: translateY(-6px);
}

.hamburger::after {
    transform: translateY(3px);
}

.menu-toggle[aria-expanded="true"] .hamburger {
    transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger::before {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger::after {
    transform: translateY(-3px) rotate(-90deg);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.scrollTopBtn {
    display: none;
}

.marginTop {
    margin-top: 100px;
}

.welcomeDiv {
    padding: 5px;
    background-color: rgb(8, 97, 22);
    color: rgb(56, 246, 137);
}

.welcomeInput {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;
}

.scrollTopIcon {
    background: url(../images/toTop.svg) scroll center;
    background-size: 90% 90%;
    height: 100%;
    width: 100%;
}

.gap_2 {
    gap: 2em;
}

.content {
    text-align: left;
    padding: 0 2em;
}

.benefits {
    display: block;
}

.benefit {
    margin: 1em auto;
    max-width: 66em;
    background: linear-gradient(65deg, rgba(2, 37, 55, 1) 0%, rgba(0, 70, 105, 1) 100%);
    color: var(--greyscale100);
    display: grid;
    grid-template-columns: 5em auto;
    gap: 1em;
    padding: 1em;
    align-items: center;
    border: solid 2px var(--primary10);
    border-radius: 1em;
    box-shadow: 0 0 27px 0 rgb(0 70 105 / 40%);
}

.benefitContent {
    height: 100%;
}

.benefitHeader {
    color: var(--tertiary50);
    font-size: 1.8em;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;
}

.benefitDescription {
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 1.2em;
}

.benefitIcon {
    box-sizing: initial;
    color: var(--tertiary50);
    border: solid 3px;
    height: 48px;
    width: 48px;
    padding: 0.5em;
    border-radius: 50%;
}

.mainDescription {
    max-width: 70rem;
    margin-inline: auto;
    font-size: 1.3em;
    line-height: 1.3em;
}

.mainDescription:before {
    content: open-quote;
}

.mainDescription:after {
    content: close-quote;
}

.mainDescription:before, .mainDescription:after {
    display: inline-block;
    vertical-align: bottom;
    z-index: -1;
    color: var(--tertiary50);
    font-size: 4em;
    top: 0.2em;
    position: relative;
}


@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotation {
    0% {
        --gradient-angle: 0deg;
    }
    100% {
        --gradient-angle: 360deg;
    }
}

.process_border[aria-busy="true"]:after {
    filter: blur(.2rem);
}

.process_border[aria-busy="true"]:after,
.process_border[aria-busy="true"]:before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: -.1rem;
    background: conic-gradient(from var(--gradient-angle), var(--darkest0), var(--primary10), var(--tertiary50), var(--primary10), var(--darkest0));
    border-radius: inherit;
    animation: rotation 2.5s linear infinite;
}

.contactEmailButton {
    outline: none;
    border-radius: .5em;
    position: relative;
    z-index: 0;
    padding: 0.5em;
}

.test {
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0% #ffffff), color-stop(100%, #ffffff));
}

.contactEmailButton::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: .4em;
    padding: .1em;
    background: linear-gradient(45deg, var(--primary10), var(--tertiary50));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.contactEmailButton:hover, .contactEmailButton:focus-visible {
    background: var(--greyscale20);
    z-index: 0;
    position: relative;
    border: none !important;
    outline: none !important;
}

.contactEmailButton:hover:after, .contactEmailButton:focus-visible:after,
.contactEmailButton:hover:before, .contactEmailButton:focus-visible:before {
    content: "";
    position: absolute;
    inset: -.1rem;
    z-index: -1;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--primary10),
            var(--primary70),
            var(--tertiary50),
            var(--primary70),
            var(--primary10)
    );
    border-radius: inherit;
    animation: rotation 2s linear infinite;
}

.contactEmailButton:hover:after, .contactEmailButton:focus-visible:after {
    filter: blur(3.5rem);
}

.socialButton {
    outline: none !important;
    box-sizing: initial;
    border-radius: .5em;
    position: relative;
    z-index: 0;
    padding: 0.6rem;
    aspect-ratio: 1/1;
    width: 1.25em;
}

.socialButton::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: .4em;
    padding: .1em;
    background: linear-gradient(45deg, var(--primary10), var(--tertiary50));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.socialButton:hover, .socialButton:focus-visible {
    z-index: 0;
    position: relative;
    border: none !important;
}

.socialButton:hover:after, .socialButton:focus-visible:after,
.socialButton:hover:before, .socialButton:focus-visible:before {
    content: "";
    position: absolute;
    inset: -0.04rem;
    z-index: -1;
    background: conic-gradient(
            from var(--gradient-angle),
            var(--primary10),
            var(--primary70),
            var(--tertiary50),
            var(--primary70),
            var(--primary10)
    );
    border-radius: inherit;
    animation: rotation 2s linear infinite;
}

.socialButton:hover:after, .socialButton:focus-visible:after {
    filter: blur(3.5rem);
}

.editButtonIcon:before {
    content: "";
    width: 1.7rem;
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
    background: url(../images/edit.svg) no-repeat;
    background-size: contain;
}

.trashButtonIcon:before {
    content: "";
    width: 1.7rem;
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
    background: url(../images/trash.svg) no-repeat;
    background-size: contain;
}

.about-us-desc {
    margin-inline: auto;
    max-width: 68rem;
    padding-inline: 1em;
    font-size: 1.2em;
}

.mg-block-end-3 {
    margin-block-end: 3em;
}

@keyframes floatingLabel {
    from {
        top: 2em;
        left: 2em;
        font-weight: 300;
    }
    to {
        top: -0.5em;
        left: 1.2em;
        font-weight: 500;
    }
}

.inlineNavigation {
    display: flex;
    gap: 4em;
    align-items: center;
}

.burgerContainer {
    display: none;
}

.mw-68 {
    max-width: 68em;
    margin-inline: auto;
}

.pd-1 {
    padding: 1em;
}

@media screen and (max-width: 1000px) {
    .benefits {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .navbar a {
        margin-left: 2em;
        margin-inline: none;
    }

    .navbar li {
        padding: .5em 0;
    }

    .inlineNavigation {
        display: none;
    }

    .burgerContainer {
        display: block;
    }

    .trialHeader {
        display: none !important;
    }
}

@media screen and (max-width: 850px) {

    .headingArticle h1 {
        font-size: 1.75em;
    }

    .headingArticleUnderline {
        margin-inline: 0.5em;
        width: auto;
    }

    .benefit {
        margin: auto;
    }
}

@media screen and (max-width: 640px) {
    .bg-heading-banner-1, .bg-heading-banner-2, .bg-heading-banner-3, .bg-heading-banner-4, .bg-heading-banner-5,
    .bg-heading-banner-6, .bg-heading-banner-admin-1, .bg-heading-banner-admin-2, .bg-heading-banner-admin-3 {
        background-size: cover;
    }
}

@media screen and (max-width: 600px) {
    .banner {
        text-align: center;
    }

    .footer p {
        margin-block-start: 0;
        margin-block-end: 0.5em;
    }

    .footerInformation {
        flex-direction: column;
        align-items: center;
    }

    .footerNavigation {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
}

@media screen and (max-width: 480px) {

    .menu-toggle {
        padding: 1em 0.2em;
    }

    .phaseIn {
        display: block !important;
        animation: opacityIn 1.5s;
    }

    .navbar a {
        margin-left: 0;
    }

    .navbar ul {
        width: 100%;
        height: auto;
    }

    .navbar li {
        padding: 0.75em;
        float: none;
        margin-left: 0;
        color: var(--primary100);
        border-bottom: 1px solid var(--tertiary50);
    }


    .navbar li:last-child {
        border-bottom: none;
    }

    .benefits {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .benefit {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: auto;
    }

    .benefitContent {
        height: auto;
    }

    .content {
        padding: 0 1em;
    }

    .scrollTopBtn {
        position: fixed;
        right: 3em;
        bottom: 3em;
        border-radius: 50%;
        cursor: pointer;
        height: 4em;
        width: 4em;
        background: linear-gradient(65deg, rgba(2, 37, 55, 1) 0%, rgba(0, 70, 105, 1) 100%);
        border: 1px solid var(--tertiary50);
        color: var(--primary100);
        opacity: 0.8;
    }

    .scrollTopBtn > a {
        display: block;
        width: 38px;
        height: 38px;
        margin-inline: auto;
    }

    .languageButton {
        margin: 1.5em 1em;
    }

    .banner {
        padding: .5em 1em .5em 1em;
    }

    .flex_direction_column {
        flex-direction: column;
    }
}