﻿
*{ margin:0; padding:0; font-size:10pt; font-family:Microsoft JhengHei;}
img{ border:none;}

a{text-decoration:none;color:#404040;}
ul li{ list-style:none;}
.clear{ clear:both;}
.left{ float:left;}
.right{ float:right;}
.layout{ width:728px; height:auto; overflow:hidden; margin:0 auto;}

/*body{  background:url(../images/logo.png) no-repeat;}*/
.header_logo {
    text-align:left;
    width:auto;
}

@media screen and (max-width: 510px) {
    .header_logo {
        width:80vw;
    }
}

.lang {
    padding: 20px 0;
}

.header {
    width:100%;
    display:inline-block;
    color:#40ad40;
    margin: 15px 0;
}

    .header + .header {
        margin-top:0px;
    }

.header-c1 {
    width:210px;
    float:left;
    font-weight:bold;
    font-size:19pt;
    padding-top: 8px;
}
.header-c2 {
    border-left: 1px dotted #40ad40;
    padding-left:5px;
    width:125px;
    float:left;
    font-size:10.5pt;
    line-height:1em;
    margin-top:3px;
    font-weight:bold;
    font-family:Arial Narrow;
    padding-top: 8px;
}
.header-c3 {
    margin-top:3px;
    width:20px;
    float:left;
    padding-top: 8px;
}

.header-c4 {
    margin-top:3px;
    float:left;
    padding-left:15px;
}
.step {
    width:100%;
    display:inline-block;
    color:#ffffff;
    font-weight:bold;
}

.step-box {
    width:175px;
    display:inline-block;
    float:left;
    background:#0aba0a;
    padding:2px;
    padding-bottom:0;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

    .step-box + .step-box {
        margin-left:4px;
    }
.step-num {
    padding-right:5px;
    padding-left:3px;
    width:15px;
    font-size:25pt;
    float:left;
    font-weight:normal;
    font-family:sans-serif;
    line-height: 1em;
}
.step-title {
    width:150px;
    float:left;
        line-height: 1em;
    padding-top: 3px;
}
    .step-title > #lang2 {
    font-family:Arial Narrow;
    }
.step-active {
    background:#019301;
}
#lang2 {
    font-family:Arial;
}

.content {
    border:2px solid #019301;
}

.desc {
    padding:5px;
    color: #404040;
    text-align:center;
    width:100%;
}

#div_err,#div_err2,#div_err3 {
    color:red;
    padding-left:10px;
}

.sub_header {
   margin: 10px 3px 5px 3px;
   font-weight:bold;
   color:#40ad40;
    border-bottom:3px solid #019301;
}
    .sub_header > #lang2 {
            font-size: 11pt;
            text-transform:uppercase;
        }
    .sub_header > span {
        font-size: 11pt;
    }

.sub_title {
   margin: 10px 3px 20px 3px;
   font-weight:bold;
   color:#40ad40;
    float: left;
}
    .sub_title > #lang2 {
            font-size: 10.3pt;
            font-family:Arial;
        }
    .sub_title > span {
        font-size: 10.3pt;
    }

.driver_title {
   margin: 10px 3px;
   font-weight:bold;
   color:#40ad40;
   margin-left:90px;
}
    .driver_title > #lang2 {
            font-size: 9.5pt;
            font-family:Arial;
        }
    .driver_title > span {
        font-size: 10pt;
    }

.textLabel > div.lang2 ,.div_accident > div.lang2,.div_accident2 > div.lang2,.div_driver_lbl >div.lang2,.textLabel >div> div.lang2 {
            font-size: 9pt;
            font-family:Arial;
}
.prevLabel{
    font-size:11pt;
       color: #404040;
}
.prevLabel > #lang1 {
    font-size:11pt;
       color: #404040;
}
.prevLabel > #lang2 {
    font-size:11pt;
   color:#404040;
}

.center-content {
    width:70%;
    min-width:350px;
    margin: 0 auto;
}

.qs_desc {
    margin: 10px 5px 5px 5px;
    font-weight:bold;
    color:#404040;
}

.qs_desc2 {
    margin: 10px 5px 5px 0px;
    font-weight:bold;
    color:#404040;
}

input.textValue {
    border: none;
    line-height: 28px;
    border:1px solid #adadad;
    width: 100%;
    color: #404040;
    height:28px;
    padding-left:3px;
    background:transparent;
    font-weight:bold;
}
input.textValueRead {
    border: none;
    line-height: 28px;
    border-bottom:none;
    width: 100%;
    color: #404040;
    height:28px;
    padding-left:3px;
    background:transparent;
    font-weight:bold;
    font-size:11pt;
}

.dateValue {
     height: 18px;
      border: none;
    border-bottom:1px solid #adadad;
     color: #404040;
     margin-right:5px;
     width:85px !important;
     padding-left: 5px;
}

.optValue {
   height: 32px;
   border-color: #adadad;
  appearance: none; -moz-appearance: none; -webkit-appearance: none; 
   background-image: url(../images/arrow.png);
    background-position:right 5px center ;
    background-repeat:no-repeat;
    color: #404040;
    padding-left:5px;
    font-weight:bold;
}

select::-ms-expand {
    display: none;
}

select.cal-TextBox::-ms-expand {
    display: block !important;
}

.numValue {
     height: 28px;
    border: none;
     border:1px solid #adadad;
     color: #404040;
     padding-left:3px;
    font-weight:bold;
}

.NtextValue {
    color: #404040;
}

td.textValue {
    padding-bottom: 10px;
     color: #404040;
}
div.textValue {
    color: #404040;
    padding-bottom: 10px;
}

.textLabel {
    width:170px;
    vertical-align: middle;
    white-space: nowrap;
   text-align:left;
   padding: 0 10px 10px 10px;
   color:#404040;
}

input[type='checkbox'] {
    zoom: 1.4;
    vertical-align: bottom;
    margin-top:5px;
}

.button {
    width:20%;
    padding:5px;
    /*background-color:#015f2c;
         color:white;
     border-radius:5px;
        */ 
     margin: 0 10px;
    
     border-color:#dddddd;
}
.button[disabled] {
    width:20%;
    padding:5px 10px;
     background-color:#adadad;
     margin: 0 10px;
     color:white;
     border-radius:5px;
     border-color:#dddddd;
}

.btn_driver {
    width: 150px;
    height:26px;
    line-height:26px;
    cursor: pointer;
    color:#40ad40;
    padding-left:34px;
     background-image: url(../images/adddriver.png);
    background-position:left 5px center ;
    background-repeat:no-repeat;
}

.btn_remove_driver {
    width: 190px;
    height:26px;
    line-height:26px;
    cursor: pointer;
    color:#40ad40;
    padding-left:32px;
     background-image: url(../images/removedriver.png);
    background-position:left 5px center ;
    background-repeat:no-repeat;
}


.tbl_driver {
    /*background-color:#d9d9d9;*/
    width:100%;
    /* padding:0 5px;*/
    padding-bottom: 5px;
}

.driver_dym {
    padding-left:15px;
}

.driver_td_space {
    width: 5px;
    color: #404040;
}

.tbl_accident {
    background-color:#eeeeee;
    width:100%;
    padding:0 5px;
    padding-bottom: 5px;
}

.tbl_accident2 {
    background-color:#eeeeee;
    padding:0 6px;
    display: inline-block;
    width:calc( 100% - 12px);
}

.div_accident {
    padding: 0px 7px;
    background-color:#eeeeee;
    font-weight:bold;
    width:120px;
    color:#404040;
    padding-right:0px;
}

.div_accident2 {
    padding: 0px 3px;
    color: #404040;
}

.div_accident3 {
    padding: 0px 7px;
    background-color:#eeeeee;
    padding-left:2px;
    padding-right: 5px;
}

div[id^=div_driver_accident] {
    width:100%;
}
tr[id^=div_driver_accident_prev]>td>div[id^=div_driver_accident_content] {
    width: calc( 100% - 10px);
}
.accidentLbl {
    width:calc( 100% - 130px );float: left;padding-right: 5px;
}
.claimAmtLbl {
    padding-left: 1px;text-align: left;width:79px;max-width:79px;float: left;
}
.claimYN {
   width: 62px;padding-bottom:0;white-space: nowrap;float:left;line-height:40px;
}
.CoverReq {
    width:300px;
}
.PrevLbl,.PrevLbl2 {
    width:285px !important;
}
.PrevLbl4 {
    width:275px !important;
}
.PrevLbl5 {
    width:50px !important;
}
    .prevLeft {
        float:left;width:55%;
    }
    .prevRight {
        float:left;width:45%;
    }
    .prevDetail {
        width:650px;
    }
.claim_attn {
    width:calc( 100% - 230px);height: 41px;
}
.claim_attn_prev {
    width:calc( 100% - 230px);height: 41px;
}
.claimAttnExtra {
    width:90px;float:left;height:41px;
}

.btn_remove_accident {
    width: 150px;
    height:26px;
    line-height:26px;
    cursor: pointer;
    color:#015f2c;
    padding-left:32px;
     background-image: url(../images/removedriver.png);
    background-position:left 5px center ;
    background-repeat:no-repeat;
}

.div_driver,.div_driver3 {
    /*padding: 0px 12px;*/
    text-align: left;
    font-weight:bold;
    width:80px;
        line-height: 25px;  
    color: #404040;
    /*background-color:#d9d9d9;*/
    padding-left: 12px;
}

.div_driver_lbl {
    padding: 0px 3px;
    text-align: left;    
    color: #404040;
}
.div_driver2 {
    padding: 0px 5px;
    text-align: center;
}


.div_driver_content {
     padding: 5px;
      background-color:#d9d9d9;
}

.strike {
    border-top:1px dotted #404040;
}

.td_num {
    min-width:15px;
    width:15px;   
    color: #404040;
    vertical-align: top;
}

.tbl_qs {
    padding: 0 10px;
}

.tbl_qs_input {
    padding-left:25px;
    padding-bottom:10px;
}

.e_table {
    width:920px;
    margin:0 30px;
}


.e2_table {
    width:980px;
    margin-top:5px;
    padding-right: 30px;
    padding-left: 5px;
}

.e3_table {
    width:740px;
    margin:0 30px;
    line-height:2em;
}

.bg_grey {
    background-color:#bfbfbf;
}

.bg_grey2 {
    background-color:#f2f2f2;
}
 


 input[type=checkbox] {
            display:none; 
    height:30px;
        }
 input[type=checkbox] + label {
    background-image: url(../images/checkbox.png);
           background-position:left 0px  center ;
           background-repeat:no-repeat;
    padding: 10px 30px;
    cursor:pointer;
}

 input[type=checkbox]:checked  + label {
     background-image: url(../images/checkbox_tick.png);
           background-position:left 0px center ;
           background-repeat:no-repeat;
   padding: 10px 30px;
    cursor:pointer;
}

.confirm_content {
    display: inline-block;
  padding-left: 10px;
  vertical-align: top;    
     width: 100%;
    text-align: justify;
}

.statement_content {
    display: inline-block;
  padding: 0 10px 5px 10px;    
     width: calc(100% - 20px);
    text-align: justify;
    color: #404040;
}

/* cal style */
.cal-body{font-family: "Arial";font-size: 13pt;border: 0px;background-color:white ;text-decoration: none;}
.cal-Table{border-top: 1px solid gray;border-left: 1px solid gray;border-right: 1px solid gray;border-bottom: 1px solid gray;color:white;background-color:#DDD;text-decoration: none;border-spacing:0px;border-collapse: separate;}
.cal-HeadCell{border: 1px;color: #339900;background-color: #DDD;text-decoration: none;}
.cal-GreyDate{color: #C0C0C0;background-color: white;text-decoration: none;}
.cal-DayCell{border: 0px;color: #B0B0B0;background-color: white;text-decoration: none;}
.cal-DayLink{color: #404040;background-color: white;text-decoration: none; }
.cal-TodayLink{color: #FF0000;background-color: white;text-decoration: none; }
.cal-TextBox{font-family: "Arial";font-size: 12pt;border: 0px;}


#div_document_list >div> table >tbody> tr > td {
    padding:3px;
    border-bottom:1px dashed #ddd;
}


.proposerCall {
    padding-left:205px;
}
.driver_sub_title {
    margin-left: 80px;
}
.wsClaim{
    padding-left:30px;
    width:105px;
}
    .sumInsured {
        width:calc( 100% - 100px);
    }

@media screen and (max-width: 521px) {
    .center-content {
        min-width:100%;
    }
    .layout {
        width: 95%;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
    }

    .header-c1 {
        width: 200px;
        font-size: 18pt;
        padding-top: 3px;
    }

    .header-c2 {
        width: 110px;
        font-size: 10pt;
        padding-top: 3px;
    }

    .header-c3 {
        padding-top: 3px;
    }

    .header-c4 {
        width: 100%;
    }

    .step-box + .step-box {
        margin-left: 0px;
    }

    .step-box:not(.step-active) {
        width: 25px;
    }

        .step-box:not(.step-active) > .step-title {
            display: none;
        }

    .button {
        width: 80% !important;
        margin: 3px 0;
    }
    .sub_title {
        margin-bottom:10px;
    }
    div.textLabel {
        width: 100%;
        padding-bottom: 3px;
        padding-top: 3px;
    }

    div.textValue {
        width: calc( 100% - 10px);
        padding-left: 10px;
    }
    .NtextValue {
        width:90% !important;
    }

    input.textValueRead {
        padding-left: 5px;
    }

    .proposerCall {
        padding-left: 10px;
    }

    .td_num {
        min-width: 15px;
        width: 15px;
        color: #404040;
        vertical-align: top;
    }

    .driver_td_space {
        width: 5px;
        vertical-align: top;
    }

    .div_accident {
        padding: 0px 12px;
        background-color: #eeeeee;
        font-weight: bold;
        width: 90%;
        text-align: left;
        line-height: 25px;
    }

    .div_accident2 {
        padding: 2px 3px;
        text-align: left;
        color: #404040;
        padding-left: 10px;
        width: 45px;
    }

    .div_accident3 {
        padding: 2px 5px;
        background-color: #eeeeee;
        width: calc( 100% - 70px);
        height:35px;
    }

    .div_driver3 {
        /*padding: 0px 12px;*/
        text-align: left;
        font-weight: bold;
        width: 100%;
        line-height: 25px;
        color: #404040;
        /*background-color:#d9d9d9;*/
        padding-left: 15px;
    }

    .driver_sub_title {
        margin-left: 10px;
        margin-bottom: 5px;
    }

    .driver_title {
        margin-left: 10px;
        margin-bottom: 3px;
        float: left;
    }

    #tbl_curr_proposer_driving_exp, #tbl_curr_lang {
        width: 145px;
    }
    .tbl_qs_input {
        width: calc( 100% - 25px) !important;
    }
    .tbl_driver {
        width:95%;
    }
    .claimInput {
        width: 80px !important;
    }

    .claimLbl {
        width: 105px !important;
    }

    .wsClaim {
        padding-left: 10px;
    }

    .accidentLbl{
        white-space:pre-wrap;
    }
    .claimYN {
        line-height:25px;
        width: 70px !important;
    }
    .claim_attn {    
        width: calc( 100% - 100px) !important;
        padding-left: 100px !important;
        height: auto;
        padding-top: 2px;
    }
    .claim_attn_prev {    
        width: calc( 100% - 100px) !important;
        padding-left: 100px !important;
        height: auto;
        padding-top: 2px;
    }
    .CoverReq {
        width:100%;
        margin-bottom:3px;
    }
    .PrevLbl {
        width:200px !important;
    }
    .PrevLbl2 {
        width:180px !important;
        white-space:pre-wrap;
    }
    .PrevLbl3 {
        width:100% !important;
    }
    .PrevLbl4 {
        width:55px !important;
    }
    .prevLeft {
        float:left;width:100%;
    }
    .prevRight {
        float:left;width:100%;
    }
    .prevDetail {
        width:300px !important;
    }
    input[name^=curr_insured_claim_amt1_] {
        margin-top:5px;
    }
    #tbl_curr_risk {
        width:100%;
    }
    .sumInsured {
        width:calc( 100% - 100px);
    }
    input[name=curr_make_year], input[name=curr_make],input[name=curr_model]{
        width:200px !important;
    }

    /*Upload Attachment*/
    .ui-dialog {
        max-width: 95%;
        left:2%;
    }
    #dvDefDial > iframe {
        width:100%;
    }
}

.redBorder {
    border: 1px solid red !important;
}

.docNoDisp {
    width:calc( 100% - 250px);
    float:right;
    font-size:16pt;
    font-weight:bold;
    color:#404040;
    text-align: right;
    padding-right:3px;
}
@media screen and (max-width: 521px) {
    .docNoDisp {
        font-size:11pt;
    }
}


input.sTextValue {
    border: none;
    line-height: 14px;
    border:1px solid #adadad;
    width: 100%;
    color: #404040;
    height:14px;
    padding:2px;
    padding-left:3px;
    background:transparent;
    font-weight:bold;
     font-size: 9pt;
     width: 105px;
     margin-right: 5px;
}

.sbutton {
    font-size: 8pt;
    width: 60px;
    padding: 1px;
}
    .sbutton[disabled] {
      background-color: #adadad;
          border-color: #dddddd;
    }

#msg_expired,#msg_nr {
    width: 100%;
    text-align: center;
    color: red;
    margin-top: -5px;
    margin-bottom: 10px;
}

    

*::-webkit-input-placeholder {
    color: #808080 !important;   
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: #808080 !important;   
}
*::-moz-placeholder {
    /* FF 19+ */
    color: #808080 !important;   
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: #808080 !important;   
}
