@charset "utf-8";

@media(max-width: 1439px) {
    /*左側小列表*/
    .side_tbale{
        display: none;
    }
}
/*xl以下*/
@media(max-width: 1199px) {
    /*header搜尋*/
    .header_search_box{
        width: 300px;
    }
    .header_marquee{
        max-width: 120px;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        word-break: break-all;
    }
}

/*lg以下*/
@media(max-width: 991px) {
    /*header*/
    .page_header {
        display: none;
    }
    .under_page_header {
        height: 0;
    }
    .wider_table{
        width: 100%;
        min-width: auto;
        overflow-x: auto;
    }
    /*畫布*/
    .my_offcanvas.offcanvas-end{
        border-left: none;
    }
    /*手機置底選單*/
    .bottom_nav{
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        z-index: 900;
        border-top: solid 1px var(--border-color2);
    }
    .bottom_nav_item{
        flex: 1;
    }
    .bottom_nav_link{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px;
    }
    .bottom_nav_link .icon img{
        width: 20px;
        margin-bottom: 4px;
    }
    .bottom_nav_link .txt{
        font-size: 13px;
        color: var(--font-color);
    }
    /*左側欄*/
    .page_sidebar {
        padding-top: 0;
        margin-right: -100%;
        margin-left: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        transition: all .25s;
        overflow-y: auto;
        height: calc(100% - 64px);
        border-radius: 0;
    }
    .page_sidebar.mobile_open {
        margin-right: 0%;
    }
    .page_sidebar.mobile_open ~ #close_mobile_nav {
        display: inherit;
    }
    /*頁面內容main*/
    main{
        height: calc(100vh - 64px);
        max-width: 100%;
        border-bottom: solid 1px var(--ban-color);
        /* padding-bottom: 64px;*/
    }
    .main_p{
        padding-left: 16px;
        padding-right: 16px;
    }
    .main_container{
        width: 100%;
        min-width: auto;
        overflow-x: auto;
    }
    .main_container>.databoard_block_group{
        margin-bottom: 0;
    }
    .main_container>.dashboard_style>.my_table{
        min-width: 920px;
    }
    /* .main_right_content{
        display: flex;
        flex-direction: column;
    }
    .main_right_content .main_container{
        flex: 1;
    } */
    /*頁面標題*/
    .page_title {
        padding: 16px 24px;
    }
    /*表格table*/
    .my_table_header.th-flex th {
        top: 0;
    }
    /*頁籤-固定*/
    .my_tab{
        min-width: 920px;
    }
    .my_tab.tab-flex .tab_window{
        top: 0;
    }
    /*文件*/
    .document_toolbar_box{
        top: 0;
    }
    .document_content{
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
    }
    .document_style{
        width: 900px;
    }
    /*儀表板*/
    .dashboard_group{
        padding-left: 24px;
        padding-right: 24px;
    }
    /*表單內的table*/
    .form_dashboard{
        width: 100%;
        overflow: hidden;
        overflow-x: auto;
    }
    .form_dashboard .my_table{
        width: 920px;
    }
    /*登入頁*/
    main.logain_page{
        padding-bottom: 0;
    }
    /* .logain_bg::before{
        content: "";
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, #f1fffd 0%, #5ee7df 20%, transparent 50%);
        position: absolute;
        top: -100px;
        left: -80px;
        animation: logainBefore 8s ease-in-out infinite;
        z-index: 2;
        opacity: .5;
    }
    .logain_bg::after{
        content: "";
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: radial-gradient(circle, #7ea4c4 0%, transparent 70%);
        position: absolute;
        top: -300px;
        left: -200px;
        animation: logainAfter 8s ease-in-out infinite;
        z-index: 1;
        opacity: .7;
    } */
}

/*md以下*/
@media(max-width: 767px) {
    /*頁面標題*/
    .page_title.toolbar{
        flex-direction: column;
    }
    .page_title_toolbar .toolbar_list {
        justify-content: flex-start;
        margin-top: 8px;
    }
    /*表格table*/
    .my_table_toolbar{
        width: 100%;
        flex: initial;
        order: 3;
        padding: 8px 0 0 0;
    }
    /*登入頁*/
    .logain_bg {
        padding: 24px 16px;
    }
    .logain_container {
        width: 100%;
        padding: 40px 32px 48px 32px;
    }
}

/*sm以下*/
@media(max-width: 575px) {
    /*列表分頁*/
    .page_list{
        flex-direction: column;
        align-items: center;
        margin-bottom: 16px;
    }
    /*列表分頁顯示筆數*/
    .show_count{
        margin-left: 0;
        margin-right: 0;
        margin-top: 16px;
    }
    /*日期區間*/
    .date_range{
        min-width: auto;
    }
}

/*超窄*/
@media(max-width: 350px) {
    .page_list{
        flex-wrap: wrap;
    }
    /*列表分頁顯示筆數*/
    .show_count{
        margin-left: 16px;
        margin-right: 0;
    }
}