﻿body {
    background-color: #F4F4F4;
    color: #666666;
    font-family: "Khula", PMingLiU, Arial, Helvetica, sans-serif, SimHei;
}

.sharpImage {
    image-rendering: pixelated;
}

.header {
    background-color: white;
}

.companyLogo {
    height: 60px;
    padding-top: 15px;
    padding-bottom: 20px;
}

.headerTitle {
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    color: #3B3B3B;
    background-color: #F4F4F4;
    font-size: 24pt;
    text-align: center;
    font-family: "Cardo", constantia, serif, SimHei;
    font-weight: bold;
    border-style: solid none none none;
    border-width: thin 0px 0px 0px;
    border-color: #D0D0D0;
}

.footer {
    /*position: fixed;*/
    background-color: #979797;
    /**bottom: 0px;
    left: 0px;
    right: 0px;*/
}

.footerText {
    font-family: "Khula", Arial, Helvetica, sans-serif, SimHei;
    color: #FFF;
    font-size: 15px;
}

.main {
    width: 908px;
    margin: 0 auto;
    margin-bottom: 40px;
}

* {
    margin: 0 auto;
    padding: 0;
}

.test_server_warning
{
	padding-top:5px;
	padding-bottom:5px;
	display:inline-block;
	width:100%;
	color:White;
	background-color:Red;
	font-size:30pt;
	text-align:center;
}

table.fullfixedwidth {
    width: 908px;
    border-style: none;
    margin: 0 auto;
}

td.app_title_left_col {
}

.lang_button {
    height: 13px;
}

td.app_title_right_col {
    color: #3B3B3B;
    vertical-align: top;
    font-size: 12px;
    font-family: "Khula",Calibri;
    text-align: right;
    padding-top: 10px;
    padding-bottom: 10px;
}

span.app_title_right_col_sep_bar {
    color: #3B3B3B;
    vertical-align: top;
    font-size: 13px;
    font-family: Arial;
}

.naviBar {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

span.errorTitle {
    color: #957A4D;
    font-family: "Cardo", Constantia, Serif;
    font-weight: bold;
    font-size: 24px;
}

span.errorDetail {
    color: #3C3C3C;
    font-family: "Cardo", Constantia, Serif;
    font-size: 21px;
}

.payment input[type=radio] {
    margin: 0 15px 0 10px;
    width: 16px;
    height: 16px;
}

.payment label {
    vertical-align: sub;
}

.amend input[type=checkbox] {
    margin: 0 15px 0 10px;
}

    .amend input[type=checkbox]:checked + label {
        color: #b56e8b;
    }

.amend label {
    color: #666666;
}



.selectRadio input[type=radio] {
    display: none;
    font-family: "Khula", Arial, Helvetica, sans-serif, SimHei;
}

    .selectRadio input[type=radio]:disabled:checked + label {
        color: #008dd1;
    }

    .selectRadio input[type=radio]:disabled + label {
        background-color: rgb(232,228,227);
        color: #CECECE;
    }

    .selectRadio input[type=radio] + label {
        width: 128.3px;
        height: 40px;
        line-height: 45px;
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0px;
        font-size: 14px;
        font-weight: bold;
        font-family: "Khula", Arial, Helvetica, sans-serif, SimHei;
        color: #646464;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-color: #F5F5F5;
        background-repeat: repeat-x;
        border-color: #E7E7E7;
        border-radius: 0px 0px 5px 5px;
        -moz-box-shadow: 1px 1px 15px 1px rgb(225,225,225);
        -webkit-box-shadow: 1px 1px 15px 1px rgb(225,225,225);
        box-shadow: 1px 1px 15px 1px rgb(225,225,225);
        letter-spacing: 0.5px;
    }

    .selectRadio input[type=radio]:checked + label {
        outline: 0;
        border-radius: 0px 0px 5px 5px;
        background-image: -moz-linear-gradient(top,#DFF0F8,#D7E4F2);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#DFF0F8),to(#D7E4F2));
        background-image: -webkit-linear-gradient(top,#DFF0F8,#D7E4F2);
        background-image: -o-linear-gradient(top,#DFF0F8,#D7E4F2);
        background-image: linear-gradient(to bottom,#DFF0F8,#D7E4F2);
        color: #008DD1;
    }

.PromotionTitle {
    font-family: "Cardo", constantia, serif, SimHei;
    font-size: 18px;
    color: rgb(0,141,209);
}

.PromotionDetail {
    font-family: "Khula", PMingLiU, Arial, Helvetica, sans-serif, SimHei;
    color: #666666;
    line-height: 1.2;
}

.PassengerInfoTitle {
    font-family: "Cardo", constantia, serif, SimHei;
    color: #B56E8B;
}

.SimHeiFont {
    font-family: "Khula", Arial, Helvetica, sans-serif, SimHei;
}

span.OtherPassengerFamily {
    display: inline-block;
    width: 223px;
}

span.OtherPassengerGiven {
    padding-right: 48px;
}

.OtherPaxFNameInput {
    text-transform: uppercase;

    width: 206px;
    border: 1px solid #E7E7E7;
    color: #666666;
    height: 25px;
    font-size: 16px;
    margin-right: 50px;
}

.OtherPaxGNameInput {
    text-transform: uppercase;

    width: 266px;
    border: 1px solid #E7E7E7;
    color: #666666;
    height: 25px;
    font-size: 16px;
}

.tbPaxInfo {
    width: 100%;
}

.InputBoxFullWidth {
    width: 100%;
}

.InputBox {
    width: 100%;
    border: 1px solid #E7E7E7;
    color: #666666;
    height: 25px;
    font-size: 16px;
}

.PaxInfoRemark {
    color: #248BCA;
    font-size: 12px;
}


.InlineLabel {
    display: inline-block;
    line-height: 40px;
    float: left;
    width: 70px;
    border: 1px solid;
    border-color: #E7E7E7;
    font-weight: bold;
    font-family: "Khula", Arial, Helvetica, sans-serif;
    text-align: center;
    color: rgb(0,141,209);
    background-image: -moz-linear-gradient(top,#F4F4F4,#E8E8E8);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#F4F4F4),to(#E8E8E8));
    background-image: -webkit-linear-gradient(top,#F4F4F4,#E8E8E8);
    background-image: -o-linear-gradient(top,#F4F4F4,#E8E8E8);
    background-image: linear-gradient(to bottom,#F4F4F4,#E8E8E8);
}

select.InlineDropDownList {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: transparent url('../images/arrow_down_grey.png') no-repeat 160px;
    background-size: 10px;
    padding-left: 20px;
    width: 190px;
    height: 42px;
    border: 1px solid #E7E7E7;
    color: #666666;
    font-size: 15px;
    cursor:pointer;
}

    select.InlineDropDownList:disabled {
        background-color: rgb(232,228,227);
        color: rgb(209,208,207);
        cursor:auto;
    }

.inlineDisplay {
    display: inline-block;
}


select {
}

    select::-ms-expand {
        display: none;
    }

.calendar {
    width: 105px;
    height: 37px;
    background: transparent url('../images/logo_calendar.png') no-repeat;
    background-size: 20px;
    background-position-x: 5px;
    background-position-y: 8px;
    font-size: 15px;
    border: 1px solid #E7E7E7;
    padding-left: 40px;
    color: #666666;
}

    .calendar:disabled {
        background-color: rgb(232,228,227);
        /*color:rgb(209,208,207);*/
    }

.ajaxCalendar {
    font-size: 15px;
    color: #666666;
    background: white;
    border: 1px solid #E7E7E7;
}

    .ajaxCalendar .ajax__calendar_container {
        cursor: default;
        font-size: 15px;
        padding: 0px;
        text-align: center;
        width: 230px;
    }

    .ajaxCalendar .ajax__calendar_day {
        border: none;
        font-weight: normal;
        font-size: 13px;
        color: #2C3E50;
    }

    .ajaxCalendar .ajax__calendar_month {
        font-weight: normal;
        color: #2C3E50;
        font-size: 13px;
    }

    .ajaxCalendar .ajax__calendar_days {
        height: 139px;
        left: 0;
        margin: auto;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }

    .ajaxCalendar .ajax__calendar_months {
        height: 139px;
        left: 0;
        margin: auto;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }

    .ajaxCalendar .ajax__calendar_years {
        height: 139px;
        left: 0;
        margin: auto;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
    }

    .ajaxCalendar .ajax__calendar_invalid .ajax__calendar_year {
        text-decoration: line-through;
        font-weight: normal;
        cursor: default;
        color: #999999;
    }

    .ajaxCalendar .ajax__calendar_invalid .ajax__calendar_month {
        text-decoration: line-through;
        font-weight: normal;
        cursor: default;
        color: #999999;
    }

    .ajaxCalendar .ajax__calendar_invalid .ajax__calendar_day {
        text-decoration: line-through;
        font-weight: normal;
        cursor: default;
        color: #999999;
    }

    .ajaxCalendar .ajax__calendar_invalid .ajax_calendar_hover {
    }

    .ajaxCalendar .ajax__calendar_active .ajax__calendar_day {
        font-weight: bold;
    }

    .ajaxCalendar .ajax__calendar_other .ajax__calendar_day {
        font-weight: normal;
        color: #666666;
    }

    .ajaxCalendar .ajax__calendar_body {
        background: white;
        width: 100%;
    }

    .ajaxCalendar .ajax__calendar_header {
        height: 30px;
        margin-top: 5px;
    }

.ajax__calendar_title {
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    margin-left: 15px;
    margin-right: 15px;
}



.ajax__calendar_year {
    font-size: 14px;
}


.ajaxCalendar .ajax__calendar_dayname {
    height: 25px;
    width: 25px;
    font-size: 16px;
    text-align: right;
}


.timePicker {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../images/logo_clock.png'), url('../images/arrow_down_grey.png');
    background-size: 20px, 10px;
    background-repeat: no-repeat, no-repeat;
    background-position: 10%, 84%;
    color: #666666;
    width: 115px;
    height: 39px;
    border: 1px solid #E7E7E7;
    padding-left: 35px;
    font-size: 15px;
}

    .timePicker:disabled {
        background-color: rgb(232,228,227);
        color: rgb(209,208,207);
    }

input, select.effect {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}


.fullWidth {
    width: 100%;
}

.fullWidthOverFlow {
    width: 100%;
    overflow: hidden;
}

.normalLabel {
    line-height: 20px;
    text-align: left;
    color: #666666;
    font-family: "Khula", Arial, Helvetica, sans-serif;
}

td.alignLeft {
    text-align: left;
}

td.alignCenter {
    text-align: center;
}

.numberBox {
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 128px;
    height: 40px;
    background-image: url('../images/arrow_updown_grey.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right;
    padding-left: 20px;
    border: 1px solid #E7E7E7;
    color: #666666;
}

    .numberBox:disabled {
        background-color: rgb(232,228,227);
    }

div.horizontalSpace {
    height: 20px;
}


td.backgroundColor {
    background: #F5F5F5;
}

#leftColumn {
    width: 310px;
    overflow: hidden;
    float: left;
}

#rightColumn {
    overflow: hidden;
}

div.verticalSpace {
    height: 10px;
    width: 20px;
    float: left;
}


#buttonWrapper {
    height: 150px;
}

.imageButtonSmallBig {
    width: 308px;
}

.imageButtonSmallLeft {
    width: 148px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.imageButtonSmall {
    width: 148px;
    padding-bottom: 10px;
}

.titleImage {
    height: 20px;
    padding-top: 15px;
    padding-bottom: 20px;
    padding-right: 10px;
    float: left;
}

.titleText {
    height: 30px;
    padding-top: 7px;
    padding-bottom: 20px;
    float: left;
    font-size: 20pt;
    font-family: "Cardo", constantia, serif, SimHei;
    font-weight: bold;
    color: rgb(149,122,77);
}

.warningMessage {
    background-color: White;
    height: 60px;
    /*box-shadow: 1px 1px 4px #666666;*/
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 3px;
    width: 99.3%;
    border: 1px solid;
    border-color: rgb(240,28,54);
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

span.warningMessageTitle {
    font-size: 16px;
    font-weight: bold;
    word-spacing: 1px;
    color: rgb(240,28,54);
}

table.shadowBox {
    background: white;
    text-align: center;
    width: 47.8%;
    height: 200px;
    float: left;
    box-shadow: 1px 1px 4px #666666;
    margin-left: 2px;
    margin-right: 2px;
    margin-bottom: 3px;
    /*padding-left:20px;
    padding-right:20px;*/
}

span.route {
    font-weight: bold;
}


table.contact {
    float: left;
    font-size: 18px;
    color: #3C3C3C;
}

td.contactCell {
    padding-right: 50px;
}

span.city {
    color: #008DD1;
    font-weight: bold;
}

td.topBorder {
    border-top: 1px solid #E7E7E7;
}

table.AdditionalPayment{
    width:100%;
}

table.bookingSummary {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px;
}

table.confirmSummary {
    width: 100%;
    border: 1px solid #e7e7e7;
    background-color: white;
    box-shadow: 1px 1px 15px 1px rgb(225,225,225);
    border-collapse: separate;
    border-spacing: 0px;
}

table.confirmBookPax1 {
    width: 100%;
    float: left;
}

table.PaxInfoInner {
    float: left;
}

table.RemarkTable {
    float: left;
    line-height: 3px;
    padding-top: 10px;
    font-size: 13px;
}

td.RemarkRow {
    line-height: 10px;
    padding-top: 20px;
    font-size: 13px;
}

td.selectedFlight {
    border-style: solid none;
    border-width: 1px;
    border-color: rgb(231,231,231);
    width: 100%;
}

td.alternateFlight {
    border-style: solid;
    border-width: 2px;
    border-color: rgb(231,231,231);
    width: 100%;
    background: #E6EFF6; /* For browsers that do not support gradients */
    background: linear-gradient(#E6EFF6, #D2E5F3); /* Standard syntax */
}

img.CalClockLogo {
    vertical-align: middle;
    padding-right: 10px;
    width: 15px;
}

img.dollarLogo {
    vertical-align: middle;
    padding-right: 10px;
    width: 15px;
}

img.available {
    vertical-align: middle;
    padding-right: 10px;
    width: 28px;
}

span.available {
    color: rgb(181,130,139);
    font-weight: bold;
}

/*span.selectedDate {
    padding-right: 10px;
}*/

.rightPadding {
    padding-right: 10px;
}

.extraPadding {
    padding-right: 25px;
}

.topPadding {
    padding-top: 30px;
}

.leftRightPadding {
    padding-left: 5px;
    padding-right: 5px;
}

.rightMargin{
    margin-right: 25px;
}

td.selectedFlightTitle {
    height: 10px;
    padding-top: 20px;
}

.borderTop {
    border-style: solid none none none;
    border-width: 1px;
    border-top-color: #e7e7e7;
}

tr.borderBottom td {
    border-bottom: 1pt solid #e7e7e7;
}

.borderSepartor{
    border-style: solid none solid none;
    border-color: rgb(231,231,231);
    border-width: 1px;
}

.borderCollapse {
    border-collapse: collapse;
}

.bookingConfirm
{    
    width: 100%;
    border-bottom-color: #e7e7e7;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    height: 80px;
    border-collapse: collapse;
}



.alignBottom {
    vertical-align: bottom;
}

.alignTop {
    vertical-align: top;
}

.totalPayAmount {
    font-size: 16pt;
    font-weight: bold;
    color: #B56E8B;
}

.includeTax {
    font-size: 10pt;
    padding-right: 206px;
}

.includeTaxBookingSummary {
    font-size: 10pt;
    /*padding-right: 180px;*/
}



/*.topPadding{
    display:inline-block;
    padding-top:15px;
}*/

.topBottomPadding {
    padding-top: 20px;
    padding-bottom: 20px;
}

.floatRight {
    float: right;
}


div.infoBox {
    border: 1px solid rgb(208,208,208);
    width: 550px;
    float: left;
    background-color: white;
    text-align: left;
}

.backButton {
    background: rgb(210,228,243); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgb(229,240,248), rgb(210,228,243)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgb(229,240,248), rgb(210,228,243)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgb(229,240,248), rgb(210,228,243)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgb(229,240,248), rgb(210,228,243)); /* Standard syntax (must be last) */
    border: 1px solid #D0D0D0;
    color: rgb(102,102,102);
    width: 300px;
    padding-top: 6px;
    padding-bottom: 2px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    font-family: "Khula", Arial, Helvetica, sans-serif;
}


.gradientButton {
    background: #C8819D; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#C8819D, #B56F8D); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#C8819D, #B56F8D); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#C8819D, #B56F8D); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#C8819D, #B56F8D); /* Standard syntax (must be last) */
    border: 1px solid #D0D0D0;
    color: White;
    width: 100%;
    height: 40px;
    font-weight: bold;
    cursor:pointer;
}


.gradientButton:disabled {    
    background: #989898;
    color: #D0D0D0;
    cursor:default;
}
.gradientButtonBlue {
    background: #E6EFF6; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#E6EFF6, #D2E5F3); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#E6EFF6, #D2E5F3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#E6EFF6, #D2E5F3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#E6EFF6, #D2E5F3); /* Standard syntax (must be last) */
    border: 1px solid #CFCFCF;
    color: #656665;
    width: 100%;
    height: 40px;
    font-weight: bold;
}

.continueButton {
    margin-top: 20px;
    width: 350px;
    float: right;
}

.gradientButtonBlue:disabled {
    background: #999899;
    color: #CFCFCF;
    border: 1px solid #999899;
}

.agree_cb_text input[type="checkbox"] {
    margin-right: 10px;
}

.familyName {
    text-transform: uppercase;

    border: 1px solid #E7E7E7;
    color: #666666;
    height: 25px;
    font-size: 16px;
    width: 80%;
}

.givenName {
    text-transform: uppercase;

    border: 1px solid #E7E7E7;
    color: #666666;
    height: 25px;
    font-size: 16px;
    width: 100%;
}

.travelDoc{
    text-transform: uppercase;
}

.email{
    text-transform: lowercase;
}

.gradientButton2 {
    background: #D7E4F2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#DFF0F8, #D7E4F2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#DFF0F8, #D7E4F2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#DFF0F8, #D7E4F2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#DFF0F8, #D7E4F2); /* Standard syntax (must be last) */
    border: 1px solid #D0D0D0;
    color: #008DD1;
    width: 27%;
    height: 35px;
    font-weight: bold;
    font-size:12px;
    cursor:pointer;
    margin-top: 5px;
    margin-left: 9px;
    white-space: normal;
}

.gradientButton3 {
    background: #D7E4F2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#DFF0F8, #D7E4F2); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#DFF0F8, #D7E4F2); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#DFF0F8, #D7E4F2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#DFF0F8, #D7E4F2); /* Standard syntax (must be last) */
    border: 1px solid #D0D0D0;
    color: #333;
    width: 20%;
    height: 35px;
    font-weight: bold;
    font-size:14px;
    cursor:pointer;
    margin: 10px;
    white-space: normal;
}

.table_t1{
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.table_t1 th {
    background: rgb(68,140,208);
    line-height: 48px;
    font-size: 20px;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.table_t1 td {
    border: 1px solid #CCC;
    background: rgb(250,250,246);
    text-align: center;
    width: 500px;
    padding: 10px;
    box-sizing: border-box;
    border-spacing: 0;
}

.dl {
    display: inline-block;
    width: 47%;
    padding: 10px;
}

.dr {
    display: inline-block;
    width: 47%;
    padding: 10px;
}

.pageTitle{
    display: block;
    width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    font-family: Cardo,Microsoft YaHei, Microsoft JhengHei, LiHei Pro Medium, Apple LiGothic Medium, Hei, SimHei, 宋体, Arial, Helvetica, sans-serif;
    font-size: 42px;
    letter-spacing: 2px;
    line-height: 66px;
    text-transform: uppercase;
    text-align: center;
    color: rgb(100,100,100);
    padding-bottom: 15px;
}

.divTwoTable{
    width:80%;
}

.infoOl{
        text-align: left;
        margin-left: 10%;
        margin-right: 10%;
        font-size:20px;
}

.infoOl li{
        margin-bottom: 40px;
}

@media only screen and (max-width: 992px){
    .pageTitle {
        font-size: 25px;
    }
    .dl {
        display: block;
        width: 100%;
        padding: 10px;
        clear: both;
    }
    .dr {
        display: block;
        width: 100%;
        clear: both;
        padding: 10px;
        float: left;
    }
    .divTwoTable{
        width:90%;
    }
}

@media screen and (max-width: 992px){
    .table_t1 td {
        line-height: 40px;
    }
}

.AccordionHeader {
    font-family: "Cardo", PMingLiU, constantia, serif, SimHei;
    background-color:gainsboro;
    color:brown;
    margin-top:22px;
    width:80%;
    cursor:pointer;
    padding:4px;
 }

.AccordionHeader td {
    font-family: "Cardo", PMingLiU, constantia, serif, SimHei;
    text-align:left;
    padding:4px;
    margin-top:22px;
}

.AccordionHeaderSelected {
    font-family: "Cardo", PMingLiU, constantia, serif, SimHei;
    background-color:lightgreen;
    color:white;
    margin-top:22px;
    width:80%;
    cursor:pointer;
    padding:4px;
}

.AccordionHeaderSelected td {
    font-family: "Cardo", PMingLiU, constantia, serif, SimHei;
    text-align:left;
    padding:4px;
    margin-top:22px;
}

.AccordionContent {
    background-color:rgb(244,244,244);
    color:blue;
    width:80%;
}

.TableTitle {
    background:rgb(215,228,242);
    color:rgb(68,140,288);
    padding-left:20px;
    border:1px solid #ccc;
    max-width:400px;
}

.TableContent {
    background:#ffffff;
    color:black;
    padding:20px;
    border:1px solid #ccc;
}

.TNC {
    font-weight:bold;
    color:rgb(68,140,208);
    font-size:20px;
    font-family:Khula,'Microsoft YaHei','Microsoft JhengHei';
}

.TNC ol {

}

.TNC li {
    text-align:justify;
    padding-bottom:30px;
    color:rgb(100,100,100);
    font-weight:initial;
    font-family:Khula,'Microsoft YaHei','Microsoft JhengHei';
}

/* change to black and white
html { 
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%); 
	-ms-filter: grayscale(100%); 
	-o-filter: grayscale(100%); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
	_filter: none; 
}
*/
/* Popup box BEGIN */

    .popup_overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
        z-index: 499;
        //background-color: white;
        /* cursor: pointer; */
    }

    #popup_window {
        position: fixed;
        width: 75%;
        max-width: 800px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #popup_close {
        font: 400 25px Arial !important;
        width: 24px;
        border-width: 0px;
        border-style: inset;
        border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
        border-image: initial;
        border-radius: 2px;
    }

/* Popup box BEGIN */