/* _content/Sarkis.Web/Components/Controls/Header.razor.rz.scp.css */

.logo[b-7uhbrbx3mj] {
    margin-left:2vw;

}

.header-container[b-7uhbrbx3mj] {
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.3s ease; /* Transition for fading effect */
    z-index: 1000; /* Ensures the header is above other content */
}


.navbar-nav .nav-link[b-7uhbrbx3mj] {
    color: #000;
    padding: 8px 15px;
    font-size: 1rem;
    text-transform: uppercase;
}

    .navbar-nav .nav-link:hover[b-7uhbrbx3mj] {
        color: #007bff; /* Change color on hover */
    }



/* Hide the regular navbar links when slide-in menu is active */
.navbar-collapse[b-7uhbrbx3mj] {
    transition: opacity 0.3s ease;
}

 

.slide-in-menu.show ~ .navbar-collapse[b-7uhbrbx3mj] {
    opacity: 0; /* Hide the default navbar links */
    visibility: hidden; /* Ensure they're not clickable */
}

/* Slide-in Menu Styles */
.slide-in-menu[b-7uhbrbx3mj] {
    position: fixed;
    top: 8vh;
    right: -50%; /* Initially hidden off-screen */
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 990; /* Ensure it’s on top of other content */
    overflow-y: auto; /* Scroll if content overflows */
 
}

    /* Show Class for Slide-in Menu */
    .slide-in-menu.show[b-7uhbrbx3mj] {
        right: 0; /* Slide in from the right */
    }

    .slide-in-menu .nav-link[b-7uhbrbx3mj] {
        padding: 15px 20px;
        color: #000;
        font-size: 1.2rem;
        text-align: right; /* Align text to the right */
        display: block; /* Ensure each link takes up the full width */
    }

        .slide-in-menu .nav-link:hover[b-7uhbrbx3mj] {
            background-color: #f8f9fa; /* Light background color on hover */
        }

/* Close Button for Slide-in Menu */
.close-menu[b-7uhbrbx3mj] {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #000;
}

/* Navbar Toggler Styling */
.navbar-toggler[b-7uhbrbx3mj] {
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-toggler-icon[b-7uhbrbx3mj] {
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-width='2' linecap='round' linejoin='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Responsive behavior */
@media (max-width: 767px) {
    .navbar-collapse[b-7uhbrbx3mj] {
        display: none; /* Hide the navbar links on smaller screens */
    }

    .slide-in-menu .nav-link[b-7uhbrbx3mj] {
        font-size: 1.2rem;
    }

    .slide-in-menu .close-menu[b-7uhbrbx3mj] {
        font-size: 30px;
    }
}






/* Overall navbar layout */
.header-container[b-7uhbrbx3mj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px; /* Padding to prevent edge overflow */
    background-color: white;
    border-bottom: 1px solid #ddd;
}

/* Logo container */
.navbar-brand[b-7uhbrbx3mj] {
    flex-shrink: 0;
    margin-right: 20px;
}

/* Navigation links in the center */
.navigation-links[b-7uhbrbx3mj] {
    display: flex;
    justify-content: center;
    gap: 30px; /* Spacing between links */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Right-aligned user info */
.user-info-container[b-7uhbrbx3mj] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
     
}

/* Link styles */
.nav-link[b-7uhbrbx3mj] {
    font-size: 1vw;
    color: black;
    text-decoration: none;
    padding: 5px 10px;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .nav-link:hover[b-7uhbrbx3mj] {
        color: orange;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-container[b-7uhbrbx3mj] {
        flex-wrap: wrap; /* Allows the navbar content to wrap on small screens */
    }

    .user-info-container[b-7uhbrbx3mj] {
        margin-left: 0; /* Reset left margin for small screens */
    }
}

.slide-menu-user-info[b-7uhbrbx3mj] {
    padding: 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid #ccc; /* Optional: Divider between links and user info */
    padding-top: 10px;
}
/* _content/Sarkis.Web/Components/Controls/ListMediaContents.razor.rz.scp.css */


.category-title[b-hsqewdsxbx] {
    font-size: 2.5rem;
    font-family: MyriadPro;
    margin-bottom: 10px;
    vertical-align: central;
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.2s ease;
    margin-right: 0.7vw;
}

    .category-title:hover[b-hsqewdsxbx] {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        transform: scale(1.2);
        transform-origin: center center;
        cursor: pointer;
    }



.horizontal-scroll[b-hsqewdsxbx] {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* Snaps to each video */
    display:flex;

     width: 100%; /* Ensure the container takes full width */
    overflow-x: scroll; /* Allow horizontal scrolling */
    white-space: nowrap; /* Prevent line breaks */
}


    /* Hide scrollbar for a cleaner look */
.horizontal-scroll[b-hsqewdsxbx]::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll[b-hsqewdsxbx] {
    -ms-overflow-style: none; /* For IE and Edge */
    scrollbar-width: none; /* For Firefox */
}


.horizontal-scroll .col-lg-4[b-hsqewdsxbx],
.horizontal-scroll .col-lg-6[b-hsqewdsxbx],
.horizontal-scroll .col-lg-3[b-hsqewdsxbx] {
    flex: 0 0 auto;
    display: inline-block;
    margin-right: 15px; /* Space between tiles */
}


/* Base styles for the highlight video and video tiles */
.position-relative[b-hsqewdsxbx] {
    position: relative; /* Ensures that the absolute positioning of arrows is relative to this element */
}


/* Responsive adjustments */
@media (max-width: 768px) {
  

    .horizontal-scroll .col-lg-4[b-hsqewdsxbx],
    .horizontal-scroll .col-lg-6[b-hsqewdsxbx],
    .horizontal-scroll .col-lg-3[b-hsqewdsxbx] {
        margin-right: 10px; /* Smaller space between tiles */
    }
}

@media (max-width: 576px) {
  

    .play-icon[b-hsqewdsxbx] {
        font-size: 30px;
    }

    .play-icon[b-hsqewdsxbx] {
        font-size: 30px;
    }

    .horizontal-scroll .col-lg-4[b-hsqewdsxbx],
    .horizontal-scroll .col-lg-6[b-hsqewdsxbx],
    .horizontal-scroll .col-lg-3[b-hsqewdsxbx] {
        margin-right: 5px; /* Even smaller space between tiles */
    }
}




.horizontal-scroll-wrapper[b-hsqewdsxbx] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%; /* Full width to accommodate arrows and scroll area */
}

/* Style for the navigation arrows */
.navigation-arrow[b-hsqewdsxbx] {
    position: absolute;
    color: #FFD700; /* Change arrow color to gold */

    font-size: 24px; /* Size of the arrow */
    padding: 10px;
    cursor: pointer;
    height: 100%;
    z-index: 10; /* Ensure arrows are on top of other elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation-arrow:hover[b-hsqewdsxbx] {
    transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
    transform-origin: center center;
    cursor: pointer;
}



/* Hide scrollbar for a cleaner look */
.horizontal-scroll[b-hsqewdsxbx]::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll[b-hsqewdsxbx] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-scroll-wrapper:hover .btn-previous[b-hsqewdsxbx] {
    color: orange;
    font-size: 32px; /* Increase font size */
    background-image: linear-gradient(to right, rgba(185, 223, 163,1), rgb(255, 255, 255, 0.3)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}

.horizontal-scroll-wrapper:hover .btn-next[b-hsqewdsxbx] {
    color: orange;
    font-size: 32px; /* Increase font size */
    background-image: linear-gradient(to left, rgb(185, 223, 163,1 ), rgb(255, 255, 255, 0.3)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}


.horizontal-item[b-hsqewdsxbx] {
    height: auto; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}


    .horizontal-item img[b-hsqewdsxbx] {
        object-fit: cover;
        height: auto;
        width: 100%;
        border-radius: inherit;
    }

.horizontal-item-highlights[b-hsqewdsxbx] {
    /*height: auto;*/ /* Change fixed height to auto */
    /*max-height: 650px;*/ /* Optional: set a maximum height */
    /*width: 50vw;*/ /* Full width of the viewport for each highlight */
    /*overflow: hidden;
    display: flex;
    justify-content: center;
    padding:1em;
    align-items: center;
    border-radius: 10px;*/ /* Rounded corners */
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ /* Shadow effect */
    flex: 1 0 calc(50% - 10px); /* Two videos per slot, minus some padding */
    margin: 5px; /* Add some margin for spacing */
    max-height: 100vh; /* Optional: Keep max height for larger screens */
  
    margin: 1em;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

    .horizontal-item-highlights img[b-hsqewdsxbx] {
        object-fit: cover;
        height: auto;
        width: 100%;
        border-radius: inherit;
    }

/* For small devices like iPhones */
@media (max-width: 576px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 150px; /* Set a max height */
    }
}

/* For larger phones and small tablets */
@media (max-width: 768px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 200px; /* Set a max height */
    }
}

/* For tablets like Lenovo (generally 9-11 inches) */
@media (min-width: 769px) and (max-width: 1024px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 300px; /* Set a max height for tablets */
    }
}

/* For 13-inch laptops */
@media (min-width: 1025px) and (max-width: 1366px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 400px; /* Set a max height for 13-inch laptops */
    }
}

/* For 15-inch laptops */
@media (min-width: 1367px) and (max-width: 1600px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 500px; /* Set a max height for 15-inch laptops */
    }
}

/* For wider screens (desktop monitors) */
@media (min-width: 1601px) {
    .horizontal-item-highlights[b-hsqewdsxbx] {
        max-height: 650px; /* Full height for larger screens */
    }
} 


    .horizontal-item:hover .overlay[b-hsqewdsxbx], .horizontal-item-highlights:hover .overlay[b-hsqewdsxbx] {
        opacity: 1;
    }

/* Overlay styles */
.overlay[b-hsqewdsxbx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}



/* Style for the navigation arrows */
.navigation-arrow[b-hsqewdsxbx] {
    position: absolute;
    color: #FFD700; /* Change arrow color to gold */

    font-size: 36px; /* Size of the arrow */
    padding: 10px;
    cursor: pointer;
    height: 100%;
    z-index: 10; /* Ensure arrows are on top of other elements */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .navigation-arrow:hover[b-hsqewdsxbx] {
        transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
        transform-origin: center center;
        cursor: pointer;
    }

.btn-previous[b-hsqewdsxbx] {
    left: 2px; /* Adjust spacing from the left edge as needed */
    bottom: 5px;
    margin-left: 10px; /* Space from the edge */
    border-top-left-radius: 10px; /* Round the top-left corner */
    border-bottom-left-radius: 10px; /* Round the bottom-left corner */
    background-image: linear-gradient(to right,rgba(89, 85, 84, 0.40), rgb(255, 255, 255, 0.0)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}

/* Positioning right arrow */
.btn-next[b-hsqewdsxbx] {
    right: 2px; /* Adjust spacing from the right edge as needed */
    bottom: 5px;
    margin-right: 10px; /* Space from the edge */
    border-top-right-radius: 10px; /* Round the top-right corner */
    border-bottom-right-radius: 10px; /* Round the bottom-right corner */
    background-image: linear-gradient(to left,rgba(89, 85, 84, 0.40), rgb(255, 255, 255, 0.0)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}


/* Hide scrollbar for a cleaner look */
.horizontal-scroll[b-hsqewdsxbx]::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll[b-hsqewdsxbx] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-scroll-wrapper:hover .btn-previous[b-hsqewdsxbx] {
    color: orange;
    font-size: 32px; /* Increase font size */
    background-image: linear-gradient(to right, rgb(209, 205, 204, 0.10), rgb(255, 255, 255, 0.3)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}

.horizontal-scroll-wrapper:hover .btn-next[b-hsqewdsxbx] {
    color: orange;
    font-size: 32px; /* Increase font size */
    background-image: linear-gradient(to left,rgba(0, 0, 0, 0.1), rgb(255, 255, 255, 0.3)); /* Gradient border color */
    border-image-slice: 1; /* Ensure the gradient is applied to the border */
}





/* _content/Sarkis.Web/Components/Controls/Loading.razor.rz.scp.css */
.loading-overlay[b-yb8iorw2oy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content[b-yb8iorw2oy] {
    text-align: center;
    color: white;
    font-family: MyriadPro;
    font-size: 24px;
}



.spinner[b-yb8iorw2oy] {
    border: 10px solid rgba(255, 255, 255, 0.3);
    border-top: 10px solid orange;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin-b-yb8iorw2oy 1s linear infinite;
}

@keyframes spin-b-yb8iorw2oy {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* _content/Sarkis.Web/Components/Controls/LoadingWrapper.razor.rz.scp.css */
.loading-banner[b-0xks4tewoy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    z-index: 1000;
}

.content[b-0xks4tewoy] {
    display: none;
}
/* _content/Sarkis.Web/Components/Controls/MediaTile.razor.rz.scp.css */

.highlight-video[b-yrccq3xcyd] {
    height: 650px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-size: cover;
    background-position: center;*/
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

    .highlight-video img[b-yrccq3xcyd] {
        object-fit: cover;
        height: 100%;
        width: auto;
        border-radius: inherit;
    }

.video-tile[b-yrccq3xcyd] {
    height: auto; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}


    .video-tile img[b-yrccq3xcyd] {
        object-fit: cover;
        height: auto;
        width: 100%;
        border-radius: inherit;
    }



/* Overlay styles */
.overlay[b-yrccq3xcyd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
} 

.video-tile:hover .overlay[b-yrccq3xcyd], .highlight-video:hover .overlay[b-yrccq3xcyd] {
    opacity: 1;
}

.play-btn[b-yrccq3xcyd] {
    border: none;
    background: transparent;
    font-size: 50px;
    color: orange;
    cursor: pointer;
}

.play-icon[b-yrccq3xcyd] {
    font-size: 50px;
    color: orange;
}



/* _content/Sarkis.Web/Components/Controls/PageSections.razor.rz.scp.css */
.pagesections-container[b-vz15aa7r6k] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 10%, white 40%);
}
.pagesection[b-vz15aa7r6k] {
    position: relative; /* Needed to position the pseudo-element */
    flex: 1 1 20%;
    margin: 0.5rem;
    border-radius: 5rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    background: var(--bckcolor);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: auto;
    min-width: 120px;
    max-width: 220px;
    overflow: hidden; /* Ensures the shimmer effect doesn’t overflow outside the rounded edges */
}

    /* The hover effect you already have */
    .pagesection:hover[b-vz15aa7r6k] {
        transform: scale(1.2);
        cursor: pointer;
    }

    /* Pseudo-element to create the shimmering glow */
    .pagesection[b-vz15aa7r6k]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* A linear gradient with a white band in the middle,
       starting transparent, then white, then transparent again */
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
        /* Make the gradient wider than the container so we can animate it across */
        background-size: 200% 100%;
        background-position: -100% 0;
        /* Initially hidden */
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none; /* So it doesn't block clicks */
    }

    .pagesection:hover[b-vz15aa7r6k]::before {
        opacity: 1;
        animation: shimmer-b-vz15aa7r6k 1.5s linear infinite;
    }

/* Keyframes to move the gradient from left to right */
@keyframes shimmer-b-vz15aa7r6k {
    0% {
        background-position: 100% 0;
    }

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

.pagesection-icon[b-vz15aa7r6k] {
    height: 2rem;
    max-width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
}

.pagesection-name[b-vz15aa7r6k] {
    text-align: center; /* Center align the text */
    font-family: "MyriadPro-Regular", sans-serif; /* Font styling */
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 200;
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 100%; /* Ensure the text does not exceed the button width */
    white-space: normal; /* Allow wrapping of text */
    padding: 0.4rem; /* Add padding for better spacing */
    box-sizing: border-box; /* Ensure padding is included in width/height calculations */
}
 
/* Large screens (Desktops, Laptops) */
@media (min-width: 1280px) {
    .pagesection[b-vz15aa7r6k] {
        flex: 1 1 15%;
        max-width: 180px; /* Larger max-width for big screens */
    }

    .pagesection-icon[b-vz15aa7r6k] {
        height: 2.5rem;
    }

    .pagesection-name[b-vz15aa7r6k] {
        font-size: 1.1rem;
    }
}

/* Medium screens (Tablets, Small Laptops) */
@media (max-width: 1024px) {
    

    .pagesection-name[b-vz15aa7r6k] {
        font-size: 1rem;
    }

    .pagesection-icon[b-vz15aa7r6k] {
        height: 1.8rem;
    }
}

/* Small screens (Mobile Phones) */
@media (max-width: 768px) {

    .pagesection[b-vz15aa7r6k] {
        min-width: 140px;
    }


    .pagesection-name[b-vz15aa7r6k] {
        font-size: 1rem;
    }

    .pagesections-container[b-vz15aa7r6k] {
        margin-top: 4rem;
        flex-wrap: nowrap; /* Disable wrapping */
        overflow-x: auto; /* Enable horizontal scrolling */
        justify-content: flex-start; /* Align items to the start for better scroll UX */
        white-space: nowrap; /* Prevent content from breaking lines */
    }

 
}

/* Extra Small screens (iPhone SE, small devices) */
@media (max-width: 576px) {

    .pagesection[b-vz15aa7r6k] {
        min-width:140px;
    }
    .pagesection-icon[b-vz15aa7r6k] {
        height: 1.5rem;
    }

    .pagesections-container[b-vz15aa7r6k] {
        margin-top: 4rem;
        flex-wrap: nowrap; /* Disable wrapping */
        overflow-x: auto; /* Enable horizontal scrolling */
        justify-content: flex-start; /* Align items to the start for better scroll UX */
        white-space: nowrap; /* Prevent content from breaking lines */
    }

    .pagesection-name[b-vz15aa7r6k] {
        font-size: 1rem;
    }
}

/* _content/Sarkis.Web/Components/Controls/QuestionOption.razor.rz.scp.css */
.icon-container[b-5gtotmw15w] {
    display: flex;
    flex-direction: column; /* Stack options vertically */
    align-items: flex-start;
    margin-top: 20px;
}

.answer-option[b-5gtotmw15w] {
    display: flex;
    align-items: center; /* Align items horizontally */
    margin-bottom: 10px; /* Space between options */
    margin-left: 20px;
}

/* Answer icon styles */
.answer-icon[b-5gtotmw15w] {
    font-size: 2.0rem; /* Adjusted size */
    color: lightgray;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    margin-right: 10px; /* Space between icon and text */
}

    .answer-icon:hover[b-5gtotmw15w] {
        transform: scale(1.2);
        color: #0056b3;
    }

.answer-selected[b-5gtotmw15w] {
    color: #28a745 !important;
    animation: pulse-b-5gtotmw15w 0.3s ease-out;
}

@keyframes pulse-b-5gtotmw15w {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

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

/* Text under icons */
.answer-text[b-5gtotmw15w] {
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    display: inline-block;
 /* Adjust spacing between text and feedback */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content[b-5gtotmw15w] {
        max-width: 90%;
    }

    .answer-icon[b-5gtotmw15w] {
        font-size: 2.5rem;
    }
}


.glowing-option[b-5gtotmw15w] {
    animation: glow-b-5gtotmw15w 1.5s infinite alternate;
}

.feedback-message[b-5gtotmw15w] {
    color: #4caf50; /* Change this to your desired color */
    font-weight: bold;
    margin-top: 5px; /* Space between the option and feedback message */
    font-size: 0.9rem; /* Slightly smaller font size for the feedback */
    margin-left: 5em;
    display: inline-block; /* Ensure it's inline with the text */
}

/* Add the glow animation */
@keyframes glow-b-5gtotmw15w {
    0% {
        text-shadow: 0 0 5px rgba(76, 175, 80, 0.5), 0 0 10px rgba(76, 175, 80, 0.4), 0 0 15px rgba(76, 175, 80, 0.3);
    }

    100% {
        text-shadow: 0 0 10px rgba(76, 175, 80, 0.8), 0 0 20px rgba(76, 175, 80, 0.6), 0 0 30px rgba(76, 175, 80, 0.5);
    }
}


/* Responsive adjustments for different breakpoints */

/* Small Phones: 320px - 374px */
@media screen and (max-width: 374px) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 1.5rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex-direction: row;
        margin: 5px;
    }
    .answer-option[b-5gtotmw15w] {
        margin-top: 5px;
        margin-left:1px;
    }

    .answer-text[b-5gtotmw15w] {
        font-size: 1rem;
    }

    .feedback-message[b-5gtotmw15w] {
        font-size: 0.85rem;
    }
}

/* Medium Phones: 375px - 424px */
@media screen and (min-width: 375px) and (max-width: 424px) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 1.5rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex-direction: row;
        margin: 5px;
    }

    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }

    .answer-text[b-5gtotmw15w] {
        font-size: 1.1rem;
    }

    .feedback-message[b-5gtotmw15w] {
        font-size: 0.9rem;
    }
}

/* Large Phones / Small Tablets: 425px - 767px */
@media screen and (min-width: 425px) and (max-width: 767px) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 1.8rem;
    }

    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 1.15rem;
    }

    .feedback-message[b-5gtotmw15w] {
        font-size: 0.95rem;
    }
}

/* Tablets: 768px - 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 2.4rem;
    }


    .answer-option[b-5gtotmw15w] {
        margin-top: 8px;
    }

    .answer-text[b-5gtotmw15w] {
        font-size: 1.2rem;
    }

    .feedback-message[b-5gtotmw15w] {
        font-size: 1rem;
    }
}

/* Adjustments for Landscape Orientation */

/* Small Phones in Landscape */
@media screen and (max-width: 374px) and (orientation: landscape) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 1.6rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex-direction:row;
        margin:5px;
    }

    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 0.9rem;
    }
}

/* Medium Phones in Landscape */
@media screen and (min-width: 375px) and (max-width: 424px) and (orientation: landscape) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 1.8rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex-direction: row;
        margin: 5px;
    }
    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 1rem;
    }
}

/* Large Phones / Small Tablets in Landscape */
@media screen and (min-width: 425px) and (max-width: 767px) and (orientation: landscape) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 2rem;
    }


    .icon-container[b-5gtotmw15w] {
        flex-direction: row;
        margin: 5px;
    }
    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 1.05rem;
    }
}

/* Tablets in Landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 2.2rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex-direction: row;
        margin: 5px;
    }
    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 1.1rem;
    }
}

/* Larger devices (1025px and above) */
@media screen and (min-width: 1025px) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 2.5rem;
    }

    .answer-option[b-5gtotmw15w] {
        margin-top: 6px;
    }
    .answer-text[b-5gtotmw15w] {
        font-size: 1.3rem;
    }
}

/* Additional adjustments for landscape on small screens (iPhone 12/13 landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .answer-icon[b-5gtotmw15w] {
        font-size: 0.8rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex: 1; /* Allow options to take remaining space */
        justify-content: flex-start; /* Align options to the start of the container */
        gap: 8px;
    }

    .question-option[b-5gtotmw15w] {
        font-size: 0.85rem; /* Smaller font for the options */
        padding: 6px 12px; /* Slightly smaller padding */
    }

    .answer-text[b-5gtotmw15w] {
        font-size: 0.8rem;
    }

    
}

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

    .answer-icon[b-5gtotmw15w] {
        font-size: 0.8rem;
    }

    .icon-container[b-5gtotmw15w] {
        flex: 1;
        justify-content: flex-start;
        gap: 6px;
    }

    .question-option[b-5gtotmw15w] {
        font-size: 0.75rem; /* Smaller font for smaller screens */
        padding: 5px 10px; /* Smaller padding for compact view */
    }

    .answer-text[b-5gtotmw15w] {
        font-size: 0.8rem;
    }

     

    .answer-option[b-5gtotmw15w] {
        margin-top: 0.3em;
    }

    .answer-option[b-5gtotmw15w] {
        font-size: 0.8rem;
        padding: 5px 8px;
    }
}
/* _content/Sarkis.Web/Components/Controls/Tags.razor.rz.scp.css */
.tags-container[b-p4fjgbjyyq] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
}



.tag-icon[b-p4fjgbjyyq] {
    width: 2.5vw; /* Adjust the width of the tag icon */
    margin-right: 5px; /* Adjust margin between icon and tag name */
}

.tag-name[b-p4fjgbjyyq] {
    margin-top: 10px;
    font-size: 22px; /* Adjust font size of tag name */
    font-family: MyriadPro;
}

.tag[b-p4fjgbjyyq] {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    margin: 0 30px 30px 0;
    border-radius: 20px;
    text-decoration: none;
}

    .tag:hover[b-p4fjgbjyyq] {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        transform: scale(1.1);
        transform-origin: center center;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    }
    /* Style for checked tags */
    .tag.checked[b-p4fjgbjyyq] {
        background-color: indianred;
    }

    .tag:hover[b-p4fjgbjyyq] {
        background-color: #2980b9;
        cursor: pointer;
    }

@media (max-width: 1928px) {
    .tags-container[b-p4fjgbjyyq] {
        flex-wrap: wrap; /* Allow tags to wrap to the next line on smaller screens */
    }

    .tag[b-p4fjgbjyyq] {
        margin-right: 5px; /* Add margin to separate tags on smaller screens */
        margin-bottom: 5px; /* Add margin to separate tags on smaller screens */
    }
}

.tag:hover[b-p4fjgbjyyq] {
    background-color: #e0e8ed; /* Change the background color on hover as needed */
}

@media (max-width: 2000px) {
    .tags-container[b-p4fjgbjyyq] {
        flex-wrap: wrap; /* Allow tags to wrap to the next line on smaller screens */
    }

    .tag[b-p4fjgbjyyq] {
        margin-right: 5px; /* Add margin to separate tags on smaller screens */
        margin-bottom: 5px; /* Add margin to separate tags on smaller screens */
    }
}

@media (max-width: 800px) {
    .tags-container[b-p4fjgbjyyq] {
        flex-wrap: wrap; /* Allow tags to wrap to the next line on smaller screens */
    }

    .tag[b-p4fjgbjyyq] {
        margin-right: 5px; /* Add margin to separate tags on smaller screens */
        margin-bottom: 5px; /* Add margin to separate tags on smaller screens */
    }

    .tag-icon[b-p4fjgbjyyq] {
        width: 5vw; /* Adjust the width of the tag icon */
        margin-right: 5px; /* Adjust margin between icon and tag name */
    }
}

@media (max-width: 576px) {
    .tags-container[b-p4fjgbjyyq] {
        flex-wrap: wrap; /* Allow tags to wrap to the next line on smaller screens */
    }

    .tag[b-p4fjgbjyyq] {
        margin-right: 5px; /* Add margin to separate tags on smaller screens */
        margin-bottom: 5px; /* Add margin to separate tags on smaller screens */
    }

    .tag-icon[b-p4fjgbjyyq] {
        width: 10vw; /* Adjust the width of the tag icon */
        margin-right: 5px; /* Adjust margin between icon and tag name */
    }
}
/* _content/Sarkis.Web/Components/Controls/UserInfo.razor.rz.scp.css */
.submenu[b-xyjhoriheo] {
    background-color: white;
    padding: 10px;
    border-radius: 25px;
    position: absolute;
    top: 100%;  /* Position it below the span */
    z-index: 1000;  /* Ensure it appears above other content */
    width: 400px;
    box-shadow: 0 2px 4px darkorange;  /* Add shadow to all sides */
    transition: all 0.3s ease;  /* Smooth transition when submenu appears */
    
}

    /* Each item inside the submenu */
    .submenu div[b-xyjhoriheo] {
        margin-bottom: 5px;
    }

/* Username span with adaptive styles */
.username-span[b-xyjhoriheo] {
    font-size: 1vw;
    color: black;
    cursor: pointer;
    padding: 5px;
    position: relative;
    z-index: 1;
    background-color: white; /* Ensures background consistency */
    transition: color 0.3s ease; /* Smooth transition for hover effects */
}

/* Media query for smaller screens to hide username */
@media (max-width: 1200px) {
    .username-span[b-xyjhoriheo] {
        display: none; /* Hides username on smaller screens */
    }
}

/* Style for text and supporting info */
.text-and-supporting[b-xyjhoriheo] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/* Main text styling */
.text[b-xyjhoriheo] {
    align-self: stretch;
    font-family: "Inter", Helvetica;
    font-weight: 600;
    font-size: 24px;
    margin-top: -1px;
    color: #152137;
    letter-spacing: 0px;
    line-height: 20px;
}

/* Divider styling */
.divider[b-xyjhoriheo] {
    width: 100%;
    height: 1px;
    background-color: #f2f6ff;
}

/* Supporting text (e.g., email) */
.supporting-text[b-xyjhoriheo] {
    align-self: stretch;
    font-family: "Inter", Helvetica;
    font-weight: 400;
    color: darkgray;
    font-size: 18px;
    line-height: 20px;
}
/* Container for buttons */
.navbar-buttons[b-xyjhoriheo] {
    display: flex;
    gap: 1rem; /* Space between buttons */
    justify-content: flex-end; /* Align buttons to the right */
    align-items: center;
}

/* Common button styles */
.auth-button[b-xyjhoriheo] {
    width: 157px;
    height: 56px;
    padding: 12px 18px;
    margin: 10px;
    border-radius: 25px;
    background-color: #ff9100;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    font-family: 'Myriad Pro', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: white;
}

    .auth-button:hover[b-xyjhoriheo] {
        opacity: 1;
        background-color: #b35f00;
    }
  

/* Login button specific styles */
.login-button i[b-xyjhoriheo] {
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Register button specific styles */
.register-button i[b-xyjhoriheo] {
    margin-right: 0.5rem; /* Space between icon and text */
}

/* Responsive design */
@media (max-width: 768px) {
    .auth-button[b-xyjhoriheo] {
        padding: 0.5rem; /* Reduce padding on smaller screens */
        font-size: 0.9rem; /* Smaller font size for mobile */
    }

    .navbar-buttons[b-xyjhoriheo] {
        justify-content: center; /* Center buttons on smaller screens */
    }
}


.usermenu-option[b-xyjhoriheo] {
    width: fit-content;
    font-family: "Myriad Pro-Regular", Helvetica;
    font-weight: 400;
    color: #152137;
    font-size: 20px;
    letter-spacing: 0;
    line-height: 4vh;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.5vw; /* Adds padding around the text */
    transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

    /* Hover effect for menu options */
    .usermenu-option:hover[b-xyjhoriheo] {
        color: #007bff; /* Change the text color on hover */
        transform: scale(1.05); /* Slight scaling effect on hover, reduced to avoid clipping */
        box-shadow: 0 0 8px rgba(21, 33, 55, 0.8); /* Add a glowing effect */
        border-radius: 5px; /* Optional: Add rounded corners for a smoother effect */
    }

/* Option container styling to ensure space around the options */
.usermenu-option-container[b-xyjhoriheo] {
    padding: 0.2vw; /* Add space around each menu option */
}

.rounded-circle[b-xyjhoriheo] {
    border: 5px solid orange;
    width: 80px;
    height: 80px;
}

/* Slide Bar Container */
.slide-bar-buttons[b-xyjhoriheo] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Vertical orientation */
    align-items: flex-end; /* Align items to the start */
    gap: 0.5rem; /* Space between buttons */
}

/* Slide Bar Buttons */
.auth-button-slide[b-xyjhoriheo] {
    display: flex;
    align-items: end;
    justify-content: flex-end; /* Align text and icon to the left */
    padding: 0.4rem 0.8rem; /* Smaller padding for compact design */
    font-size: 0.9rem; /* Smaller font size */
    font-weight: 500;
    color: white;
    background-color: darkorange; /* Button background color */
    border: 2px solid #ff8c00; /* Slightly darker border */
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: 100%; /* Full width within the slide bar */
}

    /* Button Hover Effects */
    .auth-button-slide:hover[b-xyjhoriheo] {
        background-color: #ff9933; /* Lighter orange on hover */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px); /* Slight lift effect */
    }

    /* Icon Spacing */
    .auth-button-slide i[b-xyjhoriheo] {
        margin-right: 0.5rem; /* Space between icon and text */
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .auth-button-slide[b-xyjhoriheo] {
        font-size: 0.8rem; /* Smaller font size for mobile */
        padding: 0.3rem 0.6rem; /* Reduce padding for small screens */
    }
}



/* User Info Container */
.user-info-slide[b-xyjhoriheo] {
    display: flex;
    align-items: center; /* Center-align image and text */
    gap: 0.5rem; /* Space between image and text */
    cursor: pointer; /* Pointer cursor for clickable container */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 0.5rem; /* Add some padding for touch targets */
    border-radius: 10px; /* Rounded corners for the container */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

    /* Hover Effect for User Info */
    .user-info-slide:hover[b-xyjhoriheo] {
        background-color: #f4f4f4; /* Light background on hover */
        transform: scale(1.02); /* Slight zoom effect */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    }

/* Profile Picture */
.user-image-slide[b-xyjhoriheo] {
    width: 50px; /* Smaller size for slide menu */
    height: 50px; /* Ensure square aspect ratio */
    border-radius: 50%; /* Circular image */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Username Span */
.username-span-slide[b-xyjhoriheo] {
    font-size: 1.2rem;
    font-weight: 600; /* Semi-bold text */
    color: #555; /* Neutral color for text */
}

/* User Menu Toggle */
.user-menu-toggle[b-xyjhoriheo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: white;
    border: 2px solid orange; /* Orange border */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

    /* Menu Toggle Hover Effect */
    .user-menu-toggle:hover[b-xyjhoriheo] {
        background-color: #ffefd5; /* Light orange background on hover */
        transform: translateY(-2px); /* Slight lift effect */
    }

@media (min-width:1024px) {
    .submenu[b-xyjhoriheo] {
        right: 27px;
    }
}
@media (min-width:768px) (max-with:1024px) {
    .submenu[b-xyjhoriheo] {
       
        left: 27px;
    }
}

/* Responsive Design */
    @media (max-width: 768px) {
        .user-image-slide[b-xyjhoriheo] {
            width: 40px; /* Smaller size for mobile screens */
            height: 40px;
        }

        .username-span-slide[b-xyjhoriheo] {
            font-size: 1.2rem; /* Smaller font size for compact layout */
        }

        .user-info-slide[b-xyjhoriheo] {
            gap: 0.4rem; /* Adjust spacing for small screens */
        }

        .user-menu-toggle[b-xyjhoriheo] {
            padding: 8px 16px; /* Reduce padding for smaller screens */
            font-size: 0.9rem;
        }
    }
/* _content/Sarkis.Web/Components/Controls/UserPicture.razor.rz.scp.css */


.profile-picture-container[b-qfkx7ohwdb] {
    width: 150px;
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}


.camera-button[b-qfkx7ohwdb] {
    background: #a3b9d8;
    border-radius: 1.875rem;
    padding: 1rem 1.25rem 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 11.8125rem;
    height: 3.5rem;
    position: relative;
}


/* Optional: Adjust icon size inside buttons */
.btn-sm i[b-qfkx7ohwdb] {
    font-size: 0.8em; /* Adjust icon size */
    margin-bottom: 0.2em; /* Add space between icon and text */
}

/* Optional: Adjust the text size */
.btn-sm[b-qfkx7ohwdb] {
    font-size: 0.9rem; /* Adjust text size to match smaller buttons */
    padding: 0.5rem 1rem; /* Adjust button padding */
}

/* Base styles for the modal */
.modal-overlay[b-qfkx7ohwdb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-content[b-qfkx7ohwdb] {
    width: 100%;
    max-width: 37.5em; /* 600px / 16 = 37.5em */
    margin: 0;
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
}

.modal-header[b-qfkx7ohwdb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9375em; /* 15px / 16 = 0.9375em */
    background-color: #f8f9fa;
    border-radius: 0.5em 0.5em 0 0; /* 8px / 16 = 0.5em */
}

.modal-body[b-qfkx7ohwdb] {
    position: relative;
    padding: 0.9375em; /* 15px / 16 = 0.9375em */
}

.modal-footer[b-qfkx7ohwdb] {
    display: flex;
    justify-content: space-between;
    padding: 0.625em; /* 10px / 16 = 0.625em */
    background-color: #f8f9fa;
    border-radius: 0 0 0.5em 0.5em; /* 8px / 16 = 0.5em */
}

/* Placeholder (image) styles */
.ratio[b-qfkx7ohwdb] {
    position: relative;
    width: 100%;
    max-width: 100%;
    background-color: #e9ecef;
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
    overflow: hidden;
}

    .ratio img[b-qfkx7ohwdb] {
        object-fit: cover;
        border-radius: 0.5em; /* 8px / 16 = 0.5em */
    }

    .ratio .d-flex[b-qfkx7ohwdb] {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }

    .ratio .fa-image[b-qfkx7ohwdb] {
        font-size: 2.5em; /* 40px / 16 = 2.5em */
        color: rgba(0, 0, 0, 0.5);
    }

/* Camera feed styles */
video[b-qfkx7ohwdb] {
    position: absolute;
    bottom: 0.625em; /* 10px / 16 = 0.625em */
    right: 0.625em; /* 10px / 16 = 0.625em */
    width: 9.375em; /* 150px / 16 = 9.375em */
    height: 6.875em; /* 110px / 16 = 6.875em */
    border: 0.125em solid white; /* 2px / 16 = 0.125em */
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.4); /* 10px / 16 = 0.625em */
}



/* Modal overlay */
.modal.show[b-qfkx7ohwdb] {
    display: block;
}

/* Responsive Design - Media Queries */

/* For iPhone screens (portrait and landscape) */
@media (max-width: 30em) { /* 480px / 16 = 30em */
    .modal-content[b-qfkx7ohwdb] {
        width: 90%;
        max-width: 100%;
    }

    /* Button icon styles */
    .photo-button i[b-qfkx7ohwdb] {
        font-size: 1.5em; /* Large icon */
        margin-bottom: 0.2em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-qfkx7ohwdb] {
        font-size: 0.575em; /* Smaller text below the icon */
    }


    video[b-qfkx7ohwdb] {
        width: 7.5em; /* 120px / 16 = 7.5em */
        height: 5.625em; /* 90px / 16 = 5.625em */
    }

    .ratio[b-qfkx7ohwdb] {
        padding-top: 4.6875em; /* 75% aspect ratio -> 75% * 16px = 75px / 16 = 4.6875em */
    }
}

/* For small tablets (portrait) */
@media (min-width: 30.0625em) and (max-width: 48em) { /* 481px / 16 = 30.0625em, 768px / 16 = 48em */
    .modal-content[b-qfkx7ohwdb] {
        width: 85%;
        max-width: 100%;
    }


    /* Button icon styles */
    .photo-button i[b-qfkx7ohwdb] {
        font-size: 3em; /* Large icon */
        margin-bottom: 0.5em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-qfkx7ohwdb] {
        font-size: 0.875em; /* Smaller text below the icon */
    }


    video[b-qfkx7ohwdb] {
        width: 8.75em; /* 140px / 16 = 8.75em */
        height: 6.5625em; /* 105px / 16 = 6.5625em */
    }

    .ratio[b-qfkx7ohwdb] {
        padding-top: 5.625em; /* 60% aspect ratio -> 60% * 16px = 60px / 16 = 5.625em */
    }
}

/* For large tablets and small laptops (13-inch devices) */
@media (min-width: 48.0625em) and (max-width: 64em) { /* 769px / 16 = 48.0625em, 1024px / 16 = 64em */
    .modal-content[b-qfkx7ohwdb] {
        width: 75%;
        max-width: 100%;
    }

    /* Button icon styles */
    .photo-button i[b-qfkx7ohwdb] {
        font-size: 2em; /* Large icon */
        margin-bottom: 0.5em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-qfkx7ohwdb] {
        font-size: 0.775em; /* Smaller text below the icon */
    }


    video[b-qfkx7ohwdb] {
        width: 10em; /* 160px / 16 = 10em */
        height: 7.5em; /* 120px / 16 = 7.5em */
    }

    .ratio[b-qfkx7ohwdb] {
        padding-top: 5.25em; /* 56.25% aspect ratio -> 56.25% * 16px = 56.25px / 16 = 5.25em */
    }
}

/* For desktops and larger screens */
@media (min-width: 64.0625em) { /* 1025px / 16 = 64.0625em */
    /*.modal-content {
        width: 50%;
        max-width: 37.5em;*/ /* 600px / 16 = 37.5em */
    /*}*/


    video[b-qfkx7ohwdb] {
        width: 15.25em; /* 180px / 16 = 11.25em */
        height: 10.4375em; /* 135px / 16 = 8.4375em */
    }

    .ratio[b-qfkx7ohwdb] {
        padding-top: 5.25em; /* 56.25% aspect ratio -> 56.25% * 16px = 56.25px / 16 = 5.25em */
    }
}
/* Button styles */
.photo-button[b-qfkx7ohwdb] {
    border: none;
    color: white;
    font-size: 0.8em; /* Large font size for text */
    padding: 1em;
    text-align: center;
    border-radius: 0.5em; /* Rounded corners */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5em 0; /* Add spacing between buttons */
    transition: background-color 0.3s;
}

    /* Button icon styles */
    .photo-button i[b-qfkx7ohwdb] {
        font-size: 2em; /* Large icon */
        margin-bottom: 0.1em; /* Space between icon and label */
    }

/* Label style */
.button-label[b-qfkx7ohwdb] {
    font-size: 0.875em; /* Smaller text below the icon */
}

/* Button hover effect */
.photo-button:hover[b-qfkx7ohwdb] {
    background-color: #0056b3; /* Darker blue on hover */
    cursor: pointer;
}

/* Media Queries for responsiveness */
@media (max-width: 30em) { /* For smaller screens like iPhones */
    .photo-button[b-qfkx7ohwdb] {
        padding: 1em; /* Adjust padding on smaller screens */
        font-size: 1em; /* Adjust font size */
    }

        .photo-button i[b-qfkx7ohwdb] {
            font-size: 1.5em; /* Slightly smaller icon */
        }

    .button-label[b-qfkx7ohwdb] {
        font-size: 0.75em; /* Smaller label font */
    }
}

@media (min-width: 30.0625em) and (max-width: 48em) { /* For small tablets */
    .photo-button[b-qfkx7ohwdb] {
        padding: 1.25em; /* Adjust padding */
        font-size: 1.125em;
    }

        .photo-button i[b-qfkx7ohwdb] {
            font-size: 1.75em;
        }

    .button-label[b-qfkx7ohwdb] {
        font-size: 0.8em;
    }
}

.take-photo-button[b-qfkx7ohwdb] {
    background-color: cornflowerblue;
    color: white;
    border: none;
    width: 110px; /* Adjust width to make it circular */
    height: 110px; /* Adjust height to match width */
    border-radius: 50%; /* Make the button circular */
    display: inline-flex; /* Center icon and text inside the button */
    flex-direction: column; /* Stack icon above label */
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .take-photo-button i[b-qfkx7ohwdb] {
        font-size: 3.5em;
    }


    /* Common Styles for Clear and Accept Photo Buttons */
    .clear-photo-button[b-qfkx7ohwdb],
    .accept-photo-button[b-qfkx7ohwdb] {
        position: absolute;
        background-color: darkgray;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        width: 65px;
        height: 65px;
        font-size: 1.2rem;
        z-index: 10;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .clear-photo-button i[b-qfkx7ohwdb],
    .accept-photo-button i[b-qfkx7ohwdb] {
        font-size: 2.1em;
    }

/* Clear Photo Button (Top-Right Corner) */
.clear-photo-button[b-qfkx7ohwdb] {
    top: 5px;
    left: 5px;
    background-color: darkgray;
    
}

    .clear-photo-button:hover[b-qfkx7ohwdb] {
        background-color: #a9a9a9;
    }

/* Accept Photo Button (Top-Left Corner) */
.accept-photo-button[b-qfkx7ohwdb] {
    top: 10px;
    right: 10px;
    background-color: green;
 
}

    .accept-photo-button:hover[b-qfkx7ohwdb] {
        background-color: #4CAF50;
    }
/* _content/Sarkis.Web/Components/Layout/AnonymousLayout.razor.rz.scp.css */
.page[b-qw9m8hmehg] {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    background-image: url('../../Resources/Images/background.png');  Replace 'your-image-url.jpg' with the URL of your image 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
}



body[b-qw9m8hmehg] {
    margin: 0;
    padding: 0;
    
    background-size: cover;
    background-attachment: fixed;  Keeps the background image fixed 
}


main[b-qw9m8hmehg] {
    position: fixed;  Fixed positioning 
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    overflow-y: scroll;  Allow vertical scrolling 
}

.sidebar[b-qw9m8hmehg] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qw9m8hmehg] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-qw9m8hmehg]  a, .top-row[b-qw9m8hmehg]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-qw9m8hmehg]  a:hover, .top-row[b-qw9m8hmehg]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-qw9m8hmehg]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-qw9m8hmehg] {
        justify-content: space-between;
    }

    .top-row[b-qw9m8hmehg]  a, .top-row[b-qw9m8hmehg]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-qw9m8hmehg] {
        flex-direction: row;
    }

    .sidebar[b-qw9m8hmehg] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qw9m8hmehg] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qw9m8hmehg]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qw9m8hmehg], article[b-qw9m8hmehg] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

    #blazor-error-ui .dismiss[b-qw9m8hmehg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Sarkis.Web/Components/Layout/HomepageLayout.razor.rz.scp.css */
.homepage-container[b-yrx2ewysg2] {
    background-image: linear-gradient(to top, rgba(0, 128, 128, 0.7), rgba(128, 128, 128, 0)), url('../../Resources/Images/homepage-background.jpeg'); /* Path to your image */
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
   
    margin: 0; /* Removes default margins */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide any overflow */
}

 

/* Style for the Cookie Consent component to ensure it stays visible */
.cookie-consent-container[b-yrx2ewysg2] {
    position: fixed;
    bottom: 80px; /* Adjust this value based on footer height */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 8px;
 
    width: calc(100% - 40px); /* Make it responsive */
    max-width: 400px;
    text-align: center;
}

/* Footer styles */
.footer[b-yrx2ewysg2] {
     
    color: #fff;
    padding: 20px 0;
}
/* _content/Sarkis.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-5dqwdkquxk] {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    background-image: url('../../Resources/Images/background.png'); /* Replace 'your-image-url.jpg' with the URL of your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
}

.cookie-consent-container[b-5dqwdkquxk] {
    position: fixed; /* Sticks the popup to the viewport */
    top: 10em; /* Aligns it to the bottom of the window */
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    z-index: 1000; /* Keeps it on top of other elements */
   
}



.pagesection-sticky[b-5dqwdkquxk] {
    position: sticky;
    top: 0; /* Sticks to the top of the viewport */
    z-index: 100; /* Ensures it remains above other elements */
    
}


 

.page[b-5dqwdkquxk] {
    display: flex;
    flex-direction: column;
  
}

.main-content[b-5dqwdkquxk] {
    flex: 1; /* Allow the main content to expand and fill available space */
    display: flex;
    flex-direction: column;
}

.footer-section[b-5dqwdkquxk] {
    margin-top: 20px; /* Decrease this value to reduce the distance */
    padding: 0; /* Remove any unnecessary padding */
    flex-shrink: 0; /* Footer does not shrink, stays at the bottom */
}

body[b-5dqwdkquxk] {
    margin: 0;
    padding: 0;
   
    overflow: hidden; /* This will remove the scrollbar */
    /*background-size: cover;
    background-attachment: fixed;*/ /* Keeps the background image fixed */
}


main[b-5dqwdkquxk] {
    position: fixed; /* Fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    overflow-y: scroll; /* Allow vertical scrolling */
}
/*
.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/

.top-row[b-5dqwdkquxk] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-5dqwdkquxk]  a, .top-row[b-5dqwdkquxk]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-5dqwdkquxk]  a:hover, .top-row[b-5dqwdkquxk]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-5dqwdkquxk]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-5dqwdkquxk] {
        justify-content: space-between;
    }

    .top-row[b-5dqwdkquxk]  a, .top-row[b-5dqwdkquxk]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-5dqwdkquxk] {
        flex-direction: row;
    }

    .sidebar[b-5dqwdkquxk] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5dqwdkquxk] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-5dqwdkquxk]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-5dqwdkquxk], article[b-5dqwdkquxk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

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


.footer[b-5dqwdkquxk] {
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid #eaeaea; /* Separador fino no topo do rodap� */
}

    .footer ul[b-5dqwdkquxk] {
        padding-left: 0;
    }

        .footer ul li[b-5dqwdkquxk] {
            list-style: none;
            margin-bottom: 0; /* Remove a margem inferior para manter os links no mesmo alinhamento */
        }

    .footer a[b-5dqwdkquxk] {
        font-size: 0.875rem; /* Tamanho da fonte um pouco menor para o rodap� */
    }

@media (max-width: 600px) {
    .footer ul[b-5dqwdkquxk] {
        flex-direction: column; /* Alinhar links verticalmente em telas pequenas */
        text-align: center;
    }

        .footer ul li[b-5dqwdkquxk] {
            margin-bottom: 10px; /* Adicionar espa�amento entre links em telas pequenas */
        }
}
/* _content/Sarkis.Web/Components/Layout/VideoPlayerLayout.razor.rz.scp.css */
.page[b-36t28qaw22] {
    position: relative;
    display: flex;
    flex-wrap:wrap;
    flex-direction: column;
    background-image: url('../../Resources/Images/background.png'); /* Replace 'your-image-url.jpg' with the URL of your image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; 
}

.cookie-consent-container[b-36t28qaw22] {
    position: fixed; /* Sticks the popup to the viewport */
    top: 10em; /* Aligns it to the bottom of the window */
    left: 0;
    right: 0;
    padding: 1rem;
    text-align: center;
    z-index: 1000; /* Keeps it on top of other elements */
   
}

body[b-36t28qaw22] {
    margin: 0;
    padding: 0;
    
    /*background-size: cover;
    background-attachment: fixed;*/ /* Keeps the background image fixed */
}


main[b-36t28qaw22] {
    position: fixed; /* Fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    overflow-y: scroll; /* Allow vertical scrolling */
}
/*
.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}*/

.top-row[b-36t28qaw22] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-36t28qaw22]  a, .top-row[b-36t28qaw22]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-36t28qaw22]  a:hover, .top-row[b-36t28qaw22]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-36t28qaw22]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-36t28qaw22] {
        justify-content: space-between;
    }

    .top-row[b-36t28qaw22]  a, .top-row[b-36t28qaw22]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-36t28qaw22] {
        flex-direction: row;
    }

    .sidebar[b-36t28qaw22] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-36t28qaw22] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-36t28qaw22]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-36t28qaw22], article[b-36t28qaw22] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

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

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


.footer[b-36t28qaw22] {
    flex-shrink: 0;
    width: 100%;
    border-top: 1px solid #eaeaea; /* Separador fino no topo do rodap� */
}

    .footer ul[b-36t28qaw22] {
        padding-left: 0;
    }

        .footer ul li[b-36t28qaw22] {
            list-style: none;
            margin-bottom: 0; /* Remove a margem inferior para manter os links no mesmo alinhamento */
        }

    .footer a[b-36t28qaw22] {
        font-size: 0.875rem; /* Tamanho da fonte um pouco menor para o rodap� */
    }

@media (max-width: 600px) {
    .footer ul[b-36t28qaw22] {
        flex-direction: column; /* Alinhar links verticalmente em telas pequenas */
        text-align: center;
    }

        .footer ul li[b-36t28qaw22] {
            margin-bottom: 10px; /* Adicionar espa�amento entre links em telas pequenas */
        }
}
/* _content/Sarkis.Web/Components/Pages/Catalog.razor.rz.scp.css */
.container-fluid[b-y3l78rwfdp] {
    overflow-y: scroll !important;
}

    .container-fluid[b-y3l78rwfdp]::-webkit-scrollbar {
        width: 0 !important; /* WebKit browsers */
        background: transparent;
    }

html[b-y3l78rwfdp], body[b-y3l78rwfdp] {
    overflow-y: hidden;
    scroll-behavior: smooth;
}

/* Buttons styling */
.custom-button[b-y3l78rwfdp] {
    display: inline-flex; /* Use inline-flex to keep content in one line */
    align-items: center; /* Center icon and text vertically */
    justify-content: center; /* Center content horizontally */
    width: 167px;
    height: 66px;
    padding: 16px 20px;
    margin: 20px;
    border-radius: 25px;
    background-color: #ff9100;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    font-family: 'Myriad Pro', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
}

    .custom-button:hover[b-y3l78rwfdp] {
        opacity: 1;
        background-color: #b35f00;
    }
/* _content/Sarkis.Web/Components/Pages/Category.razor.rz.scp.css */

@keyframes shimmer-b-x96lwrbzlv {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.loading-indicator[b-x96lwrbzlv] {
    text-align: center;
    font-size: 1.2rem;
    margin-top: 10px;
}

.skeleton-loader[b-x96lwrbzlv] {
    background-color: #e0e0e0; /* Light grey for placeholder */
    height: 150px; /* Height of your media tile */
    margin: 10px; /* Spacing around the loader */
    border-radius: 4px; /* Optional: rounded corners */
    animation: shimmer-b-x96lwrbzlv 1.5s infinite linear; /* Shimmer effect */
}

.scroll-container[b-x96lwrbzlv] {
    height: 80vh; /* Adjust height to your preference */
    overflow-y: auto;
    position: relative; /* Ensure it can receive click events */
    z-index: 10; /* Make sure it's clickable */
}

body[b-x96lwrbzlv] {
    overflow: hidden; /* Prevent browser window scroll when the internal container is scrolling */
}

.row[b-x96lwrbzlv] {
    margin-right: 0;
    margin-left: 0;
}

/* For WebKit browsers (e.g., Chrome, Safari) */
.scrollable-div[b-x96lwrbzlv]::-webkit-scrollbar {
    width: 8px; /* Slim scrollbar */
}

.scrollable-div[b-x96lwrbzlv]::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for thumb */
}

.scrollable-div[b-x96lwrbzlv]::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Color of the track */
}

/* For Firefox */
.scrollable-div[b-x96lwrbzlv] {
    scrollbar-width: thin; /* Slim scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

 

/* Responsive adjustments */
@media (max-width: 768px) {
   
    .catalog-item[b-x96lwrbzlv] {
        height: 200px; /* Adjust the height as needed */
    }
}


@media (max-width: 576px) {
     .catalog-item[b-x96lwrbzlv] {
        height: 150px; /* Adjust the height as needed */
    }
}
 

/* _content/Sarkis.Web/Components/Pages/Home.razor.rz.scp.css */
/* Container for the entire content */
.content[b-60uvkxazbr] {
    padding: 20px;
    margin-top: 5vh;
}

/* Text content adjustments */
#text-content[b-60uvkxazbr] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    color: rgb(255, 255, 255);
    flex-direction: column;
    text-align: center;
}

/* Welcome text styling */
.welcome-text[b-60uvkxazbr] {
    font-family: 'Myriad Pro', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2; /* Improved line-height */
    padding: 10px;
    text-align: center;
    color: transparent;
    background: white; /* Gradient color */
    -webkit-background-clip: text;
    background-clip: text;
    /* Add the glow animation */
    text-shadow: 0 0 3px white;
    animation: glow-b-60uvkxazbr 2.0s ease-in-out infinite alternate;
}
@keyframes glow-b-60uvkxazbr {
    0% {
        text-shadow: 0 0 3px white;
    }

    100% {
        text-shadow: 0 0 15px white;
    }
}
.custom-button span[b-60uvkxazbr] {
    padding:5px;
}
/* Buttons styling */
.custom-button[b-60uvkxazbr] {
    display: inline-flex; /* Use inline-flex to keep content in one line */
    align-items: center; /* Center icon and text vertically */
    justify-content: center; /* Center content horizontally */
    width: 167px;
    height: 66px;
    padding: 16px 20px;
    margin: 20px;
    border-radius: 25px;
    background-color: #ff9100;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s;
    font-family: 'Myriad Pro', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: white;
}

    .custom-button:hover[b-60uvkxazbr] {
        opacity: 1;
        background-color: #b35f00;
    }

/* Button container */
#buttons-container[b-60uvkxazbr] {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Sponsors section */
.sponsors[b-60uvkxazbr] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

    .sponsors img[b-60uvkxazbr] {
        max-width: 50%; /* Ensure images are responsive */
        height: auto; /* Maintain aspect ratio */
    }

/* Responsive Media Queries */
@media (max-width: 768px) {
    .welcome-text[b-60uvkxazbr] {
        font-size: 20px;
    }

    .custom-button[b-60uvkxazbr] {
        width: 90px;
        height: 48px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .sponsors img[b-60uvkxazbr] {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .welcome-text[b-60uvkxazbr] {
        font-size: 18px;
    }

    .custom-button[b-60uvkxazbr] {
        width: 80px;
        height: 40px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .sponsors img[b-60uvkxazbr] {
        max-width: 70%;
    }

    #text-content[b-60uvkxazbr] {
        margin-top: 0;
    }
}
/* _content/Sarkis.Web/Components/Pages/Login.razor.rz.scp.css */

.p-gina-login[b-rqfxh50j53] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
}

.sign-up-overlay[b-rqfxh50j53] {
    
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 600px; /* Max width for large screens */
    width: 100vw; /* Width adjusts to 90% of the screen */
    position: relative; /* For the close button positioning */
}

.icons[b-rqfxh50j53] {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.entrar[b-rqfxh50j53] {
    font-size: 24px;
    font-weight: bold;
}

.social-media-signup-login[b-rqfxh50j53] {
    display: flex;
    align-items: center;
    margin: 10px 0;
    cursor: pointer;
    font-family: "MyriadPro-Regular", sans-serif;
    border-radius: 2.5rem;
    border-style: solid;
    border-color: #333333;
    border-width: 0.0625rem;
    flex-shrink: 0;
    width: 50vw;
    max-width: 400px;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
}

.social-media-logo[b-rqfxh50j53], .social-media-logo2[b-rqfxh50j53], .outlook-com-icon-2012-2019-1[b-rqfxh50j53] {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

@media (max-width: 768px) {
    .sign-up-overlay[b-rqfxh50j53] {
        padding: 10px;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .entrar[b-rqfxh50j53] {
        font-size: 18px;
    }

    .social-media-logo[b-rqfxh50j53], .social-media-logo2[b-rqfxh50j53], .outlook-com-icon-2012-2019-1[b-rqfxh50j53] {
        width: 20px;
        height: 20px;
    }
}
/* _content/Sarkis.Web/Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* General Container */
.privacy-container[b-lslefco8s4] {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

    /* Header */
    .privacy-container header h1[b-lslefco8s4] {
        text-align: center;
        font-size: 2rem;
        color: #EA6946; /* Dark orange */
        margin-bottom: 20px;
    }

    /* Section Titles */
    .privacy-container section h2[b-lslefco8s4] {
        font-size: 1.5rem;
        color: #444;
        margin-bottom: 10px;
    }

    /* Section Content */
    .privacy-container section p[b-lslefco8s4],
    .privacy-container section ol[b-lslefco8s4],
    .privacy-container section ul[b-lslefco8s4] {
        font-size: 1rem;
        color: #555;
    }

    .privacy-container section ul[b-lslefco8s4] {
        list-style: disc;
        margin-left: 20px;
    }

    .privacy-container section ol[b-lslefco8s4] {
        list-style: decimal;
        margin-left: 20px;
    }

    /* Links */
    .privacy-container a[b-lslefco8s4] {
        color: #EA6946;
        text-decoration: underline;
    }

        .privacy-container a:hover[b-lslefco8s4] {
            text-decoration: none;
        }

/* Button */
.privacy-footer[b-lslefco8s4] {
    text-align: center;
    margin-top: 20px;
}

.back-button[b-lslefco8s4] {
    background-color: #EA6946;
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 1.875rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

    .back-button:hover[b-lslefco8s4] {
        background-color: #ff7f50;
        transform: translateY(-2px);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .privacy-container[b-lslefco8s4] {
        padding: 15px;
    }

        .privacy-container header h1[b-lslefco8s4] {
            font-size: 1.8rem;
        }

        .privacy-container section h2[b-lslefco8s4] {
            font-size: 1.3rem;
        }

        .privacy-container section p[b-lslefco8s4],
        .privacy-container section ol[b-lslefco8s4],
        .privacy-container section ul[b-lslefco8s4] {
            font-size: 0.95rem;
        }

    .back-button[b-lslefco8s4] {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}
/* _content/Sarkis.Web/Components/Pages/Profile.razor.rz.scp.css */



.scrollable-container[b-61nga7m9su] {
    height: 100vh; /* Set the height as needed */
    overflow-y: auto; /* Enables vertical scrolling within the div */

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .scrollable-container[b-61nga7m9su]::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

.heading-container[b-61nga7m9su] {
    text-align: center; /* Center align the content */
    margin-bottom: 20px; /* Add some space below the heading and paragraph */
}

.square[b-61nga7m9su] {
    position: relative; /* Position relative for absolute positioning of h5 */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%;
    padding-top: 100%; /* creates a square aspect ratio */
    background-color: #ffffff; /* default background color */
    border: 1px solid #cccccc; /* border color */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); /* shadow on the margins */
    transition: background-color 0.3s ease; /* smooth transition for background color change */
    cursor: pointer; /* cursor style */
}

.profile-picture-container[b-61nga7m9su] {
    width: 150px;
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}



.square:hover[b-61nga7m9su] {
    box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.selected[b-61nga7m9su] {
    box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.8);
}


.form-select[b-61nga7m9su] {
    background: url("../../Resources/Images/select-arrow.svg") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2rem !important;
}


.modal[b-61nga7m9su] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure modal is on top of other content */
}

    .modal video[b-61nga7m9su] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px; /* Rounded corners for video element */
    }

    .modal button[b-61nga7m9su] {
        margin: 10px;
        padding: 8px 16px;
        border: none;
        background-color: #007bff; /* Blue button color */
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

        .modal button:hover[b-61nga7m9su] {
            background-color: #0056b3; /* Darker blue on hover */
        }

.camera-button[b-61nga7m9su] {
    background: #a3b9d8;
    border-radius: 1.875rem;
    padding: 1rem 1.25rem 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 11.8125rem;
    height: 3.5rem;
    position: relative;
}

.picture-label[b-61nga7m9su] {
    color: #ffffff;
    text-align: center;
    font-family: "MyriadPro-Bold", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.form-container[b-61nga7m9su] {
    width: 800px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the container horizontally */
    padding: 40px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
    background-color: white ;
    margin-top:10vh
}

    /* Additional styling for form elements */
    .form-container input[type="text"][b-61nga7m9su],
    .form-container input[type="email"][b-61nga7m9su],
    .form-container select[b-61nga7m9su] {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

.form-container button:hover[b-61nga7m9su] {
    background-color: #0056b3; /* Darker blue on hover */
}

 


/* STARTING HERE */


.camera-button:hover[b-61nga7m9su] {
    cursor: pointer; /* cursor style */
}


/* Optional: Adjust icon size inside buttons */
.btn-sm i[b-61nga7m9su] {
    font-size: 0.8em; /* Adjust icon size */
    margin-bottom: 0.2em; /* Add space between icon and text */
}

/* Optional: Adjust the text size */
.btn-sm[b-61nga7m9su] {
    font-size: 0.9rem; /* Adjust text size to match smaller buttons */
    padding: 0.5rem 1rem; /* Adjust button padding */
}

/* Base styles for the modal */
.modal-overlay[b-61nga7m9su] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.modal-content[b-61nga7m9su] {
    width: 100%;
    max-width: 37.5em; /* 600px / 16 = 37.5em */
    margin: 0;
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
}

.modal-header[b-61nga7m9su] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9375em; /* 15px / 16 = 0.9375em */
    background-color: #f8f9fa;
    border-radius: 0.5em 0.5em 0 0; /* 8px / 16 = 0.5em */
}

.modal-body[b-61nga7m9su] {
    position: relative;
    padding: 0.9375em; /* 15px / 16 = 0.9375em */
}

.modal-footer[b-61nga7m9su] {
    display: flex;
    justify-content: space-between;
    padding: 0.625em; /* 10px / 16 = 0.625em */
    background-color: #f8f9fa;
    border-radius: 0 0 0.5em 0.5em; /* 8px / 16 = 0.5em */
}

/* Placeholder (image) styles */
.ratio[b-61nga7m9su] {
    position: relative;
    width: 100%;
    max-width: 100%;
    background-color: #e9ecef;
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
    overflow: hidden;
}

    .ratio img[b-61nga7m9su] {
        object-fit: cover;
        border-radius: 0.5em; /* 8px / 16 = 0.5em */
    }

    .ratio .d-flex[b-61nga7m9su] {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }

    .ratio .fa-image[b-61nga7m9su] {
        font-size: 2.5em; /* 40px / 16 = 2.5em */
        color: rgba(0, 0, 0, 0.5);
    }

/* Camera feed styles */
video[b-61nga7m9su] {
    position: absolute;
    bottom: 0.625em; /* 10px / 16 = 0.625em */
    right: 0.625em; /* 10px / 16 = 0.625em */
    width: 9.375em; /* 150px / 16 = 9.375em */
    height: 6.875em; /* 110px / 16 = 6.875em */
    border: 0.125em solid white; /* 2px / 16 = 0.125em */
    border-radius: 0.5em; /* 8px / 16 = 0.5em */
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.4); /* 10px / 16 = 0.625em */
}

 

/* Modal overlay */
.modal.show[b-61nga7m9su] {
    display: block;
}

/* Responsive Design - Media Queries */

/* For iPhone screens (portrait and landscape) */
@media (max-width: 30em) { /* 480px / 16 = 30em */
    .modal-content[b-61nga7m9su] {
        width: 90%;
        max-width: 100%;
    }

    /* Button icon styles */
    .photo-button i[b-61nga7m9su] {
        font-size: 1.5em; /* Large icon */
        margin-bottom: 0.2em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-61nga7m9su] {
        font-size: 0.575em; /* Smaller text below the icon */
    }


    video[b-61nga7m9su] {
        width: 7.5em; /* 120px / 16 = 7.5em */
        height: 5.625em; /* 90px / 16 = 5.625em */
    }

    .ratio[b-61nga7m9su] {
        padding-top: 4.6875em; /* 75% aspect ratio -> 75% * 16px = 75px / 16 = 4.6875em */
    }
}

/* For small tablets (portrait) */
@media (min-width: 30.0625em) and (max-width: 48em) { /* 481px / 16 = 30.0625em, 768px / 16 = 48em */
    .modal-content[b-61nga7m9su] {
        width: 85%;
        max-width: 100%;
    }


    /* Button icon styles */
    .photo-button i[b-61nga7m9su] {
        font-size: 3em; /* Large icon */
        margin-bottom: 0.5em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-61nga7m9su] {
        font-size: 0.875em; /* Smaller text below the icon */
    }


    video[b-61nga7m9su] {
        width: 8.75em; /* 140px / 16 = 8.75em */
        height: 6.5625em; /* 105px / 16 = 6.5625em */
    }

    .ratio[b-61nga7m9su] {
        padding-top: 5.625em; /* 60% aspect ratio -> 60% * 16px = 60px / 16 = 5.625em */
    }
}

/* For large tablets and small laptops (13-inch devices) */
@media (min-width: 48.0625em) and (max-width: 64em) { /* 769px / 16 = 48.0625em, 1024px / 16 = 64em */
    .modal-content[b-61nga7m9su] {
        width: 75%;
        max-width: 100%;
    }

    /* Button icon styles */
    .photo-button i[b-61nga7m9su] {
        font-size: 2em; /* Large icon */
        margin-bottom: 0.5em; /* Space between icon and label */
    }

    /* Label style */
    .button-label[b-61nga7m9su] {
        font-size: 0.775em; /* Smaller text below the icon */
    }


    video[b-61nga7m9su] {
        width: 10em; /* 160px / 16 = 10em */
        height: 7.5em; /* 120px / 16 = 7.5em */
    }

    .ratio[b-61nga7m9su] {
        padding-top: 5.25em; /* 56.25% aspect ratio -> 56.25% * 16px = 56.25px / 16 = 5.25em */
    }
}

/* For desktops and larger screens */
@media (min-width: 64.0625em) { /* 1025px / 16 = 64.0625em */
    /*.modal-content {
        width: 50%;
        max-width: 37.5em;*/ /* 600px / 16 = 37.5em */
    /*}*/
     

    video[b-61nga7m9su] {
        width: 15.25em; /* 180px / 16 = 11.25em */
        height: 10.4375em; /* 135px / 16 = 8.4375em */
    }

    .ratio[b-61nga7m9su] {
        padding-top: 5.25em; /* 56.25% aspect ratio -> 56.25% * 16px = 56.25px / 16 = 5.25em */
    }
}
/* Button styles */
.photo-button[b-61nga7m9su] {
    border: none;
    color: white;
    font-size: 0.8em; /* Large font size for text */
    padding: 1em;
    text-align: center;
    border-radius: 0.5em; /* Rounded corners */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0.5em 0; /* Add spacing between buttons */
    transition: background-color 0.3s;
}

    /* Button icon styles */
    .photo-button i[b-61nga7m9su] {
        font-size: 3em; /* Large icon */
        margin-bottom: 0.5em; /* Space between icon and label */
    }

/* Label style */
.button-label[b-61nga7m9su] {
    font-size: 0.875em; /* Smaller text below the icon */
    
}

/* Button hover effect */
.photo-button:hover[b-61nga7m9su] {
    background-color: #0056b3; /* Darker blue on hover */
    cursor: pointer;
}

/* Media Queries for responsiveness */
@media (max-width: 30em) { /* For smaller screens like iPhones */
    .photo-button[b-61nga7m9su] {
        padding: 1em; /* Adjust padding on smaller screens */
        font-size: 1em; /* Adjust font size */
    }

        .photo-button i[b-61nga7m9su] {
            font-size: 2.5em; /* Slightly smaller icon */
        }

    .button-label[b-61nga7m9su] {
        font-size: 0.75em; /* Smaller label font */
    }
}

@media (min-width: 30.0625em) and (max-width: 48em) { /* For small tablets */
    .photo-button[b-61nga7m9su] {
        padding: 1.25em; /* Adjust padding */
        font-size: 1.125em;
    }

        .photo-button i[b-61nga7m9su] {
            font-size: 2.75em;
        }

    .button-label[b-61nga7m9su] {
        font-size: 0.8em;
    }
}

/* _content/Sarkis.Web/Components/Pages/Registration.razor.rz.scp.css */


.heading-container[b-olc6jzrn9e] {
    text-align: center; /* Center align the content */
    margin-bottom: 20px; /* Add some space below the heading and paragraph */
}

.square[b-olc6jzrn9e] {
    position: relative; /* Position relative for absolute positioning of h5 */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%;
    padding-top: 100%; /* creates a square aspect ratio */
    background-color: #ffffff; /* default background color */
    border: 1px solid #cccccc; /* border color */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); /* shadow on the margins */
    transition: background-color 0.3s ease; /* smooth transition for background color change */
    cursor: pointer; /* cursor style */
}

.profile-picture-container[b-olc6jzrn9e] {
    width: 150px;
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
 


.square:hover[b-olc6jzrn9e] {
    box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.5);
}

.selected[b-olc6jzrn9e] {
    
    box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.8);
}


.form-select[b-olc6jzrn9e] {
    background: url("../../Resources/Images/select-arrow.svg") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 2rem !important;
}


.modal[b-olc6jzrn9e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure modal is on top of other content */
}

    .modal video[b-olc6jzrn9e] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 8px; /* Rounded corners for video element */
    }

    .modal button[b-olc6jzrn9e] {
        margin: 10px;
        padding: 8px 16px;
        border: none;
        background-color: #007bff; /* Blue button color */
        color: white;
        border-radius: 4px;
        cursor: pointer;
    }

.modal button:hover[b-olc6jzrn9e] {
    background-color: #0056b3; /* Darker blue on hover */
}

.camera-button[b-olc6jzrn9e] {
    background: #a3b9d8;
    border-radius: 1.875rem;
    padding: 1rem 1.25rem 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 11.8125rem;
    height: 3.5rem;
    position: relative;
}

.picture-label[b-olc6jzrn9e] {
    color: #ffffff;
    text-align: center;
    font-family: "MyriadPro-Bold", sans-serif;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}


.form-container[b-olc6jzrn9e] {
    width: 800px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
    background-color: white
}

    /* Additional styling for form elements */
    .form-container input[type="text"][b-olc6jzrn9e],
    .form-container input[type="email"][b-olc6jzrn9e],
    .form-container select[b-olc6jzrn9e] {
        width: 100%;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    
        .form-container button:hover[b-olc6jzrn9e] {
            background-color: #0056b3; /* Darker blue on hover */
        }


.buttons[b-olc6jzrn9e] {
    background: #ea6946;
    border-radius: 1.875rem;
    padding: 1rem 1.25rem 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32.8125rem;
    height: 3.5rem;
    position: relative;
}
/* _content/Sarkis.Web/Components/Pages/StartRegistration.razor.rz.scp.css */

.p-gina-login[b-epif88a99s] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.sign-up-overlay[b-epif88a99s] {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 600px; /* Max width for large screens */
    width: 100vw; /* Width adjusts to 90% of the screen */
    position: relative; /* For the close button positioning */
}

.icons[b-epif88a99s] {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.entrar[b-epif88a99s] {
    font-size: 24px;
    font-weight: bold;
}

.social-media-signup-login[b-epif88a99s] {
    display: flex;
    align-items: center;
    margin: 10px 0;
    cursor: pointer;
    font-family: "MyriadPro-Regular", sans-serif;
    border-radius: 2.5rem;
    border-style: solid;
    border-color: #333333;
    border-width: 0.0625rem;
    flex-shrink: 0;
    width: 50vw;
    max-width: 400px;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
}

.social-media-logo[b-epif88a99s], .social-media-logo2[b-epif88a99s], .outlook-com-icon-2012-2019-1[b-epif88a99s] {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

@media (max-width: 768px) {
    .sign-up-overlay[b-epif88a99s] {
        padding: 10px;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .entrar[b-epif88a99s] {
        font-size: 18px;
    }

    .social-media-logo[b-epif88a99s], .social-media-logo2[b-epif88a99s], .outlook-com-icon-2012-2019-1[b-epif88a99s] {
        width: 20px;
        height: 20px;
    }
}
/* _content/Sarkis.Web/Components/Pages/TermosDeServico.razor.rz.scp.css */
/* General Container */
.terms-container[b-h2o7s0jipm] {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9; /* Light background for readability */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

    /* Header */
    .terms-container header h1[b-h2o7s0jipm] {
        text-align: center;
        font-size: 2rem;
        color: #EA6946; /* Dark orange */
        margin-bottom: 20px;
    }

    /* Section Titles */
    .terms-container section h2[b-h2o7s0jipm] {
        font-size: 1.5rem;
        color: #444;
        margin-bottom: 10px;
    }

    /* Section Content */
    .terms-container section p[b-h2o7s0jipm] {
        font-size: 1rem;
        color: #555;
        margin-bottom: 15px;
    }

    .terms-container section ul[b-h2o7s0jipm] {
        list-style: disc;
        margin-left: 20px;
        color: #555;
        font-size: 1rem;
    }

/* Button */
.terms-footer[b-h2o7s0jipm] {
    text-align: center;
    margin-top: 20px;
}

.back-button[b-h2o7s0jipm] {
    background-color: #EA6946; /* Dark orange */
    color: white;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 1.875rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

    .back-button:hover[b-h2o7s0jipm] {
        background-color: #ff7f50; /* Slightly lighter orange on hover */
        transform: translateY(-2px); /* Slight lift effect */
    }

/* Responsive Design */
@media (max-width: 768px) {
    .terms-container[b-h2o7s0jipm] {
        padding: 15px;
    }

        .terms-container header h1[b-h2o7s0jipm] {
            font-size: 1.8rem;
        }

        .terms-container section h2[b-h2o7s0jipm] {
            font-size: 1.3rem;
        }

        .terms-container section p[b-h2o7s0jipm],
        .terms-container section ul[b-h2o7s0jipm] {
            font-size: 0.95rem;
        }

    .back-button[b-h2o7s0jipm] {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}
/* _content/Sarkis.Web/Components/Pages/VideoPlayer.razor.rz.scp.css */


.player-container[b-2coawepwjt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 3vh; /* Adjust the top margin as needed */
    width: 100%; /* Ensure full width */
}

.video-container[b-2coawepwjt] {
    position: relative; /* Position relative to contain the absolute button */
    width: 100%; /* Allow full width */
    max-width: 100%; /* Ensure it doesn't overflow */
}

.video[b-2coawepwjt] {
    width: 100%; /* Take the full width of the container */
    max-width: 960px; /* Limit to a maximum width */
    aspect-ratio: 16 / 9; /* Maintain 16:9 ratio */
    border: none;
    border-radius: 8px; /* Optional rounded corners */
    background: #000; /* Fallback background for loading */
}


/* Viewer Votes (Left) */
.viewer-votes[b-2coawepwjt] {
    display: flex;
    gap: 1rem; /* Space between icons */
    align-items: center;
}

/* Add to Library (Right) */
.add-to-library[b-2coawepwjt] {
    display: flex;
    gap: 1rem; /* Space between action icons */
    align-items: center;
}

.video-grid[b-2coawepwjt] {
    display: flex;
    justify-content: center; /* Center the video grid */
    width: 100%; /* Full width */
}


/* Ensure modal content is on top of backdrop */
.modal-dialog[b-2coawepwjt] {
    z-index: 5050 !important;
    margin: 1.75rem auto; /* Center the modal */
}

.questions-button[b-2coawepwjt] {
    display: flex;
    margin-bottom: 0.8vh;
    border-style: none;
    width: 12em; /* Adjusted to be smaller */
    height: 3em; /* Adjusted to be smaller */
    justify-content: center;
    align-items: center;
    gap: 0.525em; /* Adjusted to em */
    background-color: #ea6946;
    border-radius: 1.875em; /* Adjusted to em */
}

.questions-label[b-2coawepwjt] {
    position: relative;
    width: fit-content;
    margin-top: -0.0625em; /* Adjusted to em */
    font-family: "Myriad Pro-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 1em; /* Base font size */
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5em; /* Adjusted line-height */
    white-space: nowrap;
}

/* Media Queries */
@media (max-width: 23.4375em) { /* iPhone */
    .questions-button[b-2coawepwjt] {
        width: 8em; /* Smaller button for iPhone */
        height: 1.5em; /* Smaller height for iPhone */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 0.375em; /* Smaller font size for label */
    }
}

@media (min-width: 23.4375em) and (max-width: 38em) { /* Lenovo tablets, iPads */
    .questions-button[b-2coawepwjt] {
        width: 8em; /* Adjust button width for tablets */
        height: 2em; /* Adjust height */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 0.4em; /* Adjust font size for label */
    }
}

@media (min-width: 33.4375em) and (max-width: 48em) { /* Lenovo tablets, iPads */
    .questions-button[b-2coawepwjt] {
        width: 14em; /* Adjust button width for tablets */
        height: 4em; /* Adjust height */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 0.8em; /* Adjust font size for label */
    }
}

@media (min-width: 48.0625em) and (max-width: 64em) { /* 13-inch laptops */
    .questions-button[b-2coawepwjt] {
        width: 18em; /* Adjust button width */
        height: 4.5em; /* Height remains the same */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 1.125em; /* Increase font size for label */
    }
}

@media (min-width: 64.0625em) and (max-width: 90em) { /* 15-inch laptops */
    .questions-button[b-2coawepwjt] {
        width: 25em; /* Slightly larger button */
        height: 4em; /* Slightly taller */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 1.50em; /* Increase font size for label */
    }
}

@media (min-width: 90.0625em) { /* Larger screens */
    .questions-button[b-2coawepwjt] {
        width: 22em; /* Max width for larger screens */
        height: 3.8em; /* Max height for larger screens */
    }

    .questions-label[b-2coawepwjt] {
        font-size: 1.375em; /* Larger font size for label */
    }
}



.video-info[b-2coawepwjt] {
    width: 100%; /* Matches the width of the video */
    max-width: 960px; /* Ensure it doesn't exceed the video's max width */
    display: flex;
    justify-content: space-between; /* Space out the content */
    padding: 1rem 0.5rem; /* Add padding for better spacing */
    box-sizing: border-box; /* Include padding in width calculation */
}



.video-title[b-2coawepwjt] {
    font-size: 1.5em; /* Adjust font size for the video title */
    font-weight: bold; /* Make the title bold */
    margin-bottom: 0.625em; /* Add space below the title */
}

.author-info[b-2coawepwjt] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5vh; /* Add space between sections */
}

.author-icon img[b-2coawepwjt] {
    width: 3.125em; /* Adjust the size of the round icon */
    height: 3.125em;
    border-radius: 50%; /* Make it round */
    margin-right: 0.625em; /* Add spacing between the icon and the details */
}

.author-details[b-2coawepwjt] {
    flex-grow: 1; /* Take remaining width */
}

.author-name[b-2coawepwjt] {
    font-size: 1.125em; /* Adjust the font size of the author's name */
    margin-bottom: 0.3125em; /* Space below the name */
}

.science-specialty[b-2coawepwjt] {
    font-style: italic; /* Make it italic */
    color: #555; /* Adjust the color of the science specialty */
}



.viewer-votes i[b-2coawepwjt] {
    margin-right: 1vw; /* Add spacing between vote icons */
    font-size: 2vw;
    cursor: pointer;
    color: gold;
}

.add-to-library i[b-2coawepwjt] {
    margin-right: 1vw;
    color: black;
    font-size: 2vw;
    border: none;
    cursor: pointer;
}


.add-to-library[b-2coawepwjt] {
    padding: 5px;
    opacity: 0.8;
}


.video-description-container[b-2coawepwjt] {
    margin: 2vw;
    font-family: "Myriad Pro-Bold", Helvetica;
    font-size: 1.0vw;
}


@media (min-width: 1920px) {
    .video[b-2coawepwjt] {
        width: 50vw; /* Reduce size slightly on very large screens */
    }
}


/* For smaller devices like phones and tablets */
@media (max-width: 768px) {
    .video[b-2coawepwjt] {
        width: 90vw; /* Increase video size on smaller devices */
    }
}


/* Media Queries */
@media (max-width: 23.4375em) { /* iPhone */
    .video-title[b-2coawepwjt] {
        font-size: 1.25em; /* Smaller title for iPhone */
    }

    .video-description-container[b-2coawepwjt] {
        font-size: 0.875em; /* Responsive font size */
    }
}

@media (min-width: 23.4375em) and (max-width: 48em) { /* Lenovo tablets, iPads */

    .add-to-library i[b-2coawepwjt] {
        font-size: 5vw;
    }

    .viewer-votes i[b-2coawepwjt] {
        font-size: 5vw;
    }

    .video-title[b-2coawepwjt] {
        font-size: 1.375em; /* Adjust title for tablets */
    }

    .video-description-container[b-2coawepwjt] {
        font-size: 1em; /* Adjust font size */
    }
}

@media (min-width: 48.0625em) and (max-width: 64em) { /* 13-inch laptops */

    .add-to-library i[b-2coawepwjt] {
        font-size: 4vw;
    }

    .viewer-votes i[b-2coawepwjt] {
        font-size: 4vw;
    }

    .video-title[b-2coawepwjt] {
        font-size: 1.5em; /* Title size for laptops */
    }

    .video-description-container[b-2coawepwjt] {
        font-size: 1.125em; /* Adjust font size */
    }
}

@media (min-width: 64.0625em) and (max-width: 90em) { /* 15-inch laptops */

    .add-to-library i[b-2coawepwjt] {
        font-size: 4vw;
    }

    .viewer-votes i[b-2coawepwjt] {
        font-size: 4vw;
    }

    .video-title[b-2coawepwjt] {
        font-size: 1.625em; /* Larger title for larger screens */
    }

    .video-description-container[b-2coawepwjt] {
        font-size: 1.25em; /* Adjust font size */
    }
}

@media (min-width: 90.0625em) { /* Larger screens */


    .video-title[b-2coawepwjt] {
        font-size: 1.75em; /* Increase title size */
    }

    .video-description-container[b-2coawepwjt] {
        font-size: 1.375em; /* Increase font size */
    }
}

/* For iPhones and smaller tablets */
@media (max-width: 576px) {
    .video[b-2coawepwjt] {
        width: 95vw; /* Almost full-width for very small screens */
    }
}

/* Mobile Specific */
@media (max-width: 480px) {
    .video[b-2coawepwjt] {
        width: 100vw; /* Full width on mobile */
        height: auto; /* Adjust height automatically */
    }



    .player-container[b-2coawepwjt] {
        margin-top: 10vh; /* Reduce top margin for small screens */
    }

    video-description-container[b-2coawepwjt] {
        font-size: 4vw;
    }
}

@media (max-width: 360px) {

    video-description-container[b-2coawepwjt] {
        font-size: 4vw;
    }


    .viewer-votes i[b-2coawepwjt] {
        margin-right: 1vw; /* Add spacing between vote icons */
        font-size: 3vw;
        cursor: pointer;
        color: gold;
    }

    .add-to-library i[b-2coawepwjt] {
        margin-right: 1vw;
        color: black;
        font-size: 3vw;
        border: none;
        cursor: pointer;
    }
}

@media (max-width: 700px) {

    .viewer-votes i[b-2coawepwjt] {
        margin-right: 1vw; /* Add spacing between vote icons */
        font-size: 5vw;
        cursor: pointer;
        color: gold;
    }

    .add-to-library i[b-2coawepwjt] {
        margin-right: 1vw;
        color: black;
        font-size: 5vw;
        border: none;
        cursor: pointer;
    }
}


.smile-icon[b-2coawepwjt] {
    font-size: 40px;
    cursor: pointer;
    transition: box-shadow 0.7s ease, transform 0.7s ease; /* Duration matches the keyframe animation */
}

.emotion-selected[b-2coawepwjt] {
    animation: glow-b-2coawepwjt 0.7s forwards;
}

@keyframes glow-b-2coawepwjt {
    0% {
        box-shadow: 0 0 10px 0px yellow;
        transform: scale(1);
    }

    33% {
        box-shadow: 0 0 10px 8px yellow;
        transform: scale(1.2);
    }

    45% {
        box-shadow: 0 0 10px 8px gold;
        transform: scale(1.2);
    }

    65% {
        box-shadow: 0 0 10px 8px gold;
        transform: scale(1.2);
    }

    33% {
        box-shadow: 0 0 10px 8px orange;
        transform: scale(1.2);
    }


    66% {
        box-shadow: 0 0 10px 8px orange;
        transform: scale(1.2);
    }

    100% {
        box-shadow: 0 0 10px 8px darkorange;
        transform: scale(1);
    }
}



/*
.modal.show {
z-index:40000;
}*/

/* MODAL CONTENT BEGIN */
.modal-content[b-2coawepwjt] {
    border-radius: 20px;
    aspect-ratio: 16 / 9;
    background-color: white;
    width: 80%; /* Default width */
    max-width: 800px; /* Set max width */
    align-content:flex-end;
    flex-direction:column;
}

@media (max-width: 1200px) {
    .modal-content[b-2coawepwjt] {
        width: 90%; /* Occupy more space on medium screens */
        max-width: 60vw;
    }
}

@media (max-width: 768px) {
    .modal-content[b-2coawepwjt] {
        width: 95%; /* Occupy nearly full width on smaller screens */
        max-width: 60vw;
    }

    .modal-header h5[b-2coawepwjt] {
        font-size: 0.8rem; /* Adjust title font size for small screens */
    }

    .question-text[b-2coawepwjt] {
        font-size: 0.5rem; /* Adjust question text size for readability */
    }
}


@media (max-width: 480px) {
    .modal-content[b-2coawepwjt] {
        width: 100%; /* Full width on small mobile screens */
        max-width: 60vw;
    }

    .modal-body[b-2coawepwjt] {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .modal-header h5[b-2coawepwjt] {
        font-size: 0.8rem; /* Adjust title font size for small screens */
    }

    .question-text[b-2coawepwjt] {
        font-size: 0.7rem; /* Further reduce font size for small screens */
    }
 

    .navigation-buttons button[b-2coawepwjt] {
        font-size: 1rem; /* Adjust button size */
        padding: 8px;
    }
}
/* MODAL CONTENT  ENDING*/


.question-container[b-2coawepwjt] {
    display: flex;
    flex-direction: column; /* Stack questions vertically */
    transition: transform 0.5s ease-in-out; /* Smooth transition between slides */
    overflow: hidden; /* Hide the other questions */
    width: 100%; /* Ensure full width */
    margin-left: 20px;
}

.question-slide[b-2coawepwjt] {
    display: none; /* Initially hide all slides */
    width: 100%; /* Ensure each slide takes full width */
    transition: opacity 0.5s ease-in-out; /* Optional smooth opacity change */
}

    .question-slide.active[b-2coawepwjt] {
        display: block; /* Only show the active question */
    }

.question-text[b-2coawepwjt] {
    font-weight: 400;
    color: #152137;
    text-align: left;
    margin: 20px; /* Optional margin for better spacing */
    font-size: 1.25rem; /* Question text size */
    line-height: 1.5; /* Line height for readability */
    margin: 1rem 0; /* Margin for spacing */
}





/** QUESTIONS RELATED CSS*/
/* Overlay for questions (restricted to iframe size) */

/* Header element (hide when modal is open) */
#header[b-2coawepwjt] {
    transition: opacity 0.3s ease;
}

/* When modal is active, hide the header */
.modal-open #header[b-2coawepwjt] {
    opacity: 0; /* Hide the header */
    pointer-events: none; /* Prevent interaction */
}


.question-overlay[b-2coawepwjt] {
    position: fixed; /* Ensures overlay covers the entire viewport */
    top: 0;
    left: 0;
    width: 100vw; /* Ensures full width of the viewport */
    height: 100vh; /* Ensures full height of the viewport */
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    transition: opacity 0.5s ease;
    pointer-events: auto;
}

.modal-dialog[b-2coawepwjt] {
    position: relative;
    z-index: 1060; /* Higher than the overlay */
    width: 90%; /* Adjust width for landscape screens */
    max-width: 600px; /* Limit maximum width */
    max-height: 90%; /* Ensure it fits within the viewport */
    overflow-y: auto; /* Add scrolling if content exceeds height */
}


.modal-content[b-2coawepwjt] {
    border-radius: 20px;
    aspect-ratio: 16 / 9;
    background-color: white;
}

.modal-title[b-2coawepwjt] {
    font-size: 1.5rem; /* Responsive font size */
}
 

/* Hide overlay initially */
.hidden[b-2coawepwjt] {
    display: none;
}

 

/* Media queries for responsive design */
@media (max-width: 768px) {
    .modal-title[b-2coawepwjt] {
        font-size: 1.25rem; /* Smaller title on mobile */
    }

    .navigation-buttons .btn[b-2coawepwjt] {
        font-size: 0.9rem; /* Smaller button text */
    }

    .question-text[b-2coawepwjt] {
        font-size: 1rem; /* Smaller question text */
    }

     
}

@media (max-width: 576px) {
    .modal-title[b-2coawepwjt] {
        font-size: 1rem; /* Even smaller title on extra small devices */
    }

    .navigation-buttons .btn[b-2coawepwjt] {
        font-size: 0.8rem; /* Button text size */
    }

    .question-text[b-2coawepwjt] {
        font-size: 0.9rem; /* Smaller question text */
    }

    
}

/* Question content */
.question-content[b-2coawepwjt] {
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    text-align: center;
}

.modal-content[b-2coawepwjt] {
    padding: 0.5rem; /* Adjust padding as needed */
    max-width: 90%; /* Responsive max width */
    margin: auto; /* Center the modal */
}


.question-container[b-2coawepwjt] {
    display: flex;
    flex-direction: column; /* Stack questions vertically */
    transition: transform 0.5s ease-in-out; /* Smooth transition between slides */
    overflow: hidden; /* Hide the other questions */
    width: 100%; /* Ensure full width */
    margin-left: 20px;
}

.question-slide[b-2coawepwjt] {
    display: none; /* Initially hide all slides */
    width: 100%; /* Ensure each slide takes full width */
    transition: opacity 0.5s ease-in-out; /* Optional smooth opacity change */
}

    .question-slide.active[b-2coawepwjt] {
        display: block; /* Only show the active question */
    }

      

@keyframes pulse-b-2coawepwjt {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

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




.navigation-buttons[b-2coawepwjt] {
    display: flex;
    flex-flow: row;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}



    /* Buttons for submitting or skipping */
    .navigation-buttons button[b-2coawepwjt] {
        background-color: #EA6946;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
        margin: 0 10px;
        cursor: pointer;
        z-index: 1100 !important;
        transition: background-color 0.3s ease;
        background-color: #EA6946;
        color: white;
        padding: 10px;
        margin: 10px;
        border-radius: 1.875rem;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        pointer-events: auto; /* Ensures buttons below are accessible unless overlay is active */
    }

        .navigation-buttons button:hover[b-2coawepwjt] {
            background-color: #EA6950;
        }


/* Additional adjustments for landscape on small screens (iPhone 12/13 landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-container[b-2coawepwjt] {
        width: 90%;
        max-width: 500px;
        height: 80vh; /* Use a smaller height to avoid overflow */
        padding: 15px;
    }

    .question-slide[b-2coawepwjt] {
        flex-direction: row; /* Layout the question and options side by side */
        align-items: flex-start; /* Align the question to the top */
        justify-content: space-between; /* Distribute space between question and options */
        padding: 10px;
    }

    .question-text[b-2coawepwjt] {
        flex: 1; /* Allow the question to take more space */
        font-size: 0.9rem;
        margin-right: 15px; /* Add space between question and options */
    }

    #questionOverlay[b-2coawepwjt] {
        height: 100vh; /* Ensure full height in landscape mode */
        padding: 1rem; /* Add padding to prevent cut-off */
    }

    .modal-dialog[b-2coawepwjt] {
        max-height: 65%; /* Limit height to prevent overflow */
        width: 80%; /* Use more horizontal space for landscape */
        top:10vh;
    }
    
}

@media (max-width: 480px) and (orientation: landscape) {
    .modal-container[b-2coawepwjt] {
        width: 100%;
        max-width: 380px; /* Set a smaller max-width */
        height: 75vh; /* Adjust height for better fit in landscape */
        padding: 8px;
    }

    .question-container[b-2coawepwjt] {
        display: flex;
        flex-direction: row; /* Stack questions vertically */
    }

    .question-slide[b-2coawepwjt] {
        flex-direction: row; /* Layout the question and options side by side */
        align-items: flex-start;
        justify-content: space-between;
        padding: 8px;
    }

    .question-text[b-2coawepwjt] {
        flex: 1;
        font-size: 0.85rem;
        margin-right: 10px; /* Space between question and options */
    }


    #questionOverlay[b-2coawepwjt] {
        height: 100vh; /* Ensure full height in landscape mode */
        padding: 1rem; /* Add padding to prevent cut-off */
    }

    .modal-dialog[b-2coawepwjt] {
        max-height: 85%; /* Limit height to prevent overflow */
        width: 80%; /* Use more horizontal space for landscape */
    }
}


.video-andactions[b-2coawepwjt] {
    display: flex;
    flex-direction: column; /* Stack iframe and video-info vertically */
    align-items: center; /* Center-align the content */
    width: 100%; /* Ensure it uses full width */
}