@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500');

body {
    background: #0072ba url(Images/bg-home.png) no-repeat top center !important;
}

.XafVCap-Second {
    color: #fff;
    text-shadow: 0 0 5px #000;
    font-family: 'Kanit', sans-serif;
}

.xafFooter {
    color: #bbddf3;
    background-color: transparent;
    border-top: solid 1px #5ba7d8;
    outline: #054d7d solid 1px;
    outline-width: 1px 0 0 0;
}

.menuButtons_XafTheme .dxm-item {
    border: 1px solid #eee !important;
    border-radius: 3px !important;
  
}

    .menuButtons_XafTheme .dxm-item:hover {
        border: 1px solid #eee !important;
        /*background-color: #98FB98 !important;*/
        border-radius: 3px !important;
    }
/*ÊÕ Acition button*/

.firstEditorContainer .menuButtons_XafTheme .dxm-item:hover {
    background-color: #E4F8FA !important;
}
/*ÊÕ Acition button*/

.lastEditorContainer .menuButtons_XafTheme .dxm-item:hover {
    background-color: #E4F8FA !important;
}
/*ÊÕ Acition button*/

.firstEditorContainer .menuButtons_XafTheme .dxm-item {
    background-color: #DCDCDC !important;
}
/*ÊÕ Acition button*/
.lastEditorContainer .menuButtons_XafTheme .dxm-item {
    background-color: #DCDCDC !important;
}

.menuButtons a.dxalink span {
    font-family: 'Kanit', sans-serif;
}

.menuButtons a.dxalink:hover span {
    font-family: 'Kanit', sans-serif;
}

.xafNav .dxnb-link {
    font-family: 'Kanit', sans-serif;
}

.dxnbLite_XafTheme .dxnb-header, .dxnbLite_XafTheme .dxnb-headerCollapsed {
    font-size: 1.1em;
    color: #9a9a9a;
    white-space: nowrap;
    font-family: 'Kanit', sans-serif;
    background-color: #f09706;
}
/*for login page*/
        .LogonMainTable {
    box-shadow: rgba(0,0,0,0.5) 0 0 10px;
}

.LogonContent, .LogonMainTable {
    border-radius: 10px;
    border: 0;
}

.LogonContentCell .CardGroupContent {
    background-color: transparent
}

.LogonContentWidth {
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #d9edf2 40%, #9ed5e2 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%,#d9edf2 40%,#9ed5e2 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#d9edf2 40%,#9ed5e2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9ed5e2',GradientType=0 );
}

.LogonContent .CardGroupContent td.Caption {
    font-size: 1.2em !important;
    font-family: 'kanit',sans-serif !important;
    color: #069 !important
}

.LogonTemplate .menuButtons .dxm-item {
    border: none !important;
    background-color: #2c86d3 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

    .LogonTemplate .menuButtons .dxm-item:hover {
        border: none !important;
        background-color: #069 !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

.dxeTextBox_XafTheme {
    border: 1px Solid #69c !important;
    border-radius: 4px !important;
}
/*custom table*/
.dxgvHeader_XafTheme {
    border: 1px Solid #a7cee8;
    font-size: 1em;
    font-family: 'kanit',sans-serif;
    background-color: #255b7e;
}

    .dxgvHeader_XafTheme td {
        color: #e9f1f9 !important
    }

.dxgvEditFormDisplayRow_XafTheme td.dxgv, .dxgvInlineEditRow_XafTheme td.dxgv, .dxgvDataRow_XafTheme td.dxgv {
    border-left-color: #a7cee8;
    border-right-color: #a7cee8;
    border-bottom-color: #a7cee8
}

.dxgvDataRowAlt_XafTheme td {
    background-color: #e3f2fc
}

.dxgvEditFormDisplayRow_XafTheme td.dxgv, .dxgvInlineEditRow_XafTheme td.dxgv, .dxgvDetailCell_XafTheme td.dxgv, .dxgvDataRow_XafTheme td.dxgv, .dxgvDetailRow_XafTheme.dxgvADR td.dxgvAIC {
    border-bottom-color: #a7cee8 !important
}

.dxgvEditFormDisplayRow_XafTheme:last-child td.dxgv, .dxgvInlineEditRow_XafTheme:last-child td.dxgv, .dxgvDataRow_XafTheme:last-child td.dxgv, .dxgvDetailRow_XafTheme:last-child > td.dxgv {
    border-bottom-color: #a7cee8 !important
}

.dxgvPagerBottomPanel_XafTheme, .dxgvPagerTopPanel_XafTheme {
    border-left: 1px solid #a7cee8 !important;
    border-right: 1px solid #a7cee8 !important
}

.dxgvTable_XafTheme {
    border: solid 1px #88b1cd !important
}
/*custom header*/
.darkGray {
    background-color: #082436 !important;
}

#headerDivWithShadow.Shadow {
    border-bottom: 1px solid #476477;
}

.blue {
    background-color: #092437 !important
}

.borderBottom {
    border-bottom: 1px solid #184260 !important
}

.ToggleNavigationImage {
    background-position: -187px -66px;
    width: 48px;
    height: 48px;
    background-image: url(Images/custom-icon.png) !important;
}
/*Icon*/
.icon-zone {
    background-color: rgba(2, 43, 69, .7);
    padding-top: 20px;
    padding-bottom: 20px;
}

.circle {
    border-radius: 100px;
    display: block;
    height: 100px;
    padding: 10px 2px;
    width: 100px;
    font-size: 44px;
    text-align: center;
    margin: auto;
}

.Heading-icon {
    font: 400 20px/22px 'Kanit', sans-serif;
    color: #fff;
    margin: 5px 0px 5px 0px;
    display: inline-block;
    min-height: 40px;
}

    .Heading-icon:hover, a.icon-item:hover .Heading-icon {
        color: #fff;
        text-shadow: 0 0 10px #fff;
    }

a.icon-item, a.icon-item:link, a.icon-item:visited {
    text-decoration: none;
}

    a.icon-item i {
        -webkit-transition: all 0.45s ease-in-out;
        -moz-transition: all 0.45s ease-in-out;
        -o-transition: all 0.45s ease-in-out;
        /*-ms-transition: all 0.45s ease-in-out;*/
        transition: all 0.45s ease-in-out;
    }

    /*circle blue*/
    a.icon-item .border-blue, a.icon-item .border-blue:link, a.icon-item .border-blue:visited {
        border-top: solid 16px #3ffdff;
        border-right: solid 16px #26519f;
        border-bottom: solid 16px #3ffdff;
        border-left: solid 16px #26519f;
        color: #26519f;
        background-color: #fff;
    }

        a.icon-item .border-blue:hover, a.icon-item:hover .border-blue {
            border-top: solid 16px #26519f;
            border-right: solid 16px #3ffdff;
            border-bottom: solid 16px #26519f;
            border-left: solid 16px #3ffdff;
            color: #26519f;
            background-color: #fff;
            box-shadow: 0 0 20px #3ffdff
        }
    /*circle orange*/
    a.icon-item .border-orange, a.icon-item .border-orange:link, a.icon-item .border-orange:visited {
        border-top: solid 16px #ff0;
        border-right: solid 16px #f09706;
        border-bottom: solid 16px #ff0;
        border-left: solid 16px #f09706;
        color: #f09706;
        background-color: #fff;
    }

        a.icon-item .border-orange:hover, a.icon-item:hover .border-orange {
            border-top: solid 16px #f09706;
            border-right: solid 16px #ff0;
            border-bottom: solid 16px #f09706;
            border-left: solid 16px #ff0;
            color: #f09706;
            background-color: #fff;
            box-shadow: 0 0 20px #ff0
        }
    /*circle pink*/
    a.icon-item .border-pink, a.icon-item .border-pink:link, a.icon-item .border-pink:visited {
        border-top: solid 16px #ff7368;
        border-right: solid 16px #b01137;
        border-bottom: solid 16px #ff7368;
        border-left: solid 16px #b01137;
        color: #b01137;
        background-color: #fff;
    }

        a.icon-item .border-pink:hover {
            border-top: solid 16px #b01137;
            border-right: solid 16px #ff7368;
            border-bottom: solid 16px #b01137;
            border-left: solid 16px #ff7368;
            color: #b01137;
            background-color: #fff;
            box-shadow: 0 0 20px #ff7368
        }
    /*circle purple*/
    a.icon-item .border-purple, a.icon-item .border-purple:link, a.icon-item .border-purple:visited {
        border-top: solid 16px #855988;
        border-right: solid 16px #800388;
        border-bottom: solid 16px #855788;
        border-left: solid 16px #800388;
        color: #811488;
        background-color: #fff;
    }

        a.icon-item .border-purple:hover {
            border-top: solid 16px #800388;
            border-right: solid 16px #855988;
            border-bottom: solid 16px #800388;
            border-left: solid 16px #855988;
            color: #811488;
            background-color: #fff;
            box-shadow: 0 0 20px #855988
        }
    /*circle brown*/
    a.icon-item .border-brown, a.icon-item .border-brown:link, a.icon-item .border-brown:visited {
        border-top: solid 16px #cfa57b;
        border-right: solid 16px #b95e01;
        border-bottom: solid 16px #cfa57b;
        border-left: solid 16px #b95e01;
        color: #b95e01;
        background-color: #fff;
    }

        a.icon-item .border-brown:hover {
            border-top: solid 16px #cfa57b;
            border-right: solid 16px #cfa57b;
            border-bottom: solid 16px #b95e01;
            border-left: solid 16px #cfa57b;
            color: #b95e01;
            background-color: #fff;
            box-shadow: 0 0 20px #cfa57b
        }
    /*circle green*/
    a.icon-item .border-green, a.icon-item .border-green:link, a.icon-item .border-green:visited {
        border-top: solid 16px #0f0;
        border-right: solid 16px #005826;
        border-bottom: solid 16px #0f0;
        border-left: solid 16px #005826;
        color: #005826;
        background-color: #fff;
    }

        a.icon-item .border-green:hover {
            border-top: solid 16px #005826;
            border-right: solid 16px #0f0;
            border-bottom: solid 16px #005826;
            border-left: solid 16px #0f0;
            color: #005826;
            background-color: #fff;
            box-shadow: 0 0 20px #0f0
        }

    a.icon-item .Details {
        color: #fff;
        margin-bottom: 20px;
        font: normal 12px/14px 'tahoma', sans-serif;
    }


/*====================*/
/*css for regisProfiles*/
.regis-profile {
    padding: 0;
}

    .regis-profile .centered {
        margin: 0 auto;
        float: none !important;
        display: table;
    }

    .regis-profile .formLayout {
        max-width: 1300px;
        margin: auto;
    }


    .regis-profile .headcenter {
        text-align: center;
    }

    .regis-profile .scrollbar {
        height: 410px;
        width: 100%;
        overflow: auto;
    }

    .regis-profile .dxflGroupCell_Office2010Blue {
        background-color: #fff !important;
        border-radius: 4px;
        padding: 0 8px 8px 8px !important
    }

    .regis-profile .dxflGroupBox_Office2010Blue {
        padding: 15px !important;
    }

    .regis-profile .Head1 {
        font: 500 24px/40px 'Kanit', sans-serif !important;
        color: #069 !important
    }

    .regis-profile .Head2 {
        font: 500 23px/38px 'Kanit', sans-serif !important;
        color: #069 !important
    }

    .regis-profile .Head3 {
        font: 500 22px/36px 'Kanit', sans-serif !important;
        color: #069 !important
    }

    .regis-profile .font {
        font: 400 16px/24px 'Kanit', sans-serif !important;
        color: #000 !important;
    }

    .regis-profile p {
        font: 400 18px/24px 'Kanit', sans-serif !important;
        color: #000 !important;
        margin-bottom: 20px
    }

    .regis-profile ul li {
        list-style-type: none !important;
        padding-bottom: 20px;
    }

    .regis-profile .dxrpcontent {
        background-color: #fff !important;
        margin: 15px auto;
    }

    .regis-profile fieldset {
        border: 1px solid #ddd !important;
        margin-bottom: 20px;
        padding: 10px;
        position: relative;
        border-radius: 4px;
        background-color: #fff;
        padding-left: 10px !important;
        width: 100%;
    }

    .regis-profile legend {
        margin-bottom: 0px;
        width: 35%;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px 5px 5px 10px;
        background-color: #069;
        font: 500 18px/22px 'Kanit', sans-serif !important;
        color: #fff !important
    }

    .regis-profile .HeadZone {
        background-color: #082436;
        margin-bottom: 20px;
        padding: 5px 10px;
        max-width: 100%;
        height: auto;
    }

    .regis-profile .FooterZone {
        background-color: #082436;
        padding: 10px;
        text-align: center;
        margin-top: 20px;
        bottom: 0;
        left: 0;
        width: 100%;
    }

        .regis-profile .FooterZone span {
            font: 300 13px/30px 'Kanit', sans-serif !important;
            color: #fff !important;
        }

    .regis-profile .row {
        margin-right: 0px;
        margin-left: 0px;
    }

    .regis-profile .ContentZone {
        width: auto;
        /*padding: 5px 10px;*/
        height: auto;
        max-width: 100%;
        /*text-align:center;*/
    }

/*====================*/

/*====================*/
/*by r*/

/*color textbox*/
.dxeTextBox_XafTheme .dxeEditArea_XafTheme {
    color: #160DD3 !important;
}

/*color Combobox*/
.dxeEditArea_XafTheme, .dxeListBoxItem_XafTheme {
    color: #160DD3 !important;
}

/*Color Disabled*/
.dxeDisabled_XafTheme {
    color: #160DD3 !important;
}


/*.WebEditorCell span,.WebEditorCell a*/
.dxWeb_edtCheckBoxUnchecked_XafTheme, .dxICheckBox_XafTheme, .dxichSys {
    border: solid 0px
}

/*=======================.dxnb-item, .dxnb-link, .dxnb-last, */
.dxnb-itemSelected, .dxtv-ndSel {
    /*background-color: #8c8c8c !important;*/
    background-color: #fe890b !important;
}

/*,.dxtc-lead,.dxtc-psi*/
/*.dxtc-activeTab,.dxtc-last*/
/*, .dxtc-activeTab*/
.dxtc-tab {
    background-color: #E6E6E6 !important;
}

/*GroupHeader Layout*/
div.GroupHeader, .Label {
    background-color: #809fff !important;
    color: #000 !important;
}

/*td.dxgv Group ListView*/
.dxgvGroupRow_XafTheme {
    background-color: #e6e6ff !important;
    font-weight: bold;
    color: #2e2eb8;
    /*color: #9fdfbf;*/
}

/*====================*/

.Caption {
    font: 400 15px/15px 'Kanit', sans-serif;
    color: #994d00;
    width: 100% !important;
}

.StaticText {
    font: 400 15px/15px 'Kanit', sans-serif !important;
    color: #994d00 !important;
    width: 100% !important;
}
/*.dx-vam {
    font: 400 15px/15px 'Kanit', sans-serif;
    color: red !important;
}*/ 
/*.dxtc-tab, .dxtc-activeTab {
    background-color: cornflowerblue !important;
    
}*/

/*.dxtc-tab dxtc-psi {
    background-color: red !important;
}
.dxtc-tab, .dxtc-activeTab {
    background-color: #fe890b !important;
}*/




/*vertical menu*/
.dxnbLite_XafTheme .dxnb-item.dxnb-link, .dxnbLite_XafTheme .dxnb-item .dxnb-link, .dxnbLite_XafTheme .dxnb-large.dxnb-link, .dxnbLite_XafTheme .dxnb-large .dxnb-link {
    padding: 6px 17px 7px 37px !important;
    white-space: nowrap;
}

.dxnbLite_XafTheme a {
    color: #000 !important;
}

.dxnbLite_XafTheme .dxnb-header, .dxnbLite_XafTheme .dxnb-headerCollapsed {
    color: #444079 !important;
}

.dxnbLite_XafTheme .dxnb-header, .dxnbLite_XafTheme .dxnb-headerCollapsed {
    border-top: 1px solid #a1acc7 !important;
    background-color: #c0e3eb !important;
}
/*table*/
.dxgvControl_XafTheme, .dxgvDisabled_XafTheme {
    color: #000 !important;
}
/*tab*/
.dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-activeTab .dxtc-link {
    color: #000 !important;
}

.dxtcLite_XafTheme > .dxtc-stripContainer .dxtc-link {
    color: #000 !important;
}
.xafNav .dxnbLite_XafTheme .dxnb-item.dxnb-itemSelected, .xafNav .dxnbLite_XafTheme .dxnb-item.dxnb-itemSelected a, .xafNav .dxnbLite_XafTheme .dxnb-item.dxnb-largeSelected, .xafNav .dxnbLite_XafTheme .dxnb-item.dxnb-largeSelected a {
    background-color: #fe890b !important;
}

/*disable*/
.dxeTextBox_XafTheme dxeReadOnly_XafTheme, .dxeDisabled_XafTheme {
    background-color: #E4F8FA !important;
}

/*custom*/
.MainMenuTruncateCaption {
    width: 200px !important;
    color: #ffffff !important;
}

/*custom*/
.dxgvSelectedRow_XafTheme td {
    background-color: #ffcc66 !important;
}

/*txt pass*/
/*.dxeTextBox {
    padding: 5px 2px 4px 7px !important;
    border-radius: 4px !important;
    border:1px Solid #69c !important;
}*/

/*wrap*/
/*.dxgvHeader_XafTheme .dx-wrap {
    white-space: normal !important;
}*/

/* updatev20 */
.ToggleNavigationImage {
background-size:auto !important;

}

/*custom logon »ØèÁµÃ§¡ÅÒ§*/
#Logon_UPPopupActions .dxm-ltr .dxm-main, #Logon_UPPopupActions .dxm-ltr .dxm-horizontal ul.dx {
    float: none;
    margin:auto;
}