﻿body {
    font-size: medium;
    font-weight: bold;
    font-family: Arial;
    width: 100%;
    height: 100%;
}

    body input {
        font-size: medium;
        font-weight: bold;
        font-family: Arial;
    }

 

    table {
        border-collapse: separate;
        border: none;
        table-layout: fixed;
        padding: 0px 0px 0px 0px;
    }

#tblSalary, #tblSpending, #tblTax2014, #tblTax2018 {
    border-collapse:collapse;
 }

#CmbMaritalStatus {

    font-weight:bold;
}

 #tblTax2014 span, #tblSpending span, #tblSalary span {
        width: 100%;
        height: 100%;
    }

#txtAllowances {
    font-size: medium;
    font-weight: bold;
    font-family:Arial;
}

#tblSpending  {
    width: 100%;
    height: 100%;
}

#tblSpending input, #tblSalary input {
    width: 100%;
    height: 100%;
}
#tblTax2018 input, #tblTax2014 input{
    width: 96%;
    height: 90%;
    border:none;
}

.cmbselect {
    width: 50%;
    height: 100%;
    font-size: medium;
    color: navy;
    margin-top: 10px;
    font-size: medium;
    font-weight: bold;
    font-family: Arial;
}
 
#lblMarital {
    border: none;
    font-weight: bold;
    font-size: medium;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    color: navy;
}
.lbltitle {
    text-align: center;
    font-size: small;
    color: white;
    font-weight: bolder;
    background-color: royalblue;
    width: 35%;
    height: 100%;
    border: solid;
    border-width: 1px;
    border-color: black;
    vertical-align: central ;
}
 

#lblMonthly, #lblYearly {
    font-size: medium;
}
.lbltitle span {
    width: 100%;
    height: 100%;
}



    .LabelText {
        font-size: medium;
        color: navy;
        font-weight: bold;
        width: 100%;
        border-style: solid;
        border-width: 1px;
        padding-right: 10px;
    }

.btnradio {
    font-size: small;
    color: navy;
    font-weight: bold;
    width: 50px;
}



.divlblTaxPercentlbl {
    width: 100%;
    height: 50px;
    border-style: solid ;
    border-width: 1px;
    font-weight: bold;
    padding-top:6px; 
    color: navy;
    font-size: medium;
     vertical-align: middle;
    text-align: center;
    display: -webkit-flex;
    display: table;
    -webkit-align-items:center;
    position: relative;
    top: 3px;
 }

    .divlblTaxPercentlbl span {
        padding-right:0px;  

    }




.divlblTaxPercenttxt {
    width: 33%;
    height: 30px;
    border-style:none ;
    border-width: thin;
    font-weight: bold;
    color: navy;
    font-size: medium;
    position: relative;
    left: 0px;
    overflow: hidden;
}

.divlblTaxPercenttxt input{
    overflow:hidden ; 
    border:none; 
}
    .EmptyDiv {
        width: 120px;
        height: 30px;
        border-style: none;
        border-width: 1px;
        font-weight: bold;
        text-align: center;
        color: navy;
        font-size: medium;
        padding-right: 10px;
    }

 
#divtxtTakafol {
    width: 60%;
    height: 30px;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    color: navy;
    font-size: medium;
}

.txtbox {
    width: 100%;
    height: 100%;
    border-style: solid;
    border-width: thin;
    font-weight: bold;
    color: navy;
    font-size: medium;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: middle;
    position: relative;
 }

.EmptyDiv_txt {
    width: 35%;
    height: 30px;
    overflow:hidden; 
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    text-align:center;
    padding: 0px 0px 0px 0px;
    color: navy;
    top: -1px;
    font-size: medium;
    border-collapse: separate;
    border-spacing: 1px;
 }
}

.EmptyDiv_txt input {
    border: none;
    background-color: white;
    overflow: hidden;
}

.EmptyDiv_txt div {
    border: none;
    width: 100%;
    height: 100%;
}

.EmptyDiv_txt div input {
    border: none;
    background-color: transparent;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    width: 100%;
    height:100%;
}

.EmptyDiv_lbl {
    width: 120px;
    height: 30px;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    color: navy;
    font-size: medium;
    position: relative;
    overflow: hidden;
    top: 3px;
}
.divTitle {
    border:none ;
}

#div2018 {
    width:100%;
    color:navy;
}
.lblTax2014Title {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid;
    border-width: thin;
    border-spacing: 10px;
}

#tblResultCalculating {
    border :none;
}
#divResults {
    border: 1px solid navy;
    padding: 5px 5px 5px 5px;
    width: 90%;
    height: 160px;
}
 
#tblTax2018 div {
    width: 102%;
    height: 30px;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    color: navy;
    font-size: medium;
}

#tblTax2014 div {
    width: 100%;
    height: 30px;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    color: navy;
    font-size: medium;
}

.txtCenter {
    text-align: right;
 }

.txtCenter input[type="radio"] {
        margin-right: 20px; 
}

.txtCenter td {
        width: 50%;
    }

.txtCenter_1 {
    text-align: right;
    width: 100%;
}

    .txtCenter_1 input[type="radio"] {
        margin-right: 20px;
    }

    .txtCenter_1 td {
        width: 50%;
    }

.txtCenter_2 {
    text-align: right;
    width:100%;
}

    .txtCenter_2 input[type="radio"] {
        margin-right: 20px;
     }

.txtCenter_2 td {
    width: 50%;
}

.txtCenter_3 {
    text-align: right;
    width: 100%;
}

.txtCenter_3 input[type="radio"] {
        margin-right: 20px;
    }

.txtCenter_3 td {
        width: 50%;
    } 

.txtTax {
     background-color: white;
     height:100%;
}

.lblSpendingtitle {
    font-size: large;
    color: navy;
    font-weight: bold;
    border: 1px solid navy;
    border-bottom: none;
    padding: 2px 2px 2px 2px;
}

.disabled #tblSpending input {
    background-color: #ccc;
}

.enabled #tblSpending input {
    background-color: white;
}

#PnlErrMsg2014 {
    padding-top: 10px;
    float: right;
    width: 95%;
    height: 45%;
    background-color: #9ab1f6;
    border-color: #0d3bef;
    border-width: 2px;
    position: static;
    font-size: small;
    display: none;
    position: relative;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 1px;
    border-style: solid;
    border-radius: 10px;
}

#PnlErrMsg2018 {
    padding-top: 10px;
    float: right;
    width: 95%;
    height: 45%;
    background-color: lavender;
    border-color: #0d3bef;
    border-width: 2px;
    position: static;
    display: none;
    font-size: smaller;
    vertical-align: middle;
    text-align: center;
    margin-top: 1px;
    border-style: solid;
    border-radius: 10px;
}

#PnlErrMsg2020 {
    padding-top: 10px;
    float: right;
    width: 95%;
    height: 45%;
    background-color: lightblue;
    border-color: royalblue;
    border-width: 2px;
    position: static;
    display: none;
    font-size: small;
    vertical-align: middle;
    text-align: center;
    margin-top: 1px;
    border-style: solid;
    border-radius: 10px;
}


#divbkrgdimglog {
    position: relative;
    float: right;
    left: 0px;
    width: 5%;
    height: 100%;
    top: 0px;
 }

#divleftimage {
    position: relative;
    float: left;
    left: 0px;
    width: 80%;
    height: 90%;
    top: +10px;
    -ms-transform: scale(.5, 1.5); /* IE 9 */
    -webkit-transform: scale(.5, 1.5); /* Safari */
    transform: scale(.5, 1.5);
    padding-right: 9px;
}


#divright {
    position: relative;
    float: right;
    left: 0px;
    width: 3%;
    height: 100%;
    top: +118px;
}

#divrightimage  {
    position: relative;
    float: right;
    left: 0px;
    width: 80%;
    height: 100%;
    top: +9px;
    -ms-transform: scale(.4, .63); /* IE 9 */
    -webkit-transform: scale(.4, .63); /* Safari */
    transform: scale(.4, .63);
    padding-right: 9px;
}
 
#rightImage {
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
 }


#divlogoimg {
    margin-top:12px; 
    position: relative;
    float: left;
    width: 7%;
    height: 7%;
}

#logoimg {
    position: relative;
    float:right;
    width: 100%;
    height: 100%
}



#divMessage {
    width: 100%;
    height: 100%;
    z-index: 5;
     opacity: 0.4;
    background-color: lightgray;
    position: absolute;
    display:none;
}


#txtMessage {
    display: none;
    vertical-align: central;
    width: 20%;
    height: 20%;
    opacity: 1;
    position: absolute;
    box-shadow: 10px 10px 5px #888888;
    border: 2px solid navy;
    background-color: lightgoldenrodyellow;
    z-index:10;
     border-radius:10px;
}

#insidediv {
    display:table-cell;
     vertical-align:middle ;
     text-align :center;
 }
#insidediv span {
    opacity: 1;
    font-size: medium;
    font-weight: bold;
    font-family: Arial;
    color: navy;
    line-height: 10px;
    margin-bottom: 15px;
}

#insidediv input {
    opacity: 1;
    font-size: medium;
    font-weight: bold;
    font-family: Arial;
    color: navy;
    margin-bottom: 15px;
}

.centered {
    position: fixed;
    z-index: 100;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    width: 200px;
    height: 200px;
}

.parent {
    text-align: center;
    background-color: blue;
    height: 400px;
    width: 600px;
}

.block {
    height: 100px;
    width: 200px;
    text-align: left;
}

.center {
    margin: auto;
    background-color: green;
}

.left {
    margin: auto auto auto 0;
    background-color: red;
}

.right {
    margin: auto 0 auto auto;
    background-color: yellow;
}