﻿body {
    background:#8a0303;
    font-size:12px;
    font-family:Verdana;
    color:#212121;
    padding:0;
    margin:0;   
    -webkit-print-color-adjust: exact; 
}

.HiddenControl {display:none;}

.HeaderPanel {
    
}
.HeaderPanel > img { width:100%; height:auto; }

.MainPanel { width: 1000px; margin: auto; background: #fff; border-radius:5px; box-shadow:  12px 0 40px -4px rgba(13, 13, 13, 0.5), -12px 0 40px -4px rgba(13, 13, 13, 0.5); }
.MainPanel > .CenterPanel { padding:10px; }

.MainPanel > .CenterPanel > .left { float:left; width:60%; }
.MainPanel > .CenterPanel > .left strong { font-size:110%; }
.MainPanel > .CenterPanel > .right { float:right; width:40%; }

.BottomPanel > .container { text-align:center; padding:5px; color:#fff; }

#PanelForm {}
#PanelForm > .title { padding:20px 10px; text-align:center; font-weight:bold; }
#PanelForm > .title span.chinese { font-size:200%; display:block; }
#PanelForm > .title span.english { font-size:120%; display:block;}
#PanelForm > .container { display:none; border:solid 1px #b6b6b6; border-radius:5px; width:90%; margin:0 auto 5px auto; }
#PanelForm > .half { width:90%; margin:0 auto 5px auto; }
#PanelForm > .half > .container { border:solid 1px #b6b6b6; border-radius:5px; width:49%;  }
#PanelForm > .half > .container.left { float:left; }
#PanelForm > .half > .container.right { float:right; }

#PanelLoading { display:none; }
#PanelLoading > img { }
#PanelLoading > span.message { display:block; font-weight:bold; padding-top:5px; }

.MenuPanel { background:#af7207;  }
.MenuPanel .sf-menu li { }
.MenuPanel .sf-menu li a { color:#fff; font-weight:bold; border-left: 1px solid #fff; }
.MenuPanel .sf-menu li:first-child a { border:none; }
.MenuPanel .sf-menu li a span.chinese { display:block; font-size:120%;  }


.MenuPanel .sf-menu li {
	background:none; 
}
.MenuPanel .sf-menu ul li {
	background:none; 
}
.MenuPanel .sf-menu ul ul li {
	background:none; 
}
.MenuPanel .sf-menu li:hover,
.MenuPanel .sf-menu li.sfHover {
	background:#966208;
}

.section {}
.section > .subtitle {
    font-weight:bold;
    padding:10px;
    background:#fcc2c2;
    border-radius:5px;
    margin-bottom:5px;            
}
.section > .subtitle.second { background:#eefb84; }
.section > .subtitle > span.chinese {            
    font-size:140%;
    padding-right:10px; 
}
.section > .subtitle > span.english {
    font-size:120%;
}
.section > table {
    width:100%;
}
.section > table tr td { }
.section > table tr td > table tr td span.chinese { font-weight:bold; font-size:120%; padding-right:5px; }

.section .error-message { color:#ff0000; font-weight:bold; font-size:95%; }

.section > table tr td .buttonContainer { font-size:105%; padding:5px;}
.section > table tr td .buttonContainer a { background:#7f325e; color:#fff; padding:5px 10px; border-radius:5px; cursor:pointer; }
.section > table tr td .buttonContainer a:hover { background:#592041; }
.section > table tr td .buttonContainer a span.chinese { padding-right:5px; }
.section > table tr td .buttonContainer .fa-plus-circle { font-size:15px; }
.section > table tr td > table tr td a.fa-minus-circle { font-size:20px; text-decoration:none; color:#000; cursor:pointer; color:#9f0101; }

.section .label {            
    width:26%;
    padding:5px 7px;
    text-align:right;            
}

.section .component .result { font-weight:bold; font-size:105%; }
.section .component .reference { font-weight:bold; font-size:150%; }

.section .label > span.chinese {
    display:block;   
    margin-bottom:3px;              
    font-weight:bold;   
    font-size:110%;    
}
.section .label > span.english {                        
    display:block;                                   
}    
.section .component {            
            
}
.section .component input[type="number"], .section .component input[type="text"]{            
    padding:5px 2px;
    border-radius: 5px;
    border:solid 1px #9a9a9a;
} 

.section .component input[type="checkbox"]{            
           
}
.section .component input[type="checkbox"] + label {            
           
}
.section .component input[type="checkbox"]:checked + label {
            
}

[class*="w-"] { float:left; }
.w-50 { width:50%; }
.clearfix { clear:both; height:1px; }

.symbol-rm { font-weight:bold; padding:0 5px; }
.symbol-total { font-weight:bold; font-size:150%; }
.fullwidth { width:98%; }
.textbox-currency { width:100px; }
.textbox-number { width:60px; }
.textbox-name-opt { width: 90%}
.textbox-name { width:95%; }
.textbox-phone { width:120px; }
.textbox-name-long { width:400px; }

.main-button { }
.main-button > ul { list-style:none; padding:0; margin:0; }
.main-button > ul > li { float:left; width:33.33%; }
.main-button > ul > li a.button { width:90%; text-decoration:none; border-radius:5px; cursor:pointer; display:block; margin:auto; font-weight:bold; padding:10px; background:#7f325e; color:#fff; }
.main-button > ul > li a.button > span.chinese { font-size:150%; display:block; margin-bottom:3px; }
.main-button > ul > li a.button > span.english { font-size:110%; }
.main-button > ul > li a.button:hover { background:#592041; }

.panel-button { text-align:center; margin:10px 0; width:95%; }
.panel-button > a.button { text-decoration:none; border-radius:5px; cursor:pointer; display:none; float:right; width:auto; margin:0 2px; font-weight:bold; padding:7px 20px; background:#7f325e; color:#fff; }
.panel-button > a.button > span.chinese { font-size:130%; display:block; margin-bottom:3px; }
.panel-button > a.button > span.english {  }
.panel-button > a.button:hover { background:#592041; }

.PanelInfo { padding-top:40px; font-size:110%; }
.PanelInfo > .title { font-weight:bold; font-size:1.2em; padding-bottom:3px; }
.panel-info.chinese { font-size:1.2em; }
.panel-info.english {  }
.panel-info > .container { padding:5px; }
.panel-info table { border-collapse:collapse; width:100%; }
.panel-info table tbody tr { border:solid 1px #000; }
.panel-info table tbody tr td { padding:3px; vertical-align:top; }
.panel-info .subtitle { font-weight:bold; text-align:left; padding:3px; }
.panel-info .label { text-align:right; width:20%; font-weight:bold; }
.PanelInfo a { text-decoration:none; }

.eventInfo { margin:10px 0; }
.eventInfo > table { width:100%; border-collapse:collapse; }
.eventInfo > table tr th { border:solid 1px #bbbbbb; background:#8a0303; color:#fff; }
.eventInfo > table tr th span.chinese { font-weight:bold; font-size:130%; display:block; }
.eventInfo > table tr td span.chinese { font-weight:bold; font-size:110%; display:block; }
.eventInfo > table tr td { padding:5px; font-size:110%; border:solid 1px #bbbbbb; }
/*.eventInfo > div.contactInfo > table.ContactTable {border:none!important;}*/

.contactInfo { margin:10px 0; }
.contactInfo > table { width:100%; border-collapse:collapse; }
.contactInfo > table tr th { border:solid 1px #bbbbbb; background:#8a0303; color:#fff; }
.contactInfo > table tr th span.chinese { font-weight:bold; font-size:130%; display:block; }
.contactInfo > table tr td span.chinese { font-weight:bold; font-size:110%; display:block; }
.contactInfo > table tr td { padding:5px; font-size:110%; border:none!important;}

.info-button { }
.info-button > ul { list-style:none; padding:0; margin:0; }
.info-button > ul > li { margin:10px 0; }
.info-button > ul > li a.button { width:90%; text-decoration:none; border-radius:5px; cursor:pointer; display:block; margin:auto; font-weight:bold; padding:10px; background:#af7207; color:#fff; }
.info-button > ul > li a.button > span.chinese { font-size:150%; display:block; margin-bottom:3px; }
.info-button > ul > li a.button > span.english { font-size:110%; }
.info-button > ul > li a.button:hover { background:#966208; }

.timeTable { }
.timeTable > table { width:100%; border-collapse:collapse; }
.timeTable tr th { border:solid 1px #bbbbbb; padding:5px; background:#8a0303; color:#fff; }
.timeTable tr th span.chinese { font-weight:bold; font-size:150%; display:block; }
.timeTable tr td { border:solid 1px #bbbbbb; padding:5px; }
.timeTable tr td span.chinese { font-size:120%; display:block; }
.timeTable tr td.date { vertical-align:top; text-align:center; }
.timeTable tr td.date span.chinese { display:block; padding:4px; }
.timeTable tr td.time { vertical-align:middle; text-align:center; }
.timeTable tr td.info span.chinese { display:block; padding:2px; }
.timeTable {}

.contentpage > div.chinese { font-size:130%; }

.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 18px;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
  border:solid 1px #848484;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #2aa1c0;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #0e647d;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}
.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}
.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #7b7b7b;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select select::-ms-expand {
  display: none;
}
.select select:hover,
.select select:focus {
  color: #000;
  background: #ccc;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
  border-top-color: #000;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

@media screen and (max-width: 55em) {
    .MainPanel { width:100%; }
    .MainPanel > .CenterPanel .left { width:100%; }
    .MainPanel > .CenterPanel .right { width:100%; }
    .main-button > ul > li { width:100%; margin:10px 0; }
    [class*="w-"] { width:100%; }
}

@media print
{
    .panel-button { display:none; }
    .PanelInfo { display:none; }
}