body { }

.loading { text-align: center; padding-top: 100px; padding-left: 110px; color: Red; background-image: url(../../images/shared/spinner.gif); background-repeat: no-repeat; background-position: center bottom; }

.loading2 { text-align: center; padding-top: 30px; padding-left: 50px; color: Red; background-image: url(../../images/shared/spinner.gif); background-repeat: no-repeat; background-position: center bottom; }
.loading3 { text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 50px; color: Red; background-image: url(../../images/shared/spinner.gif); background-repeat: no-repeat; background-position: center bottom; }

.icon-modal { /*background-image: url(../../images/shared/spinner.gif);*/ background-position: center center; background-repeat: no-repeat; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; z-index: 99; display: block; filter: alpha(opacity=160); -moz-opacity: .35; opacity: .35; cursor: progress; }


.icon-button { color: #434951; /*color:#3B5998;*/ text-decoration: none; font-size: 11px; font-weight: bold; }
    .icon-button:hover { color: #0085CF; text-decoration: underline; cursor: pointer; }

/* ################ ICON Grid ################ */

.icon-grid { width: 100%; table-layout: fixed; border: 0; }
    .icon-grid th { height: 35px; }
    .icon-grid tr { height: 30px; }
.icon-grid-col { width: inherit; padding-left: 10px; border-bottom: solid 1px #EEF2F7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.icon-grid-col-first { border-left: solid 1px #AED0EA; width: inherit; padding-left: 10px; border-bottom: solid 1px #EEF2F7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.icon-grid-col-last { border-right: solid 1px #AED0EA; width: inherit; padding-left: 10px; border-bottom: solid 1px #EEF2F7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-last { border-bottom: solid 1px #AED0EA !important; }
.col-center { text-align: center; padding-left: 0; }
.col-right { text-align: right; padding-right: 10px; }
.gPaging { display: inline; width: 50%; text-align: left; float: left; margin-top: 5px; }
.gTotal { display: inline; width: 50%; vertical-align: top; color: #555; text-align: right; float: right; }
.icon-grid .icon-button { font-size: 11px; }
.icon-grid .loading { text-align: center; vertical-align: middle; /*padding-top : 100px;
    padding-bottom: 100px;*/ padding-left: 110px; color: Red; background-image: url(../../images/shared/spinner.gif); background-repeat: no-repeat; background-position: center; }
/*-----------------------------------------------------------------------------------------------*/


/* ################ ICON Container ################ */

.detail { border: 1px solid #C2CFDF; padding: 20px 20px 20px 20px; background-color: #F5F9FD; }
.annoucement { border: 1px dashed #A2AAFF; background-color: #F5F9FD; }
.icon-disableZone { background-color: #000; filter: alpha(opacity=500); opacity: .2; z-index: 99; }

.req { color: Red; font-weight: bold; display: inline; }
.btImg { width: 16px; height: 16px; cursor: pointer; vertical-align: middle; }
.mailTo { border: 1px solid #C2CFDF; padding: 3px 0px 3px 5px; display: inline-block; margin-bottom: 4px; margin-right: 4px; }
.filePath { border: 1px solid #C2CFDF; padding: 4px 0px 5px 5px; display: inline-block; margin-bottom: 4px; margin-right: 4px; }
.file { border: 1px solid #C2CFDF; padding: 4px 0px 5px 5px; display: inline-block; margin-bottom: 4px; margin-right: 4px; }
.folder { border: 1px solid #FFFFFF; padding: 5px 5px 5px 5px; margin-bottom: 5px; margin-right: 0px; cursor: pointer; display: inline-block; }
.folderHover { border: 1px solid #C2CFDF; padding: 5px 5px 5px 5px; margin-bottom: 5px; margin-right: 0px; cursor: pointer; display: inline-block; }

.icon-container-left { border: 1px solid #C2CFDF; display: inline-block; padding: 0 0 10px 0; margin: 5px 0 15px 0; background-color: White; }
.icon-container-right { border: 1px solid #C2CFDF; display: inline-block; padding: 0 0 10px 0; margin: 5px 0 15px 20px; background-color: White; }
.icon-container-header { font-weight: bold; margin: 5px 5px 5px 5px; padding: 5px 0 5px 5px; color: #627AAD; cursor: move; }
.icon-container-content { margin: 10px 3px 3px 10px; }

/*-----------------------------------------------------------------------------------------------*/


/* ################ ICON Table ################*/
.majorTable { width: 100%; min-height: 450px; border: 1px solid #CDCDCD; margin-top: 10px; border-bottom-width: 2px; }
.minorTable { width: 98%; margin: 10px 10px 10px 10px; }
.alltr { height: 25px; }
.trOdd { background-color: #FAFCFE; }
.trEven { background-color: white; }
.sttd { width: 25%; vertical-align: top; text-align: right; font-weight: bold; padding-right: 20px; }
    .sttd.normal { font-weight: lighter; }
    .sttd.light { font-weight: lighter; }
.sttd2 { width: 25%; vertical-align: top; text-align: left; font-weight: bold; padding-right: 20px; }
.ndtd { vertical-align: top; text-align: left; }
/*-----------------------------------------------------------------------------------------------*/


/* ################   SMS Setting  ###################### */
.mMenu { font-weight: bold; font-size: 13px; }
.mList { margin-top: 10px; margin-left: 25px; margin-bottom: 15px; width: 87%; }
.mExpand { text-align: right; float: right; width: 40px; cursor: pointer; }
.mDetail { border: 1px solid #C2CFDF; padding: 0 5px 20px 20px; background-color: #F5F9FD; }
/*-----------------------------------------------------------------------------------------------*/


.ellipsis { white-space: nowrap; overflow: hidden; }

    .ellipsis.multiline { white-space: normal; }

/* ################ ICON icon ################*/

.icon-icon { width: 16px; height: 16px; display: inline; background-repeat: no-repeat; }
.icon-icon-mobile-active { background-position: left top; background-image: url(../../images/shared/icon_web/mobile_phone.png); }
.icon-icon-mobile-inactive { background-position: left top; background-image: url(../../images/shared/icon_web/mobile_phone3.png); }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON Contact Note ################*/

.icon-note { list-style-type: none; font-size: 11px; }
    .icon-note li { margin: 5px 10px 5px 10px; }
    .icon-note div { padding: 10px 10px 2px 10px; width: 70%; border: 1px solid #C2CFDF; background-color: #F5F9FD; text-align: left; }
.icon-note-content { display: block; }
.icon-note-footer { display: inline-table; margin-top: 3px; font-size: 8px; color: #B5B5B5; }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON UI Button ################*/

.icon-ui-button { background-color: #EEE; background-image: url(../../Images/shared/background/bgGray.png); background-repeat: repeat-x; border: 1px solid #999; border-bottom-color: #888; cursor: pointer; display: inline-block; font-size: 11px; font-weight: bold; line-height: 18px; padding: 2px 9px 2px 5px; white-space: nowrap; text-align: center; text-decoration: none; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
    .icon-ui-button:active { background: #EFEFEF; border-bottom-color: #666; }
    .icon-ui-button .image { float: left; margin-right: 3px; }
    .icon-ui-button img { vertical-align: middle; }

    .icon-ui-button.green { color: #FFF; background-color: #69A74E; background-image: url(../../Images/shared/background/bgGreen.png); background-repeat: repeat-x; border-color: #3B6E22 #3B6E22 #2C5115; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
        .icon-ui-button.green:active { background: #609946; border-bottom-color: #3B6E22; }
/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON Case Management ################*/

.icon-checkFlow { background-color: #EDEFF4; }
.icon-flowComment { list-style-type: none; width: 80%; }
    .icon-flowComment .comentItem { padding: 10px 20px; background-color: #EDEFF4; margin-bottom: 1px; border-bottom: 1px solid #D2D9E7; font-size: 11px; }
        .icon-flowComment .comentItem .header { color: #3B5998; font-weight: bold; }
        .icon-flowComment .comentItem .time { color: gray; }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON Search control ################*/
.icon-searchType { height: 23px; vertical-align: middle; min-width: 100px; float: right; }
.icon-search, .icon-search-select { background-color: #FFFFFF; height: 21px; border: 1px solid #BCBDC2; display: inline-block; vertical-align: middle; width: 190px; }
    .icon-search .text { height: 18px; border: none; outline: none; padding: 1px 5px 2px 0; width: 160px; float: left; margin-left: 2px; }
    .icon-search select { height: 18px; }
    .icon-search .button { background-image: url(../../images/shared/search.jpg); background-repeat: no-repeat; background-color: #FFFFFF; border: 0; float: right; cursor: pointer; height: 20px; padding: 0; position: relative; width: 22px; }
        .icon-search .button:hover { background-image: url(../../images/shared/search_hol.jpg); }

    .icon-search-select .select { height: 21px; border: none; width: 166px; float: left; vertical-align: bottom; margin-left: 2px; outline: none; }
    .icon-search-select .button { background-image: url(../../images/shared/search_n.jpg); background-repeat: no-repeat; background-color: #FFFFFF; border: 0; float: right; cursor: pointer; height: 20px; padding: 0; position: relative; width: 22px; }
        .icon-search-select .button:hover { background-image: url(../../images/shared/search_n_hol.jpg); }
/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON Search control ################*/
.icon-saleProcess { list-style-type: none; }
    .icon-saleProcess li { margin-bottom: 10px; }
/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON Account Menu ################*/

.accountPanel { background: #FFF; padding: 2px 0px; vertical-align: top; font-size: 11px !important; font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important; }
    .accountPanel div { float: none; padding-left: 10px; }
.accountMenu-select { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); background-repeat: no-repeat; background-position: right center; }
.accountMenu { background: #FFF; cursor: pointer; padding: 4px 0px; top: 100%; list-style: none; line-height: 18px; }
    .accountMenu li { font-size: 11px !important; font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important; float: none; padding-left: 10px; border-bottom: solid 1px #FFF; border-top: solid 1px #FFF; }
        .accountMenu li:hover { background: #6D84B4; border-bottom: solid 1px #3B5998; border-top: solid 1px #3B5998; color: white; }
    .accountMenu .roleChecked { background-color: #D8DFEA; color: #000000; font-weight: bold; border-bottom: solid 1px #D8DFEA; border-top: solid 1px #D8DFEA; }
        .accountMenu .roleChecked .icon { float: right; margin-right: 10px; vertical-align: bottom; }


/*-----------------------------------------------------------------------------------------------*/


/* ################ ICON productList Menu ################*/
.productList { background: #FFF; padding: 4px 0px; top: 100%; list-style-type: decimal; line-height: 18px; }
    .productList li { font-size: 11px !important; font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important; float: none; padding-left: 5px; border-bottom: solid 1px #FFF; border-top: solid 1px #FFF; }
        .productList li:hover { background: #EEF2F7; border-bottom: solid 1px #CCC; border-top: solid 1px #CCC; color: #000000; }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON report Menu ################*/

.icon-reportZone { height: 400px; vertical-align: top; }
    .icon-reportZone.main { background-image: url(../../images/shared/Logo/ReportCover.png); background-repeat: no-repeat; background-position: center bottom; }
.icon-reportList { list-style-type: none; padding-left: 20px; margin-top: 20px; }
    .icon-reportList img { margin-right: 5px; }
/*-----------------------------------------------------------------------------------------------*/


/* ################ ICON Main list menu ################*/
/* use in setting page. */

.icon-mainMenu { list-style: none; width: 900px; }
    .icon-mainMenu li { display: block; width: 350px; float: left; position: relative; margin: 15px 45px; }
        .icon-mainMenu li table { width: 100%; height: 50px; vertical-align: top; }
            .icon-mainMenu li table .sttd { width: 50px; }
                .icon-mainMenu li table .sttd img { width: 48px; height: 48px; cursor: pointer; }
            .icon-mainMenu li table .ndtd { font-size: 11px; }
                .icon-mainMenu li table .ndtd .icon-button { font-size: 12px; }
                .icon-mainMenu li table .ndtd span { cursor: pointer; }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON SMS list menu ################*/
.icon-smsMenu { list-style: none; width: 650px; }
    .icon-smsMenu li { display: block; height: 35px; border-width: 0 0 1px 0; border-style: solid; border-color: #E9E9E9; vertical-align: middle; }
        .icon-smsMenu li:hover { background-color: #F7F7F7; }
    .icon-smsMenu div { padding-top: 7px; padding-bottom: 7px; }
    .icon-smsMenu .stelm { padding-left: 5px; font-weight: bold; float: left; width: 200px; }
    .icon-smsMenu .ndelm { padding-left: 5px; width: 350px; float: left; }
    .icon-smsMenu .thelm { padding-right: 5px; font-weight: bold; float: right; text-align: right; }

/*-----------------------------------------------------------------------------------------------*/

/* ################ ICON left menu ################*/
.icon-leftMenu { background: #FFF; cursor: pointer; padding: 4px 0px; list-style: none; line-height: 22px; }
    .icon-leftMenu li { font-size: 11px !important; font-family: "lucida grande",tahoma,verdana,arial,sans-serif !important; float: none; padding-left: 5px; border-bottom: solid 1px #FFF; border-top: solid 1px #FFF; }
        .icon-leftMenu li:hover { background: #F7F7F7; }
    .icon-leftMenu .roleChecked { background-color: #D8DFEA !important; color: #000000; font-weight: bold; border-bottom: solid 1px #D8DFEA; border-top: solid 1px #D8DFEA; }
/*-----------------------------------------------------------------------------------------------*/

.inputBox { height: 25px; width: 200px; border: 1px solid #8cbbd6; padding: 0 5px; }


.table-login { margin-top: 200px; display: inline-block; /*left: 770px;*/left: 60%; position: relative; }
    .table-login .header { font-size: 26px; color: #ADD8E6; font-weight: bold; font-family: 'Comic Sans MS'; margin-bottom: 10px; }
    .table-login .sick-input { margin-bottom: 5px; }
        .table-login .sick-input input[type=text], input[type=password] { width: 300px; }
    .table-login input[type=button] { margin: 0 auto; width: 150px; height: 45px; font-size: 14px; font-weight: normal; margin-top: 10px; }
    .table-login .control { display: block; margin-top: 15px; }
        .table-login .control .label { font-size: 16px; color: #aaa; font-family: 'Comic Sans MS'; }
        .table-login .control input[type=text], input[type=password] { height: 20px; }
        .table-login .control .req { margin-left: 3px; }
        .table-login .control .warning { margin-left: 3px; color: #ff9900; }

.reqWarn, .sick-input .reqWarn, .sick-input .reqWarn:hover { border: 1px solid #ff9900; border-right-width: 3px; }

.icon-messagebox { position: absolute; top: 280px; left: 560px; z-index: 1000; display: none; min-width: 160px; padding: 30px 30px; margin: auto;
                   background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; 
                   -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
                   -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
                   -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; 
                   font-size:20px; font-family:'Comic Sans MS'; text-align:center;
}