/*!
* Style for RMA Web Server
* 
* Author :  Shiouyu Lee / YanYan Lin
* 
* Date: 2022-02-07
*/

/* Covered 99.5 percent and latest four version */
:root {
    --xxx_width: -webkit-calc(100vw - 50px);
    --xxx_width: -moz-calc(100vw - 50px);
    --xxx_width: calc(100vw - 50px);
    /* 100vh :height */
    --full_height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
    --full_height: calc(var(--vh, 1vh) * 100);
    /* 100vw: width */
    --full_width: 100vw;
    --WidthWoSideBar: calc(100vw - 220px);
    --WidthForDivideLine: calc(100vw - 280px);
    --xxx_hight: -webkit-calc(100vh/20);
    --xxx_hight: -moz-calc(100vh/20);
    --xxx_hight: calc(100vh / 20);
    /* --margin-left: calc(1.667 * calc(100vw/600)); */
    /* --margin-right: calc(1.667 * calc(100vw/600)); */
    /* --icon_size: calc(4.1 * calc(100vw/600)); */
    --button_width: 115px;
    --radius: 4px;
    --radius_note: 2px;
    --button_large: 300px;

    /* ex: --main-color:#06c; */
    /* Color Define: */
    /* Background color */
    /* Dark Background */
    --bgd_1: #3a3e45;
    --bgd_2: #363a40;
    --bgd_3: #2f3238;
    --bgd_4: #2b2d33;
    --bgd_5: #27292e;
    --bgd_6: #24262b;
    --bgd_7: #202226;
    --bgd_8: #1a1b1f;
    --bgd_9: #131417;
    --bgd_10: #0f0f0f;
    /* Light Background */
    --bgl_1: #ffffff;
    --bgl_2: #fafafa;
    --bgl_3: #f5f5f5;
    --bgl_4: #f0f0f0;
    --bgl_5: #eaeaea;
    --bgl_6: #dedede;
    --bgl_7: #d6d6d6;
    --bgl_8: #cccccc;
    --bgl_9: #c4c4c4;
    --bgl_10: #bdbdbd;

    --bg_treeview: #fff;

    /* Foreground color */
    /* Dark Background */
    --fgd_1: #eef0f5;
    --fgd_2: #aeb8cc;
    --fgd_3: #98a1b3;
    --fgd_4: #7e8799;
    --fgd_5: #737b8c;
    --fgd_6: #697180;
    --fgd_7: #5f6573;
    --fgd_8: #545a66;
    --fgd_9: #4a4f59;
    --fgd_10: #3f434d;
    --fdg_11: #363940;
    --fdg_12: #2b2d33;
    --fdg_13: #24262b;
    --fdg_14: #1e1f24;
    --fdg_15: #1a1b1f;
    /* Light Background */
    --fgl_1: #ffffff;
    --fgl_2: #f5f5f5;
    --fgl_3: #f0f0f0;
    --fgl_4: #eaeaea;
    --fgl_5: #e3e3e3;
    --fgl_6: #d8d8d8;
    --fgl_7: #cccccc;
    --fgl_8: #bfbfbf;
    --fgl_9: #b2b2b2;
    --fgl_10: #a6a6a6;
    --fgl_11: #999999;
    --fgl_12: #8c8c8c;
    --fgl_13: #737373;
    --fgl_14: #595959;
    --fgl_15: #333333;

    /* Text Color */
    /* For Dark Background */
    --txd_p: #ffffff;
    --txd_s: #acaeb3;
    --txd_t: #737478;
    --txd_g: #29ccb6;
    --txd_y: #ffd100;
    --txd_r: #ff737b;
    /* For Light Background */
    --txl_p: #0a0a0a;
    --txl_s: #666666;
    --txl_t: #999999;
    --txl_g: #006655;
    --txl_y: #806800;
    --txl_r: #b32029;
    --txl_orange: #f3983e;

    /* Action color */
    /* Teal(Default) */
    --act_1: #80eaff;
    --act_2: #55ddf2;
    --act_3: #37c6d9;
    --act_4: #00afbf;
    --act_5: #009da6;
    --act_6: #00838d;
    --act_7: #007373;
    --act_8: #005e5e;
    --act_9: #004d4d;
    --act_10: #003b3b;
    /* Cerulean(Customized color) */
    --acc_1: #b3dbff;
    --acc_2: #80bfff;
    --acc_3: #59a5ff;
    --acc_4: #3089f2;
    --acc_5: #2b7cd9;
    --acc_6: #266dbf;
    --acc_7: #205ca1;
    --acc_8: #204a80;
    --acc_9: #1e3859;
    --acc_10: #172a42;
    /* Lagoon Green(Customized color) */
    --acl_1: #a6ffe9;
    --acl_2: #91f2d5;
    --acl_3: #65d9b2;
    --acl_4: #26bf87;
    --acl_5: #1ba66c;
    --acl_6: #158757;
    --acl_7: #12734a;
    --acl_8: #0f5e3d;
    --acl_9: #0c4d32;
    --acl_10: #083321;
    /* Rouge(Customized color) */
    --acr_1: #ffd1db;
    --acr_2: #ffabbd;
    --acr_3: #ff89a6;
    --acr_4: #e65787;
    --acr_5: #cc4378;
    --acr_6: #b33b69;
    --acr_7: #8c2e52;
    --acr_8: #66223c;
    --acr_9: #521b30;
    --acr_10: #421728;
    /* Tawny(Customized color) */
    --actw_1: #ffdcb3;
    --actw_2: #f2bb79;
    --actw_3: #e69d45;
    --actw_4: #d98016;
    --actw_5: #bf6900;
    --actw_6: #a65b00;
    --actw_7: #8c4d00;
    --actw_8: #6b3b00;
    --actw_9: #542e00;
    --actw_10: #422400;
    /* Mauve(Customized color) */
    --acm_1: #e9d9ff;
    --acm_2: #d6b3ff;
    --acm_3: #bc85f2;
    --acm_4: #a357d9;
    --acm_5: #994cbf;
    --acm_6: #8542a6;
    --acm_7: #70388c;
    --acm_8: #5c2e73;
    --acm_9: #48245a;
    --acm_10: #351b42;

    /* Function color */
    /* copy */
    --fc_ci: #009971;
    --fc_cl1: #009179;
    --fc_cl2: #00c18e;
    /* fax */
    --fc_fi: #6c4cbf;
    --fc_fl1: #7b48ff;
    --fc_fl2: #9c77ff;
    /* print */
    --fc_pi: #77b300;
    --fc_pl1: #79b800;
    --fc_pl2: #c6e500;
    /* scan */
    --fc_si: #1b83bd;
    --fc_sl1: #0076de;
    --fc_sl2: #00a3ff;
    /* Setting */
    --fc_stl1: #7e8799;

    /* Status color */
    /* Ready(Green) */
    --stg_1: #d9fffb;
    --stg_2: #b3fff5;
    --stg_3: #72e6d7;
    --stg_4: #29ccb6;
    --stg_5: #12b398;
    --stg_6: #009e83;
    --stg_7: #00856f;
    --stg_8: #006655;
    --stg_9: #004d40;
    --stg_10: #003b31;
    /* Alert(Yellow) */
    --sty_1: #fff8d9;
    --sty_2: #fff1b3;
    --sty_3: #ffe366;
    --sty_4: #ffd100;
    --sty_5: #e6bc00;
    --sty_6: #cca700;
    --sty_7: #b39200;
    --sty_8: #806800;
    --sty_9: #594900;
    --sty_10: #403400;
    /* Error(Red) */
    --str_1: #ffcccc;
    --str_2: #ffa6a6;
    --str_3: #ff737b;
    --str_4: #e63944;
    --str_5: #cc252f;
    --str_6: #b32029;
    --str_7: #991c23;
    --str_8: #80171d;
    --str_9: #59090d;
    --str_10: #40060a;

    /* Toner color */
    /* black */
    --tn_k: #000000;
    /* cyan */
    --tn_c: #15a3d3;
    /* magenta */
    --tn_m: #ce318d;
    /* yellow */
    --tn_y: #eadb52;
    /* gold */
    --tn_g: #b38100;
    /* custom red */
    --tn_cr: #cc3e33;
    /* neon pink */
    --tn_np: #ff3ebd;
    /* silver */
    --tn_si: #918f8f;
    /* clear */
    --tn_cl: #7497b3;
    /* white */
    --tn_w: #ffffff;

    /* opacity */
    --background_opacity: 0.2;
    --background_opacity_info: 1;
    --opacity_disable: 0.3;
    --opacity_default: 0.9;
    --opacity_select: 0.6;
    --opacity_select_child: 0.4;
    --opacity_select_hover: 0.8;
    --opacity_btn_default: 0.8;
    --opacity_btn_hover: 1;
    --opacity_icon_tab: 0.8;
    --opacity_finished_ahead: 0.6;

    --normal_text_color: #fff;

    /* font Size */
    --text_large: 18px;
    --text_medium: 16px;
    --text_small: 14px;
    --title_large: 20px;
    --title_medium: 18px;
    --title_small: 16px;
    --label_large: 18px;
    --label_medium: 16px;
    --label_small: 14px;
    /* Explanation (Static text) */
    --explanation_large: 18px;
    --explanation_medium: 16px;
    --explanation_small: 14px;
    /* Notation (short explanation) */
    --notation_large: 16px;
    --notation_medium: 14px;
    --notation_small: 12px;

    /* Line Height */
    --line_height_normal: 1.25;
    --line_height_message: 1.5;
    --line_height_body: 1.5;

    /* Glyph*/
    --glyph_default: var(--txd_s);
    --glyph_hover: var(--bgl_3);
    --glyph_active: var(--txd_t);
    --glyph_checked: var(--act_4);
    --glyph_checked_hover: var(--act_2);
    --glyph_checked_active: var(--act_8);
    --glyph_alert: var(--txd_y);
    --glyph_alert_hover: var(--sty_2);
    --glyph_alert_active: var(--txl_y);
    --glyph_error: var(--txd_r);
    --glyph_error_hover: var(--str_2);
    --glyph_error_active: var(--str_8);
    --glyph_opacity_disabled: var(--opacity_disable);

    --text-color: #000000;
    --text-warning-color: #ff6a6a;
    /* --input_bg: rgba(255, 255, 255, 0.9); */
    --input_bg: #ffffff;
    --disable_bg: #e2e0e0;
    /* --text-hint-color: #ffc600; */
    --text-hint-color: #5297ff;
    --text-color-light: #ffffff;

    /* MicroGrid */
    --color_charcoal_grey_top: #25292f;
    --color_charcoal_grey_bottom: #3b424a;
    --color_gunmetal: #444c57;
    --color_dark: #1b1d21;
    --color_brown_grey: #989898;
    --text-color-selected: #5297ff;

    --cursor_click: pointer;
    --cursor_not_click: default;
    --cursor_deny: not-allowed;
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 400;
    src: local("PingFang SC Regular");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 600;
    src: local("PingFang SC Medium");
}

@font-face {
    font-family: "PingFang-SC";
    font-weight: 900;
    src: local("PingFang SC Semibold");
}

@font-face {
    font-family: "Microsoft JhengHei";
    font-weight: 400;
    src: local("Microsoft JhengHei Regular");
}

@font-face {
    font-family: "Microsoft JhengHei";
    font-weight: 600;
    src: local("Microsoft JhengHei Medium");
}

@font-face {
    font-family: "Microsoft JhengHei";
    font-weight: 900;
    src: local("Microsoft JhengHei Bold");
}

h1,
.h1 {
    font-size: 30px;
}

h2,
.h2 {
    font-size: 20px;
}

h3,
.h3 {
    font-size: 18px;
}

h4,
.h4 {
    font-size: 16px;
}

h5,
.h5 {
    font-size: 13px;
}

h6,
.h6 {
    font-size: 11px;
}

#content-wrapper {
    padding: 0 !important;
    margin-top: 60px;
}

body {
    font-family: "NotoSansTC", "PingFang-SC", "Microsoft JhengHei", sans-serif !important;
    background-image: linear-gradient(to bottom, var(--color_gunmetal) 0%, var(--color_dark));
    height: auto;
    color: var(--color_brown_grey);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

label {
    font-family: NotoSansTC;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

.login_img {
    content: url("/gui_cut/login_img_logo.svg");
    display: block;
    margin-top: 70px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.project_img {
    content: url("/gui_cut/login_img_rmasystem.png");
    display: block;
    margin-top: 44px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 176px;
}

.project_img_backend {
    content: url("/b_gui_cut/login_img_rmasystem.svg");
    display: block;
    margin-top: 29px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.login_title {
    height: 24px;
    font-size: 18px;
    color: var(--txd_p);
    text-align: right;
    padding-right: 12px;
    position: relative;
    float: left;
    top: 30px;
    left: -43px;
}

.login_input {
    display: inline-block;
    -webkit-border-radius: var(--radius);
    -moz-border-radius: var(--radius);
    border-radius: var(--radius);
    background-color: #ffffff;
    font-size: 16px;
    height: 30px;
    width: 400px;
    padding-left: 10px;
}

.form-group {
    position: relative;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    top: -14px;
    margin-bottom: 0px;
}

.wrap {
    padding: 15px;
}

#wrapper #content-wrapper {
    background-color: transparent !important;
}

#wrapper {
    width: var(--full_width);
    background-image: radial-gradient(circle at 50% 39%, #414951, #0b0c0e 103%);
}

@media only screen and (max-width: 1280px) {
    #wrapper {
        min-width: 1000px;
        overflow-x: scroll;
    }
}

.frame_bg {
    background-color: transparent;
}

.custom_bg_root {
    background-image: linear-gradient(to bottom, #31373d, #0b0c0e);
}

.custom_bg {
    border-radius: 20px;
    box-shadow: inset 2px 3px 0 0 rgba(91, 91, 91, 0.5);
    background-image: linear-gradient(to bottom, var(--color_gunmetal) 0%, #2e333a 13%, #15171a) !important;
}

.custom_bg_sub_layer {
    border-radius: 20px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(to top, #25292f, #262a2f);
}

.headRadius {
    border-radius: var(--radius) var(--radius) 0px 0px;
}

.btnRadius {
    border-radius: var(--radius);
}

.frameBoard {
    border-top: 0px;
    border-right: 1px solid var(--text-color-selected);
    border-left: 1px solid var(--text-color-selected);
    border-bottom: 1px solid var(--text-color-selected);
}

.bar-btn-active {
    color: var(--normal_text_color) !important;
    background: var(--text-color-selected);
    border-radius: var(--radius);
}

.bar {
    margin-bottom: 0;
    padding: 0;
}

.item {
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: var(--text-color-selected);
}

.item-in-popup {
    color: white;
}

.item:hover {
    cursor: pointer;
    color: white;
    background: var(--text-color-selected);
    opacity: 0.85;
}

.bar .active {
    color: white;
}

.item a {
    color: transparent;
    text-decoration: none;
}

/* Hyper Link */
.noHyperLink {
    text-decoration: none;
}

a[href].hyperLink {
    color: var(--act_3);
}

a[href].hyperLink:hover {
    color: var(--act_1);
}

a[href].hyperLink:active {
    color: var(--act_8);
}

.link,
.link:hover {
    color: var(--txd_p);
    text-decoration: underline;
}

.labelPageTitle {
    position: relative;
    font-size: 20px;
    font-weight: 200;
    color: var(--txd_p);
    margin-bottom: 20px;
    top: 13px;
    left: 10px;
    height: 29px;
}

.copyRight {
    font-size: 14px;
    text-align: center;
    height: 40px;
    position: relative;
    top: 8px;
    color: #777777;
    margin-left: auto;
    margin-right: auto;
}

/* input */
input[type="text"]:invalid,
input[type="number"]:invalid,
input[type="password"]:invalid {
    border-color: transparent;
    background-color: var(--input_bg);
}

input[type="text"]:valid,
input[type="number"]:valid,
input[type="password"]:valid,
input[type="text"],
input[type="number"],
input[type="password"] {
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    background-color: var(--input_bg);
    font-size: 16px;
    color: var(--text-color);
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover {
    border-color: transparent;
    /* background-color: var(--input_bg); */
    background-color: #b1b1b11f;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
input[type="password"]:focus-visible {
    border-color: var(--text-hint-color);
    background-color: var(--input_bg);
    border-width: 1px;
}

input:required {
    box-shadow: none;
}

/* search bar */
.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}

/*Button*/
.input-group-btn .btn-group {
    display: flex !important;
}

.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btn-group .form-horizontal .btn[type="submit"] {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

.form-group .form-control:last-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

/* Image buttons (width/height:adjustable) */
.divMainPage {
    width: 50px;
    height: 50px;
    content: url("/images/notification_btn_overview.svg");
}

.divMainPage:hover,
.divMainPage:focus,
.divMainPage:active {
    content: url("/images/notification_btnf_overview.svg");
}

.divMainPage.active {
    content: url("/images/notification_btnf_overview.svg");
}

.divMainPage.active :hover,
.divMainPage.active :focus,
.divMainPage.active :active {
    content: url("/images/notification_btn_overview.svg");
}

.divDeviceList {
    width: 50px;
    height: 50px;
    content: url("/images/notification_btn_list.svg");
}

.divDeviceList:hover,
.divDeviceList:focus,
.divDeviceList:active {
    content: url("/images/notification_btnf_list.svg");
}

.divDeviceList.active {
    content: url("/images/notification_btnf_list.svg");
}

.divDeviceList.active :hover,
.divDeviceList.active :focus,
.divDeviceList.active :active {
    content: url("/images/notification_btn_list.svg");
}

.divEnvironment {
    width: 50px;
    height: 50px;
    content: url("/images/notification_btn_weather.svg");
}

.divEnvironment:hover,
.divEnvironment:focus,
.divEnvironment:active {
    content: url("/images/notification_btnf_weather.svg");
}

.divEnvironment.active {
    content: url("/images/notification_btnf_weather.svg");
}

.divEnvironment.active :hover,
.divEnvironment.active :focus,
.divEnvironment.active :active {
    content: url("/images/notification_btn_weather.svg");
}

.divHistory {
    width: 50px;
    height: 50px;
    content: url("/images/notification_btn_history.svg");
}

.divHistory:hover,
.divHistory:focus,
.divHistory:active {
    content: url("/images/notification_btnf_history.svg");
}

.divHistory.active {
    content: url("/images/notification_btnf_history.svg");
}

.divHistory.active :hover,
.divHistory.active :focus,
.divHistory.active :active {
    content: url("/images/notification_btn_history.svg");
}

.divAlert {
    width: 50px;
    height: 50px;
    content: url("/images/notification_btn_notification.svg");
}

.divAlert:hover,
.divAlert:focus,
.divAlert:active {
    content: url("/images/notification_btnf_notification.svg");
}

.divAlert.active {
    content: url("/images/notification_btnf_notification.svg");
}

.divAlert.active :hover,
.divAlert.active :focus,
.divAlert.active :active {
    content: url("/images/notification_btn_notification.svg");
}

.btnDelete {
    content: url("/gui_cut/main_btn_delete.svg");
    background-repeat: no-repeat;
    cursor: var(--cursor_click);
}

.btnDelete:hover {
    content: url("/gui_cut/main_btn_delete_h.svg");
    background-repeat: no-repeat;
}

.btnDelete.disabled,
.btnDelete:disabled,
.btnDelete.disabled:hover,
.btnDelete.disabled:focus,
.btnDelete.disabled:active {
    content: url("/gui_cut/main_btn_delete_d.svg");
    background-repeat: no-repeat;
    cursor: var(--cursor_deny);
}

.btnDelete:focus {
    content: url("/gui_cut/main_btn_delete_f.svg");
    background-repeat: no-repeat;
}

.btnDelete:active {
    content: url("/gui_cut/main_btn_delete_c.svg");
    background-repeat: no-repeat;
}

.btnCancel {
    content: url("/gui_cut/popup_btn_close.svg");
    background-repeat: no-repeat;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.btnCancel:hover {
    content: url("/gui_cut/popup_btn_close_h.svg");
    background-repeat: no-repeat;
}

.btnCancel:focus {
    content: url("/gui_cut/popup_btn_close_f.svg");
    background-repeat: no-repeat;
}

.btnCancel:active {
    content: url("/gui_cut/popup_btn_close_c.svg");
    background-repeat: no-repeat;
}

.btnCancel.disabled,
.btnCancel:disabled,
.btnCancel.disabled:hover,
.btnCancel.disabled:focus,
.btnCancel.disabled:active {
    content: url("/gui_cut/popup_btn_close_d.svg");
    background-repeat: no-repeat;
    cursor: not-allowed;
}

.btnCsvOutput {
    content: url("/images/main_btn_csv.svg");
}

.btnCsvOutput:hover {
    background-color: #242424;
}

.btnCsvOutput:focus,
.btnCsvOutput:active {
    content: url("/images/main_btn_csv.svg");
}

.btnAdd {
    content: url("/images/main_btn_add.svg");
    cursor: pointer;
}

/* .btnAdd.disabled,
.btnAdd:disabled {
    content: url("/images/main_btn_add.svg");
} */

.btnAdd:hover {
    background-color: #242424;
}

.btnAdd:focus,
.btnAdd:active {
    content: url("/images/main_btnf_add.svg");
}

.btnEdit {
    width: 28px;
    height: 28px;
    content: url("/images/list_btn_edit.svg");
    cursor: pointer;
}

.btnEdit.disabled,
.btnEdit:disabled,
.btnEdit.disabled:hover,
.btnEdit.disabled:focus,
.btnEdit.disabled:active {
    content: url("/images/list_btnd_edit.svg");
    cursor: not-allowed;
}

.btnEdit:hover {
    content: url("/images/list_btnh_edit.svg");
}

.btnEdit:focus,
.btnEdit:active {
    content: url("/images/list_btnf_edit.svg");
}

.btnSearch {
    content: url("/images/input_btn_search.svg");
    background: transparent;
    border-width: 0;
    cursor: pointer;
}

.btnSearch:hover {
    /* content: url("/images/input_btnf_search.svg");
    background: transparent; */
    background-color: #b1b1b11f;
    border-width: 0;
}

/* .btnSearch::disabled {
    content: url("/images/input_btn_search.svg");
    background: transparent;
    border-width: 0;
} */

.btnSearch:focus,
.btnSearch:active {
    content: url("/images/input_btnf_search.svg");
    background: transparent;
    border-width: 0;
}

.btnFilter {
    content: url("/images/input_btn_filter.svg");
    background: transparent;
    border-width: 0;
    cursor: pointer;
}

.btnFilter:hover {
    /* content: url("/images/input_btnf_filter.svg");
    background: transparent; */
    background-color: #b1b1b11f;
    border-width: 0;
}

.btnFilter:focus,
.btnFilter:active {
    content: url("/images/input_btnf_filter.svg");
    background: transparent;
    border-width: 0;
}

.customBtn {
    width: 128px;
    height: 40px;
    position: relative;
    text-align: center;
    color: white;
}

.customBtnGray {
    width: 128px;
    height: 40px;
    position: relative;
    text-align: center;
    color: gray;
}

.customBtn:hover,
.customBtn:focus,
.customBtn:active,
.customBtnGray:hover,
.customBtnGray:focus,
.customBtnGray:active {
    color: black;
}

.customBtnBlue:hover,
.customBtnBlue:focus,
.customBtnBlue:active,
.customBtnRed:hover,
.customBtnRed:focus,
.customBtnRed:active {
    color: white;
}

.customBtnBlue {
    width: 128px;
    height: 40px;
    position: relative;
    text-align: center;
    background-image: url("../images/popup_btn_ok.svg");
    border-radius: var(--radius);
}

.customBtnBlue:hover {
    background-image: url("../images/popup_btnh_ok.svg");
}

.customBtnBlue:disabled {
    background-image: url("../images/popup_btnd_ok.svg");
    cursor: not-allowed;
}

.customBtnBlue:focus,
.customBtnBlue:active {
    background-image: url("../images/popup_btnd_ok.svg");
}

.customBtnRed {
    width: 128px;
    height: 40px;
    position: relative;
    text-align: center;
    background-image: url("../images/popup_btn_delete.svg");
    border-radius: var(--radius);
}

.customBtnRed:hover {
    background-image: url("../images/popup_btnh_delete.svg");
}

.customBtnRed:disabled {
    background-image: url("../images/popup_btnd_delete.svg");
    cursor: not-allowed;
}

.customBtnRed:focus,
.customBtnRed:active {
    background-image: url("../images/popup_btnf_delete.svg");
}

.btnConfirm {
    width: var(--button_large) !important;
    height: 42px;
    background-image: url("../gui_cut/login_btn_login.svg");
    border-radius: var(--radius);
    cursor: pointer;
}

.btnConfirm:hover {
    background-image: url("../images/login_btnh_login.svg");
}

.btnConfirm:focus,
.btnConfirm:active {
    background-image: url("../images/login_btnf_login.svg");
}

.btnAlert {
    content: url("/images/header_btn_notice.svg");
}

.btnAlert:hover {
    background-color: #626262;
}

.btnAlert:focus,
.btnAlert:active,
.btnAlert.active {
    content: url("/images/header_btnf_notice.svg");
}

.btnAccount {
    content: url("/images/header_btn_user.svg");
}

.btnAccount:hover {
    background-color: #626262;
}

.btnAccount:focus,
.btnAccount:active,
.btnAccount.active {
    content: url("/images/header_btnf_user.svg");
}

.btnLogout {
    content: url("/images/header_btn_logout.svg");
}

.btnLogout:hover {
    background-color: #626262;
}

.btnLogout:focus,
.btnLogout:active,
.btnLogout.active {
    content: url("/images/header_btnf_logout.svg");
}

.btnClear {
    content: url("/gui_cut/input_btn_cancel.svg");
    cursor: pointer;
}

.btnClear:hover {
    content: url("/gui_cut/input_btn_cancel_h.svg");
}

.btnClear:focus {
    content: url("/gui_cut/input_btn_cancel_f.svg");
}

.btnClear:active {
    content: url("/gui_cut/input_btn_cancel_c.svg");
}

.btnClear:disabled {
    content: url("/gui_cut/input_btn_cancel_d.svg");
    cursor: not-allowed;
}

.btnEye {
    content: url("/gui_cut/input_btn_view.svg");
    cursor: pointer;
    width: 20px;
}

.btnEye:hover {
    content: url("/gui_cut/input_btn_view_h.svg");
}

.btnEye:focus {
    content: url("/gui_cut/input_btn_view_f.svg");
}

.btnEye:active {
    content: url("/gui_cut/input_btn_view_c.svg");
}

.btnEye:disabled {
    content: url("/gui_cut/input_btn_view_d.svg");
    cursor: not-allowed;
}

.btnEyeX {
    content: url("/gui_cut/input_btn_noview.svg");
    cursor: pointer;
    width: 20px;
}

.btnEyeX:hover {
    /* background-color: #E0e0e0; */
    content: url("/gui_cut/input_btn_noview_h.svg");
}

.btnEyeX:focus {
    content: url("/gui_cut/input_btn_noview_f.svg");
}

.btnEyeX:active {
    content: url("/gui_cut/input_btn_noview_c.svg");
}

.btnEyeX:disabled {
    content: url("/gui_cut/input_btn_noview_d.svg");
    cursor: not-allowed;
}

.btnPre {
    content: url("/images/list_btn_left.svg");
}

.btnPre:hover,
.btnPre:focus,
.btnPre:active {
    content: url("/images/list_btnf_left.svg");
}

.btnNext {
    content: url("/images/list_btn_right.svg");
}

.btnNext:hover,
.btnNext:focus,
.btnNext:active {
    content: url("/images/list_btnf_right.svg");
}

.colorWhite {
    color: white;
}

.colorBack {
    color: black;
}

.btnCustom {
    background-image: url("../images/popup_btn_normal2.svg");
}

.btnCustom:hover {
    background-color: #242424;
}

.btnCustom:focus,
.btnCustom:active {
    background-image: url("/images/popup_btnf_normal2.svg");
}

.btnMap {
    width: 40;
    height: 40;
    border: 0;
    background-image: url("/images/popup_btn_gps.svg");
}

.btnMap:hover,
.btnMap:focus,
.btnMap:active {
    background-image: url("/images/popup_btnf_gps.svg");
}

.btnPupAdd {
    width: 40;
    height: 40;
    border: 0;
    background-image: url("/images/popup_btn_add.svg");
}

.btnPupAdd:hover,
.btnPupAdd:focus,
.btnPupAdd:active {
    background-image: url("/images/popup_btnf_add.svg");
}

.btnPupDelete {
    width: 40;
    height: 40;
    border: 0;
    background-image: url("/images/popup_btn_delete2.svg");
}

.btnPupDelete:hover,
.btnPupDelete:focus,
.btnPupDelete:active {
    background-image: url("/images/popup_btnf_delete2.svg");
}

.forget_btn:hover,
.login_btn:hover {
    opacity: 0.85;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* https://www.w3schools.com/howto/howto_css_image_text.asp */

/* custom Scroll bar */
::-webkit-scrollbar {
    width: 12px;
    padding-right: 4px;
    background-color: #f2f5f9;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #6289c3;
}
::-webkit-scrollbar-thumb:window-inactive {
    background-color: #6289c3;
}
/* custom Scroll bar */

select {
    width: 236px;
    height: 36px;
    color: #000000;
    background: white;
    border-radius: var(--radius);
    -webkit-appearance: none;
    appearance: none;
    padding-left: 15px;
    background-color: var(--input_bg);
}

/* dropdown menu */
.SumoSelect {
    width: 236px;
    height: 36px;
    top: 42px;
    margin-right: 10px;
    color: #000000;
    background: white;
    border-radius: var(--radius);
    -webkit-appearance: none;
}

.SumoSelect .select-all {
    border: 0;
    background-color: var(--bgl_1);
    /* padding: 8px 0 3px 35px; */
    height: 36px;
}

.SumoSelect > .optWrapper > .options li.opt {
    border-bottom: 1px solid transparent !important;
    height: 36px;
    padding: 8px;
    background-color: var(--normal_text_color);
}

.SumoSelect .select-all>label,
.SumoSelect>.CaptionCont,
/* .SumoSelect>.optWrapper>.options li.opt label,
.SumoSelect>.optWrapper>.options li label, */
.SumoSelect>.CaptionCont>span.placeholder {
    color: #4a4a4a;
    /* margin-top: 0px; */
    /* margin-bottom: 0px; */
    font-style: normal;
    /* border-radius: var(--radius); */
    font-size: 14px;
    /* height: 36px; */

    margin: 0;
    padding: 4px 13px 8px 14px;
    border-radius: 18px;
    border: 0;
    background-color: #1b1b1b;
    color: var(--normal_text_color);
    /* background-position:
        calc(100% - 10px) calc(0.5em),
        calc(100% - 15px) calc(0.8em);
    background-repeat: no-repeat;
    background-image: url(/images/input_btn_arrow.svg); */
}

.SumoSelect > .optWrapper > .options li.opt label,
.SumoSelect > .optWrapper > .options li label {
    color: #4a4a4a;
    padding: 0px 13px 8px 9px;
    font-size: 14;
}

.SumoSelect.open > .CaptionCont,
.SumoSelect:focus > .CaptionCont,
.SumoSelect:hover > .CaptionCont {
    border: 0;
    border-color: transparent !important;
    box-shadow: none !important;
}

.SumoSelect .select-all > span i,
.SumoSelect > .optWrapper.multiple > .options li.opt span i,
.SumoSelect .select-all.partial > span i,
.SumoSelect .select-all.selected.partial > span i {
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    content: url(/images/list_btn_checkbox.svg);
    box-shadow: none;
    background-color: var(--bgl_1);
    border-color: transparent;
    left: 12px;
    border: 1px solid transparent;
}

.SumoSelect .select-all.selected > span i,
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i {
    background-color: var(--bgl_1);
    box-shadow: none;
    border-color: transparent;
    width: 20px;
    height: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    content: url(/images/list_btnf_checkbox.svg);
    left: 12px;
}

.SumoSelect > .CaptionCont > label > i {
    top: 6px;
    /* width: 16px;
    height: 10px; */
    background-image: none !important;
}

.SumoSelect > .CaptionCont > span {
    padding-left: 5px;
    display: inline;
}

.SumoSelect.open > .optWrapper {
    border-bottom: 5px;
    width: auto;
}

.SumoSelect > .optWrapper > .options {
    overflow: hidden;
}

/* 調整 placeholder的樣式*/
.SumoSelect > .CaptionCont > span.placeholder {
    color: var(--input_bg) !important;
    font-style: normal !important;
    text-align: left;
    background: transparent;
    position: relative;
    left: -15px;
}

/* 隱藏disable的項目, For placehiolder */
.SumoSelect > .optWrapper > .options li.opt.disabled {
    display: none;
}

.SelectBox {
    padding: 8px;
    height: 36px;
}

/* 若發現點選後出現預設的選單(樣式非預期),請調整width/height/left/top讓它可以覆蓋所有會觸發點擊的位置 */
p.CaptionCont.SelectBox {
    display: block !important;
    position: relative;
    left: -31px;
    width: 150px;
    height: 44;
    padding-top: 12px;
    padding-left: 24;
    top: -8px;
}

.SumoSelect.sumo_project,
.SumoSelect.sumo_product_type,
.SumoSelect.sumo_test_type,
.SumoSelect.sumo_download_type,
.SumoSelect.sumo_project-battery,
.SumoSelect.sumo_battery,
.SumoSelect.sumo_project-power,
.SumoSelect.sumo_power,
.SumoSelect.sumo_solar,
.SumoSelect.sumo_project-history,
.SumoSelect.sumo_level-history {
    margin: 0 0px 10px 20px;
    padding: 4px 13px 8px 14px;
    border-radius: 18px;
    border: solid 1px #b1b1b1;
    background-color: #1b1b1b;
    color: var(--normal_text_color);
    background-position:
        calc(100% - 10px) calc(0.5em),
        calc(100% - 15px) calc(0.8em);
    background-repeat: no-repeat;
    background-image: url(/images/input_btn_arrow.svg);
    position: relative;
    left: -70px;
    top: 6px;
}

.SumoSelect.sumo_project:hover,
.SumoSelect.sumo_product_type:hover,
.SumoSelect.sumo_test_type:hover,
.SumoSelect.sumo_download_type:hover,
.SumoSelect.sumo_project-battery:hover,
.SumoSelect.sumo_battery:hover,
.SumoSelect.sumo_project-power:hover,
.SumoSelect.sumo_power:hover,
.SumoSelect.sumo_solar:hover,
.SumoSelect.sumo_project-history:hover,
.SumoSelect.sumo_level-history:hover {
    /* background-image: url(/images/input_btnh_arrow.svg); */
    background-color: #b1b1b11f;
}

.SumoSelect > .CaptionCont {
    position: relative;
    margin: 0;
    background-color: transparent !important;
    border: 0 !important;
}

p.CaptionCont.SelectBox > span {
    position: relative;
    padding: 0;
}

/* Hover effect */
/* 登入/膠囊按鈕/popup confirm or cancel */
.btnCommon {
    opacity: 0.85;
}

/* 眼睛/X/popup X/popup 下拉 */
.btnIcon {
    background-color: #e0e0e0;
}

/* Sider/Top */
.btnNav {
    background-color: #626262;
}

/* input/下拉/search/paging */
.inputAssistant {
    background-color: #3c3c3c;
}

/* 清單頁/帳號管理 按鈕*/
.btnOthers {
    background-color: #242424;
}

/* Treeview */
.fa-angle-down:before {
    content: url("/images/overview-btn-pulldown.png") !important;
}

.fa-angle-up:before {
    content: url("/images/overview-btn-pullup.png") !important;
}