:root {
    --font-primary: 'Roboto', sans-serif;
    --font-secondary: 'Niveau Grotesk', sans-serif;
    --white: #FFFFFF;
    --light-grey: #F8F8F8;
    --mid-grey: #DFDFDF;
    --flint: #4C4C4C;
    --basalt: #9E9BA8;
    --citrine: #FDF6BA;
    --pyrite: #FFF175;
    --amber: #FFD075;
    --prasiolite: #B4F5DD;
    --jade: #9DE1C8;
    --emerald: #73D4AD;
    --dark-emerald: #4CA380;
    --aquamarine: #E0EEEF;
    --topaz: #8DCCD0;
    --agate: #75E9FF;
    --amethyst: #9475FF;
    --sapphire: #0063FE;
    --malachite: #B6FF75;
    --red-alert: #F40009;
    --soft-red: #e19d9d;
}

* {
    scrollbar-width: thin;
}

html, body {
    font-size: 16px;
    font-family: var(--font-primary);
    font-weight: 400;
    color: var(--flint);
    /*overflow: hidden;*/
}

main {
    /*overflow: hidden;*/
}

.fs-page-content {
    margin-top: 75px; 
    width:100vw;
}

/* Images */
.fs-3-dots {
    width: 40px;
    height: 8px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAICAYAAACLUr1bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACjSURBVHgBtZLBDcMgDEVtA3dG6AjJFtw6QzdoN+kGXYHcuHaCdoSMkAGQqC1RqYcU5+InIZA/TwYBApNSOnnvH7yceEQeudZ6K6WscABLH3v46sEvG2+atSbWPjnn7juhEPuthlj7hIjngT+BgrUvB9wGGyLoDUx9aq29/6WcLaBg7RO/82XvFlILIVxBwdqnnPPKH3XmwvINeHpKTTKtgbX/AaTNdN1BVWGCAAAAAElFTkSuQmCC');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}


/*Effects*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
}


/*Overrides*/
input[type=range] {
    -webkit-appearance: none;
}

    input[type=range]::-webkit-slider-runnable-track {
        width: 300px;
        height: 3px;
        background: var(--light-grey);
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        background: var(--flint);
        margin-top: -6px;
    }

    input[type=range]:focus {
        outline: none;
    }

        input[type=range]:focus::-webkit-slider-runnable-track {
            background: var(--mid-grey);
        }


    /* When slider value is higher than original */
    input[type=range].higher::-webkit-slider-runnable-track {
        background: var(--prasiolite);
    }

    /* When slider value is lower than original */
    input[type=range].lower::-webkit-slider-runnable-track {
        background: var(--soft-red);
    }

.form-label {
    font-weight: 500;
    font-size: 1rem;
    font-family: var(--font-primary);
}

.form-control {
    border: solid 1px #c7c7c7;
    border-radius: 2px;
    background-color: white;
}

.form-check-input {
    border: solid 1px #c7c7c7;
}

.form-control:active {
}


.form-control, .form-check-label {
    font-weight: 400;
    font-size: 1rem;
    font-family: var(--font-primary);
}

.form-check-input:checked {
    background-color: var(--dark-emerald);
}

    .form-check-input:checked[type=radio] {
        --bs-form-check-bg-image: ''
    }

.form-check-input:checked {
    background-color: var(--flint);
}


.page {
    margin: 0 !important;
}

.text-success {
    color: var(--jade) !important;
}

.text-danger {
/*    color: var(--flint) !important;*/
}

.bg-warning {
    background-color: var(--amber) !important;
}

.bi .bi-hand-thumbs-up-fill {
    color: var(--jade);
}

.bi .bi-hand-thumbs-down {
    color: var(--flint);
}

.carousel-control-prev-icon {
    background-image: url(data:image/png;base64,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)
}

.carousel-control-next-icon {
    background-image: url(data:image/png;base64,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);
}

.carousel-control-next, .carousel-control-prev {
    width: 100px;
}

.carousel-item {
    padding-left: 125px;
    padding-right: 125px;
}


.star-rating {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.star {
    font-size: 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ccc;
}

    .star:hover,
    .star.active {
        color: #ffd700;
        transform: scale(1.1);
    }

        .star:hover ~ .star {
            color: #ccc;
        }

.star-rating:hover .star {
    color: #ffd700;
}

.star-rating .star:hover ~ .star {
    color: #ccc;
}


.star-sm {
    color: #ddd;
    cursor: pointer;
}

    .star-sm.active {
        color: #ffd700;
    }

.btn-link {
    color: var(--flint);
}


.btn-link-rnd {
    color: var(--flint);
    background-color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
}

    .btn-link-rnd:hover {
        background-color: var(--light-grey);
    }

    /*Common*/
    .fl-flex-container {
    display: flex;
    height: 100vh;
}

.fs-badge {
}

.fs-btn {
    font-family: var(--font-primary);
    border-radius: 50px;
    padding: 10px 40px;
    cursor: pointer;
    user-select: none;
    min-width: 200px;
    text-align: center;
    border: none;
    font-size: 0.9rem;
    transition: all 0.2s ease; /* smooth hover */
}

.fs-btn-xs {
min-width:50px;
}

.fs-btn-flex {
    flex: 1 1 0;
}

.fs-btn-sm {
    height: 34px;
    padding: 8px 40px;
    font-size: 0.8rem;
}


    .fs-btn-darkemerald {
    background-color: var(--dark-emerald);
    color: white;
}

    .fs-btn-darkemerald:hover {
        background-color: #27ae60;
        color: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transform: translateY(-1px); /* tiny lift */
    }


.fs-btn-submit {
    background-color: var(--dark-emerald);
    color: white;
}

    .fs-btn-submit:hover {
        background-color: #27ae60;
        color: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transform: translateY(-1px); /* tiny lift */
    }


.fs-btn-outline-submit {
    background-color: white;
    color: var(--dark-emerald);
    border: solid 1px var(--dark-emerald);
}


.fs-btn-flint {
    background-color: var(--flint);
    color: white;
}

    .fs-btn-flint:hover {
        background-color: #5E5E5E;
        color: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transform: translateY(-1px); /* tiny lift */
    }



.fs-btn-emerald {
    background-color: var(--emerald);
    color: white;
}

    .fs-btn-emerald:hover {
        background-color: #64cca2;
        color: white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        transform: translateY(-1px); /* tiny lift */
    }


.fs-btn-outline-flint {
    background-color: white;
    color: var(--flint);
    border: solid 1px var(--flint);
}

    .fs-btn-outline-flint:hover {
        background-color: var(--light-grey);
        color: var(--flint);
    }

.palette-action-buttons {
    padding-top: 45px;
    padding-bottom: 30px;
    border-bottom: solid 1px var(--flint);
}
.palette-action-buttons .fs-btn {
    padding: 10px 15px !important;
    min-width: 100px !important;
}

.fs-btn-danger {
    color: white;
    background-color: var(--red-alert);
    border: solid 1px var(--red-alert);
}

    .fs-btn-danger:hover {
        color: white;
        background-color: var(--flint);
        border: solid 1px var(--flint);
    }

.fs-btn-primary {
    background-color: var(--amethyst);
    color: white;
}

    .fs-btn-primary:hover {
        background-color: var(--flint);
        color: var(--white);
    }

.fs-btn-amber {
    background-color: var(--amber);
    color: var(--flint);
}

    .fs-btn-amber:hover {
        background-color: var(--flint);
        color: var(--white);
    }

    .fs-btn-outline-grey {
        background-color: var(--mid-grey);
        color: var(--flint);
        border: solid 1px var(--flint);
    }

    .fs-btn-outline-grey:hover {
        background-color: white;
        color: var(--flint);
    }

.fs-btn-outline-mid-grey {
    background-color: white;
    color: var(--mid-grey);
    border: solid 1px var(--mid-grey);
}

.fs-btn.selected {
    background-color: var(--dark-emerald) !important;
}

    .fs-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 10px;
}

        .fs-icon-btn:hover {
            transform: scale(1.1);
        }

.fs-none-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
}

    .fs-none-btn:hover {
        transform: scale(1.2);
    }


    .fs-icon-delete-btn {
        background-color: var(--flint);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' d='M20,95h60c1.381,0,2.5-1.119,2.5-2.5V30H85c1.381,0,2.5-1.119,2.5-2.5v-10c0-1.381-1.119-2.5-2.5-2.5H62.5V7.5C62.5,6.119,61.381,5,60,5H40c-1.381,0-2.5,1.119-2.5,2.5V15H15c-1.381,0-2.5,1.119-2.5,2.5v10c0,1.381,1.119,2.5,2.5,2.5h2.5v62.5C17.5,93.881,18.619,95,20,95z M77.5,90h-55V30h55V90z M42.5,10h15v5h-15V10z M17.5,20H40h20h22.5v5H80H20h-2.5V20z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
    }

.fs-icon-restore-btn {
    background-color: var(--emerald);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23000000' d='M20,95h60c1.381,0,2.5-1.119,2.5-2.5V30H85c1.381,0,2.5-1.119,2.5-2.5v-10c0-1.381-1.119-2.5-2.5-2.5H62.5V7.5C62.5,6.119,61.381,5,60,5H40c-1.381,0-2.5,1.119-2.5,2.5V15H15c-1.381,0-2.5,1.119-2.5,2.5v10c0,1.381,1.119,2.5,2.5,2.5h2.5v62.5C17.5,93.881,18.619,95,20,95z M77.5,90h-55V30h55V90z M42.5,10h15v5h-15V10z M17.5,20H40h20h22.5v5H80H20h-2.5V20z'/%3E%3Cpath fill='%23000000' d='M50,82.5c11.028,0,20-8.972,20-20c0-10.179-7.65-18.59-17.5-19.826V40c0-0.922-0.507-1.769-1.32-2.204c-0.813-0.435-1.799-0.388-2.566,0.124l-7.5,5C40.418,43.383,40,44.164,40,45s0.418,1.617,1.113,2.08l7.5,5c0.418,0.279,0.902,0.42,1.387,0.42c0.405,0,0.81-0.098,1.18-0.296c0.813-0.435,1.32-1.282,1.32-2.204v-2.274C59.583,48.922,65,55.082,65,62.5c0,8.271-6.729,15-15,15s-15-6.729-15-15c0-1.381-1.119-2.5-2.5-2.5S30,61.119,30,62.5C30,73.528,38.972,82.5,50,82.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
}


.fs-alternate-option-btn {
    border: solid 1px var(--light-grey);
    background-color: var(--light-grey);
    text-align: left;
    border-radius: 8px;
    padding: 10px 15px;
}

    .fs-alternate-option-btn > h1 {
        color: var(--flint);
        font-family: var(--font-secondary);
        font-size: 1.5rem;
        font-weight: 300;
        margin-bottom: 0;
    }

    .fs-alternate-option-btn > p {
        font-family: var(--font-primary);
        color: var(--flint);
        font-size: 0.9rem;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 0;
    }

    /*.fs-alternate-option-btn:hover > h1, p {
        color:white;
    }
*/
    .fs-alternate-option-btn:hover {
        background-color: var(--aquamarine);
        border: solid 1px var(--aquamarine);
    }

    .fs-user-avatars {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.fs-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--flint);
    border: solid 1px var(--flint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.fs-big-round-go {
    font-family: var(--font-primary);
    font-weight: 300;
    text-transform: uppercase;
    font-size: 2.5rem;
    background-color: black;
    color: white;
    border-radius: 50%;
    padding: 45px;
}


.fs-red {
    color: var(--red-alert) !important;
}

.fs-soft-red {
    color: var(--soft-red) !important;
}

.fs-sapphire {
    color: var(--sapphire) !important;
}

.fs-mid-grey {
    color: var(--mid-grey) !important;
}

.fs-basalt {
    color: var(--basalt) !important;
}

.fs-dark-emerald {
    color: var(--dark-emerald) !important;
}

.fs-emerald {
    color: var(--emerald) !important;
}


.fs-flint {
    color: var(--flint) !important;
}


.fs-black{
    color: black !important;
}

/*TEXT*/
p {
    color: var(--flint);
}

.fs-title {
    /*font-family: var(--font-primary);
    font-size: 1.75rem;*/
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    line-height: 2.25rem;
    font-weight: 500;
    color: var(--flint);
}


.fs-title-sub-slim {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 300;
    letter-spacing: 0.03rem;
    color: var(--flint);
    text-overflow: ellipsis;
    text-align:left;
/*    white-space: nowrap;
    max-width: 290px;
    overflow: hidden;
    position: relative;
    display: inline-block;*/
}

.fs-title-sub-mid {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 400;
    letter-spacing: 0.03rem;
    color: var(--flint);
}
    .fs-title-ng {
    font-family: var(--font-secondary);
    font-size: 2.25rem;
    font-weight: 300;
}


.fs-title-sm-ng {
    font-family: var(--font-secondary);
    font-size: 1.75rem;
    font-weight: 500;
}

.fs-title-xsm-ng {
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 500;
}


.fs-small-headline {
    font-family: var(--font-secondary);
    font-size: 1.50rem;
    font-weight: 500;
}

.fs-small-grey-text {
    font-family: var( --font-primary);
    font-size: 1.1rem;
    color: #9c9c9c;
}

.fs-xsm-text {
    font-family: var( --font-primary);
    font-size: 0.8rem;
    color: var(--flint);
}


.fs-md-text {
    font-family: var( --font-primary);
    font-size: 1.2rem;
    color: var(--flint);
    font-weight:400;
}

.fs-mini-bold-upper-text {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}



/* Dialog Modal */
.modal-header {
    border: none !important;
}

.modal-body {
    padding-top: 0 !important;
}

.modal-footer {
    border: none !important;
    justify-content: center !important;
}

/* Custom Modal Styles */
.fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.fs-modal-dialog {
    
    padding: 50px;
    pointer-events: auto;
    position: relative;
    background-color: white;
    border-radius: 8px;
    animation: fadeIn 0.3s ease-out;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}


.fs-modal-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    background-clip: padding-box;
}



.fs-dialog-mini-underline {
    position: relative;
    background-color: var(--flint);
    width: 25px;
    height: 2px;
    margin: 0 auto;
}

.fs-modal-content-center {
    text-align: center;
    font-size: 1.2rem !important;
    font-weight: 400;
}

.fs-modal-header-center {
    font-family: var(--font-secondary);
    font-size: 2.5rem !important;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 20px;
    text-align: center;
}

.fs-modal-footer-center {
    justify-content: center;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
}


/*Pills*/
.fs-pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fs-pill {
    background-color: var(--mid-grey);
    color: var(--flint);
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    flex: 0 0 160px;
    font-size: 0.8rem;
}


.fs-pill-outline {
    background-color: transparent;
    border:solid 1px var(--mid-grey);
    color: var(--flint);
}

    .fs-pill:hover {
        background-color: var(--jade);
    }

    .fs-pill.selected {
        background-color: var(--flint);
        color: white;
    }

        .fs-pill.selected:hover {
            background-color: var(--citrine);
            color: var(--flint);
        }

.fs-pill-disabled {
    background-color: var(--light-grey);
}

/*
.fs-pill:not(:disabled):hover {
    background: var(--jade);
    color: var(--flint);
}*/

fs-pill.in-distribution {
    background-color: var(--mid-grey);
}

fs-pill.not-in-distribution {
    background: white;
    border: solid 1px var(--mid-grey);
}

.fs-archetype-select-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}















.fs-badge-list {
    display: flex;
    gap: 10px;
}

.fs-badge {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 500;
}


/*Chat*/

.fs-chat-edit-actions {
    display: flex;
    gap: 10px;
}

.fs-chat-container {
    /*padding: 10px 200px 10px 200px;*/
/*    padding-top: 40px;*/
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    font-family: var(--font-primary);
}


.fs-chat-history {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: none;
    height: 100%;
}

.fs-chat-intro-text {
    font-family: var(--font-primary);
    font-weight: 300;
    color: var(--flint);
    font-size: 1.5em;
    line-height: 2rem;
}

.fs-chat-edit-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fs-editable-chat-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    resize: none;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    resize: none;
    background-color: #fafafa;
    font-size: 0.9rem;
}

    .fs-editable-chat-textarea:focus {
        outline: none;
    }

.fs-chat-bubble-actions {
    display: flex;
    justify-content: end;
}


    .fs-chat-bubble-actions button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.9em;
        background: none;
    }

        .fs-chat-bubble-actions button:hover {
            opacity: 0.5;
        }

.fs-chat-user:has(.fs-editable-chat-textarea) {
    min-width: 90%;
}

    .fs-chat-user:has(.fs-editable-chat-textarea) .fs-editable-chat-textarea {
        background-color: white;
        border-radius: 0;
    }

.fs-chat-options {
    display: flex;
    justify-content: center;
    gap: 8px;
}



.fs-chat-assistant {
    position: relative;
    padding-left: 40px;
    font-family: var(--font-primary);
    color: black;
    line-height: normal;
    font-weight: 400;
    line-height: 1.5;
    /*   width: 60%;*/
}

    .fs-chat-assistant::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234c4c4c'/%3E%3Ccircle cx='9.94629' cy='7.86355' r='1.82277' transform='rotate(45 9.94629 7.86355)' fill='white'/%3E%3Ccircle cx='12.5963' cy='11.746' r='1.82277' transform='rotate(45 12.5963 11.746)' fill='white'/%3E%3Ccircle cx='7.62842' cy='11.7112' r='1.82277' transform='rotate(45 7.62842 11.7112)' fill='white'/%3E%3C/svg%3E");
        /*content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23FFD075'/%3E%3Ccircle cx='9.94629' cy='7.86355' r='1.82277' transform='rotate(45 9.94629 7.86355)' fill='%234C4C4C'/%3E%3Ccircle cx='12.5963' cy='11.746' r='1.82277' transform='rotate(45 12.5963 11.746)' fill='%234C4C4C'/%3E%3Ccircle cx='7.62842' cy='11.7112' r='1.82277' transform='rotate(45 7.62842 11.7112)' fill='%234C4C4C'/%3E%3C/svg%3E");*/
        position: absolute;
        left: 0;
        width: 30px;
        height: 30px;
    }

    .fs-chat-assistant > h1 {
        font-weight: 600;
        font-size: 1.8rem;
        line-height: normal;
        padding-bottom: 0.5em;
    }

    .fs-chat-assistant h2 {
        font-size: 1.3rem;
        padding-bottom: 1.2rem;
    }

    .fs-chat-assistant h3 {
        font-size: 1.3rem;
        padding-bottom: 1.2rem;
    }



.fs-chat-asistant ul {
    margin-left: 20px;
}

.fs-chat-assistant ul li {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 10px;
}

.fs-chat-assistant ol {
    margin-left: 20px;
}

    .fs-chat-assistant ol li {
        font-size: 1rem;
        line-height: 1.2rem;
        margin-bottom: 10px;
    }

.fs-chat-assistant > p {
    font-size: 1rem;
    line-height: 1.5;
}


.fs-chat-user {
    max-width: 80%;
    background: var(--light-grey);
    place-self: end;
    font-size: 1em;
    padding: 20px;
    border-radius: 20px 20px 20px 0;
}

    .fs-chat-user p {
        font-size: 1rem;
        color:black;
        /*        margin: 0 !important;*/
    }

.fs-chat-playground {
    max-width: 100%;
    margin-right: 50px;
    margin-left: 50px;
}

.fs-chat-100{
    min-width: 100%;
}


.fs-chat-message-container {
    display: flex;
    flex-direction: column;
    /*   background-color: rgb(244 244 244);*/
    background-color: white;
    border: solid 1px #e6e6e6;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    border-radius: 10px;
    width: 100%;
    margin: auto;
    max-width: 800px;
    margin-bottom: 28px;
    margin-top: 5px;
    padding-top: 10px;
    z-index: 1000;
}

.fs-chat-message-input {
    flex-grow: 1;
    min-height: 48px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: .9rem;
    /*background-color: rgb(244 244 244);*/
    background-color: white;
    font-family: 'Roboto';
}

    .fs-chat-message-input input {
        width: 100%;
        border: none;
        background: transparent;
        outline: none;
        font-size: 12px;
    }


.fs-chat-input {
    overflow-y: hidden;
    /*background-color: #f5f5f5;*/
    background-color: white;
    border: none;
    border-radius: 30px;
    padding: 15px;
    resize: none;
    height: 52px;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
}


    .fs-chat-input:focus {
        outline: none;
    }

.fs-chat-button-container {
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 20px;
    background: transparent;
}

    .fs-chat-button-container > p {
        font-size: 14px;
        color: darkgrey;
    }


.fs-chat-context-menu {
    position: absolute;
    bottom: 100%;
}

.fs-chat-button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: #000;
    color: white;
    cursor: pointer;
    margin-left: 10px;
}

.fs-chat-send-button::before {
    content: "↑";
    font-size: 20px;
    color: white;
    top: -2px;
    position: relative;
}

.fs-chat-extra-button::before {
    content: "?";
    font-size: 1rem;
    color: white;
    position: relative;
}

.fs-chat-button:hover {
    background-color: var(--amethyst);
}

.fs-chat-context-menu button {
    margin-left: 10px;
    font-size: 0.8rem;
    padding: 8px 20px 8px 20px;
    background-color: black;
    border: none;
    color: white;
    font-family: var(--font-primary);
    border-radius: 40px;
    word-wrap: normal;
    width: 250px;
    margin: 5px;
    margin-left: calc(-50% + 62px);
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

    .fs-chat-context-menu button:hover {
        background-color: var(--amethyst);
        box-shadow: none;
    }


/*chat approver*/
/*.fl-chat-approver-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    font-family: var(--font-primary);
    padding-top:50px;
    padding-right:100px;
}



    .fl-chat-approver-container .fl-chat-assistant {
        width: 100% !important;
    }

        .fl-chat-approver-container .fl-chat-assistant > p {
            width: 60% !important;
        }

.fl-wide-left-nav {
    width: 444px;
    margin-top: 120px;
    margin-left: 10px;
}

.fl-chat-options-approve {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    position: relative;
    top: -85px;
    margin-left: 100px;
}

.fl-wide-nav-btn {
    padding: 10px;
    display: block;
    color: white;
}

.fl-chat-history blockquote {
    background-color: var(--light-grey);;
    padding: 40px;
    border-radius: 20px;
    margin: 30px;
    margin-bottom: 0;
    padding-bottom: 90px;
}

.fl-block-button {
    border: none;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: transparent;
    color: var(--flint);
    text-underline-position: under;
    margin: 0;
    padding: 0;
}

.fl-block-title {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-secondary);
}
*/
/*.fl-quote-svg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAABHQAAAR0BDfQKfgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAD1SURBVEiJ7ZWxTsJgFIW/axpmBlyBkTdwURK3PgYy+SrgwqjgyEswgK+ggwkDMrC6wgAOx8WS8ntj/4RAYtKbNGlvv3PuSf7e1CRxyro4qfs5BhgwiGQfJc0BzKwF3McOUeSVSuLnzNJY3f8/g3JAOeD4SoCJ078FKkFvl7v/dHRV4CrofZFtZ25Lr/m9kUsgCdlA9+DoRh44dcBugfklsAk0O6AZgjeO+UdE+r6jG0oiBGcOeBeRfu2kbxwMANqO+SIifc/RPe3f58AXB+wUmNec9FugnjEJgJnVgFfgLfeJbYExf1cLeA5675JW2YOVP/2i+gZk7jZ1MnlJ8gAAAABJRU5ErkJggg==');
    height: 26px;
    width: 26px;
    margin-bottom: 10px;
    background-repeat: no-repeat;
}
*//*
.fl-quote-title {
    margin-bottom: 10px;
    font-family:var(--font-secondary);
    font-weight:500;
    font-size:1.2rem;
}

.fl-approve-menu-btn {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fl-approve-menu-btn-active {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    position:relative;

}

*/

/*    .fl-approve-menu-btn-active::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: black;
        border-radius: 50%;
        left: 16px;
    }
*/

/*.fl-approve-menu-btn-done {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fl-approve-menu-btn .fl-nav-num {
    background-color: white;
    border-radius: 50%;
    display: flex;
    color: white;
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    border:solid 1px var(--flint);
}

.fl-approve-menu-btn .fl-nav-text {
    color: var(--flynt);
    font-weight: 300;
    font-size: 0.9rem;
}

.fl-approve-menu-btn .fl-nav-num {
    color: var(--mid-grey);
}

.fl-approve-menu-btn-active .fl-nav-num {
    background-color: var(--red-alert);
    border-radius: 50%;
    display: flex;
    color: white;
    min-width: 20px;
    height: 20px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;*/
    /*border:solid 1px var(--flint);*/
    /*position: relative;
    left: 5px;
    margin-right: 10px;
}*/

/* Ping effect localized */
    /*.fl-approve-menu-btn-active .fl-nav-num::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        background: rgba(255, 0, 0, 0.25);
        animation: ping 1.3s ease-out infinite;
        pointer-events: none;
    }

@keyframes ping {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.1;
    }
}


.fl-approve-menu-btn-active .fl-nav-text {
    font-weight: 400;
}

.fl-approve-menu-btn-done .fl-nav-num {
    display: flex;
    background-color: var(--mid-grey);
    color: var(--flint);
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    border: solid 1px black;
    font-weight: 900;
    font-size: .7rem;
}

.fl-user-comments {
    margin-bottom: 15px;
}

    .fl-user-comments p {
        margin-bottom: 5px;
    }

    .fl-user-comments ul {
        margin-top: 5px;
        padding-left: 20px;
    }*/



.fs-mini-underline {
    min-width: 53px;
    max-width: 53px;
    margin: 0 auto;
    height: 2px;
    background-color: black;
}

/*Archetypes*/

.fs-arch-container {
    position: relative;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: white;
    font-family: var(--font-primary);
}

.fs-archetype-canvas-container {
    width: 100%;
    height: 100%;
    height: 70vh;
    width: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: flex-start;
}

.fs-arch-left-panel {
    flex: 1;
    padding: 40px;
    padding-top: 40px;
    display: flex;
    height: 100%;
    overflow: hidden;
}

.fs-arch-right-panel {
    flex: 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: flex-start;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    background-color: white;
}

.fs-arch-left-panel, .fs-arch-right-panel {
    transition: all 0.5s ease-in-out;
}

.fs-archetype-logo-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .fs-archetype-logo-container > div {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
    }

    .fs-archetype-logo-container svg {
        width: 100%;
        height: auto;
        max-width: calc(100% - 80px);
        max-height: calc(100% - 80px);
        padding: 40px;
        object-fit: contain;
    }


/*.fs-archetype-button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}


.fs-archetype-select-button {
    border: solid 1px var(--flint);
    color: var(--flint);
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s, color 0.3s;
    min-width: 160px;
    text-align: center;
    flex: 1 0 160px;
    max-width: 160px;
}*/

/*    .fs-archetype-select-button:not(:disabled):hover {
        background: var(--jade);
        color: var(--flint);
    }

    .fs-archetype-select-button.selected {
        background: var(--flint);
        border-color: var(--flint);
        color: white;
    }

    .fs-archetype-select-button.in-distribution {
        background: var(--light-grey);
    }

    .fs-archetype-select-button.not-in-distribution {
        background: white;
    }

    .fs-archetype-select-button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
*/

/*.fs-archetype-distribution-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    position: relative;
    background-color: var(--flint);
}

    .fs-archetype-distribution-circle:hover {
        background-color: var(--hover-color);
        transform: scale(1.05);
    }

    .fs-archetype-distribution-circle img {
        width: 50%;
        height: 50%;
        object-fit: contain;
        border: solid 10px white;
        border-radius: inherit;
    }
*/




/*Trait approver*/

/*.fs-trait-distribution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.fs-trait-distribution-circle {
    border-radius: 50%;
    background-color: var(--flint);
    border: solid 1px var(--flint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: transform 0.2s;
}

    .fs-trait-distribution-circle:hover {
        transform: scale(1.05);
    }

    .fs-trait-distribution-circle.top-trait {
        background-color: #9DE1C8;
    }

        .fs-trait-distribution-circle.top-trait .trait-text {
            color: var(--flint);
            font-weight: 700;
        }

    .fs-trait-distribution-circle > span {
        color: var(--flint);
        text-align: center;*/
        /* Remove the fixed font-size: 0.9rem; as it will be set inline */
        /*padding: 0.5rem;
        word-wrap: break-word;
        text-transform: capitalize;*/
        /* Add these properties for better text wrapping in small circles */
        /*width: 85%;
        display: inline-block;
        overflow-wrap: break-word;
        hyphens: auto;
    }*/
/*
    .fs-trait-distribution-circle > span {
        color: var(--flint);
        text-align: center;
        font-size: 0.9rem;
        padding: 0.5rem;
        word-wrap: break-word;
        text-transform: capitalize;
    */ }




.all-traits-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 2rem;
    margin-bottom:100px;
}


/*aside bar edit comment*/
.fs-comment-card {
    background-color: var(--aquamarine);
    border:none;
}
/*Statements*/
.fs-landing-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:100%;
/*    min-height: 100vh;
*/    padding: 40px;
    box-sizing: border-box;
    animation: fadeInUp 0.8s ease-out;
    width:100vw;
}

.fs-landing-container {
    display: flex;
    width: 80%;
    min-width: 800px;
}

.fs-landing-column:nth-child(1) {
    border-right: solid 1px var(--flint);
    display: flex;
    align-items: center;
    justify-content: end;
}

.fs-landing-right {
    display:inline-block !important;
    text-align:right;
}

.fs-landing-eyebrow {
    font-size: 1.1rem;
    font-weight: 500;
    font-family: var(--font-primary);
    padding-bottom: 40px;
    color: var(--flint);
}

.fs-landing-column {
    flex: 1;
    padding: 0 60px 0 60px;
    box-sizing: border-box;
}

.fs-landing-title {
    font-family: var(--font-secondary);
    font-weight: 200;
    font-size: 5rem;
    margin: 0;
    text-transform:capitalize;
}


/* Statement Container Styles */


.fs-statement-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
    opacity: 0;
    transform: translateY(100%);
    
}

    .fs-statement-slide.active {
        opacity: 1;
        transform: translateY(0);
        z-index: 2;
        overflow:auto;
    }

    .fs-statement-slide.completed {
        opacity: 0;
        transform: translateY(-100%);
        z-index: 1;
    }

    .fs-statement-slide.upcoming {
        opacity: 0;
        transform: translateY(100%);
        z-index: 1;
    }

    .fs-statement-slide.sliding-out {
        opacity: 0;
        transform: translateY(-100%);
        z-index: 3;
    }

.fs-statement-layout {
    min-width: 1000px;
    max-width: 1600px;
    width: 100%;
    padding: 40px;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

@media (min-width: 2501px) {
    .fs-statement-layout {
        max-width: 80%;
    }
}
.fs-statement-left {
    flex: 0 0 66%;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fs-statement-right {
    flex: 0 0 34%;
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.fs-statement-section.fs-statement-text {
    padding-right: 60px;
    text-align: left;
    border-right: 1px solid var(--flint);
    width:100%;
}

.fs-statement-section.fs-small-grey-text {
    text-align: left;
}

.fs-statement-rating {
    margin-top: 0;
    text-align: left;
}


.fs-statement-review-container {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.three-columns-grid > * {
    padding: 1rem;
}



@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Add scrollbars only when needed */
.fs-statement-section {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

    .fs-statement-section::-webkit-scrollbar {
        width: 6px;
    }

    .fs-statement-section::-webkit-scrollbar-track {
        background: transparent;
    }

    .fs-statement-section::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

.statement-review-container {
    margin: auto;
    position: relative;
}

/* Side-by-side Approach Options */
/* Equal-height approach cards with bottom-aligned buttons */
.fs-approach-options-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 1200px;
}

.fs-approach-card {
    /* Force equal width */
    flex: 1 1 calc(50% - 2rem);
    min-width: 300px;
    /* Ensure fixed height calculation */
    display: flex;
    flex-direction: column;
    /* Styling */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 1.5rem;
    text-align: left;
    border: 1px solid #e8e8e8;
    transition: transform 0.2s, box-shadow 0.2s;
}

    /* Card hover effect */
    .fs-approach-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .fs-approach-card h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .fs-approach-card p {
        /* Make paragraph expand to fill available space */
        flex-grow: 1;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }

.fs-approach-button {
    /* Ensure button is aligned at the bottom */
    margin-top: auto;
}

.fs-preference-button-container {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eaeaea;
}

    .fs-preference-button-container .fs-btn {
        transition: all 0.2s ease;
        font-size: 0.9rem;
    }

        .fs-preference-button-container .fs-btn:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }

/* Responsive adjustments */
@media (max-width: 767px) {
    .fs-approach-options-container {
        flex-direction: column;
    }

    .fs-approach-card {
        width: 100%;
        margin-bottom: 1.5rem;
    }
}

.fs-user-ratings-tooltip {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    min-width: 200px;
}

.fs-user-rating {
    display: flex;
    align-items: center;
    margin: 4px 0;
}




/* Star Rating Hover Container */
.fs-star-rating-hover-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* User Ratings Tooltip that appears on hover */
.fs-user-ratings-tooltip-hover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-top: 8px;
    z-index: 1000;
}

/* Show tooltip on hover */
.fs-star-rating-hover-container:hover .fs-user-ratings-tooltip-hover {
    display: block;
}

/* Add a subtle transition for a smoother experience */
.fs-user-ratings-tooltip-hover {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s, transform 0.2s;
}

.fs-star-rating-hover-container:hover .fs-user-ratings-tooltip-hover {
    opacity: 1;
    transform: translateY(0);
}

/* Star Rating Hover Container */
.fs-star-rating-hover-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* User Ratings Tooltip that appears on hover */
.fs-user-ratings-tooltip-hover {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
    margin-top: 8px;
    z-index: 1000;
}

/* Show tooltip on hover */
.fs-star-rating-hover-container:hover .fs-user-ratings-tooltip-hover {
    display: block;
}

/* Add a subtle transition for a smoother experience */
.fs-user-ratings-tooltip-hover {
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.2s, transform 0.2s;
}

.fs-star-rating-hover-container:hover .fs-user-ratings-tooltip-hover {
    opacity: 1;
    transform: translateY(0);
}

/* Overarching Statement Container - Vertically centered */
.fs-overarching-statement-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 150px); /* Adjust based on your footer height */
    padding: 2rem;
}

/* Make the overarching statement text more prominent */
.fs-overarching-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    text-align: center;
    font-weight: 500;
}

.fs-statement-container {
    width: 100vw;
    position: relative;
    height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    padding: 2rem;
    justify-content: center;
    margin-top:40px;
}


.fs-multi-statement-text > .fs-statement-container {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.fs-multi-statement-text .fs-statement-text {
    padding-top: 0;
    padding-bottom: 20px;
}

/*Word clouds*/
.fs-block-word {
    display: inline-block;
    position: relative;
    font-size: 3rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
}

.fs-block-word-sm {
    display: inline-block;
    position: relative;
    font-size: 2rem;
    cursor: pointer;
    /*padding: 0.15rem 0.25rem;*/
    padding:0;
    transition: all 0.3s ease;
}

    .fs-block-word.deleted {
        color: var(--mid-grey) !important;
        order: 1;
        text-decoration: Line-through;
    }

    .fs-block-word.high-votes {
        color: var(--sapphire);
    }

    .fs-block-word.medium-votes {
        color: var(--flint);
    }

    .fs-block-word.low-votes {
        color: var(--basalt);
    }

.fs-block-word {
    position: relative;
}

    .fs-block-word::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
    }




.fs-block-word-details {
    position: absolute;
    top: calc(100% - 20px);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 1000;
    display: none;
    padding: 20px;
    width: 250px;
    background: rgba(243, 244, 246, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    font-size:1rem;
}

    .fs-block-word-details::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.02) 100%);
        border-radius: inherit;
        pointer-events: none;
    }



.fs-block-word:hover .fs-block-word-details {
    display: block;
}







/*Large display final outputs */
/*Expand off canvases full screen*/

.fs-large-words-display-center {
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    color: var(--flint);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fs-large-screen-word {
    font-family: var( --font-secondary);
    font-size: 75px;
    font-weight: 200;
    padding-right: 20px;
    text-transform:capitalize;
}

.fs-statement-text {
    font-family: var( --font-secondary);
    font-size: 2rem;
    font-weight: 300;
    padding-top: 40px;
    padding-bottom: 40px;
}

/*editable*/
.form-control.fs-statement-text {
    font-size: 1rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 400;
    padding-top: 10px;
}

.fs-multi-statement-text {
    font-family: var( --font-secondary);
    font-size: 2rem;
    font-weight: 400;
    padding-top: 0;
    padding-bottom: 0;
    line-height:2.5rem;
}




/*Voting*/
.fs-vote-buttons {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

    .fs-vote-buttons button {
        font-size: 2rem;
        padding: 1rem;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background-color: var(--mid-grey);
        transition: background-color 0.2s;
    }

    .fs-vote-down-count, .fs-vote-buttons .fs-thumb-down:hover {
        background-color: var(--red-alert) !important;
        color: white !important;
    }

    .fs-vote-up-count, .fs-vote-buttons .fs-thumb-up:hover {
        background-color: var(--dark-emerald) !important;
        color: white !important;
    }

.fs-mini-interaction-buttons {
    display: flex;
    gap: 20px;
}

    .fs-mini-interaction-buttons .btn-link {
        color: var(--flint);
        text-decoration: none;
        padding: 4px 8px;
    }

        .fs-mini-interaction-buttons .btn-link:hover {
            color: var(--sapphire);
        }










/*Screen footers*/


.fs-footer-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 74px;
    background-color: #FFF;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: var(--flint);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
    flex-wrap: nowrap;
    z-index: 10050;
}

.fs-footer-left,
.fs-footer-middle,
.fs-footer-right {
    flex: 1 1 33%;
    white-space: nowrap;
}

.fs-footer-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.fs-footer-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.fs-footer-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.fs-footer-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--mid-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    transition: background-color 0.3s;
}

    .fs-footer-circle.active {
        background-color: var(--jade);
    }

.fs-footer-circle-dark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--flint);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: white;
    transition: background-color 0.3s;
}



.fs-footer-tab {
    padding-left: 20px;
    padding-right: 20px;
    color: var(--mid-grey);
}

    .fs-footer-tab.active {
        font-weight: bold;
        color: var(--flint);
        background-color: var(--jade);
        padding: 5px;
        border-radius: 8px;
    }

    .fs-footer-tab.done, .fs-footer-tab.completed {
        font-weight: 700;
        color: var(--flint);
    }




/*playback PDF viewer*/


.fs-pdf-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: calc(100% - 75px);
    position: relative;
    overflow: hidden;
    background-color: var(--light-grey);
    background-color: #000;
}

.fs-pdf-canvas-wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#pdf-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fs-pdf-controls {
    height: 74px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    /*padding: 15px;*/
    padding: 0 20px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: white;
    color: var(--flint);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
}

.fs-pdf-control-pages {
    width: 120px;
    text-align: center;
}


.fs-small-workshop-list li {
    line-height: 2rem;
}





/*Colours */
/* Tidy some color-profile these like containers and rows*/

.fs-control-container {
    padding: 20px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

    .fs-control-container:hover {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

.fs-row {
    display: flex;
    gap: 50px;
    flex-wrap: nowrap;
    min-width: 1024px;
    max-width: 2560px;
    width: 100%;
    justify-content: center;
}

.fs-col {
    /*width: 25%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 1rem;*/
    flex: 0 0 25%;
    max-width: 400px;
    box-sizing: border-box;
    padding: 1rem;
    overflow: hidden;
}


@media (max-width: 1700px) {
    .fs-row {
        gap: 30px;
    }

    .fs-col {
        flex: 0 0 25%;
        max-width: 390px; /* Remove max-width constraint */
    }

    /*html, body {
        font-size: 10px;*/
    /*}*/
}

@media (max-width: 1600px) {
    .fs-row {
        gap: 30px; 
    }

    .fs-col {
        flex: 0 0 25%;
        max-width: 380px; /* Remove max-width constraint */
    }

    /*html, body {
        font-size: 10px;*/ 
    /*}*/
}

@media (max-width: 1400px) {
    .fs-row {
        gap: 20px;
    }

    .fs-col {
        flex: 0 0 25%;
        max-width: 320px; 
    }

    /*html, body {
        font-size: 10px;*/
    /*}*/
}

@media (max-width: 1200px) {
    .fs-row {
        gap: 20px;
    }

    .fs-col {
        flex: 0 0 25%;
        max-width: 280px; 
    }

    /*html, body {
        font-size: 10px;*/
    /*}*/
}

.fs-palette-icons i {
    font-size: 1.25rem;
    cursor: pointer;
}

.fs-swatch-row {
    display: grid;
    grid-template-columns: repeat(3, 90px);
    grid-template-rows: repeat(2, 90px);
    gap: 30px;
    margin-bottom: 1rem;
    justify-content: center;
}

.fs-swatch {
    width: 90px;
    /*height: 90px;*/
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
}

.fs-swatch-mini {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.15);
}


.palette-selection-container {
    margin-top: 1.5rem;
}

.confirmation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.confirmation-dialog {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.palette-toggle-container {
    display: flex;
    justify-content: center;
}



.fs-color-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
}

.fs-color-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

    .fs-color-circle:hover {
        transform: scale(1.1);
    }








    /*?Competitor analysis

*/

/* Core layout styles */
.fs-competitor-container {
    display: flex;
    height: 100%;
    transition: all 0.1s ease;
}

.fs-competitor-text, .fs-competitor-visual {
    padding: 20px;
    overflow-y: auto;
    transition: width 0.2s ease;
}

.fs-competitor-text {
    padding-right: 40px;
    width: 50%;
}

.fs-competitor-visual {
    width: 50%;
}

/* Header styling */
.fs-competitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
}


.fs-competitor-slogan {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

/* Detail sections */
.fs-detail-section {
    margin-top: 15px;
}

.fs-detail-row {
    display: flex;
    margin-bottom: 12px;
    align-items: flex-start;
}

.fs-detail-label {
    font-weight: bold;
    width: 80px;
    flex-shrink: 0;
}

.fs-detail-content {
    flex-grow: 1;
}

/* Section styling */
.fs-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

    .fs-section-header h6 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

.fs-visuals-section {
    margin-bottom: 20px;
}

/* Screenshots grid */
.fs-screenshots-grid {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-start;
    align-items: flex-end;
}

.fs-screenshot-container {
    position: relative;
    height: 108px;
    width: 192px;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    transition: z-index 0.2s;
}

.fs-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s cubic-bezier(.4,2,.6,1), z-index 0.2s;
    z-index: 1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fs-dock-expanded {
    transform: scale(2);
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Expanded screenshot special positions for 3 images */
.fs-dock-expanded.first-of-three {
    position: relative;
    left: 50%;
    right: auto;
    /* Optionally use transform to center if needed */
}
.fs-dock-expanded.second-of-three {
    position: relative;
    left: 0;
    right: auto;
}
.fs-dock-expanded.third-of-three {
    position: relative;
    right: 50%;
    left: auto;
}

.fs-dock-neighbor {
    transform: scale(1.5);
    z-index: 5;
}

/* Color palette */
.fs-color-section {
    margin-top: 50px;
}

.fs-color-bar {
    display: flex;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.fs-color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fs-color-chip {
    display: flex;
    align-items: center;
    background: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.fs-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 2px;
}

.fs-color-hex {
    margin-right: 6px;
}

.fs-color-percent {
    opacity: 0.7;
}

/* Feedback buttons */
.fs-feedback-buttons {
    display: flex;
    gap: 5px;
}

.fs-feedback-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
}

    .fs-feedback-btn:hover {
        opacity: 1;
        transform: scale(1.2);
    }

    .fs-feedback-btn i {
        font-size: 1rem;
    }

.bi-hand-thumbs-up-fill, .bi-hand-thumbs-down-fill {
    opacity: 1;
}

.bi-hand-thumbs-up-fill {
    color: #28a745;
}

.bi-hand-thumbs-down-fill {
    color: #dc3545;
}










/*voting buttons input colour command font-face-src need stop embed fs-*/
.position-selector-container {
    margin-top: 1.5rem;
}

.position-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 0.5rem;
}

.position-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*border: 1px solid var(--flint);*/
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color:var(--light-grey);
    border:none;
}

    .position-btn:focus {
        outline: none;
    }

.position-available:hover {
    background-color: #f0f0f0;
}

.position-selected {
    background-color: var(--amber);
    color: var(--flint);
    border-color: var(--amber);
}

.position-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
}








@keyframes electric-glow {
    0% {
        box-shadow: 0 0 8px 3px rgba(255, 0, 212, 0.7), 0 0 12px 5px rgba(0, 162, 255, 0.6), 0 0 18px 8px rgba(0, 255, 242, 0.5), 0 0 24px 10px rgba(212, 0, 255, 0.3);
        filter: blur(0.3px);
    }

    25% {
        box-shadow: 0 0 9px 3.5px rgba(0, 162, 255, 0.7), 0 0 14px 6px rgba(0, 255, 242, 0.6), 0 0 20px 8.5px rgba(212, 0, 255, 0.5), 0 0 26px 11px rgba(255, 0, 212, 0.3);
        filter: blur(0.5px);
    }

    50% {
        box-shadow: 0 0 10px 4px rgba(0, 255, 242, 0.7), 0 0 16px 7px rgba(212, 0, 255, 0.6), 0 0 22px 9px rgba(255, 0, 212, 0.5), 0 0 28px 12px rgba(0, 162, 255, 0.3);
        filter: blur(0.7px);
    }

    75% {
        box-shadow: 0 0 9px 3.5px rgba(212, 0, 255, 0.7), 0 0 14px 6px rgba(255, 0, 212, 0.6), 0 0 20px 8.5px rgba(0, 162, 255, 0.5), 0 0 26px 11px rgba(0, 255, 242, 0.3);
        filter: blur(0.5px);
    }

    100% {
        box-shadow: 0 0 8px 3px rgba(255, 0, 212, 0.7), 0 0 12px 5px rgba(0, 162, 255, 0.6), 0 0 18px 8px rgba(0, 255, 242, 0.5), 0 0 24px 10px rgba(212, 0, 255, 0.3);
        filter: blur(0.3px);
    }
}

.electric-textarea {
    animation: electric-glow 4s infinite alternate;
    border: none;
    outline: none;
}

    .electric-textarea:focus {
        animation: electric-glow 2s infinite alternate;
    }

    .electric-textarea::-webkit-scrollbar {
        display: none;
    }




    /*offcanvas overrides*/

.offcanvas{
    padding-right:0;
}

.offcanvas-body {
    padding: 0 !important;
    scrollbar-color: var(--mid-grey) white;
}

.offcanvas-header {
    /*padding-right: 0 !important;*/
}

    .offcanvas-header > h5 {
        font-family:var(--font-primary);
        font-weight: 700;
        color: var(--flint);
        font-size: 1.5rem;
    }