/*

Purple:
        
P500:   #9C27B0
P700:   #7B1FA2
P100:   #E1BEE7

A200:   #69F0AE
A100:   #B9F6CA
A400:   #66BB6A
    
    [Dark Theme]
L800    #424242
L850    #303030
L900    #212121
Black   #000000
    
    */


/*body {
    height: 100vh;
    -webkit-overflow-scrolling: auto;
    font-family: MainFont;
    padding: 0;
    margin: 0;
   
}*/

html {
}


body {
    height: auto;
    width: 100%;
    background-color: #3d3d3d;
    color: rgba(255, 255, 255, 0.8);
    -webkit-overflow-scrolling: auto;
    font-family: MainFont;
    padding: 0;
    margin: 0;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

  a {
        color: var(--P100);
    }

         a:hover {
            text-decoration: underline;
        }



table {
    table-layout: fixed;
}

.fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe,
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
    background-color: white !important;
}

.fb-comments {
    background-color: white !important;
    color: rgba(0,0,0,0.87);
}


.dialog {
    position: fixed;
    z-index: 102;
    /*top: 50%;
    left: 50%;
    margin: -125px 0 0 -100px;
    width: 250px;
    height: auto;*/
    background-color: #F5F5F5;
    box-shadow: 0px 0px 15px #d2ceca;
    -moz-box-shadow: 0px 0px 15px #d2ceca;
    -webkit-box-shadow: 0px 0px 15px #d2ceca;
    border: 0px #999999 solid;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    padding: 12px;
    right: 0;
    left: 0;
    top: 96px;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-left: auto;
    height: auto; /*334*/
    width: 90%;
    max-width: 512px;
}

.abs {
    position: absolute;
}

#divDimmedBG, .divDimmedBG {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.54);
    z-index: 101;
}


#divContent, #divCentralMenu {
    top: 88px;
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 0;
    position: absolute;
    /*overflow-y: scroll;*/
    -webkit-overflow-scrolling: touch;
    /*-webkit-transform: translate3d(0,0,0);*/
    /*background-color: white;*/
    background-color: #3d3d3d;
    background-size: contain;
}

    #divCentralMenu a:hover {
        text-decoration: none
    }

#divCentralMenu {
    z-index: 2;
    /*bottom: 1px;*/
    height: inherit;
    background-color: #3d3d3d;
}

.disableScroll {
    background-color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

table {
    border-collapse: collapse;
}

input[type="button"], input[type="submit"], button {
    border: 0px;
    background-color: VAR(--P500);
    /*padding: 2px;
    width: auto;*/
    height: 32px;
    color: white;
    border-radius: 16px;
    font-family: MainFont;
    line-height: 32px;
    padding-left: 12px;
    padding-right: 12px;
    cursor: pointer;
    font-size: 14px;

    /*background-color: VAR(--P100);
    border: 2px solid rgba(0, 0, 0, 0.87);
    color: rgba(0, 0, 0, 0.87);*/
}

    input[type="button"]:disabled, input[type="submit"]:disabled, button:disabled {
        background-color: VAR(--P100);
    }

input[type="text"], input[type="password"], select, textarea {
    border-width: 0;
    -webkit-appearance: none;
    font-family: MainFont;
}

::-webkit-input-placeholder {
    color: rgba(0,0,0,0.54);
}

:-moz-placeholder {
    color: rgba(0,0,0,0.54);
}

::-moz-placeholder {
    color: rgba(0,0,0,0.54);
}

:-ms-input-placeholder {
    color: rgba(0,0,0,0.54);
}

input:-moz-read-only { /* For Firefox */
    background-color: yellow;
}

/*input:read-only {
    color: rgba(0,0,0,0.38);
}*/

.msg {
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 100vw;
    text-align: center;
    z-index: 105;
    display: none;
    /*background-color:#F5F5F5;*/
    border-top: 1px solid rgba(0,0,0, 0.12);
    padding: 1vw;
}

    /*.msg div {
        padding:4px
    }*/

    .msg #close {
        border: 1px solid rgba(0,0,0,0.54);
        float: right;
        color: rgba(0,0,0,0.87);
        background-color: transparent;
        position: relative;
        margin: 4px;
        white-space: normal;
    }

    .msg .text {
        text-align: left;
        margin-bottom: 4px;
    }


.msgError {
    background-color: red;
    color: rgba(255, 255, 255, 1);
}

    .msgError a {
        font-weight: bold;
        color: yellow;
    }

.msgSuccess {
    background-color: #82B1FF;
    color: rgba(0, 0, 0, 0.87);
}

.msgWarning {
    background-color: #FF9800;
    color: rgba(255, 255, 255, 0.7);
}

.msgGray {
    background-color: #3d3d3d;
    color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
}

    .msgGray #close {
        border-width: 0;
        background-color: rgba(255, 255, 255, 0.15);
        color: white;
    }

        .msgGray #close:hover {
            background-color: VAR(--A100);
            color: rgba(0, 0, 0, 0.87);
        }

/*.Normal, .msgSmallWarning, .msgSmallError, .msgSmallSuccess, .msgMsgBox, msgGreyscale

.msgBigError, .msgSmallError {
}

.msgBigSuccess, .msgSmallSuccess {
}

.msgBigWarning, .msgSmallWarning {
}

.msgBigMsgBox, .msgMsgBox {
}*/


.HTMLForm {
    background-color: #F5F5F5;
    color: rgba(0, 0, 0, 0.87);
    /*background-color: #3d3d3d;
    color: rgba(255,255,255, 0.7);*/
    width: 100%;
    float: left;
}

    .HTMLForm div {
        float: left;
        width: 100%;
    }

    .HTMLForm .section {
        /*background-color: white;*/
        width: 100%;
        float: left;
    }



    .header, .HTMLForm .header {
        color: rgba(0, 0, 0, 0.54);
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

    /*.HTMLForm .groupHeader {
           background-color: #E1BEE7;
           color: #7B1FA2;
           width: 100%;
        }*/



    .HTMLForm .intro {
        padding: 8px;
    }

    .HTMLForm .cmdPanel {
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0, 0.06);
        padding: 4px;
    }


        .HTMLForm .cmdPanel .sep {
            width: 4px;
        }



    .HTMLForm .disabled, .HTMLForm .disabled input, .HTMLForm .disabled select, .HTMLForm .disabled textarea {
        color: rgba(0,0,0, 0.38);
    }

    .HTMLForm .hidden {
        display: none;
    }



    .HTMLForm .cmdPanel .img {
        background-position: center;
        background-repeat: no-repeat;
        background-color: transparent;
        /*background-color:transparent*/
    }

    .HTMLForm .cmdPanel .recSelector {
        border-bottom-width: 0px;
    }


    .HTMLForm .buttons {
        width: 100%;
        text-align: right;
    }




    .HTMLForm .labelCheck {
        width: 100%;
        float: left;
        margin: 0;
    }

    .HTMLForm label {
        width: 100%;
        display: block;
        float: left;
        margin: 0;
        color: #7B1FA2;
    }


    .HTMLForm input, .HTMLForm select, .HTMLForm textarea, .HTMLForm .text {
        width: 100%;
        /*box-sizing:padding-box;*/
        /*left:4px;
        right:4px;*/
        position: relative;
        float: left;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        -khtml-border-radius: 9px;
        border-radius: 9px;
        border: 1px solid #E0E0E0;
        margin: 0px !important;
        background-color: white;
        color: rgba(0, 0, 0, 0.87)
    }



    .HTMLForm .day {
        width: 25%;
        max-width: 64px;
    }

    .HTMLForm .month {
        width: 45%;
        max-width: 128px;
    }

    .HTMLForm .year {
        width: 30%;
        max-width: 96px;
    }

    .HTMLForm .text {
        color: rgba(0,0,0,0.54);
    }



    .HTMLForm input[type="checkbox"], .HTMLForm input[type="radio"] {
        width: auto;
        vertical-align: middle;
        float: left;
        background-color: transparent;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }




    .HTMLForm .field, .HTMLForm .fieldAdmin {
        width: 100%;
        /*border-bottom: 1px solid #eeeeee;
        border-right: 1px solid #eeeeee;
        border-top: 1px solid #eeeeee;*/
        margin-top: -1px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 8px;
        padding-bottom: 4px;
    }

        .HTMLForm .fieldAdmin input[type="text"], .HTMLForm .fieldAdmin select, .HTMLForm .fieldAdmin textarea, .HTMLForm .fieldAdmin label, .HTMLForm .fieldAdmin .fieldFooter, .HTMLForm .fieldAdmin input[type="file"] {
            width: 85%;
        }

        .HTMLForm .fieldAdmin input[type=submit] {
            float: right;
        }

    .HTMLForm .fieldFooter {
        color: rgba(0,0,0,0.54);
    }


    .HTMLForm .hiddenFields input[type=submit] {
        width: auto;
        float: left;
        background-color: #82B1FF;
    }

    .HTMLForm .hiddenFields label {
        display: none;
    }

    .HTMLForm .hiddenFields .fieldAdmin {
        width: auto;
        float: left;
    }

    .HTMLForm .dataTable {
        width: 100%;
    }

        .HTMLForm .dataTable thead td {
            background-color: #FAFAFA;
            color: rgba(0, 0, 0, 0.54);
            border-bottom: 1px solid rgba(0,0,0,0.06);
        }

        .HTMLForm .dataTable td {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .HTMLForm .dataTable .prop, .HTMLForm .dataTable .del, .HTMLForm .dataTable .delDis, .HTMLForm .dataTable .recUp, .HTMLForm .dataTable .recDown, .HTMLForm .dataTable .new {
            background-repeat: no-repeat;
            background-color: transparent;
            background-position: center;
        }

        .HTMLForm .dataTable .prop {
            background-image: url('/images/showmore.png');
        }

        .HTMLForm .dataTable .del {
            background-image: url('/images/del.gif');
        }

        .HTMLForm .dataTable .delDis {
            background-image: url('/images/deldis.gif');
        }

        .HTMLForm .dataTable .recUp {
            background-image: url('/images/up.gif');
        }

        .HTMLForm .dataTable .recDown {
            background-image: url('/images/down.gif');
        }

        .HTMLForm .dataTable .new {
            background-image: url('/images/new.gif');
        }

.HTMLReport {
    margin: 0;
    width: 100%;
}

    .HTMLReport a {
        color: var(--P100);
    }

        .HTMLReport a:hover {
            text-decoration: underline;
        }

    .HTMLReport .data, .HTMLReport .params, .HTMLReport .options {
        width: 100%;
    }

    .HTMLReport .params, .HTMLReport .HTMLForm {
        background-color: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.8);
    }

    .HTMLReport .HTMLForm {
        padding-left: 8px;
        border-left: 8px solid rgba(0, 0, 0, 0.12);
        padding-right: 8px;
        border-right: 8px solid rgba(0, 0, 0, 0.12);
    }

        .HTMLReport .HTMLForm .header {
            color: rgba(255, 255, 255, 0.8);
            padding-left: 4px;
        }

        .HTMLReport .HTMLForm label {
            color: var(--P100);
        }

    .HTMLReport .params input[type="text"], .HTMLReport .params input[type="password"], .HTMLReport .params select, .HTMLReport .params textarea {
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        -khtml-border-radius: 9px;
        border-radius: 9px;
        border: 0px solid rgba(0, 0, 0, 1);
        /*margin: 1%!important;*/
        width: 100%;
        /*background-color: rgba(255, 255, 255, 0.3);*/
        background-color: white;
    }


    .HTMLReport .options td {
        /*background-color:green*/
    }

    .HTMLReport .data thead td {
        background-color: rgba(0, 0, 0, 0.06);
        color: rgba(255, 255, 255, 0.50);
        border-bottom: 1px solid rgba(0,0,0,0.12);
        overflow: hidden;
    }

    .HTMLReport .data td {
        border-bottom: 1px solid rgba(0,0,0,0.12);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .HTMLReport .data .GroupHeader, .HTMLReport .data .subtotal {
        background-color: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
    }



#divLoginRoot {
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #F5F5F5;
}

    #divLoginRoot table {
        margin: 0 auto;
        background-color: #F5F5F5;
        border: 1px solid rgba(0,0,0, 0.06);
        margin-top: 3vw;
    }

    #divLoginRoot #eMoneyLoginBtn {
        width: auto;
        height: auto;
        float: none;
    }

    #divLoginRoot input[type="text"] {
        border-bottom: 1px solid #fafafa;
    }



    #divLoginRoot .commonLogin {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        float: none;
        background-color: white;
    }


    #divLoginRoot .desc, #divLoginRoot .buttons, #divLoginRoot .cmd, #divLoginRoot .label {
        padding: 1.5vw;
        width: 100%;
        line-height: 7vw;
        text-align: center;
        background-color: #f5f5f5;
    }

    /*#divLoginRoot .buttons, #divLoginRoot .cmd, #divLoginRoot .label {
        background-color:white
    }*/

    #divLoginRoot .desc {
        color: rgba(0,0,0,0.54);
    }



h1, h2, h3 {
        text-align: left;
        margin: 0;
        padding: 8px;
        font-weight: normal;
        Color: VAR(--P100);
        font-family: 'HeaderFont2';
        font-size: 22px;
    }

    h2 {
        font-size: 18px;
    }

    h3 {
        font-size: 16px;
    }


@media screen and (max-width: 480px) {
    .msgBlk {
        background-color: #F5F5F5;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
        padding: 2vw;
        margin: 2vw;
    }

    #divLoginRoot table {
        border: 0px solid rgba(0,0,0, 0.12);
    }

    /*body {
        font-size: 4vw;
    }*/

    /*.msg div {
        padding:1vw
    }*/

    .msg button {
        font-size: 4vw;
        padding: 1vw;
        height: auto;
    }

    .msg .text {
        margin-bottom: 1vw;
    }

    /*input[type="button"], input[type="submit"], button {
        font-size: 4vw;
    }*/

    HTMLForm input, .HTMLForm select, .HTMLForm textarea, .HTMLForm .text {
        font-size: 4vw;
        padding: 2vw;
    }

    .HTMLForm input, .HTMLForm select {
        height: 10vw;
    }

        .HTMLForm input[TYPE="CHECKBOX"], .HTMLForm input[TYPE="radio"] {
            height: 8vw;
        }


    .HTMLForm label {
        font-size: 3.5vw;
        padding-left: 1vw;
        line-height: 5.5vw;
        margin-top: 1vw;
    }


    .HTMLForm .para {
        padding-left: 1vw;
    }

    .HTMLForm .labelCheck {
        padding-left: 2vw;
        padding-right: 2vw;
        /*line-height: 8vw;*/
        font-size: 3.5vw;
    }

    input[type=checkbox] {
        -webkit-transform: scale(1.4, 1.4);
}
    

    .HTMLForm .section .header, .HTMLForm .header {
        height: 12vw;
        line-height: 12vw;
        padding-left: 4vw;
    }


    .HTMLForm .section .groupHeader {
        height: auto;
        padding-left: 3vw;
        margin-top: 0;
        font-size: 4vw;
        font-weight: bold;
        padding-top: 4vw;
        border-bottom: 1px solid #eeeeee;
    }


    .HTMLForm .cmdPanel .img {
        width: 12%;
        height: 12vw;
        margin: 0 !important;
        border: none;
    }

    .HTMLForm .cmdPanel .recSelector {
        width: 52%;
        margin: 0 !important;
        border: none;
    }

    .HTMLForm .cmdPanel .txt {
        margin: 1vw;
        width: auto;
        padding-left: 2vw;
        padding-right: 2vw;
    }

    .HTMLForm .cmdPanel .sep {
        width: 4px;
    }

    .HTMLForm .fieldCmd button {
        margin: 1vw;
        font-size: 3.5vw;
    }


    .HTMLForm .cmdPanel .txtLong {
        margin: 4vw;
        width: 92vw;
    }




    .HTMLForm input[type="checkbox"], .HTMLForm input[type="radio"] {
        margin-right: 2vw!important;
    }

    .HTMLForm .fieldFooter {
        padding-left: 3vw;
    }

    .HTMLForm .fieldAdmin input[type=submit] {
        height: 10vw;
        width: 10vw;
        margin-right: 2vw;
    }



    .HTMLForm .hiddenFields input[type=submit] {
        margin: 1vw;
    }


    .HTMLForm .dataTable thead td {
        height: 12vw;
        line-height: 12vw;
        padding-left: 4vw;
    }

    .HTMLForm .dataTable td {
        padding: 1vw;
    }

    .HTMLForm .dataTable .btn {
        width: 12vw;
    }

    .HTMLForm .dataTable .prop, .HTMLForm .dataTable .del, .HTMLForm .dataTable .delDis, .HTMLForm .dataTable .recUp, .HTMLForm .dataTable .recDown, .HTMLForm .dataTable .new {
        width: 12vw;
        height: 12vw;
    }

    .HTMLForm .footer {
        height: 14vw;
        width: 100%;
        float: right;
    }

    .HTMLReport .imp, .HTMLReport .lessimp {
        display: none;
    }
}


@media screen and (min-width: 480px) {

    .msgBlk {
        background-color: #F5F5F5;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        -khtml-border-radius: 8px;
        border-radius: 8px;
        padding: 8px;
        margin: 8px;
    }


    .msg {
        padding: 8px;
    }

    /*input[type="button"], input[type="submit"], button {
        font-size: 10pt;
    }*/

    .HTMLForm input, .HTMLForm select, .HTMLForm textarea, .HTMLForm .text {
        padding: 4px;
    }

        .HTMLForm input[type="file"] {
            padding: 0pt;
            background-color: white;
            -webkit-appearance: none;
            /*border-width:0px;
          border:none;*/
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            -khtml-border-radius: 0px;
            border-radius: 0px;
        }


    .HTMLForm input, .HTMLForm select {
        height: 28pt;
    }

        .HTMLForm input[TYPE="CHECKBOX"], .HTMLForm input[TYPE="RADIO"] {
            height: 24pt;
        }

    .HTMLForm label {
        font-size: 10pt;
        padding-left: 2pt;
        padding-bottom: 2pt;
        line-height: 12pt;
        margin-top: 7.2pt;
    }


    .HTMLForm .para {
        padding-left: 2pt;
    }


    .HTMLForm .labelCheck {
        padding-left: 4.8pt;
        padding-right: 4.8pt;
        font-size: 10pt;
        line-height: 24pt;
    }

    .HTMLForm .section .header, .HTMLForm .header {
        height: 28pt;
        line-height: 28pt;
        padding-left: 7.2pt;
    }


    .HTMLForm .section .groupHeader {
        line-height: 24pt;
        padding-left: 7.2pt;
        margin-top: 0;
        border-bottom: 1px solid #eeeeee;
        color: rgba(0,0,0, 0.87);
        width: 100%;
        padding-top: 8px;
        /*border-top: 1px solid rgba(0,0,0, 0.12);*/
        height: auto;
        font-weight: bold;
    }


    .HTMLForm .cmdPanel .img {
        width: 12%;
        height: 28pt;
        margin: 0 !important;
        border: none;
    }

    .HTMLForm .cmdPanel .recSelector {
        width: 52%;
        margin: 0 !important;
        border: none;
    }

    .HTMLForm .cmdPanel .txt {
        margin: 2.4pt;
        width: auto;
        padding-left: 5pt;
        padding-right: 5pt;
    }

    .HTMLForm .cmdPanel .sep {
        width: 4px;
    }

    .HTMLForm .fieldCmd button {
        margin: 2.4pt;
        font-size: 8pt;
    }


    .HTMLForm .cmdPanel .txtLong {
        margin: 2.4pt;
        min-width: 100pt;
        width: auto;
    }


    .HTMLForm input[type="checkbox"], .HTMLForm input[type="radio"] {
        margin-right: 4.8pt!important;
    }

    .HTMLForm .fieldFooter {
        padding-left: 7.2pt;
    }

    .HTMLForm .fieldAdmin input[type=submit] {
        height: 24pt;
        width: 24pt;
        margin-right: 5pt;
        float: right;
    }

    .HTMLForm .hiddenFields input[type=submit] {
        margin: 2.4pt;
    }


    .HTMLForm .dataTable thead td {
        height: 28pt;
        line-height: 28pt;
        padding-left: 7.2pt;
    }

    .HTMLForm .dataTable td {
        padding: 2.4pt;
    }

    .HTMLForm .dataTable .btn {
        width: 28pt;
    }

    .HTMLForm .dataTable .prop, .HTMLForm .dataTable .del, .HTMLForm .dataTable .delDis, .HTMLForm .dataTable .recUp, .HTMLForm .dataTable .recDown, .HTMLForm .dataTable .new {
        width: 28pt;
        height: 28pt;
    }

    .HTMLForm .hs {
        width: 50%;
    }

    .HTMLForm .footer {
        height: 32pt;
        width: 100%;
        float: right;
    }

    .HTMLReport .lessimp {
        display: none;
    }

    .HTMLReport .imp {
        display: table-cell;
    }

    #divLoginRoot .desc, #divLoginRoot .buttons, #divLoginRoot .cmd, #divLoginRoot .label {
        padding: 4px;
        line-height: 22px;
    }
}


@media screen and (min-width: 1024px) {


    .HTMLReport .imp, .HTMLReport .lessimp {
        display: table-cell;
    }
}


.HTMLForm .hiddenFields input[type=submit] {
    width: auto;
}