@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import "https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap";
@import 'https://fonts.googleapis.com/css?family=Noto+Serif+TC:400&display=swap';
@import 'https://fonts.googleapis.com/css?family=Roboto:400,500,600&display=swap';
*{
    font-family: 'Noto Sans TC', sans-serif !important;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: #c8c8c8 #f7f7f7;
}
:root {
    /*COLOR PICKER (LIGHT MODE)*/
    --G00: #FFF;
    --G80: #FAFAFA;
    --G100: #F1F1F1;
    --G200: #EAEAEA;
    --G300: #CACACA;
    --G400: #BABABA;
    --G500: #6F6F6F;
    --G700: #4E4E4E;
    --G900: #383838;

    --PFC: #2A72B6;
    --PSC: #318FE5;
    --PTC: #59B4F5;

    --ALC: #E14D4D;
    --ALCH: #FE6161;
    --HLC: #8194A4;
    --HLCH: #1CD84A;

    --FTC: #DBDBE5;

    --BGL: #FAFAFA;
    --BGD: #2D3239;
    /*COLOR PICKER (DARK MODE)*/
    --DPFC: #FFC700;
    --DPSC: #EAD3B0;
    --BGCF: #181C22;
    --BGCS: #434E5F;
    --BGCT: #101418 ;/*#2C3644;*/
    --BLC: #434E5F;
    --UIBG: #31363D;
    --FMBGE: #36383D;
    --FMBGO: #303236;
    --BTNC: #C1534E;
}
/*TYPOGRAPHY*/
.H1 ,.H2 ,.H3 ,.CH1 ,.CH2 ,.CH3 {
    font-weight: 700;
}
.P1 ,.P2 ,.P3 ,.P4 {
    font-weight: 400;
}
.H1 {
    font-size: 32px;
    color: var(--G700);
}
.H2 {
    font-size: 28px;
    color: var(--G700);
}
.H3 {
    font-size: 24px;
    color: var(--G700);
}
.CH1 {
    font-size: 20px;
    color: var(--G700);
}
.CH2 {
    font-size: 16px;
    color: var(--G700);
}
.CH3 {
    font-size: 12px;
    color: var(--G700);
}
.P1 {
    font-size: 16px;
}
.P2 {
    font-size: 14px;
}
.P3 {
    font-size: 12px;
}
.P4 {
    font-size: 10px;
}

a {
    color: var(--G500);
    text-decoration: none;
}
a:hover {
    color: var(--PFC);
}

/*BASIC UI SETS*/
/*----Icon Sets*/
.icon-wrap {
    display: inline-block;
    vertical-align: top;
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 24px;
    background-repeat: no-repeat;
    border-radius: 50px;
    transition: ease 0.35s;
    cursor: pointer;
}
.icon-wrap.password.hide {
    background-image: url(../images/icon_password_a_n.png);
}
.icon-wrap.password.hide:hover {
    background-image: url(../images/icon_password_a_h.png);
}
.icon-wrap.password.show {
    background-image: url(../images/icon_password_n.png);
}
.icon-wrap.password.show:hover {
    background-image: url(../images/icon_password_h.png);
}
.icon-wrap.logout {
    background-image: url(../images/btn_logout_n.png);
}
.icon-wrap.logout:hover {
    background-image: url(../images/btn_logout_h.png);
    background-color: var(--PFC);
}
.icon-wrap.read-light {
    background-image: url(../images/btn_readmode_l_n.png);
}
.icon-wrap.read-dark {
    background-image: url(../images/btn_readmode_d_n.png);
}
.icon-wrap.toggle-skin {
    background-image: url(../images/icon_nav_toggle_n.png) ;
}
.icon-wrap.toggle-menu {
    background-image: url(../images/icon_tg_collapse_n.png);
}
.icon-wrap.toggle-menu-blk {
    background-image: url(../images/icon_tg_collapse_blk_n.png);
}
.icon-wrap.home {
    background-image: url(../images/icon_home_n.png);
}
.icon-wrap.home:hover {
    background-image: url(../images/icon_home_h.png);
}
.icon-wrap.search {
    background-image: url(../images/icon_search_n.png);
}
.icon-wrap.search:hover {
    background-image: url(../images/icon_search_h.png);
}
.icon-wrap.cleartxt {
    background-image: url(../images/icon_clear_n.png);
}
.icon-wrap.cleartxt:hover {
    background-image: url(../images/icon_clear_h.png);
}
.icon-wrap.sort {
    background-image: url(../images/icon_sort_n.png);
}
.icon-wrap.sort:hover {
    background-image: url(../images/icon_sort_h.png);
}
.icon-wrap.online {
    background-image: url(../images/icon_itemon_n.png);
}
.icon-wrap.offline {
    background-image: url(../images/icon_itemoff_n.png);
}
.icon-wrap.date {
    background-image: url(../images/icon_date_n.png);
}
.icon-wrap.date:hover {
    background-image: url(../images/icon_date_h.png);
}
.icon-wrap.zoom {
    background-image: url(../images/icon_zoom_n.png);
    transition: ease 0.35s;
}
.icon-wrap.zoom:hover {
    background-size: 26px;
}
.icon-wrap.backmain {
    background-image: url(../images/icon_backmain_n.png);
}
.icon-wrap.editor {
    background-image: url(../images/icon_editor_n.png);
}
.icon-wrap.editor:hover {
    background-image: url(../images/icon_editor_h.png);
}
.icon-wrap.editor.active {
    background-image: url(../images/icon_editor_a.png);
}
.icon-wrap.delete {
    background-image: url(../images/icon_delete_n.png);
}
.icon-wrap.delete:hover {
    background-image: url(../images/icon_delete_h.png);
}
.icon-wrap.files {
    background-image: url(../images/icon_folder_n.png);
}
.icon-wrap.save {
    background-image: url(../images/icon_checked_n.png);
}
.icon-wrap.save:hover {
    background-image: url(../images/icon_checked_h.png);
}
.icon-wrap.save.disabled {
    background-image: url(../images/icon_checked_d.png);
}
.icon-wrap.link {
    background-image: url(../images/icon_link_n.png);
}
.icon-wrap.link.disabled,
.icon-wrap.link.disabled:hover {
    background-image: url(../images/icon_link_d.png);
    cursor: auto;
}
.icon-wrap.question {
    background-image: url(../images/icon_question_n.png);
}
.icon-wrap.back {
    background-image: url(../images/icon_back_n.png);
}
.icon-wrap.back:hover {
    background-image: url(../images/icon_back_h.png);
}
.icon-wrap.close {
    background-image: url(../images/icon_closd_blk_n.png);
}
.icon-wrap.close:hover {
    opacity: 0.7;
}
.icon-wrap.upload {
    background-image: url(../images/icon_uploadn_w_n.png);
}
/*Dark Mode icon Sets*/
.darkmode .icon-wrap.logout {
    background-image: url(../images/btn_logout_h.png);
}
.darkmode .icon-wrap.logout:hover {
    background-image: url(../images/btn_logout_h.png);
    background-color: var(--BTNC);
}
.darkmode .icon-wrap.toggle-menu {
    background-image: url(../images/icon_tg_collapse_dark_n.png);
}
.darkmode .icon-wrap.toggle-skin {
    background-image: url(../images/icon_nav_toggle_dark_n.png);
}
.darkmode .icon-wrap.home {
    background-image: url(../images/icon_home_dark_n.png);
}
.darkmode .icon-wrap.search {
    background-image: url(../images/icon_search_w_n.png);
}
.darkmode .input-wrap input {
    background-color: var(--UIBG);
    border: var(--BLC);
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    transition: ease 0.15s;
}
.input-wrap strong.title {
    float: left;
    margin-right: 16px;
}
.input-wrap.required strong.title::after {
    content: "*";
    color: var(--ALC);
    font-weight: 700;
}
.input-wrap label {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 288px;
}
.input-wrap input {
    width: 100%;
    height: 40px;
    padding: 0px 40px 0px 8px;
    color: var(--G700);
    line-height: 40px;
    border: 1px solid var(--G400);
    background-color: var(--G80);
}

.input-text {
    min-width: 196px;
}
.input-wrap input::placeholder {
    color: var(--G400);
}
.input-wrap:hover label,
.input-wrap.hover label {
    outline-style: solid;
    outline-color: var(--G200);
}
.input-wrap input:focus,
.input-wrap.focus input {
    color: var(--G700);
    border: 1px solid var(--G500);
}
.input-wrap.show:hover label {
    outline: none;
}
.input-wrap.show p {
    width: 100%;
    height: 40px;
    padding-left: 16px;
    line-height: 40px;
    text-align: left;
    color: var(--G700);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.input-wrap.show input ,
.input-wrap.show p {
    background-color: transparent;
    border: transparent;
    border-left: 1px solid var(--G700);
}
.input-wrap.error input {
    color: var(--ALC);
    border: 1px solid var(--ALC);
}
.input-wrap.error input::placeholder {
    color: transparent;
}
.input-wrap.error label::before {
    position: absolute;
    right: 40px;
    width: calc(100% - 88px);
    text-align: right;
    color: var(--ALC);
}
.error.incomplete label::before {
    content: "此為必填欄位";
}
.input-wrap.error label::after {
    content: "";
    position: absolute;
    right: 4px;
    width: 32px;
    height: 32px;
    background: url(../images/icon_warning_n.png) center no-repeat ;
    background-size: 24px;
}

.input-wrap .icon-wrap {
    position: absolute;
    right: 8px;
    z-index: 1;
    display: inline-block;
    width: 32px;
    height: 32px;
    display: none;
}
.input-wrap .icon-wrap::before {
    content: "";
    float: left;
    width: 1px;
    height: 32px;
    margin-left: -8px;
    background-color: var(--G300);
}

/*--LOGIN MODE*/
.input-wrap.login {
    flex-direction: column;
}
.input-wrap.login > .title {
    float: inherit;
    width: 100%;
    max-width: inherit;
    margin: 0 0 8px;
}
.input-wrap.login .icon-wrap {
    display: none;
}
.input-wrap.password .icon-wrap {
    display: inline-block;
}
.input-wrap.login label {
    max-width: inherit;
    min-width: inherit;
    width: 100%;
}
.input-wrap.login.error label::before {
    right: 80px;
}
.input-wrap.login.error label::after {
    right: 48px;
}
.error.incorrect label::before {
    content: "帳號或密碼不正確";
}
/*TEXT*/
.text-wrap {
    display: flex;
    align-items: flex-start;
    transition: ease 0.15s;
}
.text-wrap textarea {
    width: 100%;
    max-height: 128px;
    padding: 8px;
    border: 1px solid var(--G400);
    line-height: 32px;
    transition: ease 0.35s;
}
.text-wrap textarea:focus {
    max-height: 228px;
    border: 1px solid var(--G500);
}

/*SELECT MENU*/
.select-wrap {
    position: relative;
    width: max-content;
}
.select-wrap > input[type=checkbox] {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 40px;
    opacity: 0;
    cursor: pointer;
}
.select-title {
    display: flex;
    width: max-content;
    min-width: 196px;
    line-height: 40px;
    cursor: pointer;
}
.select-title > h3 {
    position: absolute;
    left: -48px;
    text-align: right;
    opacity: 0;
    transition: ease 0.35s;
}
.select-title > p {
    position: relative;
    width: 100%;
    min-width: 160px;
    max-width: 288px;
    height: 40px;
    padding: 0px 40px 0px 16px;
    border: 1px solid var(--G400);
    border-radius: 2px;
    box-sizing: border-box;
    text-align: left;
    overflow: hidden;
}
.select-title > p::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    display: block;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../images/icon_tg_collapse_blk_n.png);
    transition: ease 0.15s;
}
.select-menu {
    position: relative;
    z-index: -1;
    display: block;
    width: 100%;
    height: 0px;
    margin-top: -10px;
    border: 1px solid var(--G400);
    border-radius: 2px;
    box-sizing: border-box;
    text-align: left;
    opacity: 0;
    transition: ease 0.35s;
}
.select-menu li {
    line-height: 40px;
    background-color: var(--G80);
    cursor: pointer;
}
.select-menu li:nth-child(odd) {
    background-color: var(--G100);
}
.select-menu li:hover {
    color: var(--PFC);
}
.select-wrap  > input[type=checkbox]:hover ~ .select-title h3 {
    opacity: 1;
}
.select-wrap  > input[type=checkbox]:hover ~ .select-title p {
    outline-style: solid;
    outline-color: var(--G200);
}
.select-wrap  > input[type=checkbox]:checked ~ .select-title h3 {
    opacity: 1;
}
.select-wrap  > input[type=checkbox]:checked ~ .select-title p::after {
    transform: rotate(180deg);
}
.select-wrap  > input[type=checkbox]:checked ~ .select-menu {
    z-index: 1;
    height: auto;
    margin-top: -1px;
    opacity: 1;
}
/*BUTTON TYPE SETS*/
.btn-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    width: max-content;
    padding: 0px 8px;
    cursor: pointer;
}
.btn-wrap.cancel {
    padding-left: 0px;
}
.btn-wrap.submit {
    padding-right: 0px;
}
.btn-wrap .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: max-content;
    min-width: 96px;
    height: 32px;
    padding: 0px 32px;
    line-height: 32px;
    color: var(--G00);
    background-color: var(--PFC);
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
    transition: ease 0.35s;
}
.btn-wrap .btn span.icon-wrap {
    display: none;
}
/*----Dynamic properties for Button Format*/
.btn-wrap.icon-l .btn > span:nth-of-type(1) {
    display: inline-block;
    width: 32px;
    height: 32px;
}
.btn-wrap.icon-r .btn > span:nth-of-type(2) {
    display: inline-block;
    width: 32px;
    height: 32px;
}
.btn-wrap .btn p {
    margin: 0px 8px;
}
/*----Dynamic properties for Button Type*/
.btn-wrap.hover .btn,
.btn-wrap .btn:hover {
    background-color: var(--PSC);
}
.btn-wrap.active .btn,
.btn-wrap .btn:active {
    border: 1px solid var(--PFC);
}
.btn-wrap.typeB .btn {
    background-color: var(--PSC);
}
.btn-wrap.typeB.hover .btn,
.btn-wrap.typeB .btn:hover {
    background-color: var(--PTC);
}
.btn-wrap.typeB.active .btn,
.btn-wrap.typeB .btn:active {
    border: 1px solid var(--PSC);
    background-color: var(--PSC);
}
.btn-wrap.typeC .btn {
    color: var(--G500);
    background-color: var(--G00);
    border: 1px solid var(--G500);
}
.btn-wrap.typeC.hover .btn,
.btn-wrap.typeC .btn:hover {
    color: var(--PFC);
    border: 1px solid var(--PFC);
}
.btn-wrap.typeC.active .btn,
.btn-wrap.typeC .btn:active {
    color: var(--G00);
    background-color: var(--PFC);
    border: 1px solid var(--PFC);
}
.btn-wrap.disabled .btn {
    color: var(--G400) !important;
    background-color: var(--G100) !important;
    border: 1px solid var(--G200) !important;
    cursor: auto;
}
/*----Dynamic properties for Button Size*/
.btn-wrap.large .btn {
    min-width: 128px;
    height: 40px;
    line-height: 40px;
}
.btn-wrap.small .btn {
    min-width: 96px;
    height: 28px;
    padding: 0px 8px;
    line-height: 28px;
}
.btn-wrap.small .btn p {
    font-size: 10px;
}
/*BUTTON SWITCH*/
.btn-wrap.switch .btn {
    position: relative;
    display: block;
    width: 66px;
    min-width: inherit;
    height: 32px;
    padding: 2px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    overflow: hidden;
}
.btn-wrap.switch .btn:active {
    border: 1px solid transparent;
}
.btn-wrap.switch .btn > input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
}
.btn-wrap.switch .btn span.icon-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 28px;
    background-size: 20px;
}
.btn-wrap.switch .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background-color: var(--G100);
    border: 1px solid var(--G300);
    box-shadow: 1px 0px 3px 0px rgba(186, 186, 186, 0.25) inset;
    box-sizing: border-box;
}

.btn-wrap.switch .btn > p {
    position: relative;
    z-index: 1;
    float: left;
    display: block;
    width: 28px;
    height: 28px;
    margin: -1px 0px 0px;
    background-color: var(--G00);
    border: 1px solid var(--G300);
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 50px;
    box-sizing: border-box;
    transition: ease 0.35s;
}
.btn-wrap.switch .btn > input[type=checkbox]:checked ~ P {
    margin-left: 32px;
}
.btn-wrap.switch .btn > input[type=checkbox]:checked ~ .bg {
    background-color: var(--PTC);
    border: 1px solid var(--PFC);
}
/*----Dynamic properties for Button Switch Size*/
.btn-wrap.switch.small .btn {
    width: 36px;
    height: 20px;
}
.btn-wrap.switch.small .btn > p {
    width: 16px;
    height: 16px;
}
.btn-wrap.switch.small .btn > input[type=checkbox]:checked ~ p {
    margin-left: 14px;
}
/*----READMODE*/
.btn-wrap.switch.readmode .btn .bg {
    background-color: var(--G100) !important;
    border: 1px solid var(--G200) !important;
}
.btn-wrap.switch.readmode .btn p {
    background-color: var(--PFC) !important;
}
.btn-wrap.switch.readmode .btn span.icon-wrap {
    display: block;
}
.btn-wrap.switch .btn .read-light {
    left: 2px;
}
.btn-wrap.switch .btn .read-dark {
    right: 2px;
    background-image: url(../images/btn_readmode_d_h.png);
}
.btn-wrap.switch .btn > input[type=checkbox]:checked ~ .read-light {
    background-image: url(../images/btn_readmode_l_h.png);
}
.btn-wrap.switch .btn > input[type=checkbox]:checked ~ .read-dark {
    background-image: url(../images/btn_readmode_d_n.png);
}
/**/
.btn-round-wrap {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 20px;
}


.align-c {
    text-align: center;
}
.flex-centet {
    justify-content: center;
}