@font-face { font-family: 'PPFragment GlareExtraBold'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_j5bEE_PPFragment-GlareExtraBold.ttf?alt=media&token=01449e74-ba22-4400-820a-091c2f0493e2') format('truetype'); }
@font-face { font-family: 'PPFragment GlareExtraBold'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_SghWD_PPFragment-GlareExtraBold.woff?alt=media&token=8c7b4222-0049-4aa6-8838-5161c358aaee') format('woff'); }
@font-face { font-family: 'PPFragment TextRegular'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_ozds4_PPFragment-TextRegular.ttf?alt=media&token=00cfe4c0-ec30-46cf-886a-3ec4a515aeca') format('truetype'); }
@font-face { font-family: 'PPFragment GlareExtraBold'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_HfSR5_PPFragment-GlareExtraBold.woff2?alt=media&token=fdc5975b-3afb-4e20-b853-59683092c7e8') format('woff2'); }
@font-face { font-family: 'PPFragment TextRegular'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_ibJj9_PPFragment-TextRegular.otf?alt=media&token=86355ead-b7ae-4e5d-af11-df33b1ca9d4e') format('opentype'); }
@font-face { font-family: 'PPFragment GlareExtraBold'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_CO7kE_PPFragment-GlareExtraBold.otf?alt=media&token=f078762a-3e61-40f6-8cdf-d1d574f8b389') format('opentype'); }
@font-face { font-family: 'PPFragment TextRegular'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_18Hrw_PPFragment-TextRegular.woff?alt=media&token=c75d668c-cf82-485d-b03e-c4c64479a425') format('woff'); }
@font-face { font-family: 'PPFragment TextRegular'; font-style: normal; src: url('https://firebasestorage.googleapis.com/v0/b/yearly-bv3.appspot.com/o/Qv5LVkDakgLMEIxCotpz%2Ffonts%2Ffile_RFjWS_PPFragment-TextRegular.woff2?alt=media&token=38c672ef-9861-4a76-95b6-c53f49a71b35') format('woff2'); }

:root{
    --builder-header-height: 4rem;
    --builder-footer-height: 4rem;
    --builder-sidebar-width: 30rem;
    --heading-color: #fff;
    --body-color: #ffffffcf;
}
*{
    box-sizing: border-box;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    
}
body{
    /* background: #582159; */
    /* color: #fff; */
    padding: 0;
    margin: 0;
}
html, body{
    font-size: 16px;
    overflow: hidden;
    font-family: "Geist" !important;
    @media screen and (max-width: 50rem){
        overflow: auto;
        font-size: 2.5vw;
    }
}
.modal{
    .modal-box{
        max-height: calc(100dvh - 4rem);
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 1.5rem;
        max-width: none;
        &.s{
            max-width: 35rem;
        }
    }
    [data-modal-header]{
        padding: 1.5rem 0 0.75rem;
        position: sticky;
        top: 0rem;
        background: var(--color-base-100);
        z-index: 2;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        > div > div:nth-of-type(1){
            h3{
                font-size: 1.2rem;
                /* font-size: 1.75rem; */
                font-weight: 100 !important;
                font-family: "PPFragment TextRegular";
                line-height: 1;
            }
            .material-symbols-outlined{
                margin-right: 0.5rem;
                font-weight: 300;
                opacity: 0.9;
                /* color: var(--color-primary-content); */
                font-size: 1.5rem;
            }
        }
    }
    table{
        th, td {
            padding: 0.5rem 0;
        }
    }
    [data-modal-footer]{
        padding: 0.75rem 0rem 1.5rem;
        position: sticky;
        bottom: 0rem;
        background: var(--color-base-100);
        z-index: 2;
        width: 100%;
        .modal-action{
            margin-top: 0;
        }
    }
}
.badge{
    
    border: none;
    margin-top: 0.5rem;
    font-weight: 600;
    opacity: 0.85;
    position: absolute;
    top: 0.5rem;
    left: 0.8rem;
    @media (prefers-color-scheme: dark) {
        background: #ffffff3d;
        color: #fff;
    }
    @media (prefers-color-scheme: light) {
        background: #0000003d;
        color: #000;
    }
}
/* input[type="text"]:not([list]), */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="file"],
textarea{
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    background: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--color-base-100)) !important;
    
}
label.input{
    font-weight: 700;
}
.btn{

    font-weight: 700;
    border-radius: 0.5rem;
    &.btn-xs{
        border-radius: 0.35rem;
    }
    /* &.btn-stacked{
        flex-direction: column;
        gap: 0.25rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        height: auto !important;
        > span:not(.material-symbols-outlined){
            display: block;
            &:nth-of-type(2){
            }
        }
    } */
    &.btn-stacked{
        display: block !important;
        padding: 0;
        height: auto !important;
        width: calc(33.3% - 0.5rem);
        position: relative;
        overflow: hidden;
        > span:not(.material-symbols-outlined){
            display: block;
            &:nth-of-type(1){
                padding: 0 0.75rem;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 3rem;
                border-radius: 0.5rem 0.5rem 0 0;
                text-wrap: balance;
                @media (prefers-color-scheme: dark) {
                    background: rgba(255,255,255,0.1);
                }
                @media (prefers-color-scheme: light) {
                    background: rgba(0,0,0,0.1);
                }
            }
            &:nth-of-type(2){
                padding: 0.35rem 0.35rem 0.5rem;
            }
        }
    }
    &.waiting{
        pointer-events: none;
        opacity: 0.65;
    }
}

.btn:not([data-message-builder="header"] .btn, 
[data-modal-footer] .btn, .btn.send, .btn.new ){
    
    @media (prefers-color-scheme: dark) {
        --color-primary: #fff;
        --color-primary-content: #000;
    }
    @media (prefers-color-scheme: light) {
        --color-primary: #000;
        --color-primary-content: #fff;
    }
}
.link{
    background: none !important; 
    font-weight: 500; 
    font-size: 0.75rem;
}
.collapse-content {
    padding-left: 3.25rem;
}
.card{
    .card-body{
        gap: 0;
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        p{
            font-size: 0.75rem !important;
        }
    }
    .card-title{
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
        display: block;
        text-wrap: balance;
    }
}
.radial-progress span{
    color: var(--color-base-content);
    
    font-weight: 100;
}
.button-container{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    @media screen and (max-width: 40rem){
        gap: 1rem;
        flex-direction: column;
    }
}
.step-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
#app{
    display: flex;
    flex-wrap: wrap;
    
    transition: opacity 0.2s;
    transition-delay: 1s;
    opacity: 0;
    &[data-ui-loaded="true"]{
        opacity: 1;
        [data-message]{
            > div{
                animation: message-reveal 0.6s 1s ease-in-out;
                opacity: 1;
            }
        }
    }
    [data-message]{
        display: flex;
        /* align-items: center; */
        justify-content: center;
        
        

        > div{
            opacity: 0;
            width: 100%;
            max-width: 50rem;
            margin: 0 auto;
        }
        @media screen and (max-width: 50rem){
            padding: 1rem;
            align-items: center;
        }
    }
    [data-message-builder="header"],
    [data-message-builder="header-master"]{
        background: none;
        width: 100%;
        padding: 0 1rem;
        padding: 0;
        margin: 0 1rem;
        height: var(--builder-header-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        order: 1;
        position: relative;
        z-index: 1;
        &.with-border{
            /* border-bottom: 0.1rem solid rgba(255,255,255, 0.1); */
        }
        details{
            ul{
                width: 15rem;
                margin-top: 0.35rem;
            }
        }
        h1{
            /* font-size: 0.8rem;
            font-weight: 100 !important;
            font-family: 'PPFragment GlareExtraBold';
            line-height: 1;
            text-align: center; */
            font-size: 0.75rem;
            font-weight: 700;
            /* margin-left: 1rem; */
            /* border-bottom: 0.1rem solid #ffffff33; */
            /* padding: 0.125rem 0; */
            
            span{
                opacity: 0.7;
                /* display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 20rem; */
                
            }
            &:hover span{
                opacity: 1;
            }
            img{
                width: 1.25rem;
                height: auto;
                margin-right: 0.5rem;
            }
            .material-symbols-outlined{
                font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
            }
            @media screen and (max-width: 50rem){
                display: none;
            }
        }
        .logo{
            width: 8.5rem;
            display: flex;
            align-items: center;
            img{
                width: 100%;
                height: auto;
                display: block;
            }
            @media screen and (max-width: 50rem){
                display: none;
            }
        }
        .supporting-logo{
            font-size: 1.1rem;
            font-weight: 600 !important;
            font-family: 'PPFragment GlareExtraBold';
            line-height: 1;
            text-align: center;
            display: block;
            /* color: #bfbdff; */
            opacity: 0.9;
            margin-left: 0.25rem;
            @media screen and (max-width: 50rem){
                display: none;
            }
        }
        .menu{
            margin-left: 1rem;
            @media screen and (max-width: 50rem){
                margin-left: 0;
            }
            a{
                font-size: .75rem;
                font-weight: 600 !important;
            }
        }
    }
    
    [data-message-builder="footer"]{
        background: none;
        width: 100%;
        max-width: 40rem;
        padding: 0 1rem;
        padding: 0;
        margin: 0 auto;
        height: var(--builder-header-height);
        /* display: flex;
        align-items: center;
        justify-content: space-between; */
        order: 10;
        position: relative;
        z-index: 1;
        
    }
    [data-message-builder="start"]{
        border-top: 0.1rem solid rgba(255,255,255, 0.1);
        padding: 4rem 1rem 1rem;
        height: calc( 100dvh - var(--builder-header-height) );
        width: 100%;
        overflow: auto;
        order: 2;
        text-align: center;
        text-wrap: balance;
        @media screen and (max-width: 40rem){
            padding: 2rem 1rem 1rem;
		}
        
    }
    [data-message-builder="main"]{
        border-top: 0.1rem solid rgba(255,255,255, 0.1);
        padding: 0rem 1rem 1rem;
        padding: 0;
        height: calc( 100dvh - (var(--builder-header-height)) );
        width: 100%;
        overflow: auto;
        order: 2;
        &.full-height{
            height: 100dvh;
        }
        [data-message]{
            border-radius: 0 !important;
        }
    }
    [data-message-builder="main-1"]{
        /* background: rgba(255,255,255, 0.05); */
        border-top: 0.1rem solid rgba(255,255,255, 0.1);
        padding: 0rem 1rem 1rem 0.5rem;
        padding: 0rem 1rem 1rem 1rem;
        height: calc( 100dvh - var(--builder-header-height) );
        width: 100%;
        overflow: auto;
        order: 3;

        .selected{
            transition: all 0.2s;
            /* outline: 0.3rem solid var(--color-primary); */
            /* box-shadow: 0 0 1rem 0.25rem var(--color-primary); */
            /* border-radius: var(--radius-box, 1rem); */
            /* outline-offset: 10px; */
            *{
                /* pointer-events: none; */
            }
        }
    }
    [data-message-builder="main-2"]{
        /* background: rgba(255,255,255, 0.05); */
        
        height: calc( 100dvh - var(--builder-header-height) );
        height: 100dvh;
        width: calc( 100% - var(--builder-sidebar-width) );
        /* overflow: auto; */
        [data-message]{
            height: calc(100dvh - 2rem);
            overflow: auto;
        }
        
        .selected{
            transition: all 0.2s;
            /* outline: 0.3rem solid var(--color-primary); */
            /* box-shadow: 0 0 1rem 0.25rem var(--color-primary); */
            /* border-radius: var(--radius-box, 1rem); */
            /* outline-offset: 10px; */
            *{
                /* pointer-events: none; */
            }
        }
    }
    [data-message-builder="sidebar"]{
        /* background: rgba(255,255,255, 0.05); */
        width: 100%;
        max-width: var(--builder-sidebar-width);
        overflow: auto;
        height: calc( 100dvh - var(--builder-header-height) );
        height: 100dvh;
        [data-sidebar-title]{
            display: flex;
            align-items: center;
            padding: 0rem 0rem 0.35rem;
            background: var(--root-bg,var(--color-base-100));
            position: sticky;
            top: 0;
            z-index: 1;
            > div{
                width: 100%;
            }            
            
            /* box-shadow: 0 0 1rem var(--root-bg,var(--color-base-100)); */
            h2{
                font-family: "PPFragment TextRegular";
                font-weight: 100;
                line-height: 1.2;
                font-size: 1.5rem;
                text-wrap: balance;
                width: 100%;
                display: block;
                padding: 1rem 1.0625rem 0rem;
                a{
                    display: block;
                    padding-bottom: 0.5rem;
                    opacity: 0.8;
                    transition: all 0.2s;
                    &:hover{
                        opacity: 1;
                    }
                    .material-symbols-outlined{
                        font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
                    }
                    @media (prefers-color-scheme: dark) {
                        border-bottom: 0.1rem solid #ffffff25;
                        &:hover{
                            border-bottom: 0.1rem solid #ffffff;
                            .material-symbols-outlined{
                                opacity: 1 !important;
                            }
                        }
                    }
                    @media (prefers-color-scheme: light) {
                        border-bottom: 0.1rem solid #00000025;
                        &:hover{
                            border-bottom: 0.1rem solid #000000;
                            .material-symbols-outlined{
                                opacity: 1 !important;
                            }
                        }
                    }
                }
            }
            @media screen and (max-width: 50rem){
                flex-wrap: wrap;
                > div{
                    width: 100%;
                    &:nth-of-type(1){
                        order: 2;
                    }
                    &:nth-of-type(2){
                        order: 1;
                    }
                }
                text-align: center;
                h2{
                    text-align: center;
                }
                .radial-progress{
                    margin: 0 auto;
                }
            }
        }
        
    }
    [data-position="left"]{
        padding: 0rem 0.5rem 1rem 1rem;
        order: 2;
    }
    [data-position="right"]{
        padding: 0.5rem;
        order: 3;
    }

    [data-message-builder="sidebar"],
    [data-message-builder="main-1"],
    [data-message-builder="main-2"] {
        scrollbar-width: none;       /* Firefox */
        -ms-overflow-style: none;    /* Internet Explorer 10+ */
    }
    [data-message-builder="sidebar"]::-webkit-scrollbar,
    [data-message-builder="main-1"]::-webkit-scrollbar,
    [data-message-builder="main-2"]::-webkit-scrollbar {
        display: none;
    }
    @media screen and (max-width: 50rem){
        display: block;
        [data-message-builder="sidebar"],
        /* [data-message-builder="main-1"], */
        [data-message-builder="main-2"]{
            padding: 1rem 1rem 0;
            width: 100%;
            height: auto;
            max-width: none;
            overflow: visible;
            @media screen and (max-width: 50rem){
                padding: 0 1rem;
            }
        }
        [data-message-builder="sidebar"]{
            padding-bottom: 0.5rem;
        }
        [data-message-builder="header"],
        [data-message-builder="header-master"]{
            margin: 0;
            padding: 0 1rem;
        }
    }
}
[data-message-builder="start"]{
    h2{
        font-family: "PPFragment TextRegular";
        font-weight: 100;
        line-height: 1.1;
        font-size: 1.6rem;

        line-height: 1.2;
        font-size: 2rem;
        
    }
    img{
        display: block; 
        width: 100%; 
        max-width: 25rem; 
        height: auto; 
        margin: 0 auto 1.5rem;
        &.rounded-corner{
            border-radius: 1rem;
        }
        &.apply-aspect-ratio{
            object-fit: cover;
            aspect-ratio: 15 / 9;
        }
        @media screen and (max-width: 40rem){
            max-width: 20rem;
        }
    }
    p{
        font-size: 1rem; 
        /* color: #d7dce3;   */
        margin-bottom: 0.75rem; 
        list-style: decimal; 
        max-width: 40rem; 
        margin: 0 auto;
    }
}
[data-message-builder="step"]{
    overflow: hidden;
    position: relative;
    margin-top: 0.5rem;
    background-color: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
    @media (prefers-color-scheme: light) {
        background-color: #fff;
        &:before{
            content: "";
            background: var(--color-primary);
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.05;
        }
    }
    &:has(> input:checked){
        
        @media (prefers-color-scheme: dark) {
            background-color: color-mix(in oklab,var(--btn-color,var(--color-base-content))12%,var(--color-base-100));
            &:before{
                content: "";
                background: var(--color-primary);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                opacity: 0.1;
            }
        }
        @media (prefers-color-scheme: light) {
            /* background-color: color-mix(in oklab,var(--btn-color,var(--color-base-content))12%,var(--color-base-100)); */
            background-color: #fff;
            &:before{
                content: "";
                background: var(--color-primary);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                opacity: 0.1;
            }
        }
        
    }
    &:nth-of-type(1){
        margin-top: 0 !important;
    }
    &:has(> input[disabled]){
        opacity: 0.5;
        pointer-events: none;
    }
    .collapse-title{
        font-size: 0.9rem !important;
        display: flex;
        align-items: center;

        font-weight: 100 !important;
        font-family: 'PPFragment GlareExtraBold';
        line-height: 1;

        font-size: 1.25rem !important;
        font-size: 1.1rem !important;
        font-weight: 400 !important;
        font-family: "PPFragment TextRegular";


        .step-num {
            font-size: 0.8rem !important;
            width: 1.35rem;
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 100;
            margin-right: 0.85rem;
            font-family: 'PPFragment GlareExtraBold';
            line-height: 1;
            color: var(--color-base-content);
            position: relative;
            border-radius: 0.45rem;
            
            @media (prefers-color-scheme: dark) {
                background: #ffffff;
                color: #000;
                mix-blend-mode: overlay;
            }
            @media (prefers-color-scheme: light) {
                background: #000000;
                color: #fff;
                mix-blend-mode: difference;
            }
        }
        &:after{
            opacity: 0.5;
        }
    }
    .filter{
        gap: 0.5rem;
        margin: 0 0.5rem 0.5rem 0 !important;
        input{
            margin-inline-end: 0;
        }
        input:checked{
            pointer-events: none;
            opacity: 1;
            background: none;
            border-color: transparent;
            box-shadow: none;
            padding: 0 0.25rem;
            @media (prefers-color-scheme: dark) {
                color: #fff;
            }
            @media (prefers-color-scheme: light) {
                color: #000;
            }
        }
        &:not(:has(input:checked:not(.filter-reset))) {
            .filter-reset,
            input[type=reset] {
                display: none;
            }
        }
        &:has(input:checked:not(.filter-reset)) {
            & input:not(:checked,.filter-reset,input[type=reset]) {
                display: none;
            }
            button {
                display: none !important;
            }
        }
        .filter-reset{
            position: relative;
            text-indent: -9999px;
            background-position: 25% 50%;

            @media (prefers-color-scheme: dark) {
                background-image: url('assets/chevron_left_black.svg');
            }
            @media (prefers-color-scheme: light) {
                background-image: url('assets/chevron_left_white.svg');
            }
            /* &:before{
                content: "\e5cb";
                font-family: "Material Symbols Outlined" !important;
                font-size: 3rem !important;
                font-weight: 500 !important;
            } */
        }
    }
    input[type="number"]{
        /* margin: 0 !important;
        border-radius: 0 0 0.75rem 0.75rem;
        border: none;
        padding: 0.75rem 1rem;
        height: auto; */
    }
    input[type="text"]:not([list]),
    input[type="number"],
    input[type="search"],
    input[type="file"],
    textarea{
        width: 100%;
        border-radius: 0.5rem;
        border: none;
        
    }
    textarea{
        min-height: 10rem;
        white-space: normal;
        padding: 0.5rem 0.75rem;
    }
    label.input{
        border: none !important;
        border-radius: 0.5rem;
        background: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
    }
    fieldset{
        flex-grow: 1;
    }
    .description{
        opacity: 0.86;
        font-weight: 400;
        margin-bottom: 0.75rem;
        text-wrap: pretty;
        margin-top: -0.5rem;
        margin-bottom: 1.25rem;
        text-wrap: balance;
    }
}
[data-message]{
    min-height: 100%;
    background: #620062;
    background: var(--background-color);
    border-radius: var(--radius-box, 1rem);
    border-radius: 0.3rem;
    padding: 2rem 4rem;
    &[data-message-typography-theme="a"]{
        font-family: Poppins;
        h1, h2, h3, h4, h5, h6{ font-family: Poppins; }
    }
    &[data-message-typography-theme="b"]{
        font-family: Georgia;
        h1, h2, h3, h4, h5, h6{ font-family: Georgia; }
    }
    &[data-message-typography-theme="c"]{
        font-family: Arial, Helvetica, sans-serif;
        h1, h2, h3, h4, h5, h6{ font-family: Arial, Helvetica, sans-serif; }
    }
    &[data-message-typography-theme="d"]{
        font-family: 'Courier New', Courier, monospace;
        h1, h2, h3, h4, h5, h6{ font-family: 'Courier New', Courier, monospace; }
    }
    

    .ql-align-left{ text-align: left !important; }
    .ql-align-center{ text-align: center !important; }
    .ql-align-right{ text-align: right !important; }
    .ql-align-justify{ text-align: justify !important; }

    h1, h2, h3, h4, h5, h6{
        /* all: unset; */
        font-weight: 500 !important;
        margin-top: 0.75rem !important;
        font-family: inherit !important;
        display: block;
        color: var(--heading-color); 
        &:first-of-type{
            margin-top: 0rem !important;
        }
    }
    h1{ font-size:    3rem !important; margin-bottom: 0ch !important;   }
    h2{ font-size:    2rem !important; margin-bottom: 0ch !important; }
    h3{ font-size: 1.75rem !important; margin-bottom: 0ch !important; }
    h4{ font-size:  1.5rem !important; margin-bottom: 0.5ch !important; }
    h5{ font-size:  1.4rem !important; margin-bottom: 0.5ch !important; }
    h6{ font-size:  1.3rem !important; margin-bottom: 0.5ch !important; }
    p, blockquote, li{
        font-size: 1.1rem !important;
        color: var(--body-color); 
    }
    p, blockquote, ol, ul{
        margin-bottom: 1ch !important;
        p{
            margin-bottom: 0 !important; 
        }
    }
    p, blockquote {
        font-family: inherit !important;
    }
    ul, ol{
        margin-left: 3ch;
        li{
            font-family: inherit !important;
        }
    }
    ol{
        list-style: decimal;
    }
    ul{
        list-style: disc;
    }
    hr{
        margin: 0.75rem 0 0.5rem;
    }
    button{
        padding: 0.5rem 0.75rem;
    }
    strong{
        font-weight: 600;
    }
    .cta{
        background: var(--btn_background_color);
        color: var(--btn_foreground_color);
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        display: inline-block;
        border-radius: 0.5rem;
        font-size: 1rem !important;
        text-align: center;
        font-weight: 700;
        width: max-content;
        margin: 0 auto;
        border: 0.05rem solid #00000030;
        box-shadow: 0 0.25rem 0.5rem #00000024;
        transition: transform 0.2s;
        &:hover{
            transform: scale(1.05);
        }
    }
    [data-message-header]{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.65rem 0;
        text-align: center;
        &.b{
            order: 999;
        }
        /* .material-symbols-outlined{
            font-size: 2.5rem;
            margin-right: 0.5rem;
            color: lime;
        } */
        [data-org-logo]{
            margin: 0 auto;
            max-width: 10rem;
            width: 100%;
            &.s{ max-width: 3.5rem; }
            &.m{ max-width: 7rem; }
            &.l{ max-width: 14rem; }
            transform: translateZ(0);
            transition: all .3s;
        }
    }
    [data-message-footer]{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0.65rem 0;
        text-align: center;
        &.b{
            order: 999;
        }
        /* .material-symbols-outlined{
            font-size: 2.5rem;
            margin-right: 0.5rem;
            color: lime;
        } */
        [data-org-logo]{
            margin: 0 auto;
            max-width: 10rem;
            width: 100%;
            &.s{ max-width: 3.5rem; }
            &.m{ max-width: 7rem; }
            &.l{ max-width: 14rem; }
            transform: translateZ(0);
            transition: all .3s;
        }
    }
    [data-message-main]{
        [data-message-body]{ 
            background-color: var(--card-color);
            padding: 2rem 2.5rem;
            border-radius: 0 0 0.5rem 0.5rem;
            margin-bottom: 2rem;
            @media screen and (max-width: 50rem){
                padding: 2rem 1rem 3rem;
            }
        }
        [data-message-attachments]{
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 0.75rem;
            max-width: 30rem;
            margin: 2rem auto 1rem;
        }
    }
    [data-message-footer]{ 
        padding: 1rem 0;
        text-align: center;
    }
}
[data-message-media]{
    /* background: #000 !important; */
    display: grid;
    grid-template-columns: 1fr;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-box, 1rem);
    border-radius: 0.5rem 0.5rem 0 0;
    margin: 1rem 0 0;
    [data-recording="empty"]{
        background-color: #000;
        opacity: 1;
        border-radius: 0%;
        height: 100%;
        width: 100%;
        left: 0%;
        display: flex;
        justify-content: center;
        align-items: center;
        p{
            font-family: "Geist" !important;
            font-size: 1rem !important;
            font-weight: 500;
            opacity: 0.7;
        }
    }
    video[data-recording]{
        object-fit: cover;
        left: 0%;
        width: 100%;
        height: 100%;
        /* transition: all 0.6s; */
        /* &[data-group-position="half-left"]{
            left: 50%;
            width: 50%;
            height: 100%;
        }
        &[data-group-position="half-right"]{
            left: 0%;
            width: 50%;
            height: 100%;
        } */
    }
    [data-recording],
    [data-slide]{
        grid-row: 1 / span 1;
        grid-column: 1 / span 1;
        position: relative;
        overflow: hidden;
        width: 100%;
        vertical-align: middle;
        width: 100%;
        height: 100%;
    }
    &.builder{
        background: none;
        aspect-ratio: auto;
        video[data-recording],
        [data-slide]{
            border: 1px solid #fff;
            aspect-ratio: 16 / 9;
            height: auto;
        }
        [data-slide]{
            grid-row: auto;
            grid-column: auto;
            margin-top: 1rem;
            visibility: hidden;
            opacity: 0.5;
        }
        [data-slide]{
            visibility: visible;
            [data-group]{ 
                border: 1px dashed lime;
            }
        }
        [data-media-controls]{
            background: none;
            position: static;
            opacity: 1;
        }
    }
}
[data-media-controls]{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 1rem 0 0;
    gap: 0.5rem;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0,0,0, 0.5);
    background: linear-gradient(0deg, #000000 -5rem, transparent 10rem);
    background: linear-gradient(0deg, #0000005c, transparent); */
    opacity: 0;
    transition: all .3s;
    @media screen and (max-width: 50rem){
        align-items: center;
    }
    @media screen and (min-width: 50rem){
        &:hover{
            opacity: 1;
        }
    }
    &:active{
            opacity: 1;
        }
    
    &.paused{
        @media screen and (max-width: 50rem){
            opacity: 1 !important;
        }
    }
    > div{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    button{
        appearance: none;
        width: 4rem;
        aspect-ratio: 1;
        border-radius: 100rem;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
        line-height: 1;
        padding: 0 !important;
        margin: 0!important;
        transform: scale(0.95);
        transition: all .2s;
        cursor: pointer;
        border: none;
        box-shadow: none;
        background: #fff;
        &.sm{
            &:nth-of-type(1){
                transform: scale(0.6) translateX(0.8rem);
                &:hover{
                    transform: scale(0.7) translateX(0.8rem);
                }
            }
            &:nth-of-type(5){
                transform: scale(0.6) translateX(-0.8rem);
                &:hover{
                    transform: scale(0.7) translateX(-0.8rem);
                }
            }
            .material-symbols-outlined{
                font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
            }
            
        }
        &.m{
            transform: scale(0.8);
            &:hover{
                transform: scale(0.85);
            }
        }
        span{
            font-size: 2.5rem;
            margin: 0!important;
            color: #000 !important;
            font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        &:hover{
            transform: scale(1);
        }
        &[disabled]{
            pointer-events: none;
            opacity: 0.5;
        }
    }
}
[data-slide]{
    display: grid;
    opacity: 0;
    pointer-events: none;
    /* transition: opacity 0.2s; */
    [data-group]{
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        padding: 0.5rem;
        position: relative;
        z-index: 2;
        /* grid-row: var(--grid-row-start) / span var(--grid-row-span);
        grid-column: var(--grid-column-start) / span var(--grid-column-span); */
        > *{
            width: 100%;
            transform-origin: center center;
        }
        &[data-group-typography-theme="a"]{
            font-family: Poppins;
            h1, h2, h3, h4, h5, h6{ font-family: Poppins; }
        }
        &[data-group-typography-theme="b"]{
            font-family: Georgia;
            h1, h2, h3, h4, h5, h6{ font-family: Georgia; }
        }
        &[data-group-typography-theme="c"]{
            font-family: Arial, Helvetica, sans-serif;
            h1, h2, h3, h4, h5, h6{ font-family: Arial, Helvetica, sans-serif; }
        }
        &[data-group-typography-theme="d"]{
            font-family: 'Courier New', Courier, monospace;
            h1, h2, h3, h4, h5, h6{ font-family: 'Courier New', Courier, monospace; }
        }
    }
    [data-group-media]{
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        position: relative;
        z-index: 1;
        > *{
            width: 100%;
            transform-origin: center center;
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    &[data-slide-grid="3x3"]{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);	
    }
    &[data-slide-grid="4x4"]{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    &[data-slide-grid="4x3"] {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
        [data-group="full"]{
            background: var(--background_color);
            grid-row: 1 / span 3;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 4;
            }
        }
        [data-group="full-thumbnail-top-left"],
        [data-group="full-thumbnail-top-right"],
        [data-group="full-thumbnail-bottom-right"],
        [data-group="full-thumbnail-bottom-left"]{
            background: var(--background_color);
            grid-row: 1 / span 3;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 4;
            }
        }
            
        [data-group="full-trans"]{
            background: #00000070 !important;
            grid-row: 1 / span 3;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 4;
            }
        }
        [data-group="half-left"]{
            grid-row: 1 / span 3;
            grid-column: 1/ span 2;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 3 / span 2;
            }
        }
        [data-group="half-right"]{
            grid-row: 1 / span 3;
            grid-column: 3 / span 2;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 2;
            }
        }
        [data-group="upper-third"]{
            background: var(--background_color);
            grid-row: 1 / span 1;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 2 / span 2;
                grid-column: 1 / span 4;
            }
        }
        [data-group="lower-third"]{
            background: var(--background_color);
            grid-row: 3 / span 3;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 2;
                grid-column: 1 / span 4;
            }
        }
        [data-group="upper-third-trans"]{
            background: none !important;
            background: linear-gradient(0deg, transparent, #000000ba) !important;
            grid-row: 1 / span 1;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 4;
            }
        }
        [data-group="lower-third-trans"]{
            background: none !important;
            background: linear-gradient(0deg, #000000ba, transparent) !important;
            grid-row: 3 / span 3;
            grid-column: 1 / span 4;
            + [data-group-media]{
                grid-row: 1 / span 3;
                grid-column: 1 / span 4;
            }
        }
    }
    &[data-is-slide-active="true"]{ opacity: 1; visibility: visible; }
    
    
}
[data-message-templates]{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
    > a{
        appearance: none;
        width: calc(33.3% - 0.75rem);
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
		margin-bottom: 0;
        [data-message-template-cover]{
            border: none;
            box-shadow: none;
            background: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
            aspect-ratio: 16 / 11;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: center;
            justify-content: center;
            border-radius: 1rem;
            transform: scale(0.9);
            transition: all 0.2s;
            .material-symbols-outlined{
                opacity: 1;
                font-size: 4rem;
                font-weight: 200;
                width: 100%;
                margin-bottom: 0.5rem;
                
                /* color: var(--color-primary-content); */
            }
        }
        [data-message-template-label]{
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: "PPFragment TextRegular";
            font-weight: 100;
            /* opacity: 0.9; */
            
        }
        &:hover [data-message-template-cover]{
            transform: scale(1);
        }
        &.selected [data-message-template-cover]{
            transform: scale(1);
            outline: 0.3rem solid var(--color-primary) !important;
            outline-offset: 0.15rem;
            background-color: var(--color-primary) !important;
            border: 0.15rem solid rgba(var(--buiilderFrontRGB)) !important;
            color: #fff !important;
        }
		&.disabled{
			pointer-events: none;
			opacity: 0.5;
		}
		
    }
    @media screen and (max-width: 40rem){
        gap: 1rem;
        > a{
            width: calc(50% - 0.75rem);
            [data-message-template-cover]{
                transform: scale(1);
                aspect-ratio: 16 / 9;
            }
        }
    }
}
[data-video-messages]{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
    margin: 1.5rem auto 3rem;
    max-width: 70rem;
    > div{
        width: calc(33.3% - 0.65rem);
        transform: scale(0.97);
        transition: all .2s;
        position: relative;
        @media screen and (max-width: 70rem){
            width: calc(50% - 0.65rem);
        }
        @media screen and (max-width: 40rem){
            width: 100%;
        }
        > a {
            background-color: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
            width: 100%;
            height: 100%;
            border-radius: 1rem;
            img{
                opacity: 0.2;
                aspect-ratio: 16 / 9;
                filter: grayscale(1);
            }
            
    
            
            
        }
        .dropdown{
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            visibility: hidden;
            pointer-events: none;
            > .btn[role="button"]{
                height: calc(var(--size-selector,.25rem)*5);
            }
            ul{
                border-radius: 0.75rem;
                width: 10rem;
                margin-right: 0rem;
                margin-top: 0.35rem;
                font-weight: 600;
                font-size: 0.75rem;
            }
        }
        &:hover{
            transform: scale(1);
            .dropdown{
                visibility: visible;
                pointer-events: all;
            }
        }
    }
    figure{
        position: relative;
        img{
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    
}


[data-personlize-send]{
    width: 100%;
    margin: 0 auto;
    overflow: auto;
	flex-wrap: wrap;
	align-content: start;
	[data-view-body]{
		width: 100%;
	}
	.btn.btn-link {
		background: none !important;
		border: none !important;
		padding: 0 !important;
		color: rgb(197, 223, 255) !important;
		font-size: 0.9rem;
	}
	ul{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-top: 0rem;
		li{
            font-size: 0.8rem;
			width: 100%;
			padding: 0 1.5rem;
            padding: 0 0 0 0.15rem;
			border-top: 0.1rem solid color-mix(in oklab,var(--color-base-content)10%,transparent);
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:has(input:checked){
				background: rgba(#286ea6,0.3);
			}
			&[data-message-status=""]{
				order: 1;
			}
			&[data-message-status="delivered"]{
				order: 999;
			}
			div{
				&:nth-of-type(1){}
				&:nth-of-type(2){}
				&:nth-of-type(3){}
			}
			input{
				&[type="checkbox"]{
					outline: none !important;
                    border-radius: 0.35rem !important;
					&[disabled]{
						opacity: 0.3;
						+ label{
							cursor: default;
							span:not(.material-symbols-outlined){
								text-decoration: none !important;
							}
						}
					}
				}
			}
			
			.btn.btn-info {
				background: none !important;
				color: inherit;
				border: none;
				opacity: 1;
			}
			.btn.btn-success, .btn-success[disabled] {
				background: none !important;
				border: none !important;
				color: #b4fff8 !important;
				opacity: 1;
			}
			label{
				display: flex;
    			align-items: center;
				padding: 0.65rem 0;
				cursor: pointer;
				width: 100%;
				&:hover span:not(.material-symbols-outlined){
					text-decoration: underline;
				}
			}
			[data-video-thumbnail-button] {
				width: 5rem;
				aspect-ratio: 16 / 10;
				height: auto;
				margin: 0 1rem 0 0.75rem;
			}
		}
	}
}

[data-system-message]{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 40rem;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(-50%,-50%);
    .form-item{
        width: 100%;
    }
}

[data-form-card]{
	width: 25rem;
	&[data-form-card="registration"]{
		width: 100%;
		border-radius: 1rem; 
		padding: 3rem 3rem 1.5rem 3rem;

		max-width: 35rem;
		max-width: 41rem;
		
		margin: 0 auto 3rem;
		position: relative; 
		top: 2rem;
		background-color: transparent !important;

		[data-button-container] .btn{
			font-size: 1rem;
		}
		[data-button-container] a{
			&[disabled]{
				pointer-events: none;
			}
		}
		
	}
	background: rgba(255,255,255,0.03);
    border-radius: 1.5rem;
    padding: 2rem;
	.section{
		margin: 0.75rem 0 1.5rem 0;
        h2{
            font-size: 1.2rem;
        }
	}
    input{
        border: 1px solid #ffffff29;
        box-shadow: none;
        font-weight: 600 !important;
        &.join-item{
            border: 1px solid #ffffff29;
            border-right: none;
        }
    }
    button{
        &.join-item{
            border: 1px solid #ffffff29;
            border-left: none;
            background-color: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--color-base-100)) !important;
            color: #fff !important;
            font-size: 1rem !important;
            padding: 0.5rem 1rem;
            font-weight: 600 !important;
        }
    }
    a.logo{
        width: 3rem !important;
    }
}

[data-media-recording]{
	display: flex;
    justify-content: space-between;
    align-content: stretch;
    align-items: stretch;
    gap: 1rem;
    padding-bottom: 0.5rem;
	> div:nth-of-type(1){
        width: 70%;
	}
    > div:nth-of-type(2){
        width: 30%;
        > div{
            width: 100%;    
        }
	}
    video{
        width: 100%;
        border-radius: var(--radius-field);
    }
    textarea{
        /* flex-grow: 1; */
        height: 100%;
        width: 100%;

        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 600;
        /* color: #dcdbff; */
        border-radius: 0.25rem;
    }
    .tooltip[data-tip]:before{
        max-width: 15rem;
        text-align: left;
        padding: 1rem;
        line-height: 1.4;
    }
    p{
        margin-left: 0.75rem;
        width: 100%;
        display: block;
        margin-bottom: 0.75rem;
    }
    .head-position-overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        
        &:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: calc(50% - 0.2rem);
            height: 100%;
            border-right: 0.1rem dashed;
        }
        &:after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 35%;
            border-bottom: 0.1rem dashed;
            
        }
        &:after,
        &:before{
            border-color: #000;
        }
    }
}
[data-media-recording-controls]{
	.btn{
        flex-grow: 1;
        &[disabled]{
            display: none !important;
        }
    }
}

[data-editor]{
    display: flex; 
    align-items: center; 
     
    border: var(--border)solid #0000 !important;
    border-top: none;
    background-color: var(--color-base-100);
    /* border-color: var(--input-color); */
    width: 100%;
    --input-color: var(--color-primary);
    /* border-radius: 0 0 0.75rem 0.75rem; */
    &:has(.ql-editor:focus){
        /* outline: 0.15rem solid #fff;
        outline-offset: 0.2rem; */
        /* background-color: rgba(59, 152, 227, 0.2) !important; */
    }
}
.ql-toolbar{
    width: 100%;
    background-color: var(--color-base-100);
    background: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
    border-radius: 0;
    border: var(--border)solid #0000 !important;
    border-bottom: none;

    &.ql-snow .ql-picker,
    &.ql-snow.ql-toolbar .ql-picker-label.ql-active.btn,
    &.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
    
    &.ql-snow.ql-toolbar .ql-picker-label.ql-active{
        color: inherit !important;
    }
    &.ql-snow.ql-toolbar button.ql-active{
        opacity: 1 !important;
        .ql-stroke{
            stroke: var(--color-primary) !important;
            stroke: #fff !important;
        }
    }
    &.ql-snow .ql-picker.ql-expanded .ql-picker-options{
        background-color: var(--color-base-100) !important;
    }
    /* position: relative;
    &:before{
        content: "";
        background: rgba(255,255,255,0.08) !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    } */
}
.ql-editor{
    font-weight: 500;
    width: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    color: color-mix(in oklab,var(--color-base-content) 100%,transparent) !important;
    
}
.ql-editor.ql-blank::before {
    color: color-mix(in oklab,var(--color-base-content) 100%,transparent);
    font-style: normal;
    
}
.ql-bubble .ql-tooltip{
    background: #222;
}
/* .ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border: none !important;
} */
 .ql-snow .ql-fill{
    fill: #fff !important;
}
.ql-snow .ql-stroke {
    stroke: rgb(198, 223, 255);
    stroke: color-mix(in oklab,var(--color-base-content) 100%,transparent);
    
}
.ql-toolbar.ql-snow{
    /* border-bottom: 0.15rem solid rgba(var(--buiilderFrontRGB)) !important; */
    padding: 0.5rem 0.5rem 0.5rem 0.35rem;
}
.ql-formats button,
.ql-formats .ql-picker-label{
    opacity: 0.7;
}

.ql-editor.ql-blank::before {
    color: #9ca3b1;
    font-style: normal;
    font-size: 0.9rem;
    font-weight: 600;
}

input[type="color"]::-webkit-color-swatch-wrapper,
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch,
input[type="color"]::-moz-focus-inner {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  cursor: pointer;
  border: none;
  visibility: hidden;
  
}

/* Optional: Set your own size and style */

.fieldset-legend{
    position: relative;
    background-color: var(--color-base-100);
    /* border-radius: 0.5rem 0.5rem 0 0; */
    padding: 0.65rem 1rem;
    width: 100%;
    color: color-mix(in oklab,var(--color-base-content) 70%,transparent);
    position: relative;
    
    &:before{
        /* content: ""; */
        background: var(--color-primary);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.06;
        @media (prefers-color-scheme: dark) {
            opacity: 0.08;
        }
    }
}
.fieldset{
    position: relative;
    padding: 0 !important;
    .fieldset:hover{
        &:has(input[type="color"]){
            input[type="color"]{
                opacity: 0.8;
            }
            label{
                
                background-color: color-mix(in oklab,var(--btn-color,var(--color-base-200)),#000 7%);
            }
        }
            
    }
}
.step-actions-alt{
    background-color: var(--color-base-100);
    padding: 3.5rem 1rem 0.75rem;
    /* border-radius: 0 0 0.75rem 0.75rem; */
}
[data-attachment]{
    background-color: var(--color-base-100);
    padding: 1rem;
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem;
    border-radius: 0.75rem;
    label{
        font-weight: 600;
    }
    input{
        box-shadow: none;
        border: none !important;
        border-radius: 0.5rem;
        background: color-mix(in oklab, var(--btn-color, var(--color-base-content)) 8%, var(--color-base-100));
    }
}
input[type="color"] {
    width: 2.5rem;
    height: var(--size);
    width: 100%;
    height: 3rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer !important;
    order: 2;
    transition: all 0.2s cubic-bezier(0,0,.2,1);
    + label{
        transition: all 0.2s cubic-bezier(0,0,.2,1);
        order: 2;
        padding: 0.35rem 0.35rem 0.5rem;
        text-align: center;
        width: 100%;
        border-radius: 0 0 0.5rem 0.5rem !important;
        margin: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 1;
        font-weight: 700;
        background: color-mix(in oklab,var(--btn-color,var(--color-base-content))8%,var(--color-base-100));
        font-size: 0.75rem;
        opacity: 1;
    
        /* &:before{
            content: "";
            background: var(--color-primary);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 0.75rem 0.75rem 0 0 ;
            opacity: 0.06;
            @media (prefers-color-scheme: dark) {
                opacity: 0.2;
            }
        } */
        
    }
}

input[type="color"]::-webkit-color-swatch{
    visibility: hidden;
}



#recorded,
#webcam,
#deviceSelector{
	display: none;
	&.visible{
		display: block;
	}
}
 
@keyframes message-reveal {
    0% {
      /* transform: translate3d(0,20rem,0) scale(1);
      opacity: 0; */
    }
    100% {
      /* transform: translate3d(0,0,0) scale(1);
      opacity: 1; */
    }
}
  
@keyframes pulse-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      opacity: 1;
    }
  }
  
  .pulsing {
    animation: pulse-opacity 1.5s ease-in-out infinite;
  }


.scrubber,
[data-scrubber] {   
    --scrubber-color: #fff;
    --scrubber-height: 0.4rem;
    display: block !important;
    width: 100%;
    align-items: center;
    gap: 0.25rem;
    text-align: center !important;
    line-height: 0;
    background-color: var(--card-color); 
    &:hover {
        --scrubber-height: 1rem;
    }
    #slider {
        vertical-align: bottom;
        width: 100%;
        appearance: none;
        height: var(--scrubber-height);
        background: purple;
        outline: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        cursor: pointer;
        background: linear-gradient(to right, var(--scrubber-color) 0%, var(--scrubber-color) 0%, #000 0%, #000 100%);
        transform: translate3d(0,0,0);
        transition: all 0.2s;
    }
    #slider::-webkit-slider-runnable-track {
        /* width: 100%; */
        appearance: none;
        height: var(--scrubber-height);
        /* background: green; */
        outline: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        cursor: pointer;
    }
    #slider::-webkit-slider-thumb {
        appearance: none;
        width: 0rem;
        height: var(--scrubber-height);
        border-radius: 0;
        background: red;
        position: relative;
        z-index: 2;
        visibility: hidden;
    }
    #slider::-moz-slider-thumb {
        appearance: none;
        width: 1rem;
        height: var(--scrubber-height);
        border-radius: 0;
        background: red;
        visibility: hidden;
    }
    #time-label {
        font-size: 0.75rem;
        font-weight: 600;
        white-space: nowrap;
        text-align: center;
        color: #fff;
        min-width: 2rem;
        background: #000;
        display: inline-block;
        padding: 0.25rem 0.35rem;
        line-height: 1;
        border-radius: 0.25rem;
    }
}

[data-material-icons] button {
    flex-grow: 1;
    aspect-ratio: 1;
    height: auto;
    .material-symbols-outlined{
        font-size: 2.25rem !important;
        font-weight: 500;
        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
}

[data-attr] {
    background: black;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 2;
    color: #ccc;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        font-weight: 800;
        img {
            margin-left: 0.5rem;
            width: 5.5rem;
            height: auto;
            display: block;
        }
    }
}





/* Video Themes */
[data-message-theme]{
    background: var(--background_color);
    line-height: 1.3;
    /* [data-slide="0"],
    [data-slide="3"]{
        background: linear-gradient( transparent 1rem, var(--background_color) 30rem);
    } */
    [data-slide]{
        [data-group]{
            background: var(--background_color);
            padding: 1rem 2rem;
            position: relative;
            overflow: hidden;
            > *{
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-duration: var(--animate-duration);
                animation-duration: var(--animate-duration);
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                opacity: 0;
            }
            &.editing > *{
                opacity: 1 !important;
            }
            .material-symbols-outlined{
                font-weight: 700;
                font-size: inherit;
                font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
                vertical-align: middle;
                color: var(--icon_color) !important;
            }
        }
        [data-group-media]{
            background: var(--background_color);
            position: relative;
            overflow: hidden;
            > *{
                -webkit-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-duration: var(--animate-duration);
                animation-duration: var(--animate-duration);
                -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
                opacity: 0;
            }
            /* img{
                transform: scale(1.2);
            } */
        }
            
    }
    h1, h2, h3, h4, h5{
        color: var(--heading_color) !important;
        font-weight: 700 !important;
        line-height: 1.1;
        display: inline-block;
        
    }
    p, ul, li {
        color: var(--normal_color) !important;
    }
    .material-symbols-outlined{
        margin-bottom: 0.5rem;
        font-weight: 900;
    }
}

.captions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    color: white !important;
    transition: background-color 0.5s, color 0.5s;
    position: relative;
    background-color: var(--card-color);
    box-shadow: inset 0 -20rem 0 #00000080;
    color: white !important;
    padding: 0 0.35rem;
    overflow: hidden;
    /* display: none !important; */
    > div{
        display: flex;
        align-items: center;
    }
    button{
        display: inline-flex;
        font-size: 1.5rem;
        width: auto;
        height: 3.25rem;
        align-items: center;
        aspect-ratio: 0.9;
        justify-content: center;
        padding: 0;
        .material-symbols-outlined{
            font-size: 1.75rem;
            font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
        }
    }
    button{
        &:nth-of-type(3){
            .material-symbols-outlined{
                font-size: 1.5rem;
                font-variation-settings: 'FILL' 1, 'wght' 900, 'GRAD' 0, 'opsz' 24 !important;
                font-weight: 900;
            }
        }
    }
}

/* .captions-black {
    background-color: black;
    color: white !important;
}

.captions-card {
    background-color: var(--card-color);
    color: black;
} */

.caption-text {
   flex: 95;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    line-height: 1.25;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: start;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    padding: 0 1rem;
}

.caption-text.hidden button {
    /* opacity: 0.2;
    pointer-events: none; */
}

/* .captions .caption-button {
    flex: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    color: #fff;
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translate3d(0, -50%, 0);
} */

.captions button .material-icons {
    font-size: 24px;
    color: white;
}

.transition-opacity {
    transition: opacity 0.5s ease-in-out;
}