/*
    郭某人编
    WEB 网页预设样式表
    此样式表较为完整，通常用于快速搭建相似样式的网站，比如后台管理系统
    上次更新时间：2025/7/7
*/

.FLEX {
    display: flex;
}

    .FLEX.h_center {
        justify-content: center;
    }

    .FLEX.v_center {
        align-items: center;
    }

    .FLEX.gap {
        gap: 5px;
    }

.ROW {
    display: flex;
    flex-wrap: wrap;
    margin: .5em 0;
    gap: 5px;
}

    .ROW.center {
        justify-content: center;
    }

    .ROW.right {
        justify-content: right;
    }

    .ROW.no_gap {
        gap: 0;
    }

    .ROW.no_margin {
        margin: 0;
    }

    .ROW.no_wrap {
        flex-wrap: nowrap;
    }

.BUTTON {
    padding: .5em 1em;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    outline: none;
    border: none;
    border-radius: 3px;
    background: #d9d9d9;
    color: #000;
    transition: all .2s;
    -webkit-tap-highlight-color: transparent;
}

    .BUTTON.disabled {
        cursor: not-allowed;
        opacity: .5;
    }

    .BUTTON:not(.disabled):hover {
        background-color: #e5e5e5;
    }

    .BUTTON:not(.disabled):active {
        background-color: #c9c9c9;
    }

    .BUTTON.blue {
        background-color: #3788CA;
        color: #fff;
    }

        .BUTTON.blue:not(.disabled):hover {
            background-color: #4698DB;
        }

        .BUTTON.blue:not(.disabled):active {
            background-color: #3077b1;
        }

    .BUTTON.green {
        background-color: #3e9f62;
        color: #fff;
    }

        .BUTTON.green:not(.disabled):hover {
            background-color: #48b570;
        }

        .BUTTON.green:not(.disabled):active {
            background-color: #24974f;
        }

    .BUTTON.cyan {
        background-color: #96e1e1;
    }

        .BUTTON.cyan:not(.disabled):hover {
            background-color: #a4f3f3;
        }

        .BUTTON.cyan:not(.disabled):active {
            background-color: #8acfcf;
        }

    .BUTTON.red {
        background-color: #db3a1f;
        color: #fff;
    }

        .BUTTON.red:not(.disabled):hover {
            background-color: #eb5239;
        }

        .BUTTON.red:not(.disabled):active {
            background-color: #bd2f18;
        }

    .BUTTON.orange {
        background-color: #f07924;
        color: #fff;
    }

        .BUTTON.orange:not(.disabled):hover {
            background-color: #f3934f;
        }

        .BUTTON.orange:not(.disabled):active {
            background-color: #d96d1f;
        }

    .BUTTON.wine {
        background-color: #b71f57;
        color: #fff;
    }

        .BUTTON.wine:not(.disabled):hover {
            background-color: #d72366;
        }

        .BUTTON.wine:not(.disabled):active {
            background-color: #9d1c4b;
        }

.PAGE_BOX {
    display: inline-flex;
    user-select: none;
    padding: 0 0 0 1px;
    max-width: 100%;
    overflow: auto;
}

    .PAGE_BOX .page_button {
        padding: .3em .7em;
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        border: 1px solid rgb(220,220,220);
        transition: all .2s;
        margin: 0 0 0 -1px;
        color: rgb(47,112,255);
    }

        .PAGE_BOX .page_button:first-child {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .PAGE_BOX .page_button:last-child {
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .PAGE_BOX .page_button.active {
            background: rgb(47,112,255);
            border-color: rgb(47,112,255);
            color: #fff;
        }

        .PAGE_BOX .page_button:not(.active):hover {
            background: rgba(47,112,255,.1);
        }

        .PAGE_BOX .page_button:not(.active):active {
            background: rgba(47,112,255,.2);
        }

    .PAGE_BOX .page_item {
        padding: .3em .7em;
        display: inline-flex;
        align-items: center;
        user-select: all;
        border: 1px solid rgb(220,220,220);
        margin: 0 0 0 -1px;
    }

input:not([type]), input[type=text] {
    width: 12em;
    outline: none;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding: .7em;
    transition: all .2s;
    vertical-align: top;
    font-family: unset;
}

    input:not([type])[disabled], input[type=text][disabled] {
        opacity: .7;
        cursor: not-allowed;
    }

    input:not([type]):not([disabled]):hover, input[type=text]:not([disabled]):hover {
        box-shadow: 0 0 1px 2px rgba(217,217,217,.5);
    }

    input:not([type]):focus, input[type=text]:focus {
        box-shadow: 0 0 1px 2px rgba(217,217,217,.5);
    }

    input:not([type])[readonly], input[type=text][readonly] {
        background: rgba(215,215,215,.5);
    }

        input:not([type]):not([disabled])[readonly]:hover, input[type=text][readonly]:not([disabled]):hover {
            border-color: rgba(0, 0, 0, .5);
        }

        input:not([type])[readonly]:focus, input[type=text][readonly]:focus {
            border-color: rgba(0, 0, 0, .5);
            box-shadow: 0 0 1px 2px rgba(115,115,115,.5);
        }

    input:not([type]):not([disabled]):not([readonly]).blue, input[type=text]:not([disabled]):not([readonly]).blue {
        border-color: #3788CA;
    }

        input:not([type]):not([disabled]):not([readonly]).blue:hover, input[type=text]:not([disabled]):not([readonly]).blue:hover {
            box-shadow: 0 0 1px 2px rgba(55,136,202,.5);
        }

    input:not([type]):not([readonly]).blue:focus, input[type=text]:not([readonly]).blue:focus {
        box-shadow: 0 0 1px 2px rgba(55,136,202,.5);
    }

    input:not([type]):not([disabled]):not([readonly]).green, input[type=text]:not([disabled]):not([readonly]).green {
        border-color: #3e9f62;
    }

        input:not([type]):not([disabled]):not([readonly]).green:hover, input[type=text]:not([disabled]):not([readonly]).green:hover {
            box-shadow: 0 0 1px 2px rgba(62,159,98,.5);
        }

    input:not([type]):not([readonly]).green:focus, input[type=text]:not([readonly]).green:focus {
        box-shadow: 0 0 1px 2px rgba(62,159,98,.5);
    }

    input:not([type]):not([disabled]):not([readonly]).cyan, input[type=text]:not([disabled]):not([readonly]).cyan {
        border-color: #96e1e1;
    }

        input:not([type]):not([disabled]):not([readonly]).cyan:hover, input[type=text]:not([disabled]):not([readonly]).cyan:hover {
            box-shadow: 0 0 1px 2px rgba(150,225,225,.5);
        }

    input:not([type]):not([readonly]).cyan:focus, input[type=text]:not([readonly]).cyan:focus {
        box-shadow: 0 0 1px 2px rgba(150,225,225,.5);
    }

    input:not([type]):not([disabled]):not([readonly]).red, input[type=text]:not([disabled]):not([readonly]).red {
        border-color: #db3a1f;
    }

        input:not([type]):not([disabled]):not([readonly]).red:hover, input[type=text]:not([disabled]):not([readonly]).red:hover {
            box-shadow: 0 0 1px 2px rgba(219,58,31,.5);
        }

    input:not([type]):not([readonly]).red:focus, input[type=text]:not([readonly]).red:focus {
        box-shadow: 0 0 1px 2px rgba(219,58,31,.5);
    }

    input:not([type]):not([disabled]):not([readonly]).orange, input[type=text]:not([disabled]):not([readonly]).orange {
        border-color: #f07924;
    }

        input:not([type]):not([disabled]):not([readonly]).orange:hover, input[type=text]:not([disabled]):not([readonly]).orange:hover {
            box-shadow: 0 0 1px 2px rgba(240,121,36,.5);
        }

    input:not([type]):not([readonly]).orange:focus, input[type=text]:not([readonly]).orange:focus {
        box-shadow: 0 0 1px 2px rgba(240,121,36,.5);
    }

    input:not([type]):not([disabled]):not([readonly]).wine, input[type=text]:not([disabled]):not([readonly]).wine {
        border-color: #b71f57;
    }

        input:not([type]):not([disabled]):not([readonly]).wine:hover, input[type=text]:not([disabled]):not([readonly]).wine:hover {
            box-shadow: 0 0 1px 2px rgba(183,31,87,.5);
        }

    input:not([type]):not([readonly]).wine:focus, input[type=text]:not([readonly]).wine:focus {
        box-shadow: 0 0 1px 2px rgba(183,31,87,.5);
    }

.INPUT_GROUP {
    display: inline-flex;
    border-radius: 3px;
    transition: all .2s;
    max-width: 100%;
    overflow: hidden;
}

    .INPUT_GROUP label[for] {
        cursor: pointer;
        padding: .5em;
        -webkit-tap-highlight-color: transparent;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    .INPUT_GROUP input:not([type]), .INPUT_GROUP input[type=text] {
        width: 100%;
        border-radius: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-right-width: 0;
    }

    .INPUT_GROUP .BUTTON {
        border-radius: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

    .INPUT_GROUP input:not([type]):last-child, .INPUT_GROUP input[type=text]:last-child {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-right-width: 1px;
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]):hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]):hover {
        box-shadow: inset 0 0 1px 2px rgba(217,217,217,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]):focus, .INPUT_GROUP input[type=text]:not([readonly]):focus {
        box-shadow: inset 0 0 1px 2px rgba(217,217,217,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).blue:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).blue:hover {
        box-shadow: inset 0 0 1px 2px rgba(55,136,202,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).blue:focus, .INPUT_GROUP input[type=text]:not([readonly]).blue:focus {
        box-shadow: inset 0 0 1px 2px rgba(55,136,202,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).green:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).green:hover {
        box-shadow: inset 0 0 1px 2px rgba(62,159,98,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).green:focus, .INPUT_GROUP input[type=text]:not([readonly]).green:focus {
        box-shadow: inset 0 0 1px 2px rgba(62,159,98,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).cyan:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).cyan:hover {
        box-shadow: inset 0 0 1px 2px rgba(150,225,225,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).cyan:focus, .INPUT_GROUP input[type=text]:not([readonly]).cyan:focus {
        box-shadow: inset 0 0 1px 2px rgba(150,225,225,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).red:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).red:hover {
        box-shadow: inset 0 0 1px 2px rgba(219,58,31,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).red:focus, .INPUT_GROUP input[type=text]:not([readonly]).red:focus {
        box-shadow: inset 0 0 1px 2px rgba(219,58,31,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).orange:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).orange:hover {
        box-shadow: inset 0 0 1px 2px rgba(240,121,36,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).orange:focus, .INPUT_GROUP input[type=text]:not([readonly]).orange:focus {
        box-shadow: inset 0 0 1px 2px rgba(240,121,36,.5);
    }

    .INPUT_GROUP input:not([type]):not([disabled]):not([readonly]).wine:hover, .INPUT_GROUP input[type=text]:not([disabled]):not([readonly]).wine:hover {
        box-shadow: inset 0 0 1px 2px rgba(183,31,87,.5);
    }

    .INPUT_GROUP input:not([type]):not([readonly]).wine:focus, .INPUT_GROUP input[type=text]:not([readonly]).wine:focus {
        box-shadow: inset 0 0 1px 2px rgba(183,31,87,.5);
    }

    .INPUT_GROUP:focus-within {
        box-shadow: 0 0 1px 2px rgba(217,217,217,.5);
    }

    .INPUT_GROUP.blue:focus-within {
        box-shadow: 0 0 1px 2px rgba(55,136,202,.5);
    }

    .INPUT_GROUP.green:focus-within {
        box-shadow: 0 0 1px 2px rgba(62,159,98,.5);
    }

    .INPUT_GROUP.cyan:focus-within {
        box-shadow: 0 0 1px 2px rgba(150,225,225,.5);
    }

    .INPUT_GROUP.red:focus-within {
        box-shadow: 0 0 1px 2px rgba(219,58,31,.5);
    }

    .INPUT_GROUP.orange:focus-within {
        box-shadow: 0 0 1px 2px rgba(240,121,36,.5);
    }

    .INPUT_GROUP.wine:focus-within {
        box-shadow: 0 0 1px 2px rgba(183,31,87,.5);
    }

table {
    display: inline-table;
    border-collapse: collapse;
    max-width: 100%;
}

    table caption {
        padding: .5em .8em;
    }

    table tr {
        transition: all .2s;
    }

        table tr:first-child {
            background-color: rgba(220, 220, 220, .5);
        }

        table tr:hover {
            background-color: rgba(220, 220, 220, .5);
        }

    table th, table td {
        border: 1px solid #c4c9cf;
        padding: .5em .8em;
        word-break: break-all;
        text-align: center;
    }

    table.blue tr:first-child {
        background-color: rgba(71,137,204, .5);
    }

    table.blue tr:hover {
        background-color: rgba(71,137,204, .5);
    }

    table.blue th, table.blue td {
        border-color: rgba(71,137,204,.7);
    }

    table.green tr:first-child {
        background-color: rgba(77,159,96, .5);
    }

    table.green tr:hover {
        background-color: rgba(77,159,96, .5);
    }

    table.green th, table.green td {
        border-color: rgba(77,159,96,.7);
    }

    table.cyan tr:first-child {
        background-color: rgba(142,227,229, .5);
    }

    table.cyan tr:hover {
        background-color: rgba(142,227,229, .5);
    }

    table.cyan th, table.cyan td {
        border-color: rgba(142,227,229,.7);
    }

    table.red tr:first-child {
        background-color: rgba(210,56,19, .5);
    }

    table.red tr:hover {
        background-color: rgba(210,56,19, .5);
    }

    table.red th, table.red td {
        border-color: rgba(210,56,19,.7);
    }

    table.orange tr:first-child {
        background-color: rgba(233,126,31, .5);
    }

    table.orange tr:hover {
        background-color: rgba(233,126,31, .5);
    }

    table.orange th, table.orange td {
        border-color: rgba(233,126,31,.7);
    }

    table.wine tr:first-child {
        background-color: rgba(175,28,87, .5);
    }

    table.wine tr:hover {
        background-color: rgba(175,28,87, .5);
    }

    table.wine th, table.wine td {
        border-color: rgba(175,28,87,.7);
    }

.CHECKBOX {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .CHECKBOX.disabled {
        cursor: not-allowed;
        opacity: .5;
    }

    .CHECKBOX input[type="checkbox"] {
        display: none;
    }

    .CHECKBOX .CHECKBOX_SYMBOL {
        width: 21px;
        height: 21px;
        border: solid 2px #b5b5b5;
        border-radius: 2px;
        background: #fff;
        transition: all .2s;
        padding: 2px;
        box-sizing: border-box;
    }

        .CHECKBOX .CHECKBOX_SYMBOL * {
            transition: all .2s;
            opacity: 0;
        }

    .CHECKBOX input[type="checkbox"]:checked + .CHECKBOX_SYMBOL * {
        opacity: 1;
    }

    .CHECKBOX:not(.disabled):hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(181,181,181,.3);
    }

    .CHECKBOX:not(.disabled):active input[type="checkbox"] + .CHECKBOX_SYMBOL * {
        opacity: .5;
    }


    .CHECKBOX .CHECKBOX_LABEL {
        margin: 0 0 0 .3em;
    }

        .CHECKBOX .CHECKBOX_LABEL:first-child {
            margin: 0 .3em 0 0;
        }

    .CHECKBOX.blue .CHECKBOX_SYMBOL {
        border-color: rgb(71,137,204);
    }

    .CHECKBOX:not(.disabled).blue:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(71,137,204,.3);
    }

    .CHECKBOX.green .CHECKBOX_SYMBOL {
        border-color: rgb(77,159,96);
    }

    .CHECKBOX:not(.disabled).green:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(77,159,96,.3);
    }

    .CHECKBOX.cyan .CHECKBOX_SYMBOL {
        border-color: rgb(139,224,227);
    }

    .CHECKBOX:not(.disabled).cyan:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(139,224,227,.3);
    }

    .CHECKBOX.red .CHECKBOX_SYMBOL {
        border-color: rgb(210,56,19);
    }

    .CHECKBOX:not(.disabled).red:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(210,56,19,.3);
    }

    .CHECKBOX.orange .CHECKBOX_SYMBOL {
        border-color: rgb(232,120,15);
    }

    .CHECKBOX:not(.disabled).orange:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(232,120,15,.3);
    }

    .CHECKBOX.wine .CHECKBOX_SYMBOL {
        border-color: rgb(175,28,87);
    }

    .CHECKBOX:not(.disabled).wine:hover input[type="checkbox"] + .CHECKBOX_SYMBOL {
        background: rgba(175,28,87,.3);
    }

.RADIO {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

    .RADIO.disabled {
        cursor: not-allowed;
        opacity: .5;
    }

    .RADIO input[type="radio"] {
        display: none;
    }

    .RADIO .RADIO_SYMBOL {
        width: 24px;
        height: 24px;
        border: solid 2px #b5b5b5;
        border-radius: 50%;
        background: #fff;
        transition: all .2s;
        padding: 2px;
        box-sizing: border-box;
    }

        .RADIO .RADIO_SYMBOL * {
            transition: all .2s;
            opacity: 0;
        }

    .RADIO input[type="radio"]:checked + .RADIO_SYMBOL * {
        opacity: 1;
    }

    .RADIO:not(.disabled):hover input[type="radio"] + .RADIO_SYMBOL {
        background: rgba(181,181,181,.3);
    }

    .RADIO:not(.disabled):active input[type="radio"] + .RADIO_SYMBOL * {
        opacity: .5;
    }

    .RADIO .RADIO_LABEL {
        margin: 0 0 0 .3em;
    }

        .RADIO .RADIO_LABEL:first-child {
            margin: 0 .3em 0 0;
        }

    .RADIO.blue .RADIO_SYMBOL {
        border-color: rgb(71,137,204);
    }

    .RADIO:not(.disabled).blue:hover input[type="radio"] + .RADIO_SYMBOL {
        background: rgba(71,137,204,.3);
    }

    .RADIO.green .RADIO_SYMBOL {
        border-color: rgb(77,159,96);
    }

    .RADIO:not(.disabled).green:hover input[type="radio"] + .RADIO_SYMBOL {
        background-color: rgba(77,159,96,.3);
    }

    .RADIO.cyan .RADIO_SYMBOL {
        border-color: rgb(139,224,227);
    }

    .RADIO:not(.disabled).cyan:hover input[type="radio"] + .RADIO_SYMBOL {
        background-color: rgba(139,224,227,.3);
    }

    .RADIO.red .RADIO_SYMBOL {
        border-color: rgb(210,56,19);
    }

    .RADIO:not(.disabled).red:hover input[type="radio"] + .RADIO_SYMBOL {
        background-color: rgba(210,56,19,.3);
    }

    .RADIO.orange .RADIO_SYMBOL {
        border-color: rgb(232,120,15);
    }

    .RADIO:not(.disabled).orange:hover input[type="radio"] + .RADIO_SYMBOL {
        background-color: rgba(232,120,15,.3);
    }

    .RADIO.wine .RADIO_SYMBOL {
        border-color: rgb(175,28,87);
    }

    .RADIO:not(.disabled).wine:hover input[type="radio"] + .RADIO_SYMBOL {
        background-color: rgba(175,28,87,.3);
    }

.SWITCH {
    position: relative;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
    display: inline-block;
    height: 24px;
    width: 40px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    box-sizing: content-box;
    flex-shrink: 0;
}

    .SWITCH > input {
        display: none;
    }

    .SWITCH > span:nth-child(2) {
        transition: all .3s;
        border-radius: 20px;
        display: inline-block;
        height: 100%;
        width: 100%;
        background: #d9d9d9;
    }

    .SWITCH > span:nth-child(3) {
        display: inline-block;
        position: absolute;
        height: 24px;
        width: 24px;
        left: 0;
        top: 0;
        transform: translateX(0);
        transition: all .3s;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    }

    .SWITCH.disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .SWITCH > input:checked ~ span:nth-child(2) {
        background-color: rgb(77,159,96);
        box-shadow: rgb(77,159,96) 0px 0px 0px 16px inset;
    }

    .SWITCH > input:checked ~ span:nth-child(3) {
        transform: translateX(17px);
    }

    .SWITCH:not(.disabled):hover > span:nth-child(3) {
        opacity: .8;
    }

    .SWITCH:not(.disabled):active > span:nth-child(3) {
        opacity: .6;
    }

    .SWITCH.blue > input:checked ~ span:nth-child(2) {
        background-color: rgb(71,137,204);
        box-shadow: rgb(71,137,204) 0px 0px 0px 16px inset;
    }

    .SWITCH.cyan > input:checked ~ span:nth-child(2) {
        background-color: rgb(139,224,227);
        box-shadow: rgb(139,224,227) 0px 0px 0px 16px inset;
    }

    .SWITCH.red > input:checked ~ span:nth-child(2) {
        background-color: rgb(210,56,19);
        box-shadow: rgb(210,56,19) 0px 0px 0px 16px inset;
    }

    .SWITCH.orange > input:checked ~ span:nth-child(2) {
        background-color: rgb(232,120,15);
        box-shadow: rgb(232,120,15) 0px 0px 0px 16px inset;
    }

    .SWITCH.wine > input:checked ~ span:nth-child(2) {
        background-color: rgb(175,28,87);
        box-shadow: rgb(175,28,87) 0px 0px 0px 16px inset;
    }

    .SWITCH.yellow > input:checked ~ span:nth-child(2) {
        background-color: rgb(230,233,24);
        box-shadow: rgb(230,233,24) 0px 0px 0px 16px inset;
    }