@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* _content/subtube-tube/Common/BlazorCalendar/MonthlyView.razor.rz.scp.css */
.monthly-calendar[b-v3cnbbircd] {
    display: grid;
    width: 100%;
    grid-template-rows: 6vh;
    /*grid-template-columns: repeat(7, minmax(120px, 1fr));
    grid-auto-rows: 120px;*/
    grid-template-columns: repeat(7, minmax(8vw, 1fr));
    /*grid-auto-rows: 12vh;*/
    grid-auto-rows: auto;
    overflow: auto;
}

.monthly-day[b-v3cnbbircd] {
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
    border-right: 1px solid rgba(166, 168, 179, 0.12);
    text-align: right;
    padding: 0.4vh 0.4vw;
    letter-spacing: 1px;
    font-size: 0.8em;
    box-sizing: border-box;
    color: #6d7377;
    position: relative;
    /*min-height: 100px;*/
}

    .monthly-day:nth-of-type(n + 1):nth-of-type(-n + 7)[b-v3cnbbircd] {
        grid-row: 2;
    }

    .monthly-day:nth-of-type(n + 8):nth-of-type(-n + 14)[b-v3cnbbircd] {
        grid-row: 3;
    }

    .monthly-day:nth-of-type(n + 15):nth-of-type(-n + 21)[b-v3cnbbircd] {
        grid-row: 4;
    }

    .monthly-day:nth-of-type(n + 22):nth-of-type(-n + 28)[b-v3cnbbircd] {
        grid-row: 5;
    }

    .monthly-day:nth-of-type(n + 29):nth-of-type(-n + 35)[b-v3cnbbircd] {
        grid-row: 6;
    }

    .monthly-day:nth-of-type(n + 36):nth-of-type(-n + 43)[b-v3cnbbircd] {
        grid-row: 7;
    }

    .monthly-day:nth-of-type(7n + 1)[b-v3cnbbircd] {
        grid-column: 1/1;
    }

    .monthly-day:nth-of-type(7n + 2)[b-v3cnbbircd] {
        grid-column: 2/2;
    }

    .monthly-day:nth-of-type(7n + 3)[b-v3cnbbircd] {
        grid-column: 3/3;
    }

    .monthly-day:nth-of-type(7n + 4)[b-v3cnbbircd] {
        grid-column: 4/4;
    }

    .monthly-day:nth-of-type(7n + 5)[b-v3cnbbircd] {
        grid-column: 5/5;
    }

    .monthly-day:nth-of-type(7n + 6)[b-v3cnbbircd] {
        grid-column: 6/6;
    }

    .monthly-day:nth-of-type(7n + 7)[b-v3cnbbircd] {
        grid-column: 7/7;
    }

.monthly-day--disabled[b-v3cnbbircd] {
    /*color: rgba(#98a0a6, 0.6);
    background-color: #ffffff;*/
    /*background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f4f6f7' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");*/
}

.monthly-today[b-v3cnbbircd] {
    border: 3px solid #f75959;
    border-radius: 5px;
}

.monthly-task[b-v3cnbbircd] {
    border-radius: 3px;
    padding: 2px 8px 2px 6px;
    margin: 3px 11px 0 9px;
    font-size: 0.8em;
    font-weight: 600;
    position: relative;
    z-index: 1;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2vh;
}

@media (max-width: 767.98px) {
    .monthly-task[b-v3cnbbircd] {
        padding: 0px 8px 0px 4px;
        margin: 3px 2px 0 4px;
    }
}
/*
.monthly-task-first {
    align-self: start;
    margin-top: 22px;
}

.monthly-task-second {
    align-self: center;
    margin-top: 8px;
}

.monthly-task-bottom {
    align-self: end;
    margin-bottom: 14px;
}
*/
/*.monthly-more-tasks {
    position: relative;
    cursor: zoom-in;
    margin-top: 40px;
    font-size: 0.6em;
    font-weight: 600;
    color: darkblue;
    align-self: end;
    margin-left: 10px;
}*/
/* _content/subtube-tube/Common/BlazorCalendar/WeekView.razor.rz.scp.css */


.header-name[b-ifutz0v9g4] {
    line-height: 3vh;
    color: #FFF;
}

.day-cellule:hover[b-ifutz0v9g4] {
    font-weight: 600;
}

.hours[b-ifutz0v9g4] {
    width: 100%;
    min-width: 120px;
    padding: 2px;
    /*border: 1px solid #8296a5;*/
    /*z-index: 1;*/
}



.hour[b-ifutz0v9g4] {
    color: #FFF;
    font-size: 0.8em;
    padding: 2px;
    width: fit-content;
    /*min-height: 100px;*/
    background: #423e3e;
    /*margin: 5px;*/
    pointer-events: none;
}

.current-interval-cell[b-ifutz0v9g4] {
    border: 3px solid #f75959;
    pointer-events: none;
    z-index: 2;
}




.hour-task[b-ifutz0v9g4] {
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    padding-left: 0.5em;
    padding-right: 0.5em;
    margin: 0.5em;
    z-index: 3;
    /*width: fit-content;*/
    max-width: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    /*position: relative;*/
}

    /*.hour-task::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;*/ /* 控制偵測區高度 */
        /*width: 100%;
        cursor: ns-resize;*/ /* 顯示垂直縮放指標 */
    /*}*/

/* 🔵 下邊也可以加一層，讓下緣也能 resize */
    /*.hour-task::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        cursor: ns-resize;
    }*/

.day-cellule[b-ifutz0v9g4] {
    font-size: 0.6em;
    padding-left: 0.3em;
}

.header-name[b-ifutz0v9g4] {
    line-height: 3vh;
}

/* PC */

.weekly-calendar[b-ifutz0v9g4] {
    /*display: grid;*/
    /*grid-template-rows: 1fr 1fr;*/
    /*grid-auto-rows: 1px;*/
    /*width: 100%;*/
    /*overflow: auto;*/
    /*background: #000;*/
    /*gap: 5px;*/
    /*height: 200px;*/
}



.calendar-wrapper[b-ifutz0v9g4] {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    gap: 4px;
    width: 80%;
}


.calendar-grid[b-ifutz0v9g4] {
    display: contents; /* 讓格線繼承 wrapper 定義 */
}

.day[b-ifutz0v9g4] {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    height: 120px;
    border-radius: 6px;
    text-align: center;
    padding-top: 8px;
    font-weight: bold;
}

.task-layer[b-ifutz0v9g4] {
    position: absolute;
    inset: 0; /* 讓它覆蓋在 calendar-grid 上 */
    display: contents; /* 不破壞格線結構 */
}

.task[b-ifutz0v9g4] {
    position: absolute;
    top: 40%; /* 任務條Y軸位置（可動） */
    left: calc((var(--col-start) - 1) * (100% / 7));
    width: calc(var(--col-span) * (100% / 7));
    height: 32px;
    background-color: #ffe680;
    border-radius: 8px;
    line-height: 32px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    white-space: nowrap;
}


/* Flat */
@media (max-width: 1024px) {


    .weekly-calendar[b-ifutz0v9g4] {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-auto-rows: 0.05em;
        overflow: auto;
        background: #000;
        /*gap: 5px;*/
        width: 95vw;
    }

    .calendar-wrapper[b-ifutz0v9g4] {
        grid-template-columns: repeat(3, 4fr);
        width: 95vw;
    }

    .task[b-ifutz0v9g4] {
        left: calc((var(--col-start) - 1) * (100% / 3));
        width: calc(var(--col-span) * (100% / 3));
    }
}



/* Mobile */
@media (max-width: 641px) {


    .weekly-calendar[b-ifutz0v9g4] {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-auto-rows: 1px;
        width: 95vw;
        overflow: auto;
        background: #000;
        /*gap: 5px;*/
    }

    .day-cellule[b-ifutz0v9g4] {
        font-size: 0.6em;
        padding-left: 0.3em;
    }

    .header-name[b-ifutz0v9g4] {
        line-height: 3vh;
    }

    .calendar-wrapper[b-ifutz0v9g4] {
        grid-template-columns: 4fr;
        width: 95vw;
    }

    .task[b-ifutz0v9g4] {
        left: 0;
        width: 100%;
    }
}
/* _content/subtube-tube/Common/Component/CellRow/TubeButtonRow.razor.rz.scp.css */
.bottom[b-dgw5gc8yia] {
    padding: 0.5em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
/* _content/subtube-tube/Common/Component/CssComponent/GridDictionary.razor.rz.scp.css */
.griddic[b-agp4vhx896] {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: auto;
    
    grid-column-gap: 10px;
    grid-row-gap: 0.2em;
}


/* _content/subtube-tube/Common/Component/FullBodyComponent.razor.rz.scp.css */
.page[b-gotufxtkxw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-gotufxtkxw] {
    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-gotufxtkxw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/subtube-tube/Common/Component/Panel/FloatingPanel.razor.rz.scp.css */
/* PC */
.share-panel[b-crnrj5najx] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    transform: translateX(-20%);
    background: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 14px;
    z-index: 9999;
    width: 30vw;
    opacity: 0.9;
    width: fit-content;
    max-width: 30vw;
}

/* Flat */
@media only screen and (max-width: 1024px) {

    .share-panel[b-crnrj5najx] {
        max-width: 50vw;
    }
}



/* Mobile */
@media only screen and (max-width: 641px) {

    .share-panel[b-crnrj5najx] {
        bottom: 0px;
        left: 0vw;
        width: 100vw;
        transform: translateX(0%);
        padding: 12px 20px;
        border-radius: 0px;
        max-width: 100vw;
    }
}
/* _content/subtube-tube/Common/Component/Panel/TubePanel.razor.rz.scp.css */
/* PC */
.main[b-sxvjao2i9t] {
    /*background-color: #FFF;*/
    /*height: 100%;*/
    background-color: #2d3540;
    color: #FFF;
    width: 80%;
    /*padding: 10px;*/
}

/* Flat */
@media only screen and (max-width: 1024px) {

    .main[b-sxvjao2i9t] {
        width: 95vw;
    }
}



/* Mobile */
@media only screen and (max-width: 641px) {

    .main[b-sxvjao2i9t] {
        width: 95vw;
    }
}

/* _content/subtube-tube/Common/Component/TubeGrid/TubeDateRangeValue.razor.rz.scp.css */
/* PC */
.tubevalue[b-uy2jqbzmmt] {
    text-align: left;
    display: flex;
    gap: 2px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

/* Flat */
@media (max-width: 1024px) {

    .tubevalue[b-uy2jqbzmmt] {
        padding-right: 15vw;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubevalue[b-uy2jqbzmmt] {
        padding-right: 10vw;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        padding-left: 10vw;
        min-height: 20px;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeGrid.razor.rz.scp.css */
/* PC */
.tubegrid[b-d48strbtg1] {
    padding: 10px;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 0.2em;
}

/* Flat */
@media (max-width: 1024px) {

    .tubegrid[b-d48strbtg1] {
        
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubegrid[b-d48strbtg1] {
        grid-template-columns: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0.2em;
        padding: 0px;
        padding-bottom: 5px;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeKey.razor.rz.scp.css */
/* PC */
.tubekey[b-h7oayhcpfj] {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

/* Flat */
@media (max-width: 1024px) {

    .tubekey[b-h7oayhcpfj] {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubekey[b-h7oayhcpfj] {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        background-color: #272727;
        padding: 5px;
        font-weight: bold;
        padding-left: 5vw;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeTextValue.razor.rz.scp.css */
/* PC */
.tubevalue[b-cedvfs8klz] {
    text-align: left;
    display: flex;
    gap: 2px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

/* Flat */
@media (max-width: 1024px) {

    .tubevalue[b-cedvfs8klz] {
        padding-right: 15vw;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubevalue[b-cedvfs8klz] {
        padding-right: 10vw;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        padding-left: 10vw;
        min-height: 20px;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeTitleKey.razor.rz.scp.css */
/* PC */
.tubekey[b-63hjxv77lz] {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

/* Flat */
@media (max-width: 1024px) {

    .tubekey[b-63hjxv77lz] {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubekey[b-63hjxv77lz] {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        background-color: #272727;
        padding: 5px;
        font-weight: bold;
        padding-left: 5vw;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeUserListValue.razor.rz.scp.css */
/* PC */
.tubevalue[b-8652lusr59] {
    text-align: left;
    display: flex;
    gap: 2px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

/* Flat */
@media (max-width: 1024px) {

    .tubevalue[b-8652lusr59] {
        padding-right: 15vw;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubevalue[b-8652lusr59] {
        padding-right: 10vw;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        padding-left: 10vw;
        min-height: 20px;
    }
}
/* _content/subtube-tube/Common/Component/TubeGrid/TubeValue.razor.rz.scp.css */
/* PC */
.tubevalue[b-gwacw08rds] {
    text-align: left;
    display: flex;
    gap: 2px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

/* Flat */
@media (max-width: 1024px) {

    .tubevalue[b-gwacw08rds] {
        padding-right: 15vw;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
    }
}



/* Mobile */
@media (max-width: 641px) {

    .tubevalue[b-gwacw08rds] {
        padding-right: 10vw;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        display: flex;
        gap: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: flex-start;
        padding-left: 10vw;
        min-height: 20px;
    }
}
/* _content/subtube-tube/Common/MainLayout/RootMainLayout.razor.rz.scp.css */
.page[b-u1od075mbm] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-u1od075mbm] {
    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-u1od075mbm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/subtube-tube/Component/Button/LineButton.razor.rz.scp.css */
.linebutton[b-s7rizbl3ng] {
    white-space: nowrap;
}
/* _content/subtube-tube/Component/Card/HeroCard.razor.rz.scp.css */
.pic[b-bnbgiimpzr] {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #999;

    border-radius: 0.25em;

    background-color: #111;

    opacity: 0.9;

    /*margin: 0.5em;*/
    /*padding: 0.5em;*/
    

}

.pic img[b-bnbgiimpzr] {
    max-width: 100%;
    max-height: 100%;
}
/* _content/subtube-tube/Component/Card/LoginUserCard.razor.rz.scp.css */
.fullarea[b-048wmg9wu6] {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 1fr 49px;
    /*align-content: space-evenly;
    justify-content: space-evenly;*/
    /*align-items: space-evenly;*/
    /*justify-items: space-evenly;*/
    /*grid-gap: 10px;*/
    /*grid-gap: 10px;*/
    
    /*align-items: center;*/
}


.white_panel[b-048wmg9wu6] {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    background-color: white;
}

.buttom[b-048wmg9wu6] {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    /*padding: 0.5em;*/
    padding: 0.2em 1.5em 0.2em 1.5em;
    /*border: 5px solid red;*/
}

.pic_panel[b-048wmg9wu6] {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ru_panel[b-048wmg9wu6] {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 1em;
    color: #d7d9e0;
    /*border: 5px solid red;*/
    /*padding-right: 1em;*/
    align-self: center;
    padding: 0.5em;
}

.rd_panel[b-048wmg9wu6] {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 11px;
    color: #999;
    /*padding-right: 1.5em;*/
    align-self: center;
    /*border: 5px solid red;*/
    padding: 0.5em;
}

/* _content/subtube-tube/Component/Card/TubeCard.razor.rz.scp.css */
.tubecard[b-169a3uz1ta] {
    display: grid;
    grid-template-rows: 40px 49px 1fr 45px;
    grid-template-columns: 360px;
    background-color: #2d3540;
    /*max-height: 500px;*/
}



.top[b-169a3uz1ta] {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    cursor: move;
    color: #FFF;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.title_row[b-169a3uz1ta] {
    grid-column: 1 / 2;
    grid-row: 2 / 3;

    font-size: 1.4em;
    padding: 0.5em;
    color: #FFF;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.content_row[b-169a3uz1ta] {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    overflow-y: auto;
    /*max-height: 361px;*/
}


.buttom[b-169a3uz1ta] {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem;
}

/* _content/subtube-tube/Component/CardContext/UserCardContext.razor.rz.scp.css */
.fullarea[b-twerqsoxic] {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 80px 1fr;
    /*align-content: space-evenly;
    justify-content: space-evenly;*/
    /*align-items: space-evenly;*/
    /*justify-items: space-evenly;*/
    /*grid-gap: 10px;*/
    /*grid-gap: 10px;*/
    /*align-items: center;*/
}


.white_panel[b-twerqsoxic] {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    background-color: white;
}

.buttom[b-twerqsoxic] {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    /*padding: 0.5em;*/
    /*padding: 0.2em 1.5em 0.2em 1.5em;*/
    /*border: 5px solid red;*/
    display: none;
}

.pic_panel[b-twerqsoxic] {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
}

.ru_panel[b-twerqsoxic] {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 1em;
    color: #d7d9e0;
    /*border: 5px solid red;*/
    /*padding-right: 1em;*/
    align-self: center;
    padding: 0.5em;
}

.rd_panel[b-twerqsoxic] {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 11px;
    color: #999;
    /*padding-right: 1.5em;*/
    align-self: center;
    /*border: 5px solid red;*/
    padding: 0.5em;
}
/* _content/subtube-tube/Components/Components/Flex/FlexCenterContainer.razor.rz.scp.css */
.centerContainer[b-i6o3xbsba1] {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
}
/* _content/subtube-tube/Components/Components/Flex/FlexFullPage.razor.rz.scp.css */
.wrapper[b-0lt7e58xx8] {
    height: 95vh;
    padding: 1em;
}
/* _content/subtube-tube/Components/Components/Flex/FlexScrollContainer.razor.rz.scp.css */
.flowcontainer[b-2vxhyn5ocw] {
    overflow: auto;
    overflow-x: hidden;
    padding: 1em;
    min-height: 100px;
}
/* _content/subtube-tube/Components/Components/Flex/Grid1C.razor.rz.scp.css */
.grid1c[b-h43x4f037t] {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
}
/* _content/subtube-tube/Components/Components/Flex/GridKey.razor.rz.scp.css */
.gridkey[b-0giqhxqx4q] {
    grid-column: 1 / 2;
    /*color: #808080;*/
    /*font-weight: 700;*/
    /*margin-right: 0.7em;*/
    /*min-width: 4em;*/
    text-align: right;
    /*border: 2px #808080;*/
    /*font-size: 12px;*/
    color: #d7d9e0;
    /*text-align: left;*/
    /*background-color: white;*/
}

/* mobile */
@media (max-width: 601px) {

    .gridkey[b-0giqhxqx4q] {
        grid-column: 1 / 2;
        display: flex;
        flex-flow: row wrap;

    }
}
/* _content/subtube-tube/Components/Components/Flex/GridValue.razor.rz.scp.css */
.gridvalue[b-9dpz785zn1] {
    grid-column: 2 / 3;
    /*font-size: 12px;*/
    /*color: #d7d9e0;*/
    text-align: left;
    display: flex;
    gap: 2px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;

}
/* _content/subtube-tube/Components/Components/LiffComponents/ChatList.razor.rz.scp.css */
.systemmsg[b-llsddb12uc] {
    color: #c8c8c8;
    font-size: 9px;
    border-color: #bee5eb;
    position: relative;
    /*padding: 0.25rem 0.25rem;*/
    margin: 0.5rem;
    /*border: 1px solid transparent;
    border-radius: 0.25rem;*/
    text-align: center;
}



.daysystemmsg[b-llsddb12uc] {
    color: #c8c8c8;
    font-size: 1em;
    border-color: #bee5eb;
    position: relative;
    padding: 0.25rem 0.25rem;
    /*margin: 0.5rem;*/
    /*border: 1px solid transparent;
    border-radius: 0.25rem;*/
    /*text-align: center;*/
    opacity: 0.8;
    background-color: #222;
}

.msgbox[b-llsddb12uc] {
    position: relative;
    /*font-family: arial;
    font-size: 1.1em;*/

    /*margin: 0.2em;*/
    padding: 0.5em;
    /*margin-bottom: 5px;*/
    /*max-width: 50%;*/
    word-wrap: anywhere;
    background-color: #fff;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
    /*min-width: 100px;*/
    /*color: #fff;*/
    border-radius: 10px;
}




.timebox[b-llsddb12uc] {
    font-size: 9px;
    color: #808080;
    /*text-align: center;*/
    align-self: flex-end;
}



.receivedmsg[b-llsddb12uc] {
    display: flex;
    padding-left:0.5em;
    gap:10px;
}
/* _content/subtube-tube/Components/Components/LiffComponents/IconButton.razor.rz.scp.css */
.iconbutton[b-orev53dxcx] {
    cursor: pointer;
    width: 22px;
    height: 22px;
}
/* _content/subtube-tube/Components/Components/MasonryItem.razor.rz.scp.css */
.masonryItem[b-5rpp2klqh8] {
    margin-top: 1em;
    margin-bottom: 1em;
}
    .masonryItem.ui-draggable-dragging[b-5rpp2klqh8],
    .masonryItem.is-positioning-post-drag[b-5rpp2klqh8] {
        /*background: #EA0;*/
        z-index: 2; /* keep dragged item on top */
    }

@media only screen and (max-width: 400px) {
    .masonryItem[b-5rpp2klqh8] {
        width: 100%;
    }
}
/* _content/subtube-tube/Components/Components/MasonryRow.razor.rz.scp.css */
.masonryRow[b-e4zknmps8f] {
}

.packery-drop-placeholder[b-e4zknmps8f] {
    outline: 3px dashed #444;
    outline-offset: -6px;
    /* transition position changing */
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
}
/* _content/subtube-tube/Components/Components/TImeCounter.razor.rz.scp.css */
.GOStyle[b-skjstoyxhl] {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 24pt;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #e74c3c;
    border-radius: 10px;
}
/* _content/subtube-tube/Components/Components/TubeCardButton.razor.rz.scp.css */
.top-button[b-lf8hngj3ao] {
    cursor: pointer;
    line-height: 20px;
    border: solid 1px #fff;
    border-radius: 5px;
    padding: 0.2em;
    width: 60px;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    margin: 0.1rem;
}

.top-text[b-lf8hngj3ao] {
    color: #FFF;
}



.top-button :hover[b-lf8hngj3ao] {
    color: #CCC;
}
/* _content/subtube-tube/Layout/MainLayout/DebugFakeLoginMainLayout.razor.rz.scp.css */
.page[b-7l7lgkwtsa] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-7l7lgkwtsa] {
    flex: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-7l7lgkwtsa] {
    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-7l7lgkwtsa] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/subtube-tube/Layout/MainLayout/DebugMainLayout.razor.rz.scp.css */
.page[b-ft1mu28jed] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-ft1mu28jed] {
    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-ft1mu28jed] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/subtube-tube/Layout/MainLayout/LiffMainLayout.razor.rz.scp.css */
.page[b-sbk26qgnlg] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

#blazor-error-ui[b-sbk26qgnlg] {
    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-sbk26qgnlg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/subtube-tube/Layout/PageLayout/SubtubeMainLayout.razor.rz.scp.css */
.page[b-ld92x5nvj9] {
    position: relative;
    background-attachment: fixed;
    background-size: 100% auto;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

.page-rwd[b-ld92x5nvj9] {
    background-image: linear-gradient(200deg, rgb(255, 255, 255) 0%, rgb(89, 74, 55) 70%);
    grid-template-rows: 3.5rem auto;
}



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

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

/* Top Row */

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

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

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

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


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

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


.top-row[b-ld92x5nvj9] {
    background-color: #222;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}




.top-row-rwd[b-ld92x5nvj9] {
    grid-row: 1 / 2;
    padding: 0.5rem 3rem 0.5rem 0.5rem;
}


/****************/

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



#blazor-error-ui[b-ld92x5nvj9] {
    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-ld92x5nvj9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



/*old***************************************************************/
/*
.buttom-row {
    background-color: #222;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.1;
    padding-right: 1rem;
    z-index: 1;
}


.buttom-row-rwd {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.buttom-row:hover {
    opacity: 0.8;
    color: #f7f7f7
}*/

/*******************/

.content[b-ld92x5nvj9] {
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    /*width: 100%;*/
    /*height: 100%;*/
    /*border: 5px dotted red;*/
}

.content-rwd[b-ld92x5nvj9] {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 0.5em;
    padding-right: 8%;
    padding-left: 8%;
}






@media only screen and (max-width: 1024px) {
    .page-rwd[b-ld92x5nvj9] {
        background-image: linear-gradient(200deg, rgb(255, 255, 255) 0%, rgb(81, 64, 66) 70%);
        grid-template-rows: 3.5rem auto;
    }

    .content-rwd[b-ld92x5nvj9] {
        padding: 0.5em;
    }

}



@media only screen and (max-width: 641px) {
    .page-rwd[b-ld92x5nvj9] {
        background-image: linear-gradient(200deg, rgb(255, 255, 255) 0%, rgb(74, 74, 89) 70%);
        grid-template-rows: 3.5rem auto;
    }

    .top-row[b-ld92x5nvj9] {
        /*justify-content: space-between;*/
    }


    .top-row-rwd[b-ld92x5nvj9] {
        padding-right: 1rem;
        padding: 0rem;
    }


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

/*
    .buttom-row:not(.auth) {
        display: none;
    }
*/


    .content-rwd[b-ld92x5nvj9] {
        padding: 1em;
        padding-right: 0%;
        padding-left: 0%;
    }


}

/* _content/subtube-tube/Layout/PageLayout/TopButton.razor.rz.scp.css */
.top-button[b-ous7wlaao5] {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0.5rem;
    margin-right: 2rem;
    align-items: center;
    align-content: center;
}

.top-icon[b-ous7wlaao5] {
    color: #FFF;
    
}

.top-text[b-ous7wlaao5] {
    color: #999;
    padding-left: 5px;
    padding-top: 5px;
}


.top-button :hover[b-ous7wlaao5] {
    color: #ffffff;
}

@media (max-width: 641px) {
    .top-text[b-ous7wlaao5] {
        display:none;
    }
}
/* _content/subtube-tube/Pages/Public/Index.razor.rz.scp.css */
/* PC */
.share-panel[b-c49tsfihuz] {
    position: fixed;
    bottom: 20px;
    left: 70vw;
    transform: translateX(-20%);
    background: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 14px;
    z-index: 9999;
    width: 30vw;
    opacity: 0.9;
}

/* Flat */
@media only screen and (max-width: 1024px) {

    .share-panel[b-c49tsfihuz] {
        left: 50vw;
        width: 50vw;
    }
}



/* Mobile */
@media only screen and (max-width: 641px) {

    .share-panel[b-c49tsfihuz] {
        bottom: 0px;
        left: 0vw;
        width: 100vw;
        transform: translateX(0%);
        padding: 12px 20px;
        border-radius: 0px;
    }
}