:root[data-theme="theme-black-white"] {
    --img-gray: grayscale(100%);
    --nav-bg: #000000;
    --exchange-bg: #000000;
    --exchange-color: white;
    --option-color: white;
    --option-bg: #000000;
    --select2sc-bg: #000000;
    --select2sc-color: white;
    --select2hc-bg: white;
    --select2hc-color: #000000;
    --select2-results-bg: #000000;
    --train-number1-bg: black;
    --train-number1-border: white;
    --train-number1-color: white;
    --train-number1-type-bg: white;
    --train-number1-type-color: black;
    --train-line-bg: white;
    --train-line-name-color: black;
    --train-line-name1-color: black;
    --train-line-price-color: black;
    --train-detail-bg: white;
    --train-detail-color: black;
    --train-detail-dash: linear-gradient( to right, black 35%, rgba(255, 255, 255, 0) 0% );
    --train-detail-lenghttime: black;
    --train-detail-time: black;
    --train-detail-inout: black;
    --train-detail-noti-bg: black;
    --train-detail-noti-color: white;
    --train-collapse-head: black;
    --icon-chevron-down: black;
    --icon-chevron-up: black;
    --track-color: white;
    --btn-theme-active: black;
    --btn-color-active: white;
    --btn-border-active: white;
    --btn-switch-label: white;
    /*traindetail*/
    --main-bg: white;
    --head-color: black;
    --tab-active-bg: black;
    --tab-active-color: white;
    --tab-active-icon: white;
    --tab-unactive-icon: black;
    --tab-unactive-text: black;
    --tab-bar-bg: black;
    --tab-bar-color: white;
    --tab-bar-color-tab2-1: white;
    --tab-bar-color-tab2-2: white;
    --tab-bar-color-tab3-1: white;
    --tab-bar-color-tab3-2: white;
    --content-timeline-bg: black;
    --content-timeline-head-color: white;
    --content-timeline-in-color: white;
    --content-timeline-dash: white;
    --content-timeline-dot-bg: white;
    --content-timeline-dot-border: black;
    --head1-tab2: black;
    --head2-tab2: black;
    --tab3-list-type1: black;
    --tab3-list-type2: black;
    --tab3-list-type3: black;
    --tab3-list-type1-col: white;
    --tab3-list-type2-col: white;
    --tab3-list-type3-col: white;
    --remark-bg: black;
    --remark-color: white;
    --remark-color-text: black;
    --tab3-color-text: black;
    --return-bg: black;
    --return-text: white;
    --box-general-box-color: #ffffff;
    --gradient-color1: rgb(128 128 128);
    --gradient-color2: rgb(128 128 128);
}

:root[data-theme="theme-normal"] {
    --img-gray: none;
    --nav-bg: #810811;
    --exchange-bg: orange;
    --exchange-color: #000000;
    --option-color: #444;
    --option-bg: #fff;
    --select2sc-bg: white;
    --select2sc-color: #000000;
    --select2hc-bg: #5897fb;
    --select2hc-color: black;
    --select2-results-bg: white;
    --train-number1-bg: #9E131A;
    --train-number1-border: #DAA520;
    --train-number1-color: white;
    --train-number1-type-bg: #b60000;
    --train-number1-type-color: white;
    --train-line-bg: white;
    --train-line-name-color: black;
    --train-line-name1-color: #aaa;
    --train-line-price-color: black;
    --train-detail-bg: white;
    --train-detail-color: #575757;
    --train-detail-dash: linear-gradient( to right, #aaa 35%, rgba(255, 255, 255, 0) 0% );
    --train-detail-lenghttime: #999;
    --train-detail-time: black;
    --train-detail-inout: #9E131A;
    --train-detail-noti-bg: #F5E7E8;
    --train-detail-noti-color: #a00000;
    --train-collapse-head: black;
    --icon-chevron-down: #575757;
    --icon-chevron-up: #9E131A;
    --track-color: white;
    --btn-theme-active: white;
    --btn-color-active: black;
    --btn-border-active: black;
    --btn-switch-label: white;
    /*traindetail*/
    --main-bg: #fff8d9;
    --head-color: #575757;
    --tab-active-bg: #9E131A;
    --tab-active-color: #fff;
    --tab-active-icon: #fff;
    --tab-unactive-icon: #9E131A;
    --tab-unactive-text: #9E131A;
    --tab-bar-bg: #25455F;
    --tab-bar-color: white;
    --tab-bar-color-tab2-1: white;
    --tab-bar-color-tab2-2: #e9af0f;
    --tab-bar-color-tab3-1: #e9af0f;
    --tab-bar-color-tab3-2: white;
    --content-timeline-bg: white;
    --content-timeline-head-color: #575757;
    --content-timeline-in-color: #9E131A;
    --content-timeline-dash: #575757;
    --content-timeline-dot-bg: #9E131A;
    --content-timeline-dot-border: #E6AA26;
    --head1-tab2: #575757;
    --head2-tab2: brown;
    --tab3-list-type1: #EDEEEF;
    --tab3-list-type2: #4A515B;
    --tab3-list-type3: #D0B04D;
    --tab3-list-type1-col: black;
    --tab3-list-type2-col: white;
    --tab3-list-type3-col: white;
    --remark-bg: #9E131A;
    --remark-color: white;
    --remark-color-text: black;
    --tab3-color-text: black;
    --return-bg: #9f6d00;
    --return-text: white;
    --gradient-color1: #9E131A; /*rgba(43,134,139,1);*/
    --gradient-color2: #9E131A; /*rgba(65,193,199,1);*/
    --box-general-box-color: white; /*#ffffff*/
}

:root[data-theme="theme-black-yellow"] {
    --img-gray: grayscale(100%);
    --nav-bg: #000000;
    --exchange-bg: #000000;
    --exchange-color: #ffff00;
    --option-color: #ffff00;
    --option-bg: #000000;
    --select2sc-bg: #ffff00;
    --select2sc-color: black;
    --select2hc-bg: #ffff00;
    --select2hc-color: black;
    --select2-results-bg: #000000;
    --train-number1-bg: #ffff00;
    --train-number1-border: black;
    --train-number1-color: black;
    --train-number1-type-bg: black;
    --train-number1-type-color: #ffff00;
    --train-line-bg: black;
    --train-line-name-color: #ffff00;
    --train-line-name1-color: #ffff00;
    --train-line-price-color: #ffff00;
    --train-detail-bg: black;
    --train-detail-color: #ffff00;
    --train-detail-dash: linear-gradient( to right, #ffff00 35%, rgba(255, 255, 255, 0) 0% );
    --train-detail-lenghttime: #ffff00;
    --train-detail-time: #ffff00;
    --train-detail-inout: #ffff00;
    --train-detail-noti-bg: white;
    --train-detail-noti-color: #ffff00;
    --train-collapse-head: #ffff00;
    --icon-chevron-down: #ffff00;
    --icon-chevron-up: #ffff00;
    --track-color: #ffff00;
    --btn-theme-active: #ffff00;
    --btn-color-active: #ffff00;
    --btn-theme-active: black;
    --btn-border-active: #ffff00;
    --btn-switch-label: white;
    /*traindetail*/
    --main-bg: white;
    --head-color: #ffff00;
    --tab-active-bg: black;
    --tab-active-color: #ffff00;
    --tab-active-icon: #ffff00;
    --tab-unactive-icon: #ffff00;
    --tab-unactive-text: #ffff00;
    --tab-bar-bg: black;
    --tab-bar-color: #ffff00;
    --tab-bar-color-tab2-1: #ffff00;
    --tab-bar-color-tab2-2: #ffff00;
    --tab-bar-color-tab3-1: #ffff00;
    --tab-bar-color-tab3-2: #ffff00;
    --content-timeline-bg: black;
    --content-timeline-head-color: #ffff00;
    --content-timeline-in-color: #ffff00;
    --content-timeline-dash: #ffff00;
    --content-timeline-dot-bg: white;
    --content-timeline-dot-border: black;
    --head1-tab2: #ffff00;
    --head2-tab2: #ffff00;
    --tab3-list-type1: black;
    --tab3-list-type2: black;
    --tab3-list-type3: black;
    --tab3-list-type1-col: #ffff00;
    --tab3-list-type2-col: #ffff00;
    --tab3-list-type3-col: #ffff00;
    --remark-bg: black;
    --remark-color: #ffff00;
    --remark-color-text: #ffff00;
    --tab3-color-text: #ffff00;
    --return-bg: black;
    --return-text: #ffff00;
    --gradient-color1: rgb(128 128 128);
    --gradient-color2: rgb(128 128 128);
    --box-general-box-color: #ffff00;
}

:root[data-font="font-75"] {
    --font-default: 1rem;
    --font-option: 15px;
    --font-card-number: 3.5rem;
    --font-info-text: 1rem;
    --font-card-head-name: 15px;
    --font-card-head-line: 15px;
    --font-card-headtrack-price: 15px;
    --font-card-headtrack-name: 1.2rem;
    --font-card-detail-timelength: 15px;
    --font-card-detail-stationtime: 2rem;
    --font-card-detail-stationtext: 15px;
    --font-card-detail-warning: 10px;
    --font-collapse-empty: 12px;
    --font-panel-collapse: 15px;
    --font-collapse-item-text: 10px;
    /*traindetail*/
    --font-main-tab: 1em;
    --font-main-tab-icon: 30px;
    --font-bar-icon-tab1: 0.8em;
    --font-bar-text-tab1: 0.9em;
    --font-timeline-head: 15px;
    --font-timeline-in: 0.8em !important;
    --font-tab2-head: 0.5em !important;
    --font-tab2-detailhead: 1em !important;
    --font-tab3-head: 0.8em !important;
    --font-tab3-type: 0.5em !important;
    --font-tab3-moredetail: 1.3rem !important;
    --font-tab3-moredetail-row: 1.2rem !important;
    --box-general-box: 90px;
    --box-general-img: 35px;
    --font-default-station: 1rem;
}

:root[data-font="font-100"] {
    --font-default: 1.6rem;
    --font-option: 20px;
    --font-card-number: 3.9rem;
    --font-info-text: 1.3rem;
    --font-card-head-name: 20px;
    --font-card-head-line: 20px;
    --font-card-headtrack-price: 20px;
    --font-card-headtrack-name: 1.5rem;
    --font-card-detail-timelength: 20px;
    --font-card-detail-stationtime: 2.5rem;
    --font-card-detail-stationtext: 20px;
    --font-card-detail-warning: 13px;
    --font-collapse-empty: 15px;
    --font-panel-collapse: 20px;
    --font-collapse-item-text: 13px;
    /*traindetail*/
    --font-main-tab: 1.2em;
    --font-main-tab-icon: 40px;
    --font-bar-icon-tab1: 1.0em;
    --font-bar-text-tab1: 1.1em;
    --font-timeline-head: 20px;
    --font-timeline-in: 1.0em !important;
    --font-tab2-head: 0.8em !important;
    --font-tab2-detailhead: 1.2em !important;
    --font-tab3-head: 1.2em !important;
    --font-tab3-type: 0.8em !important;
    --font-tab3-moredetail: 1.7rem !important;
    --font-tab3-moredetail-row: 1.5rem !important;
    --box-general-box: 100px;
    --box-general-img: 45px;
    --font-default-station: 1.3rem;
}

:root[data-font="font-125"] {
    --font-default: 2rem;
    --font-option: 25px;
    --font-card-number: 4.5rem;
    --font-info-text: 1.8rem;
    --font-card-head-name: 25px;
    --font-card-head-line: 25px;
    --font-card-headtrack-price: 25px;
    --font-card-headtrack-name: 2rem;
    --font-card-detail-timelength: 25px;
    --font-card-detail-stationtime: 3rem;
    --font-card-detail-stationtext: 25px;
    --font-card-detail-warning: 16px;
    --font-collapse-empty: 18px;
    --font-panel-collapse: 25px;
    --font-collapse-item-text: 16px;
    /*traindetail*/
    --font-main-tab: 1.8em;
    --font-main-tab-icon: 50px;
    --font-bar-icon-tab1: 1.2em;
    --font-bar-text-tab1: 1.3em;
    --font-timeline-head: 30px;
    --font-timeline-in: 1.4em !important;
    --font-tab2-head: 1.2em !important;
    --font-tab2-detailhead: 1.6em !important;
    --font-tab3-head: 1.5em !important;
    --font-tab3-type: 1em !important;
    --font-tab3-moredetail: 2rem !important;
    --font-tab3-moredetail-row: 1.8rem !important;
    --box-general-box: 145px;
    --box-general-img: 50px;
    --font-default-station: 1.6rem;
}