/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ryvfmz01k2] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ryvfmz01k2] {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Button styles */
.fixed-button-right[b-ryvfmz01k2] {
    position: fixed;
    bottom: 30px; /* Distance from the bottom */
    right: 30px;   /* Distance from the left */
    background-color: #556ca6; /* Button background color */
    color: white; /* Text color */
    border: none;
    border-radius: 8px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.fixed-button-right1[b-ryvfmz01k2] {
    position: fixed;
    bottom: 30px; /* Distance from the bottom */
    right: 80px;   /* Distance from the left */
    background-color: #c04242; /* Button background color */
    color: white; /* Text color */
    border: none;
    border-radius: 8px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.fixed-button-left[b-ryvfmz01k2] {
    position: fixed;
    bottom: 30px; /* Distance from the bottom */
    left: 30px;   /* Distance from the left */
    background-color: #485b8d; /* Button background color */
    color: #ffffff; /* Text color */
    border: none;
    border-radius: 8px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.button-logo[b-ryvfmz01k2] {
    width: 40px; /* Adjust size as needed */
    height: 40px;
    margin-right: 8px; /* Space between image and text */
}

.button-text[b-ryvfmz01k2] {
    font-size: 16px; /* Adjust text size as needed */
    font-weight: bold; /* Optional: Make text bold */
}

/* Button hover effect */
.fixed-button-left:hover[b-ryvfmz01k2] {
    background-color: #6280b7; /* Darker background color on hover */
}
.fixed-button-right:hover[b-ryvfmz01k2] {
    background-color: #546e9f; /* Darker background color on hover */
}
.fixed-button-right1:hover[b-ryvfmz01k2] {
    background-color: #cb5b5b; /* Darker background color on hover */
}

/* Chat popup styles */
.image-popup-left[b-ryvfmz01k2] {
    position: fixed;
    bottom: 80px; /* Distance from the bottom */
    left: 30px;   /* Distance from the left */
    width: 300px;
    height: 400px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    flex-direction: column;
}


/* Chat popup styles */
.chat-popup[b-ryvfmz01k2] {
    position: fixed;
    bottom: 80px; /* Distance from the bottom */
    right: 30px;   /* Distance from the left */
    width: 300px;
    height: 500px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    flex-direction: column;
}

.chat-header[b-ryvfmz01k2] {
    background: #2e2e2e;
    color: white;
    padding: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.chat-body[b-ryvfmz01k2] {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

.close-btn[b-ryvfmz01k2] {
    background: transparent;
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

.close-btn:hover[b-ryvfmz01k2] {
    color: #ffebee;
}

/* /Layout/NavMenu.razor.rz.scp.css */
.custom-navbar[b-4w4a3tuyw5] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.modal-backdrop[b-4w4a3tuyw5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(5px); /* Adjust blur amount as needed */
}

.horizontal-container[b-4w4a3tuyw5] {
    display: flex;
    align-items: center; /* Vertically center align items */
    gap: 1rem; /* Optional: adds space between elements */
}

.helper-text-success[b-4w4a3tuyw5] {
    color: lavenderblush}dh dhtuTrnsdu

                         .helper-text-error[b-4w4a3tuyw5] {
                             color: red;
                         }

.logo-container[b-4w4a3tuyw5] {
    text-align: center;
}
.logo[b-4w4a3tuyw5] {
    max-width: 100px; /* Adjust the size as needed */
    height: auto;
}
.text-links[b-4w4a3tuyw5] {
    text-align: center;
    margin-top: 10px;
}
.link[b-4w4a3tuyw5] {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}
.link:hover[b-4w4a3tuyw5] {
    color: darkblue;
}

.premium-info[b-4w4a3tuyw5] {
    display: flex;
    align-items: center;
}

.premium-info img[b-4w4a3tuyw5] {
    margin-right: 20px; /* Space between the image and the text */
}

.premium-info span[b-4w4a3tuyw5] {
    margin-right: 15px; /* Space between text items */
}

.highlight[b-4w4a3tuyw5] {
    color: #211b1b;
    font-weight: bold;
}

.highlightAttendance[b-4w4a3tuyw5] {
    color: #4294d2;
    font-weight: bold;
}

.flex-container[b-4w4a3tuyw5] {
    display: flex;
    align-items: center; /* Vertically aligns items in the center */
    gap: 8px; /* Optional: Adds space between the items */
}
.flex-container span[b-4w4a3tuyw5],
.flex-container .mud-link[b-4w4a3tuyw5] {
    margin-left: 4px; /* Optional: Adjust space between text/link and checkbox */
}

hr[b-4w4a3tuyw5] {
    background-color: #fff;
    padding: 0;
    margin: 80px;
}

hr.hr-1[b-4w4a3tuyw5] {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.popup-container[b-4w4a3tuyw5] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensures the popup is on top */
}

.backdrop[b-4w4a3tuyw5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    backdrop-filter: blur(5px); /* Blur effect */
    z-index: 999; /* Ensures the backdrop is behind the popup but above other content */
}

.custom-input[b-4w4a3tuyw5] {
    background-color: gray;
    color: white;
    border: 1px solid #888888; /* Optional: change the border color if needed */
}

.custom-input[b-4w4a3tuyw5]::placeholder {
    color: white;
}

.centered-popup[b-4w4a3tuyw5] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background-color: transparent; /* Optional: you can adjust the background if needed */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* /Layout/NavMenuForSetting.razor.rz.scp.css */
.navbar-toggler[b-kzxu9t5ftf] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-kzxu9t5ftf] {
    height: 3.5rem;
    background-color: black; /* Change background color to black */
    color: white; /* Ensure text is visible */
}

.navbar-brand[b-kzxu9t5ftf] {
    font-size: 1.1rem;
}

.oi[b-kzxu9t5ftf] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-kzxu9t5ftf] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-kzxu9t5ftf] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-kzxu9t5ftf] {
        padding-bottom: 1rem;
    }

    .nav-item[b-kzxu9t5ftf]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-kzxu9t5ftf]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-kzxu9t5ftf]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 500px) {
    .navbar-toggler[b-kzxu9t5ftf] {
        display: none;
    }

    .collapse[b-kzxu9t5ftf] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-kzxu9t5ftf] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        background-color: black; /* Change background color to black */
        color: white; /* Ensure text is visible */
    }
}
.nav-link[b-kzxu9t5ftf] {
    color: white; /* Ensure nav links are visible */
}
.nav-link:hover[b-kzxu9t5ftf] {
    color: #cccccc; /* Optional: Change color on hover */
}
/* /Pages/Ad4AutoComponent.razor.rz.scp.css */
@media (max-width: 600px) {
    .adsbygoogle[b-86detox13h] {
        display: none;
    }
}
/* /Pages/Ad4Component.razor.rz.scp.css */
@media (max-width: 600px) {
    .adsbygoogle[b-v2sjq5doji] {
        display: none;
    }
}
/* /Pages/AdRecBtmComponent.razor.rz.scp.css */
@media (max-width: 600px) {
    .adsbygoogle[b-ns7ee3k6q2] {
        display: none;
    }
}
/* /Pages/Counter.razor.rz.scp.css */
.text-center[b-dvz9swi5r0] {
    text-align: center;
}

.text-center img[b-dvz9swi5r0] {
    max-width: 10%; /* Ensure image fits within its container */
}

.input-group[b-dvz9swi5r0] {
    display: flex;
    align-items: center;
    margin-top: 10px; /* Adjust as needed */
}

.input-group .form-control[b-dvz9swi5r0] {
    flex: 1; /* Take remaining space */
}

.input-group .btn[b-dvz9swi5r0] {
    margin-left: 10px; /* Space between input and button */
}

.input-group[b-dvz9swi5r0] {
    display: flex;
    align-items: center;
    margin-top: 10px; /* Adjust as needed */
}

.input-group .form-control[b-dvz9swi5r0] {
    flex: 1; /* Take remaining space */
}

.input-group .btn[b-dvz9swi5r0] {
    margin-left: 10px; /* Space between input and button */
}

.u-section-1 .u-sheet-1[b-dvz9swi5r0] {
    min-height: 183px;
}

.u-section-1 .u-text-1[b-dvz9swi5r0] {
    font-weight: 900;
    margin: 104px auto 1px;
}.u-section-2 .u-sheet-1[b-dvz9swi5r0] {
     min-height: 307px;
 }

.u-section-2 .u-form-1[b-dvz9swi5r0] {
    height: 68px;
    width: 740px;
    margin: 107px auto 60px;
}

.u-section-2 .u-label-1[b-dvz9swi5r0] {
    font-weight: 700;
}

.u-section-2 .u-btn-1[b-dvz9swi5r0] {
    --radius: 50px;
}

.paper-container[b-dvz9swi5r0] {
    display: flex;
    justify-content: space-between; /* Adjust spacing between items if needed */
    gap: 16px; /* Space between MudPaper items, adjust as needed */
    padding: 16px; /* Optional padding around the container */
}

.paper-item[b-dvz9swi5r0] {
    flex: 1; /* Make MudPapers flexible, or adjust width as needed */
    padding: 16px; /* Optional padding inside each MudPaper */
}

@media (max-width: 991px) {
    .u-section-2 .u-form-1[b-dvz9swi5r0] {
        width: 720px;
    }
}

@media (max-width: 767px) {
    .u-section-2 .u-form-1[b-dvz9swi5r0] {
        width: 540px;
    }
}

@media (max-width: 575px) {
    .u-section-2 .u-form-1[b-dvz9swi5r0] {
        width: 340px;
    }
}.u-section-3 .u-sheet-1[b-dvz9swi5r0] {
     min-height: 599px;
 }

.u-section-3 .u-tabs-1[b-dvz9swi5r0] {
    min-height: 410px;
    height: auto;
    margin: 60px 0 60px auto;
}

.u-section-3 .u-tab-item-1[b-dvz9swi5r0] {
    margin-bottom: 0;
    margin-top: 0;
}

.u-section-3 .u-tab-link-1[b-dvz9swi5r0] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-item-2[b-dvz9swi5r0] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-link-2[b-dvz9swi5r0] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-pane-1[b-dvz9swi5r0] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-1[b-dvz9swi5r0] {
    padding: 30px 25px;
}

.u-section-3 .u-table-1[b-dvz9swi5r0] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-pane-2[b-dvz9swi5r0] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-2[b-dvz9swi5r0] {
    padding: 30px 25px;
}

.u-section-3 .u-table-2[b-dvz9swi5r0] {
    margin: 0 0 -30px;
}

@media (max-width: 1199px) {
    .u-section-3 .u-tabs-1[b-dvz9swi5r0] {
        margin-right: initial;
        margin-left: initial;
    }

    .u-section-3 .u-table-1[b-dvz9swi5r0] {
        height: 256px;
    }

    .u-section-3 .u-table-2[b-dvz9swi5r0] {
        margin-right: initial;
        margin-left: initial;
    }
}

@media (max-width: 767px) {
    .u-section-3 .u-container-layout-1[b-dvz9swi5r0] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .u-section-3 .u-container-layout-2[b-dvz9swi5r0] {
        padding-left: 10px;
        padding-right: 10px;
    }
}.u-section-4 .u-sheet-1[b-dvz9swi5r0] {
     min-height: 400px;
 }

.u-table-entity colgroup col[b-dvz9swi5r0] {
    width: 25%; /* Adjust width as per your requirements */
}

.u-table-entity[b-dvz9swi5r0] {
    width: 100%; /* Ensure tables take full width of their container */
    max-width: 800px; /* Set maximum width to prevent stretching */
    margin: 0 auto; /* Center-align tables */
    table-layout: fixed; /* Fix table layout to prevent columns from expanding */
}

.u-table-entity colgroup col[b-dvz9swi5r0] {
    width: 25%; /* Adjust column widths as needed */
}

.tab-button[b-dvz9swi5r0] {
    padding: 10px 20px; /* Adjust padding as needed */
}

.mb-3[b-dvz9swi5r0] {
    margin-bottom: 1rem; /* Adjust as needed */
}

@keyframes rotate-b-dvz9swi5r0 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating-icon[b-dvz9swi5r0] {
    display: inline-block; /* Ensures rotation does not affect layout */
    animation: rotate-b-dvz9swi5r0 1s linear infinite;
}
.dropdown-menu-content[b-dvz9swi5r0] {
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-menu-content .mud-menu-item[b-dvz9swi5r0] {
    margin: 5px 0;
    padding: 10px;
}

/* Button styles */
.fixed-button[b-dvz9swi5r0] {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    left: 20px;   /* Distance from the left */
    background-color: #7ed1d1; /* Button background color */
    color: white; /* Text color */
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1000; /* Ensure it's above other content */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.button-logo[b-dvz9swi5r0] {
    width: 24px; /* Adjust size as needed */
    height: auto;
    margin-right: 8px; /* Space between image and text */
}

.button-text[b-dvz9swi5r0] {
    font-size: 16px; /* Adjust text size as needed */
    font-weight: bold; /* Optional: Make text bold */
}

/* Button hover effect */
.fixed-button:hover[b-dvz9swi5r0] {
    background-color: #7ed1d1; /* Darker background color on hover */
}

/* Chat popup styles */
.chat-popup[b-dvz9swi5r0] {
    position: fixed;
    bottom: 80px; /* Distance from the bottom */
    left: 20px;   /* Distance from the left */
    width: 300px;
    height: 400px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it's above other content */
    display: flex;
    flex-direction: column;
}

.chat-header[b-dvz9swi5r0] {
    background: #007bff;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.chat-body[b-dvz9swi5r0] {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
}

.close-btn[b-dvz9swi5r0] {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.close-btn:hover[b-dvz9swi5r0] {
    color: #ffebee;
}

.card-hover[b-dvz9swi5r0] {
    transition: background-color 0.3s ease;
}
.card-hover:hover[b-dvz9swi5r0] {
    background-color: #d0d0d0; /* Darker shade for hover effect */
}

.ad-left-bottom[b-dvz9swi5r0] {
    position: fixed; /* 화면(Viewport)에 고정 */
    bottom: 10px;    /* 화면 아래에서 10px 떨어진 위치 */
    left: 10px;      /* 화면 왼쪽에서 10px 떨어진 위치 */
    z-index: 1000;   /* 다른 요소 위에 표시 */
}

.ad-right-bottom[b-dvz9swi5r0] {
    position: fixed; /* 화면(Viewport)에 고정 */
    bottom: 10px;    /* 화면 아래에서 10px 떨어진 위치 */
    right: 10px;     /* 화면 오른쪽에서 10px 떨어진 위치 */
    z-index: 1000;   /* 다른 요소 위에 표시 */
}


/* /Pages/DashBoardPage.razor.rz.scp.css */
.table-container[b-t0f9k64k51] {
    max-height: 300px; /* Adjust this height as needed */
    overflow-y: auto;
    position: relative;
}

.table-container table[b-t0f9k64k51] {
    width: 100%;
    border-collapse: collapse;
}

.table-container thead[b-t0f9k64k51] {
    position: sticky;
    top: 0;
    background-color: #fff; /* Ensure the header has a background color */
    z-index: 1;
}

.table-container th[b-t0f9k64k51], .table-container td[b-t0f9k64k51] {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}

.table-container th[b-t0f9k64k51] {
    background-color: #f2f2f2;
}

.custom-panel-header[b-t0f9k64k51] {
    background-color: lightgrey;
}


/* Existing CSS */

.text-center[b-t0f9k64k51] {
    text-align: center;
}

.text-center img[b-t0f9k64k51] {
    max-width: 10%; /* Ensure image fits within its container */
}

.input-group[b-t0f9k64k51] {
    display: flex;
    align-items: center;
    margin-top: 10px; /* Adjust as needed */
}

.input-group .form-control[b-t0f9k64k51] {
    flex: 1; /* Take remaining space */
}

.input-group .btn[b-t0f9k64k51] {
    margin-left: 10px; /* Space between input and button */
}

.u-section-1 .u-sheet-1[b-t0f9k64k51] {
    min-height: 183px;
}

.u-section-1 .u-text-1[b-t0f9k64k51] {
    font-weight: 900;
    margin: 104px auto 1px;
}

.u-section-2 .u-sheet-1[b-t0f9k64k51] {
    min-height: 307px;
}

.u-section-2 .u-form-1[b-t0f9k64k51] {
    height: 68px;
    width: 740px;
    margin: 107px auto 60px;
}

.u-section-2 .u-label-1[b-t0f9k64k51] {
    font-weight: 700;
}

.u-section-2 .u-btn-1[b-t0f9k64k51] {
    --radius: 50px;
}

@media (max-width: 991px) {
    .u-section-2 .u-form-1[b-t0f9k64k51] {
        width: 720px;
    }
}

@media (max-width: 767px) {
    .u-section-2 .u-form-1[b-t0f9k64k51] {
        width: 540px;
    }
}

@media (max-width: 575px) {
    .u-section-2 .u-form-1[b-t0f9k64k51] {
        width: 340px;
    }
}

.u-section-3 .u-sheet-1[b-t0f9k64k51] {
    min-height: 599px;
}

.u-section-3 .u-tabs-1[b-t0f9k64k51] {
    min-height: 410px;
    height: auto;
    margin: 60px 0 60px auto;
}

.u-section-3 .u-tab-item-1[b-t0f9k64k51] {
    margin-bottom: 0;
    margin-top: 0;
}

.u-section-3 .u-tab-link-1[b-t0f9k64k51] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-item-2[b-t0f9k64k51] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-link-2[b-t0f9k64k51] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-pane-1[b-t0f9k64k51] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-1[b-t0f9k64k51] {
    padding: 30px 25px;
}

.u-section-3 .u-table-1[b-t0f9k64k51] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-pane-2[b-t0f9k64k51] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-2[b-t0f9k64k51] {
    padding: 30px 25px;
}

.u-section-3 .u-table-2[b-t0f9k64k51] {
    margin: 0 0 -30px;
}

@media (max-width: 1199px) {
    .u-section-3 .u-tabs-1[b-t0f9k64k51] {
        margin-right: initial;
        margin-left: initial;
    }

    .u-section-3 .u-table-1[b-t0f9k64k51] {
        height: 256px;
    }

    .u-section-3 .u-table-2[b-t0f9k64k51] {
        margin-right: initial;
        margin-left: initial;
    }
}

@media (max-width: 767px) {
    .u-section-3 .u-container-layout-1[b-t0f9k64k51] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .u-section-3 .u-container-layout-2[b-t0f9k64k51] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.u-section-4 .u-sheet-1[b-t0f9k64k51] {
    min-height: 400px;
}

.u-table-entity colgroup col[b-t0f9k64k51] {
    width: 25%; /* Adjust width as per your requirements */
}

.u-table-entity[b-t0f9k64k51] {
    width: 100%; /* Ensure tables take full width of their container */
    max-width: 800px; /* Set maximum width to prevent stretching */
    margin: 0 auto; /* Center-align tables */
    table-layout: fixed; /* Fix table layout to prevent columns from expanding */
}

.u-table-entity colgroup col[b-t0f9k64k51] {
    width: 25%; /* Adjust column widths as needed */
}

.tab-button[b-t0f9k64k51] {
    padding: 10px 20px; /* Adjust padding as needed */
}

.bold-shadow[b-t0f9k64k51] {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 3em; /* Adjust this value to make the text bigger */
}

.small-table[b-t0f9k64k51] {
    width: 50%; /* Adjust the width to your preference */
    margin: 0 auto; /* Center the table within the tab */
}

body[b-t0f9k64k51] {
    text-align: center;
    background: #fcfcfa;
    color: #818078;
    font-family: Futura, sans-serif;
}

.container[b-t0f9k64k51] {
    max-width: 50%;
    margin: 40px auto;
}

.hr-text[b-t0f9k64k51] {
    line-height: 1.0em;
    position: relative;
    outline: 0;
    border: 0;
    color: dimgray;
    text-align: center;
    height: 1.5em;
    opacity: .8;
}

.hr-text[b-t0f9k64k51]:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}

.hr-text[b-t0f9k64k51]:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: black;
    padding: 0 .5em;
    line-height: 1.5em;
    background-color: #fcfcfa;
}

.notification-footer[b-t0f9k64k51] {
    position: relative;
    text-align: left;
    margin-top: 10px; /* Adjust this value as needed */
}

.edit-text[b-t0f9k64k51] {
    font-size: small;
    color: blue; /* Change the color as needed */
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
}

.black-text[b-t0f9k64k51] {
    color: rgb(97, 118, 171);
}

.half-width[b-t0f9k64k51] {
    width: 50%; /* Set the width to half */
    max-width: 600px; /* Optional: Set a max-width for further control */
}

.transparent-tab[b-t0f9k64k51] {
    background-color: transparent !important;
}

.transparent-tab-panel[b-t0f9k64k51] {
    background-color: transparent !important;
}

.custom-tab-width[b-t0f9k64k51] {
    width: 1500px;
    margin: 0 auto; /* Centers the element */
}

.center-tab-text .mud-tabs-toolbar[b-t0f9k64k51] {
    justify-content: center;
}

.center-tab-panel-text[b-t0f9k64k51] {
    text-align: center;
}

.full-width-tabs .mud-tabs-toolbar[b-t0f9k64k51] {
    display: flex;
    justify-content: space-between;
}

.full-width-tab-panel[b-t0f9k64k51] {
    flex: 1;
    text-align: center;
}

@keyframes rotate-b-t0f9k64k51 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotating-icon[b-t0f9k64k51] {
    display: inline-block; /* Ensures rotation does not affect layout */
    animation: rotate-b-t0f9k64k51 1s linear infinite;
}

.input-group[b-t0f9k64k51] {
    display: flex;
    align-items: center;
    gap: 0px; /* No gap between fields and symbol */
}

.input-group span[b-t0f9k64k51] {
    padding-left: 4px; /* Adjust if needed */
    padding-right: 4px; /* Adjust if needed */
}

/* This class will set the background image and styling for the content area */
.tab-panel-content[b-t0f9k64k51] {
    position: relative;
    background-image: url('LogoPic.png'); /* Replace with your image path */
    background-size: 35%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px; /* Adjust padding as needed */
}

/* This pseudo-element will create a semi-transparent white overlay */
.tab-panel-content[b-t0f9k64k51]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
    z-index: 1;
    pointer-events: none; /* Allow clicks to pass through the overlay */
}

/* This class ensures that the actual content appears above the overlay */
.tab-panel-content .inner-content[b-t0f9k64k51] {
    position: relative;
    z-index: 2;
}

.custom-tab-all[b-t0f9k64k51] { background-image: url('all.png'); }
.custom-tab-top[b-t0f9k64k51] { background-image: url('top.png'); }
.custom-tab-jungle[b-t0f9k64k51] { background-image: url('jg.png'); }
/* Add more styles as needed */

/* /Pages/DashBoardSetting.razor.rz.scp.css */
/* main-layout.css */

/* Ensure that the body or main container uses flex layout */
body[b-hb3bj5a21e] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure full height */
}

/* Style for the sidebar */
.sidebar[b-hb3bj5a21e] {
    width: 250px; /* Adjust width as needed */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #343a40; /* Example background color */
    color: white;
    overflow-y: auto; /* Ensure scrolling if needed */
}

/* Style for the content area */
.content[b-hb3bj5a21e] {
    margin-left: 250px; /* Same as the width of the sidebar */
    padding: 20px; /* Optional padding */
    flex: 1;
    background-color: #f8f9fa; /* Example background color */
    min-height: calc(100vh - 56px); /* Adjust based on your navbar height */
}

.table-container[b-hb3bj5a21e] {
    padding: 20px; /* Adjust padding as needed */
}

.modal-backdrop[b-hb3bj5a21e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    backdrop-filter: blur(5px); /* Adjust blur amount as needed */
}
/* /Pages/Home.razor.rz.scp.css */
.text-center[b-iu6o5fousb] {
    text-align: center;
}

.text-center img[b-iu6o5fousb] {
    max-width: 10%; /* Ensure image fits within its container */
}

.input-group[b-iu6o5fousb] {
    display: flex;
    align-items: center;
    margin-top: 10px; /* Adjust as needed */
}

.input-group .form-control[b-iu6o5fousb] {
    flex: 1; /* Take remaining space */
}

.input-group .btn[b-iu6o5fousb] {
    margin-left: 10px; /* Space between input and button */
}

.input-group[b-iu6o5fousb] {
    display: flex;
    align-items: center;
    margin-top: 10px; /* Adjust as needed */
}

.input-group .form-control[b-iu6o5fousb] {
    flex: 1; /* Take remaining space */
}

.input-group .btn[b-iu6o5fousb] {
    margin-left: 10px; /* Space between input and button */
}

.u-section-1 .u-sheet-1[b-iu6o5fousb] {
    min-height: 183px;
}

.u-section-1 .u-text-1[b-iu6o5fousb] {
    font-weight: 900;
    margin: 104px auto 1px;
}.u-section-2 .u-sheet-1[b-iu6o5fousb] {
     min-height: 307px;
 }

.u-section-2 .u-form-1[b-iu6o5fousb] {
    height: 68px;
    width: 740px;
    margin: 107px auto 60px;
}

.u-section-2 .u-label-1[b-iu6o5fousb] {
    font-weight: 700;
}

.u-section-2 .u-btn-1[b-iu6o5fousb] {
    --radius: 50px;
}

@media (max-width: 991px) {
    .u-section-2 .u-form-1[b-iu6o5fousb] {
        width: 720px;
    }
}

@media (max-width: 767px) {
    .u-section-2 .u-form-1[b-iu6o5fousb] {
        width: 540px;
    }
}

@media (max-width: 575px) {
    .u-section-2 .u-form-1[b-iu6o5fousb] {
        width: 340px;
    }
}.u-section-3 .u-sheet-1[b-iu6o5fousb] {
     min-height: 599px;
 }

.u-section-3 .u-tabs-1[b-iu6o5fousb] {
    min-height: 410px;
    height: auto;
    margin: 60px 0 60px auto;
}

.u-section-3 .u-tab-item-1[b-iu6o5fousb] {
    margin-bottom: 0;
    margin-top: 0;
}

.u-section-3 .u-tab-link-1[b-iu6o5fousb] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-item-2[b-iu6o5fousb] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-link-2[b-iu6o5fousb] {
    font-size: 1.25rem;
    background-image: none;
    font-weight: 600;
    padding: 10px 25px;
}

.u-section-3 .u-tab-pane-1[b-iu6o5fousb] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-1[b-iu6o5fousb] {
    padding: 30px 25px;
}

.u-section-3 .u-table-1[b-iu6o5fousb] {
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-tab-pane-2[b-iu6o5fousb] {
    background-image: none;
    margin-top: 0;
    margin-bottom: 0;
}

.u-section-3 .u-container-layout-2[b-iu6o5fousb] {
    padding: 30px 25px;
}

.u-section-3 .u-table-2[b-iu6o5fousb] {
    margin: 0 0 -30px;
}

@media (max-width: 1199px) {
    .u-section-3 .u-tabs-1[b-iu6o5fousb] {
        margin-right: initial;
        margin-left: initial;
    }

    .u-section-3 .u-table-1[b-iu6o5fousb] {
        height: 256px;
    }

    .u-section-3 .u-table-2[b-iu6o5fousb] {
        margin-right: initial;
        margin-left: initial;
    }
}

@media (max-width: 767px) {
    .u-section-3 .u-container-layout-1[b-iu6o5fousb] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .u-section-3 .u-container-layout-2[b-iu6o5fousb] {
        padding-left: 10px;
        padding-right: 10px;
    }
}.u-section-4 .u-sheet-1[b-iu6o5fousb] {
     min-height: 400px;
 }

.u-table-entity colgroup col[b-iu6o5fousb] {
    width: 25%; /* Adjust width as per your requirements */
}

.u-table-entity[b-iu6o5fousb] {
    width: 100%; /* Ensure tables take full width of their container */
    max-width: 800px; /* Set maximum width to prevent stretching */
    margin: 0 auto; /* Center-align tables */
    table-layout: fixed; /* Fix table layout to prevent columns from expanding */
}

.u-table-entity colgroup col[b-iu6o5fousb] {
    width: 25%; /* Adjust column widths as needed */
}

.tab-button[b-iu6o5fousb] {
    padding: 10px 20px; /* Adjust padding as needed */
}

body[b-iu6o5fousb] {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    padding: 20px;
    margin: 0;
}
.container[b-iu6o5fousb] {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1[b-iu6o5fousb] {
    font-size: 2rem;
    color: #1a73e8;
    margin-bottom: 20px;
}
p[b-iu6o5fousb] {
    margin-bottom: 16px;
    font-size: 1.1rem;
    color: #555;
}
.highlight[b-iu6o5fousb] {
    color: #1a73e8;
    font-weight: bold;
}
.mainHighlight[b-iu6o5fousb] {
    color: #150303; /* Text color */
    font-weight: bold; /* Font weight */
    font-size: 1.8em; /* Slightly larger text size, adjust as needed */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Shadow effect, adjust as needed */
}

.logo-container[b-iu6o5fousb] {
    width: 100%;
    overflow: hidden;
}

.logo-container img[b-iu6o5fousb] {
    width: 300px; /* Set your desired width */
    height: 500px; /* Set your desired height */
    display: block; /* Ensure it is treated as a block element */
    margin: 0 auto; /* Center align the image horizontally */
}

.custom-input[b-iu6o5fousb] {
    background-color: gray;
    color: white;
    border: 1px solid #888888; /* Optional: change the border color if needed */
}

.custom-input[b-iu6o5fousb]::placeholder {
    color: white;
}

.card-hover[b-iu6o5fousb] {
    transition: background-color 0.3s ease;
}
.card-hover:hover[b-iu6o5fousb] {
    background-color: #d0d0d0; /* Darker shade for hover effect */
}
/* /Pages/PersonalSetting.razor.rz.scp.css */
/* main-layout.css */

/* Ensure that the body or main container uses flex layout */
body[b-s6x769knka] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure full height */
}

/* Style for the sidebar */
.sidebar[b-s6x769knka] {
    width: 250px; /* Adjust width as needed */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #343a40; /* Example background color */
    color: white;
    overflow-y: auto; /* Ensure scrolling if needed */
}

/* Style for the content area */
.content[b-s6x769knka] {
    margin-left: 250px; /* Same as the width of the sidebar */
    padding: 20px; /* Optional padding */
    flex: 1;
    background-color: #f8f9fa; /* Example background color */
    min-height: calc(100vh - 56px); /* Adjust based on your navbar height */
}

.table-container[b-s6x769knka] {
    padding: 20px; /* Adjust padding as needed */
}
/* /Pages/Popup.razor.rz.scp.css */
/* Overlay to disable background interactions */
.overlay[b-b8oj8xjh69] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Ensure it sits above other content */
    display: none; /* Hide by default */
}

/* Blur effect for background */
.blur-background[b-b8oj8xjh69] {
    filter: blur(4px);
    transition: filter 0.3s ease;
}

/* Popup styles */
.popup[b-b8oj8xjh69] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: whitesmoke;
    width: 850px;
    height: 500px;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it sits above the overlay */
    display: none; /* Hide by default */
}

/* Show popup */
.popup.show[b-b8oj8xjh69] {
    display: block;
}
/* /Pages/Question.razor.rz.scp.css */
/* main-layout.css */

/* Ensure that the body or main container uses flex layout */
body[b-myhc57h89w] {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure full height */
}

/* Style for the sidebar */
.sidebar[b-myhc57h89w] {
    width: 250px; /* Adjust width as needed */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #343a40; /* Example background color */
    color: white;
    overflow-y: auto; /* Ensure scrolling if needed */
}

/* Style for the content area */
.content[b-myhc57h89w] {
    margin-left: 250px; /* Same as the width of the sidebar */
    padding: 20px; /* Optional padding */
    flex: 1;
    background-color: #f8f9fa; /* Example background color */
    min-height: calc(100vh - 56px); /* Adjust based on your navbar height */
}

.table-container[b-myhc57h89w] {
    padding: 20px; /* Adjust padding as needed */
}
/* /Pages/StepExplanation.razor.rz.scp.css */
.card-container[b-g6gtepiju1] {
    display: flex;
    justify-content: center; /* Center the card horizontally */
    align-items: center;     /* Center the card vertically if needed */
    height: 100vh;           /* Full viewport height for vertical centering */
}

.custom-card[b-g6gtepiju1] {
    width: 50%;               /* Reduce the card width to 50% of its container */
    max-width: 600px;         /* Set a maximum width if needed */
    margin: 0 auto;           /* Center the card horizontally */
}

.custom-card .mud-card-media[b-g6gtepiju1] {
    max-width: 100%;          /* Ensure the media does not exceed the card width */
}

.custom-text[b-g6gtepiju1] {
    font-weight: bold; /* Makes the text thicker */
    text-decoration: underline; /* Underlines the text */
}

.three-dots[b-g6gtepiju1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100px; /* Adjust this height as needed */
}

.dot[b-g6gtepiju1] {
    display: block;
    background-color: black;
    border-radius: 50%;
    margin: 10px 0; /* Spacing between the dots */
}

.dot1[b-g6gtepiju1] {
    width: 8px;
    height: 8px;
}

.dot2[b-g6gtepiju1] {
    width: 12px;
    height: 12px;
}

.dot3[b-g6gtepiju1] {
    width: 16px;
    height: 16px;
}

.white-text[b-g6gtepiju1] {
    color: white !important;
}

.white-icon[b-g6gtepiju1] {
    color: white !important;
}

@keyframes subtle-shine-b-g6gtepiju1 {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.video-container[b-g6gtepiju1] {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-container iframe[b-g6gtepiju1] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
/* /Pages/StreamerRanking.razor.rz.scp.css */
body[b-q0y6ryppr2] {
    background-color: #0b0c10;
    color: #c5c6c7;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btn[b-q0y6ryppr2] {
    border-radius: 50px;
    transition: all 0.3s;
}

.btn-outline-primary:hover[b-q0y6ryppr2] {
    background-color: #007bff;
    color: #fff;
}

.btn-outline-danger:hover[b-q0y6ryppr2] {
    background-color: #dc3545;
    color: #fff;
}

.btn-outline-success:hover[b-q0y6ryppr2] {
    background-color: #28a745;
    color: #fff;
}

.btn-outline-light:hover[b-q0y6ryppr2] {
    background-color: #f8f9fa;
    color: #000;
}

.table[b-q0y6ryppr2] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.table th[b-q0y6ryppr2] {
    text-align: center;
    color: #1f2833;
    background-color: #66fcf1;
}

.table td[b-q0y6ryppr2] {
    text-align: center;
    vertical-align: middle;
}

.container[b-q0y6ryppr2] {
    max-width: 1400px;
    margin: auto;
}

a[b-q0y6ryppr2] {
    text-decoration: none;
}

a:hover[b-q0y6ryppr2] {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .table th[b-q0y6ryppr2], .table td[b-q0y6ryppr2] {
        font-size: 14px;
    }

    .btn[b-q0y6ryppr2] {
        font-size: 12px;
        padding: 8px 12px;
    }
}