@import '_content/Majorsoft.Blazor.Components.Notifications/Majorsoft.Blazor.Components.Notifications.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Pages/Admin.razor.rz.scp.css */
@media (max-width: 768px) {
     Grid container: reduce padding and size[b-965z5l9d5u] 
     .responsive-grid {
        padding: 6px !important;
        font-size: 0.8rem !important;
    }

     Table rows & cells[b-965z5l9d5u] 
     .mud-data-grid-row {
        padding: 0 !important;
        margin: 0 !important;
    }

    [b-965z5l9d5u] .mud-data-grid-cell,
    [b-965z5l9d5u] .mud-table-cell {
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
        line-height: 1.2rem;
    }

     Typography inside[b-965z5l9d5u] 
     .mud-typography,
    [b-965z5l9d5u] .mud-text {
        font-size: 0.75rem !important;
        line-height: 1.2rem !important;
    }

     TextField: smaller input[b-965z5l9d5u] 
     .mud-text-field-input-control {
        font-size: 0.75rem !important;
        padding: 4px 6px !important;
    }

     Icon buttons: smaller and tighter[b-965z5l9d5u] 
     .mud-icon-button {
        padding: 3px !important;
        margin: 0 2px !important;
    }

     Pager area[b-965z5l9d5u] 
     .mud-data-grid-pager {
        font-size: 0.75rem !important;
        gap: 4px !important;
        padding: 4px !important;
    }
}


/* /Pages/Chat.razor.rz.scp.css */


/* Modal backdrop */
.modal-backdrop.show[b-h2cdbmd000] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(10, 10, 10, 0.8);
    z-index: 1040;
}

/* Modal itself */
.modal.show[b-h2cdbmd000] {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1050;
    align-items: center;
    justify-content: center;
}

/* Modal content rounded with shadow */
.modal-content[b-h2cdbmd000] {
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Textarea styling */
textarea.form-control-lg[b-h2cdbmd000] {
    resize: none !important;
    min-height: 120px;
    width:340px;
    font-size: 1.1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #ced4da;
    transition: border-color 0.3s ease;
    max-height: 450px
}

    textarea.form-control-lg:focus[b-h2cdbmd000] {
        border-color: #28a745;
        box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
        outline: none;
    }

/* Char count below textarea */
.text-end.text-muted.small[b-h2cdbmd000] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Modal footer - buttons container */
.modal-footer[b-h2cdbmd000] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem 1.5rem;
}

/* Back and Send buttons styling */
.btn-outline-secondary[b-h2cdbmd000] {
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-outline-secondary:hover[b-h2cdbmd000],
    .btn-outline-secondary:focus[b-h2cdbmd000] {
        background-color: #6c757d;
        color: #fff;
        border-color: #6c757d;
    }

.btn-success[b-h2cdbmd000] {
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .btn-success:hover[b-h2cdbmd000],
    .btn-success:focus[b-h2cdbmd000] {
        background-color: #218838;
        transform: scale(1.05);
    }

/* Responsive behavior for small/narrow screens */
@media (max-width: 576px) {
    .modal-footer[b-h2cdbmd000] {
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1rem 1rem;
    }

        .modal-footer a.btn[b-h2cdbmd000],
        .modal-footer button.btn[b-h2cdbmd000] {
            width: 100%;
            padding-left: 1rem;
            padding-right: 1rem;
            text-align: left;
            border-radius: 0.5rem;
            font-size: 1.1rem;
        }

    /* Make textarea font slightly smaller on mobile */
    textarea.form-control-lg[b-h2cdbmd000] {
        font-size: 1rem;
        min-height: 100px;
    }
}
/* /Pages/Checkout.razor.rz.scp.css */
/* Centered modal content */
.backgroundNotAut[b-j5j82xpsj2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 30px;
    background-color: rgba(10, 10, 10, 0.8);
    Optional: You can adjust this background padding: 20px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1010;
    Ensure the modal content is above the dark background color: white;
    Text color set to white
}
/* backgroundNotAut END */


.support-overlay[b-j5j82xpsj2] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
/*    background: radial-gradient(1200px 600px at 20% -10%, #16204a 0%, transparent 40%), radial-gradient(1000px 500px at 90% 10%, #0f3d5e 0%, transparent 45%), #0b0f19;*/
}


.support-card[b-j5j82xpsj2] {
    width: 100%;
    max-width: 460px;
    padding: 2.5rem;
    border-radius: 22px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    text-align: center;

}

.support-header h2[b-j5j82xpsj2] {
    margin: 1rem 0 0.3rem;
    font-size: 1.8rem;
    color: #e6e8f0;
}

.support-header p[b-j5j82xpsj2] {
    color: #9aa4bf;
    font-size: 0.95rem;
}

.support-logo[b-j5j82xpsj2] {
    width: 70px;
    opacity: 0.9;
}

.payment-grid[b-j5j82xpsj2] {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.pay-btn[b-j5j82xpsj2] {
    position: relative;
    padding: 1.4rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: black;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.pay-btn img[b-j5j82xpsj2] {
    width: 100px;
    height: 60px;
}

.pay-btn:hover[b-j5j82xpsj2] {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 35px rgba(79,140,255,0.35);
}

.paypal[b-j5j82xpsj2] { box-shadow: inset 0 0 0 1px rgba(0,48,135,.4); }
.kofi[b-j5j82xpsj2] { box-shadow: inset 0 0 0 1px rgba(255,95,95,.5); }
.patreon[b-j5j82xpsj2] { box-shadow: inset 0 0 0 1px rgba(255,66,77,.5); }
.bitcoin[b-j5j82xpsj2] { box-shadow: inset 0 0 0 1px rgba(247,147,26,.6); }

.support-back[b-j5j82xpsj2] {
    display: inline-block;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #9aa4bf;
    text-decoration: none;
}

.support-back:hover[b-j5j82xpsj2] {
    color: #fff;
}


.payment-grid form .pay-btn[b-j5j82xpsj2] {
    width: 100%;
    height: 100%;
}


/* BTC QR Container */
#btc-qr-container[b-j5j82xpsj2] {
    display: none; /* hidden initially */
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0,0,0,0.05);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    animation: fadeIn-b-j5j82xpsj2 0.3s ease forwards;
}

    #btc-qr-container img[b-j5j82xpsj2] {
        width: 120px;
        height: 120px;
        margin-bottom: 0.8rem;
    }

.btc-address[b-j5j82xpsj2] {
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.75rem;
    word-break: break-all;
    text-align: center;
    background: rgba(255,255,255,0.08);
    color: #1b1b1b;
}

    .btc-address button[b-j5j82xpsj2] {
        padding: 0.2rem 0.6rem;
        background: #007bff;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
    }

        .btc-address button:hover[b-j5j82xpsj2] {
            background: #0056b3;
        }

@keyframes fadeIn-b-j5j82xpsj2 {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ===========================
   SMALL SCREENS FIX (phones)
   =========================== */
@media (max-width: 420px) {

    /* Prevent horizontal overflow */
    html[b-j5j82xpsj2], body[b-j5j82xpsj2] {
        overflow-x: hidden;
    }

    /* Center overlay properly */
    .support-overlay[b-j5j82xpsj2] {
        padding: 1rem;
        min-height: 100dvh; /* better than 100vh on mobile */
        align-items: flex-start;
    }

    /* Card spacing & width */
    .support-card[b-j5j82xpsj2] {
        width: 100%;
        max-width: 100%;
        padding: 1.5rem 1.2rem;
        border-radius: 16px;
        margin-top: 1rem;
    }

    /* Header text scaling */
    .support-header h2[b-j5j82xpsj2] {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .support-header p[b-j5j82xpsj2] {
        font-size: 0.85rem;
    }

    /* Logo scaling */
    .support-logo[b-j5j82xpsj2] {
        width: 56px;
    }

    /* GRID → STACK ON MOBILE */
    .payment-grid[b-j5j82xpsj2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Buttons tighter */
    .pay-btn[b-j5j82xpsj2] {
        padding: 1.1rem 0.8rem;
        border-radius: 14px;
    }

        .pay-btn img[b-j5j82xpsj2] {
            width: 90px;
            height: auto;
        }

    /* BTC QR */
    #btc-qr-container[b-j5j82xpsj2] {
        padding: 0.8rem;
    }

        #btc-qr-container img[b-j5j82xpsj2] {
            width: 100px;
            height: 100px;
        }

    /* BTC address wrap */
    .btc-address[b-j5j82xpsj2] {
        flex-direction: column;
        gap: 0.4rem;
        font-size: 0.75rem;
        word-break: break-all;
        text-align: center;
    }

    /* Back link */
    .support-back[b-j5j82xpsj2] {
        font-size: 0.85rem;
        margin-top: 1.5rem;
    }
}
/* /Pages/Documents.razor.rz.scp.css */
.hero-left[b-axffl7fokk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto 20px auto;
}

.hero-title.big-welcome[b-axffl7fokk] {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    /* dark solid color for readability */
    color: #222;
    /* optional subtle shadow for depth */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: none; /* Removes any border */
    outline: none; /* Removes any outline if applied */
}




/* highlighted tagline text */
.highlighted-text[b-axffl7fokk] {
    color: #444; /* slightly lighter dark */
    font-weight: 600;
}

.secondary-text[b-axffl7fokk] {
    color: #666; /* softer dark gray for description */
    font-size: 1rem;
}


.hero-tagline[b-axffl7fokk] {
    max-width: 600px;
    font-size: 1.1rem;
}

/* ✅ Steps container */
.steps-container[b-axffl7fokk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.step[b-axffl7fokk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.6);
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 150px;
    text-align: center;
    color: #fff;
    transition: transform 0.3s ease;
}

    .step:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

.step-icon[b-axffl7fokk] {
    font-size: 2rem;
    margin-bottom: 5px;
    color: #ffca28;
}

.step-text[b-axffl7fokk] {
    font-size: 0.95rem;
}

.step-arrow[b-axffl7fokk] {
    font-size: 2rem;
    color: #e6b800; /* darker yellow/orange */
    margin: 0 10px;
    transition: transform 0.3s ease;
}

    /* Optional: add hover animation */
    .step-arrow:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

/* ✅ Documents grid */
.documents-hero .onboarding-grid[b-axffl7fokk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.documents-hero .step-box[b-axffl7fokk] {
    background: linear-gradient(145deg, rgba(0,0,0,0.8) 0%, rgba(25,25,25,0.6) 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* stronger shadow */
    transition: transform 0.3s ease;
}

    .documents-hero .step-box:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

    .documents-hero .step-box i[b-axffl7fokk] {
        font-size: 2rem;
        margin-bottom: 10px;
        color: #ffca28;
    }

.documents-hero .download-link[b-axffl7fokk] {
    display: inline-block;
    margin-top: 10px;
    color: #ffca28;
    text-decoration: none;
}

.documents-hero .upload-btn[b-axffl7fokk] {
    margin-top: 10px;
}

.documents-hero .no-file[b-axffl7fokk] {
    color: #ccc;
    font-size: 0.9rem;
}

.inputfile[b-axffl7fokk] {
    margin-top: 10px;
}




/* highlighted tagline text */
.highlighted-text[b-axffl7fokk] {
    color: #444; /* slightly lighter dark */
    font-weight: 600;
}

.secondary-text[b-axffl7fokk] {
    color: #666; /* softer dark gray for description */
    font-size: 1rem;
}


.hero-tagline[b-axffl7fokk] {
    max-width: 600px;
    font-size: 1.1rem;
}

/* ✅ Steps container */
.steps-container[b-axffl7fokk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}



.step[b-axffl7fokk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.6);
    padding: 15px 20px;
    border-radius: 12px;
    min-width: 150px;
    text-align: center;
    color: #fff;
    transition: transform 0.3s ease;
}

    .step:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

.step-icon[b-axffl7fokk] {
    font-size: 2rem;
    margin-bottom: 5px;
    color: #ffca28;
}

.step-text[b-axffl7fokk] {
    font-size: 0.95rem;
}

.step-arrow[b-axffl7fokk] {
    font-size: 2rem;
    color: #e6b800; /* darker yellow/orange */
    margin: 0 10px;
    transition: transform 0.3s ease;
}

    /* Optional: add hover animation */
    .step-arrow:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }


.step-arrowDown[b-axffl7fokk] {
    font-size: 2rem;
    color: #e6b800; /* darker yellow/orange */
    margin: 0 10px;
    transition: transform 0.3s ease;
}

    /* Optional: add hover animation */
    .step-arrowDown:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

/* ✅ Documents grid */
.documents-hero .onboarding-grid[b-axffl7fokk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.documents-hero .step-box[b-axffl7fokk] {
    background: linear-gradient(145deg, rgba(0,0,0,0.8) 0%, rgba(25,25,25,0.6) 100%);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* stronger shadow */
    transition: transform 0.3s ease;
}

    .documents-hero .step-box:hover[b-axffl7fokk] {
        transform: translateY(-3px);
    }

    .documents-hero .step-box i[b-axffl7fokk] {
        font-size: 2rem;
        margin-bottom: 10px;
        color: #ffca28;
    }

.documents-hero .download-link[b-axffl7fokk] {
    display: inline-block;
    margin-top: 10px;
    color: #ffca28;
    text-decoration: none;
}

.documents-hero .upload-btn[b-axffl7fokk] {
    margin-top: 10px;
}

.documents-hero .no-file[b-axffl7fokk] {
    color: #ccc;
    font-size: 0.9rem;
}

.inputfile[b-axffl7fokk] {
    margin-top: 10px;
}


/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    .hero-title.big-welcome[b-axffl7fokk] {
        font-size: 2.2rem;
       border: none; /* Removes any border */
        outline: none; /* Removes any outline if applied */
    }

    .hero-tagline[b-axffl7fokk] {
        font-size: 1rem;
    }

    .documents-hero .onboarding-grid[b-axffl7fokk] {
        grid-template-columns: 1fr; /* single column for narrow screens */
    }
    .steps-container[b-axffl7fokk] {
        flex-direction: column;
        gap: 15px;
        align-items: center; /* center all steps and arrows */
    }
    .step-arrow:hover[b-axffl7fokk] {
        transform: rotate(90deg); /* keep pointing down */
    }


    /* all arrows between steps point down on narrow screens */
    .step-arrow[b-axffl7fokk] {
        font-size: 1.8rem;
        margin: 5px 0;
        transform: rotate(90deg); /* right arrow -> down */
        transition: none; /* disable moving effect */
    }

    /* last down arrow above final step */
    .step-arrowDown[b-axffl7fokk] {
        display: block;
        transform: rotate(0deg); /* points down */
        margin: 5px 0;
        align-self: center; /* center above the last step */
        transition: none; /* disable hover translation */
    }

        /* optional: remove hover effect for small screens entirely */
        .step-arrowDown:hover[b-axffl7fokk] {
            transform: rotate(0deg); /* no movement on hover */
        }
}

.admin-docs-wrapper[b-axffl7fokk] {
    display: flex;
    justify-content: center; /* center horizontally */
    width: 100%;
    padding: 20px; /* optional */
    box-sizing: border-box; /* ensure full width */
}

.admin-docs-grid[b-axffl7fokk] {
    display: flex;
    gap: 20px;
    max-width: 800px; /* or full width if you want */
    width: 100%;
}
/* /Pages/EditUser.razor.rz.scp.css */
/* Global Resets and Basic Styles */
*[b-2l34oxipk7], *[b-2l34oxipk7]:before, *[b-2l34oxipk7]:after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body[b-2l34oxipk7], button[b-2l34oxipk7], input[b-2l34oxipk7] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 1.4px;
}

body[b-2l34oxipk7] {
    background: #f0f2f5; /* Lightened background for a clean look */
    font-size: 12px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Container and Layout Styles */
.full-page-container[b-2l34oxipk7] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}



.container[b-2l34oxipk7] {
    width: 80%;
    max-width: 700px;
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* Pop-up Styles */
.pop-container[b-2l34oxipk7] {
    position: relative;
}

.popconfirm[b-2l34oxipk7] {
    background-color: white;
    border: 1px solid lightblue;
    width: 270px;
    position: absolute;
    top: 50%;
    right: 6px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%);
}

/* Form Input Styles */
.input[b-2l34oxipk7], .app-form-control[b-2l34oxipk7] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 1.4px;
    background-color: #fafafa; /* Lighter background for input fields */
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}

    .app-form-control[b-2l34oxipk7]::placeholder {
        color: #888;
    }

    .app-form-control:focus[b-2l34oxipk7] {
        border-bottom-color: #007bff;
    }

/* Button Styles */

.btn-customAdmin[b-2l34oxipk7] {
    box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
    color: red;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 900;
    color: #ffffff;
    background-color: red;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    font-size: 0.8em;
}

    .btn-customAdmin:hover[b-2l34oxipk7] {
        background-color: silver;
        transform: scale(1.05);
    }




/* Screen and Card Layout */
.screen[b-2l34oxipk7], .card[b-2l34oxipk7] {
    position: relative;
    background: #ffffff; /* Light background for better readability */
    border-radius: 12px;
    padding: 20px;
}

    .screen[b-2l34oxipk7]:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 20px;
        right: 20px;
        bottom: 0;
        border-radius: 15px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
        z-index: -1;
    }

.screen-header[b-2l34oxipk7] {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #f5f5f5;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.screen-header-button[b-2l34oxipk7] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-radius: 8px;
    background: #ddd;
}

/* Screen Body Layout */
.screen-body[b-2l34oxipk7] {
    display: flex;
    flex-direction: column;
}

/* Text and Title Styles */
.app-title[b-2l34oxipk7] {
    display: flex;
    flex-direction: column;
    position: relative;
    color: #333;
    font-size: 26px;
}

    .app-title[b-2l34oxipk7]:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 25px;
        height: 4px;
        background: #007bff;
    }

p[b-2l34oxipk7], h4[b-2l34oxipk7], ul li[b-2l34oxipk7] {
    color: #333;
}

.app-contact[b-2l34oxipk7] {
    margin-top: auto;
    font-size: 10px;
    color: #666;
}

/* backgroundNotAut START */
.modal-overlay[b-2l34oxipk7] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixed positioning to fill the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.8); /* Dark transparent background */
    z-index: 1000; /* Ensure it appears above everything else */
    color: white; /* Text color set to white */
}

/* Centered modal content */
.backgroundNotAut[b-2l34oxipk7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 30px;
    background-color: rgba(10, 10, 10, 0.8); /* Optional: You can adjust this background */
    padding: 20px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1010; /* Ensure the modal content is above the dark background */
    color: white; /* Text color set to white */
}
/* backgroundNotAut END */


/* Calendar Container */
.calendar-container[b-2l34oxipk7] {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
}

    /* Label Styling */
    .calendar-container label[b-2l34oxipk7] {
        display: block;
        font-size: 1.1rem;
        color: #333;
        margin-bottom: 8px;
    }

/* Calendar Input Styling */
.calendar-input[b-2l34oxipk7] {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

    .calendar-input:focus[b-2l34oxipk7] {
        border-color: #ff6f61;
        box-shadow: 0 0 5px rgba(255, 111, 97, 0.5);
        outline: none;
    }

/* Validation Message Styling */
.validation-message[b-2l34oxipk7] {
    color: #ff6f61;
    font-size: 0.85rem;
    margin-top: 5px;
}



/* Message Box Styles */
.scrolling-text[b-2l34oxipk7] {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

    .scrolling-text input[b-2l34oxipk7] {
        animation: scroll-b-2l34oxipk7 10s linear infinite;
    }




.image-gallery[b-2l34oxipk7] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* spacing between images */
    align-items: flex-start;
}

.image-preview[b-2l34oxipk7] {
    width: 40px; /* perfect size */
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    background-color: #ddd; /* visible before image loads */
    display: block;
}

.image-item[b-2l34oxipk7] {
    position: relative; /* button will be relative to this container */
    display: inline-block;
    margin: 6px;
    height: 35px;
}



.delete-button[b-2l34oxipk7] {
    position: absolute;
    top: -4px; /* adjust as needed */
    right: -4px; /* adjust as needed */
    color: white;
    background-color: orange;
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    z-index: 10;
}

/* Gallery Container END */

.card[b-2l34oxipk7] {
    display: flex;
    justify-content: center;
    /*    align-items: center;*/
    flex-direction: column;
}

.text-center[b-2l34oxipk7] {
    margin-top: 10px; /* Adjust margin for centered text on small screens */
}
/* Validation Message Styling END*/




@media screen and (max-width: 767px) {
    /* General Container Adjustments */
    .container[b-2l34oxipk7] {
        width: 100%;
        margin: 0;
        padding: 5px; /* Reduced padding for tighter content */
        box-shadow: none;
    }

    /* Card Adjustments */
    .card[b-2l34oxipk7] {
        padding: 8px; /* Reduced padding */
        width: 100%; /* Ensure full width */
        margin-bottom: 10px;
    }

        /* Card Title */
        .card h4[b-2l34oxipk7] {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

    /* Profile Section (columns layout adjustment for compact view) */
    .row[b-2l34oxipk7] {
        flex-direction: row; /* Horizontal layout */
        justify-content: space-between; /* Space out the columns evenly */
    }

    .col-md-5[b-2l34oxipk7] {
        width: 48%; /* Make columns smaller and use horizontal space efficiently */
        margin-bottom: 0.5rem; /* Tighten vertical space between columns */
    }

    /* Profile Info Adjustments */
    .d-flex[b-2l34oxipk7] {
        font-size: 0.9rem; /* Slightly smaller font size */
        margin-bottom: 0.5rem; /* Reduce margin between elements */
        align-items: center; /* Keep items aligned horizontally */
        justify-content: flex-start; /* Align items to the left */
    }

        .d-flex i[b-2l34oxipk7] {
            font-size: 1.1rem; /* Slightly smaller icons */
            margin-right: 8px; /* Add small space between icon and text */
        }

        .d-flex div[b-2l34oxipk7] {
            flex: 1 1 auto; /* Allow content to grow but also wrap if needed */
        }

    /* Email Section Adjustments */
    .col-12 .text-center[b-2l34oxipk7] {
        width: 100%; /* Full width */
        padding: 8px;
        margin-top: 10px;
        background-color: #e9ecef; /* Light background color */
        border-radius: 8px;
    }

    .email-card[b-2l34oxipk7] {
        width: 100%; /* Full width */
        padding: 8px;
        background-color: #e9ecef;
        margin-top: 10px; /* Add spacing to separate from profile section */
    }

        .email-card i[b-2l34oxipk7] {
            font-size: 1.2rem;
            margin-right: 8px; /* Add margin to space the icon */
        }

        .email-card span[b-2l34oxipk7] {
            font-size: 1rem;
        }

    /* Button Style */
    .btn[b-2l34oxipk7] {
        font-size: 0.85rem;
        padding: 8px 15px;
        margin: 5px 0;
    }

    /* Adjusting the columns */
    .col-md-5[b-2l34oxipk7] {
        width: 48%; /* Shrinking the columns to make them fit horizontally */
    }

    /* Reduce Spacing Between Profile Items */
    .mb-3[b-2l34oxipk7] {
        margin-bottom: 0.5rem;
    }

    /* Adjust Icon Sizes */
    .d-flex i[b-2l34oxipk7] {
        font-size: 1rem;
    }

    /* Centering Adjustments */
    .text-center p[b-2l34oxipk7] {
        font-size: 0.9rem;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Profile and Email Text */
    .fw-bold[b-2l34oxipk7] {
        font-size: 0.95rem;
    }

    /* Email Adjustments */
    .email-card[b-2l34oxipk7] {
        padding: 8px;
    }

    /* Remove excess vertical margins between sections */
    .mb-4[b-2l34oxipk7] {
        margin-bottom: 1rem; /* Adjusted for smaller screens */
    }

    /* Tighter Card Layout */
    .card.shadow-sm[b-2l34oxipk7] {
        padding: 8px;
        width: 100%;
    }

    /* Row adjustments */
    .row[b-2l34oxipk7] {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Use available space efficiently */
    }

    .col-12[b-2l34oxipk7] {
        width: 100%;
    }

    /* Icon Adjustments */
    .d-flex i[b-2l34oxipk7] {
        font-size: 1rem;
    }

    .image-preview[b-2l34oxipk7] {
        width: 40px; /* Set the width of each image */
        height: 40px; /* Set the height to make it a square */
        object-fit: cover; /* Ensure the image covers the entire box without distortion */
        border-radius: 8px; /* Optional: add rounded corners */
        border: 1px solid #ccc; /* Border around images */
    }
}


@keyframes scroll-b-2l34oxipk7 {
    0% {
        transform: translateX(100%);
    }

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


.upload-controls[b-2l34oxipk7] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.fake-btn[b-2l34oxipk7] {
    font-weight: bold;
    color: #32a1ce;
    cursor: pointer;
    padding: 10px 20px;
    border: 2px solid #32a1ce;
    border-radius: 5px;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
    font-size: 1.1rem;
}

    .fake-btn:hover[b-2l34oxipk7] {
        background-color: azure;
        color: white;
    }

.file-msg[b-2l34oxipk7] {
    font-size: 1rem; /* base readable size */
    color: #555; /* softer dark gray */
    font-style: italic; /* keeps italic style */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* modern sans-serif font */
    letter-spacing: 0.02em; /* slight letter spacing for clarity */
    /*line-height: 1.4;*/ /* better line height for readability */
    /*margin-left: 8px;*/ /* some spacing from label */
}


.item-delete[b-2l34oxipk7] {
    margin-top: 1.5rem;
    font-weight: bold;
    color: #c62828;
    cursor: pointer;
    text-decoration: underline;
    font-size: 1rem;
}

.char-counter-sm[b-2l34oxipk7] {
    font-size: 0.65rem;
    color: #888;
    text-align: right;
    margin-top: 2px;
}


#progress-bar[b-2l34oxipk7]::after {
    content: '';
    position: absolute;
    top: 0.2px;
    right: 0;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00ff99;
    animation: float 1s linear infinite;
}

@keyframes gradientMove-b-2l34oxipk7 {
    0% {
        background-position: 0% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes particleMove-b-2l34oxipk7 {
    0% {
        left: -10px;
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}
/* /Pages/HomePage.razor.rz.scp.css */

h2[b-g0ruwqcrdc] {
    font-size: 2em;
    color: #222;
    margin-bottom: 10px;
    letter-spacing: 1.4px;
    font-weight: 900;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


p[b-g0ruwqcrdc] {
    font-size: 1em;
    color: #555;
    letter-spacing: 1.4px;

    font-weight: 700;
}

.info-section[b-g0ruwqcrdc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 40px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.info-block[b-g0ruwqcrdc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 20px 0;
    max-width: 1200px;
    width: 100%;
}

    .info-block img[b-g0ruwqcrdc] {
        width: 50%;
        height: auto;
        padding: 20px;
    }

    .info-block .text-content[b-g0ruwqcrdc] {
        width: 50%;
        padding: 20px;
    }

    .info-block:nth-child(odd)[b-g0ruwqcrdc] {
        flex-direction: row-reverse; /* Swap order for odd sections */
    }

.call-to-action[b-g0ruwqcrdc] {
    margin: 20px 0;
}

p[b-g0ruwqcrdc] {
    font-weight: bold;
}

/*//orbite home*/
.orbit-wrapper[b-g0ruwqcrdc] {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    font-size: 2rem;
    color: orange;
    text-decoration: none;
    transition: color 0.3s;
}

.orbit-container[b-g0ruwqcrdc] {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orbit-container[b-g0ruwqcrdc] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 2rem auto;
    pointer-events: none;
}

/* The center circle */
.orbit-center[b-g0ruwqcrdc] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: #101820;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

/* The orbiting glowing dot */
.orbit-glow[b-g0ruwqcrdc] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.6), 0 0 20px 12px rgba(255, 255, 255, 0.2);
    transform-origin: -70px 50%;
    animation: orbit-b-g0ruwqcrdc 3.5s linear infinite;
    z-index: 1;
    filter: drop-shadow(0 0 3px white);
}


html[b-g0ruwqcrdc], body[b-g0ruwqcrdc] {
    height: 100%; /* Ensure the body covers the full height */
    margin: 0; /* Remove default margin */
    overflow: hidden; /* Prevent unwanted scrollbars */
}

.hero-section-no-video[b-g0ruwqcrdc] {
    position: relative;
    background: linear-gradient(135deg, #181818, #2c2c2e);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    padding: 0; /* Remove padding */
    overflow: hidden; /* Hide any overflow */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* Welcome Text */
.hero-tagline[b-g0ruwqcrdc] {
    white-space: normal; /* ensure it wraps */
    max-width: 600px; /* limit width for better wrap */
    margin-bottom: 0.8em; /* some spacing */
}


.hero-title.big-welcome[b-g0ruwqcrdc] {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 12px;
    color: #fff;
    border: none;
    outline: none;
    background: transparent; /* in case a parent has background */
}

/* Onboarding Grid */
.onboarding-grid[b-g0ruwqcrdc] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.step-box[b-g0ruwqcrdc] {
    background: rgba(255, 255, 255, 0.06);
    padding: 20px 24px;
    border-radius: 12px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
    box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

    .step-box:hover[b-g0ruwqcrdc] {
        transform: translateY(-4px);
    }

    .step-box i[b-g0ruwqcrdc] {
        font-size: 26px;
        margin-bottom: 10px;
        color: #ffca28;
    }

.step-label[b-g0ruwqcrdc] {
    font-size: 1rem;
    font-weight: 500;
    color: #eee;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.arrow[b-g0ruwqcrdc] {
    font-size: 1.8rem;
    color: #bbb;
    font-weight: bold;
    margin: 0 8px;
}



@keyframes orbit-b-g0ruwqcrdc {
    from {
        transform: rotate(0deg) translateX(70px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(70px) rotate(-360deg);
    }
}


/*tome main video command content top*/

.fullscreen-video-container[b-g0ruwqcrdc] {
    position: relative;
    width: 100%;
    height: 120vh; /* slightly taller than viewport */
    overflow: hidden;
}

.fullscreen-video[b-g0ruwqcrdc] {
    position: absolute;
    top: -5vh; /* shift video upward */
    left: 0;
    width: 100%;
    height: 120vh;
    object-fit: cover;
    z-index: 1;
}



.language-note[b-g0ruwqcrdc] {
    letter-spacing: 1.4px;
    font-weight: 900;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.language-selector-fixed[b-g0ruwqcrdc] {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 8px;
    z-index: 3;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translate(-50%, -50%); /* Offset by half of its own size to truly center it */
}



    .language-selector-fixed img[b-g0ruwqcrdc] {
        width: 20px;
        height: 14px;
    }

.enhanced-layout[b-g0ruwqcrdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    padding: 10% 8%;
    gap: 40px;
    /*   align-items: flex-start;*/
    color: white;
    /*  flex-wrap: wrap;*/
}


.hero-left[b-g0ruwqcrdc] {
    flex: 1 1 50%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.hero-title.big-welcome[b-g0ruwqcrdc] {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin: 0;
    border: none;
    outline: none;
    background: transparent; /* in case a parent has background */
}

.hero-tagline[b-g0ruwqcrdc] {
    font-size: 1.6rem;
    line-height: 1.5;
   letter-spacing:1.4px;
    font-weight: 900;
    color: #ccc;
    margin: 0;
}
.highlighted-text[b-g0ruwqcrdc] {
    display: inline-block; /* or block if you want guaranteed break */
    margin-right: 0.3em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Optional: add underline or color accent here */
}

.secondary-text[b-g0ruwqcrdc] {
    display: block;
    font-weight: 700;
    font-size: 1.2rem;
    color: #aaa;
    margin-top: 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cta-right[b-g0ruwqcrdc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}


.highlighted-text-bg[b-g0ruwqcrdc] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1); /* subtle light background */
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px); /* optional, for glassy effect */
}

/* Default style */
.login-link[b-g0ruwqcrdc] {
    margin-top: 20px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #ccc;
    text-align: center;
}

.login-link-a[b-g0ruwqcrdc] {
    color: #ffca28;
    font-weight: 500;
}


/* Enhanced layout adjustments for small screens */
@media (max-width: 768px) {

/*    .enhanced-layout {
        display: flex !important;
        flex-direction: row !important;  hero-left and steps side-by-side 
        flex-wrap: wrap !important;  allow wrapping on narrow screens 
        justify-content: center !important;
        align-items: flex-start !important;  align top 
        text-align: center !important;
        padding: 0rem 1rem !important;
        gap: 4px !important;  minimal spacing 
        width: 100% !important;
    }*/

    .hero-left[b-g0ruwqcrdc], .cta-right.onboarding-grid[b-g0ruwqcrdc] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }

    /* Onboarding steps wrap nicely */
    .onboarding-grid[b-g0ruwqcrdc] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .step-box[b-g0ruwqcrdc] {
        min-width: 120px !important;
        margin-bottom: auto;
    }

    /* Hide arrows on small screens */
    .arrow[b-g0ruwqcrdc] {
        display: none !important;
    }

    /* Hero text adjustments */
    .hero-title.big-welcome[b-g0ruwqcrdc] {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }

    .hero-tagline[b-g0ruwqcrdc] {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    .cta-text[b-g0ruwqcrdc] {
        font-size: 1.2rem !important;
    }
    .highlighted-text[b-g0ruwqcrdc], .secondary-text[b-g0ruwqcrdc] {
        font-size: 0.75rem !important;
    }

    /* Orbit button smaller */
    .orbit-container[b-g0ruwqcrdc] {
        width: 80px !important;
        height: 80px !important;
    }

    .orbit-center[b-g0ruwqcrdc] {
        width: 50px !important;
        height: 50px !important;
        font-size: 1rem !important;
    }

    /* Bottom logo */
    .spaced-div[b-g0ruwqcrdc] {
        display: flex;
        justify-content: center;
        margin: 40px 0;
        width: 100%;
    }

        .spaced-div img[b-g0ruwqcrdc] {
            max-width: 80%;
            height: auto;
        }
    .language-selector-fixed[b-g0ruwqcrdc] {
        top: 10px;
        right: 10px;
        left: auto;
        transform: none;
        padding: 4px 8px;
        font-size: 0.75rem;
        gap: 4px;
    }

    /* Hide "Choose your language:" on small screens */
    .language-note[b-g0ruwqcrdc] {
        display: none;
    }

    /* Make the flag icons smaller if needed */
    .language-selector-fixed img[b-g0ruwqcrdc] {
        width: 16px;
        height: 16px;
    }


    .orbit-wrapper[b-g0ruwqcrdc] {
        display: flex;
        flex-direction: row; /* keep icon + optional text inline */
        align-items: center; /* vertical alignment */
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        line-height: 1 !important;
    }


    h2[b-g0ruwqcrdc] {
        font-size: 1em;
 
    }
    p[b-g0ruwqcrdc] {
        font-size: 0.7em;
     
    }


    .login-link[b-g0ruwqcrdc] {
        
        font-size: 0.55rem !important;
        text-align: center;
        padding: 2px 0;
        color: #ccc;
    }

    .login-link-a[b-g0ruwqcrdc] {
        color: #ffca28 !important;
        font-weight: 500;
        text-decoration: none;
    }
}




/* Extra small phones like iPhone 5/SE/X */
@media (max-width: 400px) {

 /*    Layout stacking 
    .enhanced-layout {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.5rem 1rem !important;
        gap: 5px !important;
        width: 100% !important;
    }*/

     Hero left (text + CTA) 
    .hero-left[b-g0ruwqcrdc] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }


    .hero-title.big-welcome[b-g0ruwqcrdc] {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .hero-tagline[b-g0ruwqcrdc] {
        font-size: 0.6rem !important;
        line-height: 1.0 !important;
    }

    .highlighted-text[b-g0ruwqcrdc], .secondary-text[b-g0ruwqcrdc] {
        font-size: 0.45rem !important;
    }

    .highlighted-text-bg[b-g0ruwqcrdc] {
        padding: 4px 6px !important;
        font-size: 0.4rem !important;

    }

     CTA orbit button smaller 
    .orbit-container[b-g0ruwqcrdc] {
        width: 50px !important;
        height: 50px !important;
    }

    .orbit-center[b-g0ruwqcrdc] {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.8rem !important;
    }

    .cta-text[b-g0ruwqcrdc] {
        font-size: 0.7rem !important;
    }

     Onboarding steps stacked 
    .onboarding-grid[b-g0ruwqcrdc] {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    .step-box[b-g0ruwqcrdc] {
        min-width: 80px !important;
        margin-bottom: 1px;
    }

    .arrow[b-g0ruwqcrdc] {
        display: none !important;  arrows too big, hide on small phones 
    }

    .step-label[b-g0ruwqcrdc] {
        font-size: 0.2rem !important;
    }

     Bottom login link smaller 
    .enhanced-layout p[b-g0ruwqcrdc] {
        font-size: 0.75rem !important;
    }

     Language selector top-right[b-g0ruwqcrdc], small 
    .language-selector-fixed[b-g0ruwqcrdc] {
        top: 5px !important;
        right: 5px !important;
        left: auto !important;
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
        gap: 2px !important;
    }

    .language-note[b-g0ruwqcrdc] {
        display: none !important;
    }

    .language-selector-fixed img[b-g0ruwqcrdc] {
        width: 14px !important;
        height: 14px !important;
    }
    p[b-g0ruwqcrdc] {
        font-size: 0.7em;
    }
}




@media (max-width: 340px) {
    /* Hero layout */
/*    .enhanced-layout {
        flex-direction: column !important;
        align-items: center !important;
        gap: 21px !important;
        padding: 0 !important;
    }
*/
    .hero-left[b-g0ruwqcrdc] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-title.big-welcome[b-g0ruwqcrdc] {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .hero-tagline[b-g0ruwqcrdc] {
        font-size: 0.45rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .highlighted-text-bg[b-g0ruwqcrdc] {
        padding: 1px 2px !important;
    }

    .highlighted-text[b-g0ruwqcrdc], .secondary-text[b-g0ruwqcrdc] {
        font-size: 0.45rem !important;
    }

    /* Shrink orbit button & remove text */
    .cta-right[b-g0ruwqcrdc] {
        margin: 0 !important;
        padding: 0 !important;
    }
 
    .orbit-wrapper[b-g0ruwqcrdc] {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .orbit-container[b-g0ruwqcrdc] {
        width: 30px !important;
        height: 30px !important;
    }

    .orbit-center[b-g0ruwqcrdc] {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.45rem !important;
    }

    CTA orbit button smaller
    .orbit-container[b-g0ruwqcrdc] {
        width: 50px !important;
        height: 50px !important;
    }

    .orbit-center[b-g0ruwqcrdc] {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.8rem !important;
    }

    /* Onboarding steps stacked */
    .onboarding-grid[b-g0ruwqcrdc] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .step-box[b-g0ruwqcrdc] {
        min-width: 40px !important;
        padding: 0 !important;
    }

        .step-box i[b-g0ruwqcrdc] {
            font-size: 0.8rem !important;
        }

    .step-label[b-g0ruwqcrdc] {
        font-size: 0.4rem !important;
        margin: 0 !important;
    }

    .arrow[b-g0ruwqcrdc] {
        display: none !important;
    }

    /* Bottom login link smaller */
    .enhanced-layout p[b-g0ruwqcrdc] {
        font-size: 0.5rem !important;
        margin: 1px 0 !important;
    }

    /* Language selector top-right */
    .language-selector-fixed[b-g0ruwqcrdc] {
        top: 2px !important;
        right: 2px !important;
        padding: 1px 2px !important;
        font-size: 0.5rem !important;
        gap: 1px !important;
    }

    .language-note[b-g0ruwqcrdc] {
        display: none !important;
    }

    .language-selector-fixed img[b-g0ruwqcrdc] {
        width: 12px !important;
        height: 12px !important;
    }
}



/* /Pages/MessageReceiver.razor.rz.scp.css */
html[b-dx6oolezjt], body[b-dx6oolezjt] {
    height: 100%;
    margin: 0;
    padding: 0;
}

.fixed-button[b-dx6oolezjt] {
    position: fixed;
    top: 10%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1000;
}

.sidebarChat[b-dx6oolezjt] {
    width: 170px;
    padding: 10px;
    background-color: grey;
    overflow-y: auto;
    transition: width 0.3s ease, height 0.3s ease, flex-direction 0.3s ease;
}

.main-window[b-dx6oolezjt] {
    min-height: calc(80vh - 50px);
    display: flex;
    flex: 1;
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    background-color: #3e3e3e;
    box-shadow: 0 0 0 4px lightblue inset;
    transition: left 0.3s ease;
}

.booking-popup[b-dx6oolezjt] {
    display: flex;
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    color: #ff6600; /* Vibrant orange color */
    cursor: pointer; /* Shows the hand icon */
    font-size: 18px;
    font-weight: 500; /* Bold enough for emphasis */
    letter-spacing: 0.5px;
    transition: all 0.3s ease; /* Smooth transition for all properties */
    height: 50px; /* Set height to keep consistent size */
    padding: 0 10px; /* Some padding on the left and right */
}

    .booking-popup:hover[b-dx6oolezjt] {
        background: linear-gradient(45deg, #ff6600, #ffbf00); /* Smooth gradient background */
        color: white; /* Text color changes to white for contrast */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow to make it 'pop' */
        transform: translateY(-2px); /* Subtle lift effect */
        border-radius: 5px; /* Rounded corners for a soft feel */
    }

    .booking-popup span[b-dx6oolezjt] {
        font-weight: 300;
        transition: transform 0.2s ease, opacity 0.3s ease;
    }

    .booking-popup:hover span[b-dx6oolezjt] {
        opacity: 0.8; /* Slight opacity change for a more dynamic look */
    }


.conversation[b-dx6oolezjt] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.online-status[b-dx6oolezjt] {
    margin-left: 8px; /* adjust as needed */
}


.message[b-dx6oolezjt] {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    padding: 12px 14px; /* slightly bigger padding for bubble feel */
    max-width: 75%; /* reasonable width for bubbles */
    border-radius: 16px 16px 16px 4px; /* asymmetric for “speech bubble” look */
    background-color: #2c2c2c;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* more depth */
    word-break: break-word;
    letter-spacing: 0.8px;
    position: relative;
    transition: transform 0.1s ease; /* subtle hover effect */
}

    .message:hover[b-dx6oolezjt] {
        transform: scale(1.02);
    }


.sender[b-dx6oolezjt] {
    align-self: flex-start;
    background-color: #3a3a3a;
    border-radius: 16px 16px 16px 4px;
}

.receiver[b-dx6oolezjt] {
    align-self: flex-end;
    background-color: orange;
    border-radius: 16px 16px 4px 16px;
}


.email[b-dx6oolezjt] {
    font-size: 0.8em; /* slightly bigger for readability */
    color: #f5f5f5; /* softer white - easier on eyes */
    font-family: Arial, sans-serif;
    font-weight: bold;
    margin-top: 4px; /* more breathing space */
    letter-spacing: 0.5px; /* 👈 more gap between letters */
    word-break: break-all; /* prevents overflow if email is long */
    text-shadow: 0 0 4px rgba(0,0,0,0.3); /* subtle glow for visibility */
}


.timestamp[b-dx6oolezjt] {
    font-size: 0.6em;
    color: #ffd700;
    font-family: "Segoe UI", Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 8px; /* Use margin-bottom instead of padding for spacing */
    opacity: 0.9;
    letter-spacing: 0.3px;
}

    .timestamp i[b-dx6oolezjt] {
        color: #ffd700;
        font-size: 0.8em;
    }
.receiver .timestamp[b-dx6oolezjt] {
    color: #fff; /* text color for better contrast on orange */
}

    .receiver .timestamp i[b-dx6oolezjt] {
        color: #fff; /* icon color matches text */
    }


.text[b-dx6oolezjt] {
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    white-space: pre-wrap; /* keeps line breaks but allows wrapping */
    word-wrap: break-word; /* legacy support */
    overflow-wrap: break-word; /* modern standard */
    max-width: 100%; /* don't let it overflow the container */
    display: block;
}




.message.sender[b-dx6oolezjt] {
    align-self: flex-end;
}

.message.receiver[b-dx6oolezjt] {
    align-self: flex-start;
}

.user-email[b-dx6oolezjt] {
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    font-size: 0.8em; /* Reduce the size of the sender's email display */
}


.bubble[b-dx6oolezjt] {
    background-color: white;
    border-radius: 15px;
    padding: 10px 20px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    color: black;
    border: 1px solid #ddd;
}

.logo-container[b-dx6oolezjt] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .logo-container img[b-dx6oolezjt] {
        max-width: 100%;
        max-height: 100%;
    }

.custom-style[b-dx6oolezjt] {
    color: black;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    margin-bottom: 20px;
    font-weight: 500;
}

.contact[b-dx6oolezjt] {
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
}

.message-list[b-dx6oolezjt] {
    scroll-behavior: smooth;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}


.message-input[b-dx6oolezjt] {
    display: flex;
    flex-direction: column; /* Stack input and buttons vertically */
    gap: 10px; /* Space between textarea and button group */
    padding: 10px;
 background-color: white;
    position: sticky;
    bottom: 0;
    width: 100%;

}

    .message-input textarea[b-dx6oolezjt] {
        width: 100%;
        box-sizing: border-box;
        resize: none; /* Prevent manual resizing */
        overflow: hidden; /* Hide scrollbars */
        min-height: 110px; /* Set minimum height */
        max-height: 550px; /* Optional: Limit maximum height */
        padding: 10px;
        line-height: 1.5;
        border-radius: 5px; /* Rounded corners */
        /*border: 1px solid #ccc;*/ /* Border style */
        transition: height 0.2s ease; /* Smooth height transition */
        overflow-y: auto; /* Show vertical scrollbar if needed */
    }

    .message-input input:focus[b-dx6oolezjt] {
        border-color: #007bff;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }


.button-group[b-dx6oolezjt] {
    display: flex;
     flex-wrap: wrap;  /* Allow buttons to wrap on small screens */
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Space between buttons */
}

    .button-group button[b-dx6oolezjt] {
        flex: 1; /* Ensure buttons are of equal width */
        padding: 10px; /* Add padding */
        border-radius: 5px; /* Rounded corners */
        border: none; /* Remove default border */
        color: white; /* Text color */
    }

    .button-group .btn-primary[b-dx6oolezjt] {
        background-color: #007bff;
    }

        .button-group .btn-primary:hover[b-dx6oolezjt] {
            background-color: #0056b3;
        }

    .button-group .btn-danger[b-dx6oolezjt] {
        background-color: red;
    }

        .button-group .btn-danger:hover[b-dx6oolezjt] {
            background-color: darkred;
        }


.custom-button[b-dx6oolezjt] {
    background-color: blueviolet;
    border: none;
    color: white;
    padding: 2% 6%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 0.7em;
    margin: 1px 1%;
    cursor: pointer;
    border-radius: 10px;
}

/* backgroundNotAut START */
.modal-overlay[b-dx6oolezjt] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixed positioning to fill the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.8); /* Dark transparent background */
    z-index: 1000; /* Ensure it appears above everything else */
    color: white; /* Text color set to white */
}

/* Centered modal content */
.backgroundNotAut[b-dx6oolezjt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 30px;
    background-color: rgba(10, 10, 10, 0.8); /* Optional: You can adjust this background */
    padding: 20px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1010; /* Ensure the modal content is above the dark background */
    color: white; /* Text color set to white */
}
/* backgroundNotAut END */


.booking-info-box[b-dx6oolezjt] {
    background-color: #f9f9f9; /* Light background color */
    border-radius: 10px; /* Rounded corners */
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow for a modern look */
}

.booking-details[b-dx6oolezjt] {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between details */
    margin: 5px 0;
}

.booking-info[b-dx6oolezjt], .booking-status[b-dx6oolezjt] {
    font-size: 14px;
}

.btn[b-dx6oolezjt] {
    margin: 5px 5px 0 0;
}

.char-counter-sm[b-dx6oolezjt] {
    font-size: 0.65rem;
    color: #888;
    text-align: right;
    margin-top: 2px;
}

/*message status send */


.read-status[b-dx6oolezjt] {
    position: absolute;
    bottom: 2px;
    right: 8px;
    font-size: 12px; /* increase icon size */

}



@media (max-width: 668px) {
    .sidebarChat[b-dx6oolezjt] {
        width: 70px;
        padding: 10px;
        background-color: grey;
        /*    overflow-y: hidden;
        overflow-x: auto;*/

        overflow: hidden; /* Hide both vertical and horizontal scrollbars */
    }

    .message:hover[b-dx6oolezjt] {
        transform: none;
    }


    .text[b-dx6oolezjt] {
        font-size: 10px;
    }
    .main-window[b-dx6oolezjt] {
        padding: 10px;
        font-size: 13px;
    }

    .booking-info-box .sent-bookings[b-dx6oolezjt] {
        font-size: 1px;
    }

    .message-list[b-dx6oolezjt] {
        padding: 10px;
    }

    .conversation[b-dx6oolezjt] {
        overflow-x: auto;
    }

    .email[b-dx6oolezjt] {
        font-size: 0.75em; /* Adjust the size to be smaller */
        margin-top: 1px; /* Add some space above the timestamp */
    }

    .timestamp[b-dx6oolezjt] {
        font-size: 0.75em;
        gap: 4px;
    }

        .timestamp i[b-dx6oolezjt] {
            font-size: 0.7em;
        }


    /* Adjust the margin for the span to prevent overflow */
    .booking-info-box h4 span[b-dx6oolezjt] {
        font-size: 0.70rem !important; /* Slightly smaller font size */
        margin-left: 4px; /* Reduced margin between text and icon */
    }

    /* Make h4 titles smaller and adjust spacing */
    .booking-info-box h4[b-dx6oolezjt] {
        font-size: 0.70rem !important; /* Slightly smaller font size */
        margin-bottom: 6px !important; /* Reduce margin between h4 and content */
    }

    /* Adjust the font size for the content inside the booking info box */
    .booking-info-box .sent-bookings[b-dx6oolezjt], .booking-info-box .received-bookings[b-dx6oolezjt] {
        font-size: 0.85rem !important; /* Smaller font size */
        padding: 8px !important; /* Reduce padding */
    }

    /* Make buttons even smaller on mobile */
    .booking-details button[b-dx6oolezjt],
    .booking-details a.btn[b-dx6oolezjt] {
        padding: 4px 6px !important; /* Smaller padding for buttons */
        font-size: 0.75rem !important;
        margin-right: 4px !important; /* Less margin between buttons */
        min-width: 70px !important; /* Reduce minimum width */
    }

    /* Reduce margins and padding for the booking details sections */
    .booking-details-section .received-bookings[b-dx6oolezjt],
    .booking-details-section .sent-bookings[b-dx6oolezjt] {
        font-size: 0.75rem !important;
        padding: 6px !important; /* Less padding */
    }

    /* Ensure long booking info texts do not overflow */
    .booking-details div[b-dx6oolezjt] {
        margin-bottom: 3px !important; /* Reduce space between lines */
    }

    /* For better mobile usability, make the arrow indicators more compact */
    .booking-popup span[b-dx6oolezjt] {
        font-size: 0.75rem !important; /* Slightly smaller arrows */
    }


    .message-input[b-dx6oolezjt] {
        flex-direction: column;
    }

        .message-input input[b-dx6oolezjt] {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 5px;
        }

        .message-input button[b-dx6oolezjt] {
            width: 100%;
            margin-bottom: 5px;
        }

        .message-input textarea[b-dx6oolezjt] {
            margin-bottom: 5px;
            height: 110px;
            font-size: 11px;
        }

    .connection-status[b-dx6oolezjt] {
        display: none; /* Hide connection status on small screens */
    }

    /* Make the buttons smaller and more compact on small screens */
    .btn[b-dx6oolezjt] {
        font-size: 0.75rem !important; /* Reduce font size */
        padding: 6px 12px !important; /* Smaller padding for buttons */
        min-width: 90px !important; /* Reduce the minimum width */
        margin-bottom: 6px !important; /* Add space between buttons */
        display: block; /* Make buttons stack vertically */
        width: 100%; /* Make buttons take up full width */
    }


}


.status-ticker[b-dx6oolezjt] {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.9rem;
    background-color: #3e3e3e;
    color: #eee;
    padding: 5px 12px;
    font-weight: 500;
    gap: 1rem;
    border-radius: 6px;
    user-select: none;
    position: relative;
}

.status-group[b-dx6oolezjt] {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: max-content;
}

/* Wrap chat-rules in a container that has left padding equal to status-group width */
.chat-rules-container[b-dx6oolezjt] {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  padding-left: 220px; /* Adjust this to your .status-group width */
  height: 1.2rem; /* or set fixed height to avoid collapsing */
}




.chat-rules[b-dx6oolezjt] {
  display: inline-block;
  white-space: nowrap;
  /* Remove absolute positioning */
  /* position: absolute; */
  /* left: 0; */
  animation: scroll-left-b-dx6oolezjt 15s linear infinite;
  color: #eee;
  font-weight: 500;
  will-change: transform;
}


    .chat-rules:hover[b-dx6oolezjt] {
        animation-play-state: paused;
    }

/* Keyframes for smooth scrolling */
@keyframes scroll-left-b-dx6oolezjt {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}
/* /Pages/UserContacts.razor.rz.scp.css */
html[b-391sj7unf3], body[b-391sj7unf3] {
    height: 100%;
    margin: 0;
    padding: 0;
}

.fixed-button[b-391sj7unf3] {
    position: fixed;
    top: 10%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1000;
}

.sidebarChat[b-391sj7unf3] {
    width: 170px;
    padding: 10px;
    background-color: grey;
    overflow-y: auto;
    transition: width 0.3s ease, height 0.3s ease, flex-direction 0.3s ease;
}

.main-window[b-391sj7unf3] {
    min-height: calc(80vh - 50px);
    display: flex;
    flex: 1;
    margin: 0;
        padding: 20px;
 overflow-y: auto;
    background-color: #3e3e3e;
    box-shadow: 0 0 0 4px lightblue inset;
    transition: left 0.3s ease;
    flex-direction: column; /* Stack items vertically */

}

.conversation[b-391sj7unf3] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.message-list[b-391sj7unf3] {
    flex: 1;
    overflow-y: auto;
}

.message[b-391sj7unf3] {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 10px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sender[b-391sj7unf3] {
    align-self: flex-start;
    background-color: #007bff;
    color: white;
    margin-right: auto;
}

.receiver[b-391sj7unf3] {
    align-self: flex-end;
    background-color: orange;
    margin-left: auto;
}

.message .email[b-391sj7unf3] {
    font-weight: bold;
}

.message-input[b-391sj7unf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 10px;
    border-top: 1px solid #ccc;
    position: sticky;
    bottom: 0;
    width: 100%;
}

    .message-input input[type="text"][b-391sj7unf3] {
        flex-grow: 1;
        padding: 8px;
        border-radius: 20px;
        border: 1px solid #ccc;
    }

    .message-input button[b-391sj7unf3] {
        padding: 8px 16px;
        border-radius: 20px;
        border: none;
        background-color: #007bff;
        color: white;
        cursor: pointer;
    }

        .message-input button:hover[b-391sj7unf3] {
            background-color: #0056b3;
        }

.message-list[b-391sj7unf3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

.message.sender[b-391sj7unf3] {
    align-self: flex-end;
}

.message.receiver[b-391sj7unf3] {
    align-self: flex-start;
}


.message-list[b-391sj7unf3] {
    scroll-behavior: smooth;
    padding: 20px;
}

.bubble[b-391sj7unf3] {
    background-color: white;
    border-radius: 15px;
    padding: 10px 20px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    color: black;
    border: 1px solid #ddd;
}

.logo-container[b-391sj7unf3] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .logo-container img[b-391sj7unf3] {
        max-width: 100%;
        max-height: 100%;
    }

.custom-style[b-391sj7unf3] {
    color: black;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    margin-bottom: 20px;
    font-weight: 500;
}


/* backgroundNotAut START */
.modal-overlay[b-391sj7unf3] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixed positioning to fill the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.8); /* Dark transparent background */
    z-index: 1000; /* Ensure it appears above everything else */
    color: white; /* Text color set to white */
}

/* Centered modal content */
.backgroundNotAut[b-391sj7unf3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 30px;
    background-color: rgba(10, 10, 10, 0.8); /* Optional: You can adjust this background */
    padding: 20px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1010; /* Ensure the modal content is above the dark background */
    color: white; /* Text color set to white */
}
/* backgroundNotAut END */




.status-ticker[b-391sj7unf3] {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.9rem;
    background-color: #3e3e3e;
    color: #eee;
    padding: 5px 12px;
    font-weight: 500;
    gap: 1rem;
    border-radius: 6px;
    user-select: none;
    position: relative;
}

.status-group[b-391sj7unf3] {
    flex-shrink: 0;
    white-space: nowrap;
    min-width: max-content;
}

/* Wrap chat-rules in a container that has left padding equal to status-group width */
.chat-rules-container[b-391sj7unf3] {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding-left: 220px; /* Adjust this to your .status-group width */
    height: 1.2rem; /* or set fixed height to avoid collapsing */
}

.chat-rules[b-391sj7unf3] {
    display: inline-block;
    white-space: nowrap; 
    animation: scroll-left-b-391sj7unf3 15s linear infinite;
    color: #eee;
    font-weight: 500;
    will-change: transform;
}


    .chat-rules:hover[b-391sj7unf3] {
        animation-play-state: paused;
    }



.contact-card[b-391sj7unf3] {
    display: flex;
    flex-direction: column;
    background-color: #1e1e1e; /* dark card */
    border-radius: 12px;
    padding: 12px 16px;
    margin: 8px 0;
    cursor: pointer;
    transition: background 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

    .contact-card:hover[b-391sj7unf3] {
        background-color: #2a2a2a; /* highlight on hover */
    }

.contact-info[b-391sj7unf3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-email[b-391sj7unf3] {
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #ffffff;
    font-size: 0.95rem;
}

.online-status[b-391sj7unf3] {
    font-size: 0.8rem;
    color: #00ff00; /* green for online */
}

.booking-badge[b-391sj7unf3] {
    background-color: #ff9800;
    color: #fff;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 0.75rem;
    display: inline-block;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
}

.unread-badge[b-391sj7unf3] {
    background-color: #ff1744;
    color: white;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 8px;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
}

.no-messages[b-391sj7unf3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #ccc;
    font-family: 'Inter', '-apple-system', 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
    transition: all 0.3s ease;
}

    .no-messages i[b-391sj7unf3] {
        color: #ffd700; /* golden envelope icon */
        font-size: 1.1rem;
    }

    .no-messages:hover[b-391sj7unf3] {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: default;
    }




@media (max-width: 568px) {
    .sidebarChat[b-391sj7unf3] {
        width: 70px;
        padding: 10px;
        background-color: grey;
        /*    overflow-y: hidden;
        overflow-x: auto;*/

        overflow: hidden; /* Hide both vertical and horizontal scrollbars */
    }

    .modal-content[b-391sj7unf3] {
        width: calc(100vw - 33px); /* Adjust width as needed */
        margin: -25px -20px -20px -22px;
    }

    .main-window[b-391sj7unf3] {
        padding: 10px;
        font-size: 13px;
    }

    .message-list[b-391sj7unf3] {
        padding: 10px;
    }

    .conversation[b-391sj7unf3] {
        overflow-x: auto;
    }

    h4[b-391sj7unf3] {
        font-size: 10px;
    }
}
/* Keyframes for smooth scrolling */
@keyframes scroll-left-b-391sj7unf3 {
    0% {
        transform: translateX(100%);
    }

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


/* /Pages/UserDetails.razor.rz.scp.css */
h4[b-wbyzuw6hyw] {
    letter-spacing: 1.6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Use system font stack */
    line-height: 1.5; /* Adjust the line height as needed */
}

h3[b-wbyzuw6hyw] {
    letter-spacing: 1px;
    font-weight: 750;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p[b-wbyzuw6hyw] {
    letter-spacing: 1px;
    font-weight: 540;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h2[b-wbyzuw6hyw], h5[b-wbyzuw6hyw], span[b-wbyzuw6hyw], div[b-wbyzuw6hyw] {
    letter-spacing: 1.9px;
    font-weight: 400;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.imgRound[b-wbyzuw6hyw] {
    width: 30%; /* Make the image width responsive */
    height: 30%;
    /*    margin-bottom: 70px;
*/ margin: 90px 0 70px 0;
}

/*profile icon view*/
.profile-icon-text-link[b-wbyzuw6hyw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: deepskyblue; /* Bootstrap primary */
    margin-left: 8px;
    vertical-align: middle;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    align-content: end;
}

    .profile-icon-text-link i[b-wbyzuw6hyw] {
        font-size: 1rem;
    }

    .profile-icon-text-link:hover[b-wbyzuw6hyw] {
        color: #0a58ca;
        text-decoration: none;
    }
/* wrapper to push the link to the right */
.profile-link-wrapper[b-wbyzuw6hyw] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
    margin-bottom: 4px;
}



/* Container - Make the form container smaller */
.container.booking[b-wbyzuw6hyw] {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 18px;
    background: #ffffff;
    /* Visible but elegant frame */
    border: 4px solid #d0d5dd;
    border-radius: 16px;
    /* Modern layered shadow */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .container.booking[b-wbyzuw6hyw]::after {
        content: "";
        position: absolute;
        inset: -6px; /* space outside the card */
        border-radius: 20px;
        border: 2px dotted rgba(255, 255, 255, 0.9);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    .container.booking:hover[b-wbyzuw6hyw]::after {
        opacity: 1;
    }

    .container.booking:hover[b-wbyzuw6hyw] {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10);
    }


/* for containers calender */
.container[b-wbyzuw6hyw] {
    margin: 20px auto;
    background-color: #fff;
    overflow: hidden;
    padding: 25px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2), 0 2px 3px rgba(0,0,0,0.4);
}

    .container .icon[b-wbyzuw6hyw] {
        background-image: url('https://res.cloudinary.com/dw369yzsh/image/upload/v1483213851/icons_wykol9.png');
        width: 27px;
        height: 30px;
    }

.iconSearch[b-wbyzuw6hyw] {
    background-image: url('https://res.cloudinary.com/dw369yzsh/image/upload/v1483213851/icons_wykol9.png');
}

.calendar th[b-wbyzuw6hyw], .graph[b-wbyzuw6hyw] {
    font-family: "Gotham Medium", sans-serif;
    color: #666666;
}
/*buttons*/
.container button[b-wbyzuw6hyw] {
    text-transform: uppercase;
    border: none;
    background-color: #fb6362;
    color: #fff;
    margin: 0 auto;
    display: block;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.8);
    border-radius: 4px;
    font-size: 15px;
    font-family: "Gotham Book", sans-serif;
    cursor: pointer;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

    .container button:hover[b-wbyzuw6hyw] {
        background-color: #f98584;
    }

    .container button:active[b-wbyzuw6hyw] {
        background-color: #f98584;
        position: relative;
        top: 2px;
    }

button.button-big[b-wbyzuw6hyw] {
    width: 296px;
    height: 58px;
}

button.clear[b-wbyzuw6hyw] {
    width: 296px;
    height: 58px;
    margin-top: 20px;
}


/*inputs*/
.input-text[b-wbyzuw6hyw] {
    border-radius: 2px;
    background-color: #f4f4f4;
    box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
    padding-left: 11px;
    position: relative;
    height: 46px;
    line-height: 46px;
}

    .input-text .icon[b-wbyzuw6hyw] {
        position: absolute;
        right: 4px;
        top: 4px;
    }

    .input-text input[b-wbyzuw6hyw], .input-text textarea[b-wbyzuw6hyw], .div-file label[b-wbyzuw6hyw] {
        border: none;
        background-color: transparent;
        font-family: "Gotham Light", sans-serif;
        color: #999999;
        border: none; /* Remove border */
        outline: none; /* Remove outline on focus */
        background-color: transparent; /* Set background color as needed */
    }
/*placeholders hell*/
.container .input-text input[b-wbyzuw6hyw]::-webkit-input-placeholder, .container .input-text textarea[b-wbyzuw6hyw]::-webkit-input-placeholder {
    color: #999999;
    font-family: "Gotham Light", sans-serif;
    font-size: 20px;
}

.container .input-text input[b-wbyzuw6hyw]::-moz-placeholder, .container .input-text textarea[b-wbyzuw6hyw]::-moz-placeholder {
    color: #999999;
    font-family: "Gotham Light", sans-serif;
    font-size: 14px;
}

.container .input-text input:-moz-placeholder[b-wbyzuw6hyw], .container .input-text textarea:-moz-placeholder[b-wbyzuw6hyw] {
    color: #999999;
    font-family: "Gotham Light", sans-serif;
    font-size: 14px;
}

.container .input-text input:-ms-input-placeholder[b-wbyzuw6hyw], .container .input-text textarea:-ms-input-placeholder[b-wbyzuw6hyw] {
    color: #999999;
    font-family: "Gotham Light", sans-serif;
    font-size: 14px;
}


/***** Calendar *****/

.calendar[b-wbyzuw6hyw] {
    width: 450px;
    height: 426px;
    position: fixed;
    top: 50%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
    left: 50%; /* пoлoвинa экрaнa слевa */
    margin-top: -213px;
    margin-left: -173px;
    z-index: 5;
    display: none;
}

    .calendar .header[b-wbyzuw6hyw] {
        background-color: #404a58;
        color: #fff;
        font-size: 17px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        position: relative;
    }

    .calendar .arr[b-wbyzuw6hyw] {
        position: absolute;
        width: 13px;
        height: 30px;
        cursor: pointer;
        top: 25px;
    }

    .calendar .prev[b-wbyzuw6hyw] {
        left: 38px;
    }

    .calendar .next[b-wbyzuw6hyw] {
        background-position: 0 -30px;
        right: 38px;
    }
    /*table*/
    .calendar table[b-wbyzuw6hyw] {
        width: 387px;
        height: 248px;
        margin: 11px auto 20px auto;
        text-align: center;
        vertical-align: middle;
        color: #666666;
    }

    .calendar tr[b-wbyzuw6hyw], td[b-wbyzuw6hyw] {
        width: 41px;
    }

    .calendar td:not(.notCurMonth)[b-wbyzuw6hyw] {
        cursor: pointer;
        -webkit-transition: background-color 0.2s;
        -moz-transition: background-color 0.2s;
        -ms-transition: background-color 0.2s;
        -o-transition: background-color 0.2s;
        transition: background-color 0.2s;
    }

        .calendar td:not(.notCurMonth):not(.curDay):hover[b-wbyzuw6hyw] {
            background-color: #f4f4f4;
            border-radius: 19px;
        }

    .calendar .holiday[b-wbyzuw6hyw] {
        font-weight: bold;
        color: #fb6362;
    }

    .calendar .curDay[b-wbyzuw6hyw] {
        font-weight: bold;
        color: #fff;
        background-color: #fb6362;
        border-radius: 19px;
    }

    .calendar .notCurMonth[b-wbyzuw6hyw] {
        color: #c5c5c5;
    }

#calendarTable th[b-wbyzuw6hyw] {
    font-size: 16px; /* Adjust font size */
    color: #333; /* Text color */
    background-color: #f0f0f0; /* Background color of the header */
    text-align: center; /* Align the text in the center */
    padding: 10px; /* Add some padding for better spacing */
}

    #calendarTable th:first-child[b-wbyzuw6hyw] {
        color: red; /* Example: Change color of Sunday */
    }



.highlight[b-wbyzuw6hyw] {
    background-color: powderblue;
    For highlighting selected range
}

.startDate[b-wbyzuw6hyw] {
    background-color: powderblue;
    color: white;
}



.endDate[b-wbyzuw6hyw] {
    background-color: powderblue;
     color: white;

}

.curDay[b-wbyzuw6hyw] {
    background-color: blue;
     color: white;
  
}

.calendar[b-wbyzuw6hyw] {
    height: auto;
}

@keyframes launch-b-wbyzuw6hyw {
    0% {
        transform: translateY(0);
    }

    10%, 15% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(-700px);
    }
}

.booking .header[b-wbyzuw6hyw] {
    width: 100%;
    height: 185px;
    background-image: url('https://res.cloudinary.com/dw369yzsh/image/upload/v1483213946/img_booking_ck8dw4.jpg');
    position: relative;
    color: #fff;
}

    .booking .header div[b-wbyzuw6hyw] {
        position: absolute;
        left: 22px;
        top: 117px;
    }

    .booking .header h2[b-wbyzuw6hyw] {
        font-size: 25px;
    }

    .booking .header p[b-wbyzuw6hyw] {
        font-family: "Gotham Light", sans-serif;
        margin: 4px 0 0 21px;
    }

    .booking .header .icon[b-wbyzuw6hyw] {
        background-position: 0 -60px;
        position: absolute;
        left: 4px;
        top: 33px;
    }

inputs
.booking .dates[b-wbyzuw6hyw], .booking .persons[b-wbyzuw6hyw] {
    width: 296px;
    margin: 26px auto 0 auto;
}

.booking label:not(.checkbox)[b-wbyzuw6hyw] {
    display: block;
}

.booking .dates .input-text[b-wbyzuw6hyw] {
    margin-top: 10px;
}

    .booking .dates .input-text:nth-child(2)[b-wbyzuw6hyw] {
        margin-bottom: 20px;
    }

.booking .input-text .icon[b-wbyzuw6hyw] {
    width: 36px;
    height: 36px;
    background-color: #404a58;
    border-radius: 2px;
    background-position: 10px -80px;
    cursor: pointer;
}

.booking .persons li[b-wbyzuw6hyw] {
    display: inline-block;
    font-size: 0;
    width: 45%;
}

    .booking .persons li:last-child[b-wbyzuw6hyw] {
        padding-left: 20px;
    }

.booking .persons label[b-wbyzuw6hyw] {
    font-size: 14px;
}

.booking .persons .input-text[b-wbyzuw6hyw] {
    width: 138px;
    height: 45px;
    padding: 0;
    margin-top: 9px;
}

.booking .persons select[b-wbyzuw6hyw] {
    font-size: 14px;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: #404a58;
    padding-left: 9px;
    position: relative;
    z-index: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

.booking .persons option[b-wbyzuw6hyw] {
    background-color: #f4f4f4;
}

    .booking .persons option:hover[b-wbyzuw6hyw] {
        background-color: red;
    }

.booking .persons .icon[b-wbyzuw6hyw] {
    background-position: 15px -106px;
}

button
.booking .button-big[b-wbyzuw6hyw] {
    position: relative;
    padding-left: 20px;
    margin-top: 40px;
}

.booking .button-big .icon[b-wbyzuw6hyw] {
    background-position: 0 -150px;
    position: absolute;
    left: 59px;
}

.selected-time[b-wbyzuw6hyw] {
    border: 2px solid #007bff; /* Change this to your desired border color */
    border-radius: 50%; /* Makes the icon round */
    padding: 10px; /* Adjusts the padding around the time */
    background-color: rgba(0, 123, 255, 0.1); /* Light background for the selected time */
    color: #007bff; /* Text color */
    display: inline-block; /* Makes sure it behaves like a block element */
}


.card[b-wbyzuw6hyw] {
    justify-content: center !important;
    min-width: 100%;
}



.card-footer[b-wbyzuw6hyw] {
    margin-bottom: 20px; /* Adjusts space below the footer if needed */
    display: flex;
    justify-content: center;
    align-items: center; /* Center items vertically */
    flex-wrap: wrap; /* Allow wrapping if needed */
}

.alert[b-wbyzuw6hyw] {
    margin-top: 15px; /* Adds space between the button and the alert message */
    width: 100%; /* Optional: ensures the alert spans the full width */
    max-width: 500px; /* Optional: limits the width for better alignment */
    margin-left: auto; /* Centers the alert horizontally */
    margin-right: auto; /* Centers the alert horizontally */
}


.full-width-box[b-wbyzuw6hyw] {
    display: flex;
    flex-wrap: wrap; /* Ensures the items wrap to the next line if they don't fit */
    justify-content: flex-start; /* Aligns items to the left */
    gap: 10px; /* Adds spacing between cards */
    background-color: lightgreen;
    padding: 20px;
    margin: 0;
    border-radius: 15px;
}


.card-container[b-wbyzuw6hyw] {
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Content starts from the top */
    position: relative; /* Allows absolute positioning of children */
    height: 300px; /* Set a fixed height for the card */
    padding: 1rem; /* Space around the content */
    background-color: #f9f9f9; /* Card background color */
    border-radius: 8px; /* Rounded corners */
    font-size: 16px; /* Base font size for scaling */
}

.viewItem[b-wbyzuw6hyw] {
    position: absolute; /* Make the button position relative to the card container */
    bottom: 3px; /* Align to the very bottom with a small gap */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for perfect centering */
    display: flex;
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    padding: 8px 12px; /* Adjust padding for aesthetics */
    font-size: 0.9em !important; /* Force the font size */
    width: 150px; /* Fixed button width */
    height: 50px; /* Fixed button height */
    bottom: 10px;
}


.btn[b-wbyzuw6hyw] {
    background-color: #007bff; /* Default button background color */
    color: white; /* Default text color */
    border: none; /* Remove border for cleaner look */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

    .btn:hover[b-wbyzuw6hyw] {
        background-color: #0056b3; /* Darker blue on hover */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
    }

    .btn:active[b-wbyzuw6hyw] {
        background-color: #004494; /* Even darker blue when clicked */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Reduced shadow */
    }


#messageInput[b-wbyzuw6hyw] {
    width: 100%;
    min-height: 120px;
    max-height: 700px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid gray;
    outline: none;
    border-radius: 4px;
    overflow-y: hidden; /* Default: hide scrollbar */
}

    #messageInput:focus[b-wbyzuw6hyw] {
        border-color: #66afe9; /* Replace with your preferred color */
        box-shadow: 0 0 9px rgba(102, 175, 233, 0.6); /* Optional glow effect */
    }


.booked[b-wbyzuw6hyw] {
    position: relative; /* Position for the pseudo-element */
    background-color: gray; /* Background color for booked dates */
    color: gray; /* Default text color for the cell */
    padding: 0; /* Remove padding */
    line-height: 1; /* Ensure proper line height */
}


    .booked[b-wbyzuw6hyw]::after {
        content: '✖️'; /* Cross symbol */
        position: absolute; /* Position it over the cell */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust positioning */
        font-size: 1.2em; /* Adjust size as needed */
        line-height: 1.2em; /* Set line height to match font size */
        color: black; /* Color for the cross */
        pointer-events: none; /* Make sure it doesn't capture clicks */
        margin: 0; /* Remove any default margin */
        padding: 0; /* Remove any padding */
    }



.btn[b-wbyzuw6hyw] {
    background-color: #FFA500; /* Orange color */
    color: white; /* Text color */
    font-size: 1.1rem; /* Slightly larger font size */
    padding: 10px 15px; /* Increased padding for a bigger button */
    border: none; /* Remove border if you want a flat button */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    margin-bottom: 2px; /* Spacing below the button */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    text-align: center; /* Ensure text alignment is centered */
}


.team-content-inner .btn:hover[b-wbyzuw6hyw] {
    background-color: #FF8C00; /* Darker orange on hover */
}

body[b-wbyzuw6hyw] {
    background: #eee;
    margin-top: 20px;
}


.team .team-content-inner[b-wbyzuw6hyw] {
    background-color: #ffffff;
    padding: 20px 20px;
    width: 100%;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    min-height: 100%;
    font-size: 15px;
    text-overflow: ellipsis; /* Adds ellipsis for overflow text */
    white-space: nowrap; /* Prevents text wrapping */
}


.team:hover .team-content-inner[b-wbyzuw6hyw] {
    background-color: #009b72;
    color: #ffffff;
    padding: 30px 60px 50px 80px;
    padding-left: 40%;
    min-height: 230px;
    Remove fixed height display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-overflow: ellipsis; /* Adds ellipsis for overflow text */
    white-space: nowrap; /* Prevents text wrapping */
}


    .team:hover .team-content-inner .team-info[b-wbyzuw6hyw] {
        transform: translateY(-10px);
        margin-bottom: 30px;
    }


.team[b-wbyzuw6hyw] {
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background: #fff;
    min-height: 250px;
    max-width: 100%;
}

.team-contact a.text-white[b-wbyzuw6hyw] {
    display: block;
    max-width: 80%; /* Reduced to prevent overflow */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.85em; /* Smaller font size */
}

.team .team-content[b-wbyzuw6hyw] {
    position: absolute;
    bottom: 25px;
    margin: 0 20px;
    left: 0;
    right: 0;
}

.team .team-content-inner[b-wbyzuw6hyw] {
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    text-align: center;
}

    .team .team-content-inner .team-contact[b-wbyzuw6hyw] {
        opacity: 0;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }

/* Hover effects for team content */
.team:hover .team-content-inner[b-wbyzuw6hyw] {
    background-color: #009b72;
    color: #ffffff;
    padding: 15px; /* Adjusted padding for better fit */
}

    .team:hover .team-content-inner .team-contact[b-wbyzuw6hyw] {
        opacity: 1;
        bottom: 15px;
    }

        .team:hover .team-content-inner .team-info .team-position[b-wbyzuw6hyw],
        .team:hover .team-content-inner .team-social .nav .nav-link[b-wbyzuw6hyw],
        .team:hover .team-content-inner .team-contact .nav .nav-link[b-wbyzuw6hyw] {
            color: #ffffff;
        }

/* Button and email adjustments */
.team-contact a.text-white[b-wbyzuw6hyw], /* Email styling */
.team .team-content-inner .btn-primary[b-wbyzuw6hyw] { /* Button styling */
    display: inline-block;
    font-size: 0.75em; /* Smaller font for better fit */
    margin: 4px 0; /* Reduced margin */
    padding: 5px 10px; /* Smaller padding for button */
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* Hover color changes */
.team:hover .team-content-inner .team-social .nav .nav-link:hover[b-wbyzuw6hyw],
.team:hover .team-content-inner .team-contact .nav .nav-link:hover[b-wbyzuw6hyw] {
    color: #000000;
}

/* Team info and contact content styles */
.team-content-inner .team-info .avatar-name[b-wbyzuw6hyw] {
    margin-bottom: 0;
    font-weight: 600;
}

.team-content-inner .team-info .team-position[b-wbyzuw6hyw] {
    color: #009b72;
}

.social a.text-muted:hover[b-wbyzuw6hyw] {
    color: #009b72 !important;
}


.likes-container[b-wbyzuw6hyw] {
    position: absolute; /* Position relative to the parent container */
    bottom: -23px; /* Stick to the bottom of the parent container, adjust if necessary */
    left: 10px; /* Align to the left side, adjust if necessary */
    display: inline-flex; /* Keep inline-flex layout */
    align-items: center; /* Align items vertically */
    margin: 0; /* Remove any margin to avoid overflow */
    padding: 0; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensure padding and border are included */
    /*background-color: rgba(0, 0, 0, 0.5);*/ /* Optional: add background for visibility */
    border-radius: 5px; /* Optional: add some rounded corners */
}



.icon[b-wbyzuw6hyw] {
    color: black;
    Modern orange color for the icon font-size: 0.9em;
    transition: transform 0.3s ease, color 0.3s ease;
}

.likes-count[b-wbyzuw6hyw] {
    color: darkcyan;
    White text color for contrast font-size: 2.1em;
    margin-left: 2px;
}



.tooltip[b-wbyzuw6hyw] {
    position: absolute; /* Keep it absolute */
    top: -10px; /* Adjusted to move it above the icon */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background-color: rgba(0, 0, 0, 0.9); /* Darker, transparent background */
    color: #ffffff; /* White text color */
    border-radius: 8px; /* Rounded corners */
    padding: 10px; /* Padding inside tooltip */
    font-size: 0.9em; /* Font size */
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Not visible by default */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
    white-space: normal; /* Allow tooltip to wrap text */
    z-index: 1000; /* Increased z-index for higher stacking order */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
    width: max-content; /* Ensure tooltip width adjusts to content */
    min-width: 150px; /* Set a minimum width */
}

    .tooltip[b-wbyzuw6hyw]::after {
        content: ''; /* Arrow for tooltip */
        position: absolute; /* Positioning for the arrow */
        /*top: 100%;*/ /* Position it below the tooltip */
        left: 50%;
        transform: translateX(-50%); /* Center arrow */
        border-width: 10px; /* Arrow size */
        border-style: solid; /* Solid border for arrow */
        border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; /* Arrow color matches background */
    }

.tooltip-link[b-wbyzuw6hyw] {
    display: block; /* Block display for links */
    color: white; /* White text color */
    text-decoration: none; /* No underline */
    margin-bottom: 5px; /* Space between links */
    transition: color 0.3s ease; /* Transition for link color */
}

    .tooltip-link:hover[b-wbyzuw6hyw] {
        color: orange; /* Change color on hover */
        text-decoration: none; /* Keep no underline on hover */
    }


/* Hover effects to ensure tooltip visibility 
*/ .likes-container:hover .icon[b-wbyzuw6hyw] {
    transform: scale(1.2);
    color: #ffcc00;
    Change icon color on hover
}

.likes-container:hover .tooltip[b-wbyzuw6hyw] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


.carousel-inner[b-wbyzuw6hyw] {
    background-color: transparent !important;
}

.carousel-item[b-wbyzuw6hyw] {
    background-color: transparent !important;
}

.carousel-control-prev[b-wbyzuw6hyw],
.carousel-control-next[b-wbyzuw6hyw] {
    /* Optional: Remove any background behind arrows */
    background-color: transparent !important;
}



.img-responsive[b-wbyzuw6hyw] {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}


/*image size */

.img-wrapper[b-wbyzuw6hyw] {
    width: 100%;
    height: 30vh; /* Fixed visual height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Clip overflowing parts */
    background-color: #f9f9f9; /* Optional: fill background */
    border-radius: 20px;
}

.img-main[b-wbyzuw6hyw] {
  /*  height: auto;
    width: 100%;*/
    object-fit: contain; /* contain or cover depending on preference */
    border-radius: 20px;

}

/*.avatar {
    width: 150px;
    height: 150px;
    border-radius: 0;
    object-fit: contain;
}*/
.default-avatar[b-wbyzuw6hyw] {
    max-width: 80%; /* Shrink the image a little, so it fits inside the container */
    max-height: 100%; /* Same for height */
    object-fit: contain; /* Ensure the entire image is visible and not cropped */
    object-position: center; /* Center the image in case of any extra space */
    border-radius: 50%; /* Ensure rounded corners */
    display: block; /* Ensure it behaves as a block element */
    margin: 0 auto; /* Center the image horizontally within the container */
      width: 190px;
    height: 190px;
    border-radius: 0;
    object-fit: contain;
}

.image-modal-frame[b-wbyzuw6hyw] {
    border: 1px solid #ddd;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #f9f9f9;
    min-height: 90px; /* keeps the box from collapsing */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
}

.centered-box[b-wbyzuw6hyw] {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: lightgreen;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
    text-align: center;
    max-width: 70%;
    padding: 20px;
}

.centered-box2[b-wbyzuw6hyw] {
    margin-top: 20px;
    margin-bottom: 15px;
    background-color: lightgreen;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 45%;
    height: 80px;
    color: azure;
    font-weight: bolder;
    text-align: center;
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    color: white;
}

.mud-icon:hover[b-wbyzuw6hyw] {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}






/* MODAL WRAPS CONTENT */
.modal-dialog[b-wbyzuw6hyw] {
    width: fit-content;
    max-width: 90vw;
    margin: auto;

}

.modal-content[b-wbyzuw6hyw] {
    width: fit-content;
    height: fit-content;
    border-radius: 12px;
    border-left: 4px solid #ffffff; /* small left border */
    border-right: 4px solid #ffffff; /* small right border */
    border-top: 4px solid #ffffff; /* small left border */
    border-bottom: 4px solid #ffffff; /* small right border */

}

/* CENTER CONTENT */
.modal-body[b-wbyzuw6hyw] {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* IMAGE CONTROLS EVERYTHING */
.modal-image[b-wbyzuw6hyw] {
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 85vh;
    object-fit: contain;
}

.carousel-item[b-wbyzuw6hyw] {
    transition: none !important;
}

/**/
/*.carousel-item {
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important;

}

    .carousel-item.active {
        opacity: 1;
    }
*/



.modal-close-booton[b-wbyzuw6hyw] {
    font-size: 9px;
}




/*Modal background  colors */
.modal[b-wbyzuw6hyw] {
    background-color: rgba(0, 0, 0, 0.4) !important;
    opacity: 11 !important;
    backdrop-filter: blur(3px) !important;
}



.btn-close[b-wbyzuw6hyw] {
    display: inline-block !important;
}


.mileage-propertyUnit[b-wbyzuw6hyw] {
    font-size: 12px; /* Or a custom small size like 0.7rem */
    color: black;
}


.char-counter-sm[b-wbyzuw6hyw] {
    font-size: 0.65rem;
    color: #888;
    text-align: right;
    margin-top: 2px;
}


.booked-date[b-wbyzuw6hyw] {
    background-color: #f0f0f0 !important;
    color: #999 !important;
    text-decoration: none !important;
    font-weight: normal !important;
    cursor: not-allowed;
    pointer-events: none; /* optional: make truly unclickable */
}


/* default = large screens */
[b-wbyzuw6hyw] .user-item-card {
    min-width: 240px !important;
    max-width: 240px !important;
    height: 200px !important;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* important to prevent overflow */


}

[b-wbyzuw6hyw] .responsive-card {
    min-width: 200px;
    height: 220px; /* ← Set your custom height here */
    border-radius: 10%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    overflow: hidden;
}

    /* Hover effect */
    [b-wbyzuw6hyw].responsive-card:hover {
        box-shadow: 0 16px 22px rgba(0, 0, 0, 0.35);
        transform: translateY(-3px);
    }


/* item google maps location */
.location-icon-link-top[b-wbyzuw6hyw] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
}

/* Icon styling and hover effect */
.location-icon-top[b-wbyzuw6hyw] {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
    cursor: pointer; /* shows clickable */
}

/* Hover effect */
.location-icon-link-top:hover .location-icon-top[b-wbyzuw6hyw] {
    transform: scale(1.4);
}





@media (max-width: 768px) {
    [b-wbyzuw6hyw] .user-item-card {
        min-width: 120px !important; /* a bit wider for better fit */
        max-width: 140px !important;
        height: auto !important; /* allow height to grow with content */
        display: flex !important;
        flex-direction: column !important;
    }

        [b-wbyzuw6hyw] .user-item-card .mud-card-header,
        [b-wbyzuw6hyw] .user-item-card .d-flex.flex-column {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        [b-wbyzuw6hyw] .user-item-card .mud-carousel {
            height: 60px !important; /* smaller carousel height */
        }

        [b-wbyzuw6hyw] .user-item-card .d-flex.flex-column.align-items-center {
            padding-bottom: 8px !important;
        }

        [b-wbyzuw6hyw] .user-item-card .mud-text {
            font-size: 0.65rem !important; /* smaller fonts */
            white-space: normal !important; /* allow wrapping */
        }

        [b-wbyzuw6hyw] .user-item-card .mud-button {
            font-size: 0.65rem !important;
            padding: 4px 8px !important;
            min-width: unset !important; /* don't force large buttons */
        }

    [b-wbyzuw6hyw] .mud-card.responsive-card {
       
        max-width: 250px !important;
 
    }

    #calendarTable th[b-wbyzuw6hyw] {
        font-size: 10px; /* Adjust font size */
    }


    .img-main[b-wbyzuw6hyw] {
     /*   max-width: 100vw;
        max-height: 100%;*/
        object-fit: contain;
    }

    .modal-image[b-wbyzuw6hyw] {
        display: block;
        width: auto;
        height: 100%;
        max-width: 90vw; /* never bigger than screen */
        max-height: 70vh; /* smaller than screen */
        object-fit: contain;
    }

    .location-icon-top[b-wbyzuw6hyw] {
        width: 28px;
        height: 28px;
    }
        .modal-footer .modal-close-booton[b-wbyzuw6hyw] {
        justify-content: center !important;
        font-size: 8px;
    }

    .share-btn[b-wbyzuw6hyw] {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem; /* smaller tap area */
        width: auto; /* don’t stretch full width */
    }

        .share-btn i[b-wbyzuw6hyw] {
            font-size: 0.6rem;
        }

}




/* Media queries for responsive layout */
@media (max-width: 600px) {



    /* Remove padding/margin on content wrapper */
    .page-content-wrapper .content[b-wbyzuw6hyw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Remove left/right margin on row */
    .page-content-wrapper .row[b-wbyzuw6hyw] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Make column full width without affecting large screens */
    .page-content-wrapper .page-container .card-body[b-wbyzuw6hyw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important; /* fills small screen */
        width: auto !important; /* don’t force 100%, let content flow */
    }

    .conten.px-4[b-wbyzuw6hyw] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Optional: card inside */
    .page-content-wrapper .card[b-wbyzuw6hyw] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .calendar table[b-wbyzuw6hyw] {
        width: 287px;
    }

    .calendar[b-wbyzuw6hyw] {
        width: 357px;
    }

    #calendarTable th[b-wbyzuw6hyw] {
        font-size: 10px; /* Adjust font size */
    }





    .cardAlluseritem[b-wbyzuw6hyw] {
        width: 2px;
        margin: 10px; /* Adjust margin for spacing */
    }

    .card-body[b-wbyzuw6hyw] {
        font-size: 0.2rem; /* Smaller size for nickname */
    }

        .card-body p[b-wbyzuw6hyw] {
            font-size: 0.8rem; /* Smaller size for other text */
        }

        .card-body .btn[b-wbyzuw6hyw] {
            font-size: 0.8rem; /* Smaller button text */
            padding: 5px 10px; /* Adjust padding */
        }

    h3[b-wbyzuw6hyw], h2[b-wbyzuw6hyw], h4[b-wbyzuw6hyw], h5[b-wbyzuw6hyw], span[b-wbyzuw6hyw], div[b-wbyzuw6hyw] {
        font-size: 0.7rem; /* Standard smaller font size */
    }

    .size-unit[b-wbyzuw6hyw] {
        font-size: 0.7rem; /* Custom size for this element */
    }

    .viewItem[b-wbyzuw6hyw] {
        width: 100px;
        height: 30px;
        font-size: 0.8em !important;
        padding: 4px 8px;
        bottom: 10%; /* Adjust relative positioning */
        position: absolute;
    }

    .modal-footer .modal-close-booton[b-wbyzuw6hyw] {
        justify-content: center !important;
        font-size: 8px;
    }

 

    .custom-button[b-wbyzuw6hyw] {
        font-size: 0.8em; /* Smaller font size for buttons */
        padding: 4px 8px; /* Adjust padding */
        width: 100%; /* Let buttons adapt to their content size */
        margin: 5px; /* Optional: Add margin to create spacing between buttons */
        height: 30px;
        font-size: 1em !important;
    }

    button.button-big[b-wbyzuw6hyw], button.clear[b-wbyzuw6hyw] {
        width: 100%; /* Let buttons adapt to their content size */
        height: 30px; /* Fixed height */
        font-size: 1em !important; /* Force font size */
        /* Use absolute positioning cautiously for layout control */
    }


    .mileage-propertyUnit[b-wbyzuw6hyw] {
        font-size: 9px !important; /* Or a custom small size like 0.7rem */
        color: black;
    }

    .img-main[b-wbyzuw6hyw] {
        object-fit: contain;
    }

    [b-wbyzuw6hyw] .responsive-card {
        min-width: 200px !important;
    }


    .booking .header h2[b-wbyzuw6hyw] {
        font-size: 18px; /* Smaller font on mobile */
    }

    input#daterange[b-wbyzuw6hyw]::placeholder, textarea#messageInput[b-wbyzuw6hyw]::placeholder {
        font-size: 12px; /* Smaller font size on tablets and smaller screens */
    }

    input#daterange[b-wbyzuw6hyw]::placeholder, textarea#messageInput[b-wbyzuw6hyw]::placeholder {
        font-size: 10px; /* Even smaller font size on mobile screens */
    }

    .input-text[b-wbyzuw6hyw] {
        font-size: .4rem;
    }

    [b-wbyzuw6hyw].responsive-card {
        height: 10px; /* smaller on mobile */
    }


    .location-icon-top[b-wbyzuw6hyw] {
        width: 18px;
        height: 18px;
    }

    .share-btn[b-wbyzuw6hyw] {
        font-size: 0.4rem;
        padding: 0.25rem 0.5rem; /* smaller tap area */
        width: auto; /* don’t stretch full width */
    }

        .share-btn i[b-wbyzuw6hyw] {
            font-size: 0.5rem;
        }

}
/* /Pages/UserList.razor.rz.scp.css */
.form__group[b-4wc3lfdz2n] {
    position: relative;
    width: 100%;
}


.form__label[b-4wc3lfdz2n] {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: gray;
}


#searchInput[b-4wc3lfdz2n]::placeholder {
    color: black;
    opacity: 1;
    Ensures full opacity
}


.search-container[b-4wc3lfdz2n] {
    display: flex;
    align-items: center;
    border-radius: 12px;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-in-out;
}




    .search-container:hover[b-4wc3lfdz2n] {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

.search-icon[b-4wc3lfdz2n], .options-icon[b-4wc3lfdz2n] {
    font-size: 1.2rem;
    color: #ccc;
    margin: 0 0.6rem;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

    .search-icon:hover[b-4wc3lfdz2n], .options-icon:hover[b-4wc3lfdz2n] {
        color: #fff;
    }

.form__field[b-4wc3lfdz2n] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: black;
    font-size: 1rem;
    padding: 0.4rem;
    width: 100%;
}

.input-container[b-4wc3lfdz2n] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

select.form__field[b-4wc3lfdz2n], input[type="text"].form__field[b-4wc3lfdz2n], input[type="number"].form__field[b-4wc3lfdz2n] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    color: white;
}

    select.form__field option[b-4wc3lfdz2n] {
        color: black;
    }

.reset-button[b-4wc3lfdz2n] {
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f44336, #e91e63);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

    .reset-button:hover[b-4wc3lfdz2n] {
        background: linear-gradient(135deg, #d32f2f, #c2185b);
    }

.dropdown-content[b-4wc3lfdz2n] {
    padding: 1.5rem;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-top: 0.5rem;
    color: white;
}

.MudTabPanel[b-4wc3lfdz2n] {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.input-container input[b-4wc3lfdz2n]::placeholder {
    color: white; /* Set the color for the placeholder text */
    opacity: 1; /* Ensure the opacity is set to 1 for visibility */
}

.input-container input:focus[b-4wc3lfdz2n]::placeholder {
    color: #fff; /* Change placeholder text color on focus */
}

/* To change the input text color as well */
.input-container input[b-4wc3lfdz2n] {
    color: #fff; /* Change the color of the text inside the input field */
}




.icon[b-4wc3lfdz2n] {
    color: darkorange;
    font-size: 0.9em;
    transition: transform 0.3s ease, color 0.3s ease;
}

.likes-count[b-4wc3lfdz2n] {
    color: darkcyan;
    font-size: 0.9em;
    margin-left: 2px;
}


/* Hover effects to ensure tooltip visibility 
*/ .likes-container:hover .icon[b-4wc3lfdz2n] {
    transform: scale(1.2);
    color: #ffcc00;
}

.likes-container:hover .tooltip[b-4wc3lfdz2n] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}


/* Full width and height header */
.header[b-4wc3lfdz2n] {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
}

.header-image[b-4wc3lfdz2n] {
    width: 100%;
    height: 10vh; /* This sets the height to 20% of the viewport height */
    margin: 0;
    padding: 0;
    object-fit: fill;
}


.divSearchBar[b-4wc3lfdz2n] {
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent white background */
    padding: 15px; /* Padding for space inside */
    border-radius: 8px;
    border: 2px solid black; /* Solid border for better visibility */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9); /* More pronounced shadow */
    margin: 10px auto; /* Center horizontally with a top/bottom margin */
    width: 100%; /* Full width by default */
    max-width: 500px; /* Limit the maximum width */
    transition: box-shadow 0.3s ease, background-color 0.3s ease; /* Smooth transition for hover effect */
    z-index: 1000; /* High z-index to ensure it appears on top */
    position: relative; /* Positioning context */
}

    /* Hover effect */
    .divSearchBar:hover[b-4wc3lfdz2n] {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.9); /* More pronounced shadow on hover */
        background-color: rgba(255, 255, 255, 1); /* Solid background on hover */
    }




.btn[b-4wc3lfdz2n] {
    background-color: #FFA500; /* Orange color */
    color: white; /* Text color */
    font-size: 1.1rem; /* Slightly larger font size */
    padding: 10px 15px; /* Increased padding for a bigger button */
    border: none; /* Remove border if you want a flat button */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    margin-bottom: 2px; /* Spacing below the button */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center text horizontally */
    align-items: center; /* Center text vertically */
    text-align: center; /* Ensure text alignment is centered */
}



/*new moder view
*/
body[b-4wc3lfdz2n] {
    /*background: #FCFCFC;*/
    background: transparent;
}

.pr-12[b-4wc3lfdz2n] {
    padding-right: 12px !important;
}

.mb-20[b-4wc3lfdz2n] {
    margin-bottom: 20px !important;
}

.b-1[b-4wc3lfdz2n] {
    border: 1px solid #ebebeb !important;
}

.card[b-4wc3lfdz2n] {
    border: 0;
    border-radius: 0;
    margin-bottom: 30px;
    transition: .5s;
    background-color: #fff;
}


.media[b-4wc3lfdz2n] {
    padding: 16px 12px;
    display: flex;
    align-items: flex-start;
    height: 190px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: none; /* No bottom border */
}

.card-body[b-4wc3lfdz2n] {
    padding: 1.25rem;
}

.avatar[b-4wc3lfdz2n] {
    width: 150px;
    height: 150px;
    border-radius: 0;
    object-fit: contain;
}

.fs-20[b-4wc3lfdz2n] {
    font-size: 20px !important;
}

.fs-16[b-4wc3lfdz2n] {
    font-size: 16px !important;
}

.fs-14[b-4wc3lfdz2n] {
    font-size: 14px !important;
}

.text-fade[b-4wc3lfdz2n] {
    color: rgba(77, 82, 89, 0.7) !important;
}

.hover-shadow[b-4wc3lfdz2n] {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
}

.card-footer[b-4wc3lfdz2n] {
    background-color: #fcfdfe;
    border-top: 1px solid rgba(77, 82, 89, 0.07);
    color: #8b95a5;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    border-top: none;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    /* No bottom border */
}


/* Apply rounded corners to carousel items */
.carousel-item[b-4wc3lfdz2n] {
    width: 100%;
    height: 100%;
    transform: translateZ(0); /* GPU acceleration */
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
    overflow: hidden; /* Ensures the image is clipped inside the rounded container */
    border-radius: 15px; /* Rounded corners for carousel items */
    position: relative; /* For proper positioning */
}

    /* Apply rounded corners directly to the images inside carousel items */
    .carousel-item img[b-4wc3lfdz2n] {
        width: 100%; /* Make the image width 100% of the container */
        height: 100%; /* Make the image height 100% of the container */
        object-fit: cover; /* Ensures image fills the container without distortion */
        border-radius: 15px; /* Apply rounded corners to the images */
        object-position: center; /* Center the image if the aspect ratio doesn't match */
    }


/* Special style for the default avatar */
.default-avatar[b-4wc3lfdz2n] {
    max-width: 80%; /* Shrink the image a little, so it fits inside the container */
    max-height: 100%; /* Same for height */
    object-fit: contain; /* Ensure the entire image is visible and not cropped */
    object-position: center; /* Center the image in case of any extra space */
    border-radius: 50%; /* Ensure rounded corners */
    display: block; /* Ensure it behaves as a block element */
    margin: 0 auto; /* Center the image horizontally within the container */
}


.carousel-inner[b-4wc3lfdz2n] {
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Optional: soft modern corners */
}




/* Define a class for the carousel control buttons */
.carousel-control-style[b-4wc3lfdz2n] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: transparent;
    border-radius: 50%;
    padding: 10px;
    width: 30px; /* Set the width of the arrow buttons */
    height: 30px; /* Set the height of the arrow buttons */
}

/* Add custom styles for the icon */
.carousel-control-prev-icon[b-4wc3lfdz2n],
.carousel-control-next-icon[b-4wc3lfdz2n] {
    filter: invert(1); /* Invert colors of the icons */
}





.orange-icon[b-4wc3lfdz2n] {
    color: orange;
}


/* Default desktop */
.item-title[b-4wc3lfdz2n] {
    font-weight: bold;
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    display: block;
}

.item-description[b-4wc3lfdz2n] {
    font-weight: 400;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 0.8rem;
    display: block;
    letter-spacing: 1px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.itemUnits[b-4wc3lfdz2n] {
    font-size: 0.75rem; /* readable small size */
    color: black;
    margin-left: 0.4rem;
}



/* === FOOTER ROOT === */
.footer-container[b-4wc3lfdz2n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* === LEFT: DATE === */
.footer-left[b-4wc3lfdz2n] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


/* === MIDDLE: EMAIL + PROFILE + LIKE === */
.footer-middle[b-4wc3lfdz2n] {
    display: flex;
    align-items: center;
    gap: 8px; /* Adjust the gap to be smaller between icon and email */
    white-space: nowrap;
}

/* ICON: Adjust margin for better alignment */
.user-icon[b-4wc3lfdz2n] {
    font-size: 1.0rem; /* Adjust the icon size for better alignment */
    vertical-align: middle; /* Aligns with the middle of the text */
    padding-left: 10px;
}

/* EMAIL: Style the email itself */
.user-email[b-4wc3lfdz2n] {
    /* max-width: 360px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem; /* Adjust email font size */
    line-height: 1.2; /* Ensure good line-height for text */
    font-weight: 500;
}

/* Profile link styles */
.profile-icon-text-link[b-4wc3lfdz2n] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 500;
    padding-left: 20px;
}



/* PROFILE LINK */
.profile-icon-text-link[b-4wc3lfdz2n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-weight: 500;
}

/* === LIKE AREA === */

/* LIKE ICON + COUNT */
.likes-container[b-4wc3lfdz2n] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* === TOOLTIP === */
.tooltip[b-4wc3lfdz2n] {
    position: absolute;
    bottom: 100%;
    max-height: 70px; /* ≈ 10 rows */

    left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    background: #222;
    color: #fff;
    padding: 6px 8px;
    border-radius: 6px;
    min-width: 120px;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    overflow-y: auto;
}

    .tooltip[b-4wc3lfdz2n]::after {
        content: "Scroll for more";
        font-size: 0.7rem;
        opacity: 0.6;
        margin-top: 4px;
    }


    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar {
        width: 6px;
    }

    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
    }

    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar-track {
        background: transparent;
    }


    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar {
        width: 6px;
    }

    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.4);
        border-radius: 4px;
    }

    .tooltip[b-4wc3lfdz2n]::-webkit-scrollbar-track {
        background: transparent;
    }

.likes-container:hover .tooltip[b-4wc3lfdz2n] {
    display: flex;
}

.tooltip-link[b-4wc3lfdz2n] {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
}

    .tooltip-link:hover[b-4wc3lfdz2n] {
        text-decoration: underline;
    }

/* === RIGHT BUTTON === */
.footer-right[b-4wc3lfdz2n] {
    margin-left: auto;
    white-space: nowrap;
    padding-bottom: 20px;
}

/* === maps === */



.map-icon[b-4wc3lfdz2n] {
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease;
}

.location-link:hover .map-icon[b-4wc3lfdz2n] {
    transform: scale(1.6); /* subtle hover jump */
}

.map-city[b-4wc3lfdz2n] {
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.1;
}

.map-country[b-4wc3lfdz2n] {
    font-size: 0.8rem;
    line-height: 1.1;
    color: #666;
}

.map-text[b-4wc3lfdz2n] {
    min-width: 0; /* required for text-truncate to work inside flex */
}



/* --- MOBILE FIXES FOR SCREENS UP TO 600px --- */

@media (max-width: 600px) {


    .location-link .map-text[b-4wc3lfdz2n] {
        display: none; /* hide city/country text */
    }

    .location-link .map-icon[b-4wc3lfdz2n] {
        width: 20px;
        height: 20px;
    }

    .location-link:hover .map-icon[b-4wc3lfdz2n] {
        transform: scale(1.3); /* subtle hover jump */
    }


    /* --- Stack main media vertically --- */
    .media[b-4wc3lfdz2n] {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        height: auto;
    }

    /* --- Input field font --- */
    .form__field[b-4wc3lfdz2n] {
        font-size: 0.7rem;
    }

    /* --- User image carousel --- */
    .user-image-carousel[b-4wc3lfdz2n] {
        width: 80%;
        max-width: 250px;
        height: auto;
    }

        .user-image-carousel img[b-4wc3lfdz2n] {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

    /* --- Titles & description --- */
    .item-title[b-4wc3lfdz2n] {
        font-weight: bold;
        font-size: 0.6rem;
        color: #555;
        text-align: center;
        margin-bottom: 0.15rem;
    }

    .item-description[b-4wc3lfdz2n] {
        font-weight: 600;
        font-size: 0.55rem;
        color: #2c3e50;
        margin-bottom: 0.3rem;
        line-height: 1.2;
        text-align: center;
    }

    /* --- Footer container --- */
    footer.card-footer[b-4wc3lfdz2n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 6px 8px;
        font-size: 0.65rem;
    }

    .footer-info[b-4wc3lfdz2n] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        width: 100%;
    }

    .footer-item[b-4wc3lfdz2n] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

        .footer-item span[b-4wc3lfdz2n] {
            font-size: 0.65rem;
            word-break: break-word;
        }

    /* --- Profile link --- */
    .profile-icon-text-link[b-4wc3lfdz2n] {
        display: flex;
        align-items: center;
        font-size: 0.65rem;
        margin: 0;
        gap: 4px;
        padding-left: 0px;
    }

        .profile-icon-text-link i[b-4wc3lfdz2n] {
            font-size: 0.75rem;
        }

    .likes-container[b-4wc3lfdz2n] {
        display: flex;
        align-items: center;
        gap: 2px;
        transform: scale(0.8);
        transform-origin: left center;
        font-size: 0.8rem;
    }

    /* --- Tooltip for emails --- */
    .tooltip[b-4wc3lfdz2n] {
        max-height: 140px;
        overflow-y: auto;
        font-size: 0.65rem;
        padding: 4px 8px;
    }

    .tooltip-link[b-4wc3lfdz2n] {
        font-size: 0.65rem;
        line-height: 1.2;
        margin-bottom: 3px;
        display: block;
    }

    /* --- Buttons --- */
    .viewItem[b-4wc3lfdz2n] {
        font-size: 0.65rem;
        padding: 4px 8px;
        border-radius: 4px;
    }

    footer.card-footer .btn[b-4wc3lfdz2n],
    footer.card-footer .viewItem[b-4wc3lfdz2n] {
        font-size: 0.70rem !important; /* !important forces override */
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }

    .footer-middle[b-4wc3lfdz2n] {
        gap: 6px; /* Reduce the gap on mobile */
    }

    .user-icon[b-4wc3lfdz2n] {
        font-size: 10px; /* Ensure icon size is responsive */

        padding-left: 0px;
    }

    .user-email[b-4wc3lfdz2n] {
        font-size: 0.5rem; /* Adjust font size for better mobile alignment */
        font-weight: 500;
        max-width: 40%;
    }

    .profile-icon-text-link i[b-4wc3lfdz2n] {
        font-size: 0.7rem; /* Adjust profile icon size */
    }
}


/* Ultra small (iPhone X/SE) */
/* --- MOBILE FIXES: Ultra small screens (iPhone SE, ≤380px) --- */
@media (max-width: 380px) {

    /* User image carousel */
    .user-image-carousel[b-4wc3lfdz2n] {
        width: 70%;
        max-width: 200px;
        height: auto;
    }

        .user-image-carousel img[b-4wc3lfdz2n] {
            width: 100%;
            height: auto;
        }

    /* Item title and description */
    .item-title[b-4wc3lfdz2n] {
        font-size: 0.65rem;
        text-align: center;
        font-weight: bold;
        color: #555;
        margin-bottom: 0.15rem;
    }

    .item-description[b-4wc3lfdz2n] {
        font-size: 0.58rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.3rem;
        line-height: 1.2;
        text-align: center;
    }

    /* Footer adjustments */
    footer.card-footer[b-4wc3lfdz2n] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 6px 8px;
        gap: 4px;
        font-size: 0.55rem;
    }

    .footer-info[b-4wc3lfdz2n] {
        display: flex;
        flex-direction: column;
        gap: 3px;
        width: 100%;
    }

    .footer-item[b-4wc3lfdz2n] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px;
    }

        .footer-item span[b-4wc3lfdz2n] {
            font-size: 0.55rem;
            word-break: break-word;
        }

    /* Profile icon + email */
    .profile-icon-text-link[b-4wc3lfdz2n] {
        display: flex;
        align-items: center;
        margin-left: 0;
        margin-top: 4px;
        font-size: 0.55rem;
    }

        .profile-icon-text-link i[b-4wc3lfdz2n] {
            font-size: 0.6rem;
            margin-right: 3px;
        }


    .likes-container[b-4wc3lfdz2n] {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        transform: scale(0.7);
        transform-origin: left center;
    }

    .tooltip[b-4wc3lfdz2n] {
        position: absolute;
        bottom: 110%; /* above the like icon */
        left: 50%;
        transform: translateX(-50%);
        max-height: 120px;
        overflow-y: auto;
        font-size: 0.6rem;
        background-color: rgba(0,0,0,0.9);
        color: #fff;
        border-radius: 6px;
        padding: 4px 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        z-index: 1000;
        white-space: normal;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .likes-container:hover .tooltip[b-4wc3lfdz2n] {
        visibility: visible;
        opacity: 1;
    }

    .tooltip-link[b-4wc3lfdz2n] {
        display: block;
        font-size: 0.55rem;
        color: #dcdcdc;
        text-decoration: none;
        margin-bottom: 4px;
        font-weight: 500;
    }

        .tooltip-link:hover[b-4wc3lfdz2n] {
            color: #64b5f6;
            text-decoration: underline dotted;
            font-weight: 600;
            transform: scale(1.02);
        }

    /* Buttons */
    footer.card-footer .btn[b-4wc3lfdz2n],
    footer.card-footer .viewItem[b-4wc3lfdz2n] {
        font-size: 0.40rem !important; /* !important forces override */
        padding: 10px 12px !important;
        border-radius: 4px !important;
    }

    /* Reduce extra spacing for email + date */
    .viewItememailDate[b-4wc3lfdz2n] {
        font-size: 0.5rem;
        padding: 2px 4px;
        margin: 0;
    }


    .no-gap-footer-middle[b-4wc3lfdz2n] {
        margin-left: 0;
    }
}
/* /Pages/UserPrivateList.razor.rz.scp.css */

.popconfirm[b-0kphfwz0gj] {
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: lightblue;
    width: 230px;
    padding: 15px;
    border-radius: 25px;
    z-index: 1050; /* Ensure it is on top of other elements */
    position: absolute; /* Positioned relative to its nearest positioned ancestor */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}



body[b-0kphfwz0gj] {
    background: transparent;
    margin: 0; /* Remove default margin */
    min-height: 100vh; /* Ensure body takes the full height of the viewport */
}

.main-content[b-0kphfwz0gj] {
    background-color: white; /* Ensure main content area blends with the background */
    min-height: 100vh; /* Full height for main content */
    padding-bottom: 20px; /* Optional padding at the bottom */
}

/* USER LIST TABLE */
.user-list tbody td > img[b-0kphfwz0gj] {
    position: relative;
    max-width: 50px;
    float: left;
    margin-right: 15px;
}

.user-list tbody td .user-link[b-0kphfwz0gj] {
    display: block;
    font-size: 1.25em;
    padding-top: 3px;
    margin-left: 60px;
}

.user-list tbody td .user-subhead[b-0kphfwz0gj] {
    font-size: 0.875em;
    font-style: italic;
}


/* booking header emails groupe */
.email-header[b-0kphfwz0gj] {
    background-color: lightskyblue; /* soft gray */
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 10px 19px;
    margin: 12px 6px 8px 6px; /* ⬅ adds small gap left/right */
    font-weight: 600;
    font-size: 1rem;
    color: black;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 30vw;
    justify-content: center;
}


    .email-header[b-0kphfwz0gj]::before {
        content: "📧";
        font-size: 1.1rem;
    }




/* TABLES */
.table[b-0kphfwz0gj] {
    border-collapse: separate;
    border-spacing: 2px 10px; /* 0px horizontal, 10px vertical spacing */
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Visible soft shadow */
}



    .table thead > tr > th[b-0kphfwz0gj] {
        border-bottom: 1px solid #C2C2C2;
        padding-bottom: 0;
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Visible soft shadow */
        background-color: white;
    }

    .table tbody > tr > td[b-0kphfwz0gj] {
        font-size: 0.875em;
        background: #f5f5f5;
        vertical-align: middle;
        padding: 1px 26px; /* Increase the padding for more space inside each cell */

        border-radius: 0 0 0 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Visible soft shadow */
    }


        .table tbody > tr > td:hover[b-0kphfwz0gj] {
            background-color: turquoise;
        }

        .table tbody > tr > td:first-child[b-0kphfwz0gj],
        .table thead > tr > th:first-child[b-0kphfwz0gj] {
            padding-left: 20px;
        }

    .table thead > tr > th span[b-0kphfwz0gj] {
        display: inline-block;
        padding: 0 5px;
        padding-bottom: 5px;
        font-weight: normal;
    }

    .table thead > tr > th > a span[b-0kphfwz0gj] {
        color: #344644;
    }

        .table thead > tr > th > a span[b-0kphfwz0gj]:after {
            content: "\f0dc";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            margin-left: 5px;
            font-size: 0.75em;
        }

    .table thead > tr > th > a.asc span[b-0kphfwz0gj]:after {
        content: "\f0dd";
        margin-bottom: 10px;
    }



    .table thead > tr > th > a:hover span[b-0kphfwz0gj] {
        text-decoration: none;
        color: #2bb6a3;
        border-color: #2bb6a3;
    }

    .table.table-hover tbody > tr > td[b-0kphfwz0gj] {
        -webkit-transition: background-color 0.15s ease-in-out 0s;
        transition: background-color 0.15s ease-in-out 0s;
    }

    .table tbody tr td .call-type[b-0kphfwz0gj] {
        display: block;
        font-size: 0.75em;
        text-align: center;
    }

    .table tbody tr td .first-line[b-0kphfwz0gj] {
        line-height: 1.5;
        font-weight: 400;
        font-size: 1.125em;
    }

        .table tbody tr td .first-line span[b-0kphfwz0gj] {
            font-size: 0.875em;
            color: #969696;
            font-weight: 300;
        }

    .table tbody tr td .second-line[b-0kphfwz0gj] {
        font-size: 0.875em;
        line-height: 1.2;
    }

    .table a.table-link[b-0kphfwz0gj] {
        margin: 0 5px;
        font-size: 1.125em;
    }

        .table a.table-link:hover[b-0kphfwz0gj] {
            text-decoration: none;
            color: #2aa493;
        }

        .table a.table-link.danger[b-0kphfwz0gj] {
            color: #fe635f;
        }

            .table a.table-link.danger:hover[b-0kphfwz0gj] {
                color: #dd504c;
            }

.table-products tbody > tr > td[b-0kphfwz0gj] {
    background: none;
    border: none;
    border-bottom: 1px solid #ebebeb;
    -webkit-transition: background-color 0.15s ease-in-out 0s;
    transition: background-color 0.15s ease-in-out 0s;
    position: relative;
}

.table-products tbody > tr:hover > td[b-0kphfwz0gj] {
    text-decoration: none;
    background-color: #f6f6f6;
}

.table-products .name[b-0kphfwz0gj] {
    display: block;
    font-weight: 600;
    padding-bottom: 7px;
}

.table-products .price[b-0kphfwz0gj] {
    display: block;
    text-decoration: none;
    width: 50%;
    float: left;
    font-size: 0.875em;
}

    .table-products .price > i[b-0kphfwz0gj] {
        color: #8dc859;
    }

.table-products .warranty[b-0kphfwz0gj] {
    display: block;
    text-decoration: none;
    width: 50%;
    float: left;
    font-size: 0.875em;
}

    .table-products .warranty > i[b-0kphfwz0gj] {
        color: #f1c40f;
    }

.table tbody > tr.table-line-fb > td[b-0kphfwz0gj] {
    background-color: #9daccb;
    color: #262525;
}

.table tbody > tr.table-line-twitter > td[b-0kphfwz0gj] {
    background-color: #9fccff;
    color: #262525;
}

.table tbody > tr.table-line-plus > td[b-0kphfwz0gj] {
    background-color: #eea59c;
    color: #262525;
}

.table-stats .status-social-icon[b-0kphfwz0gj] {
    font-size: 1.9em;
    vertical-align: bottom;
}

.table-stats .table-line-fb .status-social-icon[b-0kphfwz0gj] {
    color: #556484;
}

.table-stats .table-line-twitter .status-social-icon[b-0kphfwz0gj] {
    color: #5885b8;
}

.table-stats .table-line-plus .status-social-icon[b-0kphfwz0gj] {
    color: #a75d54;
}


/* backgroundNotAut START */
.modal-overlay[b-0kphfwz0gj] {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; /* Fixed positioning to fill the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.8); /* Dark transparent background */
    z-index: 1000; /* Ensure it appears above everything else */
    color: white; /* Text color set to white */
}

/* Centered modal content */
.backgroundNotAut[b-0kphfwz0gj] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    text-align: center;
    font-size: 30px;
    background-color: rgba(10, 10, 10, 0.8); /* Optional: You can adjust this background */
    padding: 20px;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1010; /* Ensure the modal content is above the dark background */
    color: white; /* Text color set to white */
}
/* backgroundNotAut END */





@media (max-width: 768px) {
    [b-0kphfwz0gj] .responsive-grid,
    [b-0kphfwz0gj] .modern-grid {
        padding: 4px !important;
        font-size: 0.7rem !important;
    }

        [b-0kphfwz0gj] .responsive-grid .mud-data-grid-cell,
        [b-0kphfwz0gj] .modern-grid .mud-data-grid-cell,
        [b-0kphfwz0gj] .responsive-grid .mud-table-cell,
        [b-0kphfwz0gj] .modern-grid .mud-table-cell {
            padding: 2px 4px !important;
            font-size: 0.65rem !important;
            line-height: 1.1rem !important;
        }

        [b-0kphfwz0gj] .responsive-grid .mud-typography,
        [b-0kphfwz0gj] .modern-grid .mud-typography,
        [b-0kphfwz0gj] .responsive-grid .mud-text,
        [b-0kphfwz0gj] .modern-grid .mud-text {
            font-size: 0.65rem !important;
            line-height: 1.1rem !important;
        }

        [b-0kphfwz0gj] .responsive-grid .mud-text-field-input-control,
        [b-0kphfwz0gj] .modern-grid .mud-text-field-input-control {
            font-size: 0.65rem !important;
            padding: 2px 4px !important;
        }

        [b-0kphfwz0gj] .responsive-grid .mud-icon-button,
        [b-0kphfwz0gj] .modern-grid .mud-icon-button {
            padding: 2px !important;
            margin: 0 1px !important;
            font-size: 0.7rem !important;
            min-width: unset !important;
            width: auto !important;
        }

        [b-0kphfwz0gj] .responsive-grid .mud-data-grid-pager,
        [b-0kphfwz0gj] .modern-grid .mud-data-grid-pager {
            font-size: 0.65rem !important;
            gap: 2px !important;
            padding: 2px !important;
        }

        /* Optionally reduce avatar sizes */
        [b-0kphfwz0gj] .responsive-grid .mud-avatar-root,
        [b-0kphfwz0gj] .modern-grid .mud-avatar-root {
            width: 24px !important;
            height: 24px !important;
        }

    /* Make action buttons smaller and tighter */
    [b-0kphfwz0gj] .booking-info a.btn,
    [b-0kphfwz0gj] .booking-info button {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    /* Make the Show/Hide Bookings button smaller */
    [b-0kphfwz0gj] .modern-grid .mud-button-root {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
        min-width: unset !important;
    }
}


/* Base style: horizontal on larger screens */
.booking-entry[b-0kphfwz0gj] {
    display: flex;
    flex-direction: column;
    gap: 8px; /* reduce gap */
    padding: 8px; /* reduce padding */
    border: 1px solid #ddd;
    border-radius: 6px; /* slightly smaller radius */
    margin-bottom: 10px; /* smaller margin */
    width: 100%;
    box-sizing: border-box;
}

.booking-meta[b-0kphfwz0gj] {
    font-size: 13px; /* a bit smaller */
    word-break: break-word;
    line-height: 1.3; /* tighter line height */
}



/* Adjust the overall container for the buttons */
.booking-actions[b-0kphfwz0gj] {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 6px; /* Slight space between buttons */
    padding: 6px; /* Add padding inside the container */
    font-size: 0.75rem; /* Smaller font for buttons */
    margin-top: 8px; /* Add some space at the top */
    width: 100%; /* Ensure the container spans the full width */
}

    /* Style buttons to make them full width and stacked */
    .booking-actions .btn[b-0kphfwz0gj] {
        width: 100%; /* Make the buttons full width */
        font-size: 0.75rem; /* Smaller font size */
        padding: 8px 16px; /* Adjust padding for a more compact button */
        margin: 0; /* Remove any additional margin */
        border-radius: 4px; /* Add some border radius for rounded edges */
        text-align: center; /* Ensure text is centered inside the button */
        display: block; /* Ensure button stretches across the container */
    }



/* ✅ Apply ONLY on small or narrow screens (mobile view) */
@media (max-width: 700px) {
    .email-group[b-0kphfwz0gj] {
        margin-top: 10px;
    
    }

    .email-header[b-0kphfwz0gj] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px; /* smaller text */
        padding: 6px 10px;
    /*    background-color: #f8f9fa;*/
        border-radius: 8px;
    }

        .email-header span[b-0kphfwz0gj] {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 85%; /* prevent long emails from breaking layout */
        }

            /* Optional: Make the ▲▼ icon smaller and aligned */
            .email-header span:last-child[b-0kphfwz0gj] {
                font-weight: bold;
                font-size: 16px;
                margin-left: 5px;
            }

    /* Optional: stack booking details better for mobile */
    .booking-entry[b-0kphfwz0gj] {
        padding: 10px;
        font-size: 13px;
    }


    .booking-actions .btn[b-0kphfwz0gj] {
        font-size: 0.65rem; /* Further reduce font size on small screens */
        padding: 6px 12px; /* Adjust padding for smaller buttons */
    }
}



/* optional: slightly larger on desktop */
/* /Shared/AutoHideSidebar.razor.rz.scp.css */
.container[b-6u9xvrld3j] {
    background: #253529;
    width: 6rem;
    height: 100vh;
    position: fixed;
    transition: width 0.3s ease, transform 0.3s ease;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden; /* Hide scrollbar */
}

.expand[b-6u9xvrld3j] {
    width: 14rem;
}

.collapse[b-6u9xvrld3j] {
    width: 1rem;
}

.auto-hiding-nav-menu[b-6u9xvrld3j] {
    display: flex;
    flex-direction: column;
    align-items: normal;
    background-color:turquoise;
    color: #fff;
    padding: 1rem;
    top: 0;
    left: 0;
    height: 100vh;
    overflow: hidden; /* Hide scrollbar initially */
    transition: top 0.2s ease, height 0.2s ease, flex-direction 0.2s ease, width 0.3s ease; /* Added transition for flex-direction */
}

.nav-menu[b-6u9xvrld3j] {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide scrollbar */
    margin-top:140px;

}



.nav-item-text[b-6u9xvrld3j] {
    visibility: hidden;
    position: absolute;
    margin-left: 0.5rem;

    font-size: 16px;
    margin-top: 4px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: left center;
    width: auto;
    color: white;
}

.expand .nav-item-text[b-6u9xvrld3j] {
    visibility: visible;
    opacity: 1; /* Full opacity for visibility */
    width: 100%;
    white-space: pre-wrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    font-size:12px;
}

.nav-item[b-6u9xvrld3j] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.nav-item-icon[b-6u9xvrld3j] {
    color: white;
    font-size: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: left center;
    margin-bottom: 5px;
}

.nav-link:hover .nav-item-icon[b-6u9xvrld3j] {
    color: #DAF7A6;
    transform: scale(1.2);
}

.nav-link:hover .nav-item-text[b-6u9xvrld3j] {
    opacity: 1;
    transform: scale(1.2);
    color: #DAF7A6;
}

.nav-link > *[b-6u9xvrld3j] {
    align-self: flex-start;
}
.image[b-6u9xvrld3j]{


}




/* Adjustments for smaller screens */
@media (max-width: 600px) {
    .container[b-6u9xvrld3j] {
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
        overflow: hidden; /* Hide scrollbar */
        transition: width 0.2s ease, transform 0.2s ease;
    }

    .auto-hiding-nav-menu[b-6u9xvrld3j] {
        align-items: center; /* Center items vertically */
        height: auto;
        width: 100%;
        position: relative;
        max-height: none;
        overflow-y: hidden; /* Hide vertical scrollbar */
        overflow-x: hidden; /* Allow horizontal scrolling */
        flex-direction: row;
        transition: flex-direction 0.2s ease, height 0.2s ease;
        padding: 5px; /* Remove padding for compact layout */
    }

    .nav-menu[b-6u9xvrld3j] {
        flex-direction: row;
        overflow-x: hidden; /* Allow horizontal scrolling */
        overflow-y: hidden; /* Hide vertical scrollbar */
        margin-top: 0; /* Remove the margin-top on smaller screens */
        white-space: nowrap; /* Ensure items stay in a single line */
    }

    .nav-item-icon[b-6u9xvrld3j] {
        font-size: 14px; /* Smaller icon size for small screens */
        margin-bottom: 2px; /* Further reduced margin */
    }

    .nav-item-text[b-6u9xvrld3j] {
        display: none;
    }

    .nav-link:hover .nav-item-text[b-6u9xvrld3j] {
        display: block;
        font-size: 7px;
    }

    /* Prevent expanding in top position */
    .expand[b-6u9xvrld3j], .collapse[b-6u9xvrld3j] {
        width: auto !important;
    }
}



.oi[b-6u9xvrld3j] {
    color: white;
}

.orange[b-6u9xvrld3j] {
    color: orange;
}

.lightblue[b-6u9xvrld3j] {
    color: darkturquoise;
}

.transition-class[b-6u9xvrld3j] {
    transition: property duration timing-function delay;
}



/* /Shared/MainLayout.razor.rz.scp.css */

main[b-nkgpwh0jgr] {
    flex: 1;
    /*main page color!*/
    background-color: #f9f9f9;
    color: #111;
    overflow: hidden;
    margin: 0;
}


/* Page container */
.page[b-nkgpwh0jgr] {
    display: flex; /* Default: Row layout for larger screens */
    min-height: 100vh; /* Ensure the page takes the full viewport height */
}



#myBtn[b-nkgpwh0jgr] {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 140px; /* Place the button at the bottom of the page */
    right: 7px; /* Place the button 7px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: orange; /* Set a background color */
    color: black; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Smaller padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 14px; /* Smaller font size */
}


    #myBtn:hover[b-nkgpwh0jgr] {
        background-color: #555; /* Add a dark-grey background on hover */
    }


@keyframes marquee-b-nkgpwh0jgr {
    0% {
        left: 100%;
    }
    /* Start off-screen to the right */
    100% {
        left: -100%;
    }
    /* Move completely off-screen to the left */
}


/*************footer End*****************/

body[b-nkgpwh0jgr] {
    background: #fbfbfd;
}

.new_footer_area[b-nkgpwh0jgr] {
    background: #fbfbfd;
}


.new_footer_top[b-nkgpwh0jgr] {
    padding: 120px 0px 270px;
    position: relative;
    overflow-x: hidden;
}

.new_footer_area .footer_bottom[b-nkgpwh0jgr] {
    padding-top: 5px;
    padding-bottom: 50px;
}

.footer_bottom[b-nkgpwh0jgr] {
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #7f88a6;
    padding: 27px 0px;
}

.new_footer_top .company_widget p[b-nkgpwh0jgr] {
    font-size: 16px;
    font-weight: 300;
    line-height: 28px;
    color: #6a7695;
    margin-bottom: 20px;
}

.new_footer_top .company_widget .f_subscribe_two .btn_get[b-nkgpwh0jgr] {
    border-width: 1px;
    margin-top: 20px;
}

.btn_get_two:hover[b-nkgpwh0jgr] {
    background: transparent;
    color: #5e2ced;
}

.btn_get:hover[b-nkgpwh0jgr] {
    color: #fff;
    background: #6754e2;
    border-color: #6754e2;
    -webkit-box-shadow: none;
    box-shadow: none;
}

a:hover[b-nkgpwh0jgr], a:focus[b-nkgpwh0jgr], .btn:hover[b-nkgpwh0jgr], .btn:focus[b-nkgpwh0jgr], button:hover[b-nkgpwh0jgr], button:focus[b-nkgpwh0jgr] {
    text-decoration: none;
    outline: none;
}


.new_footer_top .f_widget.about-widget .f_list li a:hover[b-nkgpwh0jgr] {
    color: #5e2ced;
}

.new_footer_top .f_widget.about-widget .f_list li[b-nkgpwh0jgr] {
    margin-bottom: 11px;
}

.f_widget.about-widget .f_list li:last-child[b-nkgpwh0jgr] {
    margin-bottom: 0px;
}

.f_widget.about-widget .f_list li[b-nkgpwh0jgr] {
    margin-bottom: 15px;
}

.f_widget.about-widget .f_list[b-nkgpwh0jgr] {
    margin-bottom: 0px;
}



.new_footer_top .f_social_icon a[b-nkgpwh0jgr] {
    width: 44px;
    height: 44px;
    line-height: 43px;
    background: transparent;
    border: 1px solid #e2e2eb;
    font-size: 24px;
}

.f_social_icon[b-nkgpwh0jgr] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
}


.f_social_icon a[b-nkgpwh0jgr] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 45px;
    color: #858da8;
    display: inline-block;
 
    background: #ebeef5;
    text-align: center;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.ti-facebook[b-nkgpwh0jgr]:before {
    content: "\e741";
}

.ti-twitter-alt[b-nkgpwh0jgr]:before {
    content: "\e74b";
}

.ti-vimeo-alt[b-nkgpwh0jgr]:before {
    content: "\e74a";
}

.ti-pinterest[b-nkgpwh0jgr]:before {
    content: "\e731";
}

.btn_get_two[b-nkgpwh0jgr] {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #5e2ced;
    border-color: #5e2ced;
    color: #fff;
}

    .btn_get_two:hover[b-nkgpwh0jgr] {
        background: transparent;
        color: #5e2ced;
    }

.new_footer_top .f_social_icon a:hover[b-nkgpwh0jgr] {
    background: #5e2ced;
    border-color: #5e2ced;
    color: white;
}

.new_footer_top .f_social_icon a + a[b-nkgpwh0jgr] {
    margin-left: 4px;
}

.new_footer_top .f-title[b-nkgpwh0jgr] {
    margin-bottom: 30px;
    color: #263b5e;
}

.f_600[b-nkgpwh0jgr] {
    font-weight: 600;
}

.f_size_18[b-nkgpwh0jgr] {
    font-size: 18px;
}

h1[b-nkgpwh0jgr], h2[b-nkgpwh0jgr], h3[b-nkgpwh0jgr], h4[b-nkgpwh0jgr], h5[b-nkgpwh0jgr], h6[b-nkgpwh0jgr] {
    color: #4b505e;
}

.new_footer_top .f_widget.about-widget .f_list li a[b-nkgpwh0jgr] {
    color: #6a7695;
}


.new_footer_top .footer_bg[b-nkgpwh0jgr] {
    position: absolute;
    bottom: 0;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") no-repeat scroll center 0;
    width: 100%;
    height: 266px;
}

    .new_footer_top .footer_bg .footer_bg_one[b-nkgpwh0jgr] {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0PYPxwT5ifToyP3SNZeQWfJEWrUENYA5IXM6sN5vLwAKvaJS1pQVu8mOFFUa_ET4JuHNTFAxKURFerJYHDUWXLXl1vDofYXuij45JZelYOjEFoCOn7E6Vxu0fwV7ACPzArcno1rYuVxGB7JY6G7__e4_KZW4lTYIaHSLVaVLzklZBLZnQw047oq5-Q/s16000/volks.gif") no-repeat center center;
        width: 330px;
        height: 105px;
        background-size: 100%;
        position: absolute;
        bottom: 0;
        left: 30%;
        -webkit-animation: myfirst 22s linear infinite;
        animation: myfirst-b-nkgpwh0jgr 22s linear infinite;
    }

    .new_footer_top .footer_bg .footer_bg_two[b-nkgpwh0jgr] {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyLGwEUVwPK6Vi8xXMymsc-ZXVwLWyXhogZxbcXQYSY55REw_0D4VTQnsVzCrL7nsyjd0P7RVOI5NKJbQ75koZIalD8mqbMquP20fL3DxsWngKkOLOzoOf9sMuxlbyfkIBTsDw5WFUj-YJiI50yzgVjF8cZPHhEjkOP_PRTQXDHEq8AyWpBiJdN9SfQA/s16000/cyclist.gif") no-repeat center center;
        width: 88px;
        height: 100px;
        background-size: 100%;
        bottom: 0;
        left: 38%;
        position: absolute;
        -webkit-animation: myfirst 30s linear infinite;
        animation: myfirst-b-nkgpwh0jgr 30s linear infinite;
    }


@-moz-keyframes myfirst {
    0% {
        left: -25%;
    }

    100% {
        left: 100%;
    }
}

@-webkit-keyframes myfirst {
    0% {
        left: -25%;
    }

    100% {
        left: 100%;
    }
}

@keyframes myfirst-b-nkgpwh0jgr {
    0% {
        left: -25%;
    }

    100% {
        left: 100%;
    }
}

/*************footer End*****************/

/* Header */
:root[b-nkgpwh0jgr] {
    --primary-color: #1a79cf;
    --text-light: #fff;
    --accent-color: #ff9800;
    --hover-bg: rgba(255, 255, 255, 0.15);
}

*[b-nkgpwh0jgr] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body[b-nkgpwh0jgr] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.modern-header[b-nkgpwh0jgr] {
    background-color: var(--primary-color);
    padding: 1.2rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo[b-nkgpwh0jgr] {
    /*position: fixed;*/ /* Fix the logo in place */
    top: 0; /* Align it to the top */
    left: 0; /* Align it to the left */
    display: flex;
    justify-content: flex-start; /* Align the logo to the left */
    align-items: center;
    position: absolute;
    /*    top: 60px;
    left: 5px;*/
    display: flex;
    /*    align-items: center;*/
    gap: 15px;
    z-index: 100;
}


.nav-bar[b-nkgpwh0jgr] {
    display: flex;
    justify-content: center; /* center nav links horizontally */
    align-items: center; /* vertical align */
    gap: 20px; /* space between links */
    flex-wrap: wrap; /* wrap on small screens */
}

    .nav-bar a[b-nkgpwh0jgr] {
        color: var(--text-light);
        text-decoration: none;
        font-size: 1rem;
        padding: 0.5rem 0.8rem;
        border-radius: 6px;
        transition: background-color 0.3s;
    }

        .nav-bar a:hover[b-nkgpwh0jgr],
        .nav-bar .active[b-nkgpwh0jgr] {
            background-color: var(--hover-bg);
        }

.header-right[b-nkgpwh0jgr] {
    display: flex;
    align-items: center;
    gap: 1rem;
}



.menu-icon[b-nkgpwh0jgr] {
    display: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}


/*Language box */
.top-right-icons-fixed[b-nkgpwh0jgr] {
    position: absolute;
    top: 60px;
    right: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 100;
}


.language-icon-wrapper[b-nkgpwh0jgr] {
    position: relative;
    width: 40px; /* Match button width */
    min-width: 40px;
}


.lang-button[b-nkgpwh0jgr] {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white;
    width: 40px; /* Fixed width */
    height: 40px; /* Optional */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* So dropdown can position from here */
}

.lang-dropdown[b-nkgpwh0jgr] {
    position: absolute;
    top: 30px;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

    .lang-dropdown img[b-nkgpwh0jgr] {
        width: 20px;
        height: 14px;
        cursor: pointer;
    }


/* Optional: Add hover effect to headings for interactive feel */
h1:hover[b-nkgpwh0jgr] {
    color: gray; /* Change color on hover */
    transition: color 0.3s ease-in-out; /* Smooth transition */
}


.nav-link .nav-item-text[b-nkgpwh0jgr] {
    color: black; /* Default link color */
    text-decoration: none; /* Remove underline if needed */
}

    .nav-link .nav-item-text:hover[b-nkgpwh0jgr] {
        color: darkgray; /* Optional hover color */
    }

.nav-link.active[b-nkgpwh0jgr] {
    color: black; /* Active link color */
    font-weight: bold; /* Optional, to emphasize active */
}

/**/
.sign-in-btn[b-nkgpwh0jgr], .home-icon[b-nkgpwh0jgr] {
    background-color: #1a79cf;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .sign-in-btn:hover[b-nkgpwh0jgr], home-icon[b-nkgpwh0jgr] {
        background-color: dodgerblue;
    }


.register-link[b-nkgpwh0jgr] {
    color: #1a79cf;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 0.6rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .register-link:hover[b-nkgpwh0jgr] {
        background-color: white;
        color: black;
        text-decoration: none;
    }

.nav-link.active[b-nkgpwh0jgr] {
    color: orange; /* Or whatever your active color is */
    font-weight: bold;
}

.nav-link .nav-item-text[b-nkgpwh0jgr] {
    color: black; /* Normal text color */
}

.nav-link.active .nav-item-text[b-nkgpwh0jgr] {
    color: orange; /* Active text color */
}

.admin-btn[b-nkgpwh0jgr] {
    padding: 0.6rem 0.4rem;
    background-color: #d32f2f;
    color: white;
    font-weight: bold;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    min-width: auto; /* no fixed width */
    white-space: normal;
    text-align: center;
}

    .admin-btn:hover[b-nkgpwh0jgr] {
        background-color: #b71c1c;
    }

/* Mobile nav toggle class */
.menu-toggle[b-nkgpwh0jgr] {
    display: none;
    font-size: 1.8rem;
    color: black;
    cursor: pointer;
}

.nav-wrapper[b-nkgpwh0jgr] {
    /*    display: flex;*/
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    /*    width: 100%;*/
    /*gap: 1rem;*/
}

.nav-bar[b-nkgpwh0jgr] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    white-space: nowrap;
    flex: 1; /* take up available space */
}

.nav-link[b-nkgpwh0jgr] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px; /* prevent crazy-wide items */
}


.auth-actions[b-nkgpwh0jgr] {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    Prevent wrapping of text inside overflow: hidden;
    Hide overflow if content exceeds flex-wrap: wrap;
    Allow wrapping if needed justify-content: center;
    Center the content flex-shrink: 1;
    Allow shrinking of the items font: 1rem;
}



/*//Cookies*/
/* Add to your site.css or in <style> */
#cookie-banner[b-nkgpwh0jgr] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: lightgray;
    color: white;
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    z-index: 2000;
}

    #cookie-banner button[b-nkgpwh0jgr] {
        margin-left: 10px;
        background: #2563eb;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
    }

.logout-icon[b-nkgpwh0jgr] {
    display: none;
}


.kofi-img[b-nkgpwh0jgr] {
    height: 30px; /* desktop */
}


@media (max-width: 768px) {
    /* Hide the navbar by default and adjust for mobile layout */
    .nav-bar[b-nkgpwh0jgr] {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--primary-color);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .menu-icon[b-nkgpwh0jgr] {
        display: inline;
    }

    .nav-bar.show[b-nkgpwh0jgr] {
        display: flex;
    }

    /* Adjust the auth buttons to be smaller and aligned */
    .auth-actions[b-nkgpwh0jgr] {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }

    .sign-in-btn[b-nkgpwh0jgr] {
        background-color: #1a79cf;
        color: white;
        border: none;
        font-size: 0.8rem; /* Smaller font size */
        border-radius: 5px;
        text-align: center;
        padding: 6px 12px; /* Smaller padding */
    }

        .sign-in-btn:hover[b-nkgpwh0jgr] {
            background-color: white;
            color: #1a79cf;
        }

    .register-link[b-nkgpwh0jgr] {
        font-size: 0.8rem; /* Smaller font size */
        padding: 0.3rem 0.6rem; /* Smaller padding */
        text-align: center;
        width: 80%;
        max-width: 280px; /* Reduced width */
    }

    .menu-toggle[b-nkgpwh0jgr] {
        display: block;
        position: absolute;
        top: 1.5rem;
        right: 1.2rem; /* Adjust right margin */
        z-index: 1001;
        font-size: 1.4rem; /* Smaller icon size */
    }

    /* Footer adjustments */
    .new_footer_top[b-nkgpwh0jgr] {
        padding: 50px 10px 80px !important; /* Reduced padding */
        text-align: center;
    }

        .new_footer_top .f_widget[b-nkgpwh0jgr] {
            margin-bottom: 20px !important; /* Reduced margin */
            width: 100% !important;
            max-width: 100% !important;
        }

        .new_footer_top .f-title[b-nkgpwh0jgr] {
            font-size: 1rem !important; /* Smaller font size */
            margin-bottom: 12px !important; /* Reduced margin */
        }

        .new_footer_top .company_widget p[b-nkgpwh0jgr],
        .new_footer_top .f_widget.about-widget .f_list li a[b-nkgpwh0jgr] {
            font-size: 0.8rem !important; /* Smaller font size */
        }

        /* Adjust social media icon size and spacing */
        .new_footer_top .f_social_icon[b-nkgpwh0jgr] {
            text-align: center !important;
        }

            .new_footer_top .f_social_icon a[b-nkgpwh0jgr] {
                width: 30px !important;
                height: 30px !important;
                line-height: 30px !important;
                font-size: 14px !important; /* Smaller icon size */
                margin: 0 5px !important; /* Reduced margin */
            }

    .footer_bottom[b-nkgpwh0jgr] {
        padding: 12px 8px !important; /* Reduced padding */
        font-size: 11px !important; /* Smaller font size */
        text-align: center;
    }

    /* Hide footer background animations on small screens */
    .new_footer_top .footer_bg[b-nkgpwh0jgr],
    .new_footer_top .footer_bg .footer_bg_one[b-nkgpwh0jgr],
    .new_footer_top .footer_bg .footer_bg_two[b-nkgpwh0jgr] {
        display: none !important;
    }

    /* Adjust sign-in button for mobile */
    .sign-in-btn[b-nkgpwh0jgr], .home-icon[b-nkgpwh0jgr] {
        padding: 5px 12px; /* Smaller padding */
        font-size: 0.75rem; /* Smaller font size */
        border-radius: 5px;
    }

        /* Show icon only for the logout button */
        .sign-in-btn .logout-text[b-nkgpwh0jgr] {
            display: none;
        }

        .sign-in-btn .logout-icon[b-nkgpwh0jgr] {
            display: inline-block;
        }

    /* Auth button layout adjustment */
    .auth-actions[b-nkgpwh0jgr] {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px; /* Reduced gap */
    }

    .kofi-img[b-nkgpwh0jgr] {
        height: 18px !important;
    }

    .f_social_icon[b-nkgpwh0jgr] {
        display: flex;
        justify-content: center;
        gap: 10px; /* space between icons */
    }
}






/* For devices with very small screens like iPhone 4, iPhone 5, Galaxy S5, etc. */
@media (max-width: 360px) {

    /* Adjust Navbar and Icons */
    .nav-bar[b-nkgpwh0jgr] {
        padding: 0.8rem;
        border-radius: 4px;
    }

    .menu-icon[b-nkgpwh0jgr] {
        font-size: 1.2rem; /* Smaller menu icon */
    }

    .nav-bar.show[b-nkgpwh0jgr] {
        display: flex;
    }

    /* Smaller auth action buttons */
    .auth-actions[b-nkgpwh0jgr] {
        flex-direction: column;
        gap: 0.4rem; /* Smaller gap */
    }

    .sign-in-btn[b-nkgpwh0jgr], .home-icon[b-nkgpwh0jgr] {
        font-size: 0.7rem; /* Even smaller font size */
        padding: 5px 10px; /* Smaller padding */
    }

    /* Sign In and Register buttons */
    .sign-in-btn[b-nkgpwh0jgr] {
        font-size: 0.7rem;
        padding: 5px 10px;
    }

    .register-link[b-nkgpwh0jgr] {
        font-size: 0.75rem; /* Smaller font size */
        padding: 0.3rem 0.6rem;
    }

    .menu-toggle[b-nkgpwh0jgr] {
        font-size: 1.2rem; /* Smaller font size for the burger icon */
    }

    /* Adjust footer text and icons */
    .new_footer_top[b-nkgpwh0jgr] {
        padding: 40px 8px 60px !important;
    }

        .new_footer_top .f-title[b-nkgpwh0jgr] {
            font-size: 0.9rem !important; /* Smaller footer title */
        }

        .new_footer_top .company_widget p[b-nkgpwh0jgr],
        .new_footer_top .f_widget.about-widget .f_list li a[b-nkgpwh0jgr] {
            font-size: 0.75rem !important; /* Smaller footer text */
        }

        .new_footer_top .f_social_icon a[b-nkgpwh0jgr] {
            width: 28px !important;
            height: 28px !important;
            font-size: 14px !important; /* Smaller social icons */
            margin: 0 4px !important; /* Reduced margin */
        }

    .footer_bottom[b-nkgpwh0jgr] {
        padding: 10px 6px !important;
        font-size: 10px !important; /* Smaller footer text */
    }

    /* Remove large background from footer */
    .new_footer_top .footer_bg[b-nkgpwh0jgr],
    .new_footer_top .footer_bg .footer_bg_one[b-nkgpwh0jgr],
    .new_footer_top .footer_bg .footer_bg_two[b-nkgpwh0jgr] {
        display: none !important;
    }

    /* Adjust sidebar layout */
    .sidebar[b-nkgpwh0jgr] {
        padding: 0.5rem 0.8rem; /* Less padding */
        height: 50px;
        font-size: 0.9rem;
    }

        .sidebar .home-icon[b-nkgpwh0jgr] {
            font-size: 1.2rem; /* Smaller home icon */
        }

    /* Auth actions */
    .auth-actions[b-nkgpwh0jgr] {
        flex-direction: column;
        gap: 0.3rem; /* Further reduce the gap between buttons */
    }

    .sign-in-btn[b-nkgpwh0jgr], .home-icon[b-nkgpwh0jgr] {
        padding: 4px 8px; /* Even smaller padding */
        font-size: 0.65rem; /* Font size smaller for compactness */
    }

    /* Adjust page text */
    .page[b-nkgpwh0jgr] {
        font-size: 0.85rem; /* Reduce font size for smaller screens */
    }

    /* Reduce menu toggle icon size */
    .menu-toggle[b-nkgpwh0jgr] {
        font-size: 1.2rem;
    }

    /* Adjust page container for narrow screens */
    .container[b-nkgpwh0jgr] {
        width: 100%;
        padding: 10px; /* Make the container smaller */
    }
}

/* Further refine for extremely small screens, like iPhone 4 (320px width) */
@media (max-width: 320px) {

    /* Reduce nav bar padding and fonts even more */
    .nav-bar[b-nkgpwh0jgr] {
        padding: 0.6rem;
        font-size: 0.7rem;
    }

    .sign-in-btn[b-nkgpwh0jgr], .home-icon[b-nkgpwh0jgr] {
        font-size: 0.6rem; /* Font size further reduced */
        padding: 4px 8px; /* Further reduce padding */
    }

    .menu-icon[b-nkgpwh0jgr] {
        font-size: 1.1rem; /* Further reduce size of menu icon */
    }

    .register-link[b-nkgpwh0jgr] {
        font-size: 0.7rem; /* Smaller font size */
    }

    .footer_bottom[b-nkgpwh0jgr] {
        padding: 8px 6px !important;
        font-size: 9px !important;
    }

    /* Make icons and buttons smaller */
    .new_footer_top .f_social_icon a[b-nkgpwh0jgr] {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        margin: 0 4px !important;
    }

    /* Reduce font size for page content */
    .page[b-nkgpwh0jgr] {
        font-size: 0.75rem; /* Smaller font size */
    }

    /* Adjust footer text */
    .new_footer_top .f-widget p[b-nkgpwh0jgr],
    .new_footer_top .f-widget .f_list a[b-nkgpwh0jgr] {
        font-size: 0.7rem !important;
    }

    /* For mobile homepage and menus */
    .menu-toggle[b-nkgpwh0jgr] {
        font-size: 1.1rem; /* Smaller burger menu */
    }

    .auth-actions[b-nkgpwh0jgr] {
        gap: 0.2rem; /* Tighten spacing between buttons */
    }

        .auth-actions .sign-in-btn[b-nkgpwh0jgr] {
            font-size: 0.6rem; /* Even smaller font size */
        }
}


/* Sidebar for very narrow screens (600px and below) */
@media (max-width: 600px) {
    .sidebar[b-nkgpwh0jgr] {
        display: flex;
        flex-direction: row; /* Horizontal layout */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Spread items across */
        background-color: turquoise;
        color: white;
        padding: 0.5rem 1rem; /* Compact padding */
        height: 50px; /* Reduced height */
        overflow: hidden; /* Hide overflow */
        transition: flex-direction 0.2s ease, width 0.3s ease, height 0.2s ease;
    }

    .page[b-nkgpwh0jgr] {
        display: flow; /* Adjust layout for small screens */
    }
}

/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-182s2x7cjl] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-182s2x7cjl] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-182s2x7cjl] {
    font-size: 1.1rem;
}

.oi[b-182s2x7cjl] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
    color:white;
}

/*.nav-link, .nav-link:focus, .nav-link:hover, .nav-link:active {
    color: black !important;*/ /* Text color for nav links */
    /*letter-spacing: 1.6px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/ /* Use system font stack */
    /*line-height: 1.5;*/ /* Adjust the line height as needed */
/*}*/

.nav-item[b-182s2x7cjl] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    color:black;
}

    .nav-item:first-of-type[b-182s2x7cjl] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-182s2x7cjl] {
        padding-bottom: 1rem;
    }

    .nav-item[b-182s2x7cjl]  a {
        color: black;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
/**/
/*.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}*/

/*.nav-item ::deep a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}
*/
@media (min-width: 641px) {
    .navbar-toggler[b-182s2x7cjl] {
        display: none;
    }

    .collapse[b-182s2x7cjl] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}