/************************************
基本的 HTML 標籤設定
************************************/
body, div, span, h1, h2, h3, h4, h5, h6, 
dl, dt, dd, ul, ol, li, pre, code, p, br, 
table, tbody, th, td, form, fieldset, legend, label, input, button, textarea, select, option, 
a, blockquote, em, strong, dfn, samp, kbd, var, cite, address, caption {
    margin: 0px;
    padding: 0px;
    font-family: "微軟正黑體", "Microsoft JhengHei", 
                 "微软雅黑", "Microsoft YaHei", 
                 "新細明體", "PMingLiU", 
                 "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", 
                 "Helvetica", 
                 "Tahoma", 
                 "BBAlpha Sans", 
                 "sans-serif";
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 20px;
}

table {
    border-collapse: collapse;
    border-spacing: 0px;
}

body {
    position: absolute!important;
    display: block!important;
    width: 100%!important; 
    height: 100%!important;
    overflow: hidden;
    /* 加上 -webkit-text-size-adjust，解決 IPhone  safari 橫向時，字體會變大的問題 */
    -webkit-text-size-adjust: none;
    /* 加上 user-select 解決捲動時文字被選中的問題 */
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

fieldset, img, abbr, acronym {
    border: 0px;
}

hr {
    border: 1px inset #eee;
}

li {
    list-style: none;
}

q:before, q:after {
    content: "";
}

caption, th {
    text-align: left;
}

html, 
body {
    /* 停用瀏覽器預設的縮放、移動瀏覽(Panning)等觸控功能, 由程式接管 */
    -ms-touch-action: none;
    -webkit-touch-action: none;
    touch-action: none;
}

body.g-ios {
    -webkit-backface-visibility: hidden;
}

*:focus {
    outline: none;
}

*, *:after, *:before {
   /* 指定 width 和 height 的計算方式，border-box 代表包含 border 和 padding，但是不包含 margin 。  */
    box-sizing: border-box;             /* IE9+, Opera */
    -webkit-box-sizing: border-box;     /* Chrome, Safari */
    -moz-box-sizing: border-box;        /* FireFox */
}

table,tbody,tr,td {
    /* 修正當設定為 overflow:hidden 時，在 Chrome/Safari 的 table 顯示時，border-right 沒有顯示出來的問題。 */
    overflow: auto;
}

/* 停用 IE10+ 預設的清除按鈕功能, 由程式接管 */
input[type=text]::-ms-clear {
    display: none;
}

div, span {
    cursor: default;
}
/************************************
g-html 文件的樣式
************************************/
.g-html {
    font-size: 16px;
    display: block;
    padding: 8px;
}

.g-html h1, 
.g-html h2, 
.g-html h3, 
.g-html h4, 
.g-html h5, 
.g-html h6, 
.g-html strong, 
.g-html th, 
.g-html dl dt {
    font-weight: bold;
}

.g-html h1 {
    font-size: 32px;
    line-height: 38px;
    margin: 32px 0px;
}

.g-html h2 {
    font-size: 24px;
    line-height: 30px;
    margin: 19px 0px;
}

.g-html h3 {
    font-size: 19px;
    line-height: 23px;
    margin: 18px 0px;
}

.g-html h4 {
    font-size: 16px;
    line-height: 20px;
    margin: 21px 0px;
}

.g-html h5 {
    font-size: 13px;
    line-height: 16px;
    margin: 22px 0px;
}

.g-html h6 {
    font-size: 12px;
    line-height: 15px;
    margin: 27px 0px;
}

.g-html p {
    margin: 16px 0px;
}

.g-html blockquote {
    margin: 40px 16px;
}

.g-html em, 
.g-html cite, 
.g-html address, 
.g-html var, 
.g-html tfoot {
  font-style: italic;
}

.g-html pre, 
.g-html code {
  font-family: "andale mono", "lucida console", "monospace";
}

.g-html pre {
  margin: 13px 0px;
  white-space: pre;
}

.g-html code {
  margin: 13px 0px;
  white-space: pre;
}

.g-html abbr, .g-html acronym {
  border-bottom: 1px dotted #666666;
}

.g-html dl {
    margin: 16px 0px;
}

.g-html dd {
    margin-left: 20px;
}

.g-html ul, .g-html ol {
    margin: 16px 0px;
    padding-left: 20px;
}

/******************************************************** g-icon */
.g-icon-lang {
    background-image: url(../images/lang.png);
    background-size: 32px 32px;
}

.g-icon-wifi {
    background-image: url(../images/wifi.png);
    background-size: 32px 32px;
}

.g-icon-url {
    background-image: url(../images/url.png);
    background-size: 32px 32px;
}

.g-icon-email {
    background-image: url(../images/email.png);
    background-size: auto 32px !important;
    background-position: 0px 0px !important;
}

.g-icon-white-email {
    background-image: url(../images/email.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-password {
    background-image: url(../images/password.png);
    background-size: 32px 32px;
}

.g-icon-search {
    background-image: url(../images/search.png);
    background-size: 32px 32px;
}

.g-icon-check {
    background-image: url(../images/check.png);
    background-size: 32px 32px;
}

.g-icon-date {
    background-image: url(../images/date.png);
    background-size: 32px 32px;
}

.g-icon-datetime {
    background-image: url(../images/datetime.png);
    background-size: 32px 32px;
}

.g-icon-textarea {
    background-image: url(../images/remark.png);
    background-size: 32px 32px;
}

.g-icon-money {
    background-image: url(../images/money.png);
    background-size: 32px 32px;
}

.g-icon-address {
    background-image: url(../images/map.png);
    background-size: 32px 32px;
}

.g-icon-zipcode {
    background-image: url(../images/zipcode.png);
    background-size: 32px 32px;
}

.g-icon-editor {
    background-image: url(../images/editor.png);
    background-size: 32px 32px;
}

.g-icon-source {
    background-image: url(../images/source.png);
    background-size: 32px 32px;
}

.g-icon-required {
    background-image: url(../images/required.png);
    background-size: 32px 32px;
}

.g-icon-keyField {
    background-image: url(../images/keyField.png);
    background-size: 32px 32px;
}

.g-icon-addcondition {
    background-image: url(../images/addcondition.png);
    background-size: 32px 32px;
}

.g-icon-saveas {
    background-image: url(../images/saveAs.png);
    background-size: 32px 32px;
}

.g-icon-saveas2 {
    background-image: url(../images/saveAs2.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-saveas2 {
    background-image: url(../images/saveAs2.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-savenew {
    background-image: url(../images/savenew.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-query {
    background-image: url(../images/search.png);
    background-size: 32px 32px;
}
/*-------------------------------------------------*/

.g-icon-radiobox {
    background-image: url(../images/radiobox.png);
    background-size: auto 32px;
}

.g-icon-checkbox {
    background-image: url(../images/checkbox.png);
    background-size: auto 32px;
}

.g-icon-select {
    background-image: url(../images/select.png);
    background-size: auto 32px;
}

.g-icon-prohibit {
    background-image: url(../images/prohibit.png);
    background-size: 32px 32px;
}

.g-icon-unpin {
    background-image: url(../images/pin.png);
    background-size: auto 32px;
}

.g-icon-pinned {
    background-image: url(../images/pin.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-pinned {
    background-position: -16px 0px;
}

/*********************************************************/
/* selectAll */
.g-icon-selectAll {
    background-image: url(../images/selectAll.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-unselectAll {
    background-image: url(../images/selectAll.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-unselectAll {
    background-position: -16px 0px;
}

.g-icon-24.g-icon-unselectAll {
    background-position: -24px 0px;
}


/*********************************************************/

.g-icon-more {
    background-image: url(../images/more.png);
    background-size: 20px 32px;
}

.g-icon-more2 {
    background-image: url(../images/more2.png);
    background-size: 20px 32px;
}

.g-icon-more3 {
    background-image: url(../images/more3.png);
    background-size: 20px 32px;
}

/*********************************************************/

.g-icon-up {
    background-image: url(../images/arrow.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-down {
    background-image: url(../images/arrow.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-down {
    background-position: -16px 0px;
}

.g-icon-24.g-icon-down {
    background-position: -24px 0px;
}

.g-icon-left {
    background-image: url(../images/arrow.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-icon-16.g-icon-left {
    background-position: -32px 0px;
}

.g-icon-24.g-icon-left {
    background-position: -48px 0px;
}

.g-icon-right {
    background-image: url(../images/arrow.png);
    background-size: auto 32px;
    background-position: -96px 0px;
}

.g-icon-16.g-icon-right {
    background-position: -48px 0px;
}

.g-icon-24.g-icon-right {
    background-position: -72px 0px;
}

/*************************************************************  圖示的大小 */
.g-icon-16 {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.g-icon-24 {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}

.g-icon-32 {
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
}

.g-icon-48 {
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
}

.g-icon-57 {
    width: 57px;
    height: 57px;
    background-repeat: no-repeat;
}

.g-icon-64 {
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
}

/*************************************************************  Navigator */
/* 黑色、Record */
.g-icon-first {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-previous {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-next {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-icon-last {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -96px 0px;
}

/*********************************************************/
/* 白色、Record */
.g-icon-white-first {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -128px 0px;
}

.g-icon-white-previous {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -160px 0px;
}

.g-icon-white-next {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -192px 0px;
}

.g-icon-white-last {
    background-image: url(../images/navigator.png);
    background-size: auto 32px;
    background-position: -225px 0px;
}

/*********************************************************/
/* 黑色、Page */
.g-icon-firstPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-previousPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-nextPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-icon-lastPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -96px 0px;
}

/*********************************************************/
/* 白色、Page */
.g-icon-white-firstPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -128px 0px;
}

.g-icon-white-previousPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -160px 0px;
}

.g-icon-white-nextPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -192px 0px;
}

.g-icon-white-lastPage {
    background-image: url(../images/navigatorPage.png);
    background-size: auto 32px;
    background-position: -225px 0px;
}

/*********************************************************/
/* refresh */
.g-icon-refresh {
    background-image: url(../images/refresh.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-refresh {
    background-image: url(../images/refresh.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-refresh {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-refresh {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* setting */
.g-icon-setting {
    background-image: url(../images/setting.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-setting {
    background-image: url(../images/setting.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-setting {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-setting {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* visible */
.g-icon-visible {
    background-image: url(../images/visible.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-visible {
    background-image: url(../images/visible.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-icon-16.g-icon-white-visible {
    background-size: auto 16px;
    background-position: -32px 0px;
}

.g-icon-24.g-icon-white-visible {
    background-size: auto 24px;
    background-position: -48px 0px;
}

/*********************************************************/
/* invisible */
.g-icon-invisible {
    background-image: url(../images/visible.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-white-invisible {
    background-image: url(../images/visible.png);
    background-size: auto 32px;
    background-position: -96px 0px;
}

.g-icon-16.g-icon-white-invisible {
    background-size: auto 16px;
    background-position: -48px 0px;
}

.g-icon-24.g-icon-white-invisible {
    background-size: auto 24px;
    background-position: -72px 0px;
}

/*********************************************************/
/* zoomOut */
.g-icon-zoomOut {
    background-image: url(../images/zoom.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-zoomOut {
    background-image: url(../images/zoom.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-icon-16.g-icon-white-zoomOut {
    background-size: auto 16px;
    background-position: -32px 0px;
}

.g-icon-24.g-icon-white-zoomOut {
    background-size: auto 24px;
    background-position: -48px 0px;
}

/*********************************************************/
/* zoomIn */
.g-icon-zoomIn {
    background-image: url(../images/zoom.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-white-zoomIn {
    background-image: url(../images/zoom.png);
    background-size: auto 32px;
    background-position: -96px 0px;
}

.g-icon-16.g-icon-white-zoomIn {
    background-size: auto 16px;
    background-position: -48px 0px;
}

.g-icon-24.g-icon-white-zoomIn {
    background-size: auto 24px;
    background-position: -72px 0px;
}

/*********************************************************/
/* switch */
.g-icon-switch {
    background-image: url(../images/switch.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-switch {
    background-image: url(../images/switch.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-switch {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-switch {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* add */
.g-icon-add {
    background-image: url(../images/addNew.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-add {
    background-image: url(../images/addNew.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-add {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-add {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* delete */
.g-icon-delete {
    background-image: url(../images/delete.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-delete {
    background-image: url(../images/delete.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-delete {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-delete {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* print */
.g-icon-print {
    background-image: url(../images/print.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-print {
    background-image: url(../images/print.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-print {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-print {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* print-one */
.g-icon-printOne {
    background-image: url(../images/print-one.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-printOne {
    background-image: url(../images/print-one.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-printOne {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-printOne {
    background-size: auto 24px;
    background-position: -24px 0px;
}


/*********************************************************/
/* toExcel */
.g-icon-toExcel {
    background-image: url(../images/toExcel.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-toExcel {
    background-image: url(../images/toExcel.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-toExcel {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-toExcel {
    background-size: auto 24px;
    background-position: -24px 0px;
}





/*********************************************************/
/* info */
.g-icon-info {
    background-image: url(../images/info.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-info {
    background-image: url(../images/info.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-info {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-info {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* confirm */
.g-icon-confirm {
    background-image: url(../images/confirm.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-confirm {
    background-image: url(../images/confirm.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-confirm {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-confirm {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* edit */
.g-icon-edit {
    background-image: url(../images/edit.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-edit {
    background-image: url(../images/edit.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-edit {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-edit {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* save */
.g-icon-save {
    background-image: url(../images/save.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-save {
    background-image: url(../images/save.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-save {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-save {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* ok */
.g-icon-ok {
    background-image: url(../images/ok.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-ok {
    background-image: url(../images/ok.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-ok {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-ok {
    background-size: auto 24px;
    background-position: -24px 0px;
}
/*********************************************************/
/* cancel */
.g-icon-cancel {
    background-image: url(../images/cancel.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-cancel {
    background-image: url(../images/cancel.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-cancel {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-cancel {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* loadMore */
.g-icon-loadMore {
    background-image: url(../images/loadMore.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-loadMore {
    background-image: url(../images/loadMore.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-loadMore {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-loadMore {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* copy */
.g-icon-copy {
    background-image: url(../images/copy.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-copy {
    background-image: url(../images/copy.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-copy {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-copy {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* close (使用 hover 變化圖片) */
.g-icon-close {
    background-image: url(../images/close.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

    .g-icon-close:hover {
        background-position: -32px 0px;
    }

.g-icon-16.g-icon-close {
    background-size: auto 16px;
    background-position: 0px 0px;
}

    .g-icon-16.g-icon-close:hover {
        background-position: -16px 0px;
    }

.g-icon-24.g-icon-close {
    background-size: auto 24px;
    background-position: 0px 0px;
}

    .g-icon-24.g-icon-close:hover {
        background-position: -24px 0px;
    }

/*********************************************************/
/* 系統欄位展開和折疊 變化圖片 */
.g-icon-expand {
    background-image: url(../images/treeNode.png);
    background-size: auto 24px;
    background-position: -48px 0px;
}

.g-icon-contract {
    background-image: url(../images/treeNode.png);
    background-size: auto 24px;
    background-position: -72px 0px;
}

/*********************************************************/
/* confirm2 (使用 hover 變化圖片) */
.g-icon-confirm2 {
    background-image: url(../images/confirm2.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

    .g-icon-confirm2:hover {
        background-position: -32px 0px;
    }

.g-icon-24.g-icon-confirm2 {
    background-size: auto 24px;
    background-position: 0px 0px;
}

    .g-icon-24.g-icon-confirm2:hover {
        background-position: -24px 0px;
    }

/*********************************************************/
/* view */
.g-icon-view {
    background-image: url(../images/view.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-view {
    background-image: url(../images/view.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-view {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-view {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* back */
.g-icon-back {
    background-image: url(../images/back.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-back {
    background-image: url(../images/back.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-back {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-back {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* back2 */
.g-icon-back2 {
    background-image: url(../images/back2.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-back2 {
    background-image: url(../images/back2.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-back2 {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-back2 {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* home */
.g-icon-home {
    background-image: url(../images/home.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-home {
    background-image: url(../images/home.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-home {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-home {
    background-size: auto 24px;
    background-position: -24px 0px;
}

.g-icon-phone {
    background-image: url(../images/phone.png);
    background-size: 32px 32px;
}

.g-icon-checkPhone {
    background-image: url(../images/edit.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-checkAddress {
    background-image: url(../images/edit.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

/*********************************************************/
/* orderBy */
.g-icon-orderBy {
    background-image: url(../images/setOrderBy.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-orderBy {
    background-image: url(../images/setOrderBy.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-orderBy {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-orderBy {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* search */
.g-icon-setSearch {
    background-image: url(../images/setSearch.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-setSearch {
    background-image: url(../images/setSearch.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-setSearch {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-setSearch {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* linkProg */
.g-icon-linkProg {
    background-image: url(../images/linkProg.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-linkProg {
    background-image: url(../images/linkProg.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-linkProg {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-linkProg {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* moduleList */
.g-icon-moduleList {
    background-image: url(../images/moduleList.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-moduleList {
    background-image: url(../images/moduleList.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

/*********************************************************/
/* logout */
.g-icon-logout {
    background-image: url(../images/logout.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-logout {
    background-image: url(../images/logout.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-logout {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-logout {
    background-size: auto 24px;
    background-position: -24px 0px;
}

/*********************************************************/
/* toTrackingRecord */
.g-icon-toTrackingRecord {
    background-image: url(../images/toTrackingRecord.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-toTrackingRecord {
    background-image: url(../images/toTrackingRecord.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-toTrackingRecord {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-toTrackingRecord {
    background-size: auto 24px;
    background-position: -24px 0px;
}
/*********************************************************/
/* toServiceRecord */
.g-icon-toServiceRecord {
    background-image: url(../images/toServiceRecord.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-toServiceRecord {
    background-image: url(../images/toServiceRecord.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-toServiceRecord {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-toServiceRecord {
    background-size: auto 24px;
    background-position: -24px 0px;
}

.g-icon-id-edit {
    background-image: url(../images/lookup.png);
    background-size: auto 100% !important;
    background-position: 0px 0px !important;
}

.g-icon-action {
    background-image: url(../images/action.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-black-action {
    background-image: url(../images/action.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-photo-switch {
    background-image: url(../images/switch.png);
    background-size: auto 32px !important;
    background-position: 0px 0px !important;
}
/*********************************************************/
/* help */
.g-icon-help {
    background-image: url(../images/help.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-help {
    background-image: url(../images/help.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}
/*********************************************************/
/* helpForProg */
.g-icon-helpForProg {
    background-image: url(../images/helpForProg.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-helpForProg {
    background-image: url(../images/helpForProg.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-helpForProg {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-helpForProg {
    background-size: auto 24px;
    background-position: -24px 0px;
}


/*********************************************************/
/* sendMail */
.g-icon-sendMail {
    background-image: url(../images/sendmail.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-sendMail {
    background-image: url(../images/sendmail.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-sendMail {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-sendMail {
    background-size: auto 24px;
    background-position: -24px 0px;
}

.g-icon-lang-switch {
    background-image: url(../images/langswitch.png);
}

.g-icon-lang-switch-cht {
    background-image: url(../images/langswitch.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-lang-switch-chs {
    background-image: url(../images/langswitch.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-white-switchLine {
    background-image: url(../images/calendarType.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-switchLine {
    background-image: url(../images/calendarType.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-Favorites {
    background-image: url(../images/Favorites2.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-grey-Favorites {
    background-image: url(../images/Favorites2.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-grey-Favorites {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-grey-Favorites {
    background-size: auto 24px;
    background-position: -24px 0px;
}

.g-icon-instantMessage {
    background-image: url(../images/remind.png);
    background-size: auto 24px !important;
    background-position: 0px 0px;
}

.g-icon-setCenter {
    background-image: url(../images/locate.png);
    background-size: auto 32px;
    background-position: 0px 0px;
    opacity: 0.6;
}

.g-icon-Mark {
    background-image: url(../images/mark.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-grey-Mark {
    background-image: url(../images/mark.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-MyMark {
    background-image: url(../images/myMark.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-grey-MyMark {
    background-image: url(../images/myMark.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-salesDevolve {
    background-image: url(../images/devolve.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-salesDevolve {
    background-image: url(../images/devolve.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-changeOwner {
    background-image: url(../images/changeOwner.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-changeOwner {
    background-image: url(../images/changeOwner.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}


.g-icon-regenReport {
    background-image: url(../images/RegenReport.png);
    background-size: auto 32px;
}

.g-icon-regenReport64 {
    background-image: url(../images/RegenReport64.png);
    background-size: auto 32px;
}

.g-icon-regenReport32 {
    background-image: url(../images/RegenReport32.png);
    background-size: auto 32px;
}

/* prioritize */
.g-icon-prioritize {
    background-image: url(../images/prioritize.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-icon-white-prioritize {
    background-image: url(../images/prioritize.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-16.g-icon-white-prioritize {
    background-size: auto 16px;
    background-position: -16px 0px;
}

.g-icon-24.g-icon-white-prioritize {
    background-size: auto 24px;
    background-position: -24px 0px;
}

.g-icon-id-selectColor {
    background-image: url(../images/fontColor.png);
    background-size: auto 100% !important;
    background-position: 0px 0px !important;
}

/*********************************************************/
/* download */
.g-icon-download {
    background-image: url(../images/download4.png);
    background-size: auto 32px;
    background-position: 0px 0px;
}

/* setting */
.g-icon-settingButton {
    background-image: url(../images/setting.png);
    background-size: auto 32px;
    background-position: 0px 0px;
    opacity: 0.5;
}

/* importData */
.g-icon-importData {
    background-image: url(../images/importData.png);
    background-size: auto 32px !important;
    background-position: 0px 0px;
}

.g-icon-white-importData {
    background-image: url(../images/importData.png);
    background-size: auto 32px !important;
    background-position: -32px 0px;
}

/* exporttohtml */
.g-icon-exportToHtml {
    background-image: url(../images/exportToHtml.png);
    background-size: auto 32px !important;
    background-position: 0px 0px;
}

.g-icon-white-exportToHtml {
    background-image: url(../images/exportToHtml.png);
    background-size: auto 32px !important;
    background-position: -32px 0px;
}


/*
參考資料： http://www.w3schools.com/html/html_colornames.asp
*/

/*****************************************  background */
.g-color-transparent,
.g-color-Transparent {
    color: transparent; /* 透明色 */
}

.g-color-aliceblue,
.g-color-AliceBlue {
    color: AliceBlue;  /* #F0F8FF 艾莉斯藍 */
}

.g-color-antiquewhite,
.g-color-AntiqueWhite {
    color: AntiqueWhite; /* #FAEBD7 骨董白 */
}

.g-color-aqua,
.g-color-Aqua {
    color: Aqua; /* #00FFFF 淺綠色, 水綠色 */
}

.g-color-aquamarine,
.g-color-Aquamarine {
    color: Aquamarine; /* #7FFFD4 青綠色, 海藍寶石 */
}

.g-color-azure,
.g-color-Azure {
    color: Azure; /* #F0FFFF 天藍白 */
}

.g-color-beige,
.g-color-Beige {
    color: Beige; /* #F5F5DC 米黃色 */
}

.g-color-bisque,
.g-color-Bisque {
    color: Bisque; /* #FFE4C4 淡黃色 */
}

.g-color-black,
.g-color-Black {
    color: Black; /* #000000 黑色 */
}

.g-color-blanchedalmond,
.g-color-BlanchedAlmond {
    color: BlanchedAlmond; /* #FFEBCD 杏仁黃 */
}

.g-color-blue,
.g-color-Blue {
    color: Blue; /* #0000FF 藍色 */
}

.g-color-blueviolet,
.g-color-BlueViolet {
    color: BlueViolet; /* #8A2BE2 藍紫色 */
}

.g-color-brown,
.g-color-Brown {
    color: Brown; /* #A52A2A 棕色 */
}

.g-color-burlywood,
.g-color-BurlyWood {
    color: BurlyWood; /* #DEB887 原木色 */
}

.g-color-cadetblue,
.g-color-CadetBlue {
    color: CadetBlue; /* #5F9EA0 藏青色 */
}

.g-color-chartreuse,
.g-color-Chartreuse {
    color: Chartreuse; /* #7FFF00 黃綠色 */
}

.g-color-chocolate,
.g-color-Chocolate {
    color: Chocolate; /* #D2691E 巧克力色 */
}

.g-color-coral,
.g-color-Coral {
    color: Coral; /* #FF7F50 珊瑚紅色 */
}

.g-color-cornflowerblue,
.g-color-CornflowerBlue {
    color: CornflowerBlue; /* #6495ED 矢車菊藍 */
}

.g-color-cornsilk,
.g-color-Cornsilk {
    color: Cornsilk; /* #FFF8DC 玉米穗黃 */
}

.g-color-crimson,
.g-color-Crimson {
    color: Crimson; /* #DC143C 赤紅色, 艷紅色 */
}

.g-color-cyan,
.g-color-Cyan {
    color: Cyan; /* #00FFFF 青色, 青綠色 */
}

.g-color-darkblue,
.g-color-DarkBlue {
    color: DarkBlue; /* #00008B 深藍色 */
}

.g-color-darkcyan,
.g-color-DarkCyan {
    color: DarkCyan; /* #008B8B 深青綠色 */
}

.g-color-darkgoldenrod,
.g-color-DarkGoldenrod {
    color: DarkGoldenrod; /* #B8860B 深金黃色 */
}

.g-color-darkgray,
.g-color-DarkGray,
.g-color-darkgrey,
.g-color-DarkGrey {
    color: DarkGray; /* #A9A9A9 深灰色 */
}

.g-color-darkgreen,
.g-color-DarkGreen {
    color: DarkGreen; /* #006400 深綠色 */
}

.g-color-darkkhaki,
.g-color-DarkKhaki {
    color: DarkKhaki; /* #BDB76B 深卡其色 */
}

.g-color-darkmagenta,
.g-color-DarkMagenta {
    color: DarkMagenta; /* #8B008B 深洋紅色 */
}

.g-color-darkolivegreen,
.g-color-DarkOliveGreen {
    color: DarkOliveGreen; /* #556B2F 深橄欖綠色 */
}

.g-color-darkorange,
.g-color-DarkOrange {
    color: DarkOrange; /* #FF8C00 深橙色 */
}

.g-color-darkorchid,
.g-color-DarkOrchid {
    color: DarkOrchid; /* #9932CC 深蘭花紫色 */
}

.g-color-darkred,
.g-color-DarkRed {
    color: DarkRed; /* #8B0000 暗紅色 */
}

.g-color-darksalmon,
.g-color-DarkSalmon {
    color: DarkSalmon; /* #E9967A 深橙紅色 */
}

.g-color-darkseagreen,
.g-color-DarkSeaGreen {
    color: DarkSeaGreen; /* #8FBC8F 深海藻綠色 */
}

.g-color-darkslateblue,
.g-color-DarkSlateBlue {
    color: DarkSlateBlue; /* #483D8B 深岩藍色 */
}

.g-color-darkslategray,
.g-color-DarkSlateGray,
.g-color-darkslategrey,
.g-color-DarkSlateGrey {
    color: DarkSlateGray; /* #2F4F4F 深岩灰色 */
}

.g-color-darkturquoise,
.g-color-DarkTurquoise {
    color: DarkTurquoise; /* #00CED1 深綠松石色 */
}

.g-color-darkviolet,
.g-color-DarkViolet {
    color: DarkViolet; /* #9400D3 深紫羅紅色 */
}

.g-color-deeppink,
.g-color-DeepPink {
    color: DeepPink; /* #FF1493 深粉紅色 */
}

.g-color-deepskyblue,
.g-color-DeepSkyBlue {
    color: DeepSkyBlue; /* #00BFFF 深天藍色 */
}

.g-color-dimgray,
.g-color-DimGray,
.g-color-dimgrey,
.g-color-DimGrey {
    color: DimGray; /* #696969 黑灰色 */
}

.g-color-dodgerblue,
.g-color-DodgerBlue {
    color: DodgerBlue; /* #1E90FF 寶藍色 */
}

.g-color-firebrick,
.g-color-FireBrick {
    color: FireBrick; /* #B22222 磚紅色 */
}

.g-color-floralwhite,
.g-color-FloralWhite {
    color: FloralWhite; /* #FFFAF0 花白色 */
}

.g-color-forestgreen,
.g-color-ForestGreen {
    color: ForestGreen; /* #228B22 森林綠色 */
}

.g-color-fuchsia,
.g-color-Fuchsia {
    color: Fuchsia; /* #FF00FF 紫紅色 */
}

.g-color-gainsboro,
.g-color-Gainsboro {
    color: Gainsboro; /* #DCDCDC 亮灰色 */
}

.g-color-ghostwhite,
.g-color-GhostWhite {
    color: GhostWhite; /* #F8F8FF 蒼白色, 幽靈白色 */
}

.g-color-gold,
.g-color-Gold {
    color: Gold; /* #FFD700 金色 */
}

.g-color-goldenrod,
.g-color-Goldenrod {
    color: Goldenrod; /* #DAA520 金黃色 */
}

.g-color-gray,
.g-color-Gray,
.g-color-grey,
.g-color-Grey {
    color: Gray; /* #808080 灰色 */
}

.g-color-green,
.g-color-Green {
    color: Green; /* #008000 綠色 */
}

.g-color-greenyellow,
.g-color-GreenYellow {
    color: GreenYellow; /* #ADFF2F 綠黃色 */
}

.g-color-honeydew,
.g-color-Honeydew {
    color: Honeydew; /* #F0FFF0 蜜瓜白色 */
}

.g-color-hotpink,
.g-color-HotPink {
    color: HotPink; /* #FF69B4 暗粉紅色 */
}

.g-color-indianred,
.g-color-IndianRed {
    color: IndianRed; /* #CD5C5C 印度紅 */
}

.g-color-indigo,
.g-color-Indigo {
    color: Indigo; /* #4B0082 靛青色 */
}

.g-color-ivory,
.g-color-Ivory {
    color: Ivory; /* #FFFFF0 象牙白 */
}

.g-color-khaki,
.g-color-Khaki {
    color: Khaki; /* #F0E68C 卡其色 */
}

.g-color-lavender,
.g-color-Lavender {
    color: Lavender; /* #E6E6FA 薰衣草色 */
}

.g-color-lavenderblush,
.g-color-LavenderBlush {
    color: LavenderBlush; /* #FFF0F5 淡紫紅色 */
}

.g-color-lawngreen,
.g-color-LawnGreen {
    color: LawnGreen; /* #7CFC00 草綠色 */
}

.g-color-lemonchiffon,
.g-color-LemonChiffon {
    color: LemonChiffon; /* #FFFACD 粉黃色 */
}

.g-color-lightblue,
.g-color-LightBlue {
    color: LightBlue; /* #ADD8E6 淺藍色 */
}

.g-color-lightcoral,
.g-color-LightCoral {
    color: LightCoral; /* #F08080 淺珊瑚紅色 */
}

.g-color-lightcyan,
.g-color-LightCyan {
    color: LightCyan; /* #E0FFFF 淺青綠色 */
}

.g-color-lightgoldenrodyellow,
.g-color-LightGoldenrodYellow {
    color: LightGoldenrodYellow; /* #FAFAD2 淺金黃色 */
}

.g-color-lightgray,
.g-color-LightGray,
.g-color-lightgrey,
.g-color-LightGrey {
    color: LightGray; /* #D3D3D3 淺灰色 */
}

.g-color-lightgreen,
.g-color-LightGreen {
    color: LightGreen; /* #90EE90 淺綠色 */
}

.g-color-lightpink,
.g-color-LightPink {
    color: LightPink; /* #FFB6C1 淺粉紅色 */
}

.g-color-lightsalmon,
.g-color-LightSalmon {
    color: LightSalmon; /* #FFA07A 淺橙紅色 */
}

.g-color-lightseagreen,
.g-color-LightSeaGreen {
    color: LightSeaGreen; /* #20B2AA 淺海藻綠色 */
}

.g-color-lightskyblue,
.g-color-LightSkyBlue {
    color: LightSkyBlue; /* #87CEFA 淺天藍色 */
}

.g-color-lightslategray,
.g-color-LightSlateGray,
.g-color-lightslategrey,
.g-color-LightSlateGrey {
    color: LightSlateGray; /* #778899 淺岩灰色 */
}

.g-color-lightsteelblue,
.g-color-LightSteelBlue {
    color: LightSteelBlue; /* #B0C4DE 淺鋼鐵藍 */
}

.g-color-lightyellow,
.g-color-LightYellow {
    color: LightYellow; /* #FFFFE0 淡黃色 */
}

.g-color-lime,
.g-color-Lime {
    color: Lime; /* #00FF00 鮮綠色 */
}

.g-color-limegreen,
.g-color-LimeGreen {
    color: LimeGreen; /* #32CD32 檸檬綠色 */
}

.g-color-linen,
.g-color-Linen {
    color: Linen; /* #FAF0E6 亞麻色 */
}

.g-color-magenta,
.g-color-Magenta {
    color: Magenta; /* #FF00FF 洋紅色 */
}

.g-color-maroon,
.g-color-Maroon {
    color: Maroon; /* #800000 栗色 */
}

.g-color-mediumaquamarine,
.g-color-MediumAquamarine {
    color: MediumAquamarine; /* #66CDAA 暗草綠色 */
}

.g-color-mediumblue,
.g-color-MediumBlue {
    color: MediumBlue; /* #0000CD 暗藍色 */
}

.g-color-mediumorchid,
.g-color-MediumOrchid {
    color: MediumOrchid; /* #BA55D3 暗蘭花紫色 */
}

.g-color-mediumpurple,
.g-color-MediumPurple {
    color: MediumPurple; /* #9370DB 暗紫色 */
}

.g-color-mediumseagreen,
.g-color-MediumSeaGreen {
    color: MediumSeaGreen; /* #3CB371 暗海藻綠色 */
}

.g-color-mediumslateblue,
.g-color-MediumSlateBlue {
    color: MediumSlateBlue; /* #7B68EE 暗青藍色 */
}

.g-color-mediumspringgreen,
.g-color-MediumSpringGreen {
    color: MediumSpringGreen; /* #00FA9A 暗嫩綠色 */
}

.g-color-mediumturquoise,
.g-color-MediumTurquoise {
    color: MediumTurquoise; /* #48D1CC 暗綠松色 */
}

.g-color-mediumvioletred,
.g-color-MediumVioletRed {
    color: MediumVioletRed; /* #C71585 暗紫紅色 */
}

.g-color-midnightblue,
.g-color-MidnightBlue {
    color: MidnightBlue; /* #191970 黑藍色 */
}

.g-color-mintcream,
.g-color-MintCream {
    color: MintCream; /* #F5FFFA 薄荷乳白 */
}

.g-color-mistyrose,
.g-color-MistyRose {
    color: MistyRose; /* #FFE4E1 粉玫瑰紅 */
}

.g-color-moccasin,
.g-color-Moccasin {
    color: Moccasin; /* #FFE4B5 鹿皮鞋色 */
}

.g-color-navajowhite,
.g-color-NavajoWhite {
    color: NavajoWhite; /* #FFDEAD 那瓦霍白 */
}

.g-color-navy,
.g-color-Navy {
    color: Navy; /* #000080 海軍藍 */
}

.g-color-oldlace,
.g-color-OldLace {
    color: OldLace; /* #FDF5E6 舊蕾絲色 */
}

.g-color-olive,
.g-color-Olive {
    color: Olive; /* #808000 橄欖色 */
}

.g-color-olivedrab,
.g-color-OliveDrab {
    color: OliveDrab; /* #6B8E23 橄欖軍服綠 */
}

.g-color-orange,
.g-color-Orange {
    color: Orange; /* #FFA500 橙色 */
}

.g-color-orangered,
.g-color-OrangeRed {
    color: OrangeRed; /* #FF4500 橙紅色 */
}

.g-color-orchid,
.g-color-Orchid {
    color: Orchid; /* #DA70D6 暗蘭紫色 */
}

.g-color-palegoldenrod,
.g-color-PaleGoldenrod {
    color: PaleGoldenrod; /* #EEE8AA 灰金菊色 */
}

.g-color-palegreen,
.g-color-PaleGreen {
    color: PaleGreen; /* #98FB98 灰綠色 */
}

.g-color-paleturquoise,
.g-color-PaleTurquoise {
    color: PaleTurquoise; /* #AFEEEE 灰綠松石色 */
}

.g-color-palevioletred,
.g-color-PaleVioletRed {
    color: PaleVioletRed; /* #DB7093 灰紫紅色 */
}

.g-color-papayawhip,
.g-color-PapayaWhip {
    color: PapayaWhip; /* #FFEFD5 粉木瓜橙色 */
}

.g-color-peachpuff,
.g-color-PeachPuff {
    color: PeachPuff; /* #FFDAB9 粉撲桃色 */
}

.g-color-peru,
.g-color-Peru {
    color: Peru; /* #CD853F 秘魯色 */
}

.g-color-pink,
.g-color-Pink {
    color: Pink; /* #FFC0CB 粉紅色 */
}

.g-color-plum,
.g-color-Plum {
    color: Plum; /* #DDA0DD 梅紅色 */
}

.g-color-powderblue,
.g-color-PowderBlue {
    color: PowderBlue; /* #B0E0E6 嬰兒粉藍 */
}

.g-color-purple,
.g-color-Purple {
    color: Purple; /* #800080 紫色 */
}

.g-color-red,
.g-color-Red {
    color: Red; /* #FF0000 紅色 */
}

.g-color-rosybrown,
.g-color-RosyBrown {
    color: RosyBrown; /* #BC8F8F 玫瑰褐色 */
}

.g-color-royalblue,
.g-color-RoyalBlue {
    color: RoyalBlue; /* #4169E1 品藍色 */
}

.g-color-saddlebrown,
.g-color-SaddleBrown {
    color: SaddleBrown; /* #8B4513 鞍褐色 */
}

.g-color-salmon,
.g-color-Salmon {
    color: Salmon; /* #FA8072 淺鮭紅色 */
}

.g-color-sandybrown,
.g-color-SandyBrown {
    color: SandyBrown; /* #F4A460 沙褐色 */
}

.g-color-seagreen,
.g-color-SeaGreen {
    color: SeaGreen; /* #2E8B57 海藻綠色 */
}

.g-color-seashell,
.g-color-SeaShell {
    color: SeaShell; /* #FFF5EE 海貝色 */
}

.g-color-sienna,
.g-color-Sienna {
    color: Sienna; /* #A0522D 赭黃色 */
}

.g-color-silver,
.g-color-Silver {
    color: Silver; /* #C0C0C0 銀色 */
}

.g-color-skyblue,
.g-color-SkyBlue {
    color: SkyBlue; /* #87CEEB 天藍色 */
}

.g-color-slateblue,
.g-color-SlateBlue {
    color: SlateBlue; /* #6A5ACD 岩藍色 */
}

.g-color-slategray,
.g-color-SlateGray,
.g-color-slategrey,
.g-color-SlateGrey {
    color: SlateGray; /* #708090 岩灰色 */
}

.g-color-snow,
.g-color-Snow {
    color: Snow; /* #FFFAFA 雪色 */
}

.g-color-springgreen,
.g-color-SpringGreen {
    color: SpringGreen; /* #00FF7F 春綠色 */
}

.g-color-steelblue,
.g-color-SteelBlue {
    color: SteelBlue; /* #4682B4 鋼鐵藍色 */
}

.g-color-tan,
.g-color-Tan {
    color: Tan; /* #D2B48C 淺棕色 */
}

.g-color-teal,
.g-color-Teal {
    color: Teal; /* #008080 藍綠色 */
}

.g-color-thistle,
.g-color-Thistle {
    color: Thistle; /* #D8BFD8 薊紫色 */
}

.g-color-tomato,
.g-color-Tomato {
    color: Tomato; /* #FF6347 蕃茄紅 */
}

.g-color-turquoise,
.g-color-Turquoise {
    color: Turquoise; /* #40E0D0 綠松石色 */
}

.g-color-violet,
.g-color-Violet {
    color: Violet; /* #EE82EE 紫羅蘭色 */
}

.g-color-wheat,
.g-color-Wheat {
    color: Wheat; /* #F5DEB3 小麥色 */
}

.g-color-white,
.g-color-White {
    color: White; /* #FFFFFF 白色 */
}

.g-color-whitesmoke,
.g-color-WhiteSmoke {
    color: WhiteSmoke; /* #F5F5F5 白煙色 */
}

.g-color-yellow,
.g-color-Yellow {
    color: Yellow; /* #FFFF00 黃色 */
}

.g-color-yellowgreen,
.g-color-YellowGreen {
    color: YellowGreen; /* #9ACD32 黃綠色 */
}

/*
參考資料： http://www.w3schools.com/html/html_colornames.asp
*/

/*****************************************  background */
.g-bk-transparent,
.g-bk-Transparent {
    background-color: transparent; /* 透明色 */
}

.g-bk-aliceblue,
.g-bk-AliceBlue {
    background-color: AliceBlue; /* #F0F8FF 艾莉斯藍 */
}

.g-bk-antiquewhite,
.g-bk-AntiqueWhite {
    background-color: AntiqueWhite; /* #FAEBD7 骨董白 */
}

.g-bk-aqua,
.g-bk-Aqua {
    background-color: Aqua; /* #00FFFF 淺綠色, 水綠色 */
}

.g-bk-aquamarine,
.g-bk-Aquamarine {
    background-color: Aquamarine; /* #7FFFD4 青綠色, 海藍寶石 */
}

.g-bk-azure,
.g-bk-Azure {
    background-color: Azure; /* #F0FFFF 天藍白 */
}

.g-bk-beige,
.g-bk-Beige {
    background-color: Beige; /* #F5F5DC 米黃色 */
}

.g-bk-bisque,
.g-bk-Bisque {
    background-color: Bisque; /* #FFE4C4 淡黃色 */
}

.g-bk-black,
.g-bk-Black {
    background-color: Black; /* #000000 黑色 */
}

.g-bk-blanchedalmond,
.g-bk-BlanchedAlmond {
    background-color: BlanchedAlmond; /* #FFEBCD 杏仁黃 */
}

.g-bk-blue,
.g-bk-Blue {
    background-color: Blue; /* #0000FF 藍色 */
}

.g-bk-blueviolet,
.g-bk-BlueViolet {
    background-color: BlueViolet; /* #8A2BE2 藍紫色 */
}

.g-bk-brown,
.g-bk-Brown {
    background-color: Brown; /* #A52A2A 棕色 */
}

.g-bk-burlywood,
.g-bk-BurlyWood {
    background-color: BurlyWood; /* #DEB887 原木色 */
}

.g-bk-cadetblue,
.g-bk-CadetBlue {
    background-color: CadetBlue; /* #5F9EA0 藏青色 */
}

.g-bk-chartreuse,
.g-bk-Chartreuse {
    background-color: Chartreuse; /* #7FFF00 黃綠色 */
}

.g-bk-chocolate,
.g-bk-Chocolate {
    background-color: Chocolate; /* #D2691E 巧克力色 */
}

.g-bk-coral,
.g-bk-Coral {
    background-color: Coral; /* #FF7F50 珊瑚紅色 */
}

.g-bk-cornflowerblue,
.g-bk-CornflowerBlue {
    background-color: CornflowerBlue; /* #6495ED 矢車菊藍 */
}

.g-bk-cornsilk,
.g-bk-Cornsilk {
    background-color: Cornsilk; /* #FFF8DC 玉米穗黃 */
}

.g-bk-crimson,
.g-bk-Crimson {
    background-color: Crimson; /* #DC143C 赤紅色, 艷紅色 */
}

.g-bk-cyan,
.g-bk-Cyan {
    background-color: Cyan; /* #00FFFF 青色, 青綠色 */
}

.g-bk-darkblue,
.g-bk-DarkBlue {
    background-color: DarkBlue; /* #00008B 深藍色 */
}

.g-bk-darkcyan,
.g-bk-DarkCyan {
    background-color: DarkCyan; /* #008B8B 深青綠色 */
}

.g-bk-darkgoldenrod,
.g-bk-DarkGoldenrod {
    background-color: DarkGoldenrod; /* #B8860B 深金黃色 */
}

.g-bk-darkgray,
.g-bk-DarkGray,
.g-bk-darkgrey,
.g-bk-DarkGrey {
    background-color: DarkGray; /* #A9A9A9 深灰色 */
}

.g-bk-darkgreen,
.g-bk-DarkGreen {
    background-color: DarkGreen; /* #006400 深綠色 */
}

.g-bk-darkkhaki,
.g-bk-DarkKhaki {
    background-color: DarkKhaki; /* #BDB76B 深卡其色 */
}

.g-bk-darkmagenta,
.g-bk-DarkMagenta {
    background-color: DarkMagenta; /* #8B008B 深洋紅色 */
}

.g-bk-darkolivegreen,
.g-bk-DarkOliveGreen {
    background-color: DarkOliveGreen; /* #556B2F 深橄欖綠色 */
}

.g-bk-darkorange,
.g-bk-DarkOrange {
    background-color: DarkOrange; /* #FF8C00 深橙色 */
}

.g-bk-darkorchid,
.g-bk-DarkOrchid {
    background-color: DarkOrchid; /* #9932CC 深蘭花紫色 */
}

.g-bk-darkred,
.g-bk-DarkRed {
    background-color: DarkRed; /* #8B0000 暗紅色 */
}

.g-bk-darksalmon,
.g-bk-DarkSalmon {
    background-color: DarkSalmon; /* #E9967A 深橙紅色 */
}

.g-bk-darkseagreen,
.g-bk-DarkSeaGreen {
    background-color: DarkSeaGreen; /* #8FBC8F 深海藻綠色 */
}

.g-bk-darkslateblue,
.g-bk-DarkSlateBlue {
    background-color: DarkSlateBlue; /* #483D8B 深岩藍色 */
}

.g-bk-darkslategray,
.g-bk-DarkSlateGray,
.g-bk-darkslategrey,
.g-bk-DarkSlateGrey {
    background-color: DarkSlateGray; /* #2F4F4F 深岩灰色 */
}

.g-bk-darkturquoise,
.g-bk-DarkTurquoise {
    background-color: DarkTurquoise; /* #00CED1 深綠松石色 */
}

.g-bk-darkviolet,
.g-bk-DarkViolet {
    background-color: DarkViolet; /* #9400D3 深紫羅紅色 */
}

.g-bk-deeppink,
.g-bk-DeepPink {
    background-color: DeepPink; /* #FF1493 深粉紅色 */
}

.g-bk-deepskyblue,
.g-bk-DeepSkyBlue {
    background-color: DeepSkyBlue; /* #00BFFF 深天藍色 */
}

.g-bk-dimgray,
.g-bk-DimGray,
.g-bk-dimgrey,
.g-bk-DimGrey {
    background-color: DimGray; /* #696969 黑灰色 */
}

.g-bk-dodgerblue,
.g-bk-DodgerBlue {
    background-color: DodgerBlue; /* #1E90FF 寶藍色 */
}

.g-bk-firebrick,
.g-bk-FireBrick {
    background-color: FireBrick; /* #B22222 磚紅色 */
}

.g-bk-floralwhite,
.g-bk-FloralWhite {
    background-color: FloralWhite; /* #FFFAF0 花白色 */
}

.g-bk-forestgreen,
.g-bk-ForestGreen {
    background-color: ForestGreen; /* #228B22 森林綠色 */
}

.g-bk-fuchsia,
.g-bk-Fuchsia {
    background-color: Fuchsia; /* #FF00FF 紫紅色 */
}

.g-bk-gainsboro,
.g-bk-Gainsboro {
    background-color: Gainsboro; /* #DCDCDC 亮灰色 */
}

.g-bk-ghostwhite,
.g-bk-GhostWhite {
    background-color: GhostWhite; /* #F8F8FF 蒼白色, 幽靈白色 */
}

.g-bk-gold,
.g-bk-Gold {
    background-color: Gold; /* #FFD700 金色 */
}

.g-bk-goldenrod,
.g-bk-Goldenrod {
    background-color: Goldenrod; /* #DAA520 金黃色 */
}

.g-bk-gray,
.g-bk-Gray,
.g-bk-grey,
.g-bk-Grey {
    background-color: Gray; /* #808080 灰色 */
}

.g-bk-green,
.g-bk-Green {
    background-color: Green; /* #008000 綠色 */
}

.g-bk-greenyellow,
.g-bk-GreenYellow {
    background-color: GreenYellow; /* #ADFF2F 綠黃色 */
}

.g-bk-honeydew,
.g-bk-Honeydew {
    background-color: Honeydew; /* #F0FFF0 蜜瓜白色 */
}

.g-bk-hotpink,
.g-bk-HotPink {
    background-color: HotPink; /* #FF69B4 暗粉紅色 */
}

.g-bk-indianred,
.g-bk-IndianRed {
    background-color: IndianRed; /* #CD5C5C 印度紅 */
}

.g-bk-indigo,
.g-bk-Indigo {
    background-color: Indigo; /* #4B0082 靛青色 */
}

.g-bk-ivory,
.g-bk-Ivory {
    background-color: Ivory; /* #FFFFF0 象牙白 */
}

.g-bk-khaki,
.g-bk-Khaki {
    background-color: Khaki; /* #F0E68C 卡其色 */
}

.g-bk-lavender,
.g-bk-Lavender {
    background-color: Lavender; /* #E6E6FA 薰衣草色 */
}

.g-bk-lavenderblush,
.g-bk-LavenderBlush {
    background-color: LavenderBlush; /* #FFF0F5 淡紫紅色 */
}

.g-bk-lawngreen,
.g-bk-LawnGreen {
    background-color: LawnGreen; /* #7CFC00 草綠色 */
}

.g-bk-lemonchiffon,
.g-bk-LemonChiffon {
    background-color: LemonChiffon; /* #FFFACD 粉黃色 */
}

.g-bk-lightblue,
.g-bk-LightBlue {
    background-color: LightBlue; /* #ADD8E6 淺藍色 */
}

.g-bk-lightcoral,
.g-bk-LightCoral {
    background-color: LightCoral; /* #F08080 淺珊瑚紅色 */
}

.g-bk-lightcyan,
.g-bk-LightCyan {
    background-color: LightCyan; /* #E0FFFF 淺青綠色 */
}

.g-bk-lightgoldenrodyellow,
.g-bk-LightGoldenrodYellow {
    background-color: LightGoldenrodYellow; /* #FAFAD2 淺金黃色 */
}

.g-bk-lightgray,
.g-bk-LightGray,
.g-bk-lightgrey,
.g-bk-LightGrey {
    background-color: LightGray; /* #D3D3D3 淺灰色 */
}

.g-bk-lightgreen,
.g-bk-LightGreen {
    background-color: LightGreen; /* #90EE90 淺綠色 */
}

.g-bk-lightpink,
.g-bk-LightPink {
    background-color: LightPink; /* #FFB6C1 淺粉紅色 */
}

.g-bk-lightsalmon,
.g-bk-LightSalmon {
    background-color: LightSalmon; /* #FFA07A 淺橙紅色 */
}

.g-bk-lightseagreen,
.g-bk-LightSeaGreen {
    background-color: LightSeaGreen; /* #20B2AA 淺海藻綠色 */
}

.g-bk-lightskyblue,
.g-bk-LightSkyBlue {
    background-color: LightSkyBlue; /* #87CEFA 淺天藍色 */
}

.g-bk-lightslategray,
.g-bk-LightSlateGray,
.g-bk-lightslategrey,
.g-bk-LightSlateGrey {
    background-color: LightSlateGray; /* #778899 淺岩灰色 */
}

.g-bk-lightsteelblue,
.g-bk-LightSteelBlue {
    background-color: LightSteelBlue; /* #B0C4DE 淺鋼鐵藍 */
}

.g-bk-lightyellow,
.g-bk-LightYellow {
    background-color: LightYellow; /* #FFFFE0 淡黃色 */
}

.g-bk-lime,
.g-bk-Lime {
    background-color: Lime; /* #00FF00 鮮綠色 */
}

.g-bk-limegreen,
.g-bk-LimeGreen {
    background-color: LimeGreen; /* #32CD32 檸檬綠色 */
}

.g-bk-linen,
.g-bk-Linen {
    background-color: Linen; /* #FAF0E6 亞麻色 */
}

.g-bk-magenta,
.g-bk-Magenta {
    background-color: Magenta; /* #FF00FF 洋紅色 */
}

.g-bk-maroon,
.g-bk-Maroon {
    background-color: Maroon; /* #800000 栗色 */
}

.g-bk-mediumaquamarine,
.g-bk-MediumAquamarine {
    background-color: MediumAquamarine; /* #66CDAA 暗草綠色 */
}

.g-bk-mediumblue,
.g-bk-MediumBlue {
    background-color: MediumBlue; /* #0000CD 暗藍色 */
}

.g-bk-mediumorchid,
.g-bk-MediumOrchid {
    background-color: MediumOrchid; /* #BA55D3 暗蘭花紫色 */
}

.g-bk-mediumpurple,
.g-bk-MediumPurple {
    background-color: MediumPurple; /* #9370DB 暗紫色 */
}

.g-bk-mediumseagreen,
.g-bk-MediumSeaGreen {
    background-color: MediumSeaGreen; /* #3CB371 暗海藻綠色 */
}

.g-bk-mediumslateblue,
.g-bk-MediumSlateBlue {
    background-color: MediumSlateBlue; /* #7B68EE 暗青藍色 */
}

.g-bk-mediumspringgreen,
.g-bk-MediumSpringGreen {
    background-color: MediumSpringGreen; /* #00FA9A 暗嫩綠色 */
}

.g-bk-mediumturquoise,
.g-bk-MediumTurquoise {
    background-color: MediumTurquoise; /* #48D1CC 暗綠松色 */
}

.g-bk-mediumvioletred,
.g-bk-MediumVioletRed {
    background-color: MediumVioletRed; /* #C71585 暗紫紅色 */
}

.g-bk-midnightblue,
.g-bk-MidnightBlue {
    background-color: MidnightBlue; /* #191970 黑藍色 */
}

.g-bk-mintcream,
.g-bk-MintCream {
    background-color: MintCream; /* #F5FFFA 薄荷乳白 */
}

.g-bk-mistyrose,
.g-bk-MistyRose {
    background-color: MistyRose; /* #FFE4E1 粉玫瑰紅 */
}

.g-bk-moccasin,
.g-bk-Moccasin {
    background-color: Moccasin; /* #FFE4B5 鹿皮鞋色 */
}

.g-bk-navajowhite,
.g-bk-NavajoWhite {
    background-color: NavajoWhite; /* #FFDEAD 那瓦霍白 */
}

.g-bk-navy,
.g-bk-Navy {
    background-color: Navy; /* #000080 海軍藍 */
}

.g-bk-oldlace,
.g-bk-OldLace {
    background-color: OldLace; /* #FDF5E6 舊蕾絲色 */
}

.g-bk-olive,
.g-bk-Olive {
    background-color: Olive; /* #808000 橄欖色 */
}

.g-bk-olivedrab,
.g-bk-OliveDrab {
    background-color: OliveDrab; /* #6B8E23 橄欖軍服綠 */
}

.g-bk-orange,
.g-bk-Orange {
    background-color: Orange; /* #FFA500 橙色 */
}

.g-bk-orangered,
.g-bk-OrangeRed {
    background-color: OrangeRed; /* #FF4500 橙紅色 */
}

.g-bk-orchid,
.g-bk-Orchid {
    background-color: Orchid; /* #DA70D6 暗蘭紫色 */
}

.g-bk-palegoldenrod,
.g-bk-PaleGoldenrod {
    background-color: PaleGoldenrod; /* #EEE8AA 灰金菊色 */
}

.g-bk-palegreen,
.g-bk-PaleGreen {
    background-color: PaleGreen; /* #98FB98 灰綠色 */
}

.g-bk-paleturquoise,
.g-bk-PaleTurquoise {
    background-color: PaleTurquoise; /* #AFEEEE 灰綠松石色 */
}

.g-bk-palevioletred,
.g-bk-PaleVioletRed {
    background-color: PaleVioletRed; /* #DB7093 灰紫紅色 */
}

.g-bk-papayawhip,
.g-bk-PapayaWhip {
    background-color: PapayaWhip; /* #FFEFD5 粉木瓜橙色 */
}

.g-bk-peachpuff,
.g-bk-PeachPuff {
    background-color: PeachPuff; /* #FFDAB9 粉撲桃色 */
}

.g-bk-peru,
.g-bk-Peru {
    background-color: Peru; /* #CD853F 秘魯色 */
}

.g-bk-pink,
.g-bk-Pink {
    background-color: Pink; /* #FFC0CB 粉紅色 */
}

.g-bk-plum,
.g-bk-Plum {
    background-color: Plum; /* #DDA0DD 梅紅色 */
}

.g-bk-powderblue,
.g-bk-PowderBlue {
    background-color: PowderBlue; /* #B0E0E6 嬰兒粉藍 */
}

.g-bk-purple,
.g-bk-Purple {
    background-color: Purple; /* #800080 紫色 */
}

.g-bk-red,
.g-bk-Red {
    background-color: Red; /* #FF0000 紅色 */
}

.g-bk-rosybrown,
.g-bk-RosyBrown {
    background-color: RosyBrown; /* #BC8F8F 玫瑰褐色 */
}

.g-bk-royalblue,
.g-bk-RoyalBlue {
    background-color: RoyalBlue; /* #4169E1 品藍色 */
}

.g-bk-saddlebrown,
.g-bk-SaddleBrown {
    background-color: SaddleBrown; /* #8B4513 鞍褐色 */
}

.g-bk-salmon,
.g-bk-Salmon {
    background-color: Salmon; /* #FA8072 淺鮭紅色 */
}

.g-bk-sandybrown,
.g-bk-SandyBrown {
    background-color: SandyBrown; /* #F4A460 沙褐色 */
}

.g-bk-seagreen,
.g-bk-SeaGreen {
    background-color: SeaGreen; /* #2E8B57 海藻綠色 */
}

.g-bk-seashell,
.g-bk-SeaShell {
    background-color: SeaShell; /* #FFF5EE 海貝色 */
}

.g-bk-sienna,
.g-bk-Sienna {
    background-color: Sienna; /* #A0522D 赭黃色 */
}

.g-bk-silver,
.g-bk-Silver {
    background-color: Silver; /* #C0C0C0 銀色 */
}

.g-bk-skyblue,
.g-bk-SkyBlue {
    background-color: SkyBlue; /* #87CEEB 天藍色 */
}

.g-bk-slateblue,
.g-bk-SlateBlue {
    background-color: SlateBlue; /* #6A5ACD 岩藍色 */
}

.g-bk-slategray,
.g-bk-SlateGray,
.g-bk-slategrey,
.g-bk-SlateGrey {
    background-color: SlateGray; /* #708090 岩灰色 */
}

.g-bk-snow,
.g-bk-Snow {
    background-color: Snow; /* #FFFAFA 雪色 */
}

.g-bk-springgreen,
.g-bk-SpringGreen {
    background-color: SpringGreen; /* #00FF7F 春綠色 */
}

.g-bk-steelblue,
.g-bk-SteelBlue {
    background-color: SteelBlue; /* #4682B4 鋼鐵藍色 */
}

.g-bk-tan,
.g-bk-Tan {
    background-color: Tan; /* #D2B48C 淺棕色 */
}

.g-bk-teal,
.g-bk-Teal {
    background-color: Teal; /* #008080 藍綠色 */
}

.g-bk-thistle,
.g-bk-Thistle {
    background-color: Thistle; /* #D8BFD8 薊紫色 */
}

.g-bk-tomato,
.g-bk-Tomato {
    background-color: Tomato; /* #FF6347 蕃茄紅 */
}

.g-bk-turquoise,
.g-bk-Turquoise {
    background-color: Turquoise; /* #40E0D0 綠松石色 */
}

.g-bk-violet,
.g-bk-Violet {
    background-color: Violet; /* #EE82EE 紫羅蘭色 */
}

.g-bk-wheat,
.g-bk-Wheat {
    background-color: Wheat; /* #F5DEB3 小麥色 */
}

.g-bk-white,
.g-bk-White {
    background-color: White; /* #FFFFFF 白色 */
}

.g-bk-whitesmoke,
.g-bk-WhiteSmoke {
    background-color: WhiteSmoke; /* #F5F5F5 白煙色 */
}

.g-bk-yellow,
.g-bk-Yellow {
    background-color: Yellow; /* #FFFF00 黃色 */
}

.g-bk-yellowgreen,
.g-bk-YellowGreen {
    background-color: YellowGreen; /* #9ACD32 黃綠色 */
}

/************************************
一般性標準樣式
************************************/

/*****************************************  cursor */
.g-cursor-pointer {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-cursor-move {
    cursor: move;
    /*** 以上請勿變更 ***/
}

.g-cursor-default {
    cursor: default;
    /*** 以上請勿變更 ***/
}

/*****************************************  opacity */
.g-transparent {
    opacity: 0;
    /*** 以上請勿變更 ***/
}

.g-opacity-10 {
    opacity: 0.1 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-20 {
    opacity: 0.2 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-30 {
    opacity: 0.3 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-40 {
    opacity: 0.4 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-50 {
    opacity: 0.5 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-60 {
    opacity: 0.6 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-70 {
    opacity: 0.7 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-80 {
    opacity: 0.8 !important;
    /*** 以上請勿變更 ***/
}

.g-opacity-90 {
    opacity: 0.9 !important;
    /*** 以上請勿變更 ***/
}

/*****************************************  borderStyle */
.g-borderStyle-dash {
    border-style: dashed !important;
}

.g-borderStyle-dot {
    border-style: dotted !important;
}

/*****************************************  align */
.g-align-left {
    text-align: left;
}

.g-align-right {
    text-align: right;
}

.g-align-center {
    text-align: center;
}

/*****************************************  valign */
.g-valign-top {
    vertical-align: top;
}

.g-valign-bottom {
    vertical-align: bottom;
}

.g-valign-middle {
    vertical-align: middle;
}

/*****************************************  隱藏 */
.g-hidden-object {
    position: absolute;
    /* visibility: hidden; */
    width: 0px;
    height: 0px;
    /*
    left: -10px;
    top: -10px;
    */
    /*** 以上請勿變更 ***/
}

.g-hidden-visibility {
    visibility: hidden !important;
    /*** 以上請勿變更 ***/
}

.g-hidden-display {
    display: none !important;
    /*** 以上請勿變更 ***/
}

.g-hidden-offsets {
    position: absolute !important;
    visibility: hidden !important;
    left: -10000px !important;
    top: -10000px !important;
    /*** 以上請勿變更 ***/
}

.g-disabled {
    /*** 以上請勿變更 ***/
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.g-block {
    display: block !important;
}

.g-inlineBlock {
    display: inline-block !important;
}

.g-noPadding {
    padding: 0px !important;
    /*** 以上請勿變更 ***/
}

.g-resizer {
    position: absolute;
    width: 10px;
    cursor: col-resize;
    /*** 以上請勿變更 ***/
    background-image: url(../images/resizer.png);
    background-repeat: repeat-y;
    background-position-x: 3px;
}

.g-resizer-vertical {
    position: absolute;
    height: 10px;
    cursor: row-resize;
    /*** 以上請勿變更 ***/
    background-image: url(../images/resizer.png);
    background-repeat: repeat-x;
    background-position-y: 3px;
}

.g-layout-toggler {
    cursor: pointer;
    /*** 以上請勿變更 ***/
    background-image: url(../images/resizer.png);
    background-repeat: repeat;
    opacity: 0.5;
}

.g-layout-toggler .g-comp-body {
    cursor: pointer;
}

.g-layout-toggler:hover {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

/* 文本樣式 */
.g-text {
    white-space: normal;
    word-wrap: break-word;
    padding: 5px;
    /*** 以上請勿變更 ***/
    background-color: #D3D3D3;
    color: blue;
    border-radius: 10px;
}

/************************************
GD.Lib.Tree
************************************/

.g-tree {
   /*** 以上請勿變更 ***/
}

.g-tree-body {
    position: relative;
    display: block;
    overflow:hidden;
   /*** 以上請勿變更 ***/
   Xborder: 1px solid red;
}

.g-tree-proxy {
    position: absolute;
    z-index: 200;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    background: white;
    border: 1px groove lightgray;
}

.g-tree-proxy-text {
    display: inline-block;
    vertical-align: middle;
    /*** 以上請勿變更 ***/
}

.g-tree-proxy-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: auto 20px;
    /*** 以上請勿變更 ***/
    background-image: url(../images/treeDrag.png);    
}

.g-tree-proxy-before>.g-tree-proxy-icon {
    background-position: 0px 0px;
}
.g-tree-proxy-after>.g-tree-proxy-icon {
    background-position: -20px 0px;
}
.g-tree-proxy-dropin>.g-tree-proxy-icon {
    background-position: -40px 0px;
}

.g-tree-proxy-prohibit>.g-tree-proxy-icon {
    background-position: -60px 0px;
}

/************************************
GD.CompLib.TreeNode
************************************/

.g-treeNode {
    position: relative;
    display: block;
    overflow:hidden;
    /*** 以上請勿變更 ***/
}
.g-treeNode * {
    line-height: 18px;
    vertical-align: top;
    /*** 以上請勿變更 ***/
    font-size: 14px;
}

.g-treeNode-content {
    position: relative;
    display: block;
    white-space: nowrap;
    border: 0px solid transparent;
    /*** 以上請勿變更 ***/
    Xborder: 1px solid blue;
}

.g-treeNode-elbowLine {
    position: relative;
    display: none;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/elbow.gif);
    background-size: auto 20px;
    background-repeat: repeat;
    Xborder: 1px solid black; /* for debug */
}

.g-treeNode-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/treeNode.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    Xborder: 1px solid black; /* for debug */
}

.g-treeNode-typeIcon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/icon.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    Xborder: 1px solid yellow; /* for debug */
}

.g-treeNode-title {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    Xborder: 1px solid brown;    /* FOR DEBUG */
}

.g-treeNode-text {
    position: relative;
    display: block;
    white-space: normal;
    padding-left: 20px;
    /*** 以上請勿變更 ***/
    Xborder: 1px solid brown;    /* FOR DEBUG */
}
.g-treeNode-child {
    position: relative;
    display: none;
    padding-left: 0px;
    /*** 以上請勿變更 ***/
    Xborder: 1px solid darkgreen; /* FOR DEBUG */
}
.g-treeNode-childNodes {
    position: relative;
    display: table-cell;
    padding-left: 0px;
    /*** 以上請勿變更 ***/
    Xborder: 1px solid darkgreen; /* FOR DEBUG */
}

/*************************************************************/
.g-treeNode-expanded > .g-treeNode-content > .g-treeNode-text {
    display: block;
    /*** 以上請勿變更 ***/
}
.g-treeNode-expanded > .g-treeNode-child {
    display: table;
    /*** 以上請勿變更 ***/
}

/*************************************************************/
.g-treeNode-icon,
.g-skin-normal.g-tree .g-treeNode-icon {
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

.g-treeNode-expanded>.g-treeNode-content>.g-treeNode-icon,
.g-skin-normal.g-tree .g-treeNode-expanded>.g-treeNode-content>.g-treeNode-icon {
    background-position: -20px 0px;
    /*** 以上請勿變更 ***/
}

.g-skin-plus.g-tree .g-treeNode-icon {
    background-position: -40px 0px;
    /*** 以上請勿變更 ***/
}

.g-skin-plus.g-tree .g-treeNode-expanded>.g-treeNode-content>.g-treeNode-icon {
    background-position: -60px 0px;
    /*** 以上請勿變更 ***/
}

.g-skin-triangle.g-tree .g-treeNode-icon {
    background-position: -80px 0px;
    /*** 以上請勿變更 ***/
}

.g-skin-triangle.g-tree .g-treeNode-expanded>.g-treeNode-content>.g-treeNode-icon {
    background-position: -100px 0px;
    /*** 以上請勿變更 ***/
}


/*************************************************************/
.g-treeNode-leaf > .g-treeNode-content > .g-treeNode-icon {
    background-position: 0px 0px;
    background-image: url(../images/elbow-line2.gif);
    background-repeat: repeat;
    /*** 以上請勿變更 ***/
}
.g-tree-body .g-comp-content > .g-treeNode-leaf > .g-treeNode-content > .g-treeNode-icon {
    background-position: -40px 0px;
    background-repeat: no-repeat;
}

.g-treeNode-title:hover {
    background: -moz-linear-gradient(top, #f8f8f8 0%, #e2e2e2 5%, #eaeaea 95%, #d6d6d6 100%);
    background: -webkit-linear-gradient(top, #f8f8f8 0%, #e2e2e2 5%, #eaeaea 95%, #d6d6d6 100%);
    background: -o-linear-gradient(top, #f8f8f8 0%, #e2e2e2 5%, #eaeaea 95%, #d6d6d6 100%);
    background: -ms-linear-gradient(top, #f8f8f8 0%, #e2e2e2 5%, #eaeaea 95%, #d6d6d6 100%);
}

.g-treeNode-active>.g-treeNode-title,
.g-treeNode-active .g-treeNode-title:hover {
    border: 1px solid red!important;
    background:    -moz-linear-gradient(top,  #deefff  0%, #98bede 100%);
    background: -webkit-linear-gradient(top,  #deefff  0%, #98bede 100%);
    background:      -o-linear-gradient(top,  #deefff  0%, #98bede 100%);
    background:     -ms-linear-gradient(top,  #deefff  0%, #98bede 100%);
}

/*************************************************************/
.g-treeNode-dropBefore>.g-treeNode-content {
    background-color: #c1ddf1;
    border-top: 2px dotted red;
}

.g-treeNode-dropAfter>.g-treeNode-content {
    background-color: #c1ddf1;
    border-bottom: 2px dotted red;
}

.g-treeNode-dropIn>.g-treeNode-content {
    background-color: #c1ddf1;
}

/*************************************************************/
.g-treeNode-contextMenu>.g-treeNode-content {
    background-color: lightgray;
}

.g-treeNode-typeIcon-file {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/moduleList.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    Xborder: 1px solid yellow; /* for debug */
}
.g-treeNode-typeIcon-folder {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/folder.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    Xborder: 1px solid yellow; /* for debug */
}

.g-treeNode-childNodes .g-treeNode-elbowLine {
    display: inline-block;    
    /*** 以上請勿變更 ***/
}
.g-treeNode-childNodes > .g-treeNode:last-child > .g-treeNode-content > .g-treeNode-elbowLine {
    background-image: url(../images/elbow-end.gif);
}
.g-treeNode-childLine {
    position: relative;
    display: table-cell;
    width: 20px;
    height: 100%;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background-image: url(../images/elbow-line.gif);
    background-size: auto 20px;
    background-repeat: repeat;
}
.g-tree-body  .g-comp-content > .g-treeNode > .g-treeNode-child > .g-treeNode-childLine {
    display:none;
}
.g-treeNode:last-child > .g-treeNode-child > .g-treeNode-childLine {
    visibility:hidden;
}
/************************************
GD.CompLib.Draggable
************************************/

/*****************************************  draggable */
.g-draggable {
    position: relative;
    /*** 以上請勿變更 ***/
}

.g-draggable-proxy {
    position: absolute !important;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    opacity: 0.8;  
}

/*****************************************  dragging */
.g-dragging {
    /*** 以上請勿變更 ***/
    cursor: move;
}

.g-draggable-invalid {
    /*** 以上請勿變更 ***/
    cursor: no-drop;
}

.g-draggable-hover {
    /*** 以上請勿變更 ***/
    border-color: darkgreen !important; /* for debug*/
    border-width: 6px !important; /* for debug*/
}

.g-draggable-cloned {
    /*** 以上請勿變更 ***/
    background-color: pink !important; /* for debug*/
}

/************************************
GD.CompLib.Droppable
************************************/

.g-droppable {
    /*** 以上請勿變更 ***/
}

.g-droppable-active {
    /*** 以上請勿變更 ***/
    border-color: darkgreen !important; /* for debug*/
}

.g-droppable-invalid {
    /*** 以上請勿變更 ***/
    border-color: yellow !important; /* for debug*/
}

.g-droppable-hover {
    /*** 以上請勿變更 ***/
    border-color: red !important; /* for debug*/
}

/************************************
GD.CompLib.Scrollbar 
************************************/
.g-repaint {
    position: absolute;
    width: 1px;
    height:1px;
    /*** 以上請勿變更 ***/
}

.g-scrollbar {
    /* Chrome, Safari */
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 500ms;

    /* FireFox */
    -moz-transition-property: opacity;
    -moz-transition-duration: 500ms;

    /* Opera */
    -o-transition-property: opacity;
    -o-transition-duration: 500ms;

    /* IE10+ */
    -ms-transition-property: opacity;
    -ms-transition-duration: 500ms;
    /*** 以上請勿變更 ***/
    border-radius: 4px;
}

.g-scrollbar-dark {
    /*** 以上請勿變更 ***/
    background-color: black;
    opacity:0.3;
}

.g-scrollbar-light {
    /*** 以上請勿變更 ***/
    background-color: white;
    opacity:0.3;
}

.g-scrollbar-vertical {
    top: 0px;
    right: 2px;
    /*** 以上請勿變更 ***/
    width: 4px;
}

.g-scrollbar-horizontal {
    left: 0px;
    bottom: 2px;
    /*** 以上請勿變更 ***/
    height: 4px;
}

/************************************
GD.CompLib.Scroller 
************************************/

.g-scroller-view {
    /*** 以上請勿變更 ***/
}
.g-scroller {
    position: absolute;
    display: block;
    overflow:hidden;
    top: 0px;
    left: 0px;
    margin: 0px!important;
    border: 0px!important;
    padding: 0px!important;
    /*** 以上請勿變更 ***/
}


/************************************
GD.Comp.Comp 
************************************/

/**************************************** [組件] */
.g-comp {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    margin: 0px !important; 
    /*** 以上請勿變更 ***/
    Xpadding: 3px; /* for debug*/
    Xborder: 3px solid blue; /* for debug*/
}

/**************************************** [頁面組件] */
.g-viewport {
    display: block;
    overflow: hidden;
    left: 0px!important;
    top: 0px!important;
    /*** 以上請勿變更 ***/
}

/**************************************** [主體元件] */
.g-comp-body {
    position: absolute;
    display: block;
    overflow: hidden;
    margin: 0px !important; 
    /*** 以上請勿變更 ***/
    Xpadding: 3px; /* for debug*/
    Xborder: 3px solid darkgreen; /* for debug*/
}

/**************************************** [停靠元件] */
.g-top-dock,
.g-bottom-dock,
.g-left-dock,
.g-right-dock {
    position: absolute;
    display: block;
    overflow: hidden;
    margin: 0px !important; 
    /*** 以上請勿變更 ***/
    Xpadding: 3px; /* for debug*/
    Xborder: 3px solid brown; /* for debug*/
}


.g-left-dock,
.g-right-dock {
    /*** 以上請勿變更 ***/
    Xborder: 3px solid red; /* for debug*/
}

/**************************************** [內文元件] */
.g-comp-html {
    position: relative;
    display: block;
    white-space: nowrap;
    margin: 0px!important;
    /*** 以上請勿變更 ***/
    Xpadding: 3px; /* for debug*/
    Xborder: 3px solid red; /* for debug*/
}

.g-layout-flow>.g-comp-html {
    display: inline-block;
    /*** 以上請勿變更 ***/
}

.g-comp-html-wrap {
    white-space: normal;
    /*** 以上請勿變更 ***/
}

.g-comp-autoWidth>.g-comp-body>.g-comp-html {
   display: inline-block; 
    /*** 以上請勿變更 ***/
}

.g-html-full {
    width: 100%;
    height: 100%;
}

/**************************************** [內容元件] */
.g-comp-content {
    position: relative;
    display: block;
    white-space: nowrap;
    margin: 0px!important;
    /*** 以上請勿變更 ***/
    Xpadding: 3px; /* for debug*/
    Xborder: 3px solid darkgreen; /* for debug*/
}

.g-layout-flow>.g-comp-content {
    display: inline-block;
    /*** 以上請勿變更 ***/
}

.g-comp-content-wrap {
    white-space: normal;
    /*** 以上請勿變更 ***/
}

.g-comp-autoWidth>.g-comp-body>.g-comp-content {
   display: inline-block; 
    /*** 以上請勿變更 ***/
}

/**************************************** [獨立組件] */
.g-comp-independent {
    position: relative;
    /*** 以上請勿變更 ***/
}

/**************************************** 其他設定 */
.g-comp-autoWidth>.g-comp-body {
    text-align: center;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Comp.Spacer
************************************/
.g-spacer {
    padding: 0px!important;
    border: none!important;
    /*** 以上請勿變更 ***/
}

.g-statusBar {
    border-top: 1px solid lightGray;
    color:blue;
    /* background-color: lightGray;*/
}
/************************************
GD.Layout.Card 
************************************/

/* [容器組件] 的 layout 為 card 時，[目標元件] 會自動加上 g-layout-card 的樣式 */
.g-layout-card {
    /*** 以上請勿變更 ***/
}

/* [容器組件] 的 layout 為 card 時，[子組件] 的 [主元件] 會自動加上 g-card-item 的樣式 */
.g-card-item {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Layout.HBox 
************************************/

/* [容器組件] 的 layout 為 hbox 時，[目標元件] 會自動加上 g-layout-hbox 的樣式 */
.g-layout-hbox {
    /*** 以上請勿變更 ***/
}

/* [容器組件] 的 layout 為 hbox 時，[子組件] 的 [主元件] 會自動加上 g-hbox-item 的樣式 */
.g-hbox-item {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Layout.VBox 
************************************/

/* [容器組件] 的 layout 為 vbox 時，[目標元件] 會自動加上 g-layout-vbox 的樣式 */
.g-layout-vbox {
    /*** 以上請勿變更 ***/
}

/* [容器組件] 的 layout 為 vbox 時，[子組件] 的 [主元件] 會自動加上 g-vbox-item 的樣式 */
.g-vbox-item {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Layout.Flow 
************************************/
/* [容器組件] 的 layout 為 flow 時，[目標元件] 會自動加上 g-layout-flow 的樣式 */
.g-layout-flow {
    /*** 以上請勿變更 ***/
}

/* [容器組件] 的 layout 為 flow 時，[子組件] 的 [主元件] 會自動加上 g-flow-item 的樣式 */
.g-flow-item {
    /*** 以上請勿變更 ***/
}

.g-layout-activeChildComp {
    /*** 以上請勿變更 ***/
}

.g-floating {
    position: absolute !important;
    /*** 以上請勿變更 ***/
}

.g-flow-activeChildComp {
    /*** 以上請勿變更 ***/
    border: 2px solid red !important;
}

/************************************
GD.Panel.Carousel
************************************/

/**************************************** [組件] */
.g-carousel {
    /*** 以上請勿變更 ***/
}

.g-carousel-item {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Button.Button
************************************/
.g-button {
    /*** 以上請勿變更 ***/
    padding: 3px;
}

    .g-button * {
        /*** 以上請勿變更 ***/
        cursor: pointer;
    }

.g-button-body {
    position: relative;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1em;
    /*** 以上請勿變更 ***/
    padding: 3px 15px;
}

.g-button-cell {
    position: relative;
    display: inline-block;
    line-height: 1em;
    /*** 以上請勿變更 ***/
}

.g-button.appButton .g-button-valign-middle {
    margin-top: 50%;
    top: 0%;
}

.g-button-valign-middle {
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%); /* IE 9 */
    -moz-transform: translateY(-50%); /* Firefox */
    -webkit-transform: translateY(-50%); /* Safari 和 Chrome */
    -o-transform: translateY(-50%); /* Opera */
    /*** 以上請勿變更 ***/
}

.g-button-valign-bottom {
    top: 100%;
    transform: translateY(-100%);
    -ms-transform: translateY(-100%); /* IE 9 */
    -moz-transform: translateY(-100%); /* Firefox */
    -webkit-transform: translateY(-100%); /* Safari 和 Chrome */
    -o-transform: translateY(-100%); /* Opera */
    /*** 以上請勿變更 ***/
}

.g-button-text {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1em;
    /*** 以上請勿變更 ***/
    /*text-shadow: 0px 1px 0px #ffffff;*/
    font-weight: bold;
    font-size: 14px;
}

.g-button-textWrap {
    white-space: normal;
    /*** 以上請勿變更 ***/
}

.g-button-badge {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    top: 0px;
    right: 0px;
    border-width: 2px;
    border-style: solid;
    padding: 3px;
    font-size: 10px;
    line-height: 10px; /* lineHeight = fontSize   */
    min-width: 20px; /* minWidth = fontSize + paddingLeftRight + borderLeftRight    */
    min-height: 20px; /* minHeight = fontSize + paddingTopBottom + borderTopBottom    */
    max-width: 100%;
    text-align: center;
    border-radius: 10px; /* borderRadius = minHeight * 0.5    */
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    box-shadow: #b6b6b6 -1px 1px 0px;
    border-color: white;
    color: white;
    font-weight: bold;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmFhYmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2MwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* for IE9 */
    background: -moz-linear-gradient(top, #ffaabb 0%, #cc0000 100%);
    background: -webkit-linear-gradient(top, #ffaabb 0%, #cc0000 100%);
    background: -o-linear-gradient(top, #ffaabb 0%, #cc0000 100%);
    background: -ms-linear-gradient(top, #ffaabb 0%, #cc0000 100%);
}

/****************************************** [按鈕圖示] 的相關樣式定義  */
.g-button-icon {
    position: relative;
    display: inline-block;
    background-size: auto 100%;
    background-repeat: no-repeat;
    vertical-align: middle;
    /*** 以上請勿變更 ***/
}

.g-button-iconMask {
    /*** 以上請勿變更 ***/
}

/****************************************** [按鈕形狀] 的相關樣式定義  */
.g-shape-forward .g-button-body {
    padding-right: 20px;
    /*** 以上請勿變更 ***/
}

.g-shape-back .g-button-body {
    padding-left: 20px;
    /*** 以上請勿變更 ***/
}

.g-shape-tab .g-button-body {
    padding-left: 20px;
    padding-right: 20px;
    /*** 以上請勿變更 ***/
}

.g-shape-upward .g-button-body {
    padding-top: 15px;
    /*** 以上請勿變更 ***/
}

.g-shape-downward .g-button-body {
    padding-bottom: 15px;
    /*** 以上請勿變更 ***/
}

/****************************************** 當不使用 svg 背景圖時， [按鈕皮膚] 的相關樣式定義  */

/*** plain ***/
.g-useCss.g-skin-plain .g-button-body {
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-plain .g-button-body:hover {
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-skin-plain .g-button-tapped {
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 80%);
}

    .g-useCss.g-skin-plain .g-button-tapped:hover {
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
        background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
        background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
        background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%, rgba(255,255,255,0) 80%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

/*** normal ***/
.g-useCss.g-skin-normal .g-button-body {
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-normal .g-button-body:hover {
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-skin-normal .g-button-tapped {
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-normal .g-button-tapped:hover {
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

/*** confirm, green ***/
.g-useCss.g-skin-confirm .g-button-body,
.g-useCss.g-skin-green .g-button-body {
    background: -moz-linear-gradient(top, #a2e306 0%, #7eb105 5%, #5b7f03 95%, #527400 100%);
    background: -webkit-linear-gradient(top, #a2e306 0%, #7eb105 5%, #5b7f03 95%, #527400 100%);
    background: -o-linear-gradient(top, #a2e306 0%, #7eb105 5%, #5b7f03 95%, #527400 100%);
    background: -ms-linear-gradient(top, #a2e306 0%, #7eb105 5%, #5b7f03 95%, #527400 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-confirm .g-button-body:hover,
    .g-useCss.g-skin-green .g-button-body:hover {
        background: -moz-linear-gradient(top, #b0f906 0%, #90cc05 5%, #689003 95%, #4f6900 100%);
        background: -webkit-linear-gradient(top, #b0f906 0%, #90cc05 5%, #689003 95%, #4f6900 100%);
        background: -o-linear-gradient(top, #b0f906 0%, #90cc05 5%, #689003 95%, #4f6900 100%);
        background: -ms-linear-gradient(top, #b0f906 0%, #90cc05 5%, #689003 95%, #4f6900 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-skin-confirm .g-button-tapped,
.g-useCss.g-skin-green .g-button-tapped {
    background: -moz-linear-gradient(top, #3e5702 0%, #507003 10%, #628904 65%, #648c04 100%);
    background: -webkit-linear-gradient(top, #3e5702 0%, #507003 10%, #628904 65%, #648c04 100%);
    background: -o-linear-gradient(top, #3e5702 0%, #507003 10%, #628904 65%, #648c04 100%);
    background: -ms-linear-gradient(top, #3e5702 0%, #507003 10%, #628904 65%, #648c04 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-confirm .g-button-tapped:hover,
    .g-useCss.g-skin-green .g-button-tapped:hover {
        background: -moz-linear-gradient(top, #405400 0%, #4b6000 10%, #719900 65%, #85b700 100%);
        background: -webkit-linear-gradient(top, #405400 0%, #4b6000 10%, #719900 65%, #85b700 100%);
        background: -o-linear-gradient(top, #405400 0%, #4b6000 10%, #719900 65%, #85b700 100%);
        background: -ms-linear-gradient(top, #405400 0%, #4b6000 10%, #719900 65%, #85b700 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

/*** cancel, red ***/
.g-useCss.g-skin-cancel .g-button-body,
.g-useCss.g-skin-red .g-button-body {
    background: -moz-linear-gradient(top, #f91f1f 0%, #e00606 5%, #ae0404 95%, #c70505 100%);
    background: -webkit-linear-gradient(top, #f91f1f 0%, #e00606 5%, #ae0404 95%, #c70505 100%);
    background: -o-linear-gradient(top, #f91f1f 0%, #e00606 5%, #ae0404 95%, #c70505 100%);
    background: -ms-linear-gradient(top, #f91f1f 0%, #e00606 5%, #ae0404 95%, #c70505 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-cancel .g-button-body:hover,
    .g-useCss.g-skin-red .g-button-body:hover {
        background: -moz-linear-gradient(top, #fb3d3d 0%, #f91010 5%, #cd0404 95%, #ea0606 100%);
        background: -webkit-linear-gradient(top, #fb3d3d 0%, #f91010 5%, #cd0404 95%, #ea0606 100%);
        background: -o-linear-gradient(top, #fb3d3d 0%, #f91010 5%, #cd0404 95%, #ea0606 100%);
        background: -ms-linear-gradient(top, #fb3d3d 0%, #f91010 5%, #cd0404 95%, #ea0606 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-skin-cancel .g-button-tapped,
.g-useCss.g-skin-red .g-button-tapped {
    background: -moz-linear-gradient(top, #860303 0%, #9f0404 10%, #b80505 65%, #ba0505 100%);
    background: -webkit-linear-gradient(top, #860303 0%, #9f0404 10%, #b80505 65%, #ba0505 100%);
    background: -o-linear-gradient(top, #860303 0%, #9f0404 10%, #b80505 65%, #ba0505 100%);
    background: -ms-linear-gradient(top, #860303 0%, #9f0404 10%, #b80505 65%, #ba0505 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-cancel .g-button-tapped:hover,
    .g-useCss.g-skin-red .g-button-tapped:hover {
        background: -moz-linear-gradient(top, #a00303 0%, #bd0404 10%, #d60505 65%, #db0505 100%);
        background: -webkit-linear-gradient(top, #a00303 0%, #bd0404 10%, #d60505 65%, #db0505 100%);
        background: -o-linear-gradient(top, #a00303 0%, #bd0404 10%, #d60505 65%, #db0505 100%);
        background: -ms-linear-gradient(top, #a00303 0%, #bd0404 10%, #d60505 65%, #db0505 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

/*** blue ***/
.g-useCss.g-skin-blue .g-button-body {
    background: -moz-linear-gradient(top, #1f1ff9 0%, #0606e0 5%, #0404ae 95%, #0505c7 100%);
    background: -webkit-linear-gradient(top, #1f1ff9 0%, #0606e0 5%, #0404ae 95%, #0505c7 100%);
    background: -o-linear-gradient(top, #1f1ff9 0%, #0606e0 5%, #0404ae 95%, #0505c7 100%);
    background: -ms-linear-gradient(top, #1f1ff9 0%, #0606e0 5%, #0404ae 95%, #0505c7 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-blue .g-button-body:hover {
        background: -moz-linear-gradient(top, #3d3dfb 0%, #1010f9 5%, #0404cd 95%, #0606ea 100%);
        background: -webkit-linear-gradient(top, #3d3dfb 0%, #1010f9 5%, #0404cd 95%, #0606ea 100%);
        background: -o-linear-gradient(top, #3d3dfb 0%, #1010f9 5%, #0404cd 95%, #0606ea 100%);
        background: -ms-linear-gradient(top, #3d3dfb 0%, #1010f9 5%, #0404cd 95%, #0606ea 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-skin-blue .g-button-tapped {
    background: -moz-linear-gradient(top, #030386 0%, #04049f 10%, #0505b8 65%, #0505ba 100%);
    background: -webkit-linear-gradient(top, #030386 0%, #04049f 10%, #0505b8 65%, #0505ba 100%);
    background: -o-linear-gradient(top, #030386 0%, #04049f 10%, #0505b8 65%, #0505ba 100%);
    background: -ms-linear-gradient(top, #030386 0%, #04049f 10%, #0505b8 65%, #0505ba 100%);
    /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
}

    .g-useCss.g-skin-blue .g-button-tapped:hover {
        background: -moz-linear-gradient(top, #0303a0 0%, #0404bd 10%, #0505d6 65%, #0505db 100%);
        background: -webkit-linear-gradient(top, #0303a0 0%, #0404bd 10%, #0505d6 65%, #0505db 100%);
        background: -o-linear-gradient(top, #0303a0 0%, #0404bd 10%, #0505d6 65%, #0505db 100%);
        background: -ms-linear-gradient(top, #0303a0 0%, #0404bd 10%, #0505d6 65%, #0505db 100%);
        /*** 以上請勿變更，如果需要調整時，請同步修改 GD.Singleton.ButtonSkin 類別中相關的設定 ***/
    }

.g-useCss.g-button-module .g-button-body,
.g-useCss.g-button-webportal .g-button-body {
    background: -moz-linear-gradient(top, #eff8dd 0%, #eef8dc 5%, #eef8dc 95%, #eff8dd 100%);
    background: -webkit-linear-gradient(top, #eff8dd 0%, #eef8dc 5%, #eef8dc 95%, #eff8dd 100%);
    background: -o-linear-gradient(top, #eff8dd 0%, #eef8dc 5%, #eef8dc 95%, #eff8dd 100%);
    background: -ms-linear-gradient(top, #eff8dd 0%, #eef8dc 5%, #eef8dc 95%, #eff8dd 100%);
}

    .g-useCss.g-button-module .g-button-body:hover,
    .g-useCss.g-button-webportal .g-button-body:hover {
        background: -moz-linear-gradient(top, #dbf0b2 0%, #e5f4c8 5%, #e5f4c8 95%, #dbf0b2 100%);
        background: -webkit-linear-gradient(top, #dbf0b2 0%, #e5f4c8 5%, #e5f4c8 95%, #dbf0b2 100%);
        background: -o-linear-gradient(top, #dbf0b2 0%, #e5f4c8 5%, #e5f4c8 95%, #dbf0b2 100%);
        background: -ms-linear-gradient(top, #dbf0b2 0%, #e5f4c8 5%, #e5f4c8 95%, #dbf0b2 100%);
    }

/****************************************** [按鈕皮膚] 的相關樣式定義  */
/*** plain ***/
.g-skin-plain .g-button-text {
    /*** 以上請勿變更 ***/
    color: Black;
}

.g-skin-plain .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Red;
}

.g-skin-plain .g-button-text.g-moduleselect {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

.g-skin-plain .g-button-text.g-moduleunselect {
    /*** 以上請勿變更 ***/
    color: White;
}

.g-skin-plain .g-button-tapped .g-button-text.g-moduleselect {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

/*** normal ***/
.g-skin-normal .g-button-text {
    /*** 以上請勿變更 ***/
    color: Black;
}

.g-skin-normal .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Red;
}

/*** confirm, green ***/
.g-skin-confirm .g-button-text,
.g-skin-green .g-button-text {
    /*** 以上請勿變更 ***/
    color: White;
    text-shadow: 0px 1px 0px darkgreen;
}

.g-skin-confirm .g-button-tapped .g-button-text,
.g-skin-green .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

/*** cancel, red ***/
.g-skin-cancel .g-button-text,
.g-skin-red .g-button-text {
    /*** 以上請勿變更 ***/
    color: White;
    text-shadow: 0px 1px 0px darkred;
}

.g-skin-cancel .g-button-tapped .g-button-text,
.g-skin-red .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

/*** blue ***/
.g-skin-blue .g-button-text {
    /*** 以上請勿變更 ***/
    color: White;
    text-shadow: 0px 1px 0px darkblue;
}

.g-skin-blue .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

/*** forSheet ***/
.g-button-forSheet .g-button-text {
    /*** 以上請勿變更 ***/
    color: White;
    text-shadow: 0px 1px 0px darkgreen;
}

.g-button-forSheet .g-button-tapped .g-button-text {
    /*** 以上請勿變更 ***/
    color: Yellow;
}

/*****************************************************/
.g-button-36 {
    padding: 2px;
    /*** 以上請勿變更 ***/
}

    .g-button-36 .g-button-body {
        padding: 0px;
    }

/************************************
GD.Comp.Audio
************************************/
/* audio 組件的樣式*/
.g-audio 
{
    position: relative;
    display: inline-block;
    /*** 以上請勿變更 ***/
}
.g-audio-media {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Comp.Video
************************************/
.g-video 
{
    position: relative;
    display: inline-block;
    padding: 1px;
    /*** 以上請勿變更 ***/
    background-color: black;

}
.g-video-media {
    /*** 以上請勿變更 ***/
}
/************************************
GD.Panel.OptionBox
************************************/
.g-optionBox {
    /*** 以上請勿變更 ***/
    padding: 5px;
}

.g-optionBox-item {
    padding: 0px!important;
    border: 0px!important;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Panel.Toolbar
************************************/
.g-toolbar {
    /*** 以上請勿變更 ***/
}

.g-toolbar-item {
    /*** 以上請勿變更 ***/
}

/****************************************** [工具列] 的相關樣式定義  */

/*** normal ***/
.g-toolbar.g-skin-normal {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: black;
    background-color: #6a992b;
    background: -webkit-gradient(linear, left top, left bottom, from(#76ab30), to(#5a8325), color-stop(33%,#6a992b)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* FireFox */
    background: -o-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76ab30', endColorstr='#5a8325'); /* IE9 */
    background: linear-gradient(to bottom, #76ab30, #6a992b, #5a8325); /*IE10*/
}

.g-toolbar-app.g-skin-normal {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: black;
    background-color: #e2fbb6;
    background: -webkit-gradient(linear, left top, left bottom, from(#e2fbb6), to(#d2f8b0)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #e2fbb6, #d2f8b0); /* FireFox */
    background: -o-linear-gradient(top, #e2fbb6, #d2f8b0); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2fbb6', endColorstr='#d2f8b0'); /* IE9 */
    background: linear-gradient(to bottom, #87b24e, #87b24e); /*IE10*/
}

.g-toolbar-navigator.g-skin-normal {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: black;
    background-color: #e2fbb6;
    background: -webkit-gradient(linear, left top, left bottom, from(#e2fbb6), to(#d2f8b0)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #e2fbb6, #d2f8b0); /* FireFox */
    background: -o-linear-gradient(top, #e2fbb6, #d2f8b0); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2fbb6', endColorstr='#d2f8b0'); /* IE9 */
    background: linear-gradient(to bottom, #92b761, #92b761); /*IE10*/
}

.g-toolbar-searchbar.g-skin-normal {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: black;
    background-color: #e2fbb6;
    background: -webkit-gradient(linear, left top, left bottom, from(#e2fbb6), to(#d2f8b0)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #e2fbb6, #d2f8b0); /* FireFox */
    background: -o-linear-gradient(top, #e2fbb6, #d2f8b0); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2fbb6', endColorstr='#d2f8b0'); /* IE9 */
    background: linear-gradient(to bottom, #92b761, #92b761); /*IE10*/
}

/*** dark ***/
.g-toolbar.g-skin-dark {
    /*** 以上請勿變更 ***/
    color: white;
    border-color: black;
    background-color: #6a992b;
    background: -webkit-gradient(linear, left top, left bottom, from(#76ab30), to(#5a8325), color-stop(33%,#6a992b)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* FireFox */
    background: -o-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76ab30', endColorstr='#5a8325'); /* IE9 */
    background: linear-gradient(to bottom, #76ab30, #6a992b, #5a8325); /*IE10*/
}


/*** light ***/
.g-toolbar.g-skin-light {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: #112222;
    background-color: #6a992b;
    background: -webkit-gradient(linear, left top, left bottom, from(#6a992b), to(#6a992b)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #6a992b, #6a992b); /* FireFox */
    background: -o-linear-gradient(top, #6a992b, #6a992b); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6a992b', endColorstr='#6a992b'); /* IE9 */
    background: linear-gradient(to bottom, #6a992b, #6a992b); /*IE10*/
}

/*** light2 ***/
.g-toolbar.g-skin-light2 {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: #112222;
    background-color: #eef8dc;
}

/************************************
GD.Panel.TabPanel
************************************/
.g-tabPanel {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Panel.TabBar
************************************/
.g-tabBar {
    /*** 以上請勿變更 ***/
}

    .g-tabBar.g-skin-normal,
    .g-tabBar.g-skin-dark,
    .g-tabBar.g-skin-light {
        /*** 以上請勿變更 ***/
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* IE9 */
        background: linear-gradient(to bottom, #FFFFFF, #FFFFFF); /*IE10*/
        background-color: #FFFFFF;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#FFFFFF)); /* Safari, Chrome */
        background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* FireFox */
        background: -o-linear-gradient(top, #FFFFFF, #FFFFFF); /* Opera */
    }

/************************************
GD.Button.TabButton
************************************/
.g-tabButton {
    /*** 以上請勿變更 ***/
    padding: 0px;
}

.g-tabButton-text {
    /*** 以上請勿變更 ***/
}

/****************************************** [按鈕皮膚] 的相關樣式定義  */
/*** 此處是說明，當點擊時，不需要修改文本的顏色 *********/
/*** normal ***/
.g-skin-normal .g-tabButton-text {
    /*** 以上請勿變更 ***/
    color: black !important;
}

/*** plain ***/
.g-skin-plain .g-tabButton-text {
    /*** 以上請勿變更 ***/
    color: black !important;
}

/*** confirm, green ***/
.g-skin-confirm .g-tabButton-text,
.g-skin-green .g-tabButton-text {
    /*** 以上請勿變更 ***/
    color: #F0FFFF !important;
}

/*** cancel, red ***/
.g-skin-cancel .g-tabButton-text,
.g-skin-red .g-tabButton-text {
    /*** 以上請勿變更 ***/
    color: #FFF5EE !important;
}

/*** blue ***/
.g-skin-blue .g-tabButton-text {
    /*** 以上請勿變更 ***/
    color: #FAF0E6 !important;
}

/* 預設 tab 的 close 的 背景顏色(叉號為黑色) */
.g-tabButton-close {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    /*** 以上請勿變更 ***/
    background: url(../images/clear.png) no-repeat;
    background-size: 40px 20px;
    background-position: 0px 0px;
}

.g-tabButton-useClose {
    /*** 以上請勿變更 ***/
    padding: 0 0px 0 10px !important;
}

/* 預設 tab 的 close 的 mouseover 時的背景顏色(底色為淺紅叉號為白色) */
.g-tabButton-close:hover {
    /*** 以上請勿變更 ***/
    background-position: -20px 0px;
}

/* 預設特殊 tab 的 edit 的 背景顏色 */
.g-specialTabButton-edit {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    /*** 以上請勿變更 ***/
    background: url(../images/edit.png) no-repeat;
    background-size: 50px 25px;
    background-position: 0px 0px;
}

    /* 預設特殊 tab 的 close 的 mouseover 時的背景顏色(底色為淺紅叉號為白色) */
    .g-specialTabButton-edit:hover {
        /*** 以上請勿變更 ***/
        background-position: -25px 0px;
    }

/* 預設特殊 tab 的 edit 的 背景顏色 */
.g-specialTabButton-close {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    /*** 以上請勿變更 ***/
    background: url(../images/clear.png) no-repeat;
    background-size: 50px 25px;
    background-position: -25px 0px;
}

    /* 預設特殊 tab 的 close 的 mouseover 時的背景顏色(底色為淺紅叉號為白色) */
    .g-specialTabButton-close:hover {
        /*** 以上請勿變更 ***/
        background-position: 0px 0px;
    }

.g-specialTabButton-useEdit {
    /*** 以上請勿變更 ***/
    padding: 0 5px 0 0px !important;
}

/************************************
GD.Comp.QRCode
************************************/
.g-qrcode {
    /*** 以上請勿變更 ***/
}

.g-qrcode>.g-comp-body {
    /*** 以上請勿變更 ***/
    text-align: center;
}

.g-qrcode-canvas {
    position: relative;
    display: block;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Comp.Barcode
************************************/
.g-barcode {
    /*** 以上請勿變更 ***/
}

.g-barcode>.g-comp-body {
    text-align: center;
    /*** 以上請勿變更 ***/
}

.g-barcode-canvas {
    position: relative;
    display: block;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Comp.Image
************************************/
.g-image {
    /*** 以上請勿變更 ***/
}

.g-image-floating {
    position: fixed;
    /*** 以上請勿變更 ***/
    background-color: white;
    padding: 5px;
}

.g-image-stretch {
    background-size:100% 100%;
    /*** 以上請勿變更 ***/
}

.g-image-cover {
    background-size: cover;
    /*** 以上請勿變更 ***/
}

.g-image-contain {
    background-size: contain;
    /*** 以上請勿變更 ***/
}

/************************************
GD.CompLib.Mask
************************************/

.g-mask {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
  /*** 以上請勿變更 ***/
    opacity:0.5;
    background-color: gray;
}

.g-mask-icon {
    position: absolute;
    display: block;
    /*** 以上請勿變更 ***/
}

.g-mask-text {
    position: absolute;
    display: block;
    cursor: default;
    /*** 以上請勿變更 ***/
    padding: 3px;
    background-color: white;
    font-weight: bold;
    color: black;
}

/**********************************  g-maskColor */
.g-maskColor-transparent {
    background-color: transparent!important;
  /*** 以上請勿變更 ***/
}

.g-maskColor-white {
    background-color: white!important;
  /*** 以上請勿變更 ***/
}

.g-maskColor-black {
    background-color: black!important;
  /*** 以上請勿變更 ***/
}

.g-maskColor-gray,
.g-maskColor-grey
 {
    background-color: gray!important;
  /*** 以上請勿變更 ***/
}

/**************************************************** g-spinner-1 ~ 5 */
.g-webkit .g-spinner-1,
.g-gecko .g-spinner-1 {
    background: url(../svg/spinner-1.svg) no-repeat;
    background-size: 100% 100%;
}

.g-ie .g-spinner-1 {
    background: url(../svg/spinner-1.gif) no-repeat;
    background-size: 100% 100%;
}

.g-webkit .g-spinner-2,
.g-gecko .g-spinner-2 {
    background: url(../svg/spinner-2.svg) no-repeat;
    background-size: 100% 100%;
}
.g-ie .g-spinner-2 {
    background: url(../svg/spinner-2.gif) no-repeat;
    background-size: 100% 100%;
}

.g-webkit .g-spinner-3,
.g-gecko .g-spinner-3 {
    background: url(../svg/spinner-3.svg) no-repeat;
    background-size: 100% 100%;
}
.g-ie .g-spinner-3 {
    background: url(../svg/spinner-3.gif) no-repeat;
    background-size: 100% 100%;
}

.g-webkit .g-spinner-4,
.g-gecko .g-spinner-4 {
    background: url(../svg/spinner-4.svg) no-repeat;
    background-size: 100% 100%;
}
.g-ie .g-spinner-4 {
    background: url(../svg/spinner-4.gif) no-repeat;
    background-size: 100% 100%;
}

.g-webkit .g-spinner-5,
.g-gecko .g-spinner-5 {
    background: url(../svg/spinner-5.svg) no-repeat;
    background-size: 100% 100%;
}

.g-ie .g-spinner-5 {
    background: url(../svg/spinner-5.gif) no-repeat;
    background-size: 100% 100%;
}

/************************************
GD.CompLib.Indicator
************************************/

.g-indicator {
    position: absolute;
    display: block;
    line-height: 0px;
    /*** 以上請勿變更 ***/
}

.g-indicator-item {
    position: absolute;
    display: inline-block;
    /*** 以上請勿變更 ***/
    cursor: pointer;
}
.g-indicator-item:after {
    display: block;
    content: '';
    opacity:0.8;
    /*** 以上請勿變更 ***/
}

/************************************************************ g-skin-normal */
.g-skin-normal .g-indicator-item {
    padding: 10px;      /* 內縮量，避免圓圈太小，不容易點擊 */
    /*** 以上請勿變更 ***/
}

.g-skin-normal .g-indicator-item:after {
    width: 10px;    /* width 必須等於 height */
    height: 10px;
    border-radius: 50%;
    border: 1px solid gray;
    background-color: gray;
    /*** 以上請勿變更 ***/
}
.g-skin-normal .g-indicator-active {
    /*background-color: yellow;*/
}
.g-skin-normal .g-indicator-active:after {
    width: 10px;    /* width 必須等於 height */
    height: 10px;
    border-radius: 50%;
    border: 1px solid black;
    background-color: black
}
/*************************************************************/

/************************************
GD.Field
************************************/

.g-field {
    /*** 以上請勿變更 ***/
    padding: 3px;
}

.g-field-editor {
    width: 150px;
}

.g-toolbar .g-field {
    padding: 3px;
}

.g-field-body {
    position: absolute;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    border: 1px solid darkgray;
}

.g-field-body {
    /*** 以上請勿變更 ***/
    border-radius: 10px;
    background-color: white;
}

.g-field-labelCell {
    /*** 以上請勿變更 ***/
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
}

.g-field-dataCell {
    /*** 以上請勿變更 ***/
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
}

.g-field-icon {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}

.g-field-action {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}

.g-PhoneField .g-field-action {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}
/*********************************************************/
.g-field-small .g-field-body {
    /*** 以上請勿變更 ***/
    border-radius: 6.5px;
    background-color: white;
}

.g-field-small .g-field-labelCell {
    /*** 以上請勿變更 ***/
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: white;
}

.g-field-small .g-field-dataCell {
    /*** 以上請勿變更 ***/
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 3px;
    padding-right: 3px;
    background-color: white;
}

.g-field-small .g-field-icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}

.g-field-small .g-field-action {
    width: 12.5px;
    height: 20px;
    background-size: 12.5px 20px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}

.g-field-small.g-PhoneField .g-field-action {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}
/*********************************************************/
.g-field-required .g-field-label::after {
    /*** 以上請勿變更 ***/
    color: red;
    font-weight: bold;
    content: ' *';
}

.g-field-keyField .g-field-label::after {
    /*** 以上請勿變更 ***/
    color: darkblue;
    font-weight: bold;
    content: ' #';
}

.g-field-text,
.g-field-id {
    /*** 以上請勿變更 ***/
    /*min-width: 60px; 先前發現指定最小寬度反而造成  .g-app-recordIndicator .g-field-text  的顯示不正確，這裡先註解起來看看。 by daniel*/
    color: black;
}

.g-field-separateLine .g-field-labelCell {
    /*** 以上請勿變更 ***/
    border-right: 1px solid darkgray;
}

/*********************************************************/
.g-field-labelCell,
.g-field-dataCell {
    position: absolute;
    overflow: hidden;
    /*** 以上請勿變更 ***/
}

.g-field-icon,
.g-field-label,
.g-field-text,
.g-field-editor,
.g-field-action,
.g-field-id,
.g-field-idEditor {
    position: absolute;
    /*** 以上請勿變更 ***/
}

.g-field-icon,
.g-field-action {
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

textarea.g-field-editor,
input.g-field-editor {
    text-overflow: ellipsis;
    /*** 以上請勿變更 ***/
    border: none;
    background-color: #FFFFCD;
    overflow: hidden;
    color: darkblue;
}

/* Internet Explorer 11 */
textarea:-ms-input-placeholder,
input:-ms-input-placeholder {
    color: #999;
}

.g-field-label,
.g-field-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    padding-left: 3px;
}

.g-field-text {
    /*** 以上請勿變更 ***/
    /*text-align: right;*/
}

/******************************************************** g-skin-normal */
.g-skin-normal .g-field-labelCell {
    background-color: #ebebeb;
}

/************************************
GD.Panel.Fieldset
************************************/
.g-fieldset {
    padding: 5px 3px;
}

.g-fieldset-item {
    padding: 0px !important;
}

    .g-fieldset-item .g-field-body {
        border-radius: 0px;
        border-bottom: none;
    }

/*.g-fieldset .g-fieldset-item:first-child .g-field-body {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.g-fieldset .g-field-small.g-fieldset-item:first-child .g-field-body {
    border-top-left-radius: 6.5px;
    border-top-right-radius: 6.5px;
}

.g-fieldset .g-fieldset-item:last-child .g-field-body {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 1px solid darkgray;
}
.g-fieldset .g-field-small.g-fieldset-item:last-child .g-field-body {
    border-bottom-left-radius: 6.5px;
    border-bottom-right-radius: 6.5px;
}*/

.g-fieldset .g-fieldset-first .g-field-body {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.g-fieldset .g-field-small.g-fieldset-first .g-field-body {
    border-top-left-radius: 6.5px;
    border-top-right-radius: 6.5px;
}

.g-fieldset .g-fieldset-last .g-field-body {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 1px solid darkgray;
}

.g-fieldset .g-field-small.g-fieldset-last .g-field-body {
    border-bottom-left-radius: 6.5px;
    border-bottom-right-radius: 6.5px;
}


.g-fieldset .g-field-error .g-field-body {
    border-bottom: none !important;
}

.g-fieldset .g-field-error.g-fieldset-last .g-field-labelCell {
    border-bottom: 1px solid darkgray;
}

.g-field-error .g-field-dataCell {
    /*** 以上請勿變更 ***/
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid red;
}

.g-field-small.g-field-error .g-field-dataCell {
    /*** 以上請勿變更 ***/
    border-top-right-radius: 6.5px;
    border-bottom-right-radius: 6.5px;
}

/*欄位值錯誤時，要加紅色的框，並設置圓角*/
.g-fieldset-item.g-field-error .g-field-dataCell {
    border-radius: 0px;
}

/*在 fieldset 中，當欄位值錯誤時，要加紅色的框，並不設置圓角*/
.g-fieldset .g-field-small.g-fieldset-item.g-field-error .g-field-dataCell {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*在 fieldset 中，當欄位值錯誤時，要加紅色的框，並不設置圓角*/
.g-fieldset .g-fieldset-item.g-field-error .g-field-dataCell {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/*.g-fieldset .g-fieldset-item:first-child.g-field-error .g-field-dataCell {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
}

.g-fieldset .g-field-small.g-fieldset-item:first-child.g-field-error .g-field-dataCell {
    border-top-right-radius: 6.5px;
    border-bottom-right-radius: 0px;
}

.g-fieldset .g-fieldset-item:last-child.g-field-error .g-field-dataCell {
   border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
}

.g-fieldset .g-field-small.g-fieldset-item:last-child.g-field-error .g-field-dataCell {
   border-top-right-radius: 0px;
    border-bottom-right-radius: 6.5px;
}*/

/*在 fieldset 中，當欄位值錯誤時並且是第一個欄位時，要加紅色的框，並右上角設置圓角*/
.g-fieldset .g-fieldset-first.g-field-error .g-field-dataCell {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
}

/*在 fieldset 中，當欄位值錯誤時並且是第一個欄位時，要加紅色的框，並右上角設置圓角*/
.g-fieldset .g-field-small.g-fieldset-first.g-field-error .g-field-dataCell {
    border-top-right-radius: 6.5px;
    border-bottom-right-radius: 0px;
}

/*在 fieldset 中，當欄位值錯誤時並且是最後一個欄位時，要加紅色的框，並右下角設置圓角*/
.g-fieldset .g-fieldset-last.g-field-error .g-field-dataCell {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
}

/*在 fieldset 中，當欄位值錯誤時並且是最後一個欄位時，要加紅色的框，並右下角設置圓角*/
.g-fieldset .g-field-small.g-fieldset-last.g-field-error .g-field-dataCell {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 6.5px;
}


.g-field-id {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    padding-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

.g-IdField .g-field-text:hover {
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

.g-field-idEditor {
    text-overflow: ellipsis;
    /*** 以上請勿變更 ***/
    border: none;
    background-color: #FFFFCD;
    overflow: hidden;
    color: darkblue;
    padding-left: 3px;
}

.g-IdField .g-field-text {
    /*** 以上請勿變更 ***/
    background-color: #E2FFEC;
}

.g-IdField.g-field-readonly .g-field-text {
    /*** 以上請勿變更 ***/
    background-color: transparent;
}

.g-field-canSelect {
    border: 0px;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
    user-select: text;
    -ms-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
}

.g-field-html-canSelect {
    width: 100%;
    height: 100%;
}

.g-ColorTextareaField-readonly-text {
    white-space: pre-wrap !important;
}

.g-field-ColorTextareaField-scroll {
    position: static;
    display: inline-block;
    overflow-y: auto;
    background-color: #FFFFCD;
    white-space: pre-wrap;
}

.g-field-ColorTextareaField-select {
    user-select: text;
    -ms-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.g-palette-item {
    border-radius: 3px;
    border: 1px solid #CCC;
}

    .g-palette-item .g-button-body {
        position: relative;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1em;
        /*** 以上請勿變更 ***/
        padding: 2px 2px;
    }

/************************************
GD.Field.TextField
************************************/
.g-TextField {
    /*** 以上請勿變更 ***/
}

.g-field-lang,
.g-field-clear {
    position: absolute;
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

.g-field-clear {
    width: 20px;
    height: 20px;
    background: url(../images/clear.png) no-repeat;
    background-size: 40px 20px;
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

    .g-field-clear:hover {
        background-position: -20px 0px;
        /*** 以上請勿變更 ***/
    }

.g-lookupField .g-field-editor {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-field-readonly .g-field-editor {
    cursor: default;
    /*** 以上請勿變更 ***/
}

.g-field-red {
    color: red !important;
    font-weight: 800;
    /*** 以上請勿變更 ***/
}

/********************************************************************/
.g-field-editor.g-field-useClear {
    padding-right: 18px;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.UrlField
************************************/
.g-urlField {
    /*** 以上請勿變更 ***/
}

    .g-urlField .g-field-action {
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
        background-position: center center;
        /*** 以上請勿變更 ***/
    }

    .g-urlField .g-field-clear {
        padding-right: 10px;
        /*** 以上請勿變更 ***/
    }
/************************************
GD.Field.EmailField
************************************/
.g-emailField {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.PasswordField
************************************/
.g-passwordField {
    /*** 以上請勿變更 ***/
}
/************************************
GD.Field.NumericField
************************************/
.g-numericField {
    /*** 以上請勿變更 ***/
}

    .g-numericField .g-field-editor {
        padding-left: 20px;
        padding-right: 20px;
        /*** 以上請勿變更 ***/
    }

    .g-numericField input::-webkit-outer-spin-button,
    .g-numericField input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
        /*** 以上請勿變更 ***/
    }

    .g-numericField .g-field-upper,
    .g-numericField .g-field-lower {
        position: absolute;
        display: block;
        width: 32px;
        height: 32px;
        background: url(../images/spinner.png) no-repeat;
        background-size: 128px 32px;
        cursor: pointer;
        /*** 以上請勿變更 ***/
    }

.g-field-small.g-numericField .g-field-upper,
.g-field-small.g-numericField .g-field-lower {
    width: 20px;
    height: 20px;
    background: url(../images/spinner.png) no-repeat;
    background-size: 80px 20px;
    /*** 以上請勿變更 ***/
}

.g-numericField .g-field-upper,
.g-field-small.g-numericField .g-field-upper {
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

    .g-numericField .g-field-upper:hover {
        background-position: -64px 0px;
        /*** 以上請勿變更 ***/
    }

    .g-field-small.g-numericField .g-field-upper:hover {
        background-position: -40px 0px;
        /*** 以上請勿變更 ***/
    }

.g-numericField .g-field-lower {
    background-position: -32px 0px;
    /*** 以上請勿變更 ***/
}

.g-field-small.g-numericField .g-field-lower {
    background-position: -20px 0px;
    /*** 以上請勿變更 ***/
}

.g-numericField .g-field-lower:hover {
    background-position: -96px 0px;
    /*** 以上請勿變更 ***/
}

.g-field-small.g-numericField .g-field-lower:hover {
    background-position: -60px 0px;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.SearchField
************************************/
.g-searchField {
    /*** 以上請勿變更 ***/
}

    .g-searchField input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.Field.DateField
************************************/
.g-dateField {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.DatetimeField
************************************/
.g-datetimeField {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.TextareaField
************************************/
.g-textareaField {
    /*** 以上請勿變更 ***/
}

    .g-textareaField textarea {
        resize: none;
        overflow: auto;
        /*** 以上請勿變更 ***/
    }

    .g-textareaField .g-field-text {
        white-space: pre-wrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-wrap: break-word;
        /*** 以上請勿變更 ***/
        padding-left: 3px;
    }

        .g-textareaField .g-field-text:hover {
            /*** 以上請勿變更 ***/
            cursor: pointer;
        }

/************************************
GD.Field.CheckboxField
************************************/
.g-checkboxField {
    /*** 以上請勿變更 ***/
}

    .g-checkboxField .g-field-editor {
        width: 32px !important;
        height: 32px !important;
        background: url(../images/checkbox.png) no-repeat;
        background-size: 128px 32px;
        background-position: 0px 0px;
        cursor: url(../images/checkbox-cursor.png),auto;
        /*** 以上請勿變更 ***/
    }

        .g-checkboxField .g-field-editor.g-field-checked {
            background-position: -32px 0px !important;
        }

.g-field-readonly.g-checkboxField .g-field-editor {
    /*** 以上請勿變更 ***/
    background-position: -64px 0px !important;
    cursor: default;
}

    .g-field-readonly.g-checkboxField .g-field-editor.g-field-checked {
        /*** 以上請勿變更 ***/
        background-position: -96px 0px !important;
        cursor: default;
    }

.g-field-small.g-checkboxField .g-field-editor {
    width: 20px !important;
    height: 20px !important;
    background-size: 80px 20px;
    /*** 以上請勿變更 ***/
}

    .g-field-small.g-checkboxField .g-field-editor.g-field-checked {
        background-position: -20px 0px !important;
        /*** 以上請勿變更 ***/
    }

.g-field-small.g-field-readonly.g-checkboxField .g-field-editor {
    background-position: -40px 0px !important;
    cursor: default;
    /*** 以上請勿變更 ***/
}

    .g-field-small.g-field-readonly.g-checkboxField .g-field-editor.g-field-checked {
        background-position: -60px 0px !important;
        cursor: default;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.Field.ToggleField
************************************/
.g-toggleField {
    /*** 以上請勿變更 ***/
}

    .g-toggleField .g-field-editor {
        width: 64px !important;
        height: 32px !important;
        background: url(../images/toggleSwitch.png) no-repeat;
        background-size: 256px 32px;
        background-position: 0px 0px;
        cursor: pointer;
        /*** 以上請勿變更 ***/
    }

        .g-toggleField .g-field-editor.g-field-toggleOn {
            background-position: -64px 0px !important;
        }

.g-field-readonly.g-toggleField .g-field-editor {
    background-position: -128px 0px !important;
    cursor: default;
    /*** 以上請勿變更 ***/
}

    .g-field-readonly.g-toggleField .g-field-editor.g-field-toggleOn {
        background-position: -192px 0px !important;
        cursor: default;
        /*** 以上請勿變更 ***/
    }

.g-field-small.g-toggleField .g-field-editor {
    width: 40px !important;
    height: 20px !important;
    background-size: 160px 20px;
    background-position: 0px 0px !important;
    /*** 以上請勿變更 ***/
}

    .g-field-small.g-toggleField .g-field-editor.g-field-toggleOn {
        background-position: -40px 0px !important;
        /*** 以上請勿變更 ***/
    }

.g-field-small.g-field-readonly.g-toggleField .g-field-editor {
    background-position: -80px 0px !important;
    cursor: default;
    /*** 以上請勿變更 ***/
}

    .g-field-small.g-field-readonly.g-toggleField .g-field-editor.g-field-toggleOn {
        background-position: -120px 0px !important;
        cursor: default;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.Field.SliderField
************************************/
.g-sliderField {
    /*** 以上請勿變更 ***/
}

    .g-sliderField .g-field-editor {
        height: 32px !important;
        /*** 以上請勿變更 ***/
    }

.g-field-sliderbar {
    position: absolute;
    display: block;
    overflow: hidden;
    border: 1px solid darkgray;
    border-radius: 5px;
    height: 10px !important;
    width: 100%;
    top: 11px;
    /*** 以上請勿變更 ***/
    background-color: lightgray;
}

.g-field-sliderball {
    position: absolute;
    display: block;
    border: 1px solid darkgray;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    top: 4px;
    text-align: center;
    font-size: 9px;
    /*** 以上請勿變更 ***/
    background-color: #82c300;
    cursor: pointer;
}

.g-field-readonly .g-field-sliderball {
    cursor: default;
    background-color: #ffffff;
    /*** 以上請勿變更 ***/
}

.g-field-readonly .g-field-dataCell {
    background-color: #fafafa;
}

.g-field-checkPhone {
    position: absolute;
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

.g-field-checkPhone {
    width: 32px;
    height: 32px;
    background-size: auto 32px;
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

.g-field-small .g-field-checkPhone {
    width: 20px;
    height: 20px;
    background-size: auto 20px;
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.MultiLangField
************************************/
.g-multiLangField .g-field-editor {
    padding-left: 5px;
}

.g-multiLangField .g-field-text {
    padding-left: 5px;
}

.g-field-lang {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: 0px center;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
}

.g-field-small .g-field-lang {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    background-position: 0px center;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.PhotoField
************************************/
.g-photoField {
    /*** 以上請勿變更 ***/
}

    .g-photoField .g-field-editor {
        display: inline-block;
        width: auto;
        /*** 以上請勿變更 ***/
    }

    .g-photoField .g-field-text {
        height: 150px;
        /*** 以上請勿變更 ***/
    }

    .g-photoField .g-field-clear {
        width: 32px;
        height: 37px;
        background: url(../images/delete.png) no-repeat;
        background-size: 64px 32px;
        background-position: 0px 5px;
        position: relative;
        cursor: pointer;
        padding-top: 5px;
        /*** 以上請勿變更 ***/
    }

    .g-photoField .g-field-upload {
        width: 32px;
        height: 37px;
        background: url(../images/addNew.png) no-repeat;
        background-size: 64px 32px;
        background-position: 0px 0px;
        position: relative;
        cursor: pointer;
        padding-bottom: 5px;
        /*** 以上請勿變更 ***/
    }

    .g-photoField .g-field-rotate {
        width: 32px;
        height: 42px;
        background: url(../images/rotate.png) no-repeat;
        background-size: 64px 32px;
        background-position: 0px 0px;
        position: relative;
        cursor: pointer;
        padding-bottom: 10px;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.Field.SignFieldAndScore
************************************/
.g-SignFieldAndScore {
    /*** 以上請勿變更 ***/
}

    .g-SignFieldAndScore .g-field-editor {
        display: inline-block;
        width: auto;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-text {
        height: 150px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-clear {
        width: 32px;
        height: 37px;
        background: url(../images/delete.png) no-repeat;
        background-size: 64px 32px;
        background-position: 0px 5px;
        position: relative;
        cursor: pointer;
        padding-top: 5px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-upload {
        width: 32px;
        height: 37px;
        background: url(../images/addNew.png) no-repeat;
        background-size: 64px 32px;
        background-position: 0px 0px;
        position: relative;
        cursor: pointer;
        padding-bottom: 5px;
        /*** 以上請勿變更 ***/
    }


    .g-SignFieldAndScore .g-field-score {
        height: 32px !important;
        width: 100% !important;
        position: absolute;
        display: block;
        bottom: 0px;
        left: 0px;
        left: 20%;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreText {
        height: 20px !important;
        width: 100% !important;
        position: absolute;
        display: block;
        bottom: 32px;
        left: 0px;
        left: 25%;
        /*** 以上請勿變更 ***/
    }


    .g-SignFieldAndScore .g-field-scoreValue {
        height: 32px !important;
        width: 32px !important;
        background: url(../images/SignFieldAndScore.png) no-repeat;
        background-position: 0px 0px;
        background-size: 128px 32px;
        cursor: default;
        position: absolute;
        display: block;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue-checked {
        background-position: -32px 0px !important;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue1 {
        left: 0px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue2 {
        left: 32px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue3 {
        left: 64px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue4 {
        left: 96px;
        /*** 以上請勿變更 ***/
    }

    .g-SignFieldAndScore .g-field-scoreValue5 {
        left: 128px;
        /*** 以上請勿變更 ***/
    }

.g-field-readonly.g-SignFieldAndScore .g-field-scoreValue {
    /*** 以上請勿變更 ***/
    background-position: -64px 0px !important;
    cursor: default;
}

.g-field-readonly.g-SignFieldAndScore .g-field-scoreValue-checked {
    /*** 以上請勿變更 ***/
    background-position: -96px 0px !important;
    cursor: default;
}


/*.g-field-readonly.g-toggleField .g-field-editor {
    background-position: -128px 0px !important;
    cursor: default;*/
/*** 以上請勿變更 ***/
/*}*/



/************************************
GD.Field.AddressField
************************************/
.g-addressField .g-field-action {
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    background-position: center center;
    /*** 以上請勿變更 ***/
}

.g-addressField .g-field-clear {
    padding-right: 10px;
    /*** 以上請勿變更 ***/
}

.g-addressField .g-field-text:hover {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}


.g-field-checkAddress {
    position: absolute;
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

.g-field-checkAddress {
    width: 32px;
    height: 32px;
    background-size: auto 32px;
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

.g-field-small .g-field-checkAddress {
    width: 20px;
    height: 20px;
    background-size: auto 20px;
    background-position: 0px 0px;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.PhoneField
************************************/
.g-PhoneField .g-field-clear {
    padding-right: 10px;
    /*** 以上請勿變更 ***/
}

.g-field-editOnlyByCheckPhone {
    background-color: #f2f2f2 !important;
    color: black !important;
}

/************************************
GD.Field.PhoneExtField
************************************/
.g-PhoneExtField .g-field-clear {
    padding-right: 10px;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.RadioField
************************************/
.g-radioField .g-field-editor {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-radioField.g-field-readonly .g-field-editor {
    cursor: default;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.SelectField
************************************/
.g-selectField .g-field-editor {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-selectField.g-field-readonly .g-field-editor {
    cursor: default;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Field.FileField
************************************/
.g-fileField .g-field-editor {
    width: auto;
    min-width: 64px;
    height: 32px;
    /*** 以上請勿變更 ***/
}

.g-fileField .g-field-text {
    width: 200px;
}

.g-fileField .g-field-clear {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../images/delete.png) no-repeat;
    background-size: 64px 32px;
    background-position: 0px 0px;
    position: absolute;
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-fileField .g-field-upload {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../images/addNew.png) no-repeat;
    background-size: 64px 32px;
    background-position: 0px 0px;
    position: absolute;
    cursor: pointer;
    /*** 以上請勿變更 ***/
}
/************************************
GD.Field.ZipCodeField
************************************/
.g-zipcodeField {
    /*** 以上請勿變更 ***/
}

    .g-zipcodeField .g-field-action {
        width: 32px;
        height: 32px;
        background-size: 32px 32px;
        background-position: center center;
        /*** 以上請勿變更 ***/
    }

    .g-zipcodeField .g-field-clear {
        padding-right: 10px;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.Panel.Sheet
************************************/

.g-sheet {
    /*** 以上請勿變更 ***/
    border: 1px solid black;
    padding: 0px;
    opacity: 1;
    background-color: white;
}

    .g-sheet > .g-comp-body {
        /*** 以上請勿變更 ***/
    }

.g-sheet-titleBar {
    /*** 以上請勿變更 ***/
    background-color: #6a992b;
    color: white;
    font-weight: bold;
}

    .g-sheet-titleBar.g-draggable * {
        /*** 以上請勿變更 ***/
        cursor: move;
    }

.g-sheet-titleIcon {
    /*** 以上請勿變更 ***/
    background-image: url(../images/titleDot.png);
    background-repeat: no-repeat;
    background-size: 7px 24px;
}

.g-sheet-titleText .g-comp-html {
    /*** 以上請勿變更 ***/
    font-size: 15px;
    line-height: 15px;
}

.g-sheet-titleText .g-comp-body {
    /*** 以上請勿變更 ***/
    padding: 2px;
    line-height: 1em;
}

/************************************
GD.Panel.ActionSheet
************************************/
.g-actionSheet {
    /*** 以上請勿變更 ***/
}

/************************************
GD.Panel.MessageBox
************************************/
.g-msgbox {
    /*** 以上請勿變更 ***/
    border-color: #6a992b;
    border-width: 5px;
    border-style: solid;
}

    .g-msgbox .g-comp-content {
        /*** 以上請勿變更 ***/
    }

    .g-msgbox > .g-comp-body {
        padding-top: 18px;
        padding-right: 18px;
        padding-bottom: 18px;
        /*** 以上請勿變更 ***/
    }

.g-msgbox-buttonComp {
    /*** 以上請勿變更 ***/
    background-color: #DFEAF2;
}

    .g-msgbox-buttonComp .g-button-body {
        padding: 8px;
        /*** 以上請勿變更 ***/
        background-color: #DFEAF2;
    }

    .g-msgbox-buttonComp .g-button-text {
        /*** 以上請勿變更 ***/
        min-width: 50px;
    }

.g-msgbox-iconComp {
    padding: 5px;
    /*** 以上請勿變更 ***/
}

    .g-msgbox-iconComp .g-comp-body {
        padding-left: 10px;
        padding-top: 10px;
        /*** 以上請勿變更 ***/
    }

    .g-msgbox-iconComp .g-comp-html {
        border: 0px;
        background-size: auto 100%;
        /*** 以上請勿變更 ***/
    }

/************************************
GD.List.BaseList
************************************/
.g-list {
    /*** 以上請勿變更 ***/
}

.g-list-body {
    display: block;
    /*** 以上請勿變更 ***/
}

.g-list-multiSelection {
    /*** 以上請勿變更 ***/
}

.g-list-emptyNotice {
    display: block;
    /*** 以上請勿變更 ***/
    padding: 5px;
    text-align: center;
}

/************************************
GD.List.BaseItem
************************************/
.g-listItem {
    display: block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 0px !important;
    /*** 以上請勿變更 ***/
    background-color: #FFFFF8;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}

.g-list .g-listItem:first-child {
    /*** 以上請勿變更 ***/
    border-top: 1px solid lightgray;
}

.g-listItem-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    white-space: normal;
    width: 100%;
    height: 100%;
    /*** 以上請勿變更 ***/
    padding: 3px;
    cursor: pointer;
}

    .g-listItem-text * {
        /*** 以上請勿變更 ***/
        cursor: pointer;
    }

.g-listItem-rightIcon,
.g-listItem-leftIcon {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
    cursor: pointer;
}

/**************************************************************************************/
.g-listItem-selected {
    /*** 以上請勿變更 ***/
    background-color: #FFFFCC;
}

.g-listItem-leftIcon.g-listItem-userActionType {
    /*** 以上請勿變更 ***/
    background-size: auto 32px;
    background-position: 0px 0px;
}

.g-listItem-selected .g-listItem-leftIcon.g-listItem-userActionType {
    /*** 以上請勿變更 ***/
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-listItem-leftIcon.g-listItem-actionType-select,
.g-listItem-rightIcon.g-listItem-actionType-select {
    /*** 以上請勿變更 ***/
    background-image: url(../images/radiobox.png);
    background-size: 128px 32px;
    background-position: 0px 0px;
}

.g-listItem-selected .g-listItem-leftIcon.g-listItem-actionType-select,
.g-listItem-selected .g-listItem-rightIcon.g-listItem-actionType-select {
    /*** 以上請勿變更 ***/
    background-position: -32px 0px;
}

.g-list-multiSelection .g-listItem-leftIcon.g-listItem-actionType-select,
.g-list-multiSelection .g-listItem-rightIcon.g-listItem-actionType-select {
    /*** 以上請勿變更 ***/
    cursor: url(../images/checkbox-cursor.png),auto;
    background-image: url(../images/checkbox.png);
    background-size: 128px 32px;
    background-position: -64px 0px;
}

.g-list-multiSelection .g-listItem-selected .g-listItem-leftIcon.g-listItem-actionType-select,
.g-list-multiSelection .g-listItem-selected .g-listItem-rightIcon.g-listItem-actionType-select {
    /*** 以上請勿變更 ***/
    background-position: -32px 0px;
}

.g-listItem-leftIcon.g-listItem-actionType-pinned,
.g-listItem-rightIcon.g-listItem-actionType-pinned {
    /*** 以上請勿變更 ***/
    background-image: url(../images/pin.png);
    background-size: 64px 32px;
    background-position: 0px 0px;
}

.g-listItem-pinned .g-listItem-leftIcon.g-listItem-actionType-pinned,
.g-listItem-pinned .g-listItem-rightIcon.g-listItem-actionType-pinned {
    /*** 以上請勿變更 ***/
    background-position: -32px 0px;
}

.g-listItem-leftIcon.g-listItem-actionType-remove,
.g-listItem-rightIcon.g-listItem-actionType-remove {
    /*** 以上請勿變更 ***/
    background-image: url(../images/prohibit.png);
    background-size: 32px 32px;
    background-position: 0px 0px;
}

.g-listItem-leftIcon.g-listItem-actionType-tap,
.g-listItem-rightIcon.g-listItem-actionType-tap,
.g-listItem-leftIcon.g-listItem-actionType-other,
.g-listItem-rightIcon.g-listItem-actionType-other {
    /*** 以上請勿變更 ***/
    background-image: url(../images/more.png);
    background-size: 20px 32px;
    background-position: 3px 0px;
}

.g-listItem-selected .g-listItem-leftIcon.g-icon-select,
.g-list-multiSelection .g-listItem-selected .g-listItem-rightIcon.g-icon-select {
    background-position: -32px 0px;
}
/**************************************************************************************/

.g-listItem-text.g-listItem-useLeftIcon {
    width: calc(100% - 32px); /* 減去 g-listItem-leftIcon 指定的 outerWidth */
    /*** 以上請勿變更 ***/
}

.g-listItem-text.g-listItem-useRightIcon {
    width: calc(100% - 32px); /* 減去 g-listItem-rightIcon 指定的 outerWidth */
    /*** 以上請勿變更 ***/
}

    .g-listItem-text.g-listItem-useRightIcon.g-listItem-useLeftIcon {
        width: calc(100% - 64px); /* 減去 g-listItem-leftIcon 及 g-listItem-rightIcon 指定的 outerWidth */
        /*** 以上請勿變更 ***/
    }


/**************************************************************************************/
.g-listItem-leftPanel,
.g-listItem-rightPanel {
    display: inline-block;
    position: absolute;
    height: 100%;
    top: 0px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    color: white;
    background-color: #87b24e;
    border: 1px solid #818d6b;
    text-align: center;
    font-weight: bold;
}

    .g-listItem-leftPanel *,
    .g-listItem-rightPanel * {
        /*** 以上請勿變更 ***/
        cursor: pointer;
        font-weight: bold;
        white-space: normal;
    }

.g-listItem-leftPanel {
    left: 0px;
    /*** 以上請勿變更 ***/
}

.g-listItem-rightPanel {
    right: 0px;
    /*** 以上請勿變更 ***/
}

.g-listItem-panelText {
    /*** 以上請勿變更 ***/
}

.g-listItem-rightPanel.g-listItem-removePanel,
.g-listItem-leftPanel.g-listItem-removePanel {
    /*** 以上請勿變更 ***/
    background-color: red;
    border: 1px solid darkred;
}

.g-listItem-pinned {
    /*** 以上請勿變更 ***/
    background-color: #ffdddd;
}

/**************************************************************************************/
.g-listItem-text span.g-fieldValue {
    /*** 以上請勿變更 ***/
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
}

.g-listItem-text .fld-keyValue {
}

.g-listItem-active {
    /*** 以上請勿變更 ***/
    background-color: #EFFDED;
}

    /****************************** 現行且釘選時顏色[紫色]*********************************/
    .g-listItem-active.g-listItem-pinned {
        /*** 以上請勿變更 ***/
        background-color: #D8BFD8;
    }

    /****************************** 現行且選擇時顏色[綠色]*********************************/
    .g-listItem-active.g-listItem-selected {
        /*** 以上請勿變更 ***/
        background-color: #C8EEC8;
    }

/****************************** 釘選且選擇時顏色[橙色]*********************************/
.g-listItem-selected.g-listItem-pinned {
    /*** 以上請勿變更 ***/
    background-color: #FFDEAD;
}

.g-listItem.g-listItem-delete {
    /*** 以上請勿變更 ***/
    background-color: #D3D3D3;
}

    .g-listItem.g-listItem-delete > .g-listItem-leftIcon {
        /*** 以上請勿變更 ***/
        background-image: url(../images/delete.png);
        background-size: auto 32px;
        background-position: 0px 0px;
        cursor: default;
        background-color: #D3D3D3;
    }
/****************************** 釘選，現行且選擇時顏色[灰綠色] #E0EEE0 *********************************/
.g-listItem-selected.g-listItem-pinned.g-listItem-active {
    /*** 以上請勿變更 ***/
    background-color: #E0EEE0;
}

.g-listItem.g-listItem-selected.g-listItem-delete > .g-listItem-leftIcon {
    /*** 以上請勿變更 ***/
    background-image: url(../images/delete.png);
    background-size: auto 32px;
    background-position: 0px 0px;
    cursor: default;
    background-color: #D3D3D3;
}

.g-listItem.g-listItem-delete > .g-listItem-rightIcon {
    /*** 以上請勿變更 ***/
    background: none;
    cursor: default;
}

.g-field-text .g-listItem {
    /*** 以上請勿變更 ***/
    background-color: #F2F2F2;
}

.g-field-editor .g-listItem {
    /*** 以上請勿變更 ***/
    border-bottom: 0;
}

.g-field-editor.g-list .g-listItem:last-child {
    /*** 以上請勿變更 ***/
    border-bottom: 1px solid lightgray;
}

.g-field-text .g-listItem {
    /*** 以上請勿變更 ***/
    border-bottom: 0;
}

.g-field-text.g-list .g-listItem:last-child {
    /*** 以上請勿變更 ***/
    border-bottom: 1px solid lightgray;
}


.g-model-WebPortal-view .g-listItem {
    text-align: center;
    border-radius: 10px;
    margin-top: 5px !important;
    border: 1px solid darkgray;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #e5e5e5 5%, #cccccc 95%, #d9d9d9 100%);
    background: -webkit-linear-gradient(top, #f2f2f2 0%, #e5e5e5 5%, #cccccc 95%, #d9d9d9 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%, #e5e5e5 5%, #cccccc 95%, #d9d9d9 100%);
    background: -ms-linear-gradient(top,#f2f2f2 0%, #e5e5e5 5%, #cccccc 95%, #d9d9d9 100%);
}

.g-model-WebPortal-view .g-listItem-active {
    /*** 以上請勿變更 ***/
    background: -moz-linear-gradient(top, #9a9a9a 0%, #ababab 30%, #b8b8b8 65%, #c4c4c4 100%);
    background: -webkit-linear-gradient(top,#9a9a9a 0%, #ababab 30%, #b8b8b8 65%, #c4c4c4 100%);
    background: -o-linear-gradient(top, #9a9a9a 0%, #ababab 30%, #b8b8b8 65%, #c4c4c4 100%);
    background: -ms-linear-gradient(top,#9a9a9a 0%, #ababab 30%, #b8b8b8 65%, #c4c4c4 100%);
}

/************************************
GD.List.ListHeader
************************************/
.g-listHeader {
    /*** 以上請勿變更 ***/
    background-color: whitesmoke;
}

.g-listHeader-select {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-image: url(../images/selectAll.png);
    background-size: auto 32px;
    background-position: -32px 0px;
    /*** 以上請勿變更 ***/
    cursor: url(../images/checkbox-cursor.png),auto;
}

.g-icon-listHeader-rightIcon {
    background-image: url(../images/orderBy.png);
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-icon-listHeader-rightIconTwo {
    background-image: url(../images/orderBy.png);
    background-size: auto 32px;
    background-position: -64px 0px;
}

.g-listHeader-text {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    white-space: normal;
    padding: 3px;
    /*** 以上請勿變更 ***/
}

.g-listHeader-fieldTitle {
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 10px;
    text-align: left !important;
    /*** 以上請勿變更 ***/
    border: 1px dotted gray;
}

.g-listHeader-editorMode .g-listHeader-text {
    width: calc(100% - 64px);
    /*** 以上請勿變更 ***/
}

.g-listHeader-selectAll .g-listHeader-select {
    background-position: 0px 0px;
}

/************************************
GD.List.List2
************************************/
.g-list2 {
    /*** 以上請勿變更 ***/
}

.g-list2-body {
    display: block;
    /*** 以上請勿變更 ***/
    border: 1px solid lightgray;
}

.g-list2-Item {
    display: block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    margin: 0px !important;
    /*** 以上請勿變更 ***/
    padding: 5px 3px 5px 3px;
    background-color: #FFFFF8;
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}

.g-list2-Item-selected {
    /*** 以上請勿變更 ***/
    background-color: #FFFFCC;
    color: blue;
}
.g-list-priority .g-listItem-pinned {
    background-color: #FFFFF8 !important;
}
.g-list-priority .g-listItem-active.g-listItem-pinned {
    /*** 以上請勿變更 ***/
    background-color: #EFFDED !important;
}
/************************************
GD.Grid.BaseGrid
************************************/
.g-gridHeader {
    position: relative;
    /*** 以上請勿變更 ***/
}

.g-grid > .g-grid-body > .g-comp-content,
.g-grid > .g-grid-body > .g-scroller > .g-comp-content {
    display: inline-block;
    /*** 以上請勿變更 ***/
    /*background-color: WhiteSmoke;*/
    border: 1px solid lightgray;
    /*border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;*/
}

.g-gridHeaderItem {
    display: inline-block;
    position: relative;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: top;
    /*** 以上請勿變更 ***/
    background-color: WhiteSmoke;
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    border-top: 1px solid lightgray;
}

    .g-gridHeaderItem:nth-child(1) {
        /*** 以上請勿變更 ***/
        border-left: 1px solid lightgray;
    }

/* 標題內容及動作 */
.g-gridHeaderItem-content {
    position: relative;
    white-space: nowrap;
    vertical-align: top;
    line-height: 36px;
    /*** 以上請勿變更 ***/
}

.g-gridHeaderItem-action {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    width: 28px;
    height: 34px;
    padding: 5px 2px;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    background: url(../images/GridHeaderAction.png) no-repeat;
    background-size: auto 24px;
    background-position: 0px 0px;
    background-origin: content-box;
}

.g-gridHeaderItem-no-action {
    position: relative;
    display: inline-block;
    width: 1px;
    height: 34px;
    /*** 解決在IOS手機排版問題 ***/
}

.g-gridHeaderItem-sort-ASC {
    background-position: -24px 0px;
}

.g-gridHeaderItem-sort-DESC {
    background-position: -48px 0px;
}

.g-gridItem {
    /*** 以上請勿變更 ***/
    background-color: #FFFFF8;
}

.g-gridContent {
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
    line-height: 29px;
    padding: 3px;
    /*** 以上請勿變更 ***/
    border-right: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    vertical-align: text-top;
}

    .g-gridContent:nth-child(1) {
        /*** 以上請勿變更 ***/
        border-left: 1px solid lightgray;
    }

.g-gridContent-align-left {
    text-align: left;
}

.g-gridContent-align-center {
    text-align: center;
}

.g-gridContent-align-right {
    text-align: right;
}

.g-list-emptyNotice {
    display: block;
    /*** 以上請勿變更 ***/
    padding: 5px;
    text-align: center;
}

.g-gridCheckbox {
    /*** 以上請勿變更 ***/
    background: url(../images/checkbox.png) no-repeat;
    background-size: auto 32px;
    background-position: -64px 0px;
    cursor: url(../images/checkbox-cursor.png),auto;
    background-color: WhiteSmoke;
}

.g-gridItem.g-gridItem-selected > .g-gridCheckbox {
    background-position: -32px 0px;
    background-color: #ffffcc;
}

.g-gridItem.g-gridItem-pinned > .g-gridCheckbox {
    background-color: mistyrose;
}

.g-grid-proxy {
    position: absolute;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    background: white;
    border: 1px groove lightgray;
}

.g-grid-proxy-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: auto 20px;
    background-position: -20px 0px;
    /*** 以上請勿變更 ***/
    background-image: url(../images/gridDrag.png);
}

.g-grid-proxy-insert > .g-grid-proxy-icon {
    background-position: 0px 0px;
}

.g-grid-proxy-text {
    display: inline-block;
    vertical-align: middle;
    /*** 以上請勿變更 ***/
}

.g-gridHeaderItem-dir-top {
    position: absolute;
    width: 11px;
    height: 10px;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    background-image: url(../images/gridDirTop.png);
}

.g-gridHeaderItem-dir-bottom {
    position: absolute;
    width: 11px;
    height: 10px;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    background-image: url(../images/gridDirBottom.png);
}

.g-rowIndex {
    background-color: WhiteSmoke;
    text-align: center;
    /*** 以上請勿變更 ***/
}

.g-gridHeaderItem.fld-rowIndex.g-gridView {
    background-size: auto 36px;
    background-position: 0px 0px;
    background-image: url(../images/view.png);
    background-repeat: no-repeat;
}

    .g-gridHeaderItem.fld-rowIndex.g-gridView > .g-gridHeaderItem-rowIndex {
        cursor: pointer;
    }

.g-gridHeaderItem-rowIndex {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    width: 28px;
    height: 34px;
    margin-left: 4px;
    margin-right: 4px;
}

.g-gridHeaderItem-checkbox {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
    width: 32px;
    height: 32px;
    margin: 1px 1px;
    cursor: url(../images/checkbox-cursor.png),auto;
    background: url(../images/selectAll.png) no-repeat;
    background-size: auto 32px;
    background-position: -32px 0px;
}

.g-gridItem-selectAll > .g-gridHeaderItem-checkbox {
    background-position: 0px 0px;
}

.g-gridItem-selected {
    /*** 以上請勿變更 ***/
    background-color: #FFFFCC;
}

    .g-gridItem-selected > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: #FFFFCC;
    }

.g-gridItem-active {
    /*** 以上請勿變更 ***/
    background-color: #EFFDED;
}

    .g-gridItem-active > .g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background-color: #EFFDED;
    }

    .g-gridItem-active > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: #EFFDED;
    }

.g-gridItem-pinned {
    /*** 以上請勿變更 ***/
    position: relative;
    background-color: MistyRose;
}

    .g-gridItem-pinned > .g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background-color: MistyRose;
    }

    .g-gridItem-pinned > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: MistyRose;
    }

.g-gridItem > .g-gridCheckbox {
    width: 36px;
}

.g-gridHeadItem-pinned {
    /*** 以上請勿變更 ***/
    background-color: PaleGoldenRod;
}

.g-gridHeaderItemPinnedCursor, .g-rowIndexPinnedCursor {
    cursor: url(../images/pin-cursor.png),auto;
}

/****************************** 現行且釘選時顏色[紫色]*********************************/
.g-gridItem-active.g-gridItem-pinned {
    /*** 以上請勿變更 ***/
    background-color: #D8BFD8;
}

    .g-gridItem-active.g-gridItem-pinned > .g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background-color: #D8BFD8;
    }

    .g-gridItem-active.g-gridItem-pinned > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: #D8BFD8;
    }

/****************************** 現行且選擇時顏色[綠色]*********************************/
.g-gridItem-active.g-gridItem-selected {
    /*** 以上請勿變更 ***/
    background-color: #C8EEC8;
}

    .g-gridItem-active.g-gridItem-selected > .g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background-color: #C8EEC8;
    }

    .g-gridItem-active.g-gridItem-selected > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: #C8EEC8;
    }

/****************************** 釘選且選擇時顏色[橙色]*********************************/
.g-gridItem-pinned.g-gridItem-selected {
    /*** 以上請勿變更 ***/
    background-color: #FFDEAD;
}

    .g-gridItem-pinned.g-gridItem-selected > .g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background-color: #FFDEAD;
    }

    .g-gridItem-pinned.g-gridItem-selected > .g-rowIndex {
        /*** 以上請勿變更 ***/
        background-color: #FFDEAD;
    }

.g-gridItem-delete > .g-gridContent {
    /*** 以上請勿變更 ***/
    background-color: #D3D3D3;
}

    .g-gridItem-delete > .g-gridContent.g-rowIndex {
        /*** 以上請勿變更 ***/
        cursor: default;
    }

    .g-gridItem-delete > .g-gridContent.g-gridCheckbox {
        /*** 以上請勿變更 ***/
        background: url(../images/delete.png) no-repeat;
        background-size: auto 32px;
        background-position: 0px 0px;
        cursor: default;
        background-color: #D3D3D3;
    }

/************************************
GD.Grid.LayoutViewBuilder
************************************/
.g-LayoutViewBuilder .g-sheet-titleText.g-draggable * {
    /*** 以上請勿變更 ***/
    cursor: move;
}

.g-LayoutViewBuilder .g-comp-body > .g-list .g-listItem > .g-listItem-text > .g-fieldValue {
    display: block;
}

.g-LayoutViewBuilderSelectAll {
    /*** 以上請勿變更 ***/
    width: 32px;
    height: 32px;
}

    .g-LayoutViewBuilderSelectAll .g-button-body {
        padding: 0px;
        /*** 以上請勿變更 ***/
    }

.g-gridItem-multiLine {
    height: auto !important;
}

.g-gridContent-multiLine {
    white-space: pre-wrap;
}

.g-gridItem .fld-keyValue {
}

/************************************
GD.CompLib.IndexBar
************************************/
.g-indexbar {
    position: absolute;
    display: block;
    border-radius: 15px;
    /*** 以上請勿變更 ***/
    background-color: black;
    color: white;
    opacity: 0.05;
}

.g-indexbar-active,
.g-indexbar:hover {
    opacity: 0.5;
    /*** 以上請勿變更 ***/
}

.g-indexbar-item {
    position: absolute;
    font-size: 14px;
    text-align: center;
    /*** 以上請勿變更 ***/
    cursor: pointer;
    font-weight: bold;
}

.g-indexbar-item-horizontal{
    display: inline-block;
    /*** 以上請勿變更 ***/
    line-height:30px;
}

.g-indexbar-tip {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 14px;
    font-size: 18px;
    text-align: center;
    padding: 6px;
    opacity: 0.8;
    /*** 以上請勿變更 ***/
    background-color: black;
    color: white;
}

/* -------------------------------------------------------------------------------------------------------- */
/*  g-picker                                                                                                */
/* -------------------------------------------------------------------------------------------------------- */
.g-picker {
    /*** 以上請勿變更 ***/
}

    .g-picker > .g-comp-body {
        border: 10px solid #6a992b;
        background-color: #6a992b;
        /*** 以上請勿變更 ***/
    }

.g-picker-item {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    padding: 0px 3px;
    overflow: hidden;
    white-space: nowrap;
    /*** 以上請勿變更 ***/
}

.g-picker-bar {
    display: block;
    position: relative;
    width: 100%;
    height: 40px;
    opacity: 0.3;
    /*** 以上請勿變更 ***/
    background-color: #78af47;
    border-top: 1px solid #6b9644;
    border-bottom: 1px solid #5f7d45;
}


.g-pickerSlot {
    background-color: white;
    border: 1px solid #90b172;
    /*** 以上請勿變更 ***/
}

.g-pickerSlot-title {
    color: white;
    padding: 9px 4px;
    overflow: hidden;
    text-align: center;
    background-color: #90b172;
    /*** 以上請勿變更 ***/
}

.g-picker-right {
    text-align: right;
    /*** 以上請勿變更 ***/
}

.g-picker-center {
    text-align: center;
    /*** 以上請勿變更 ***/
}

.g-picker-left {
    text-align: left;
    /*** 以上請勿變更 ***/
}

/************************************
GD.Chart.BaseChart
************************************/
.g-chart 
{
    position: relative;
    display: inline-block;
    /*** 以上請勿變更 ***/
}

.g-chart-toolbar {
    display: block;
    /*** 以上請勿變更 ***/
}

.g-chart-body {
    position: relative;
    display: block;
    overflow: hidden;
    /*** 以上請勿變更 ***/
}

.g-chart-background,
.g-chart-canvas,
.g-chart-overlay,
.g-chart-focus,
.g-chart-temp-canvas {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    /*** 以上請勿變更 ***/
}

.g-chart-data {
    background-color: white;   
    border: 1px solid red; 
    overflow: hidden;
}

.g-chart-table {
    margin: 5px;
    border-collapse: collapse;
    border: 1px solid black;    
}

.g-chart-tr th {
    background-color: lightgray; 
}

.g-chart-td:first-child {
    background-color: lightgray; 
}

.g-chart-td {
    border: 1px solid black;   
    padding:3px; 
}

/************************************
GD.Anim.FlipAnim
************************************/

.g-anim-flip {
    perspective: 2500px;
    -webkit-perspective: 2500px;
    -moz-perspective: 2500px;
    -ms-perspective: 2500px;
    -o-perspective: 2500px;
    overflow: visible !important;
}

.g-anim-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    /*** 以上請勿變更 ***/
}

/* -------------------------------------------------------------------------------------------------------- */
/*  g-calendar                                                                                                */
/* -------------------------------------------------------------------------------------------------------- */
.g-calendar {
    /*** 以上請勿變更 ***/
}

/************** [日期表格元件] *******************/
.g-calendar-dateGrid {
    border-collapse: separate;
    /*** 以上請勿變更 ***/
}

    .g-calendar-dateGrid th {
        text-align: center;
        font-weight: bold;
        height: 30px;
        /*** 以上請勿變更 ***/
        background-color: #cdf7d7;
    }

    .g-calendar-dateGrid td {
        cursor: pointer;
        position: relative;
        text-align: center;
        overflow: hidden;
        border-bottom: 1px solid #C8CACC;
        border-right: 1px solid #C8CACC;
        /*** 以上請勿變更 ***/
    }

        .g-calendar-dateGrid td:hover {
            /*** 以上請勿變更 ***/
            font-weight: bold;
        }

            .g-calendar-dateGrid td:hover > div {
                /*** 以上請勿變更 ***/
                cursor: pointer;
                font-weight: bold;
            }

.g-calendar-today {
    /*** 以上請勿變更 ***/
    border: 1px solid red !important;
}

.g-calendar-sat {
    /*** 以上請勿變更 ***/
}

.g-calendar-sat-green {
    /*** 以上請勿變更 ***/
    color: Green;
}

.g-calendar-sat-black {
    /*** 以上請勿變更 ***/
    color: black;
}

.g-calendar-sat-red {
    /*** 以上請勿變更 ***/
    color: red;
}

.g-calendar-sun {
    /*** 以上請勿變更 ***/
    color: Red;
}

.g-calendar-selected {
    /*** 以上請勿變更 ***/
    background-color: yellow;
}

/************** [日期表格元件] 的日期單元 *******************/
.g-calendar-dateCell-prevMonth {
    color: #bfbfbf;
}

.g-calendar-dateCell-nextMonth {
    color: #bfbfbf;
}

.g-calendar-dateCell-leftImage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 14px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
}

.g-calendar-dateCell-leftImage2 {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 14px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
}

.g-calendar-dateCell-rightImage {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 14px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
}

.g-calendar-solarTerm > .g-calendar-dateCell-lunar {
    /*** 以上請勿變更 ***/
    color: Green;
}

.g-calendar-dateCell-lunar {
    font-size: 14px;
    /*** 以上請勿變更 ***/
    color: #bfbfbf;
}

.g-calendar-noLunar .g-calendar-dateCell-lunar {
    visibility: hidden;
    /*** 以上請勿變更 ***/
}

.g-calendar-small-noLunar .g-calendar-dateCell-lunar {
    display: none;
    /*** 以上請勿變更 ***/
}
/************** 年，月選擇頁 ******************/
.g-calendar-monthPicker {
    text-align: center;
    /*** 以上請勿變更 ***/
}

.g-calendar-monthPicker-content {
    width: 100%;
    height: 100%;
    /*** 以上請勿變更 ***/
}

.g-calendar-monthPicker table {
    text-align: center;
    width: 100%;
    height: 100%;
    /*** 以上請勿變更 ***/
}

.g-calendar-monthPicker td {
    width: 50px;
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

    .g-calendar-monthPicker td:hover {
        /*** 以上請勿變更 ***/
        background-color: #D6E8F6;
        font-weight: bold;
    }

.g-calendar-monthPicker-selected {
    /*** 以上請勿變更 ***/
    background-color: Orange;
    font-weight: bold;
}

.g-calendar-yearPicker {
    text-align: center;
    /*** 以上請勿變更 ***/
}

.g-calendar-yearPicker-content {
    width: 100%;
    height: 100%;
    /*** 以上請勿變更 ***/
}

.g-calendar-yearPicker table {
    text-align: center;
    width: 100%;
    height: 100%;
    /*** 以上請勿變更 ***/
}

.g-calendar-yearPicker td {
    width: 50px; /* font-weight:bold 影響 td 的尺寸，加上 width 可以消除影響 */
    /*** 以上請勿變更 ***/
}

    .g-calendar-yearPicker td:hover {
        cursor: pointer;
        /*** 以上請勿變更 ***/
        background-color: #D6E8F6;
        font-weight: bold;
    }

.g-calendar-yearPicker-selected {
    /*** 以上請勿變更 ***/
    background-color: Orange;
    font-weight: bold;
}

.g-calendar-holiday > .g-calendar-dateCell-lunar {
    /*** 以上請勿變更 ***/
    color: blue;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-calendar-lunarHoliday > .g-calendar-dateCell-lunar {
    /*** 以上請勿變更 ***/
    color: brown;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-calendar-onHoliday {
    color: red;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.g-calendar-dateCell-readOnly {
    color: #bfbfbf;
}

/* -------------------------------------------------------------------------------------------------------- */
/*  g-schedule                                                                                              */
/* -------------------------------------------------------------------------------------------------------- */
.g-schedule {
    /*** 以上請勿變更 ***/
}

/* 日期清單 */
.g-schedule-dateList {
    text-align: center;
    /*** 以上請勿變更 ***/
}

    .g-schedule-dateList th {
        text-align: center;
        /*** 以上請勿變更 ***/
        background-color: #DBDBDB;
    }

    .g-schedule-dateList td {
        height: 30px;
        width: 20px;
        /*** 以上請勿變更 ***/
        background-color: #6495ED;
    }

.g-schedule-dateList-month {
    /*** 以上請勿變更 ***/
    background-color: #00a9ff !important;
}

.g-schedule-dateList-active {
    /*** 以上請勿變更 ***/
    background-color: green !important;
}

/* 約會清單 */
.g-schedule-list .g-comp-content {
    /*** 以上請勿變更 ***/
}

.g-schedule-apptList {
    width: 100%;
    /*** 以上請勿變更 ***/
    border-collapse: separate;
}

    .g-schedule-apptList th {
        border: 1px solid darkgray;
        border-left-width: 0px;
        /*** 以上請勿變更 ***/
        background-color: lightGray;
    }

    .g-schedule-apptList td {
        border: 1px solid darkgray;
        border-top-width: 0px;
        border-left-width: 0px;
        word-break: break-all;
        white-space: normal;
        overflow: hidden;
        vertical-align: top;
        /*** 以上請勿變更 ***/
    }
    .g-schedule-apptList tr :first-child {
        border-left-width: 1px;
    }
    .g-schedule-apptList th :first-child {
        border-left-width: 1px;
    }

.g-schedule-monthList-month {
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    text-align: center;
    background-color: #F5FEF4;
    font-weight: bolder;
    border-right-width: 0px !important;
    border-left-width: 0px !important;
    overflow: revert;
}

.g-schedule-monthList-month-first {
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    background-color: #F5FEF4;
    font-weight: bolder;
    border-right-width: 0px !important;
    overflow: revert;
}

.g-schedule-monthList-month-last {
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    text-align: center;
    background-color: #F5FEF4;
    font-weight: bolder;
    border-left-width: 0px !important;
    overflow: revert;
}

.g-schedule-monthList-title-year {
    font-weight: bolder;
    cursor: pointer;
}

.g-schedule-monthList-title-month {
    font-weight: bolder;
    cursor: pointer;
}

.g-schedule-monthList-prev {
    font-weight: bolder;
    cursor: pointer;
}

.g-schedule-monthList-next {
    font-weight: bolder;
    cursor: pointer;
}

.g-schedule-monthList-week {
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    text-align: center;
    background-color: #dbdbdb;
    width: 14.2%;
}

.g-schedule-monthList-date {
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    color: #000000;
    padding: 3px;
}

.g-schedule-monthList-date-row td {
    border-bottom: 0px;
}

.g-schedule-monthList-apt-row td {
    border-top: 0px;
}
.g-schedule-appointment td {
    border: 0px;
    font-size: 14px;
}

.fixed-header {
    z-index: 9999;
    position: relative;
}

.fixed-monthHeader {
    z-index: 9999;
    position: relative;
}

.g-schedule-hour {
    width: 30px;
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    background-color: lightGray;
    min-width: 30px;
}

.g-schedule-halfHour {
    width: 20px;
    white-space: nowrap !important;
    /*** 以上請勿變更 ***/
    background-color: lightGray;
    min-width: 20px;
}

.g-schedule-appointment {
    cursor: pointer;
    /*** 以上請勿變更 ***/
}

.g-schedule-deleteIcon {
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    /*** 以上請勿變更 ***/
    background: url(../images/delete.png);
    background-size: auto 20px;
    background-position: 20px 0px;
    filter: invert(30%);
}

.g-schedule-apptIcon {
    display: inline-block;
    width: 18px;
    height: 20px;
    background-size: 14px 20px;
    vertical-align: bottom;
    background-repeat: no-repeat;
    /*** 以上請勿變更 ***/
    background-image: url(../images/picPushPin2.png);
}

.g-schedule-appt-prepare {
    /*** 以上請勿變更 ***/
}

.g-schedule-appt-finish {
    /*** 以上請勿變更 ***/
    background-color: #CCFFFF;
}

.g-schedule-appt-cancel {
    /*** 以上請勿變更 ***/
    background-color: #D3D3D3;
}

.g-schedule-appt-self {
    /*** 以上請勿變更 ***/
    color: red;
}

.g-schedule-appt-other {
    /*** 以上請勿變更 ***/
    color: green;
}

    .g-schedule-appt-other  .g-schedule-apptIcon {
        /*** 以上請勿變更 ***/
        background-image: url(../images/picPushPin.png);
    }

.g-schedule-appt-low {
    /*** 以上請勿變更 ***/
}

.g-schedule-appt-middle {
    /*** 以上請勿變更 ***/
}

.g-schedule-appt-high {
    /*** 以上請勿變更 ***/
}

    .g-schedule-appt-high  .g-schedule-apptIcon {
        background-size: 14px 18px;
        animation: apptIconAni 0.8s infinite;
        -webkit-animation: apptIconAni 0.8s infinite;
        -ms-animation: apptIconAni 0.8s infinite;
        -moz-animation: apptIconAni 0.8s infinite;
        /*** 以上請勿變更 ***/
    }

@keyframes apptIconAni {
    0% {
        transform-origin: 50% 100%;
        transform: scale(1,1);
        background-position: 0px 0px;
    }

    50% {
        transform-origin: 50% 100%;
        transform: scale(1,0.6);
        background-position: 0px 4px;
    }

    100% {
        transform-origin: 50% 100%;
        transform: scale(1,1);
        background-position: 0px 0px;
    }
}

@-webkit-keyframes apptIconAni {
    0% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(1,1);
        background-position: 0px 0px;
    }

    50% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: scale(1,0.6);
        background-position: 0px 4px;
    }

    100% {
        -webkit-transform-origin: 50% 100%;
        transform: scale(1,1);
        background-position: 0px 0px;
    }
}

@-ms-keyframes apptIconAni {
    0% {
        -ms-transform-origin: 50% 100%;
        -ms-transform: scale(1,1);
        background-position: 0px 0px;
    }

    50% {
        -ms-transform-origin: 50% 100%;
        -ms-transform: scale(1,0.6);
        background-position: 0px 4px;
    }

    100% {
        -ms-transform-origin: 50% 100%;
        -ms-transform: scale(1,1);
        background-position: 0px 0px;
    }
}

@-moz-keyframes apptIconAni {
    0% {
        -moz-transform-origin: 50% 100%;
        -moz-transform: scale(1,1);
        background-position: 0px 0px;
    }

    50% {
        -moz-transform-origin: 50% 100%;
        -moz-transform: scale(1,0.6);
        background-position: 0px 4px;
    }

    100% {
        -moz-transform-origin: 50% 100%;
        -moz-transform: scale(1,1);
        background-position: 0px 0px;
    }
}

/* 註解部分 */
.g-schedule-noteComp {
    text-align: center;
    /*** 以上請勿變更 ***/
}

    .g-schedule-noteComp .g-comp-content {
        padding-top: 10px;
        /*** 以上請勿變更 ***/
        display: inline-block;
    }

.g-schedule-noteTable td {
    text-align: left;
    overflow: hidden;
    /*** 以上請勿變更 ***/
}

.g-schedule-noteTable .g-schedule-noteTable-spaceTd {
    /*** 以上請勿變更 ***/
    width: 20px;
}

.g-schedule-noteTable-finish {
    display: inline-block;
    width: 18px;
    /*** 以上請勿變更 ***/
    background-color: #CCFFFF;
}

.g-schedule-noteTable-cancel {
    display: inline-block;
    width: 18px;
    /*** 以上請勿變更 ***/
    background-color: #D3D3D3;
}


/* Calendar 部分*/
.g-schedule-apptIcon-high {
    background-size: 12px 16px;
    animation: apptIconAni 0.8s infinite;
    -webkit-animation: apptIconAni 0.8s infinite;
    -ms-animation: apptIconAni 0.8s infinite;
    -moz-animation: apptIconAni 0.8s infinite;
    /*** 以上請勿變更 ***/
}

/************************************
GD.App.Lookup
************************************/
.g-lookup {
    /*** 以上請勿變更 ***/
}

.g-lookup-pageIndicator {
    /*** 以上請勿變更 ***/
}

    .g-lookup-pageIndicator .g-field-text {
        /*** 以上請勿變更 ***/
        cursor: pointer;
        text-align: center;
        padding-left: 0px;
        /*min-width: 0px;*/
    }

/************************************
GD.App.SetOrderByPanel
************************************/
.g-setOrderByPanel {
    /*** 以上請勿變更 ***/
}

.g-icon-orderByRightIcon {
    /*** 以上請勿變更 ***/
    background: url(../images/orderBy.png) no-repeat;
    background-size: 96px 32px;
    background-position: 0px 0px;
}

.g-icon-orderAsc .g-icon-orderByRightIcon {
    /*** 以上請勿變更 ***/
    background-position: -32px 0px;
}

.g-icon-orderDesc .g-icon-orderByRightIcon {
    /*** 以上請勿變更 ***/
    background-position: -64px 0px;
}

/*取消 filterComp 的圓角*/
.g-setOrderByPanel .g-top-dock>.g-searchField>.g-field-body{
    /*** 以上請勿變更 ***/
}

/* listComp 的內容是分行顯示的，一行為名稱，一行為欄位代號*/
.g-setOrderByPanel .g-comp-body>.g-list .g-listItem>.g-listItem-text>.g-fieldValue{
    /*** 以上請勿變更 ***/
    display: block;
}


/************************************
GD.App.searchPanel
************************************/
.g-searchPanel {
    /*** 以上請勿變更 ***/
}

/* listComp 的內容是分行顯示*/
.g-searchPanel .g-comp-body>.g-list .g-listItem>.g-listItem-text>.g-fieldValue.fld-QueryName{
    /*** 以上請勿變更 ***/
    display: block;
}

.g-searchPanel .g-comp-body>.g-list .g-listItem>.g-listItem-text>.g-fieldValue.fld-ExtNotes{
    /*** 以上請勿變更 ***/
    display: block;
}
/************************************
GD.App.PrintPanel
************************************/
.g-printPanel {
    /*** 以上請勿變更 ***/
}

.g-printPanel-el{
    /*** 以上請勿變更 ***/
    padding: 5px;
}


/* 內文元件*/
.g-printPanel-html{
    /*** 以上請勿變更 ***/
    padding: 5px;
    font-weight: bold;
}


/************************************
GD.App.ToExcelPanel
************************************/
.g-toExcelPanel {
    /*** 以上請勿變更 ***/
}

.g-toExcelPanel .g-layout-activeChildComp>.g-comp-body>.g-comp{
    /*** 以上請勿變更 ***/
    padding: 3px;
}


/* 內文元件*/
.g-toExcelPanel-html{
    /*** 以上請勿變更 ***/
    padding: 5px;
    font-weight: bold;
}


/************************************
GD.App.BaseApp
************************************/
.g-app {
    /*** 以上請勿變更 ***/
}

.g-app-body {
    /*** 以上請勿變更 ***/
}

.g-app-leftPanel {
    border-right: 1px solid lightGray;
}

.g-masterDetail {
    /*** 以上請勿變更 ***/
}

.g-masterDetail-body {
    /*** 以上請勿變更 ***/
}

.g-app-pageIndicator {
    /*** 以上請勿變更 ***/
}

    .g-app-pageIndicator .g-field-text {
        /*** 以上請勿變更 ***/
        cursor: pointer;
        text-align: center;
        padding-left: 0px;
        font-size: 15px;
        /*min-width: 0px;*/
    }

.g-app-pageSizeIndicator {
    /*** 以上請勿變更 ***/
}

    .g-app-pageSizeIndicator .g-field-text {
        /*** 以上請勿變更 ***/
        cursor: pointer;
        text-align: center;
        padding-left: 0px;
        font-size: 15px;
        /*min-width: 0px;*/
    }

.g-app-recordIndicator {
    /*** 以上請勿變更 ***/
}

    .g-app-recordIndicator .g-field-text {
        /*** 以上請勿變更 ***/
        cursor: pointer;
        text-align: center;
        padding-left: 0px;
        font-size: 15px;
        /*min-width: 0px;*/
    }

/************************************
GD.App.SearchPage
************************************/
.g-searchPage-module {
    /*** 以上請勿變更 ***/
    width: 200px;
}

.g-searchPage-fieldId {
    /*** 以上請勿變更 ***/
    width: 150px;
}

.g-searchPage-fieldValue {
    /*** 以上請勿變更 ***/
    width: 200px;
}

.g-searchPage-fieldIcon {
    background-size: auto 32px;
}

.g-searchPage-searchField {
    padding: 15px;
}

.g-searchPage-radioField {
    padding: 0 15px 5px 15px;
}

/************************************
GD.App.GridViewBuilder
************************************/
.g-gridViewBuilder {
    /*** 以上請勿變更 ***/
}


.g-gridViewBuilder div[alias='commonViewMajor'] div.g-listItem-text.g-listItem-useLeftIcon.g-listItem-useRightIcon {
    text-overflow: ellipsis;
    /*** 以上請勿變更 ***/
}
/************************************
GD.Comp.ProgressBar 
************************************/
.g-progressBar {
    /*** 以上請勿變更 ***/
}

.g-progressBar-bar {
    height: 22px;
    border-radius: 10px;
    overflow: hidden;
    /*** 以上請勿變更 ***/
    border-color: black;
    border-width: 1px;
    border-style: solid;
    background-color: #D3D3D3;
}

    .g-progressBar-bar span {
        display: inline-block;
        height: 20px;
        border-radius: 10px;
        /*** 以上請勿變更 ***/
        padding-left: 10px;
        background-color: #9ACD32;
    }

/* 以下為所有關於 z-index 的樣式 */
.g-gridHeaderItem-dragging { z-index: -1 !important}

.g-button-badge { z-index: 1; }
.g-picker-bar { z-index: 1; }

.g-listItem-leftPanel,
.g-listItem-rightPanel { z-index: 2; }

.g-gridHeadItem-pinned { z-index: 2; }

.g-rowIndex { z-index: 5; }
.g-gridCheckbox { z-index: 5; }

.g-listItem-pinned { z-index: 10; }
.g-gridItem-pinned { z-index: 10; }

.g-gridItem-pinned>.g-gridHeadItem-pinned { z-index: 25; }

.g-gridItem-pinned>.g-rowIndex { z-index: 30; }
.g-gridItem-pinned>.g-gridCheckbox  { z-index: 30; }

.g-gridHeader { z-index: 30; }

.g-gridHeaderItem.fld-rowIndex  { z-index: 35; }

.g-gridHeaderItem.fld-checkbox  { z-index: 35; }

.g-resizer {
    z-index: 101;
}

.g-draggable { z-index: 101; }
.g-draggable-proxy { z-index: 101; }
.g-dragging { z-index: 102;}

.g-scrollbar { z-index: 103; }

.g-floating { z-index: 200; }
.g-floating.g-draggable { z-index: 201; }
.g-floating.g-draggable-proxy { z-index: 201; }
.g-floating.g-dragging { z-index: 202; }

.g-indicator { z-index: 300; }
.g-indexbar { z-index: 300; }
.g-indexbar-tip { z-index: 300; }

.g-mask { z-index: 1000; }
.g-image-floating { z-index: 1001; }
.g-beforeMask {z-index: 1001;}

.g-sheet { z-index: 1001; }
.g-sheet.g-draggable { z-index: 1002; }
.g-sheet.g-draggable-proxy { z-index: 1002; }
.g-sheet.g-dragging { z-index: 1003; }
.g-sheet-mask { z-index: 1003; }

.g-gridHeaderItem-dir-top { z-index: 1003; }

.g-grid-proxy { z-index: 1004; }
.g-resizer.g-draggable { z-index: 2004; }
/*** 以上請勿變更 ***/


.g-map {
    background-color: #edeae2;
    width: 100%;
    height: 100%;
}

.g-mask-map {
    background-color: transparent !important;
}

.g-app-webPortalPage {
    background-color: #eef0f3 !important;
}

.g-app-webPortalPage .g-specialPanel {
    background-color: white;
}


.g-app-WebPortalDetail {
    background-color: #eef0f3 !important;
}

.g-app-WebPortalDetail .g-specialPanel {
    background-color: white;
}

.g-app-WebPortalDetail .g-recordView {
    background-color: white;
}





/************************************
GD.App.PrintPanel
************************************/
.g-specialPanel {
    /*** 以上請勿變更 ***/
}

    .g-specialPanel > .g-comp-body {
        padding: 2px 2px 0px 2px !important;
        /*** 以上請勿變更 ***/
    }

.g-icon-specialTabButton-edit {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    /*** 以上請勿變更 ***/
    background: url(../images/edit.png) no-repeat;
    background-size: 48px 24px;
    background-position: -24px 0px;
}

    /* 預設特殊 tab 的 close 的 mouseover 時的背景顏色(底色為淺紅叉號為白色) */
    .g-icon-specialTabButton-edit:hover {
        /*** 以上請勿變更 ***/
        background-position: 0px 0px;
    }

/* 預設特殊 tab 的 edit 的 背景顏色 */
.g-icon-specialTabButton-close {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    /*** 以上請勿變更 ***/
    background: url(../images/clear.png) no-repeat;
    background-size: 48px 24px;
    background-position: 0px 0px;
}

    /* 預設特殊 tab 的 close 的 mouseover 時的背景顏色(底色為淺紅叉號為白色) */
    .g-icon-specialTabButton-close:hover {
        /*** 以上請勿變更 ***/
        background-position: -24px 0px;
    }

.g-icon-specialTabButton-select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    /*** 以上請勿變更 ***/
    background: url(../images/checkbox-single.png) no-repeat;
    background-size: 48px 24px;
    background-position: 0px 0px;
}

.g-icon-specialTabButton-selected {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    /*** 以上請勿變更 ***/
    background: url(../images/checkbox-single.png) no-repeat;
    background-size: 48px 24px;
    background-position: -24px 0px;
}

.g-specialPanelButton {
    padding: 2px;
    /*** 以上請勿變更 ***/
}

    .g-specialPanelButton .g-button-body {
        padding: 0px;
    }

.g-specialPanel-progIcon {
    width: 25px !important;
    height: 25px !important;
    background-size: cover;
    /*** 以上請勿變更 ***/
}

.g-specialPanel-progTitle {
    /*** 以上請勿變更 ***/
    color: white !important;
    font-size: 14px;
    font-weight: bold;
    padding: 3px;
}

.g-specialPanel .g-toolbar.g-draggable * {
    /*** 以上請勿變更 ***/
    cursor: move;
}

.g-specialPanelButton-selected {
    /*** 以上請勿變更 ***/
}

.g-toolbar.g-skin-plain {
    /*** 以上請勿變更 ***/
    color: black;
    border-color: black;
}

.g-specialPanel-html {
    width: 8px;
    height: 8px;
    background: url(../images/resize.gif) no-repeat;
}

.g-skin-light-hide {
    /*** 以上請勿變更 ***/
    background-color: lightgray !important;
    background: -moz-linear-gradient(top, #b4b4b4 0%, #c0c0c0 10%, #cdcdcd 65%, #e0e0e0 100%) !important;
    background: -webkit-linear-gradient(top, #b4b4b4 0%, #c0c0c0 10%, #cdcdcd 65%, #e0e0e0 100%) !important;
    background: -o-linear-gradient(top, #b4b4b4 0%, #c0c0c0 10%, #cdcdcd 65%, #e0e0e0 100%) !important;
    background: -ms-linear-gradient(top, #b4b4b4 0%, #c0c0c0 10%, #cdcdcd 65%, #e0e0e0 100%) !important;
}
/************************************
GD.Panel.InstantMessage
************************************/
/*以下為即時訊息相關 CSS 設定 start*/
.g-instantMessage {
    padding: 10px 0px 6px 4px;
}

.g-instantMessage-bg {
    border-color: black;
    background-color: #6a992b;
    background: -webkit-gradient(linear, left top, left bottom, from(#76ab30), to(#5a8325), color-stop(33%,#6a992b)); /* Safari, Chrome */
    background: -moz-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* FireFox */
    background: -o-linear-gradient(top, #76ab30, #6a992b, #5a8325); /* Opera */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76ab30', endColorstr='#5a8325'); /* IE9 */
    background: linear-gradient(to bottom, #76ab30, #6a992b, #5a8325); /*IE10*/
}

.g-instantMessage-bg-title {
    color: white !important;
}

.g-instantMessage-title {
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.g-instantMessage-badge {
    border-style: none !important;
    font-size: 8px !important;
    line-height: 8px !important; /* lineHeight = fontSize   */
    min-width: 15px !important; /* minWidth = fontSize + paddingLeftRight + borderLeftRight    */
    min-height: 15px !important; /* minHeight = fontSize + paddingTopBottom + borderTopBottom    */
}

.g-instantMessage-padding {
    padding: 4px;
    /*** 以上請勿變更 ***/
}

    .g-instantMessage-padding .g-button-body {
        padding: 3px;
    }
/*以下為即時訊息相關 CSS 設定 end*/

.g-watermark {
    opacity: 0.2;
}

.g-watermark-common {
    pointer-events: none;
    z-index: 9999;
    left: -25%;
    top: -25%;
    width: 150%;
    height: 150%;
    position: absolute;
    /*** 以上請勿變更 ***/
}

.g-watermark-icon {
    /*** 浮水印的背景圖片 ***/
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    /*** 浮水印的背景是圖片時，可以放開下面這一行 ***/
    /*background-image: url(../images/company-logo.png);*/
    opacity: 0.6;
}

.g-watermark-text {
    /*** 浮水印的顯示文字的相關設定 ***/
    font-family: Arial;
    color: grey;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    /*** 浮水印的背景是文字且不需要顯示使用者訊息時，可以修改下面這一行中的(%E6%A9%9F%E5%AF%86%E8%B3%87%E6%96%99%E3%80%81%E8%AB%8B%E5%8B%BF%E5%A4%96%E6%B4%A9)部分 ***/
    /*** %E6%A9%9F%E5%AF%86%E8%B3%87%E6%96%99%E3%80%81%E8%AB%8B%E5%8B%BF%E5%A4%96%E6%B4%A9 是對“機密資料、請勿外洩”的文字進行的 URL 編碼***/
    /*** 進行 URL 編碼是針對 IE 瀏覽器浮水印不顯示進行的修正***/
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200px' width='500px'%3E%3Ctext text-anchor='middle' transform='translate(120, 100)' fill='grey' font-size='26' %3E %E6%A9%9F%E5%AF%86%E8%B3%87%E6%96%99%E3%80%81%E8%AB%8B%E5%8B%BF%E5%A4%96%E6%B4%A9 %3C/text%3E%3C/svg%3E");
}

@media (min-width: 0px) and (max-width: 320px) {
    .g-watermark-text-fontSize {
        font-size: 20px;
    }
}

@media (min-width: 321px) {
    .g-watermark-text-fontSize {
        font-size: 26px;
    }
}