/*!
 * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body,
html {
    width: 100%;
    height: 100%;
    font-family: '微軟正黑體', 'Open Sans', Arial, sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: '微軟正黑體', 'Open Sans', Arial, sans-serif;
}

.topnav {
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-header {
    color: #f8f8f8;
    background: url(../images/background.png) no-repeat;
    height: auto;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 18%;
    padding-bottom: 18%;
}

    .intro-message > h1 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 5em;
    }

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 0;
    color: #f8f8f8;
    background: url(../images/banner-bg.jpg) no-repeat center center;
    background-size: cover;
}

    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 3em;
    }

    .banner ul {
        margin-bottom: 0;
    }

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

        ul.banner-social-buttons > li:last-child {
            margin-bottom: 0;
        }
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

        .intro-message > h1 {
            font-size: 3em;
        }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

        ul.intro-social-buttons > li:last-child {
            margin-bottom: 0;
        }

    .intro-divider {
        width: 100%;
    }
}

footer {
    padding: 20px 0;
    background-color: #fff;
}

p.copyright {
    margin: 15px 0 0;
}

#scrollview-demo {
    min-height: 500px;
}

#scrollview {
    height: auto;
    position: absolute;
    top: 230px;
    bottom: 0;
    padding-left: 20%;
    width: 70%;
}

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    margin-top: 10px;
}

    .option > span {
        position: relative;
        top: 2px;
        margin-right: 10px;
    }

    .option > .dx-selectbox {
        display: inline-block;
        vertical-align: middle;
        max-width: 300px;
        width: 90%;
    }


/* 貴龍測試 */

.buttin-kkl {
    color: #007bff
}


/* 原本更新後的 css 要去改 font-size : 15px, 不能夠下 * {font-size : 15px} <=> 會影響 Chart Title */

.i_000H_l {
    font-size: 17px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    border-bottom: 1px solid #101010;
    border-right: 1px solid #101010;
    text-align: right !important;
}

.w-12 {
    width: 12%;
}

.w-88 {
    width: 88%;
}

.w-20 {
    width: 20%;
}

.w-80 {
    width: 80%;
}

.i_000H_r {
    font-size: 17px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    border-bottom: 1px solid #101010;
    text-align: left;
}


/* replace fon-size 11~14 => 15px */

body {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    overflow-y: scroll;
    padding: 0px 0px 0px 0px;
    margin: 0px;
}


/* for iBench */

.iN {
    color: #000000;
}

.iW {
    font-weight: bold;
}

.iF14 {
    font-size: 14pt;
}

.iD {
    display: block;
}

.iH {
    color: #000000;
}


/* dx 改的地方 */

.dx-datagrid-rowsview.dx-empty {
    height: 60px;
}

.dx-datagrid .dx-row > td {
    /*padding: 7px;*/
    padding: 7px 4px 7px 4px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-select {
    padding: 0;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
}

.dx-button-text {
    margin: -2px -10px -2px -10px;
}

.dx-tab {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
    padding: 5px 16px 1px 16px;
}

    .dx-tab.dx-tab-selected {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .dx-tab.dx-state-focused:after {
        content: "";
        pointer-events: none;
        position: absolute;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        border: none;
        z-index: 1;
    }

.dx-tabs-expanded {
    display: table;
    border: none;
}

.dx-fileuploader-button {
    margin: 0px 0px 0px 0px;
    height: 32px;
}

.dx-dropdowneditor-input-wrapper {
    opacity: 1;
    height: 30px;
}

.dx-treelist .dx-row > td,
.dx-treelist .dx-row > tr > td {
    padding: 6px 4px 4px 4px;
    height: 34px;
    vertical-align: middle;
}

.dx-button-has-text .dx-button-content {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}


/* 只有給 CMSPortalMenu 用的 */


/*#CMSPortalMenu ul {
    white-space: normal;
}*/


/* cpc 加的地方 */

.cpc-btn {
    /* 這個地方有改會動到 icon+text */
    margin: 1px 1px 1px 1px;
    padding: 0px;
}


    /* 這個地方有改會動到 icon+text 的 icon*/

    .cpc-btn .dx-icon {
        margin: 0px 10px 0px -16px;
    }

.cpc-btn-iconOnly-FV-M {
    padding: 4px 0px 4px 12px;
    width: 32px;
    height: 28px;
    margin: 1px;
}


/* cpc-btn-tb normal for fv (icon only icon only icon only icon only icon only) */

.cpc-btn-icon {
    margin: 1px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 3px;
    width: 30px;
    height: 21px;
}

    .cpc-btn-icon .dx-icon {
        margin: -2px 0px 0px -6px;
    }


/* cpc-btn-LIB normal for gv (icon+text) */

.cpc-btn-LIB {
    margin: -4px 2px -4px 2px;
    padding: 0px 0px 0px 0px;
    height: 32px;
    cursor: pointer;
}

    .cpc-btn-LIB .dx-icon {
        margin: 0px 12px 0px -10px;
    }


/* cpc-btn-tb normal for gv toolbar (icon) */

.cpc-btn-tb {
    /* for toorbar */
    border-radius: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 18px;
    width: 34px;
    height: 26px;
}

    .cpc-btn-tb .dx-icon {
        margin: 0px 12px 0px -18px;
    }

.cpc-btn-txt {
    margin: 0px 1px 1px 0px;
    padding: 4px 4px 4px 0px;
    cursor: pointer;
}

    .cpc-btn-txt .dx-button-content {
        margin: -3px 0px 0px -3px;
    }

.cpc-btn-txt-gv {
    margin: 0px 1px 0px 1px;
    padding: 0px 0px 0px 0px;
    cursor: pointer;
    height: 28px;
}

    .cpc-btn-txt-gv .dx-button-content {
        margin: 2px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }


/* cpc-tile*/

.cpc-tile-ex {
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 148px;
    flex: 0 0 148px;
    width: 156px;
    cursor: pointer;
    height: 156px;
    padding: 4px;
    background-color: transparent;
}

.cpc-tile {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px;
    height: 148px;
    border-radius: 5px;
}

.cpc-tile-text {
    position: relative;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 14px;
    background-color: transparent;
    left: 0px;
    top: 104px;
    text-align: center;
}

.cpc-btn-fixed {
    position: absolute;
    top: 35px;
    left: 200px;
}

.cpc-icon-32 {
    font-size: 32px;
    padding-top: 4px;
    cursor: pointer;
}


/* txextbox inside gv for NCX */

.cpc-txt-gv {
    border-radius: 4px;
}


/* gantt chart g-tag-view-header or content-week or weekend*/

.gantt-bar1 {
    position: relative;
    height: 25px;
    top: 3px;
}

.gantt-bar2 {
    height: 22px;
}

div {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

td {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

label {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

input {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

textarea {
    font-family: 'Lucida Console', 'Microsoft JhengHei' !important;
    line-height: 18px !important;
    padding: 2px !important;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.play-scrolling {
    height: 100%;
    overflow: auto;
}


/* GV Settings */

.gvtb {
    height: 36px;
    padding: 1px 1px 0px 1px;
}


/* FV background*/

.bgfv {
    text-align: left;
    width: 100%;
}


/* FormView Caption */

.fvc {
    text-align: right;
    padding: 8px 4px 4px 4px;
    font-size: 15px !important;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fvv {
    text-align: left;
    padding: 8px 2px 4px 4px;
    font-size: 15px;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.fvve {
    text-align: left;
    padding: 2px 5px 2px 5px;
    font-size: 15px;
    float: left;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.fvveb {
    /* for GVL*/
    text-align: left;
    padding: 0px 0px 0px 0px;
    font-size: 15px;
    border: none;
    display: block;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    float: left;
}

.fv-12-c {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: none;
    text-align: left;
    padding: 4px 4px 4px 4px;
    margin: 8px 12px 0px 6px;
    font-size: 15px !important;
    vertical-align: bottom;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: normal;
    width: 98%;
    text-align: left !important;
    float: left;
}

.fv-12-v {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: none;
    padding: 4px 4px 4px 4px;
    margin: 0px 12px 8px 6px;
    text-align: left !important;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    width: 98%;
    vertical-align: top;
    float: left;
}


/* FormView Value */


/* FormView Value Edit Mode */

.lvline {
    display: inline;
    text-align: left;
    padding: 2px 2px 2px 2px;
    font-size: 15px;
    background-color: transparent;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}


/* for short css combine align */


/* a = align, b = border, pd = padding, mg = margin, ft = font-size, ht = height, wt = width */

.alr {
    text-align: right;
}

.alc {
    text-align: center;
}

.all {
    text-align: left;
}

.avt {
    vertical-align: top;
}

.avc {
    vertical-align: middle;
}

.avb {
    vertical-align: bottom;
}

.b-none {
    border: none !important;
}

.bt0 {
    border-top: none;
}

.bl0 {
    border-left: none;
}

.bb0 {
    border-bottom: none;
}

.br0 {
    border-right: none;
}


/* for short css combine pd */

.none {
    display: none;
}

.pd0 {
    padding: 0px !important;
}

.pd1 {
    padding: 1px !important;
}

.pd2 {
    padding: 2px !important;
}

.pd3 {
    padding: 3px !important;
}

.pd6 {
    padding: 6px !important;
}

.pdr0 {
    padding-right: 0px;
}

.pdr1 {
    padding-right: 1px;
}

.pdr2 {
    padding-right: 2px;
}

.pdr3 {
    padding-right: 3px;
}

.pdl0 {
    padding-left: 0px;
}

.pdl1 {
    padding-left: 1px;
}

.pdl2 {
    padding-left: 2px;
}

.pdl3 {
    padding-left: 3px;
}

.pdr6 {
    padding-right: 6px;
    margin-right: 0px;
}

.pdl6 {
    padding-left: 6px;
    margin-left: 0px;
}

.pdl12 {
    padding-left: 12px;
    margin-left: 0px;
}

.pdl24 {
    padding-left: 24px;
    margin-left: 0px;
}

.pdt0 {
    padding-top: 0px !important;
}

.pdt2 {
    padding-top: 2px !important;
}

.pdt6 {
    padding-top: 6px !important;
}

.pdt12 {
    padding-top: 12px !important;
}

.mg0 {
    margin: 0px !important;
}

.mg1 {
    margin: 1px !important;
}

.mg2 {
    margin: 2px !important;
}

.mg3 {
    margin: 3px !important;
}

.mg6 {
    margin: 6px !important;
}

.mgb2 {
    margin-bottom: 2px !important;
}


/* for short css combine bg */


/* for short css combine ft */

.ft12 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 12px !important;
}

.ft13 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 13px !important;
}

.ft14 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 14px !important;
}

.ft15 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 15px !important;
}

.ft16 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 16px !important;
}

.ft18 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 18px !important;
}

.ft20 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 20px !important;
}

.ft22 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 22px !important;
}

.ft24 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 24px !important;
}

.ft32 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 32px !important;
}

.ft48 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 48px !important;
}

.ft64 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 64px !important;
}

.ht20 {
    height: 20px;
}

.ht22 {
    height: 22px;
}

.ht24 {
    height: 24px;
}

.ht28 {
    height: 28px;
}

.ht32 {
    height: 32px;
}

.ht36 {
    height: 36px;
}

.ht40 {
    height: 40px;
}

.ht44 {
    height: 44px;
}

.ht48 {
    height: 48px;
}

.ht52 {
    height: 52px;
}

.ht56 {
    height: 56px;
}

.ht60 {
    height: 60px;
}

.ht66 {
    height: 66px;
}

.ht72 {
    height: 72px;
}

.wt4 {
    width: 4px;
}

.wt12 {
    width: 12px;
}

.wt24 {
    width: 24px;
}

.nowrap {
    white-space: nowrap;
}


/* for short css combine border */

.tblemp {
    width: 100%;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

.tblhea {
    display: table;
    width: 100%;
    font-size: 15px;
    overflow: auto;
    vertical-align: middle;
    padding: 2px;
    white-space: nowrap;
}

.tblrow1 {
    font-size: 15px;
    vertical-align: middle;
    height: 24px;
    padding: 2px;
}

.tblrow2 {
    font-size: 15px;
    vertical-align: middle;
    height: 24px;
    padding: 2px;
    white-space: nowrap;
}


/* 有外框, 其他同 Row1, TXB 會用到 */

.tblrowbox {
    font-size: 15px;
    vertical-align: middle;
    height: 25px;
    padding: 2px;
    border-radius: 2px;
    margin: -3px 2px 8px 0px;
    cursor: pointer;
}


/* DataList */

.DL_1 {
    cursor: pointer;
    text-align: left;
    padding: 0px;
}

td.sc1 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc2 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc3 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc4 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc5 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc6 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.scc {
    text-align: right !important;
    font-size: 28px !important;
    padding: 4px !important;
}


/* Dashboard 中的 css */

.DashLogo {
    cursor: pointer;
}

.DashMenuTitle {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.DashTitle {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: nowrap;
    overflow-x: hidden;
}

    .DashTitle a {
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        font-size: 16px;
        text-decoration: underline;
        white-space: nowrap;
        overflow-x: hidden;
    }

.DashTitleLink {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-decoration: underline;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}


/* CPCPanel 中的 css,  */

#Page_Header {
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 990;
    width: 100%;
}

#Page_Content {
    text-align: left;
    width: 100%;
    border: none;
}

#Page_Footer {
    left: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 990;
    width: 100%;
    height: 44px;
    display: none;
}

.cpc-popup {
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 100000;
}

.layer_header {
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 36500;
    width: 100%;
    padding-top: 3px;
}

.WidgetHeader {
    font-size: 15px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    width: 100%;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.WidgetBody {
    font-size: 14px;
    width: 100%;
    margin-bottom: 2px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.TopL {
    border-top-left-radius: 5px 5px;
    padding: 6px 0px 0px 4px;
    font-size: 18px;
    cursor: pointer;
}

.TopC {
    padding: 4px 4px 4px 4px;
    font-size: 16px;
    height: 22px;
    width: 100%;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.TopR {
    border-top-right-radius: 5px 5px;
    padding: 4px 4px 4px 4px;
    height: 22px;
    width: 4px;
    cursor: pointer;
}

.mail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    visibility: hidden;
}

.badge-c {
    position: relative;
    width: 32px;
    vertical-align: top;
    margin-top: -20px;
}

.badge {
    height: 16px;
    min-width: 16px;
    position: absolute;
    border-radius: 7px;
    top: 0;
    left: 0;
    z-index: 100;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
    font-size: 11px;
    padding: 2px 1px 0px 1px;
    margin-top: 2px;
}

.badge-b {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.alert {
    width: 100%;
    cursor: pointer;
    padding: 8px;
    margin: -4px 0px -4px 0px;
}


/********** Chat 區 **********/


/* 外框區 */

.chat-out {
    width: 100%;
    padding: 4px 4px 4px 4px;
    border: 1px #bfbfbf solid;
}

.chat-out-a {
    height: calc(100% - 148px);
}

.chat-out-b {
    height: 80px;
    border-top: none;
}


/* 訊息區 */

.chat-c {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; DO NOT USE: breaks scrolling */
    width: 100%;
    margin: 0 auto;
}

.chat-msg-a {
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.5s;
    flex-direction: row;
    padding: 4px 4px 4px 4px;
    vertical-align: top;
}

.chat-msg-a-i {
    width: 40px;
    margin-top: -24px;
}

.chat-msg-a-2 {
    display: block;
    max-width: 70%;
}

.chat-msg-a-name {
    font-size: 9px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.chat-msg-a-text {
    margin-bottom: 12px;
    min-width: 60px;
    background-color: #cfcfcf;
    color: #000000;
    display: block;
    border-radius: 0px 14px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 13px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 200;
}

.chat-msg-a-file {
    margin-top: 10px;
    background-color: transparent;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 0px 14px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}

.chat-msg-b {
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.5s;
    flex-direction: row-reverse;
    padding-right: 8px;
    vertical-align: top;
}

.chat-msg-b-text {
    margin-top: 10px;
    background-color: #c0f0b0;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 14px 0px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}

.chat-msg-b-file {
    margin-top: 10px;
    background-color: transparent;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 14px 0px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}


/* Psudo Parent*/

.pseudo .dx-button .dx-icon {
    font-size: 26px;
    margin: -6px 2px 6px -8px;
    padding: 0px;
    color: #0000ff;
}

.pseudo .chat-icon {
    font-size: 26px;
    color: #0000ff;
    margin: 4px 0px 4px 2px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}


/* icon image toolbar */

.chat-img-tl {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-top-left-radius: 100%;
    padding: 0px 0px 0px 0px;
    margin-bottom: -5px;
    margin-right: -3px;
    width: 30px;
    height: 30px;
}

.chat-img-tr {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-top-right-radius: 100%;
    padding: 0px 0px 0px 0px;
    margin-bottom: -5px;
    width: 30px;
    height: 30px;
}

.chat-img-bl {
    border: none;
    border-bottom: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom-left-radius: 100%;
    margin-right: -3px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
}

.chat-img-br {
    border: none;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom-right-radius: 100%;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
}

.chat-img-l {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-right: -3px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 60px;
}

.chat-img-r {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 60px;
}

.chat-img {
    border: none;
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 60px;
    height: 60px;
}

.chat-img-s {
    /* single small size */
    border: none;
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 36px;
    height: 36px;
}

.chat-img-a {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 60px;
    height: 60px;
}

.chat-img-b {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 36px;
    height: 36px;
}

.chat-title {
    font-size: 20px;
    color: #0000ff;
    padding: 4px 6px 6px 6px;
}

.chat-icon {
    font-size: 26px;
    color: #0000ff;
    margin: 4px 10px 4px 2px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.chat-tb {
    display: flex;
    position: relative;
    left: 0px;
    top: 0px;
    height: 46px;
    z-index: 10000;
    overflow: hidden;
    color: #fff;
    border: 1px #bfbfbf solid;
    padding: 4px 4px 4px 4px;
    align-content: space-between;
}


/* Counter, Marguee, Marquee 順序由外至內 */

.Marquee_td {
    vertical-align: middle;
    width: 100%;
}

.Marquee_div {
    padding-top: 3px;
    padding-bottom: 0px;
    height: 22px;
}

.Marquee_inner {
    width: 100%;
}

.Marquee_a {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.counter-c {
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    width: 100%;
    text-align: right;
    font-size: 15px;
    padding: 4px 2px 4px 16px;
}

.counter {
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 15px;
    padding: 6px 2px 4px 0px;
}

.InnerCssClass {
    background-color: Transparent;
    font-weight: bold;
}


/* ToolTip */

.ToolTip {
    position: absolute;
    width: 256px;
    height: 256px;
    font-size: 14px;
    padding: 0px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    z-index: 30000;
}


/* for Dashboard menu */

.cpc-trk-caption {
    width: 2%;
    white-space: nowrap;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cpc-trk-m {
    /*
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;    
    */
    width: 11%;
    height: 4px;
    font-size: 11px;
    vertical-align: text-top;
    text-align: left;
}


/* for Control Custom => for FControl = LBL */

.cpc-lbl {
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    font-size: 15px;
    /*line-height: 1.4;*/
}


/*
.cpc-txt {
}
*/

.cpc-inline {
    display: inline-block;
}

.cpc-tab {
    overflow-y: hidden;
}

.cpc-footer {
    /* Height of the footer padding: 10px 10px 0px 10px;*/
    position: fixed;
    bottom: 0px;
    z-index: 10000;
    width: 100%;
}

.cpc-header {
    /* Height of the footer padding: 10px 10px 0px 10px;*/
    position: fixed;
    top: 0px;
    z-index: 10000;
    width: 100%;
}

.left-menu-block {
    position: absolute;
    width: 212px;
    /*height: 100%;*/
    float: left;
    top: 35px;
    left: -1px;
    z-index: 10000;
    padding: 0px 0px 0px 0px;
}

.top-left-block {
    background-color: transparent;
    height: 64px;
    position: absolute;
    width: 64px;
    float: left;
    top: 0px;
    left: 0px;
    z-index: 500;
    padding: 0px 0px 0px 0px;
}

.top-right-block {
    background-color: transparent;
    height: 32px;
    position: absolute;
    width: 32px;
    float: right;
    top: 0px;
    right: 2px;
    z-index: 500;
    padding: 1px 1px 1px 1px;
}


/* for Teeth Control */

.Teeth_td {
    height: 32px;
    width: 32px;
    text-align: center;
}

.Teeth_default {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
}

.Teeth_Delete {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Delete_32x32.png');
}

.Teeth_Circle {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Circle_32x32.png');
}

.Teeth_Browse {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Browse_32x32.png');
}


/* for Fixed ToolBar */

#storm-top-right {
    background-color: transparent;
    top: 0px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    height: 180px;
    opacity: 0.9;
}

#storm-bottom-right {
    bottom: 0px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    height: 40px;
    opacity: 0.9;
}

#storm-bottom-right2 {
    bottom: 40px;
    height: 40px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    opacity: 0.9;
}

.storm-command {
    padding: 0px;
    cursor: pointer;
}

.sticky-div {
    overflow-y: hidden;
    overflow-x: hidden;
    margin-left: -7px -14px -10px -14px;
}

.sticky-mini {
    position: fixed;
    padding: 0px 0px 0px 0px;
    z-index: 12600;
    width: 20px;
    height: 24px;
}


/* End Of JsPanel */


/* css for the jsPanel Icon */

.custom-control-icon.custom-vote::before {
    background-image: url("../images/ICon/Explorer/16x16/Vote.png")
}


/* override 與 override_App 不同之處 */

.P_Caption {
    display: block;
    width: 100%;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
    float: left;
}

.col-md-12 {
    width: 100%;
}

.col-md-11 {
    width: 91.66666667%;
}

.col-md-10 {
    width: 83.33333333%;
}

.col-md-9 {
    width: 75%;
}

.col-md-8 {
    width: 66.66666667%;
}

.col-md-7 {
    width: 58.33333333%;
}

.col-md-6 {
    width: 50%;
}

.col-md-5 {
    width: 41.66666667%;
}

.col-md-4 {
    width: 33.33333333%;
}

.col-md-3 {
    width: 25%;
}

.col-md-2 {
    width: 16.66666667%;
}

.col-md-1 {
    width: 8.33333333%;
}

.fv-1,
.fv-2,
.fv-3,
.fv-4,
.fv-5,
.fv-6,
.fv-7,
.fv-8,
.fv-9,
.fv-10,
.fv-11,
.fv-12 {
    float: left;
}

.fv-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.fv-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
    width: 91.66666667%;
}

.fv-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    width: 83.33333333%;
}

.fv-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
    width: 70%;
}

.fv-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    width: 66.66666667%;
}

.fv-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    width: 58.33333333%;
}

.fv-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
}

.fv-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    width: 41.66666667%;
}

.fv-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.33333333%;
}

.fv-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    width: 30%;
}

.fv-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    width: 16.66666667%;
}

.fv-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
    width: 8.33333333%;
}


/* Print */

.pr-t {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0px;
}

.pr-tr {
}

.pr-td {
    border: 1px solid #808080;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 2px;
    height: 22px;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.pr-d {
    cursor: pointer;
    border: 1px solid #808080;
    padding: 4px;
    box-shadow: 1px 1px #888888;
}

.pr-area {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 32000;
}

.pr-cpc-gvl {
    display: none;
}


/* POS */

.r-btn1 {
    /* 數字 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 18px;
    height: 44px;
    padding: 12px 0px 0px 0px;
    vertical-align: middle;
    text-align: center;
    margin: 2px 2px 2px 2px;
}

.r-btn2 {
    /* 菜單 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    height: 60px;
    padding: 4px 0px 0px 2px;
    vertical-align: middle;
    margin: 2px 1px 2px 0px;
    border-radius: 3px;
    border-right: 2px solid #A0A0A0;
    border-bottom: 2px solid #A0A0A0;
}

.r-btn3 {
    /* 主選單 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 20px;
    height: 72px;
    padding: 20px 0px 0px 0px;
    vertical-align: middle;
    text-align: center;
    margin: 6px 2px 2px 6px;
}

.r-tables {
    position: absolute;
    border-radius: 4px;
    padding: 2px 2px 2px 2px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
}

.r-lbl1 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 15px;
    white-space: nowrap;
}

.r-lbl2 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 28px !important;
    text-align: right;
    white-space: nowrap;
    border-radius: 5px;
}

.r-lbl3 {
    /* 已點菜單 */
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 17px;
    font-weight: bold;
    color: #000000;
}

.r-lbl3-bg {
    background-color: antiquewhite;
    height: 48px;
}

@media print {
    #content,
    #page {
        width: 100%;
        margin: 0;
        float: none;
    }

    .no-print,
    .no-print * {
        visibility: hidden !important;
        display: none !important;
    }

    .page-footer {
        height: 1px;
        page-break-after: always;
    }
    /* target all pages, margin 放在 margin: 3px */
    @page {
        margin: 0cm;
    }
    /* target the first page only */
    @page :first {
        /*margin-top: 0.5cm;*/
    }
    /* target left (even-numbered) pages only */
    @page :left {
        /*margin-right: 0.5cm;*/
    }
    /* target right (odd-numbered) pages only */
    @page :right {
        /*margin-left: 0.5cm;*/
    }

    body {
        font: 13pt 'Microsoft JhengHei', 'Lucida Console';
        background: #ffffff !important;
        color: #000000 !important;
    }

    header,
    footer,
    aside,
    nav,
    form,
    iframe,
    .menu,
    .hero,
    .adslot {
        display: none;
    }

    table.pageBreak {
        width: 100%;
        border-spacing: 0px;
        border-collapse: separate;
        page-break-after: always
    }

    article {
        column-width: 17em;
        column-gap: 3em;
    }

    * {
        background-image: none !important;
    }
    /*img, svg {
        display: none !important;
    }*/
    img.print,
    svg.print {
        display: block;
        max-width: 100%;
    }

    img.dark {
        filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%);
    }

    a::after {
        content: " (" attr(href) ")";
    }

    img,
    svg {
        /* break-inside: avoid; */
    }
}

@media (max-width: 847.99px) {
    .fvc {
        text-align: left;
        padding: 8px 4px 4px 4px;
        font-size: 15px !important;
        vertical-align: middle;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        white-space: nowrap;
    }

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
        width: 100%;
    }

    .fv-1,
    .fv-2,
    .fv-3,
    .fv-4,
    .fv-5,
    .fv-6,
    .fv-7,
    .fv-8,
    .fv-9,
    .fv-10,
    .fv-11,
    .fv-12 {
        float: left;
        width: 100%;
    }

    .w-12 {
        width: 5%;
    }

    .w-88 {
        width: 95%;
    }

    .i_000H_l {
        font-size: 17px;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        border-bottom: 1px solid #101010;
        border-right: 1px solid #101010;
        text-align: right !important;
        word-break: break-all;
    }

    .i_000H_r {
        font-size: 17px;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        border-bottom: 1px solid #101010;
        text-align: left;
        word-break: break-all;
    }
}

.BigWord {
    font-weight: 700;
}

.DXs-red {
    color: #af061a;
}

.DX_red {
    color: red;
}
/* jquery-ui slider*/
.ui-slider {
    position: relative;
    text-align: left;
}

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 32px;
        height: 32px;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
    }

    .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
    }

    /* support: IE8 - See #6727 */
    .ui-slider.ui-state-disabled .ui-slider-handle,
    .ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
    }

.ui-slider-horizontal {
    height: .8em;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
    }

    .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
    }

    .ui-slider-horizontal .ui-slider-range-min {
        left: 0;
    }

    .ui-slider-horizontal .ui-slider-range-max {
        right: 0;
    }

.ui-slider-vertical {
    width: 18px;
    height: 320px;
}

    .ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
    }

    .ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
    }

    .ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
    }

    .ui-slider-vertical .ui-slider-range-max {
        top: 0;
    }

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1em;
}

    .ui-widget .ui-widget {
        font-size: 1em;
    }

    .ui-widget.ui-widget-content {
        border: 1px solid #c5c5c5;
    }

.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
}

.ui-widget-header {
    border: 1px solid #337ab7;
    background: #539ad7;
    color: #333333;
    font-weight: bold;
}

    .ui-widget-header a {
        color: #333333;
    }

    /* Interaction states
----------------------------------*/
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    /* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active {
        border: 1px solid #c5c5c5;
        background: #f6f6f6;
        font-weight: normal;
        color: #454545;
    }

    .ui-widget-content .ui-state-hover,
    .ui-widget-header .ui-state-hover,
    .ui-widget-content .ui-state-focus,
    .ui-widget-header .ui-state-focus {
        border: 1px solid #cccccc;
        background: #ededed;
        font-weight: normal;
        color: #2b2b2b;
    }

    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active {
        border: 1px solid #003eff;
        background: #007fff;
        font-weight: normal;
        color: #ffffff;
    }


/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
    border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
    border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
    border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
    border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
    background: #aaaaaa;
    opacity: .3;
    filter: Alpha(Opacity=30); /* support: IE8 */
}

.ui-widget-shadow {
    -webkit-box-shadow: 0px 0px 5px #666666;
    box-shadow: 0px 0px 5px #666666;
}

.P_Caption {
    display: block;
    width: 100%;
}



/*!
 * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body,
html {
    width: 100%;
    height: 100%;
    font-family: '微軟正黑體', 'Open Sans', Arial, sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: '微軟正黑體', 'Open Sans', Arial, sans-serif;
}

.topnav {
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}

.intro-header {
    color: #f8f8f8;
    background: url(../images/background.png) no-repeat;
    height: auto;
    background-size: cover;
}

.intro-message {
    position: relative;
    padding-top: 18%;
    padding-bottom: 18%;
}

    .intro-message > h1 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 5em;
    }

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.network-name {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 0;
    color: #f8f8f8;
    background: url(../images/banner-bg.jpg) no-repeat center center;
    background-size: cover;
}

    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 3em;
    }

    .banner ul {
        margin-bottom: 0;
    }

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    .banner h2 {
        margin: 0;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
        font-size: 3em;
    }

    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

        ul.banner-social-buttons > li:last-child {
            margin-bottom: 0;
        }
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

        .intro-message > h1 {
            font-size: 3em;
        }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

        ul.intro-social-buttons > li:last-child {
            margin-bottom: 0;
        }

    .intro-divider {
        width: 100%;
    }
}

footer {
    padding: 20px 0;
    background-color: #fff;
}

p.copyright {
    margin: 15px 0 0;
}

#scrollview-demo {
    min-height: 500px;
}

#scrollview {
    height: auto;
    position: absolute;
    top: 230px;
    bottom: 0;
    padding-left: 20%;
    width: 70%;
}

.options {
    padding: 20px;
    background-color: rgba(191, 191, 191, 0.15);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    margin-top: 10px;
}

    .option > span {
        position: relative;
        top: 2px;
        margin-right: 10px;
    }

    .option > .dx-selectbox {
        display: inline-block;
        vertical-align: middle;
        max-width: 300px;
        width: 90%;
    }


/* 貴龍測試 */

.buttin-kkl {
    color: #007bff
}


/* 原本更新後的 css 要去改 font-size : 15px, 不能夠下 * {font-size : 15px} <=> 會影響 Chart Title */

.i_000H_l {
    font-size: 17px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    border-bottom: 1px solid #101010;
    border-right: 1px solid #101010;
    text-align: right !important;
}

.w-12 {
    width: 12%;
}

.w-88 {
    width: 88%;
}

.w-20 {
    width: 20%;
}

.w-80 {
    width: 80%;
}

.i_000H_r {
    font-size: 17px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    border-bottom: 1px solid #101010;
    text-align: left;
}


/* replace fon-size 11~14 => 15px */

body {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    overflow-y: scroll;
    padding: 0px 0px 0px 0px;
    margin: 0px;
}


/* for iBench */

.iN {
    color: #000000;
}

.iW {
    font-weight: bold;
}

.iF14 {
    font-size: 14pt;
}

.iD {
    display: block;
}

.iH {
    color: #000000;
}


/* dx 改的地方 */

.dx-datagrid-rowsview.dx-empty {
    height: 60px;
}

.dx-datagrid .dx-row > td {
    /*padding: 7px;*/
    padding: 7px 4px 7px 4px;
}

.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-select {
    padding: 0;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
}

.dx-button-text {
    margin: -2px -10px -2px -10px;
}

.dx-tab {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
    padding: 5px 16px 1px 16px;
}

    .dx-tab.dx-tab-selected {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .dx-tab.dx-state-focused:after {
        content: "";
        pointer-events: none;
        position: absolute;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        border: none;
        z-index: 1;
    }

.dx-tabs-expanded {
    display: table;
    border: none;
}

.dx-fileuploader-button {
    margin: 0px 0px 0px 0px;
    height: 32px;
}

.dx-dropdowneditor-input-wrapper {
    opacity: 1;
    height: 30px;
}

.dx-treelist .dx-row > td,
.dx-treelist .dx-row > tr > td {
    padding: 6px 4px 4px 4px;
    height: 34px;
    vertical-align: middle;
}

.dx-button-has-text .dx-button-content {
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
}


/* 只有給 CMSPortalMenu 用的 */


/*#CMSPortalMenu ul {
    white-space: normal;
}*/


/* cpc 加的地方 */

.cpc-btn {
    /* 這個地方有改會動到 icon+text */
    margin: 1px 1px 1px 1px;
    padding: 0px;
}


    /* 這個地方有改會動到 icon+text 的 icon*/

    .cpc-btn .dx-icon {
        margin: 0px 10px 0px -16px;
    }

.cpc-btn-iconOnly-FV-M {
    padding: 4px 0px 4px 12px;
    width: 32px;
    height: 28px;
    margin: 1px;
}


/* cpc-btn-tb normal for fv (icon only icon only icon only icon only icon only) */

.cpc-btn-icon {
    margin: 1px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 3px;
    width: 30px;
    height: 21px;
}

    .cpc-btn-icon .dx-icon {
        margin: -2px 0px 0px -6px;
    }


/* cpc-btn-LIB normal for gv (icon+text) */

.cpc-btn-LIB {
    margin: -4px 2px -4px 2px;
    padding: 0px 0px 0px 0px;
    height: 32px;
    cursor: pointer;
}

    .cpc-btn-LIB .dx-icon {
        margin: 0px 12px 0px -10px;
    }


/* cpc-btn-tb normal for gv toolbar (icon) */

.cpc-btn-tb {
    /* for toorbar */
    border-radius: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 18px;
    width: 34px;
    height: 26px;
}

    .cpc-btn-tb .dx-icon {
        margin: 0px 12px 0px -18px;
    }

.cpc-btn-txt {
    margin: 0px 1px 1px 0px;
    padding: 4px 4px 4px 0px;
    cursor: pointer;
}

    .cpc-btn-txt .dx-button-content {
        margin: -3px 0px 0px -3px;
    }

.cpc-btn-txt-gv {
    margin: 0px 1px 0px 1px;
    padding: 0px 0px 0px 0px;
    cursor: pointer;
    height: 28px;
}

    .cpc-btn-txt-gv .dx-button-content {
        margin: 2px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }


/* cpc-tile*/

.cpc-tile-ex {
    float: left;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 148px;
    flex: 0 0 148px;
    width: 156px;
    cursor: pointer;
    height: 156px;
    padding: 4px;
    background-color: transparent;
}

.cpc-tile {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 64px;
    height: 148px;
    border-radius: 5px;
}

.cpc-tile-text {
    position: relative;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 14px;
    background-color: transparent;
    left: 0px;
    top: 104px;
    text-align: center;
}

.cpc-btn-fixed {
    position: absolute;
    top: 35px;
    left: 200px;
}

.cpc-icon-32 {
    font-size: 32px;
    padding-top: 4px;
    cursor: pointer;
}


/* txextbox inside gv for NCX */

.cpc-txt-gv {
    border-radius: 4px;
}


/* gantt chart g-tag-view-header or content-week or weekend*/

.gantt-bar1 {
    position: relative;
    height: 25px;
    top: 3px;
}

.gantt-bar2 {
    height: 22px;
}

div {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

td {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

label {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

input {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

textarea {
    font-family: 'Lucida Console', 'Microsoft JhengHei' !important;
    line-height: 18px !important;
    padding: 2px !important;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

.play-scrolling {
    height: 100%;
    overflow: auto;
}


/* GV Settings */

.gvtb {
    height: 36px;
    padding: 1px 1px 0px 1px;
}


/* FV background*/

.bgfv {
    text-align: left;
    width: 100%;
}


/* FormView Caption */

.fvc {
    text-align: right;
    padding: 8px 4px 4px 4px;
    font-size: 15px !important;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fvv {
    text-align: left;
    padding: 8px 2px 4px 4px;
    font-size: 15px;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.fvve {
    text-align: left;
    padding: 2px 5px 2px 5px;
    font-size: 15px;
    float: left;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.fvveb {
    /* for GVL*/
    text-align: left;
    padding: 0px 0px 0px 0px;
    font-size: 15px;
    border: none;
    display: block;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    float: left;
}

.fv-12-c {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: none;
    text-align: left;
    padding: 4px 4px 4px 4px;
    margin: 8px 12px 0px 6px;
    font-size: 15px !important;
    vertical-align: bottom;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: normal;
    width: 98%;
    text-align: left !important;
    float: left;
}

.fv-12-v {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: none;
    padding: 4px 4px 4px 4px;
    margin: 0px 12px 8px 6px;
    text-align: left !important;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    width: 98%;
    vertical-align: top;
    float: left;
}


/* FormView Value */


/* FormView Value Edit Mode */

.lvline {
    display: inline;
    text-align: left;
    padding: 2px 2px 2px 2px;
    font-size: 15px;
    background-color: transparent;
    vertical-align: middle;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}


/* for short css combine align */


/* a = align, b = border, pd = padding, mg = margin, ft = font-size, ht = height, wt = width */

.alr {
    text-align: right;
}

.alc {
    text-align: center;
}

.all {
    text-align: left;
}

.avt {
    vertical-align: top;
}

.avc {
    vertical-align: middle;
}

.avb {
    vertical-align: bottom;
}

.b-none {
    border: none !important;
}

.bt0 {
    border-top: none;
}

.bl0 {
    border-left: none;
}

.bb0 {
    border-bottom: none;
}

.br0 {
    border-right: none;
}


/* for short css combine pd */

.none {
    display: none;
}

.pd0 {
    padding: 0px !important;
}

.pd1 {
    padding: 1px !important;
}

.pd2 {
    padding: 2px !important;
}

.pd3 {
    padding: 3px !important;
}

.pd6 {
    padding: 6px !important;
}

.pdr0 {
    padding-right: 0px;
}

.pdr1 {
    padding-right: 1px;
}

.pdr2 {
    padding-right: 2px;
}

.pdr3 {
    padding-right: 3px;
}

.pdr6 {
    padding-right: 6px;
}

.pdl0 {
    padding-left: 0px;
}

.pdl1 {
    padding-left: 1px;
}

.pdl2 {
    padding-left: 2px;
}

.pdl3 {
    padding-left: 3px;
}

.pdr6 {
    padding-right: 6px;
    margin-right: 0px;
}

.pdl6 {
    padding-left: 6px;
    margin-left: 0px;
}

.pdl12 {
    padding-left: 12px;
    margin-left: 0px;
}

.pdl24 {
    padding-left: 24px;
    margin-left: 0px;
}

.pdt0 {
    padding-top: 0px !important;
}

.pdt2 {
    padding-top: 2px !important;
}

.pdt6 {
    padding-top: 6px !important;
}

.pdt12 {
    padding-top: 12px !important;
}

.mg0 {
    margin: 0px !important;
}

.mg1 {
    margin: 1px !important;
}

.mg2 {
    margin: 2px !important;
}

.mg3 {
    margin: 3px !important;
}

.mg6 {
    margin: 6px !important;
}

.mgb2 {
    margin-bottom: 2px !important;
}


/* for short css combine bg */


/* for short css combine ft */

.ft12 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 12px !important;
}

.ft13 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 13px !important;
}

.ft14 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 14px !important;
}

.ft15 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 15px !important;
}

.ft16 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 16px !important;
}

.ft18 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 18px !important;
}

.ft20 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 20px !important;
}

.ft22 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 22px !important;
}

.ft24 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 24px !important;
}

.ft32 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 32px !important;
}

.ft48 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 48px !important;
}

.ft64 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 64px !important;
}

.ht20 {
    height: 20px;
}

.ht22 {
    height: 22px;
}

.ht24 {
    height: 24px;
}

.ht28 {
    height: 28px;
}

.ht32 {
    height: 32px;
}

.ht36 {
    height: 36px;
}

.ht40 {
    height: 40px;
}

.ht44 {
    height: 44px;
}

.ht48 {
    height: 48px;
}

.ht52 {
    height: 52px;
}

.ht56 {
    height: 56px;
}

.ht60 {
    height: 60px;
}

.ht66 {
    height: 66px;
}

.ht72 {
    height: 72px;
}

.wt4 {
    width: 4px;
}

.wt12 {
    width: 12px;
}

.wt24 {
    width: 24px;
}

.nowrap {
    white-space: nowrap;
}


/* for short css combine border */

.tblemp {
    width: 100%;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

.tblhea {
    display: table;
    width: 100%;
    font-size: 15px;
    overflow: auto;
    vertical-align: middle;
    padding: 2px;
    white-space: nowrap;
}

.tblrow1 {
    font-size: 15px;
    vertical-align: middle;
    height: 24px;
    padding: 2px;
}

.tblrow2 {
    font-size: 15px;
    vertical-align: middle;
    height: 24px;
    padding: 2px;
    white-space: nowrap;
}


/* 有外框, 其他同 Row1, TXB 會用到 */

.tblrowbox {
    font-size: 15px;
    vertical-align: middle;
    height: 25px;
    padding: 2px;
    border-radius: 2px;
    margin: -3px 2px 8px 0px;
    cursor: pointer;
}


/* DataList */

.DL_1 {
    cursor: pointer;
    text-align: left;
    padding: 0px;
}

td.sc1 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc2 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc3 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc4 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc5 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.sc6 {
    text-align: Left !important;
    font-size: 28px !important;
    padding: 4px !important;
}

td.scc {
    text-align: right !important;
    font-size: 28px !important;
    padding: 4px !important;
}


/* Dashboard 中的 css */

.DashLogo {
    cursor: pointer;
}

.DashMenuTitle {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.DashTitle {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    white-space: nowrap;
    overflow-x: hidden;
}

    .DashTitle a {
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        font-size: 16px;
        text-decoration: underline;
        white-space: nowrap;
        overflow-x: hidden;
    }

.DashTitleLink {
    font-size: 16px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-decoration: underline;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}


/* CPCPanel 中的 css,  */

#Page_Header {
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 990;
    width: 100%;
}

#Page_Content {
    text-align: left;
    width: 100%;
    border: none;
}

#Page_Footer {
    left: 0px;
    bottom: 0px;
    position: fixed;
    z-index: 990;
    width: 100%;
    height: 44px;
    display: none;
}

.cpc-popup {
    position: absolute;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 100000;
}

.layer_header {
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 36500;
    width: 100%;
    padding-top: 3px;
}

.WidgetHeader {
    font-size: 15px;
    border-top-left-radius: 5px 5px;
    border-top-right-radius: 5px 5px;
    width: 100%;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.WidgetBody {
    font-size: 14px;
    width: 100%;
    margin-bottom: 2px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.TopL {
    border-top-left-radius: 5px 5px;
    padding: 6px 0px 0px 4px;
    font-size: 18px;
    cursor: pointer;
}

.TopC {
    padding: 4px 4px 4px 4px;
    font-size: 16px;
    height: 22px;
    width: 100%;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.TopR {
    border-top-right-radius: 5px 5px;
    padding: 4px 4px 4px 4px;
    height: 22px;
    width: 4px;
    cursor: pointer;
}

.mail {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    visibility: hidden;
}

.badge-c {
    position: relative;
    width: 32px;
    vertical-align: top;
    margin-top: -20px;
}

.badge {
    height: 16px;
    min-width: 16px;
    position: absolute;
    border-radius: 7px;
    top: 0;
    left: 0;
    z-index: 100;
    font-weight: bold;
    vertical-align: top;
    text-align: center;
    font-size: 11px;
    padding: 2px 1px 0px 1px;
    margin-top: 2px;
}

.badge-b {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.alert {
    width: 100%;
    cursor: pointer;
    padding: 8px;
    margin: -4px 0px -4px 0px;
}


/********** Chat 區 **********/


/* 外框區 */

.chat-out {
    width: 100%;
    padding: 4px 4px 4px 4px;
    border: 1px #bfbfbf solid;
}

.chat-out-a {
    height: calc(100% - 148px);
}

.chat-out-b {
    height: 80px;
    border-top: none;
}


/* 訊息區 */

.chat-c {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; DO NOT USE: breaks scrolling */
    width: 100%;
    margin: 0 auto;
}

.chat-msg-a {
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.5s;
    flex-direction: row;
    padding: 4px 4px 4px 4px;
    vertical-align: top;
}

.chat-msg-a-i {
    width: 40px;
    margin-top: -24px;
}

.chat-msg-a-2 {
    display: block;
    max-width: 70%;
}

.chat-msg-a-name {
    font-size: 9px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
}

.chat-msg-a-text {
    margin-bottom: 12px;
    min-width: 60px;
    background-color: #cfcfcf;
    color: #000000;
    display: block;
    border-radius: 0px 14px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 13px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 200;
}

.chat-msg-a-file {
    margin-top: 10px;
    background-color: transparent;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 0px 14px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}

.chat-msg-b {
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.5s;
    flex-direction: row-reverse;
    padding-right: 8px;
    vertical-align: top;
}

.chat-msg-b-text {
    margin-top: 10px;
    background-color: #c0f0b0;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 14px 0px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}

.chat-msg-b-file {
    margin-top: 10px;
    background-color: transparent;
    color: #000000;
    display: block;
    max-width: 70%;
    border-radius: 14px 0px 14px 14px;
    box-sizing: border-box;
    padding: 4px 8px 4px 8px;
    animation-duration: 0.3s;
    animation-name: fly-in;
    font-size: 15px;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-weight: 300;
}


/* Psudo Parent*/

.pseudo .dx-button .dx-icon {
    font-size: 26px;
    margin: -6px 2px 6px -8px;
    padding: 0px;
    color: #0000ff;
}

.pseudo .chat-icon {
    font-size: 26px;
    color: #0000ff;
    margin: 4px 0px 4px 2px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}


/* icon image toolbar */

.chat-img-tl {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-top-left-radius: 100%;
    padding: 0px 0px 0px 0px;
    margin-bottom: -5px;
    margin-right: -3px;
    width: 30px;
    height: 30px;
}

.chat-img-tr {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-top-right-radius: 100%;
    padding: 0px 0px 0px 0px;
    margin-bottom: -5px;
    width: 30px;
    height: 30px;
}

.chat-img-bl {
    border: none;
    border-bottom: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom-left-radius: 100%;
    margin-right: -3px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
}

.chat-img-br {
    border: none;
    border-bottom: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom-right-radius: 100%;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
}

.chat-img-l {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-right: -3px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 60px;
}

.chat-img-r {
    border: none;
    border-top: 1px solid #dfdfdf;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 60px;
}

.chat-img {
    border: none;
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 60px;
    height: 60px;
}

.chat-img-s {
    /* single small size */
    border: none;
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 36px;
    height: 36px;
}

.chat-img-a {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 60px;
    height: 60px;
}

.chat-img-b {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    padding: 0px 0px 0px 0px;
    width: 36px;
    height: 36px;
}

.chat-title {
    font-size: 20px;
    color: #0000ff;
    padding: 4px 6px 6px 6px;
}

.chat-icon {
    font-size: 26px;
    color: #0000ff;
    margin: 4px 10px 4px 2px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.chat-tb {
    display: flex;
    position: relative;
    left: 0px;
    top: 0px;
    height: 46px;
    z-index: 10000;
    overflow: hidden;
    color: #fff;
    border: 1px #bfbfbf solid;
    padding: 4px 4px 4px 4px;
    align-content: space-between;
}


/* Counter, Marguee, Marquee 順序由外至內 */

.Marquee_td {
    vertical-align: middle;
    width: 100%;
}

.Marquee_div {
    padding-top: 3px;
    padding-bottom: 0px;
    height: 22px;
}

.Marquee_inner {
    width: 100%;
}

.Marquee_a {
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.counter-c {
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    width: 100%;
    text-align: right;
    font-size: 15px;
    padding: 4px 2px 4px 16px;
}

.counter {
    white-space: nowrap;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: 15px;
    padding: 6px 2px 4px 0px;
}

.InnerCssClass {
    background-color: Transparent;
    font-weight: bold;
}


/* ToolTip */

.ToolTip {
    position: absolute;
    width: 256px;
    height: 256px;
    font-size: 14px;
    padding: 0px;
    opacity: 0.9;
    filter: alpha(opacity=90);
    z-index: 30000;
}


/* for Dashboard menu */

.cpc-trk-caption {
    width: 2%;
    white-space: nowrap;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cpc-trk-m {
    /*
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;    
    */
    width: 11%;
    height: 4px;
    font-size: 11px;
    vertical-align: text-top;
    text-align: left;
}


/* for Control Custom => for FControl = LBL */

.cpc-lbl {
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    font-size: 15px;
    /*line-height: 1.4;*/
}


/*
.cpc-txt {
}
*/

.cpc-inline {
    display: inline-block;
}

.cpc-tab {
    overflow-y: hidden;
}

.cpc-footer {
    /* Height of the footer padding: 10px 10px 0px 10px;*/
    position: fixed;
    bottom: 0px;
    z-index: 10000;
    width: 100%;
}

.cpc-header {
    /* Height of the footer padding: 10px 10px 0px 10px;*/
    position: fixed;
    top: 0px;
    z-index: 10000;
    width: 100%;
}

.left-menu-block {
    position: absolute;
    width: 212px;
    /*height: 100%;*/
    float: left;
    top: 35px;
    left: -1px;
    z-index: 10000;
    padding: 0px 0px 0px 0px;
}

.top-left-block {
    background-color: transparent;
    height: 64px;
    position: absolute;
    width: 64px;
    float: left;
    top: 0px;
    left: 0px;
    z-index: 500;
    padding: 0px 0px 0px 0px;
}

.top-right-block {
    background-color: transparent;
    height: 32px;
    position: absolute;
    width: 32px;
    float: right;
    top: 0px;
    right: 2px;
    z-index: 500;
    padding: 1px 1px 1px 1px;
}


/* for Teeth Control */

.Teeth_td {
    height: 32px;
    width: 32px;
    text-align: center;
}

.Teeth_default {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
}

.Teeth_Delete {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Delete_32x32.png');
}

.Teeth_Circle {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Circle_32x32.png');
}

.Teeth_Browse {
    height: 32px;
    width: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: url('../../images/ICon/Explorer/32x32/Browse_32x32.png');
}


/* for Fixed ToolBar */

#storm-top-right {
    background-color: transparent;
    top: 0px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    height: 180px;
    opacity: 0.9;
}

#storm-bottom-right {
    bottom: 0px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    height: 40px;
    opacity: 0.9;
}

#storm-bottom-right2 {
    bottom: 40px;
    height: 40px;
    right: 0px;
    font-size: 15px;
    position: fixed;
    padding: 0px 0px 0px 0px;
    /* 由 Top 開始順時針 */
    z-index: 12400;
    width: 240px;
    opacity: 0.9;
}

.storm-command {
    padding: 0px;
    cursor: pointer;
}

.sticky-div {
    overflow-y: hidden;
    overflow-x: hidden;
    margin-left: -7px -14px -10px -14px;
}

.sticky-mini {
    position: fixed;
    padding: 0px 0px 0px 0px;
    z-index: 12600;
    width: 20px;
    height: 24px;
}


/* End Of JsPanel */


/* css for the jsPanel Icon */

.custom-control-icon.custom-vote::before {
    background-image: url("../images/ICon/Explorer/16x16/Vote.png")
}


/* override 與 override_App 不同之處 */

.P_Caption {
    display: block;
    width: 100%;
}

.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
    float: left;
}

.col-md-12 {
    width: 100%;
}

.col-md-11 {
    width: 91.66666667%;
}

.col-md-10 {
    width: 83.33333333%;
}

.col-md-9 {
    width: 75%;
}

.col-md-8 {
    width: 66.66666667%;
}

.col-md-7 {
    width: 58.33333333%;
}

.col-md-6 {
    width: 50%;
}

.col-md-5 {
    width: 41.66666667%;
}

.col-md-4 {
    width: 33.33333333%;
}

.col-md-3 {
    width: 25%;
}

.col-md-2 {
    width: 16.66666667%;
}

.col-md-1 {
    width: 8.33333333%;
}

.fv-1,
.fv-2,
.fv-3,
.fv-4,
.fv-5,
.fv-6,
.fv-7,
.fv-8,
.fv-9,
.fv-10,
.fv-11,
.fv-12 {
    float: left;
}

.fv-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

.fv-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
    width: 91.66666667%;
}

.fv-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    width: 83.33333333%;
}

.fv-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%;
    width: 70%;
}

.fv-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    width: 66.66666667%;
}

.fv-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    width: 58.33333333%;
}

.fv-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
}

.fv-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    width: 41.66666667%;
}

.fv-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.33333333%;
}

.fv-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
    width: 30%;
}

.fv-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    width: 16.66666667%;
}

.fv-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
    width: 8.33333333%;
}


/* Print */

.pr-t {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0px;
}

.pr-tr {
}

.pr-td {
    border: 1px solid #808080;
    overflow-x: hidden;
    overflow-y: hidden;
    padding: 2px;
    height: 22px;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.pr-d {
    cursor: pointer;
    border: 1px solid #808080;
    padding: 4px;
    box-shadow: 1px 1px #888888;
}

.pr-area {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 32000;
}

.pr-cpc-gvl {
    display: none;
}


/* POS */

.r-btn1 {
    /* 數字 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 18px;
    height: 44px;
    padding: 12px 0px 0px 0px;
    vertical-align: middle;
    text-align: center;
    margin: 2px 2px 2px 2px;
}

.r-btn2 {
    /* 菜單 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 18px;
    text-align: center;
    height: 60px;
    padding: 4px 0px 0px 2px;
    vertical-align: middle;
    margin: 2px 1px 2px 0px;
    border-radius: 3px;
    border-right: 2px solid #A0A0A0;
    border-bottom: 2px solid #A0A0A0;
}

.r-btn3 {
    /* 主選單 */
    display: inline-block;
    font-weight: bold;
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    cursor: pointer;
    font-size: 20px;
    height: 72px;
    padding: 20px 0px 0px 0px;
    vertical-align: middle;
    text-align: center;
    margin: 6px 2px 2px 6px;
}

.r-tables {
    position: absolute;
    border-radius: 4px;
    padding: 2px 2px 2px 2px;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
}

.r-lbl1 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 15px;
    white-space: nowrap;
}

.r-lbl2 {
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 28px !important;
    text-align: right;
    white-space: nowrap;
    border-radius: 5px;
}

.r-lbl3 {
    /* 已點菜單 */
    font-family: 'Lucida Console', 'Microsoft JhengHei';
    font-size: 17px;
    font-weight: bold;
    color: #000000;
}

.r-lbl3-bg {
    background-color: antiquewhite;
    height: 48px;
}

@media print {
    #content,
    #page {
        width: 100%;
        margin: 0;
        float: none;
    }

    .no-print,
    .no-print * {
        visibility: hidden !important;
        display: none !important;
    }

    .page-footer {
        height: 1px;
        page-break-after: always;
    }
    /* target all pages, margin 放在 margin: 3px */
    @page {
        margin: 0cm;
    }
    /* target the first page only */
    @page :first {
        /*margin-top: 0.5cm;*/
    }
    /* target left (even-numbered) pages only */
    @page :left {
        /*margin-right: 0.5cm;*/
    }
    /* target right (odd-numbered) pages only */
    @page :right {
        /*margin-left: 0.5cm;*/
    }

    body {
        font: 13pt 'Microsoft JhengHei', 'Lucida Console';
        background: #ffffff !important;
        color: #000000 !important;
    }

    header,
    footer,
    aside,
    nav,
    form,
    iframe,
    .menu,
    .hero,
    .adslot {
        display: none;
    }

    table.pageBreak {
        width: 100%;
        border-spacing: 0px;
        border-collapse: separate;
        page-break-after: always
    }

    article {
        column-width: 17em;
        column-gap: 3em;
    }

    * {
        background-image: none !important;
    }
    /*img, svg {
        display: none !important;
    }*/
    img.print,
    svg.print {
        display: block;
        max-width: 100%;
    }

    img.dark {
        filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%);
    }

    a::after {
        content: " (" attr(href) ")";
    }

    img,
    svg {
        /* break-inside: avoid; */
    }
}

@media (max-width: 847.99px) {
    .fvc {
        text-align: left;
        padding: 8px 4px 4px 4px;
        font-size: 15px !important;
        vertical-align: middle;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        white-space: nowrap;
    }

    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: left;
        width: 100%;
    }

    .fv-1,
    .fv-2,
    .fv-3,
    .fv-4,
    .fv-5,
    .fv-6,
    .fv-7,
    .fv-8,
    .fv-9,
    .fv-10,
    .fv-11,
    .fv-12 {
        float: left;
        width: 100%;
    }

    .w-12 {
        width: 5%;
    }

    .w-88 {
        width: 95%;
    }

    .i_000H_l {
        font-size: 17px;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        border-bottom: 1px solid #101010;
        border-right: 1px solid #101010;
        text-align: right !important;
        word-break: break-all;
    }

    .i_000H_r {
        font-size: 17px;
        font-family: 'Lucida Console', 'Microsoft JhengHei';
        border-bottom: 1px solid #101010;
        text-align: left;
        word-break: break-all;
    }
}

.BigWord {
    font-weight: 700;
}

.DXs-red {
    color: #af061a;
}

.DX_red {
    color: red;
}

/* jquery-ui slider*/
.ui-slider {
    position: relative;
    text-align: left;
}

    .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 32px;
        height: 32px;
        cursor: default;
        -ms-touch-action: none;
        touch-action: none;
    }

    .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: 0;
        background-position: 0 0;
    }

    /* support: IE8 - See #6727 */
    .ui-slider.ui-state-disabled .ui-slider-handle,
    .ui-slider.ui-state-disabled .ui-slider-range {
        filter: inherit;
    }

.ui-slider-horizontal {
    height: .8em;
}

    .ui-slider-horizontal .ui-slider-handle {
        top: -.3em;
        margin-left: -.6em;
    }

    .ui-slider-horizontal .ui-slider-range {
        top: 0;
        height: 100%;
    }

    .ui-slider-horizontal .ui-slider-range-min {
        left: 0;
    }

    .ui-slider-horizontal .ui-slider-range-max {
        right: 0;
    }

.ui-slider-vertical {
    width: 18px;
    height: 320px;
}

    .ui-slider-vertical .ui-slider-handle {
        left: -.3em;
        margin-left: 0;
        margin-bottom: -.6em;
    }

    .ui-slider-vertical .ui-slider-range {
        left: 0;
        width: 100%;
    }

    .ui-slider-vertical .ui-slider-range-min {
        bottom: 0;
    }

    .ui-slider-vertical .ui-slider-range-max {
        top: 0;
    }
.Change-LBL-Color{
	font-size:24px;
	background-color:white;
}