:root {
    /* fonts */
    /* --uiFont: "Inter", sans-serif; */
    --uiFont: "Urbanist", sans-serif; /* for paragraphs */
    /* --titleFont: 'Exo 2', sans-serif; */
    --titleFont: "Michroma", sans-serif; /* for brand titles */
    /* font weights */
    --lightWeight: 200;
    --regularWeight: 400;
    --boldWeight: 600;
    --highWeight: 800;
    /* font sizes */
    --smallFont: 14px;
    --normalFont: 16px;
    --largeFont: 26px;
    --hugeFont: 32px;
    --strongFont: 600;
    /* colours */
    --brandColor-1: #2C5F2D; /* forest green */
    --brandColor-2: #97BC62; /* moss green */
    --brandColor-3: #31473A; /* dark green CTA */
    --brandGradient-1: linear-gradient(27deg, rgba(44,95,45,1) 17%, rgba(151,188,98,1) 100%);
    --lightGray: #F4F4F4; /* UI backgrouynd */
    --uiBackground-1: #010202;
    --uiBackground-2: #050d12;
    --elementBackground-1: rgb(7 18 24 / 73%);
    --elementBackground-2: linear-gradient(90deg, var(--dark) 10%, var(--));
    --elementBackground-3: #07323a;
    --gray: #747474;
    --grayHighlight: #F3F4F8;
    --lightAlertColor: #6b000033;
    --alertColor: #8a3232;
    /* elemnent sizes */
    --sideBar: 300px;
    --iconSize: 25px;
    /* whitespaces */
    --smallSpace: 10px;
    --mediumSpace: 20px;
    --largeSpace: 40px;
    --hugeSpace: 60px;
    --listSpace: 10px 20px;
    /* borders and radiusses */
    --smallRadius: 6px;
    --normalRadius: 8px;
    --largeRadius: 20px;
    --borderColor-1: var(--grayBorder);
    /* application colours */
    --primaryFontColor: #ebebeb; /* 60% */
    --light: #ffffff;
    --dark: #050d12;
    /*--darkGray: #171717;*/
    /*--darkGray: #000000ad;*/
    --ctaColor: var(--blue);
    --ctaHover: #b3f2fd;
    --darkGray: rgb(7 18 24 / 73%);
    --blue: #7ACDDC;
    --yellow: #EABA3A;
    --darkGradient: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, rgba(1, 2, 2, .7) 30%, rgba(1, 2, 2, 1) 80%);
    --yellowblueGradient: -webkit-linear-gradient(0deg,#EABA3A, #7ACDDC);
    --bluewhiteGradient: -webkit-linear-gradient(0deg,#7ACDDC, #fff);
    --inputGradient: -webkit-linear-gradient(0deg,var(--dark), var(--darkGray));
    --grayBorder: #282828;
    ;
    /* application fonts */
    --font: "Urbanist", sans-serif;
    --logoFont: "Michroma", sans-serif;
    /* application spacing */
    --headerSpace: 64px;
    --basicWhitespace: 24px;
    --mediumWhitespace: 48px;
    --largeWhitespace: 72px;
    --mediumElement: 500px;
    --largeElement: 600px;
    --elementGap: var(--mediumWhitespace);
    --smallGap: var(--basicWhitespace);
    --wideContainer: calc(var(--mediumElement) * 2 + calc(var(--elementGap) * 2));
    /* application element design */
    --normalRadius: 12px;
    --smallRadius: 4px;
    --basicShadow: rgba(0, 0, 0, 0.16) 0px 1px 1px;
}


:where(.card table, .card .basicGrid) {
    width: 100%;
}

*, ::after, ::before {
    box-sizing: border-box;
    position: relative;
}

a,
button {
    cursor: revert;
}

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;G1897
    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    /* Corrects inability to style clickable `input` types in iOS */
    -webkit-appearance: none;
}

    button.col-title {
        justify-content: flex-start;
        color: var(--primaryFontColor);
        text-transform: capitalize;
    }

video {
    display: flex;
    width: 100%;
    border-radius: var(--normalRadius);
    cursor: pointer;
}

blockquote::before,
q::before,
blockquote::after,
q::after {
    content: '';
    content: none;
}

:focus-visible {
    outline: 1px solid var(--blue);
}

html {
    text-size-adjust: none;
}

meter {
    appearance: revert;
}


::placeholder {
    color: unset;
}

table {
    width: 100%;
    }

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
}

html {
    background-color: var(--uiBackground-1);
}

.contentSwirl {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
    animation: opacityAni 90s infinite linear;
}

    .contentSwirl img {
        height: 100vh;
        width: auto;
        animation: rotateSphere 900s infinite linear;
    }


.sphereSwirl {
    position: absolute;
    height: 100%;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    overflow: hidden;
    transform: scale(2.5);
    z-index: 0;
}

@media screen and (min-width: 1920px) {
    .sphereSwirl {
        transform: scale(4.5);
    }

    .contentSwirl {
        transform: scale(2);
    }
}



.sphareShader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
    z-index: 1;
}

.sphereSwirl svg {
    animation: rotateSphere 345s infinite linear;
}



.animatedSphere {
    position: absolute;
    height: 100%;
    width: auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: sphereScale 15s infinite
}

    .animatedSphere img {
        width: 100%;
        height: auto;
        animation: rotateSphere 45s infinite linear;
        opacity: .5;
    }

@keyframes rotateSphere {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes sphereScale {
    0% {
        transform: scale(1);
        opacity: .4;
    }

    50% {
        transform: scale(1.15);
        opacity: .8;
    }

    100% {
        transform: scale(1);
        opacity: .4;
    }
}

@keyframes opacityAni {
    0% {
        /*transform: scale(1.5);*/
        opacity: .45;
    }

    50% {
        /*transform: scale(2);*/
        opacity: .6;
    }

    100% {
        /*transform: scale(1.5);*/
        opacity: .45;
    }
}

.bgrAnimation {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

svg.fillIcon path {

}


h1 {
    font-size: var(--hugeFont);
    font-family: var(--titleFont);
}

h2 {
    font-size: var(--largeFont);
    font-family: var(--titleFont);
    font-weight: 400;
}

h3 {
    font-size: calc(var(--normalFont) * 1.3);
    font-family: var(--uiFont);
    font-weight: 400;
}

h4 {
    font-size: var(--normalFont);
    font-family: var(--uiFont);
}

h1, h2, h3, h4 {
    margin: 0;
    margin-bottom: 20px;
    line-height: 130%;
    font-weight: 400;
}

p {
    line-height: 150%;
    font-family: var(--uiFont);
    margin: 0 0 20px 0;
}

h4 + p {
    margin-bottom: 30px;
}

/* structure */
body {
    font-family: var(--uiFont);
    font-size: var(--normalFont);
    font-weight: var(--regularFont);
    color: var(--primaryFontColor);
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
}

.customCheckbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    width: var(--mediumSpace);
    height: var(--mediumSpace);
    background-color: var(--elementBackground-1);
    border: 1px solid var(--grayBorder);
    border-radius: var(--radius);
    transition: 0.2s all ease-in-out;
    outline: none !important;
    cursor: pointer;
    font-weight: bold;
}

    .customCheckbox::before {
        content: '-';
        display: flex;
        opacity: .2;
        font-size: 12px;
        font-weight: normal;
        color: var(--gray);
        text-align: center;
        line-height: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        position: absolute;
    }

    .customCheckbox:checked {
        background-color: var(--ctaColor);
    }

        .customCheckbox:checked::before {
            opacity: 1;
            content: '\2713';
            display: flex;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            line-height: 0;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            position: absolute;
        }


.brand {
    display: flex;
    width: 100%;
    max-width: var(--sideBar);
    position: relative;
    z-index: 3;
    height: 60px;
    justify-content: center;
    padding-left: 36px;
}

.vaelionTools {
    display: flex;
    flex-direction: row;
    gap: calc(var(--smallSpace) / 2);
    align-items: center;
}

    .vaelionTools h1 {
        line-height: 100%;
        text-transform: uppercase;
        font-size: var(--largeFont);
        margin-bottom: 2px;
    }

    .vaelionTools span {
        display: flex;
        text-transform: uppercase;
        font-family: var(--uiFont);
        background: var(--bluewhiteGradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 800;
    }

a.brandLogo {
    padding: 0;
    font-family: var(--titleFont);
    color: var(--uiBackground-1);
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    font-size: var(--largeFont);
    position: relative;
    display: flex;
    align-items: center;
}

    a.brandLogo img {
        height: 100%;
        max-height: 36px;
        width: auto;
    }

@media (max-width: 991px) {
    .brand {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
    }

    a.brandLogo {
        position: relative;
        top: 0;
        left: 0;
        padding-right: var(--hugeSpace);
        display: flex;
        align-items: center;
    }
}

span.beta {
    font-size: 8px;
    font-weight: 600;
    font-family: var(--uiFont);
    background-color: var(--uiBackground-1);
    color: var(--ctaColor);
    padding: 3px 5px;
    border-radius: 4px;
    position: relative;
    margin-bottom: 5px;
    opacity: .6;
    letter-spacing: 1px;
}

.mainContainer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.sideBar {
    display: flex;
    flex-direction: column;
    z-index: 2;
}

:where(.sideBar div) {
    display: flex;
    flex-direction: column;
}

footer {
    display: flex;
    justify-content: flex-start;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1243348364736519) 30%, rgba(0, 0, 0, 1) 100%);
    padding: var(--largeSpace);
}

.footerContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: calc(var(--wideContainer) - var(--mediumSpace));
}

footer .vaelionTools {
    margin-bottom: var(--mediumSpace);
}

    footer a.brandLogo {
        padding: 0;
        background-color: transparent;
        margin-bottom: var(--mediumSpace);
    }

.firstColumn, .secondColumn {
    display: flex;
    flex-direction: column;
    width: 50%;
}

@media screen and (min-width: 991px) {
    .sideBar {
        display: flex;
        width: 100%;
        max-width: 20%;
        background-color: var(--elementBackground-1);
        align-items: flex-end;        
    }
}

.logSidebar {
    display: flex;
    align-items: flex-end;
    padding: var(--mediumSpace);
    padding-top: 0;
}

@media screen and (min-width: 1800px) {
    .sideBar {
        max-width: 330px;
        border-right: 1px solid var(--grayBorder);
    }
}

@media screen and (max-width: 1600px) {
    .sideBar {
        width: 100%;
        max-width: 300px;
    }
}

.desktopBrand {
    display: flex;
    padding: 0 var(--mediumSpace);
    margin-bottom: var(--smallSpace);
}

.mobileBrand.vaelionTools {
    display:none;
}

@media screen and (max-width: 1200px) {
    .sideBar {
        /*width: 0;*/
        width: 100%;
        height: 60px;
        max-width: unset;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 8;
        display: flex;
        background-color: var(--uiBackground-2);
        border-bottom: 1px solid var(--grayBorder);
        justify-content: center;
        align-items: flex-start;
    }

    .logSidebar {
        padding-top: var(--smallSpace);
        border-top-left-radius: var(--normalRadius);
        border-bottom-left-radius: var(--normalRadius);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 54px 500px, rgba(0, 0, 0, 0.1) 0px -12px 300px, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.1) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
        position: fixed;
        width: 100%;
        max-width: 300px;
        right: 0;
        top: 60px;
        bottom: 0;
        scroll-behavior: smooth;
        overflow: scroll;
        background-color: var(--uiBackground-2);
        border-left: 1px solid var(--grayBorder);
        border-radius: 0;
        padding-top: 0;
    }

    .scrollableNav nav {
        margin-top: var(--mediumSpace) !important;
    }

    .desktopBrand {
        display: none;
    }
    .mobileBrand.vaelionTools {
        display: flex;
        position: relative;
        padding-left: var(--mediumSpace);
    }
}

.scrollableNav {
    width: 100%;
    max-width: var(--sideBar);

}

.langeChange .selected {
    font-weight: bold;
}

.langeChange .notselected {
    cursor: pointer;
}

.mainContent {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    min-height: 100vh;
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--largeSpace);
    width: 100%;
    padding: var(--largeSpace);
    z-index: 2;
    height: -webkit-fill-available;
    min-height: 100vh;
}



    main > * {
        max-width: 1300px;
    }

    main > h1 {
        margin: 0;
    }

main > h1 {
    background: var(--bluewhiteGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accountOptions {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--smallSpace);
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--mediumSpace);
    /*border-top: 1px solid var(--grayBorder);*/
}

/* login */
a.navLink.loginBtn {
    display: flex;
    padding: 4px 14px;
    width: fit-content;
    font-size: var(--smallFont);
    text-transform: uppercase;
    border-radius: 9999px;
    color: var(--ctaColor);
    background-color: transparent;
    border: 1px solid var(--ctaColor);
    /* align-self: flex-start; */
    transition: all .3s ease-in-out;
    justify-content: center;
    cursor: pointer;
    line-height: 1.07;
}

    a.navLink.loginBtn.active {
        background: var(--ctaColor);
        transition: all .3s ease-in-out;
        color: var(--dark);
    }

    a.navLink.loginBtn:hover {
        background-color: var(--ctaHover);
        color: var(--uiBackground-1);
        transition: all .3s ease-in-out;
    }

    a.navLink.loginBtn svg path {
        stroke: var(--ctaColor);
        transition: all .3s ease-in-out;
    }
    a.navLink.loginBtn:hover svg path {
        stroke: var(--uiBackground-1);
        transition: all .3s ease-in-out;
    }

    a.navLink.logoutBtn svg, a.navLink.loginBtn svg {
        width: 12px;
        height: 12px;
    }

a.logoutBtn {
    width: 30px;
    height: 30px;
    opacity: .4;
    display: flex;
    transition: all .3s;
}

    a.logoutBtn:hover {
    opacity: 1;
    }

.loginOptions p {
    margin-bottom: var(--smallSpace);
}

/* language selection */
ul.langChange {
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--smallSpace);
}

    ul.langChange li {
        display: flex;
        padding: 4px 14px;
        width: fit-content;
        font-size: var(--smallFont);
        text-transform: uppercase;
        border-radius: 9999px;
        color: var(--ctaColor);
        background-color: transparent;
        border: 1px solid var(--ctaColor);
        align-self: flex-start;
        transition: all .3s ease-in-out;
        justify-content: center;
        cursor: pointer;
    }


    ul.langChange li.selected {
        background-color: var(--ctaColor);
        color: var(--uiBackground-1);
        transition: all .3s ease-in-out;
    }

        ul.langChange li.notselected:hover {
            background-color: var(--ctaHover);
            color: var(--uiBackground-1);:checked
        }


/* navigation */
.toggleNavbar {
    appearance: none;
    cursor: pointer;
    width: 50px;
    height: 40px;
    color: white;
    position: fixed;
    top: 6px;
    right: 8px;
    border: none;
    background: url("img/menu-white.svg") no-repeat center/1.75rem;
    z-index: 4;
}

    .toggleNavbar:checked {
        /*background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem;*/
        background: url("img/close.svg") no-repeat center/3rem;
    }

        .toggleNavbar:checked ~ .scrollableNav {
            display: flex;
            position: fixed;
            right: 0;
            z-index: 3;
            top: 0;
            animation-name: fadeInFromNone;
            animation-duration: .65s;
            padding: 0;
            min-height: 100vh;
        }

.scrollableNav {
    display: none;
    padding: var(--mediumSpace);
}

    .scrollableNav nav {
        gap: 10px;
        width: 100%;
        flex-direction: column;
        margin-top: var(--smallSpace);
    }

@media (min-width: 1200px) {
    .toggleNavbar {
        display: none;
        position: absolute;
    }

    .scrollableNav {
        /* Never collapse the sidebar for wide screens */
        display: flex;
        /* Allow sidebar to scroll for tall menus */
        overflow-y: auto;
        position: sticky;
        top: 0;
    }
}

nav {
    display: flex;
    flex-direction: column;
}

.navTitle {
    color: var(--primaryFontColor);
    padding-left: calc(var(--smallSpace) / 2);
    font-size: var(--smallFont);
    margin-top: var(--smallSpace);
    letter-spacing: calc(1px / 2);
    text-transform: uppercase;
    font-family: var(--uiFont);
    background: var(--bluewhiteGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.navLink {
    gap: var(--smallSpace);
    font-family: var(--uiFont);
    font-weight: var(--lightFont);
    font-size: var(--normalFont);
    padding: var(--listSpace);
    border-radius: var(--smallRadius);
    display: flex;
    align-items: center;
    letter-spacing: calc(1px / 2);
    text-decoration: none;
    line-height: 100%;
}

a.navLink {
    color: var(--primaryFontColor);
}

    a.navLink.active {
        color: var(--blue);
        /*background-color: var(--grayHighlight); */
        /*    background: linear-gradient(90deg, #97bc6233, var(--uiBackground-1) 80%, #ffffff 100%);*/
    }

iframe {
    border-radius: var(--normalRadius);
}

/* links & buttons */
main a {
    text-decoration: underline;
    text-underline-position: under;
    cursor: pointer;
}


button {
    /*    margin-left: var(--smallSpace);*/
    text-transform: uppercase;
}

    a, button.txtButton {
        color: var(--ctaColor);
        font-size: var(--normalFont);
        font-family: var(--uiFont);
        /*letter-spacing: 1px;*/
        border: 0;
        padding: 0;
        background: none;
        text-decoration: underline;
        text-underline-position: under;
        text-align: left;
        text-transform: unset;
        transition: all .3s ease-in-out;
    }

        button.txtButton:hover {
            background-color: transparent;
            cursor: pointer;
            color: var(--ctaHover);
        }

    .button, button:first-of-type {
        margin-left: 0 !important;
    }

    button.addLogin {
        background-color: transparent;
        border: none;
        max-width: 200px;
        padding: 0;
    }
        button.addLogin.imgButton:hover {
            background: unset;
        }

div#qrCode {
    margin-bottom: var(--smallSpace);
}

.externalLogins {
    display: flex;
    flex-direction: column;
    gap: var(--smallSpace);
}

.createNew svg {
    width: 10px !important;
    height: 10px !important;
    margin-left: 4px;
}

.createNew svg {
    stroke: var(--ctaColor);
    transition: all 0.5s;
}

.createNew:hover svg {
    stroke: var(--uiBackground-1);
}

.button, button.alertButton, button.saveButton, button.submitButton, button.createNew {
    /*    padding: var(--listSpace);
    background-color: #2c5f2d1f;
    border-radius: var(--normalRadius);
    color: var(--ctaColor);
    text-decoration: none;
    border: 1px solid var(--ctaColor);
    transition: all 0.5s;
    width: fit-content;
    font-size: var(--smallFont);
    letter-spacing: 1px;
    margin-left: var(--smallSpace); */
    display: flex;
    padding: 4px 14px;
    width: fit-content;
    font-size: var(--smallFont);
    text-transform: uppercase;
    border-radius: 9999px;
    color: var(--ctaColor);
    background-color: transparent;
    border: 1px solid var(--ctaColor);
    align-self: flex-start;
    transition: all .3s ease-in-out;
    justify-content: center;
    cursor: pointer;
    align-items: center;
}

    .button, button.createNew {
        text-transform: uppercase;
    }

        button.saveButton:hover, button.submitButton:hover, .button.saveButton:hover, button.createNew:hover {
            color: var(--uiBackground-1);
            background-color: var(--ctaColor);
        }

        button.powerButton {
            width: var(--iconSize);
            height: var(--iconSize);
        }

        button.powerButton svg path {
            stroke-width: 2px;
            stroke: var(--lightGray);
            transition: all .3s ease-in-out;
        }
       
            button.powerButton.active svg path {
                stroke: var(--ctaColor);
            }

        button.powerButton svg:hover path {
            stroke: var(--ctaHover);
        }

    button.saveButton {
/*        background-color: var(--brandColor-3);
        color: var(--uiBackground-1);*/
        align-self: flex-start;
        position: relative;
    }

        button.saveButton:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 9999px;
            background-color: transparent;
            box-shadow: var(--blue) 0px 0px 4px 4px;
            animation: pleasePressTheRightButton infinite 5s linear;
            opacity: 0;
        }

        @keyframes pleasePressTheRightButton {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 0;
            }
            50% {
                opacity: .2;
            }
            75% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }

    button.alertButton {
        background-color: var(--lightAlertColor);
        border-color: var(--alertColor);
        color: var(--alertColor);
    }

        button.alertButton:hover {
            background-color: var(--alertColor);
            color: var(--uiBackground-1);
        }

    button:hover {
        cursor: pointer;
    }

button.iconButton {
    width: 100%;
    height: 100%;
    display: flex;
}

.alert.alert-danger {
    display: flex;
    width: fit-content;
    flex-wrap: wrap;
    padding: var(--smallSpace);
    background-color: var(--alertColor);
    color: var(--uiBackground-1);
    border-radius: var(--normalRadius);
    border: 0;
}

/* forms and inputs */
form {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
}

input.formInput::placeholder {
    color: var(--Gray);
    opacity: .5;
}

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

div#notificationsettings {
    display: flex;
    gap: var(--mediumSpace);
}

select {
    padding: var(--smallSpace);
    border-radius: var(--smallRadius);
    font-family: var(--uiFont);
    font-size: var(--normalFont);
    background-color: var(--dark);
    border: 1px solid var(--grayBorder);
    color: var(--primaryFontColor);
    max-width: 700px;
}


.valid.modified:not([type=checkbox]) {
    outline: none;
}

.invalid {
    outline: 1px solid #e50000;
}

.formLabel {
    font-family: var(--titleFont);
    color: var(--gray);
    padding: var(--smallSpace) 0;
    font-size: var(--smallFont);
    letter-spacing: calc(1px / 2);
    opacity: 1;
}

input.formInput {
    padding: var(--smallSpace);
    border-radius: var(--smallRadius);
    font-family: var(--uiFont);
    font-size: var(--normalFont);
    background-color: var(--dark);
    border: 1px solid var(--grayBorder);
    color: var(--primaryFontColor);
    max-width: 700px;
}

input:disabled.formInput {
    background: var(--gray);
    color: var(--primaryFontColor);
    cursor: no-drop;
}

input.formInput:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: var(--dark);
    color: var(--primaryFontColor);
}

.rememberMe .formLabel {
    display: flex;
    align-items: center;
    gap: 4px;
}

.text-danger {
    padding: 4px 8px;
    background-color: #940000;
    width: fit-content;
    border-radius: var(--normalRadius);
    color: #fff;
    margin-top: 8px;
}

input[type="color"]:hover {
    cursor: pointer;
}

/* content: settings */
.settingsNav {
    flex-direction: row;
    gap: var(--mediumSpace);
    flex-wrap: wrap;
}

    .settingsNav a.navLink {
        text-decoration: none;
    }

@media screen and (max-width: 991px) {
    .settingsNav {
        gap: var(--smallSpace);
    }
}

.settingsNav a.navLink {
    padding: 0;
}

    .settingsNav a.navLink.active {
        background-color: transparent;
        text-decoration: underline;
        text-underline-position: under;
    }

.contentHeader {
    border-top: 1px solid var(--grayBorder);
    padding-top: var(--mediumSpace);
    display: flex;
}

/* cards */
.card {
    display: flex;
    flex-direction: column;
    background-color: var(--elementBackground-1);
    padding: var(--mediumSpace);
    border-radius: var(--normalRadius);
    position: relative;
    gap: var(--mediumSpace);
    border: 1px solid var(--grayBorder);
}

    .card.wideCard {
        max-width: unset;
    }

.cardHeader {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 var(--mediumSpace) 0 var(--smallSpace) 0;
}

.cardContent {
    display: flex;
    flex-direction: column;
    max-width: 800px;
}

.cardFooter {
    display: flex;
    gap: var(--smallSpace);
    max-width: 800px;
    justify-content: flex-end;
}

.cardHeader h2 {
    margin-bottom: 0;
}

.cardTitle h2 {
    color: var(--ctaColor);
    margin-bottom: var(--smallSpace);
}

.takeNotice {
    display: flex;
    justify-content: center;
    line-height: 1;
    align-items: center;
    color: var(--uiBackground-2);
    border-radius: 9999px;
    width: fit-content;
    text-transform: uppercase;
    margin-right: 4px;
    font-weight: 600;
}

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

.contactDetails {
    display: flex;
    gap: var(--mediumSpace);
    flex-direction: column;
}

.cardIcon svg {
    max-width: 40px;
}

@media (max-width: 600px) {
    .cardHeader {
        justify-content: flex-start;
        padding: 0;
        gap: var(--smallSpace);
        flex-wrap: wrap;
    }
}

.gapContent {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
}

/* errors */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* tabletest */

.table {
    width: 100%;
}

    .table > tbody {
        vertical-align: inherit;
    }

    .table > thead {
        vertical-align: bottom;
    }

.caption-top {
    caption-side: top;
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}

.table-borderless > :not(:first-child) {
    border-top-width: 0;
}

.gridActions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--smallSpace);
}

    .gridActions svg path {
        fill: unset;
    }


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

.totalContacts {
    padding: 4px 0;
}

.click-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 200px;
    bottom: 0;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .click-area {
        right: 125px;
    }
}

.newContacts {
    font-weight: 600;
    background-color: var(--brandColor-2);
    padding: 4px 6px;
    display: flex;
    justify-content: center;
    line-height: 1;
    align-items: center;
    margin-left: 4px;
    color: var(--uiBackground-2);
    font-size: 14px;
    border-radius: 9999px;
}

    .newContacts span {
        font-weight: 400;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 10px;
        align-items: center;
        display: flex;
        margin-left: 2px;
    }

/* first contact page */

.notseen {
    font-weight: bold !important;
}

.firstContactHeader span {
}

span.paintItBlack {
    color: var(--uiBackground-2) !important;
    background: var(--uiBackground-2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--uiBackground-2);
    font-weight: 400;
}

.cardDetail h1, .cardDetail h2, .cardDetail h3, .cardDetail h4 {
    margin-bottom: 0;
}

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

    .cardDetail h2 {
        text-transform: uppercase;
        font-size: var(--smallFont);
    }

    .cardDetail button {
        margin-left: var(--smallSpace);
    }

.firstContactHeader h1 {
    color: var(--uiBackground-2);
    color: var(--uiBackground-2);
    background: -webkit-linear-gradient(0deg, var(--ctaColor) 0%, var(--brandColor-2) 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.firstContactHeader span:first-of-type {
    margin-left: 0;
}

.firstContactHeader span:last-of-type {
    margin-right: 0;
}


span.timeStamp {
    padding: var(--listSpace);
    background-color: var(--brandColor-3);
    border-radius: var(--normalRadius);
    color: var(--uiBackground-1);
    font-size: var(--smallFont);
    margin-bottom: var(--smallSpace);
    display: inline-block;
}

.contactPriceRange {
    font-size: var(--largeFont);
}

/* style your Deal Conduit */

.colorSelection {
    display: flex;
    flex-wrap: wrap;
}

    .colorSelection .formGroup {
        display: flex;
        width: 100%;
        flex-direction: column;
        max-width: 240px;
    }


/* public site */
:root {
    --wideContainer: 900px;
    --normalContainer: 800px;
}

.publicSite {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: calc(var(--wideContainer) - var(--mediumSpace));
    gap: var(--hugeSpace);
}

    .publicSite section {
        display: flex;
        flex-direction: column;
        gap: var(--mediumSpace);
        width: 100%;
    }

    .publicSite h1 {
        background: -webkit-linear-gradient(0deg, var(--ctaColor) 0%, var(--brandColor-2) 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: var(--hugeFont);
    }

.normalContent {
    display: flex;
    max-width: var(--normalContainer);
}

.wideContent {
    display: flex;
    width: 100%;
    max-width: var(--wideContainer);
}

.backgroundCard {
    display: flex;
    flex-direction: column;
    border-radius: var(--normalRadius);
    position: relative;
    gap: var(--mediumSpace);
    overflow: hidden;
    max-width: calc(var(--wideContainer) - var(--mediumSpace));
}

.landingHero {
    background-image: url(img/landingHero.jpg);
    background-position: 50% 50%;
}

.cardBackground {
    min-height: 400px;
    background-size: cover;
    align-items: center;
    display: flex;
    padding: var(--largeSpace);
    position: relative;
}


    .cardBackground h2 {
        color: var(--uiBackground-1);
        font-size: 32px;
        font-weight: 600;
        font-family: var(--titleFont);
        max-width: 50%;
        position: relative;
    }

        .cardBackground h2:before {
            content: '"';
            font-size: 70px;
            position: absolute;
            top: -40px;
            left: -4px;
            font-family: auto;
            color: var(--brandColor-2);
        }

/* homepage features */
.moreDetails {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* cards */
.multipleCards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--mediumSpace);
}

.card.ofMany {
    width: 100%;
    max-width: calc((var(--wideContainer) / 3) - var(--mediumSpace));
}

.cardTitle {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: var(--mediumSpace);
}

.cardText {
    display: flex;
    text-align: center;
}




/* pricing */
span.betaPhase {
    font-weight: 600;
    color: var(--ctaColor);
}

.pricingCards {
    display: flex;
    gap: var(--mediumSpace);
    flex-wrap: wrap;
}

.card.ofTwo {
    width: 100%;
    max-width: calc(50% - var(--smallSpace));
}

ul {
    margin: 0 0 var(--smallSpace) 0;
}

.pricingHero {
    background-image: url(img/pricing.jpg);
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    background-position: 50% 50%;
}

.pricingHero h2 {
    max-width: 70%

}

span.discountPercentage {
    display: flex;
    font-size: var(--hugeFont);
    font-weight: 600;
    margin-top: var(--smallSpace);
    font-family: var(--titleFont);
    color: var(--uiBackground-1);
    border-bottom: 2px solid var(--brandColor-2);
    padding-bottom: var(--smallSpace);
}

.subHeader {
    display: flex;
    font-family: var(--uiFont);
    font-size: var(--largeFont);
    font-weight: 600;
}

.subPrice {
    font-family: var(--titleFont);
    font-size: var(--hugeFont);
    font-weight: 600;
    color: var(--ctaColor);
    line-height: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

span.perMonth {
    font-family: var(--uiFont);
    font-size: var(--normalFont);
    color: var(--gray);
    margin-left: 6px;
    padding-bottom: 3px;
}

.subCTA {
    display: flex;
}

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

.subFeature {
    display: flex;
    gap: var(--smallSpace);
}
    .subFeature svg {
        margin-right: 8px;
    }

    .subFeature svg path {
        stroke: var(--ctaColor);
        stroke-width: 2;
    }

.subscriptionContent {
    display: flex;
    flex-direction: column;
    max-width: 650px;
}

/* dashboard */
.dashboardHeader {
    display: flex;
    align-items: center;
}

    .dashboardHeader h1 {
        background: var(--bluewhiteGradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.contactCount {
    display: flex;
    position: relative;
    min-height: calc(100px + var(--mediumSpace));
    min-width: calc(100px + var(--mediumSpace));
    margin-right: var(--smallSpace);
}

.count {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: var(--ctaColor);
    margin: auto;
    transform: scale(1, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .count.pulse {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation: pulse 3s infinite;
        animation: pulse 3s infinite;
        background-color: var(--light);
    }

.countContent {
    font-size: var(--hugeFont);
    color: var(--uiBackground-1);
    font-weight: 600;
}

.offerContent ol {

    margin-left: 0;
    margin-block-start: 0;
    padding-inline-start: var(--smallSpace);
}

.offerContent li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
    margin-bottom: var(--smallSpace);
    color: var(--fontColor-1);
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--uiBackground-2);
    border-radius: var(--normalRadius)
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--ctaColor);
    border-radius: var(--normalRadius);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }


/* animations */
@keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* animations */
@keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }

    1% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(+100%);
    }

    100% {
        transform: translateX(0);
    }
}


.fadeInFromNone {
    animation-name: fadeInFromNone;
    animation-duration: .5s;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

/*.card {
    animation-name: fadeInFromNone;
    animation-duration: .35s;
    animation-iteration-count: 1;
}*/



/* desktop */
@media screen and (min-width: 
    ) {
    main, footer {
        padding: var(--hugeSpace);
        padding-bottom: var(--largeSpace);
    }
/*    .sideBar:before {
        height: var(--hugeSpace);
        width: 100vw;
        background: linear-gradient(90deg, var(--brandColor-2) 50%, var(--ctaColor) 101%);
        z-index: 2;
        display: flex;
        content: '';
        position: relative;
        left: 0;
        top: 0;
    }*/
}


/* navcollapse */
@media screen and (max-width: 1200px) {
    :root {
        --listSpace: 6px 12px;
        --hugeFont: 42px;
        --largeFont: 24px;
    }

    body {
        padding-top: var(--hugeSpace);
    }

    .publicSite section {
        gap: var(--smallSpace);
    }

    .pricingHero h2, .landingHero h2 {
        font-size: var(--hugeFont);
        font-weight: 600;
        max-width: 70%;
    }

    .sideBar:before {
        z-index: 3;
        position: fixed;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --listSpace: 6px 12px;
        --hugeFont: 32px;
    }

    main {
        padding: var(--largeSpace) var(--mediumSpace);
    }
    .card {
        padding: var(--smallSpace);
    }
    .brand {
        padding-left: var(--mediumSpace);
    }
    footer {
        padding: var(--mediumSpace);
    }
}

@media screen and (max-width: 640px) {
    :root {
        --hugeFont: 28px;
        --largeFont: 24px;
    }
    .card.ofMany {
        max-width: unset;
    }
    .card.ofTwo {
        width: 100%;
        max-width: unset;
    }
}



/* active chats page */


.serviceChatPage {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    gap: 0;
}

.activeChats {
    display: flex;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--largeSpace);
}

.serviceSettings {
    position: sticky;
    top: var(--mediumSpace);
    right: 0px;
    width: 100%;
    display: flex;
    z-index: 5;
    margin: var(--mediumSpace) 0;
    justify-content: flex-end;
}

/* change chat window sizes */
.serviceSettings .chatSize {
    display: flex;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/*active human interaction*/
.chooseAgent, .chatSize, .chatSetting {
    display: flex;
    align-items: center;
    line-height: 1;
    flex-wrap: wrap;
    border: 1px solid var(--borderColor-1);
    background-color: var(--dark);
    border-radius: 9999px;
    padding: 4px 14px 4px 6px;
}

.serviceSettings .toggleIcon .fillIcon path {
    stroke: var(--primaryFontColor);
    opacity: .5;
    transition: all .3s ease-in-out;
}

.serviceSettings .toggleIcon .fillIcon circle {
    stroke: var(--primaryFontColor);
}
    .serviceSettings .toggleIcon.active .fillIcon circle {
        opacity: 1;
        stroke: var(--blue);
    }

.serviceSettings .toggleIcon.active .fillIcon path {
    opacity: 1;

}

/*.chatHeader, span.sizeMessage, span.firstMessage, span.secondMessage {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}*/

.increaseSize, .reduceSize, .toggleIcon {
    display: flex;
    width: 35px;
    max-width: unset;
    transition: all .4s;
    cursor: pointer;
    margin-right: calc(var(--smallSpace) / 2);
}

        .toggleIcon svg {
            transition: all .3s ease-in-out;
            width: 100%;
        }

    .toggleIcon.active svg {
        transform: skew(5deg, -5deg);
    }

.chatSize > span, .chatSetting > span {
    display: flex;
    font-weight: 600;
}
/* animating + size */
.initiateAnimation.increaseSize {
    animation: smallIncrease .2s alternate forwards;
    transform: scale(1);
}

.initiateAnimation.increaseSize svg path {
    stroke: var(--primaryFontColor);
    animation: changeColor .2s alternate forwards;
}

.animateMinus.reduceSize {
    animation: smallDecrease .2s alternate forwards;
    transform: scale(1);
}

    .animateMinus.reduceSize svg path {
        stroke: var(--primaryFontColor);
        animation: changeColor .2s alternate forwards;
    }

@keyframes smallDecrease {
    0% {
        transform: scale(1);
        stroke: var(--blue);
    }

    60% {
        transform: scale(.8);
        filter: blur(1px);
    }

    100% {
        transform: scale(1);
        filter: blur(0px);
    }
}


@keyframes changeColor {
    0% {
        stroke: var(--primaryFontColor);
    }

    60% {
        stroke: var(--blue);
    }
    100% {
        stroke: var(--primaryFontColor);
    }
}

@keyframes smallIncrease {
    0% {
        transform: scale(1);
        stroke: var(--blue);
    }
    60% {
        transform: scale(1.2);
        filter: blur(1px);
    }
    100% {
        transform: scale(1);
        filter: blur(0px);
    }
}


/* human interaction */
span.firstMessage {
    position: relative;
    visibility: visible;
    height: auto;
}

.chatSetting.active span.firstMessage {
    visibility: hidden;
    position: absolute;
    height: 0;
    color: var(--blue);
    filter: blur(2px);
}

span.secondMessage {
    position: absolute;
    visibility: hidden;
    height: 0;
    filter: blur(2px);
}

.serviceSettings .active .secondMessage {
    position: relative;
    height: auto;
    visibility: visible;
    color: var(--blue);
    transition: all .25s ease-in;
    font-weight: 600;
    filter: none;
}

.chatSetting.removed .firstMessage {
    transition: all .25s ease-in;
    position: relative;
    visibility: visible;
    opacity: 1;
    color: var(--primaryFontColor);
}

@keyframes magic {
    0% {
        color: blue;
    }
    100% {
        color: var(--primaryFontColor);
    }
}

/* service chat */
:root {
    --chatBgr: #181E20; /* editable: Background for the chat messages */
    --chatBgr: var(--elementBackground-1); /* editable: Background for the chat messages */
    --chatAnswerBgr: #111111; /* editable: Used for answer message background  */
    --chatQuestionBgr: #045556; /* editable: Used for question message background */
    --chatFontColor: #ffffff; /* editable: Font color for messages */
    --chatTitleFontColor: var(--blue); /* editable: Font color for chat header and footer */
    --chatCtaColor: #12D6F7; /* editable: button colors and CTA colors */
    --chatAccentColor: #278c9d; /* editable: color for Accented parts like borders for an example */
    --chatTitleFont: var(--titleFont); /* editable: via Google API */
    --chatFont: var(--uiFont); /* editable: via Google API */
    --setChatHeight: 40px;
    --chatFontSize: 16px;
    --titleFontSize: 19px;
    --radius: 5px;
    --chatHeight: 260px;
    --chatPad: 8px;
    --outerSpace: 10px;
}

.Vaelion h1, .Vaelion h2, .Vaelion h3, .Vaelion h4 {
    font-family: var(--titleFont);
    font-size: var(--titleFontSize);
    color: var(--chatTitleFontColor);
    font-weight: 100;
}

.Vaelion .chatHeader {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--borderColor-1);
    height: 100%;
    width: 100%;
    max-height: var(--setChatHeight);
    overflow: hidden;
    padding: 0 0 0 var(--chatPad);
    position: absolute;
    top: 0;
    align-items: center;
    justify-content: flex-end;
}

.Vaelion.interactedChat .chatHeader {

}

    .Vaelion .chatHeader h2 {
        margin: 0;
        line-height: 1;
    }

.Vaelion .chatHeader .chatTools {
    display: flex;
    padding: 0 calc(var(--smallSpace) / 2);
}

.Vaelion .chatBody {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--setChatHeight);
    width: 100%;
    height: calc(100% - calc(calc(var(--setChatHeight)* 2)));
    box-sizing: border-box;
    padding: 0 var(--chatPad) 0 0;
}

.Vaelion .chatMessages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    overflow-y: auto;
    color: var(--chatFontColor);
    padding: var(--chatPad);
}

    .Vaelion .chatMessages .messageContent {
        display: flex;
        flex-direction: column;
        gap: var(--smallSpace);
        width: fit-content;
    }

        .Vaelion .chatMessages .answerMessage .messageContent > * {
            background-color: var(--uiBackground-2);
        }

.Vaelion .answerMessage .messageContent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--borderColor-1);
    margin-top: -6px;
}




.Vaelion .chatMessages p {
    margin: 0;
    line-height: 125%;
    width: fit-content;
}

.Vaelion .chatMessages .receivedMessage {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

    .Vaelion .chatMessages .receivedMessage .messageContent {
        display: block;
        text-align: right;
        border: 1px solid var(--ctaColor);
        border-radius: var(--radius);
        background-color: var(--elementBackground-3);
        padding: 8px;
    }


    .Vaelion .chatMessages .receivedMessage.aiAnswer .messageContent, .Vaelion .chatMessages .answerMessage.aiAnswer .messageContent {
        border: none;
        margin-right: unset;
        padding: 0;
        display: flex;
        gap: var(--smallSpace);
        background-color: transparent;
    }

        .Vaelion .chatMessages .receivedMessage.aiAnswer .messageContent p, .Vaelion .chatMessages .answerMessage.aiAnswer p {
            border: 1px solid var(--borderColor-1);
            border-radius: var(--radius);
            padding: var(--chatPad);
            margin-right: var(--chatPad);
            text-align: left;
            background-color: var(--darkGray);
        }

    .Vaelion .answerMessage.humanUnanswered .messageContent  {}

    .Vaelion .answerMessage {
        display: flex;
        position: relative;
        flex-direction: column;
    }

    .Vaelion .answerMessage .replyIcon {
        display: flex;
        position: relative;
    }

.Vaelion .message .messageHeader {
    display: flex;
    align-items: center;
    margin-bottom: var(--smallSpace);
    font-size: 12px;
    gap: 4px;
}

    .Vaelion .message.answerMessage .messageHeader {
        

    }

    .messageHeader .userIdentity {
        font-weight: 600;
    }

.chatMessages .message.receivedMessage .messageHeader {
    flex-direction: row-reverse;
}

.Vaelion .replyIcon:after {
    content: '';
    width: 100%;
    position: absolute;
    height: 1px;
    width: 10px;
    left: 35px;
    background-color: var(--borderColor-1);
    top: calc(35px / 2);
    z-index: 1;
}

.Vaelion .answerMessage .replyIcon img {
    min-width: 35px;
    min-height: 35px;
    max-height: 35px;
    max-width: 35px;
    border-radius: 100%;
    border: 1px solid var(--borderColor-1);
}

.Vaelion .chatFooter {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--borderColor-1);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: var(--setChatHeight);
    font-size: var(--chatFontSize);
}

    .Vaelion.interactedChat .chatFooter {
        
    }

.Vaelion .chatInput {
    display: flex;
    width: 100%;
    height: var(--setChatHeight);
    filter: blur(2px);
    pointer-events: none;
}

.Vaelion.interactedChat .chatInput {
    filter: none;
    pointer-events:unset;
}

.Vaelion input#messageInput {
    padding: var(--chatPad);
    border: none;
    border-radius: var(--radius);
    color: var(--chatFontColor);
    width: calc(100% - 35px);
    background-color: transparent;
}

    .Vaelion input#messageInput::placeholder {
        color: var(--chatAccentColor);
    }

    .Vaelion input#messageInput:focus {
        outline: none;
        border: none;
    }

.Vaelion .chatInput .sendButton .iconButton {
    border: 0;
    background-color: transparent;
    background: transparent;
    outline: 0;
    width: 35px;
    height: 100%;
    padding: 4px;
}

.Vaelion .chatInput .sendButton .iconButton {
    border: unset;
}

    .Vaelion .chatInput .sendButton button svg {
        height: 100%;
        width: 100%;
    }


/* human interaction required */
.message.receivedMessage.humanUnanswered div {
/*    animation: takeNotice 1000ms infinite alternate;
    background-color: var(--blue);*/
}

@keyframes takeNotice {
    0% {
        background-color: var(--chatQuestionBgr);
    }
    100% {
        background-color: var(--dark);
    }
}

/* width */
.Vaelion ::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.Vaelion ::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: var(--normalRadius);
    transition: all 1s ease-in-out;
    margin: var(--chatPad) 0;
}

/* Handle */
.Vaelion ::-webkit-scrollbar-thumb {
    background: var(--borderColor-1);
    border-radius: var(--radius);
    top: 5px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

    /* Handle on hover */
    .Vaelion ::-webkit-scrollbar-thumb:hover {
        background: var(--lightGray);
        transition: all .5s ease-in-out;
    }

.Vaelion .byAgenduit {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--chatTitleFontColor);
    opacity: .5;
    padding: var(--chatPad);
    transition: all 1s;
}

    .Vaelion .byAgenduit:hover {
        opacity: 1;
    }

    .Vaelion .byAgenduit a {
        text-decoration: none;
    }

        .Vaelion .byAgenduit a:visited {
            color: var(--chatTitleFontColor);
        }

        .Vaelion .byAgenduit a:focus {
            color: var(--chatTitleFontColor);
        }

        .Vaelion .byAgenduit a:hover {
            cursor: pointer;
        }

.Vaelion.chatContainer {
    transition: transform 0.5s ease-in-out;
    transform-origin: bottom right;
    width: 100%;
    height: 100%; 
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
    background-color: var(--elementBackground-1);
    border: 1px solid var(--borderColor-1);
    border-radius: var(--radius);
    font-family: var(--chatFont);
    font-size: var(--chatFontSize);
    z-index: 3;
}

.resizableChat {
    width: 300px;
    height: 400px;
    transition: all .45s ease-in-out;
}

.activeChats > div {
    display: flex;
}

.Vaelion.interactedChat.chatContainer {
    
}

#floatingVaelionChatIcon {
    transform-origin: bottom;
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
    height: calc(var(--setChatHeight)* 1.5);
    width: calc(var(--setChatHeight)* 1.5);
    z-index: 99;
    display: flex;
    position: fixed;
    bottom: var(--outerSpace);
    right: var(--outerSpace);
    cursor: pointer;
}

    #floatingVaelionChatIcon svg {
        transition: all .25s ease-in-out;
        transform: scale(1);
    }

        #floatingVaelionChatIcon svg:hover {
            transform-origin: center;
            transform: scale(1.2);
        }

    #floatingVaelionChatIcon.hideFloatingIcon {
        transform: scale(0);
    }

#closeValionChat {
    
}

.Vaelion .chatTools > div {
    opacity: .5;
    transition: all .3s;
    height: calc(var(--setChatHeight) - 10px); 
    width: calc(var(--setChatHeight) - 10px);
    padding: 4px;
}

    .Vaelion .chatTools > div:hover {
    cursor: pointer;
    opacity: 1;
}

.Vaelion .chatTools div > svg {
    width: 100%;
    height: 100%;
}

    .Vaelion .chatTools > div svg path {
        stroke: var(--primaryFontColor);
    }


.Vaelion .chatTools div.activeTool {
    opacity: 1;
    cursor: pointer;
}

.Vaelion #bookmarkVaelionChat.activeTool svg path {
    stroke: var(--blue);
    stroke-width: 2;
}

.Vaelion.interactedChat .chatTools #takeOverVaelionChat.activeTool svg path {
    stroke: var(--blue);
    stroke-width: 2;
}
    


/* TinyMCE overrides */
.mainContent .tox-tinymce {
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--uiFont);
    overflow: hidden;
    position: relative;
    visibility: inherit !important;
}

.mainContent .tox:not(.tox-tinymce-inline) .tox-editor-header {
    background: transparent;
}

.mainContent .tox .tox-statusbar,
.mainContent .tox .tox-toolbar,
.mainContent .tox .tox-toolbar__overflow,
.mainContent .tox .tox-toolbar__primary,
.mainContent .tox:not(.tox-tinymce-inline) .tox-editor-header,
.mainContent .tox .tox-toolbar-overlord {
    background-color: transparent;
}

.mainContent .tox .tox-edit-area__iframe {
    color: var(--primaryFontColor);
    background-color: var(--elementBackground-1);
    border: 1px solid var(--borderColor-1);
}

    .mainContent .tox .tox-edit-area__iframe:active, .mainContent .tox .tox-edit-area__iframefocus {
        border: 0;
    }

.mainContent #tinymce.mce-content-body p {
    font-family: var(--uitFont) !important
}

.mainContent .tox .tox-edit-area__iframe:focus {
    outline: 0;
    border: 0;
}

.mainContent iframe#Message_ifr:active, .mainContent iframe#Message_ifr:focus {
    outline: 0;
    border: 1px solid var(--borderColor-1);
}

.mainContent .valid.modified:not([type=checkbox]) {
    outline: 0;
}

.mainContent .tox .tox-edit-area::before {
    border: 0;
}

.mainContent .tox .tox-tbtn {
    background: transparent;
}

.mainContent .tox button svg {
    stroke: none;
}

    .mainContent .tox button svg, .mainContent .tox .tox-tbtn svg {
        fill: var(--primaryFontColor);
    }

.mainContent .tox .tox-tbtn {
    color: var(--primaryFontColor);
    font-family: Arial, Helvetica, sans-serif;
}

.mainContent .tox .tox-anchorbar {
    
}

.mainContent .tox .tox-toolbar-overlord .tox-toolbar:not(.tox-toolbar--scrolling):first-child,
.mainContent .tox .tox-toolbar-overlord .tox-toolbar__primary {
    background: none;
}

.mainContent .tox .tox-tbtn:hover {
    color: var(--blue);
    cursor: pointer;
}

.mainContent .tox .tox-tbtn:hover {
    background: transparent;
    cursor: pointer;
}

.mainContent .tox .tox-tbtn:disabled,
.mainContent .tox .tox-tbtn--disabled {
    border: 0;
    opacity: .2;
}

    .mainContent .tox .tox-tbtn:hover svg {
        fill: var(--blue);
    }

.mainContent .tox .tox-tbtn--disabled:hover {
    cursor: not-allowed;
    color: var(--primaryFontColor);
}

    .mainContent .tox .tox-tbtn--disabled:hover svg {
        fill: var(--primaryFontColor);
    }

.mainContent .tox .tox-toolbar__group {
    gap: 2px;
    padding: 0;
}

.mainContent .tox .tox-statusbar {
    background-color: transparent;
}

.mainContent .tox .tox-statusbar {
    border-top: 0;
}

    .mainContent .tox .tox-statusbar a,
    .mainContent .tox .tox-statusbar__path-item,
    .mainContent .tox .tox-statusbar__wordcount {
        color: var(--primaryFontColor);
        font-size: var(--smallFont);
        opacity: .4;
    }

/* chat history */
.basicGrid.historyGrid {
    max-width: 800px;
    position: sticky;
    top: var(--smallSpace);
    height: fit-content;
}

.historyAnswer, .historyQuestion {
    display: flex;
    flex-wrap: wrap;
}

.historyQuestion {
    flex-direction: row-reverse;
}


.historyContainer {
    display: flex;
}

.chatsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--chatPad);
    width: -webkit-fill-available;
    flex-direction: row;
    place-self: flex-start;
}

.singleChatHistory {
    display: flex;
    flex-direction: column;
    padding: var(--smallSpace);
    border: 1px solid #4b4b4b38;
    background: #0000002e;
    border-radius: var(--radius);
    width: 100%;
    gap: var(--chatPad);
    max-width: 500px;
    height: auto;
}

.historyTimeStamp {
    text-transform: uppercase;
    font-size: var(--smallFont);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: var(--radius);
}


.historyQuestion .historyTimeStamp {
    background: var(--blue);
    color: var(--dark);
}

.historyAnswer .historyTimeStamp {
    background: var(--yellow);
}

.historyChatHeader {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    width: fit-content;
    max-height: var(--setChatHeight);
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--smallSpace);
}

    .historyChatHeader .chatTools {
        display: flex;
        z-index: 5;
    }

.historyChatHeader .chatTools > div {
    opacity: .5;
    transition: all .3s;
    height: calc(var(--setChatHeight) - 10px);
    width: calc(var(--setChatHeight) - 10px);
    padding: 4px;
}

.historyChatHeader .chatTools svg path {
    stroke: var(--primaryFontColor);
}


.historyContainer .Vaelion .chatMessages {
    padding-top: 40px;
}


/* active agent */
input.formInput.agentQuery {
    width: 100%;
    max-width: unset;
    background-color: transparent;
    border-color: var(--ctaColor);
    background-color: #fff;
    color: #000;
    font-weight: 600;
}

.agentPage {
    max-width: unset;
    min-height: calc(100vh - var(--largeSpace)* 4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--elementBackground-1);
    border-radius: var(--normalRadius);
    border: 1px solid var(--grayBorder);
    padding: var(--mediumSpace);
    gap: var(--mediumSpace);
    height: 100%;
}

@media screen and (max-width: 1200px) {
    .agentPage {
        min-height: calc(100vh - var(--largeSpace)* 2 - var(--hugeSpace));
    }
}

.customeAgentConversation {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
    /*border-bottom: 1px solid var(--grayBorder);*/
    height: 100%;
    /*margin-bottom: var(--largeSpace);*/
    padding-bottom: var(--mediumSpace);
    max-width: var(--wideContainer);
}

    .customeAgentConversation > * {
        max-width: 1200px;
    }

.conversationdataeditor h2 {
    max-width: calc(100% - 100px);
}

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

.agentName, span.queryTitle, .agentLabel {
    display: flex;
    width: fit-content;
    font-size: var(--smallFont);
    text-transform: uppercase;
    border-radius: 9999px;
    align-self: flex-start;
    transition: all .3s ease-in-out;
    font-weight: 700;
    color: var(--primaryFontColor);
}

.agentPage .answerMessage .messageHeader .userIdentity, span.answerAnalysis, span.answerContent {
    display: flex;
    width: fit-content;
    font-size: var(--smallFont);
    text-transform: uppercase;
    border-radius: 9999px;
    align-self: flex-start;
    transition: all .3s ease-in-out;
    font-weight: 700;
    color: var(--ctaColor);
    margin-bottom: calc(var(--smallSpace) /2);
}

.answerContent hr {
    margin-bottom: var(--largeSpace);
    border: 1px solid var(--grayBorder);
    margin-top: var(--largeSpace);
    opacity: .5;
}


.agentAnswer ul li {
    margin-bottom: var(--smallSpace);
    word-break: break-all;
}

.patientlyWaiting {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    gap: var(--smallSpace);
    background-color: #000000d9;
    z-index: 99;
}

.loaderIcon {
    display: flex;
    width: 50px;
    height: 50px;
    animation: rotateLoader 4s infinite linear;
}

@keyframes rotateLoader {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(180deg);
        opacity: .2;
    }

    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}

.agentInput {
    display: flex;
    flex-direction: column;
    gap: var(--smallSpace);
    width: 100%;
}

    .agentInput button.saveButton.refresh {
        align-self: end;
    }

.agentAnswer h1 {
    font-size: var(--largeFont);
    font-weight: 600;
}

.agentPage pre {
    word-wrap: normal;
    display: flex;
    flex-wrap: wrap;
    white-space: pre-wrap;
    overflow: auto;
}

.createNewConversation {
    display: flex;
    justify-content: end;
    width: 100%;
    max-width: unset;
}

.agentPage ul {
    margin: 0 0 var(--mediumSpace) 0;
    overflow: hidden;
}

.sourceDocument p.sourceLink {
    font-size: 12px;
    margin-bottom: var(--smallSpace);
}

.sourceLink a {
    word-break: break-all;
}

.sourceDocuments {
    display: flex;
    flex-direction: column;
    padding: var(--largeSpace) 0;
    border-top: 1px solid var(--grayBorder);
    border-bottom: 1px solid var(--grayBorder);
    margin-bottom: var(--mediumSpace);
    overflow: hidden;
    width: 100%;
}

.agentPage h2 {
    font-size: calc(var(--largeFont) / 1.2);
}

.agentPage h3 {
    font-size: calc(var(--largeFont) / 1.30);
}

.agentPage h4 {
    font-size: calc(var(--largeFont) / 1.35);
}

.sourceContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mediumSpace);
}

.sourceDocuments h3 {
    font-size: calc(var(--largeFont) - 6px);
    font-weight: 600;
    margin-bottom: var(--smallSpace);
}

.collapseThing {
    height: 0px;
    opacity: 0;
}

    .collapseThing.hideContent {
        height: 0px;
        opacity: 0;
        transition: all .70s ease-in-out;
        animation: resetHeight .35s ease-in;
        margin-top: 0;
    }

@keyframes resetHeight {
    from {height: 100%}
    to {height: 0px}
}

.collapseThing.showContent {
    height: auto;
    animation: autoHeight .35s ease-in;
    opacity: 1;
    transition: all .7s ease-in-out;
    margin-top: var(--largeSpace);
}

@keyframes autoHeight {
    from {height: 0px}
    to {height: 100%}
}

.agentHeader {
    display: flex;
    width: 100%;
    flex-direction: column;
    transition: all 1s ease-in-out;
}

.nameSettings {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projectHeader h1, .agentHeader h1 {
    margin: 0;
    background: var(--bluewhiteGradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.projectTools, .agentTools {
    display: flex;
    gap: var(--smallSpace);
}

.projectSettings svg path, .agentSettings svg path {
    fill: var(--ctaColor);
}

.adminSettings svg path {
    stroke: var(--ctaColor);
}

    .adminSettings svg path:last-of-type {
        stroke-width: 0;
        fill: var(--alertColor);
        transition: all .25s ease-in-out;
    }

    .adminSettings svg:hover path:last-of-type {
        fill: var(--ctaColor);
    }

.adminSettings svg.fillIcon, .projectSettings svg.fillIcon, .agentSettings svg.fillIcon {
    width: 25px;
    height: 25px;
}

span.adminSettings, span.projectSettings, span.agentSettings {
    display: flex;
    align-items: center;
    justify-content: center;
}

    span.adminSettings, span.projectSettings, span.agentSettings > * {
        cursor: pointer;
    }


    .projectLanding, .agentLanding {
        display: flex;
        flex-direction: column;
        gap: var(--largeSpace);
    }

    .agentLanding .historyGrid {
        max-width: unset;
    }

.extraContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 100%;*/
    width: 100%;
}

.basicGrid .quickgrid[theme=default] > tbody > tr > td:first-of-type {
    min-width: 200px;
}

.historyHeader select.formInput {
    border-radius: 9999px;
}

.chooseAgent .formInput {
    border: none;
}

.historyHeader select.formInput:focus-visible, .chooseAgent .formInput:focus-visible {
        outline: none;
    }

.agentPage .messageHeader {
    margin-bottom: var(--smallSpace);
}

.agentPage .message.answerMessage {
    margin-bottom: var(--mediumSpace);
    padding-bottom: var(--largeSpace);
    border-bottom: 1px solid var(--grayBorder);
}

.agentLanding table tbody tr {
    border-bottom: 1px solid var(--grayBorder);
}

.agentLanding table tbody tr:last-of-type {
    border-bottom: none;
}

.basicGrid .quickgrid[theme=default] > tbody > tr > td {
    vertical-align: middle;
}

span.inputGuide {
    color: var(--gray);
    margin-bottom: var(--smallSpace);
}

.createSearch .saveButton {
    margin-top: var(--smallSpace);
}

.observerAgentFooter {
    justify-content: flex-start;
}

.addAgent h2 {
    margin-bottom: 0;
}

hr {
    border: 0;
    width: 100%;
    border-top: 1px solid var(--grayBorder);
    margin: var(--mediumSpace) 0;
}

button:disabled {
    opacity: .25;
    pointer-events: none;
}

.singleAgent {
    display: flex;
    gap: var(--smallSpace);
    padding: calc(var(--smallSpace) / 2);
    width: -webkit-fill-available;
}

@media screen and (max-width: 600px) {
    .singleAgent {
        flex-direction: column;
        border-bottom: 1px solid var(--grayBorder);
        padding: var(--mediumSpace) 0;
    }

    .singleAgent:last-of-type {
        border-bottom: 0;
    }
}

span.toolTip {
    font-size: var(--smallFont);
    font-weight: 700;
    color: var(--ctaColor);
}

button.iconButton.delete {
    width: 15px;
    align-items: center;
}

.iconButton.delete svg path {
    stroke: var(--alertColor) !important;
    stroke-width: 2;
}

.createSearch p {
    margin-bottom: 0;
}

.radioChoice {
    display: flex;
    gap: calc(var(--smallSpace) / 2);
    align-items: center;
}

.radioChoice input[type="radio"] {
    margin: 0;
}

.iconButton.delete svg path {
    stroke: var(--alertColor) !important;
    stroke-width: 2;
    transition: .25s ease-in-out;
}

.iconButton.delete svg:hover path {
    stroke: red !important;
}

.createNewAgent h2 {
    margin-bottom: 0;
}

.promptEditor {
    display: flex;
}

.observerAgents .singleAgent:last-of-type {
    margin-bottom: var(--mediumSpace);
}

.tinymce-wrapper {
    display: flex;
    width: 100%;
}

.promptEditor textarea {
    color: white;
    border-radius: var(--radius);
    padding: var(--smallSpace);
    font-family: var(--uiFont);
    line-height: 1.5;
    background: var(--elementBackground-1);
}

a + button.txtButton {
    margin-left: calc(var(--smallSpace) / 2) !important;
}

/* project settings */
.activeTags {
    display: flex;
    gap: var(--smallSpace);
}
.tagComponent {
    display: flex;
    padding: 4px 14px;
    width: fit-content;
    font-size: var(--smallFont);
    text-transform: uppercase;
    border-radius: 9999px;
    background-color: transparent;
    align-self: flex-start;
    transition: all .3s ease-in-out;
    justify-content: center;
    cursor: pointer;
    align-items: center;
    border: 1px solid;
    border-top-left-radius: 0;
}

/* Vaelion text selextion */
.vaelionselection-placeholder {
    display: flex;
    background: transparent;
    position: fixed;
    top: 50px;
    right: 50px;
    width: 350px;

    z-index: 100;
   
}

.vaelionselection-popup {
    padding: var(--mediumSpace);
    width: fit-content;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-align: center;
    gap: var(--smallSpace);
    display: flex;
}
.vaelionselection-header h3 {
    margin-bottom: 0;
}

.tag-item {
    margin: 4px;
    cursor: pointer;
}

/* Conversation Data Editor */
.conversationdataeditor {
    display: flex;
    flex-direction: row;
    gap: var(--mediumSpace);
    width: 100%;

}

/*Tags*/
.vaelion-tags-container{
    display:flex;

}

.vaelion-tags-horizontal{
    flex-direction:row;
    gap:10px;
}

.vaelion-tags-vertical {
    flex-direction: column;
    gap: 10px;
}

.mashupmessage, .messageContainer {
    border-bottom: 1px solid var(--grayBorder);
    padding-bottom: var(--mediumSpace);
}

    .messageContainer .alertButton {

    }

.projectPage {
    gap: var(--mediumSpace);
    display: flex;
    flex-direction: column;
}

    .projectPage .basicGrid.historyGrid {
        max-width: unset;
    }


.toMashupContent {
    gap: var(--largeSpace);
    display: flex;
    flex-direction: column;
    padding: var(--mediumSpace);
    background: var(--elementBackground-1);
    border: 1px solid var(--grayBorder);
    border-radius: var(--radius);
}

.singleMashup .messageContainer {
    pointer-events: none;
}

.messageContainer.withinMashup {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
}

.messageContainer.withinMashup .alertButton {
    position: relative;
}

    .messageContainer.withinMashup .alertButton {
        position: sticky;
        align-self: end;
        z-index: 99;
        top: var(--mediumSpace);
    }


    .toMashupContent .singleMashup .alertButton {
        position: sticky;
        align-self: end;
        z-index: 99;
        top: var(--mediumSpace);
    }

.mashUpContainer button.saveButton {
    position: sticky;
    top: var(--mediumSpace);
    z-index: 45;
    background-color: var(--elementBackground-1);
}

.singleMashup {
    gap: var(--mediumSpace);
    display: flex;
    flex-direction: column;
}

.toMashupContent .singleMashup:last-of-type .messageContainer {
    border-bottom: 0;
    padding-bottom: 0;
}

.conversationFooter {
    max-width: var(--wideContainer);
}

.toMashupHeader select {
    width: 100%;
    max-width: unset;
}

.toMashupHeader {
    display: flex;
    flex-direction: column;
    gap: var(--mediumSpace);
}

.vaelionselection-popup-container {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    background: var(--chatBgr);
    display: flex;
    justify-content: center;
}


/* tables on agentpages */
.agentPage table {
    border-collapse: separate;
    border-spacing: 0px;
    text-align: left;
    background-color: transparent;
    font-family: inherit;
    font-size: 100%;
    color: inherit;
    border: 1px solid var(--borderColor-1);
    padding: var(--smallSpace);
    padding-top: 0;
    margin-bottom: var(--mediumSpace);
    border-radius: var(--normalRadius);
}

/* Ensure headers and cells have clean spacing */
.agentPage th,
.agentPage td {
    border-collapse: collapse;
    padding: var(--smallSpace);
    border: none;
    vertical-align: middle;
    background: none;
}

.agentPage table tbody tr:last-of-type td {
    border-bottom: 0;
}

/* Headers: strong but minimal */
.agentPage thead th {
    font-weight: 600;
    background-color: transparent;
}

/* Optional: strip out browser default bold/center */
.agentPage th {
    font-weight: inherit;
    text-align: left;
}

/* Remove weird gaps or alignment issues */
.agentPage caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0;
}

/* Reset table sections */
.agentPage thead,
.agentPage tbody,
.agentPage tfoot,
.agentPage tr {
    border: 0;
    margin: 0;
    padding: 0;
    background: none;
}

/* Add light borders */
.agentPage th, .agentPage td {
    border: 1px solid transparent;
    border-bottom: 1px solid var(--grayBorder);
}

/* Highlight header */
.agentPage thead th {
    font-weight: 600;
    font-size: calc(var(--normalFont) * 1.2);
}

/* Hover rows */
.agentPage tbody tr:hover {
    background: var(--elementBackground-1);
    transform-origin: left;
    transition: all .25s ease-in-out;
    border: 1px solid var(--borderColor-1);
    border-collapse: separate;
    border-spacing: 0;
}