@media (max-width: 991px) {
    td.hn-name-link {
        color: #2a6ebb;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    #jsa_header_btn {
        display: none !important;
    }

    section.panel {
        clear: both;
    }

    .table-responsive,
    div:has(> table.report1),
    div:has(> table table.report1),
    .table-grade4 {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-responsive th {
        white-space: nowrap;
    }

    .table-responsive td {
        word-break: keep-all;
    }

    .table-responsive table.no-wrap td {
        white-space: nowrap;
    }

    section.panel.panel-default > header + div.table-responsive,
    #helparea + .wrapper-lg.row .panel .panel-heading + .table-responsive {
        overflow-y: hidden;
    }

    section.panel.panel-default > header + div.table-responsive > table.table,
    section.panel.panel-default > header + div.table-responsive > .floatThead-wrapper > table.table,
    #helparea + .wrapper-lg.row .panel .panel-heading + .table-responsive > table.table,
    #helparea + .wrapper-lg.row .panel .panel-heading + .table-responsive > .floatThead-wrapper > table.table {
        margin-bottom: 0;
        border-bottom: 1px solid #dfdcdc;
    }

    header.header.bg-light.h2 ~ .form-horizontal.form1 > section.panel.wrapper-lg.b-a,
    header.header.bg-light.h2 ~ .no-padder.row > section.panel.wrapper-lg.b-a,
    #box1.search1:has(~ #GraphArea) {
        margin-left: 10px;
        margin-right: 10px;
    }

    #box1.search1:has(~ #GraphArea) {
        width: auto;
    }

    #box1.search1 span[id] > table td,
    #Div1.search1 span[id] > table td {
        padding: 5px 14px 5px 0;
        white-space: nowrap;
    }

    #box1.search1 span[id]:has(> table td > input[type=checkbox]),
    #Div1.search1 span[id]:has(> table td > input[type=checkbox]) {
        display: flex;
        flex-wrap: wrap;
    }

    #box1.search1 span[id]:has(> table td > input[type=checkbox]) > table,
    #Div1.search1 span[id]:has(> table td > input[type=checkbox]) > table,
    #box1.search1 span[id]:has(> table td > input[type=checkbox]) > table > tbody,
    #Div1.search1 span[id]:has(> table td > input[type=checkbox]) > table > tbody,
    #box1.search1 span[id]:has(> table td > input[type=checkbox]) > table > tbody > tr,
    #Div1.search1 span[id]:has(> table td > input[type=checkbox]) > table > tbody > tr {
        display: contents;
    }

    #box1.search1 span[id] > table td:empty,
    #Div1.search1 span[id] > table td:empty {
        display: none;
    }

    #box1.search1 span[id] > table td > input[type=checkbox],
    #Div1.search1 span[id] > table td > input[type=checkbox],
    #box1.search1 .chkSpan > input[type=checkbox],
    #Div1.search1 .chkSpan > input[type=checkbox],
    #box1.search1 .form-group > :last-child > input[type=checkbox],
    #Div1.search1 .form-group > :last-child > input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin: 0 4px 0 0;
        vertical-align: middle;
    }

    .chkSpan {
        white-space: nowrap;
    }

    [id$="chartContainer"][style*="15%"] {
        margin-bottom: max(15%, 56px) !important;
    }

    header.panel-heading:has(> .hd-btns) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .btn-sm,
    .btn-group[data-toggle="buttons"] > .btn,
    header.header > .btn-xs,
    #box1.search1 .btn-xs,
    #Div1.search1 .btn-xs,
    .PageArea .btn-xs,
    .panel-heading .btn-xs,
    .searchReset .btn-lg,
    .table-responsive .btn-xs,
    :has(> #Sel_totCnt) > .btn {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    div:has(> table.report1),
    div:has(> table table.report1) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.report1 .head1,
    table.report1 td.headM5,
    table.report1 td.headM6,
    table.report1 td.headM7,
    table.report1 th {
        white-space: nowrap;
    }

    header.panel-heading:has(> .pull-right),
    div:has(> header.panel-heading + .pull-right) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])) {
        display: flex;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])) > div {
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 37px;
        word-break: keep-all;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])) > div > a {
        line-height: 1.4;
        padding: 6px 0;
    }

    header.panel-heading .nav-tabs {
        position: static !important;
        margin: 0 0 -2px auto;
        align-self: flex-end;
    }

    header.panel-heading .nav-tabs > li > a {
        font-size: 14px;
        line-height: 32px;
    }

    header.panel-heading:has(> .nav-tabs) {
        row-gap: 12px;
    }

    header.panel-heading > .hd-btns {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        margin-left: auto;
    }

    header.panel-heading > .hd-btns > .btn {
        margin: 0;
    }

    header.panel-heading {
        word-break: keep-all;
        text-wrap: balance;
        font-size: 18px !important;
    }

    section.panel > header.panel-heading.text-center,
    #helparea + .wrapper-lg.row section.panel > header.panel-heading.text-center {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .PageArea > .col-lg-12 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px;
        float: none;
    }

    .PageArea > .col-lg-12 > div {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .PageArea > .col-lg-12 > div:first-child {
        order: 1;
        flex: 1 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

    .PageArea > .col-lg-12 > div:first-child > * {
        margin: 0;
    }

    .PageArea > .col-lg-12 > div:last-child {
        order: 2;
        flex: 0 0 auto;
    }

    .PageArea > .col-lg-12 > div:last-child .pull-right {
        float: none;
    }

    .PageArea > .col-lg-12 > div:has(> .pagination) {
        order: 3;
        flex: 0 0 100%;
        text-align: center;
    }

    .PageArea .pagination {
        margin: 0;
    }

    header.panel-heading > .pull-right,
    div:has(> header.panel-heading + .pull-right) > .pull-right {
        float: none;
        margin-left: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    header.panel-heading > .btn.pull-right {
        justify-content: center;
    }

    :has(> #Sel_totCnt) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 4px;
    }

    :has(> #Sel_totCnt)::after {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
    }

    :has(> #Sel_totCnt) > .btn {
        order: 2;
        margin: 0;
    }

    :has(> #Sel_totCnt) > iframe {
        position: absolute;
        width: 0;
        height: 0;
        border: 0;
    }

    #box1.search1,
    #Div1.search1,
    #box1.search1 :has(> .form-group),
    #Div1.search1 :has(> .form-group) {
        display: flex;
        flex-wrap: wrap;
        float: none;
        width: 100%;
    }

    #box1.search1 > :has(> .form-group),
    #Div1.search1 > :has(> .form-group) {
        display: contents;
    }

    #box1.search1 > :not(:has(> .form-group)):has(> * > .form-group),
    #Div1.search1 > :not(:has(> .form-group)):has(> * > .form-group),
    #box1.search1 > :not(:has(> .form-group)) > :has(> .form-group),
    #Div1.search1 > :not(:has(> .form-group)) > :has(> .form-group) {
        display: contents;
    }

    #box1.search1 .form-group,
    #Div1.search1 .form-group {
        display: flex;
        align-items: center;
        flex: 0 0 50%;
        width: 50%;
        margin: 0;
        padding: 4px 8px;
    }

    #box1.search1 .form-group > :first-child:not(:only-child),
    #Div1.search1 .form-group > :first-child:not(:only-child) {
        flex: 0 0 84px;
        width: 84px;
        padding: 0 6px 0 0;
        font-size: 13px;
        line-height: 1.3;
        word-break: keep-all;
    }

    #box1.search1 .form-group > :last-child:not(:only-child),
    #Div1.search1 .form-group > :last-child:not(:only-child) {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 0;
        word-break: keep-all;
    }

    #box1.search1 .form-group select,
    #Div1.search1 .form-group select,
    #box1.search1 .form-group input[type=text],
    #Div1.search1 .form-group input[type=text] {
        max-width: 100% !important;
    }

    #box1.search1 .form-group > :last-child:has(> a > img[src*="icoSearch"]),
    #Div1.search1 .form-group > :last-child:has(> a > img[src*="icoSearch"]) {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #box1.search1 .form-group > :last-child:has(> a > img[src*="icoSearch"]) > input,
    #Div1.search1 .form-group > :last-child:has(> a > img[src*="icoSearch"]) > input {
        flex: 1 1 auto;
        min-width: 0;
    }

    #box1.search1 .form-group > :last-child > a:has(> img[src*="icoSearch"]),
    #Div1.search1 .form-group > :last-child > a:has(> img[src*="icoSearch"]) {
        flex: 0 0 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form1 .lbb {
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .form1 .lbb input.txt,
    .form1 .lbb select.txt {
        max-width: 100%;
    }

    .t_view table .lbl,
    .t_view table .lbb {
        font-size: 14px;
    }

    .xs_height > .cursor:has(> .pull-right) {
        position: relative;
        margin-bottom: 0 !important;
        line-height: 32px;
        padding-right: 92px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .xs_height > .cursor > .pull-right {
        position: absolute;
        top: 0;
        right: 0;
        float: none;
    }

    .icons:has(> img[src*="CalWeek"]) > img {
        vertical-align: middle !important;
        margin-right: 4px;
    }

    .icons:has(> img[src*="CalWeek"]) > img ~ img {
        margin-left: 14px;
    }

    :has(> .cal_top_icon) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
    }

    .cal_top_icon {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0 !important;
    }

    .searchReset {
        margin-top: 10px;
    }

    .searchReset .btn-lg {
        min-width: 0;
        padding: 6px 18px;
        font-size: 14px;
        border-radius: 4px;
        margin-left: 6px;
    }
}

@media (max-width: 991px) {
    .table-grade4 > table {
        min-width: 600px;
    }

    .table-grade4 > table tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .table-grade4 > table tr.grade > :first-child {
        background-color: #fff;
    }

    header.ippbd_had2 {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body table.office_table tr th::after,
    body table.office_table_biz tr th::after {
        display: none;
    }

    table.office_table tr > :first-child,
    body table.office_table_biz tr > :first-child {
        white-space: nowrap;
    }

    body table.office_table tr th,
    body table.office_table_biz tr th {
        width: auto !important;
        padding: 8px 3px;
        word-break: keep-all;
    }

    #selTerm {
        min-width: 110px;
    }

    :has(> .col-lg-6 > a > section._banner2_) {
        display: flex;
        flex-wrap: wrap;
    }

    .col-lg-6:has(> a > section._banner2_) {
        float: none;
        flex: 0 0 50%;
        width: 50%;
        padding-left: 6px;
        padding-right: 6px;
    }

    .col-lg-6 > a:has(> section._banner2_),
    .col-lg-6 > a > section._banner2_ {
        height: 100% !important;
        margin: 0 !important;
    }

    section._banner2_ {
        min-height: 100px;
        padding: 12px 8px;
    }

    section._banner2_ .of_banner {
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    section._banner2_ .of_banner .m-b {
        margin-bottom: 0;
    }

    section._banner2_ .of_banner img {
        max-height: 40px;
        width: auto;
    }

    section._banner2_ .banner-tit h4 {
        margin: 8px 0 0;
        font-size: 14px;
        word-break: keep-all;
    }
}

@media (max-width: 991px) {
    #box1.search1 .form-group.hidden,
    #Div1.search1 .form-group.hidden {
        display: none;
    }

    #box1.search1 .form-group:has(> .btn:first-child:not(:only-child)),
    #Div1.search1 .form-group:has(> .btn:first-child:not(:only-child)) {
        gap: 6px;
    }

    #box1.search1 .form-group > .btn:first-child:not(:only-child),
    #Div1.search1 .form-group > .btn:first-child:not(:only-child),
    #box1.search1 .form-group > .btn:last-child:not(:only-child),
    #Div1.search1 .form-group > .btn:last-child:not(:only-child) {
        flex: 0 0 auto;
        width: auto;
        padding: 6px 12px;
    }

    #box1.search1 .lbb > span:has(> input.txt + input.txt),
    #Div1.search1 .lbb > span:has(> input.txt + input.txt) {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #box1.search1 .lbb > span:has(> input.txt + input.txt) > input.txt,
    #Div1.search1 .lbb > span:has(> input.txt + input.txt) > input.txt {
        flex: 0 1 auto;
        min-width: 0;
    }

    .table-responsive td[colspan]:only-child {
        text-align: left;
        padding-left: 16px;
    }

    .table-responsive table table,
    .table-responsive table:not(:has(tr > :nth-child(3))) {
        min-width: 0 !important;
    }

    .table-responsive table:not(:has(tr > :nth-child(3))) td {
        white-space: normal;
    }

    .table > thead > tr > th,
    table.report1 td {
        font-size: 14px;
    }

    table.report1 td.lbl1 {
        word-break: keep-all;
    }

    table td.panel-heading,
    table th.panel-heading {
        display: table-cell;
    }

    .PageArea .pagination > li > a,
    .PageArea .pagination > li > span {
        min-width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .PageArea .pagination:not(:has(> li + li)) {
        display: none;
    }

    .searchReset .btn-xs,
    table.table .btn-xs,
    header.panel-heading > .pull-right > .btn,
    .calweekBody td > a.btn-xs {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    [id$="_ChartArea"] > [class*="col-lg-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .form1 .lbb > .btn-sm,
    .form1 .lbb > .btn,
    .form1 .lbb > input[type=file] {
        margin-bottom: 4px;
    }

    .lba {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .cal_top > .b-b {
        display: flow-root;
    }

    .calweekBody tr > td:first-child {
        word-break: keep-all;
    }
}

@media (max-width: 991px) {
    .table-responsive td:has(> .btn ~ .btn),
    .table-responsive td:has(> [class*="btn-"] ~ [class*="btn-"]),
    .table-responsive td.hn-nowrap,
    div[id$="_detail"] td.hn-nowrap {
        white-space: nowrap;
    }

    div[id$="_detail"]:has(> table[id^="tbody_"][id$="_detail"]) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    table[id^="tbody_"][id$="_detail"] {
        min-width: 760px;
    }

    #box1.search1 .form-group > :first-child:not(:only-child),
    #Div1.search1 .form-group > :first-child:not(:only-child) {
        min-width: min-content;
    }

    .pull-left.font-bold.h3:has(+ .searchReset) {
        float: none;
        width: auto;
        padding: 10px 0 0 !important;
        font-size: 18px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .font-bold.h3.m-t-xs > .btn-xs,
    .modal-header > button.close {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    #DeptReport1_DeptReportChart1_ChartArea > [class*="col-lg-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #DeptReport1_DeptReportChart1_ChartArea .panel-heading {
        font-size: 18px !important;
    }
}

@media (max-width: 991px) {
    div.lcs_wrap[onclick*="wrapFunc"] {
        display: none !important;
    }

    li.nav-item.dropdown:not(#btnAllMenu):has(> #admin-all-Menu),
    #admin-all-Menu:not(.dropdown-menu) {
        display: none;
    }

    .panel-body1 > .p-a > .cursor:has(> .pull-right) {
        position: relative;
        margin-bottom: 0 !important;
        line-height: 32px;
        padding-right: 92px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .panel-body1 > .p-a > .cursor > .pull-right {
        position: absolute;
        top: 0;
        right: 0;
        float: none;
    }

    .col-lg-12.tab_sm {
        display: flex;
    }

    .col-lg-12.tab_sm > .col-md-6 {
        flex: 1 1 50%;
        width: 50%;
    }

    .dash_btn_group > .col-lg-3 [class*="dash_btn"]:has(> h4) {
        display: flex;
        align-items: center;
    }

    .dash_btn_group > .col-lg-3 [class*="dash_btn"] > h4 {
        float: none;
        flex: 1 1 auto;
        min-width: 0;
        word-break: keep-all;
    }

    .dash_btn_group > .col-lg-3 [class*="dash_btn"]:has(> h4) > img {
        float: none;
        flex: 0 0 auto;
    }

    table.office_table td a[onclick],
    table.office_table_s td a[onclick] {
        display: inline-block;
        min-width: 32px;
        padding: 6px 0;
    }

    .row.m-n.text-center:has(> .col-lg-3.b-b.b-r) {
        display: flex;
        flex-wrap: wrap;
    }

    .row.m-n.text-center:has(> .col-lg-3.b-b.b-r) > .col-lg-3 {
        flex: 1 1 50%;
        width: 50%;
    }

    .row.m-n.text-center:has(> .col-lg-3.b-b.b-r) > .col-lg-3:nth-child(2n) {
        border-right: 0;
    }

    #nav .guid_s .btn-xs,
    .guid_stdt .guid_s .btn-xs,
    .form1 .btn-xs,
    .wrapper-lg > a.btn-xs,
    section.panel > a.btn-xs {
        min-height: 32px;
        padding-top: 6px;
        padding-bottom: 6px;
        vertical-align: middle;
    }

    #nav .label {
        font-size: 12px;
    }

    #nav .label:empty {
        display: none;
    }

    .guid_stdt .list-group-item {
        min-height: 0;
    }

    #profileTitle .btn-xs {
        min-width: 32px;
    }

    #box1.search1 .form-group > .lbl:first-child:not(:last-child) > input[type=checkbox],
    #Div1.search1 .form-group > .lbl:first-child:not(:last-child) > input[type=checkbox],
    .form1 .chkSpan > input[type=checkbox] {
        width: 18px;
        height: 18px;
        margin: 0 4px 0 0;
        vertical-align: middle;
    }

    .form1 .chkSpan {
        display: inline-flex;
        align-items: center;
        margin: 4px 12px 0 0;
    }

    .form1 .lbb > span:has(> input.txt + input.txt) {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        vertical-align: middle;
    }

    .form1 .lbb > span:has(> input.txt + input.txt) > input.txt {
        flex: 0 1 auto;
        min-width: 0;
    }

    :is(.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-8):is(.padder-l, .padder-r) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :is(.col-lg-4, .col-lg-6):has(.chartArea) + :is(.col-lg-4, .col-lg-6):has(.chartArea) {
        margin-top: 16px;
    }

    section.panel.wrapper-lg.b-a > section[style*="padding"] {
        padding: 16px 12px !important;
        word-break: keep-all;
    }

    section.panel.wrapper-lg.b-a > section[style*="padding"] .col-lg-12.wrapper {
        padding: 10px 0;
    }

    section.panel.wrapper-lg.b-a > section[style*="padding"] .lbb > .col-lg-5 {
        padding-left: 0;
        padding-right: 0;
    }

    section.panel.wrapper-lg.b-a > section[style*="padding"] .btn[style*="margin-left"] {
        margin-left: 0 !important;
    }

    section.panel.wrapper-lg.b-a > section[style*="padding"] .lbb .btn[style*="margin-left"] {
        margin-left: 8px !important;
    }

    [id$="chartContainer"][style*="width:150%"],
    [id$="chartContainer"][style*="width:220%"] {
        width: 100% !important;
        margin: 0 !important;
    }

    table.report1 td:has(> .btn ~ .btn),
    table.floatThead-table > tbody > tr > td:has(> .btn ~ .btn) {
        white-space: nowrap;
    }

    table.report1 .btn-xs {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    section.panel > .floatThead-wrapper:has(> table[id^="tbody_"]),
    section.panel > div:not([class]) > .floatThead-wrapper:has(> table[id^="tbody_"]),
    section.panel > div:not([class]):has(> table[id^="tbody_"]),
    section.panel:not(:has(> .floatThead-wrapper)):has(> table[id^="tbody_"]),
    section:not([class]):has(> header.panel-heading + table.table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    section.panel:not(:has(> .floatThead-wrapper)):has(> table[id^="tbody_"]) > header.panel-heading,
    section.panel:not(:has(> .floatThead-wrapper)):has(> table[id^="tbody_"]) > footer.panel-footer,
    section:not([class]):has(> header.panel-heading + table.table) > header.panel-heading {
        position: sticky;
        left: 0;
    }

    :is(section.panel, section.panel > div:not([class]), section.panel > .floatThead-wrapper, section.panel > div:not([class]) > .floatThead-wrapper) > table[id^="tbody_"]:not([id$="_detail"]) th,
    section:not([class]) > header.panel-heading + table.table th {
        white-space: nowrap;
    }

    :is(section.panel, section.panel > div:not([class]), section.panel > .floatThead-wrapper, section.panel > div:not([class]) > .floatThead-wrapper) > table[id^="tbody_"]:not([id$="_detail"]) td {
        word-break: keep-all;
    }

    .m-t:has(> table.table.b-t.b-light),
    .m-t > .col-lg-12:has(> table.table.b-t.b-light) {
        clear: both;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .m-t > table.table.b-t.b-light td,
    .m-t > .col-lg-12 > table.table.b-t.b-light td {
        word-break: keep-all;
    }

    .m-t > table.table.b-t.b-light td.th,
    .m-t > .col-lg-12 > table.table.b-t.b-light td.th {
        white-space: nowrap;
    }

    .wrapper.row > .m-t:has(> .col-lg-12 > .panel-heading) {
        clear: both;
    }

    .wrapper.row > .m-t > .col-lg-12:has(> .col-lg-6.panel-heading + .col-lg-6.text-right.panel-heading) {
        display: flex;
        align-items: center;
    }

    .wrapper.row > .m-t > .col-lg-12 > .col-lg-6.panel-heading {
        width: auto;
    }

    .wrapper.row > .m-t > .col-lg-12 > .col-lg-6.panel-heading:first-child {
        flex: 1 1 auto;
    }

    .wrapper.row > .m-t > .col-lg-12 > .panel-heading {
        font-size: 18px !important;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])):has(> div:nth-child(6)) {
        flex-wrap: wrap;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])):has(> div:nth-child(6)) > div {
        flex: 1 1 90px;
        min-width: 0;
        width: auto;
    }

    .Step1 > .row:has(> [style*="table-cell"]) {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
        gap: 2px;
        width: 100% !important;
        margin: 0;
    }

    .Step1 > .row:has(> [style*="table-cell"])::before,
    .Step1 > .row:has(> [style*="table-cell"])::after {
        display: none;
    }

    .Step1 > .row:has(> [style*="table-cell"]) > div {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 0;
        min-height: 40px;
        padding: 4px;
        word-break: keep-all;
    }

    .Step1 > .row:has(> [style*="table-cell"]) > div > a {
        line-height: 1.3;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])) > div[id$="TabArea"] {
        flex: 1 1 100%;
        flex-wrap: wrap;
        align-items: stretch;
        min-height: 0;
        padding: 0;
        background: none;
    }

    .Step1 > .row > div[id$="TabArea"] > .col-lg-12 {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }

    .Step1 > .row > div[id$="TabArea"] > div:not(.col-lg-12),
    .Step1 > .row > div[id$="TabArea"] > .col-lg-12 > div {
        float: none;
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 37px;
        word-break: keep-all;
    }

    .Step1 > .row > #tab1:has(> .top-tab) {
        display: flex;
        flex: 1 1 auto;
        align-items: stretch;
        justify-content: flex-start;
    }

    #tab1 > .top-tab {
        float: none;
        width: auto !important;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 37px;
        padding: 4px 3px;
    }

    #tab1 > .top-tab a {
        line-height: 1.3;
    }

    #tab1 > .top-tab a span {
        word-break: keep-all;
    }

    .JobSearch1 > .row:has(> .cursor),
    .JobSearch1 > * > .row:has(> .cursor),
    .JobSearch1 > * > .row > .col-lg-12:has(> .cursor) {
        display: flex;
        flex-wrap: wrap;
    }

    .JobSearch1 > .row:has(> .cursor)::before,
    .JobSearch1 > .row:has(> .cursor)::after,
    .JobSearch1 > * > .row:has(> .cursor)::before,
    .JobSearch1 > * > .row:has(> .cursor)::after,
    .JobSearch1 > * > .row > .col-lg-12:has(> .cursor)::before,
    .JobSearch1 > * > .row > .col-lg-12:has(> .cursor)::after {
        display: none;
    }

    .JobSearch1 > .row > .cursor,
    .JobSearch1 > * > .row > .cursor,
    .JobSearch1 > * > .row > .col-lg-12 > .cursor {
        float: none;
        flex: 1 1 0;
        width: auto;
        min-width: 4.5em;
        display: flex;
        flex-direction: column;
        padding-left: 4px;
        padding-right: 4px;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .JobSearch1 > .row > .cursor > h2,
    .JobSearch1 > * > .row > .cursor > h2,
    .JobSearch1 > * > .row > .col-lg-12 > .cursor > h2 {
        margin-top: auto;
        padding-top: 4px;
    }

    header.panel-heading:has(> .nav-tabs) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .search1[id$="_searchform"],
    .search1[id$="_searchform"] :has(> .form-group) {
        display: flex;
        flex-wrap: wrap;
        float: none;
        width: 100%;
    }

    .search1[id$="_searchform"] > :has(> .form-group) {
        display: contents;
    }

    .search1[id$="_searchform"] .form-group {
        display: flex;
        align-items: center;
        flex: 0 0 50%;
        width: 50%;
        margin: 0;
        padding: 4px 8px;
    }

    .search1[id$="_searchform"] .form-group > :first-child:not(:only-child) {
        flex: 0 0 84px;
        width: 84px;
        min-width: min-content;
        padding: 0 6px 0 0;
        font-size: 13px;
        line-height: 1.3;
        word-break: keep-all;
    }

    .search1[id$="_searchform"] .form-group > :last-child:not(:only-child) {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 0;
        word-break: keep-all;
    }

    .search1[id$="_searchform"] .form-group select,
    .search1[id$="_searchform"] .form-group input[type=text] {
        max-width: 100% !important;
    }

    .search1[id$="_searchform"] .form-group:has(> .lbl:empty) {
        display: none;
    }

    .search1[id$="_searchform"] .lbb:has(> input.txt + input.txt) {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .search1[id$="_searchform"] .lbb:has(> input.txt + input.txt) > input.txt {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }

    .search1[id$="_searchform"] .lbb > select.txt.col-lg-12 + select.txt {
        margin-top: 4px;
    }

    #box1.search1 .form-group:has(> [id$="_hnMyperSpan"]),
    #Div1.search1 .form-group:has(> [id$="_hnMyperSpan"]) {
        flex-wrap: wrap;
        gap: 4px 6px;
    }

    #box1.search1 [id$="_hnMyperSpan"],
    #Div1.search1 [id$="_hnMyperSpan"] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    #box1.search1 [id$="_hnMyperSpan"] > br:first-child,
    #Div1.search1 [id$="_hnMyperSpan"] > br:first-child {
        display: none;
    }

    #box1.search1 .lbb:has(> [id$="_Howmuch"]) {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    #box1.search1 .lbb > [id$="_Howmuch"] {
        flex: 1 1 60px;
        width: auto;
        min-width: 0;
    }

    #box1.search1 .form-group > :last-child:not(:only-child)[style*="padding-left"],
    #Div1.search1 .form-group > :last-child:not(:only-child)[style*="padding-left"] {
        padding-left: 0 !important;
    }

    #box1.search1 .form-group > :first-child:not(:only-child):is([style*="padding-left"], [style*="padding-right"]),
    #Div1.search1 .form-group > :first-child:not(:only-child):is([style*="padding-left"], [style*="padding-right"]) {
        padding-left: 0 !important;
        padding-right: 6px !important;
    }

    #box1.search1 .form-group > :last-child > input#uName.txt,
    #Div1.search1 .form-group > :last-child > input#uName.txt,
    #box1.search1 .form-group > :last-child > input#Uname.txt,
    #Div1.search1 .form-group > :last-child > input#Uname.txt,
    #box1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child .hnDatepicker[style*="width"],
    #Div1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child .hnDatepicker[style*="width"] {
        width: 100% !important;
    }

    #box1.search1 .form-group > :last-child:not(:only-child) > select.txt:only-child,
    #Div1.search1 .form-group > :last-child:not(:only-child) > select.txt:only-child,
    #box1.search1 .form-group > :last-child:not(:only-child) > select.txt:first-child:nth-last-child(2):has(+ input[type=hidden]),
    #Div1.search1 .form-group > :last-child:not(:only-child) > select.txt:first-child:nth-last-child(2):has(+ input[type=hidden]) {
        width: 100%;
    }

    #box1.search1 .form-group > :last-child > #Yterm2 + span:has(> .hnDatepicker)::before,
    #Div1.search1 .form-group > :last-child > #Yterm2 + span:has(> .hnDatepicker)::before {
        content: "";
        display: block;
        height: 4px;
    }

    .form1 > .form-group > [class*="col-lg-"].pull-right {
        float: none !important;
    }

    .form1 > .form-group:has(> [class*="col-lg-"].pull-right) {
        display: flow-root;
    }

    #adminArea > .col-lg-12:has(#CareerChart1Area),
    #CareerChart1Area > section.wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    #CareerChart1Area [id$="CareerStepChart"] td:nth-last-child(5) {
        white-space: nowrap;
    }

    .calweekBody td > a.btn-xs {
        margin: 2px 0;
    }

    .cal_top > .col-lg-12:not(.d-flex):has(> [class*="col-md-"]) {
        display: flow-root;
    }

    .cal_top .tit1 {
        word-break: keep-all;
    }

    .OfficePerProfile div:has(> .Office_btn) {
        display: flex;
        flex-wrap: wrap;
    }

    .OfficePerProfile div:has(> .Office_btn) > div {
        float: none;
        flex: 1 1 50%;
        width: auto !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 6px 4px;
        line-height: 1.3;
        text-align: center;
        word-break: keep-all;
    }

    .OfficePerProfile div:has(> .Office_btn) > div:first-child:nth-last-child(odd) {
        flex-basis: 100%;
    }

    .OfficePerProfile div:has(> .Office_btn) > div::before {
        display: none !important;
    }

    table.view_step th,
    table.view_step td {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 14px;
        word-break: keep-all;
    }

    table.view_step td > div[style*="font-size"] {
        font-size: inherit !important;
    }

    table.view_step td p {
        font-size: 14px;
    }

    .Office_detail.gap table.view_step th,
    .Office_detail.gap table.view_step td {
        padding-left: 2px;
        padding-right: 2px;
        word-break: normal;
        text-wrap: balance;
    }

    .myInfo .view_step td > a.btn {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #profile_content_body .t_view th,
    #profile_content_body .t_view td {
        word-break: keep-all;
    }

    #profile_content_body > .row.wrapper > .col-lg-12[style*="margin-left"] {
        margin-left: 0 !important;
    }

    #profile_content_body .panel-body.t_view:not(.table-responsive) {
        overflow-x: auto;
    }

    section.panel > .table-responsive.pull-left:has(+ .pull-left > img[id$="CircleGraph"]) {
        float: none !important;
        width: auto !important;
    }

    section.panel > .pull-left:has(> img[id$="CircleGraph"]) {
        float: none !important;
        width: 100%;
        margin: 10px 0 0 !important;
        text-align: center;
    }

    section.panel > .pull-left > img[id$="CircleGraph"] {
        max-width: 100%;
        height: auto;
    }

    section.panel-info > div.panel-body[id$="mTitle"][style*="min-height"] {
        min-height: 0 !important;
    }

    section.panel-info > .table-responsive td.ar {
        white-space: nowrap;
    }

    .col-xs-4.cursor.b-a.wrapper .m-b-xs {
        word-break: keep-all;
    }

    section.panel-info > .table-responsive > table.table td.lbl1.ac {
        min-width: 140px;
    }

    .col-lg-4.no-padder + .col-lg-8:has(> section.panel > .panel-body > .col-xs-2-4-2) {
        padding-left: 0;
    }

    .Activity .panel-body > .wrapper-n > .h5 {
        font-size: 14px;
    }

    .col-lg-12.text-center.no-padder:has(> a > .fa-refresh) > .btn-lg {
        min-width: 0;
        min-height: 32px;
        padding: 6px 18px;
        font-size: 14px;
        border-radius: 4px;
        margin-left: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    [id$="_teacherArea"] table.no-wrap th,
    [id$="_teacherArea"] table.no-wrap td {
        font-size: 14px;
        word-break: keep-all;
    }

    [id$="_teacherArea"] table.no-wrap tr > :last-child {
        white-space: nowrap;
    }

    [id$="_teacherArea"] .chartArea > svg {
        display: block;
        margin: 0 auto;
    }

    #GraphArea .panel-body:has(> #JCodeH2chartContainer) {
        height: auto !important;
    }

    #GraphArea #JCodeH2chartContainer {
        display: flow-root;
        height: auto;
    }

    #GraphArea #JCodeH2chartContainer > .col-lg-9 {
        float: left;
        width: 75%;
        padding: 0;
    }

    #GraphArea #JCodeH2chartContainer > .col-lg-3 {
        float: left;
        width: 25%;
        padding: 0;
        text-align: right;
        white-space: nowrap;
    }

    #genderchartContainer,
    #genderchartContainer2 {
        position: relative;
    }

    #Gender1RatioDiv,
    #Gender2RatioDiv {
        left: 0;
        right: 0;
        width: auto !important;
        margin-left: 0 !important;
    }

    .pies-container {
        width: auto !important;
    }

    header + table.floatThead-table th,
    header + table.floatThead-table td:has(> .btn ~ .btn) {
        white-space: nowrap;
    }

    :has(> #Sel_totCnt) > select {
        order: 2;
        min-width: 0;
        max-width: 100%;
        min-height: 32px;
    }

    form:has(> #Sel_totCnt),
    body:has(> #Sel_totCnt) {
        display: block;
    }

    form:has(> #Sel_totCnt)::after,
    body:has(> #Sel_totCnt)::after {
        content: none;
    }

    .panel-info table:has(> tbody > tr > td > .i-s),
    .panel-info table:has(> tbody > tr > td > .i-s) > tbody {
        display: block;
    }

    .panel-info table:has(> tbody > tr > td > .i-s) > tbody > tr {
        display: flex;
        flex-wrap: wrap;
    }

    .panel-info table:has(> tbody > tr > td > .i-s) > tbody > tr > td {
        display: flex;
        align-items: center;
        flex: 1 1 140px;
        padding: 12px 10px;
        text-align: left;
    }

    .panel-info table:has(> tbody > tr > td > .i-s) > tbody > tr > td > .i-s {
        flex: 0 0 auto;
    }

    .panel-info table:has(> tbody > tr > td > .i-s) > tbody > tr > td > .clear {
        flex: 1 1 auto;
        min-width: 0;
        word-break: keep-all;
    }

    section.r-had > header.panel-heading.text-center:has(> .pull-right),
    section.r-had > header.panel-heading.text-center > .pull-right {
        justify-content: center;
    }

    .gd_quired0,
    .gd_quired1,
    .gd_quired2 {
        height: 34px;
        padding-top: 7px;
    }

    #TselectBox {
        min-width: 100px;
    }

    .inline:has(> #TselectBox) {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        max-width: 100%;
    }

    [id$="_ChartArea"] .bg-light[style*="height:100px"] {
        height: auto !important;
    }

    .table-responsive td a > font.text-xs {
        font-size: inherit !important;
    }

    .table-responsive input[type=file] {
        max-width: 100%;
    }

    .table-responsive td > input[type=file]:only-child {
        width: 100%;
    }

    .table-responsive table:has(input[type=file]) > colgroup > col:only-child {
        width: auto;
    }

    .bg-white.clearfix :is(.form-group, .input-group).padder-v:has(> .form-group.col-lg-4.text-center + .form-group.col-lg-8) {
        display: flex;
        align-items: center;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 0;
    }

    .bg-white.clearfix :is(.form-group, .input-group).padder-v:has(> .form-group.col-lg-4.text-center + .form-group.col-lg-8):has(input[type=checkbox]) {
        align-items: flex-start;
    }

    .bg-white.clearfix :is(.form-group, .input-group).padder-v > .form-group.col-lg-4.text-center:has(+ .form-group.col-lg-8) {
        flex: 0 0 84px;
        margin: 0;
        padding: 0 6px 0 0;
        text-align: left;
        font-size: 13px;
        word-break: keep-all;
    }

    .bg-white.clearfix :is(.form-group, .input-group).padder-v > .form-group.col-lg-4.text-center + .form-group.col-lg-8 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .bg-white.clearfix .input-group.padder-v[style*="90%"] {
        width: auto !important;
        margin-left: 0 !important;
    }

    #form1 > .wrapper.row > .col-lg-12:has(> .wrapper.row) {
        padding-left: 0;
        padding-right: 0;
    }

    #hcTrHead > td {
        font-size: 14px;
    }

    #form1 > .wrapper:has(.satchart) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    #form1 > .wrapper:has(.satchart) > .tit .btn {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
    }

    .col-lg-12.text-left:has(> table[id^="AlertReport_"]) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    table[id^="AlertReport_"] th,
    table[id^="AlertReport_"] td {
        word-break: keep-all;
    }

    #myModal .modal-dialog,
    #myModal .modal-content {
        width: auto !important;
    }

    #myModal .modal-dialog {
        margin: 30px 10px !important;
    }

    #myModal .modal-header {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #myModal .modal-header > .modal-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    #myModal .modal-header > button.close {
        flex: 0 0 auto;
        margin: 0;
    }

    .Office_detail .step_table > .panel-body > .col-lg-12.no-padder:has(> [class*="col-md-"].b-r:not(.col-md-12):not(.hidden)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: #e3e2e2;
    }

    .Office_detail .step_table > .panel-body > .col-lg-12.no-padder:has(> [class*="col-md-"].b-r:not(.col-md-12):not(.hidden)) > [class*="col-md-"] {
        float: none;
        width: auto !important;
        min-height: 0;
        border-right: 0;
        background: #fff;
    }

    .Office_detail .step_table > .panel-body > .col-lg-12.no-padder:has(> [class*="col-md-"].b-r:not(.col-md-12):not(.hidden)) > :last-child:nth-child(odd of :not(.hidden)) {
        grid-column: 1 / -1;
    }

    .Office_detail .step_table.s_table1 > .panel-body > .col-lg-12.no-padder > [class*="col-md-"] table td {
        height: auto;
    }

    form > div.row:not(.wrapper):not(.wrapper-lg):not(.wrapper-md):not(.wrapper-sm):not(.padder) > section.panel.b-a,
    form > header.header.bg-light.h2 ~ section.panel.b-a:not(.panel-default),
    form > header.header.bg-light.h2 ~ section.panel.wrapper-lg:not(.panel-default),
    form > header.header.bg-light.h2 ~ div.clearfix:not([class*="wrapper"]) > section.panel.b-a,
    header.header.bg-light.h2 + form > section.panel.b-a,
    form > div.wrapper.viewbox.panel {
        margin-left: 10px;
        margin-right: 10px;
    }

    form > header.header.bg-light.h2 ~ div.panel.wrapper-lg.row {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    div.viewbox {
        width: auto;
        max-width: 800px;
    }

    #box1:not([class]):has(> table.search1) {
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    section.panel.panel-default > header + div.table-responsive > .table-responsive {
        overflow-y: hidden;
    }

    section.panel.panel-default > header + div.table-responsive > .table-responsive > table.table,
    section.panel.panel-default > header + div.table-responsive > table.vbox {
        margin-bottom: 0;
        border-bottom: 1px solid #dfdcdc;
    }

    form#form1 > header.header.bg-light.h2 + div.wrapper[style*="width:800px"] {
        width: auto !important;
    }

    header.panel-heading .nav-tabs > li > a > .badge.hidden-xs {
        display: inline-block !important;
        margin-left: 4px;
        white-space: nowrap;
    }
}

@media (max-width: 575px) {
    .pull-left.font-bold.h3:has(+ .searchReset) {
        font-size: 16px;
    }

    #DeptReport1_DeptReportChart1_ChartArea .panel-heading {
        font-size: 16px !important;
    }

    .col-lg-12.wrapper:has(> #box1.search1),
    .col-lg-12.wrapper:has(> #Div1.search1) {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 575px) {
    .tab1.d-flex {
        flex-wrap: wrap;
    }

    .tab1.d-flex > .flex1 {
        flex: 1 1 33.333%;
    }

    .tab1.d-flex > .flex1 > a.h4 {
        font-size: 14px;
        word-break: keep-all;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td,
    table.report1 td,
    .t_view table .lbl,
    .t_view table .lbb,
    body table.office_table tr th,
    body table.office_table_biz tr th {
        font-size: 13px;
    }

    header.panel-heading {
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {
    header.panel-heading > .pull-right:has(> :not(script) ~ :not(script)),
    header.panel-heading > .hd-btns,
    div:has(> header.panel-heading + .pull-right) > .pull-right:has(> :not(script) ~ :not(script)) {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .panel header.panel-heading:has(> .pull-right, > .hd-btns, > .nav-tabs) {
        display: flex !important;
        height: auto;
    }

    .panel header.panel-heading > .nav-tabs {
        margin: 0 0 -2px auto !important;
    }

    header.header.bg-light.h2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 6px;
        font-size: 0;
    }

    header.header.bg-light.h2 > #headTitle {
        flex: 0 0 100%;
        font-size: 18px;
    }

    header.header.bg-light.h2 > #headTitle:empty {
        display: none;
    }

    header.header.bg-light.h2 > .btn {
        margin: 0 4px 0 0 !important;
    }

    header.header.bg-light.h2 {
        padding-bottom: 10px;
    }

    #box1.search1,
    #Div1.search1 {
        margin-top: 6px !important;
    }

    header.panel-heading:has(> .btn.pull-right):not(:has(> .nav-tabs)) {
        flex-wrap: nowrap;
    }

    #box1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child,
    #Div1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    #box1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child > span:has(> .hnDatepicker),
    #Div1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child > span:has(> .hnDatepicker),
    #box1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child > .hnDatepicker,
    #Div1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child > .hnDatepicker {
        flex: 1 1 70px;
        min-width: 0;
    }

    #box1.search1 .form-group > :last-child > .lbb:has(> span ~ span > .hnDatepicker),
    #Div1.search1 .form-group > :last-child > .lbb:has(> span ~ span > .hnDatepicker) {
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        gap: 4px;
    }

    #box1.search1 .form-group > :last-child > .lbb > span:has(> .hnDatepicker),
    #Div1.search1 .form-group > :last-child > .lbb > span:has(> .hnDatepicker) {
        flex: 1 1 70px;
        min-width: 0;
    }

    #box1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child .hnDatepicker,
    #Div1.search1 .form-group:has(> :last-child span ~ span > .hnDatepicker, > :last-child .hnDatepicker ~ .hnDatepicker) > :last-child .hnDatepicker {
        width: 100%;
        padding-left: 3px;
        padding-right: 3px;
        font-size: 13px;
    }

    #helparea ~ .wrapper-lg.row .col-lg-12.no-padder.m-b.clearfix {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #box1.search1 .hnDatepicker,
    #Div1.search1 .hnDatepicker {
        width: 86px;
    }

    #box1.search1 .form-group,
    #Div1.search1 .form-group {
        flex-basis: 100%;
        width: 100%;
    }

    .panel > .pull-left + header.panel-heading {
        clear: both;
    }

    .panel header.panel-heading .nav-tabs {
        display: flex !important;
        min-width: 0;
    }

    .panel header.panel-heading .nav-tabs > li {
        float: none;
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
    }

    .panel header.panel-heading .nav-tabs > li > a {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        min-height: 35px;
        padding: 4px 6px;
        line-height: 1.3;
        text-align: center;
        word-break: keep-all;
    }

    .table td .label {
        font-size: 11px;
    }
}

@media (max-width: 575px) {
    .dash_btn_group > .col-lg-3 [class*="dash_btn"] > h4 {
        font-size: 18px;
    }

    .row.m-n.text-center:has(> .col-lg-3.b-b.b-r) > .col-lg-3 {
        flex-basis: 100%;
        width: 100%;
        border-right: 0;
    }

    .row.m-n.text-center:has(> .col-lg-3.b-b.b-r) > .col-lg-3:not(:last-child) {
        border-bottom: 1px solid #e3e2e2;
    }

    section.panel.wrapper-lg.b-a:has(section.r-had) > .col-lg-12.wrapper,
    section.panel.wrapper-lg.b-a:has(section.r-had) .col-lg-12.wrapper .no-padder.m-t > [class*="col-lg-"] {
        padding-left: 0;
        padding-right: 0;
    }

    section.panel.wrapper-lg.b-a > .col-lg-12.wrapper section.r-had > .panel-body {
        padding: 10px 5px;
    }

    .wrapper.row > .m-t > .col-lg-12 > .panel-heading {
        font-size: 16px !important;
    }

    .Step1 > .row:not(:has(> [style*="table-cell"])) > div > a {
        font-size: 13px;
    }

    .Step1 > .row > div[id$="TabArea"] > div:not(.col-lg-12) {
        flex: 1 0 auto;
    }

    .Step1 > .row > div[id$="TabArea"] > .col-lg-12 > div {
        flex: 1 0 50%;
    }

    #tab1 > .top-tab a span {
        font-size: 13px;
    }

    #GraphArea .Step1 > .row:has(> div > p > i) {
        flex-wrap: wrap;
    }

    #GraphArea .Step1 > .row:has(> div > p > i) > div {
        flex: 1 1 33.333%;
        flex-direction: column;
        padding: 8px 4px;
    }

    #GraphArea .Step1 > .row > div > p:has(> i) {
        height: auto !important;
        margin: 0 0 4px;
    }

    #GraphArea .Step1 > .row > div > p > i {
        font-size: 28px !important;
    }

    .JobSearch1 > .row > .cursor,
    .JobSearch1 > * > .row > .cursor,
    .JobSearch1 > * > .row > .col-lg-12 > .cursor {
        flex: 1 0 25%;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 13px;
    }

    header.panel-heading > .pull-right:has(> .customtab3) {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 0;
        padding: 0;
    }

    header.panel-heading > .pull-right > .customtab3 {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        margin: 0 0 -2px;
    }

    #counBody > header.panel-heading {
        height: auto;
    }

    #counBody .btn-group[data-toggle="buttons"] {
        display: flex;
        flex-wrap: wrap;
    }

    #counBody .btn-group[data-toggle="buttons"] > label.btn {
        float: none;
        flex: 1 0 auto;
        width: auto !important;
        white-space: normal;
        word-break: keep-all;
    }

    #counBody .lbb > span:has(> .btn-group) {
        width: 100% !important;
    }

    #counBody .text-center:has(> #CounselInputBtn) {
        display: flex;
        gap: 6px;
    }

    #counBody .text-center:has(> #CounselInputBtn) > .btn-lg {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
        font-size: 16px;
    }

    .search1[id$="_searchform"] .form-group {
        flex-basis: 100%;
        width: 100%;
    }

    #box1.search1 .lbb:has(> #_Always) > span:has(> #Edate),
    #Div1.search1 .lbb:has(> #_Always) > span:has(> #Edate) {
        display: block;
        margin-bottom: 4px;
    }

    #box1.search1 .form-group:has(> .lbb #BirthFrom),
    #Div1.search1 .form-group:has(> .lbb #BirthFrom) {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    #box1.search1 .form-group:has(> .lbb #BirthFrom) > *,
    #Div1.search1 .form-group:has(> .lbb #BirthFrom) > * {
        flex-basis: 100%;
        width: 100%;
    }

    #box1.search1 .form-group > :last-child:has(> #Yterm2 + span > .hnDatepicker),
    #Div1.search1 .form-group > :last-child:has(> #Yterm2 + span > .hnDatepicker) {
        display: block;
    }

    #box1.search1 .form-group > :last-child:has(> #Yterm2 + span > .hnDatepicker) > span > .hnDatepicker,
    #Div1.search1 .form-group > :last-child:has(> #Yterm2 + span > .hnDatepicker) > span > .hnDatepicker {
        width: calc(50% - 8px);
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item > td > .col-lg-12 {
        padding-left: 5px;
        padding-right: 5px;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 6px;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child::after {
        content: "";
        flex-basis: 100%;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child > td {
        padding: 0;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child > td:nth-child(2) {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child > td:nth-child(n+4) {
        order: 1;
        width: auto !important;
        margin-top: 8px;
    }

    :is([id$="MonthCalendar"], [id$="WeekCalendar"]) > tbody > tr.post-item table > tbody > tr:first-child > td:last-child:nth-child(n+5) {
        margin-left: auto;
    }

    [id$="MonthCalendar"] table.cal {
        table-layout: fixed;
    }

    [id$="MonthCalendar"] table.cal th {
        width: auto !important;
    }

    #box1.search1 > .pull-left.wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        flex: 1 1 100%;
        float: none;
    }

    #box1.search1 > .pull-left.wrapper > * {
        margin: 0;
    }

    #box1.search1 > .pull-left.wrapper > #mUserID {
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
    }

    #box1.search1 > .pull-left.wrapper > #historyBtn,
    #box1.search1 > .pull-left.wrapper > #modBtn {
        flex: 1 1 calc(50% - 3px);
    }

    #box1.search1 > .pull-left.wrapper > #COUNSELTIME {
        flex: 1 1 0;
        min-width: 120px;
    }

    .myProfile .myText {
        padding-left: 15px;
        padding-right: 15px;
    }

    .myProfile .myText > .picture.pfCard {
        float: none !important;
        display: table;
        margin: 0 auto 10px;
    }

    .myProfile .myText > .text-left {
        float: none !important;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto !important;
    }

    table.view_step th,
    table.view_step td,
    table.view_step td p {
        font-size: 13px;
    }

    #S1 table.view_step:has(> tbody > tr:nth-child(2)):has(> tbody > tr:first-child > :nth-child(3)):not(:has(> tbody > tr > :nth-child(5))) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #S1 table.view_step:has(> tbody > tr:nth-child(2)):has(> tbody > tr:first-child > :nth-child(3)):not(:has(> tbody > tr > :nth-child(5))) > tbody,
    #S1 table.view_step:has(> tbody > tr:nth-child(2)):has(> tbody > tr:first-child > :nth-child(3)):not(:has(> tbody > tr > :nth-child(5))) > tbody > tr {
        display: contents;
    }

    #S1 table.view_step > tbody > tr:nth-child(2) > :nth-child(-n+2) {
        order: 1;
    }

    #S1 table.view_step > tbody > tr:first-child > :nth-child(n+3) {
        order: 2;
    }

    #S1 table.view_step > tbody > tr:nth-child(2) > :nth-child(n+3) {
        order: 3;
    }

    #S1 table.view_step:has(> tbody > tr:first-child > :nth-child(3)):not(:has(tr > :nth-child(4))) > tbody > tr > :nth-child(3) {
        grid-column: 1 / -1;
    }

    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)),
    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)) > tbody,
    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)) > tbody > tr,
    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)) > tbody > tr > th,
    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)) > tbody > tr > td {
        display: block;
        width: auto;
    }

    #profile_content_body .t_view.table-responsive > table:not(:has(> tbody > tr > th + th)) > tbody > tr > th {
        text-align: left;
    }

    .col-xs-4.cursor.b-a.wrapper {
        padding-left: 4px;
        padding-right: 4px;
    }

    .col-xs-2-4-2 > div.h3 {
        font-size: 14px;
    }

    .Activity .panel-body > .wrapper-n > .h5 {
        font-size: 13px;
    }

    [id$="_teacherArea"] table.no-wrap th,
    [id$="_teacherArea"] table.no-wrap td {
        font-size: 13px;
    }

    [id$="_teacherArea"] .chartArea > svg[width="400"] {
        zoom: .64;
    }

    #GraphArea .panel-body:has(.bubble) {
        height: auto !important;
    }

    #GraphArea .panel-body > .col-lg-12:has(> .center-bubble) {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    #GraphArea .panel-body > .col-lg-12 > [class$="-bubble"],
    #GraphArea .panel-body > .col-lg-12 > [class$="-bubble"] > div {
        display: contents;
    }

    #GraphArea .panel-body .bubble {
        position: static;
    }

    #GraphArea .b1 > .bubble {
        order: 1;
    }

    #GraphArea .b2 > .bubble {
        order: 2;
    }

    #GraphArea .b3 > .bubble {
        order: 3;
    }

    #GraphArea .b4 > .bubble {
        order: 4;
    }

    #GraphArea .b5 > .bubble {
        order: 5;
    }

    #GraphArea section:has(> .panel-body > .chartArea),
    #GraphArea section > .panel-body:has(> .chartArea) {
        padding-left: 0;
        padding-right: 0;
    }

    #GraphArea .panel-body > .chartArea:has(> svg) {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #genderchartContainer,
    #genderchartContainer2 {
        float: none !important;
        width: 100% !important;
    }

    header.header.bg-light.h2:not(:has(> #headTitle)) {
        font-size: 18px;
    }

    header + table.floatThead-table col {
        width: auto !important;
    }

    header + table.floatThead-table th,
    header + table.floatThead-table td {
        padding-left: 3px;
        padding-right: 3px;
    }

    header + table.floatThead-table td > .btn-xs {
        padding-left: 6px;
        padding-right: 6px;
    }

    header + table.floatThead-table .iconE,
    header + table.floatThead-table .iconD {
        min-width: 0;
    }

    .form-group .col-lg-9:has(#BtnHistSave) #SaveDate {
        display: block;
        margin-bottom: 6px;
    }

    #BtnHistSave,
    #BtnNowSave {
        padding-left: 6px;
        padding-right: 6px;
        margin-bottom: 4px;
    }

    #form1 > .wrapper:has(> #Report > table.report1) {
        padding-left: 10px;
        padding-right: 10px;
    }

    #hcTrHead > td {
        font-size: 13px;
    }

    .wrapper-lg.row > .col-lg-12:not(.wrapper):has(> section.panel) {
        padding-left: 0;
        padding-right: 0;
    }

    .panel-body:has(> .col-lg-12.text-left > table[id^="AlertReport_"]) {
        padding-left: 5px;
        padding-right: 5px;
    }

    .col-lg-12.text-left:has(> table[id^="AlertReport_"]) {
        padding-left: 0;
        padding-right: 0;
    }

    table[id^="AlertReport_"] > tbody > tr:first-child > th img {
        display: block;
        margin: 0 auto 2px;
    }

    .Office_detail .step_table > .panel-body > .col-lg-12.no-padder:has(> [class*="col-md-"].b-r:not(.col-md-12):not(.hidden)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .form1 .lbb .panel-body.no-padder:has(> :is(.col-xs-3, .col-xs-4).wrapper-n):not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form1 .lbb .panel-body.no-padder:has(> :is(.col-xs-3, .col-xs-4).wrapper-n):not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n))::before,
    .form1 .lbb .panel-body.no-padder:has(> :is(.col-xs-3, .col-xs-4).wrapper-n):not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n))::after {
        content: none;
    }

    .form1 .lbb .panel-body.no-padder:not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) > :is(.col-xs-3, .col-xs-4).wrapper-n {
        float: none;
        width: auto;
        border-bottom: 1px solid #e3e2e2;
    }

    .form1 .lbb .panel-body.no-padder:not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) > :is(.col-xs-3, .col-xs-4).wrapper-n:nth-child(even),
    .form1 .lbb .panel-body.no-padder:not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) > :is(.col-xs-3, .col-xs-4).wrapper-n:last-child {
        border-right-width: 0;
    }

    .form1 .lbb .panel-body.no-padder:not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) > :is(.col-xs-3, .col-xs-4).wrapper-n:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .form1 .lbb .panel-body.no-padder:not(:has(> :is(.col-xs-12, .col-xs-2).wrapper-n)) > .wrapper-n > span.h3 {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .top_nav,
    .hue_nav {
        display: none !important;
    }

    header.white_top_fixed.navbar {
        height: auto !important;
    }

    header.white_top_fixed.navbar.bg-white {
        background-color: #2c9bce !important;
    }

    .bg-white.header .navbar-item.text-center > .navbar-brand {
        display: flex !important;
        align-items: center;
        gap: 8px;
        width: max-content;
        padding-left: 15px;
    }

    .bg-white.header .navbar-brand > img:not(.m-logo) {
        display: none;
    }

    .bg-white.header .navbar-brand > .m-logo {
        height: 40px;
        width: auto;
    }

    .bg-white.header .navbar-brand > .m-logo-subject {
        margin: 0;
        color: #fff;
        font-size: 17px;
        font-weight: 400;
        line-height: 1;
    }

    #wrap_display.wrap {
        padding-right: 0;
    }

    #content_frame {
        display: block;
    }

    header.header.bg-light.h2 {
        height: auto;
    }

    .bg-white.header .office_mobile_menu_button {
        display: none !important;
    }

    .bg-white.header .m-menu-btn {
        height: 61px;
        margin: 0 !important;
        padding: 0 14px 0 10px !important;
        line-height: 61px;
        color: #fff;
    }

    .bg-white.header .m-menu-btn i {
        font-size: 24px;
        line-height: 61px;
    }

    .m-menu {
        display: block;
        visibility: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3000;
        transition: visibility 0s linear .25s;
    }

    body.m-menu-open .m-menu {
        visibility: visible;
        transition-delay: 0s;
    }

    body.m-menu-open {
        overflow: hidden;
    }

    .m-menu-panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform .25s ease;
    }

    body.m-menu-open .m-menu-panel {
        transform: translateX(0);
    }

    .m-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 0 4px 0 16px;
        background: #2c9bce;
        color: #fff;
        font-size: 16px;
    }

    .m-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        color: #fff !important;
        font-size: 22px;
    }

    .m-menu-body > a.nav-link {
        display: block;
        width: auto !important;
        margin: 0;
        padding: 14px 16px;
        border-bottom: 1px solid #eee;
        color: #333;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.4;
    }

    .m-menu-body .T_menu {
        float: none;
        width: auto;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #eee;
    }

    .m-menu-body .M_had {
        position: relative;
        margin: 0;
        padding: 14px 40px 14px 16px;
        border: 0;
        color: #333;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.4;
        cursor: pointer;
    }

    .m-menu-body .M_had i {
        display: none;
    }

    .m-menu-body .M_had:after {
        content: "\f107";
        position: absolute;
        top: 50%;
        right: 16px;
        margin-top: -9px;
        font-family: FontAwesome;
        font-size: 18px;
        line-height: 18px;
        color: #999;
    }

    .m-menu-body .T_menu.on .M_had:after {
        content: "\f106";
    }

    .m-menu-body .T_menu ul {
        display: none;
        margin: 0;
        padding: 0 0 8px;
        list-style: none;
        background: #f7f9fb;
    }

    .m-menu-body .T_menu.on ul {
        display: block;
    }

    .m-menu-body .T_menu li a {
        display: block;
        padding: 11px 16px 11px 28px;
        color: #555;
        font-size: 14px;
    }

    .m-menu-body .T_menu li a i {
        display: none;
    }

    .m-menu-foot {
        padding: 16px 16px 28px;
    }

    .m-menu-video {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: 14px;
        padding: 12px 14px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        background: #f7f9fb;
    }

    .m-menu-video #VideoCounselArea2 {
        margin-top: 0 !important;
    }

    .m-menu-video .layerPopup {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin-top: 10px;
    }

    .m-menu-video > b {
        margin-right: auto;
        color: #333;
        font-size: 14px;
    }

    .m-menu-video .btn-xs {
        padding: 7px 12px;
        font-size: 13px;
    }

    .m-menu-links {
        display: flex;
    }

    .m-menu-links a {
        flex: 1;
        padding: 12px 0;
        border: 1px solid #ddd;
        border-left-width: 0;
        color: #333;
        font-size: 14px;
        text-align: center;
    }

    .m-menu-links a:first-child {
        border-left-width: 1px;
    }

    .m-menu-info:empty {
        display: none;
    }

    .m-menu-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
    }

    .m-menu-info .btn {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        margin: 0;
    }
}

@media (max-width: 575px) {
    .bg-white.header .navbar-item.text-center > .navbar-brand {
        gap: 6px;
        max-width: calc(100vw - 45px);
    }

    .bg-white.header .navbar-brand > .m-logo {
        height: 32px;
    }

    .bg-white.header .navbar-brand > .m-logo-subject {
        min-width: 0;
        overflow: hidden;
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .Step1 .row div:last-child a span {
        letter-spacing: normal;
    }
}

@media (max-width: 991px) {
    #tx_toolbar_basic,
    #tx_toolbar_basic > .tx-toolbar-boundary {
        height: auto;
    }

    #tx_toolbar_basic > .tx-toolbar-boundary {
        display: flow-root;
    }

    #Up.xxx {
        width: auto;
    }
}

@media (max-width: 575px) {
    #Up .plupload_file_size,
    #Up .plupload_file_status {
        width: 44px;
    }

    #Up .plupload_file_action {
        margin-left: 6px;
    }

    #Up .plupload_filelist .plupload_file_name {
        width: calc(100% - 110px);
    }

    #Up .plupload_filelist_footer .plupload_file_name {
        width: auto !important;
    }
}

@media (max-width: 991px) {
    #box1.search1 .form-group > div:not(:first-child):not(:has(> select ~ select, > select ~ :is(input:not([type=hidden]), a, button, span), > :is(input:not([type=hidden]), a, button, span) ~ select)) > select,
    #Div1.search1 .form-group > div:not(:first-child):not(:has(> select ~ select, > select ~ :is(input:not([type=hidden]), a, button, span), > :is(input:not([type=hidden]), a, button, span) ~ select)) > select {
        width: 100%;
    }

    #box1.search1 .form-group > div:not(:first-child):not(:has(> select, > a, > button, > input:not([type=hidden]) ~ input:not([type=hidden]))) > input[type=text]:is(:not([size]), [size="10"], [size="12"], [size="15"], [size="20"], [size="21"]):not([style*="width"]),
    #Div1.search1 .form-group > div:not(:first-child):not(:has(> select, > a, > button, > input:not([type=hidden]) ~ input:not([type=hidden]))) > input[type=text]:is(:not([size]), [size="10"], [size="12"], [size="15"], [size="20"], [size="21"]):not([style*="width"]) {
        width: 100%;
    }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
    .m-menu,
    .m-menu-panel {
        transition: none;
    }
}