@charset "utf-8";
/* CSS Document */
@import url('gridProperties.css');

.gridJasa {
    top: 191px;
    width: 100%;
}

.simpleBox {
    background: #F0F0F0;
    width: 100%;
    border-bottom: solid 1px #ccc;
    font-size: 14px;
    padding: 5px;
}

/* Common Area */
* {
    margin: 0pt;
    padding: 0pt;
    outline: none;
}

html {
    overflow: hidden;
}

body {
    margin: 0pt;
    padding: 0pt;
    height: 100%;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
    min-width: 760px;
}

.FR {
    float: right;
}

.FL {
    float: left;
}

.main {
    position: absolute;
    top: 61px;
    bottom: 21px;
    left: 25px;
    right: 25px;
    overflow: auto;
    z-index: 0;
}

.padding {
    padding: 0 3px;
}

.clear {
    clear: both;
}

#tabselectcontainer {
    overflow: hidden;
}

.padding5 {
    padding: 5px;
}

h2 {
    padding: 5px 0;
    margin: 0;
    font-size: 13px;
    font-weight: bold;
    clear: both;
}

.fonterror {
    font-weight: bold;
    text-decoration: none;
}

div.inlineContents dt strong {
    cursor: pointer;
}

input, select, textarea {
    border: solid 1px silver;
    border-radius: 3px;
    /*font-size: 12px;*/
    /*padding: 1px 1px;*/
}

/*select {*/
/*height: 19px !important;*/
/*-webkit-appearance: none;*/
/*background: #FFF url(../images/downarrow.png) 96% 50% no-repeat;*/
/*min-width: 42px;*/
/*padding-right: 10px!important;*/
/*}*/

input[type="button"], input[type="submit"] {
    border-radius: 0;
}

/* Layout */
.leftDock {
    position: absolute;
    left: 0;
    top: 61px;
    bottom: 21px;
    width: 25px;
    z-index: 10;
}

.rightDock {
    position: absolute;
    right: 0;
    top: 61px;
    bottom: 21px;
    width: 25px;
    z-index: 1;
}

.halfLeft {
    float: left;
    width: 49.8%;
}

.halfRight {
    float: right;
    width: 49.8%;
}

.halfright {
    float: right;
    width: 49.8%;
}

.halfLeft .bottom {
    width: 50%;
}

.halfright div.button {
    border: none;
    background: none;
    float: right;
    padding: 3px 0;
}

.halfRight div.button {
    border: none;
    background: none;
    float: right;
    padding: 3px 0;
}

.halfright div.buttonHistory {
    position: absolute;
    border: none;
    background: none;
    float: left;
    bottom: 3px;
    right: 3px;
}

/*#frmEditData {margin:5px 0;}*/
a {
    text-decoration: none;
}

.grid a {
    text-decoration: none;
    color: #0E4EBE;
    /*font-style: italic;*/
}

.spacer {
    height: 5px;
    clear: both
}

.spacing {
    clear: both;
    height: 10px;
}

select {
    z-index: 5;
}

dd.spkName div.buttonbox {
    height: auto;
    width: 12%;
    float: left;
    /*padding: 2px 0;*/
    text-align: center;
    font-size: 12px;
    cursor: pointer;
}

.marginleft {
    clear: both;
}

.gridContainer .FRight {
    float: right;
}

#txtIndentRefNo {
    width: 70%;
}

.resizeHandle {
    width: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: e-resize;
    height: 17px;
    z-index: 100;
}

.tableheader ul li div:hover {
    height: 15px;
}

.tableheader ul li div.resizeHandle:hover {
    border: none;
    height: 17px;
}

.inputBox {
    margin: 0 1px 2px 0;
    display: block;
    float: left; /*height:35px;padding: 0 3px;*/
}

.inputBox label {
    display: block;
    font-weight: bold;
    padding-bottom: 3px;
}

.nuvosBox {
    clear: both;
    float: right;
}

.nuvosBox a {
    text-decoration: none;
}

.nuvosBox .nuvos {
    padding: 2px;
    margin-left: 1px;
    display: block;
    float: left;
}

.nuvosBox .nuvos:hover {
    padding: 3px 2px 1px 2px;
}

.halfRight.accountingDate div.outer {
    clear: both;
    white-space: nowrap;
    text-align: right;
}

.accountingDate .FR {
    font-style: italic;
}

div#byhalf ul.horz li.amount {
    width: 100px;
    text-align: right;
}

div#byhalf ul.horz li.desc {
    width: 195px;
}

.inner {
    width: 255px;
    float: left;
    text-align: left;
}

input.buttonbox.findArea {
    position: absolute;
    top: 35px;
    right: 10px;
    padding: 2px 4px;
}

.buttonbox.findArea {
    position: absolute;
    top: 36px;
    right: 10px;
}

.buttonSmall {
    padding: 0;
    margin-left: 5px;
    font-size: 11px; /*display:block; float:left;*/
}

.companyInfoText {
    position: absolute;
    top: 5px;
    right: 7px;
}

.formBox {
    margin: 5px 0;
    padding: 7px;
}

.centeredButton {
    text-align: center;
    clear: both;
    padding-top: 5px;
}

.box dd input.amount {
    text-align: right;
}

.box dt.fullDt {
    width: 100%;
}

.closeNotice {
    position: absolute;
    font-weight: bold;
    top: -4px;
    right: 3px;
    font-size: 18px;
}

/* Grid system */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
    display: inline;
    float: left;
    margin-right: 1%;
    position: relative;
    /*margin-bottom: 10px;*/
}

.gridContainer .grid_1 {
    width: 7.416%
}

.gridContainer .grid_2 {
    width: 15.833%
}

.gridContainer .grid_3 {
    width: 24.25%
}

.gridContainer .grid_4 {
    width: 32.666%
}

.gridContainer .grid_5 {
    width: 41.083%
}

.gridContainer .grid_6 {
    width: 49.5%
}

.gridContainer .grid_7 {
    width: 57.916%
}

.gridContainer .grid_8 {
    width: 66.333%
}

.gridContainer .grid_9 {
    width: 74.75%
}

.gridContainer .grid_10 {
    width: 83.166%
}

.gridContainer .grid_11 {
    width: 91.583%
}

.gridContainer .grid_12 {
    width: 100%
}

.end {
    margin-right: 0;
}

.gridContainer {
    padding: 5px 0 0 0;
    clear: both;
}

.gridContainer .box {
    padding: 3px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    min-height: 100px;
}

.gridContainer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gridContainer ul label {
    display: block;
    float: left;
    width: 30%;
    height: 18px;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.gridContainer ul input, .gridContainer ul textarea, .gridContainer ul select {
    height: 20px;
    border: solid 1px #ccc;
    margin-bottom: 2px;
    width: 69%;
}

.gridContainer ul input.date {
    width: 75px;
}

.gridContainer ul input.km {
    width: 50px;
}

.gridContainer li {
    clear: both;
}

/*.gridContainer .box label {margin-top:-15px; padding:3px; background:#C0C0C0; position:absolute;}*/
.box label {
    display: block;
    width: 35%;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    /*clear: both;*/
    /*text-align: right;*/
}

.box input[type!

=
"radio"
]
{
    display: block
;
    width: 63%
;
    float: left
;
    height: 20px
;
    margin-bottom: 3px
;
    border: 1px solid #C0C0C0
;
    padding: 0px 2px
;
}

.box textarea {
    display: block;
    width: 63%;
    float: left;
    height: 34px;
    margin-bottom: 3px;
    border: 1px solid silver;
}

.box select {
    display: block;
    width: 63%;
    float: left;
    height: 18px;
    margin-bottom: 0px;
    border: 1px solid silver;
}

.noDisplay {
    display: none;
}

.date {
    width: 65%;
    float: right;
}

.date input {
    width: auto;
    float: left;
}

.date select {
    width: auto;
    float: left;
}

.radio {
    width: 63%;
    float: right;
}

.radio input {
    width: auto;
    float: left;
}

/*.box span {display:block; float:left; height:20px; line-height:20px; padding:0 5px;}*/
.box input.auto {
    width: auto;
    float: left;
}

.gridContainer fieldset {
    border: solid 1px #ccc;
    padding: 5px;
    margin-bottom: 5px;
    /*margin-left: 3%;*/
    /*margin-right: 3%;*/
}

.gridContainer fieldset legend span {
    padding-left: 5px;
}

.custInfo div {
    clear: both;
    white-space: nowrap;
}

.custInfo label {
    display: block;
    width: 30%;
    float: left;
    font-weight: bold;
}

.custInfo label span.FL {
    width: 90%;
    overflow: hidden;
}

.custInfo span.address {
    white-space: normal;
    width: 69.9%;
    float: right;
}

.box dd span.address {
    white-space: normal;
    height: auto;
}

.subContent {
    position: relative;
}

/* Header */
.header {
    position: absolute;
    height: 39px;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
}

.header .exoduz {
    line-height: 39px;
    float: left;
    font-size: 34px;
    padding-left: 5px;
    font-weight: bold;
}

.header .comp {
    position: absolute;
    right: 8px;
    top: 4px;
    text-align: right;
    width: 80%;
}

.header .compInfo {
}

.header .compName {
    font-size: 15px;
    font-weight: bold;
}

.header .comp img {
    float: right;
    height: 32px;
    padding-left: 8px;
}

.menu {
    position: absolute;
    height: 18px;
    top: 40px;
    left: 0;
    right: 0;
}

.menu.intro {
    line-height: 18px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}

.headDivider {
    position: absolute;
    height: 0;
    left: 0;
    right: 0;
    top: 60px;
}

.companySelect {
    position: absolute;
    top: 42px;
    right: 8px;
    z-index: 12;
}

.companySelect select {
    border: none;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
    font-weight: bold;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .companySelect select {
        border: none;
        height: 13px;
        line-height: 13px;
        font-size: 11px;
        font-weight: bold;
    }
}

/* Table Property */
table {
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    border: none;
}

table td {
    padding: 0 5px;
}

table div {
    white-space: nowrap;
}

/* Footer */
.footer {
    line-height: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.scguide span {
    display: block;
    text-align: right;
    font-style: italic;
}

/* dock */
#dock {
    margin-top: 0px;
    list-style: none;
    position: absolute;
    z-index: 10;
    left: 0;
    width: 25px;
    top: 0;
}

#dock li {
    width: 25px;
    height: 24px;
    float: left;
}

#dock #shortcut {
    background-position: -75px 0;
}

#dock #shortcut:hover {
    background-position: -50px 0;
}

#dock #info {
    background-position: -75px -25px;
}

#dock #info:hover {
    background-position: -50px -25px;
}

/* panels */
#dock ul li {
    width: 173px;
    height: auto;
    padding: 3px;
}

#dock ul li.head {
    padding: 3px;
    width: 170px;
    font-weight: bold;
}

#dock ul li a {
    text-decoration: none;
    font-weight: normal;
}

#dock li:hover ul {
    display: block;
}

#dock li ul {
    position: absolute;
    top: 0px;
    left: -200px;
    z-index: -1;
    width: 186px;
    display: block;
    padding: 0px 1px;
    margin: 0px;
    list-style: none;
    overflow: hidden;
}

#dock li ul.docked {
    display: block;
    z-index: -2;
}

.dock, .undock {
    float: right;
}

.undock {
    display: none;
}

#content {
    margin: 0;
    min-width: 720px;
    position: absolute;
    height: 100%;
    width: 100%;
}

.rightDock a.langButton {
    background: none;
    text-align: center;
    line-height: 24px;
}

.rightDock a.langButton:hover {
    font-weight: bold;
}

.rightDock a {
    width: 25px;
    height: 24px;
    display: block;
}

.langSelector {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* Main Menu */
#mainmenu {
    font-size: 11px;
    line-height: 20px;
    font-weight: bold;
}

#mainmenu ul {
    list-style: none;
}

.menu li {
    float: left;
    padding: 0 10px;
    cursor: pointer;
}

div.menu-item a {
    display: block;
    width: 100%;
    text-decoration: none;
}

html>body div.outerbox {
    padding: 0 5px 5px 0;
}

html>body div.outerbox div.shadowbox1 {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 5px;
    height: 100%;
    background: url(../skins/blueGray/myshadow.png) no-repeat right top;
}

html>body div.outerbox div.shadowbox2 {
    position: absolute;
    bottom: 0;
    right: 5px;
    height: 5px;
    width: 100%;
    background: url(../skins/blueGray/myshadow.png) left bottom;
}

html>body div.outerbox div.shadowbox3 {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 5px;
    width: 5px;
    background: url(../skins/blueGray/myshadow.png) no-repeat right bottom;
}

html>body .innerbox {
    margin: 0;
    display: inherit;
}

#root-menu-div li {
    white-space: nowrap;
}

* html #root-menu-div li {
    height: 1.5em; /* fixing ie6 problem */
}

ul.menu, #root-menu-div ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.menu-separator.active {
    background-color: transparent;
}

* html div.menu-item {
    display: inline; /* fixes problem in ie6 */
}

li.menumain {
    float: left;
    padding: 0 10px;
}

div.menu-item {
    padding: 1px 10px 1px 4px;
    cursor: pointer;
    border-top: 1px solid #CCC;
}

li:first-child div.menu-item {
    border-top: none;
}

li.active {
    background-color: #DDD;
    /*font-weight: bold;*/
}

div.menu-item span {
    padding: 1px 0;
    display: block;
}

img.menu-item-arrow {
    position: absolute;
    right: 4px;
    top: 6px;
}

li.menu-separator {
    font-size: 0; /* for ie */
    height: 0;
    line-height: 0; /* for ie */
    margin: 2px 0;
}

/* Contents */
#formLogin input.button {
    padding: 2px;
    margin-right: 5px;
    display: block;
    float: left;
    width: auto;
}

#formLogin input.button:hover {
    padding: 2px;
}

.buttonWrap {
    padding-top: 5px;
}

.contentHeadTitle {
    font-size: 14px;
    font-weight: bold;
    padding: 3px;
    margin-bottom: 5px;
}

/* Login */
#loginWrap {
    width: 32%;
    height: 208px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -104px;
    margin-left: -16%;
}

.login1#loginWrap {
    width: 32%;
    height: 254px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -127px;
    margin-left: -16%;
}

#loginWrap .headTitle div {
    height: 35px;
    line-height: 35px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding-left: 10px;
}

#formLogin label {
    display: block;
    padding-bottom: 6px;
}

#formLogin input {
    width: 100%;
    margin-bottom: 10px;
    padding: 2px 0;
}

.glowing {
    -moz-box-shadow: 0 0 8px #06F;
    box-shadow: 0 0 8px #06F;
    -webkit-box-shadow: 0 0 8px #06F
}

#formLogin select {
    margin-bottom: 10px;
    padding: 2px 0;
    width: 100%;
}

#formLogin .fonterror {
    text-decoration: blink;
    font-weight: bold;
}

.formWrap {
    padding: 13px 20px;
}

/* tab selector */
#tab {
    width: 100%;
    height: 26px;
    font: bold 11px Verdana;
}

#tab ul {
    margin: 0;
    padding: 0 0 0 3px;
    list-style: none;
}

#tab li {
    display: inline;
    margin: 0;
    padding: 0;
}

#tab a {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    text-decoration: none;
}

#tab a span {
    float: left;
    display: block;
    padding: 5px 6px 4px 6px;
    height: 12px;
    margin-top: 2px;
}

#tab .current a span {
    height: 17px;
    margin: 0;
}

/* Nyromodal style */
.liveTreeWrap {
    font-family: Verdana, helvetica, arial, sans-serif;
    font-size: 100.00%;
    background: #fff;
    color: #333;
}

.liveTreeWrap ul {
    list-style: none;
    font-size: 10px;
}

.liveTreeWrap a img {
    border: none;
}

.popLeftLine {
    background: #fff;
}

.nyroModalClose {
    color: #fff;
    font-weight: bold;
}

div#nyroModalFull {
    font-size: 12px;
    font-family: Verdana;
}

div#nyroModalLoading {
    border: 4px solid #777;
    width: 150px;
    height: 150px;
    text-indent: -9999em;
    background: #fff url(../skins/blueGray/ajaxLoader.gif) no-repeat;
    background-position: center;
}

div#nyroModalLoading.error {
    border: 4px solid #f66;
    line-height: 20px;
    padding: 20px;
    width: 300px;
    height: 100px;
    text-indent: 0;
    background: #fff;
}

div#nyroModalWrapper {
    background: #fff;
}

a#closeBut {
    position: absolute;
    display: block;
    top: -13px;
    right: -13px;
    width: 12px;
    height: 12px;
    text-indent: -9999em;
    background: url(../skins/blueGray/close.gif) no-repeat;
    outline: 0;
}

h1#nyroModalTitle {
    margin: 0;
    padding: 0;
    position: absolute;
    top: -22px;
    left: 5px;
    font-size: 12px;
    color: #ddd;
}

div.wrapper div#nyroModalContent {
    padding: 5px;
}

div.wrapperImg div#nyroModalContent {
    position: relative;
    overflow: hidden;
    text-align: center;
}

div.wrapperImg img {
    vertical-align: baseline;
}

div.wrapperImg div#nyroModalContent div {
    position: absolute;
    bottom: 0;
    left: 0;
    background: black;
    padding: 10px;
    margin: 10px;
    border: 1px white dotted;
    overflow: hidden;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

div.wrapperImg div#nyroModalContent div:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: help;
}

a.nyroModalPrev, a.nyroModalNext {
    z-index: 105;
    outline: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 40%;
    cursor: pointer;
    text-indent: -9999em;
    background-image: url(data:image/gif;base64,AAAA); /* Trick IE6 */
}

div.wrapperSwf a.nyroModalPrev, div.wrapperSwf a.nyroModalNext, div.wrapper a.nyroModalPrev, div.wrapper a.nyroModalNext {
    height: 60%;
    width: 20%;
}

a.nyroModalPrev {
    left: 0;
}

a.nyroModalPrev:hover {
    /*background: url(../skins/blueGray/prev.gif) left 20% no-repeat;*/
    background: url(../images/prev.gif) left 20% no-repeat;
}

a.nyroModalNext {
    right: 0;
}

a.nyroModalNext:hover {
    /*background: url(../skins/blueGray/next.gif) right 20% no-repeat;*/
    background: url(../images/next.gif) right 20% no-repeat;
}

.findarea select {
    font-size: 12px; /*height:22px;*/
    padding: 0px;
    height: 18px;
    border: 1px solid silver;
}

.findarea .inputbox1 {
    font-size: 12px;
    padding: 1px; /*height:17px;padding:1px 0 0;*/
}

.findarea {
    border: solid #c0c0c0 1px;
    background: #eaeaea;
    overflow: hidden;
}

.findarea form {
    border-top: solid 1px #fff;
    padding: 3px;
    /*height: 23px; *//*width:2000px;*/
}

.buttonbox {
    /*margin-left:5px; padding:1px;display:block; float:left;*/
    /*padding: 1px 3px;*/
    cursor: pointer;
    /*margin: 0 2px;*/
    padding: 0px 1px;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.paging {
    margin: 5px;
    padding: 3px;
    white-space: nowrap;
    overflow: hidden;
}

.divSubmitBtns {
    float: left;
}

#tabcontainer {
    overflow: hidden;
    width: 100%;
}

.find_status {
    display: inline;
}

.containerPadding {
    padding: 0 5px;
}

.headerTitle {
    font-size: 14px;
    font-weight: bold;
    margin: 2px 5px;
    padding: 3px;
}

.gridWidth input.buttonbox {
    font-size: 10px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 8px;
    cursor: pointer;
    height: 16px !important;
    vertical-align: top;
}

/* Chart System */
#chart div {
    line-height: 30px;
    position: relative;
}

#chart div span {
    width: 20%;
    display: block;
    float: left;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

#chart div.bar {
    width: 79%;
    float: right;
    background: #999;
}

#chart div.bar div {
    background: #00f;
    color: #FFF;
    text-align: right;
    height: 30px;
}

#chart div.bar b {
    padding: 0 5px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
}

.CRMStatsContainer {
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -146px;
}

.CRMStatsWrap {
    width: 95%;
    margin: 0 auto;
}

#chart * {
    margin: 0;
}

#chart1div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.flashForm {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    text-align: center;
    height: 25px;
}

/* Grid system */

/* Customer suggestion */
.crmCustomerSuggestionShowroom.absoluteWrap {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    top: 0;
}

.absoluteHalfLeft {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
}

.absoluteHalfRight {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
}

.absoluteBottomLeft {
    position: absolute;
    bottom: 5px;
    left: 0;
}

.absoluteBottomRight {
    position: absolute;
    bottom: 5px;
    right: 0;
    padding-right: 5px;
}

.crmCustomerSuggestionShowroom div.grid ul.horz li.checkbox {
    width: 20px;
    text-align: center;
    padding-top: 2px;
}

.crmCustomerSuggestionShowroom div.grid ul.horz li.name {
    width: 150px;
}

.crmCustomerSuggestionShowroom div.grid ul.horz li.address {
    width: 200px;
}

.gridWidth.d1 {
    overflow-y: scroll;
    overflow-x: auto;
}

.gridWidth.d2 {
    overflow-y: hidden;
    overflow-x: auto;
}

.gridWidth {
    overflow: auto;
}

.halfGridWidth, .thirdGridWidth {
    overflow: auto;
}

/* WO */
.leftBottomButton {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    text-align: center;
}

.buttonbox.complain {
    width: auto;
}

/*CRM Style */
.box input[type="checkbox"] {
    width: auto;
    height: 20px !important;
    margin-right: 5px;
	float: left;
}

.box input[type="radio"] {
    width: auto;
    /*height: 20px;*/
    margin-right: 5px;
	float: left;
}

.rightTopButton {
    position: absolute;
    right: 10px;
    top: 10px;
}

.sidePadding {
    padding: 0 5px;
}

.crmMasterCustomer #tab {
    height: 49px;
    position: relative;
}

.crmMasterCustomer #tab ul.active {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.crmMasterCustomer #tab ul.active li.active span {
    background: none;
    color: #666;
    border-bottom: none;
}

.crmMasterGoToId {
    position: absolute;
    top: 59px;
    left: 10px;
}

.crmButton {
    position: relative;
    clear: both;
    margin: 5px 0 0 0;
    border: 1px solid #C0C0C0;
}

.lineDecoration {
    border-top: 1px solid #fff;
}

.crmButton .wrap {
    float: right;
    padding: 3px;
}

.box.image {
    text-align: center;
    position: relative;
}

.box.image img {
    border: solid 1px #ccc;
    padding: 3px;
    max-width: 95%;
    max-height: 95%;
}

.box input.hidden {
    display: none;
    visibility: hidden;
}

.box dl {
    clear: both;
    width: 100%;
    display: table;
    /*margin: 2px 4%;*/
}

.box dt {
    text-align: right;
    width: 32%;
    float: left;
    height: 19px;
    line-height: 19px;
    white-space: nowrap;
    overflow: hidden;
}

.box dd {
    float: right;
    width: 63%;
    white-space: nowrap;
    overflow: hidden;
    line-height: 18px;
    margin-bottom: 3px;
}

.box dd input {
   /* float: left;*/
    /*width: 95%;*/
    height: 18px;
}

.box dd.txtTaxNo input {
    float: left;
    width: 50%;
}

.box dd.txtTaxNo span {
    float: left;
}

.box dd select {
    float: left;
    width: 96.7%;
}

.box dd textarea {
    float: left;
    width: 96%;
}

.box dd.monthYear input {
    /*width: 28%;*/
    text-align: center;
}

.box dd.monthYear select {
    width: 70%;
}

.box dd.percent input {
    width: 50px;
}

.box dd.kilometer input {
    width: 50px;
}

.box dd.age input {
    width: 45px;
}

.box dd.date input {
    width: 75px;
}

.box dd.file input[type!

=
"file"
]
{
    width: 100px
;
}

.box dd.withIcon input {
    width: 50%;
}

.box dd.time input {
    width: 50px;
}

div.grid ul.vert li.time * {
    /*float: left;*/
}

div.grid ul.vert li.time input {
    width: 30%;
    text-align: center;
}

.box dd.reff input.refNo {
    width: 54%;
}

.box dd.reff input.date {
    width: 28%;
}

.box dd.type select {
    width: 100px;
}

.box dd.half select {
    width: 48%;
}

.box dd.multiSelect {
    margin-bottom: 5px;
}

.box dd.multiSelect select {
    height: auto;
}

.box dd.merk select {
    width: 60%;
}

.box dd.leasing select {
    width: 50%;
}

.box dd.time input {
    width: 25px;
}

.box dd.time>input[type="text"] {
    width: 25px;
}

.box input.buttonbox {
    width: auto;
    height: auto;
    /*font-weight: bold;*/
    cursor: pointer;
    /*padding: 3px 5px;*/
    line-height: 18px;
}

.box dd.spkName input {
    width: 50%;
}

.box dd.spkName input.buttonbox {
    width: 12%;
    /*font-size: 12px;*/
    /*padding: 0;*/
    margin: 0 2px;
}

.box dd.file span {
    color: #ccc;
}

.box dd.height input {
    width: 50px;
}

.box dd.weight input {
    width: 50px;
}

.box dd input#txtSPKRefNo {
    width: 70%;
}

.box dd input#txtDateFrom {
    width: 80px;
}

.box dd input#ckAllDate {
    width: 15%;
    display: inline;
}

.box dd input#txtPriceDiscP {
    width: 20%;
}

.box dd input#txtPriceDisc {
    width: 60%;
}

.box dd input#txtPricePPNP {
    width: 20%;
}

.box dd input#txtPricePPN {
    width: 60%;
}

.box.spkPriceField dd input#txtPriceDisc {
    width: 96%;
}

.box dd span {
    height: 19px;
    line-height: 19px;
    float: left;
}

.hidden {
    display: none;
    visibility: hidden;
}

.box dt input[type="radio"] {
    width: 15%;
    /*float: left;*/
    float: right;
}

.box dt input[type="checkbox"] {
    width: 15%;
    /*float: left;*/
    float: right;
}

.box dl.checkBox dd input[type="radio"] {
    width: auto;
    float: left;
}

.box dl.checkBox dd input[type="checkbox"] {
    width: auto;
    float: left;
}

.box dl.checkBox dd label {
    width: auto;
    clear: none;
    padding-left: 10px;
}

.box dt div.radioSpace {
    width: 16%;
    float: left;
    height: 5px;
}

.box dt label {
    clear: none;
    float: right;
    height: 19px;
    line-height: 16px;
    /*width: 70%;*/
    /*text-align: left;*/
}

.box legend input {
    display: inline;
    width: auto;
    float: left;
    margin: 0;
    height: auto;
}

.box legend label {
    display: inline;
    width: auto;
    float: left;
    clear: none;
    height: auto;
    line-height: normal;
    margin: 0 0 0 3px;
}

fieldset.box legend {
    border: solid 1px #ccc;
    background: #fff;
    padding: 1px 3px;
}

.boxInlineButton {
    clear: both;
}

dd.merk .buttonbox {
    width: 25%;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}

/**/
.inlineContents {
    margin: 5px 0;
}

.inlineContents dd {
    clear: both;
}

.inlineContents dl dd.multiselect select {
    width: auto;
    height: 50px;
}

div.inlineContents dl {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 4px;
    float: left; /*For IE*/
    display: block;
    background: #EEE;
    color: #666;
    font: bold 10px/17px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 36px;
}

div.inlineContents dl dt, div.inlineContents dl dd {
    display: block;
    /*padding-right: 5px;*/
}

div.bigger dl {
    padding: 0 5px 35px 4px;
}

div.inlineButton {
    clear: both;
}

div.inlineButton div {
    border: solid 1px #959595;
    background: #a8b2c5 url(../skins/blueGray/whiteDot.png) repeat-x top;
    color: #fff;
    padding: 1px 2px;
    margin-left: 5px;
    font-size: 11px;
    float: right;
}

.inlineInput {
    background: #F0F0F0;
    border-bottom: solid 1px #ccc;
    height: 41px
}

.inlineInput dl {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 0 5px 4px 5px;
    float: left; /*For IE*/
    display: block;
    background: #EEE;
    color: #666;
    font: bold 10px/17px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 36px;
}

div.button {
    background: #F0F0F0;
    border-top: solid 1px #FFF;
    height: 16px;
}

div.button a {
    font: bold 10px/16px Verdana, Arial, Helvetica, sans-serif;
    padding: 0 8px;
    float: left;
    cursor: pointer;
    display: block;
}

div.button a:hover {
    background: #CCC;
    color: #FFF;
}

div.button div {
    float: right;
}

.reducer {
}

.company_text {
    display: none;
}

.MOVING_FAST {
    background-color: green;
}

.MOVING_SLOW {
    background-color: yellow;
}

.MOVING_DEAD {
    background-color: gray;
}

#newRO {
    display: block;
    position: absolute;
    width: 80%;
    top: 0;
    left: 10%;
    z-index: 110;
}

#newRO h3 {
    text-align: center;
    font-size: 14px;
    padding-bottom: 5px;
}

/* Temporary */
.jasa_wo_dummy {
    background: #eee;
    margin-bottom: 120px;
}

.jasa_ro_dummy {
    position: absolute;
    top: 279px;
    height: 42px;
    width: 884px;
    background: #eee;
}

.part_wo_dummy {
    background: #eee;
    margin-bottom: 140px;
}

.part_ro_dummy {
    position: absolute;
    top: 457px;
    height: 42px;
    width: 884px;
    background: #eee;
}

/*.jasa_wo_details {position:absolute; top:361px; padding-left:1px; width:883px;}*/
.jasa_wo_details {
    position: absolute;
    top: 59px;
    width: 100%;
}

.jasa_ro_details {
    position: absolute;
    top: 338px;
    width: 100%;
}

.part_wo_details {
    position: absolute;
    top: 238px;
    width: 100%;
}

.part_ro_details {
    position: absolute;
    top: 516px;
    width: 100%;
}

#wo_description {
    position: absolute;
    top: 684px;
    background: #fff;
    width: 873px;
    border: solid 1px #666666;
    padding: 2px;
}

/*.wo_jasa_form {position:absolute; top:302px; width:884px;}*/
/*.wo_jasa_form {position:absolute; width:100%; top:0;}
.wo_part_form {clear:both; position:absolute; top:179px; width:100%;}*/
.ro_part_form {
    clear: both;
    position: absolute;
    top: 454px;
    width: 100%;
}

#jasa1 {
    background: #eee;
    width: 884px;
    height: 42px;
}

#jasaRO {
    background: #eee;
    width: 884px;
    height: 42px;
    position: absolute;
    top: 279px;
}

.simplebox {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 0 5px 4px 5px;
    float: left; /*For IE*/
    display: block;
    background: #EEE;
    color: #666;
    font: bold 10px/17px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 36px;
}

#siteseal {
    position: absolute;
    top: 311px;
    padding-left: 320px;
}

.nudsbuttonWO {
    font: bold 10px/16px Verdana, Arial, Helvetica, sans-serif;
    padding: 0 8px;
    float: right;
    cursor: pointer;
}

.nudsbuttonWO:hover {
    background: #CCC;
    color: #FFF;
}

.dummysimpleboxtext {
    color: #AAA;
}

.nudsbuttonWO_dummy {
    font: bold 10px/16px Verdana, Arial, Helvetica, sans-serif;
    padding: 0 8px;
    float: right;
    color: #AAA;
}

.simpleboxcontainer {
    background: #F0F0F0;
    height: 41px;
    width: 100%;
    border-bottom: solid 1px #ccc;
}

input#txtComplain {
    width: 70px;
}

input#sbPromotionBook {
    width: 75px;
}

input#sbSuggestion {
    width: 75px;
}

div.grid .gridWidth ul.horz li.percent_hover {
    background: #FF9;
}

/* Bengkel */

/* Old Template Patch */
.halfright .formnudsisi {
    clear: both;
    padding: 0;
}

.halfright .formnudsisi input#txtRangka {
    width: 40%;
    float: left;
}

.halfright .formnudsisi input#txtBirth {
    width: 20%;
    float: left;
}

.halfright .formnudsisi input#txtId {
    width: 40%;
    float: left;
}

.halfright .formnudsisi input#txtSTNKExpired {
    width: 20%;
    float: left;
}

.halfright .box input[type="text"] {
    float: left;
    width: 63%;
}

.halfright .box input.inputbox.date {
    width: 100px;

}

.halfright .box select {
    float: left;
}

.halfright .box textarea {
    float: left;
}

.masterHeight {
    overflow-x: auto;
    overflow-y: visible;
}

.box div.button {
    border: none;
    background: none;
}

.comboActive select {
    width: 18%;
}

input.inputbox.withCombo {
    width: 40%;
}

input.inputbox.withLoad {
    width: 40%;
}

input.inputbox.date {
    width: 100px;
}

input.inputbox.age {
    width: 50px;
}

input.amount {
    text-align: right;
}

.nodata_boxed {
    position: absolute;
    width: 20%;
    font-weight: bold;
    color: red;
    text-decoration: blink;
    padding: 0.5%;
    text-align: center;
    background: #fff;
    bottom: 32px;
    border: solid 1px #000;
    left: 5px;
}

.nodata_boxed_his {
    position: absolute;
    width: 20%;
    font-weight: bold;
    color: red;
    text-decoration: blink;
    padding: 0.5%;
    text-align: center;
    background: #fff;
    bottom: 32px;
    border: solid 1px #000;
    left: 5px;
}

ul.inline li {
    clear: none;
    float: left;
}

ul.inline li label {
    width: auto;
    padding-right: 10px;
}

.formnudsisi.key select {
    width: 12%;
}

.notes {
    clear: both;
    padding-top: 10px;
    text-align: center;
    color: #f00;
}

div.gridContainer div.grid li {
    clear: none;
}

div.gridContainer div.tree ul.flipMenu li {
    clear: none;
}

.loginTime h2 {
    font-size: 14px;
    padding: 5px 0;
}

.formnudsisi.monthYear input {
    /*width: 20%;*/
    text-align: center;
}

.formnudsisi.monthYear select {
    width: 40%;
}

span.auto select {
    width: auto;
}

.formnudsisi {
    padding-top: 2px;
    padding-bottom: 2px;
}

.goToProspectusID {
    position: absolute;
    top: 97px;
    left: 37px;
}

/* Error Msg */
.fonterror {
    color: #FF0000;
}

.errormsg_boxed div {
    cursor: pointer;
}

.errormsg_boxed {
    border: solid 1px #fbc7c9;
    background: #fbe3e4 url(../skins/blueGray/whiteDot.png) repeat-x top;
    margin: 5px;
    padding: 5px 20px 5px 5px;
    position: fixed;
    bottom: 18px;
    right: 23px;
    width: 230px;
    z-index: 10;
}

.query_boxed div {
    cursor: pointer;
}

.query_boxed {
    border: solid 1px #c6d881;
    background: #e6efc2 url(../skins/blueGray/whiteDot.png) repeat-x top;
    margin: 5px;
    padding: 5px 20px 5px 5px;
    position: fixed;
    bottom: 18px;
    right: 23px;
    width: 230px;
    z-index: 10;
}

#notificationError {
    background: red;
    font-weight: bold;
    color: #fff;
}

#notificationSuccess {
    background: green;
    font-weight: bold;
    color: #fff;
}

/* PopUp Styling */
.popUpContainer {
}

body.popUp {
    background: url(../skins/blueGray/mainBg.png) repeat-x;
}

div.grid ul.horz li.popType {
    width: 160px;
}

div.grid ul.horz li.popNoMesin {
    width: 120px;
}

div.grid ul.horz li.popCode {
    width: 120px;
}

div.grid ul.horz li.popCustRefno {
    width: 120px;
}

div.grid ul.horz li.popNoRangka {
    width: 140px;
}

div.grid ul.horz li.popRef_no {
    width: 190px;
}

div.grid ul.horz li.popChannel {
    width: 100px;
}

div.grid ul.horz li.popAddress {
    width: 220px;
}

div.grid ul.horz li.popName {
    width: 180px;
}

div.grid ul.horz li.popBirthday {
    width: 100px;
}

div.grid ul.horz li.popTelpon {
    width: 130px;
}

.popUpContainer a.buttonbox.findArea {
    font-size: 12px;
    padding: 3px;
}

.box dd.withLoadData input#txtNama {
    width: 60%;
}

.box dd.withLoadData input#txtRangka {
    width: 60%;
}

div.grid .gridWidth ul.horz li.popStock, div.grid .gridWidth ul.horz li.popStockMin, div.grid .gridWidth ul.horz li.popStockMax {
    text-align: right;
}

.box dd.withCheckBox input {
    width: 60%;
}

.box dd.withCheckBox input[type="checkbox"] {
    width: 10%;
}

.box .withCheckBox label {
    clear: none;
    width: auto;
}

/* From Old CSS */
li.tablefooter {
    font-weight: bold;
    background: #DDD;
}

#formnudsintab label {
    display: block;
    font-weight: normal;
    text-align: left;
    width: 138px;
    float: left;
}

.sulabel {
    width: 250px;
    display: inline-block;
    overflow: hidden;
}

.tableDataDefault {
    background: #EEE;
    border-top: 1px solid #FFF;
}

.boxinput {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 4px;
    float: left; /*For IE*/
    display: block;
    border-top: none;
    background: #EEE;

    color: #666;
    font: bold 10px/17px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: 36px;
}

.simplewobutton {
    border: 1px solid #FFF;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    padding: 0 6px;
    float: left; /*For IE*/
    display: block;
    background: #EEE;
    color: #666;
    font: bold 10px/20px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    height: auto !important;
    height: 1%; /*For IE*/;
    cursor: pointer;
}

.simplewobutton:hover {
    background: #CCC;
    color: #FFF;
}

/* Print Table Styling */
.SBP label {
    display: block;
    float: left;
    line-height: 17px;
    padding-right: 20px;
}

.SBP select {
    float: left;
    margin-right: 10px;
}

.SBP input {
    float: left;
    margin-right: 10px;
}

.showBeforePrint {
    clear: both;
    padding: 2px 0;
}

.showBeforePrint table {
    width: 100%;
    border-collapse: collapse;
}

.showBeforePrint table td {
    border: solid 1px #fff;
    padding: 0 3px;
    text-align: center;
}

.showBeforePrint table td.unit {
    text-align: left;
}

.showBeforePrint table td.sum {
    width: 20px;
}

.showBeforePrint tr.even td {
    background: #e5f1f4;
}

.showBeforePrint tr.odd td {
    background: #f8fbfc;
}

.showBeforePrint tr.even td.m1, .showBeforePrint tr.even td.m3, .showBeforePrint tr.even td.m5, .showBeforePrint tr.even td.m7, .showBeforePrint tr.even td.m9, .showBeforePrint tr.even td.m11 {
    background: #09F;
}

.showBeforePrint tr.odd td.m1, .showBeforePrint tr.odd td.m3, .showBeforePrint tr.odd td.m5, .showBeforePrint tr.odd td.m7, .showBeforePrint tr.odd td.m9, .showBeforePrint tr.odd td.m11 {
    background: #0CF;
}

.showBeforePrint th {
    background: #328aa4;
    color: #fff;
    text-align: center;
}

.showBeforePrint th.hover, .showBeforePrint tr.even th.hover, .showBeforePrint tr.odd th.hover {
    background: #4a98af;
}

.showBeforePrint th.click, .showBeforePrint tr.even th.click, .showBeforePrint tr.odd th.click {
}

.showBeforePrint td.hover, .showBeforePrint tr.even td.hover, .showBeforePrint tr.odd td.hover {
    background: #ecfbd4;
}

.showBeforePrint td.click, .showBeforePrint tr.even td.click, .showBeforePrint tr.odd td.click {
    background: #bce774;
    color: #000;
}

.showBeforePrint tr.even td.hovercell, .showBeforePrint tr.odd td.hovercell {
    background-color: #abc;
}

.showBeforePrint tr.even th.hovercell, .showBeforePrint tr.odd th.hovercell {
    background-color: #ccc;
}

.skinSelect dl {
    float: left;
    margin: 5px;
    text-align: center;
    border: 1px solid transparent;
    padding: 5px;
    border-radius: 5px;
}

.skinSelect dl:hover {
    background: url(../skins/blueGray/bgSkin.png);
    border: 1px solid #CCC;
}

.boxButton {
    float: right;
}

#promotionBook ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
}

#promotionBook ul li {
    float: left;
    clear: none;
    cursor: pointer;
}

#promotionBook span {
    height: 30px;
    display: block;
    clear: both;
    border: solid 1px #aaa;
    margin: 3px;
    border-radius: 5px;
}

#promotionBook hr {
    display: none;
}

#promotionBook ul li.disabled {
    opacity: 0.3;
    filter: alpha(opacity=40);
    background-color: #bbb;
    border-radius: 7px;
}

#promotionBook ul li.selected {
    opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #ff0;
    border-radius: 7px;
}

#promotionBook ul li.highlight {
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-color: #0F6;
    border-radius: 7px;
}

#promotionBook ul li img {
    width: 100%;
    height: 100%;
}

#dock ul li a.eInfo {
    font-weight: bold;
}

a.eInfo span {
    clear: both;
    display: block;
    text-align: right;
    font-weight: normal;
    padding-top: 3px;
}

div.ajaxLoad {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff url(../skins/blueGray/ajaxLoader.gif) no-repeat;
    background-position: center;
    z-index: 1000;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

.phperror {
    position: relative;
    background: red;
    z-index: 1000;
}

.box dd.multiRadio input[type="radio"] {
    margin: 0 5px 0 0;
    width: auto
}

.box dd.multiRadio label {
    clear: none;
    width: auto;
    margin: 0 5px 0 0;
}

.box dd.auto select {
    width: auto;
}

.box dd.auto input {
    /*width: auto;*/
    height: 20px;
}

/* Date Picker */
.box dd.datePicker input#txtDateFrom {
    width: 90px;
    position: relative;
}

.box dd.datePicker input {
    width: 90px;
    position: relative;
}

.picker {
    background: url(../images/calendar.png);
    width: 16px;
    height: 16px;
    position: relative;
    margin: 2px 0 0 78px;
}

.datePicker .picker {
    float: left;
    margin: 2px 0 0 -18px;
    cursor: pointer;
}

/* Button */
.executionButton {
    float: right;
    clear: both;
}

/* Layout */
.forceTopRight {
    position: absolute;
    top: 5px;
    right: 5px;
}

.inlineBox {
    padding: 5px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
}

dd.datePicker {
    white-space: nowrap
}

.datePicker input[type="checkbox"] {
    margin: 0 4px 0 8px;
}

/* CRM Additional Styles */
.box.crm textarea, .box.crm select {
    float: left;
}

/* File Inputs */
div.fileinputs {
    position: relative;
}

div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    height: 24px;
}

div.fakefile input {
    border: none;
    height: 20px;
    width: 200px;
    padding: 2px;
}

input.file {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 2;
    height: 18px;
}

span.uploadButton {
    background: url(../images/file-upload.png) no-repeat left;
    padding-left: 20px;
    height: 24px;
    display: block;
    float: right;
}

#wrapper input.file {
    display: block;
}

#wrapper input.hidden {
    display: block;
    visibility: inherit;
}

#wrapper {
    position: relative;
}

.inlineContents div.fakefile input {
    height: 16px;
    width: 220px;
}

/* Additional */
div.multiSelect select {
    height: auto;
}

div.searchButton {
    float: left;
    width: 18px;
    height: 20px;
    background: url(../images/search.gif) center no-repeat;
    cursor: pointer;
}

dd.withFinder input {
    width: 20%;
}

dd.withFinder div {
    line-height: 19px;
}

.percent input {
    width: 50px;
}

.percent span {
    line-height: 20px;
    padding: 0 0 0 5px;
}

.box dd span.amount {
    float: right;
    padding: 0 10px 0 0;
}

div.grid ul.horz li.subLedger {
    width: 220px;
}

#slRangka {
    /*width: 85%;*/
    width: 96%;
}

/*.yos .yok {
    background: url(../images/plus.png);
    float: left;
    height: 16px;
    margin: 2px 0 0 -18px;
    width: 16px;
    background-color: #ddd;
    margin-left: 10px;
    cursor: pointer;
}*/
.yok {background:url(../images/plus.png);float:left; height:16px; margin:2px 0 0 -18px; width:16px; background-color:#ddd;}
.yos .yok {background:url(../images/plus.png);float:left; height:16px; /*margin:2px 0 0 10px;*/ width:16px; background-color:#ddd;}

.header .exoduz {
    width: 155px;
    height: 39px;
    background: url(../images/logo.png) 50% 50% no-repeat;
}

.header .exoduz span {
    display: none;
}

.formnudsisi img {
    width: 63%;
}

#dock ul li a.eInfo.new {
    color: #F03;
}

.cashNominal h3 {
    font-size: 16px;
    line-height: 32px;
}

.cashNominal dt {
    height: 30px;
}

.cashNominal input.amount[id="txtPayment"] {
    height: 30px;
    font-size: 27px;
    font-weight: bold;
}

.box dd.radioAA span {
    width: 80px;
}

.box dd.radioAA span label {
    display: inline;
    width: auto;
    float: none;
}

.box dd.radioAA span input {
    width: auto;
    margin-right: 5px;
}

.box dt.indent1  span {
    margin-left: 26px;
    display: block;
}

.box dl.bottomDivider {
    border-bottom: solid #ccc 1px;
    padding-bottom: 3px;
}

.box dl.topDivider {
    border-top: solid #fff 1px;
    padding-top: 3px;
}

.amountBox dt {
    width: 60%;
}

.amountBox dd {
    width: 39%;
}

.row .left {
    float: left;
    margin-right: 5px;
    width: 100px;
    margin-bottom: 5px;
}

.row .right {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

input[value~="Delete"],
input[value~="Cancel"],
input[value~="Back"],
button[id~="btnCancel"] {
    background: #b84949 !important;
    color: #FFF !important;
}

input[value~="Delete"]:hover,
input[value~="Cancel"]:hover,
input[value~="Back"]:hover,
button[id~="btnCancel"]:hover {
    background: #ff6666 !important;
}

input[name~="sbLoadData"] {
    padding: 0px 3px !important;
    margin-left: 5px;
}

/*input[name="txtRefNo"] {*/
/*width: 96% !important;*/
/*}*/

/*
.inputRounded {
    position: relative;
}

.inputRounded .leftInput {
    width: 3px;
    height: 19px;
    background: url(../images/roundedInputbox.png) 0 0 no-repeat;
    float: left;
}

.inputRounded .rightInput {
    width: 3px;
    height: 19px;
    background: url(../images/roundedInputbox.png) -3px 0 no-repeat;
    float: right;
}

.inputRounded .centerInput {
    margin: 0 3px;
    height: 19px;
    background: url(../images/roundedInputboxCenter.png) 0 0 repeat-x;
}

select.inputbox.small {
    width: 98px !important;
}

*/
/*input.small {*/
/*width: 100px;*/
/*}*/
/*
.inputRounded {
    float: left;
}

.inputRounded #slheadcomp,
.inputRounded #slHeadComp {
    width: 275px !important;
}

.inputRounded select {
    height: 19px !important;
    -webkit-appearance: none;
    background: url(../images/downarrow.png) 98% 50% no-repeat transparent !important;
    padding-right: 10px;
}
*/
/*-----calculator-----*/

.calculate {
    margin: 5px 12px;
}

.calculate .right {
    float: right;
}

.calculate .left {
    float: left;
}

.calculate .calColumn {
    width: 190px;
    height: 150px;
    margin-left: 10px;
    margin-bottom: 5px;
}

.calculate .formulaItem {
}

.calculate .formulaItem select {
    width: 100%;
    height: 133px;
}

.calculate .formulaItem select .inputbox {
    border: none;
}

.calculate input {
    width: 100%;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 16px;
}

.calculate input.smallFont {
    font-size: 12px;
}

.calculate .operator {
    width: 42px;
    margin-right: 6px;
}

.calculate .calButton {
    width: 42px;
    height: 32px;
    cursor: pointer;
    margin-left: 5px;
    margin-bottom: 2px;
}

.calculate .calButton.longButton {
    width: 64px;
}

.calculate .calButton.heightButton {
    height: 64px;
}

.calculate .calButton .lCal {
    float: left;
    background: url("../images/calSide.png") -10px 0px no-repeat;
    width: 4px;
    height: 32px;
}

.calculate .calButton.heightButton .lCal {
    background: url("../images/calSide.png") 0px 0px no-repeat;
    height: 64px;
}

.calculate .calButton .rCal {
    float: right;
    background: url("../images/calSide.png") -15px 0px no-repeat;
    width: 4px;
    height: 32px;
}

.calculate .calButton.heightButton .rCal {
    background: url("../images/calSide.png") -5px 0px no-repeat;
    height: 64px;
}

.calculate .calButton .cCal {
    background: url(../images/hLineCal.png) 0 0px repeat-x;
    margin: 0 4px;
    height: 32px;
}

.calculate .calButton.heightButton .cCal {
    background: url(../images/hLineCal.png) 0 -32px repeat-x;
    height: 64px;
}

.calculate .calButton .cCal input {
    line-height: 30px;
}

.calculate .calButton.heightButton .cCal input {
    line-height: 63px;
}

/*----------------------------------*/
.vDivider {
    position: absolute;
    width: 12px;
    top: 0;
    z-index: 5;
}

.vDivider .vTop {
    background: url("../images/vDivIcon.png") 0px 0px no-repeat;
    height: 57px;
}

.vDivider .vCenter {
    background: url(../images/vDivider.png) repeat-y;
}

.vDivider .vBottom {
    background: url("../images/vDivIcon.png") 0px -60px no-repeat;
    height: 57px;
}

.vDivider.v50 {
    left: 50%;
    margin-left: -6px;
}

.vDivider.v33 {
    left: 33%;
}

.vDivider.v67 {
    left: 67%;
}

/*------*/
span.userName {
    margin-left: 5px;
}

.FR .buttonWrap input[name="sbPrint"] {
    margin-right: 25px;
    margin-top: 10px;
    margin-bottom: 5px;
}

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

input[disabled] {
    background: #cfcfcf;
}

/*------ detail button------------*/

.buttonDetail {
    font-size: 11px;
    font-weight: normal !important;
    padding: 0 3px;
}

a.buttonDetailDISABLED {
    background: #CCC !important;
    border: none !important;
    font-size: 11px;
    font-weight: normal !important;
    padding: 0 3px;
    color: #000 !important;
}

a.buttonDetailDISABLED:hover {
    background: #CCC !important;
    font-weight: normal !important;
    color: #000 !important;
    cursor: default;
}

/*--------end detail button---*/

/*-----plus button----*/
.plusButton, #btnShowWard, #btnShowDistrict {
    background: black url(../images/plus.png);
    background-color: #DDD;
    height: 16px;
    width: 16px;
    float: left;
    margin-left: 5px;
    cursor: pointer;
}

dt.fullDt label {
    width: auto;
}

.grid_6 .box dd select {
    max-width: 440px
}

#ajaxLoading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #ffffff;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

#ajaxLoading img {
    position: absolute;
    width: 43px;
    height: 43px;
    top: 50%;
    margin-top: -21px;
    left: 50%;
    margin-left: -21px;
}

.popUpContainer div.grid ul.horz li.task {
    width: 75px;
}

.fonterror {
    color: #FF0000;
}

.errormsg_box div {
    cursor: pointer;
}

.errormsg_box {
    border: solid 1px #fbc7c9;
    background: #fbe3e4 url(../skins/blueGray/whiteDot.png) repeat-x top;
    margin: 5px;
    padding: 5px 20px 5px 5px;
    position: fixed;
    bottom: 18px;
    right: 23px;
    width: 230px;
    z-index: 10;
}

.query_box div {
    cursor: pointer;
}

.query_box {
    border: solid 1px #c6d881;
    background: #e6efc2 url(../skins/blueGray/whiteDot.png) repeat-x top;
    margin: 5px;
    padding: 5px 20px 5px 5px;
    position: fixed;
    bottom: 18px;
    right: 23px;
    width: 230px;
    z-index: 10;
}

/*----------------message chat------------------*/
/*------custom scroll----*/
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #999999;
}

::-webkit-scrollbar-thumb {
    min-height: 28px;
    background: rgba(42, 42, 42, 0.88);
}

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

.closeChat {
    margin-left: 10px;
    font-size: 12px;
    margin-right: 5px;
}

.showHide {
    font-size: 18px;
}

.closeMessage,
.closeChat,
.showHide {
    float: right;
    cursor: pointer;
    font-weight: bold;
    line-height: 10px;
    color: #777;
    margin-top: 3px;
}

.closeMessage:hover,
.closeChat:hover,
.showHide:hover {
    color: #333;
}

.closeChat:active,
.showHide:active {
    line-height: 12px;
}

.chatHistory {
    height: 16px;
    width: 16px;
    float: right;
    background: url("../images/history_chat.png") no-repeat;
    margin: 1px 4px;
    cursor: pointer;
    opacity: 0.8;
}

.chatHistory:hover {
    opacity: 1;
}

.emptyContact {
    line-height: 20px;
    font-weight: normal;
    text-align: center;
    font-style: italic;
    color: #777;
    display: none;
}

.goOnline {
    color: #0000CC;
    font-style: normal;
    cursor: pointer;
}

.notifAddContact {
    position: relative;
    display: none;
}

.notifAddContactButton {
    cursor: pointer;
    width: 25px;
    height: 24px;
    margin-top: 3px;
    background: transparent url(../skins/blueGray/contactReq.png) 50% 50% no-repeat;
}

.notifAddContactButton:hover {
    background: transparent url(../skins/blueGray/contactReqHover.png) 50% 50% no-repeat;
}

.chatMenu {
    position: relative;
    display: none;
}

.chatButton {
    cursor: pointer;
    width: 25px;
    height: 24px;
    margin-top: 3px;
    background: transparent url(../skins/blueGray/chat-icon.png) 50% 50% no-repeat;
}

.chatButton:hover {
    opacity: 0.9;
}


.adminChat {
    position: relative;
}

.adminChatButton {
    cursor: pointer;
    width: 20px;
    height: 31px;
    margin-top: 3px;
    margin-left: 2.5px;
    background: transparent url(../images/admin-off.png) 50% 50% no-repeat;
}
.adminChatButton.online {
    background: transparent url(../images/admin-on.png) 50% 50% no-repeat;
}

.adminChatButton:hover {
    opacity: 0.9;
}

.message {
    position: relative;
    display: block;
}

.msgButton {
    cursor: pointer;
    width: 25px;
    height: 24px;
    margin-top: 3px;
    background: transparent url(../skins/blueGray/messageIcon.png) 50% 50% no-repeat;
}

.msgButton:hover {
    background: transparent url(../skins/blueGray/messageIconHover.png) 50% 50% no-repeat;
}

.notify {
    position: absolute;
    right: 24px;
    z-index: 1;
    top: 7px;
    cursor: pointer;
    display: none;
}

.moreChat .notify {
    line-height: 16px;
    right: 40px;
    top: -2px;
    /*display: block;*/
}

.chatMenu .notify {
    top: 4px;
}

.notify .lnot {
    width: 4px;
    height: 17px;
    background: url("../images/notifyIcon.png") 0 0 no-repeat transparent;
    float: left;
}

.notify .rnot {
    width: 8px;
    height: 17px;
    background: url("../images/notifyIcon.png") -5px 0 no-repeat transparent;
    float: right;
}

.notify .cnot {
    height: 17px;
    background: url("../images/notifyHLine.png") repeat-x transparent;
    margin: 0 8px 0 4px;
    text-align: center;
    padding: 0 3px;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
}

.closeMessage {
    font-weight: bold;
    margin: 5px 3px;
    cursor: pointer;
    float: right;
    font-size: 12px;
}

.onOff {
    font-weight: normal;
    cursor: pointer;
    font-size: 10px;
}

.messageContainer {
    position: fixed;
    right: 24px;
    z-index: 0;
    top: 63px;
    /*right: -200px;*/
    display: none;
}

#contactRequest {
    /*display: block;*/
}

#chatWrap {
    /*display: block;*/
    /*z-index: 1;*/
}

.chatNotif {
    height: 12px;
    width: 12px;
    background: url("../skins/blueGray/chat-notif.png");
    position: absolute;
    top: -4px;
    left: -4px;
    display: none;
}

.chat-event {
    color: #838080;
    font-style: italic;
    border-top: 1px solid #CCC;
    line-height: 20px;
    padding: 0 10px;
}

.emptySearch {
    min-height: 40px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px dotted #333;
    background: #E6E6E6;
    font-style: italic;
    padding: 10px;
    word-wrap: break-word;
}

.addContact {
    float: left;
    margin-right: 2px;
    width: 30px;
    height: 19px;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    margin-top: 3px;
    margin-left: 4px;
    background: #DDD;
    font-size: 17px;
    color: rgb(90, 90, 90);
    border-radius: 3px;
    border: 1px solid rgb(173, 173, 173);
    box-shadow: 0 0 10px rgb(206, 200, 200) inset;
    cursor: pointer;
}

.addContact:hover {
    opacity: 0.8;
}

.addContact:active {
    line-height: 18px;
}

.boxMessage {
    width: 230px;
    background: #FFF;
    border: 1px solid #aaaaaa;
    /*float: right;*/
}

#msgContainer {
    float: left;
    min-height: 95px;
}

#chatBox {
    /*display: none;*/
}

#newMessage {
    display: none;
}

#listUser {
    float: left;
    display: none;
}

.contentListUser {
    list-style: none;
    margin: 3px;
}

.contentListUser .userList, .emptyUser {
    min-height: 27px;
    border-bottom: 1px solid #CCC;
}

.contentListUser .userList:hover {
    background: #EEE;
}

.contentListUser .userList:first-child {
    border-top: none;
}

.contentListUser .userList .chatUserName {
    width: 162px;
    float: left;
    line-height: 20px;
    padding: 3px;
    font-weight: bold;
    word-wrap: break-word;
}

.contentListUser .userList .addContact {
    float: right;
}

.contentListUser .userList .reqName,
.emptyUser {
    line-height: 20px;
    padding: 3px;
    font-weight: bold;
    word-wrap: break-word;
}

.contentListUser .userList .actReq {
    float: right;
    margin-bottom: 5px;
    margin-right: 5px;
}

.contentListUser .userList .actReq>span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #CCC;
    padding: 0 5px;
    cursor: pointer;
    border-radius: 3px;
    color: #FFF;
    opacity: 0.9;
}

.contentListUser .userList .actReq>span.approve {
    background: #008000;
}

.contentListUser .userList .actReq>span.deny {
    background: #F00;
}

.contentListUser .userList .actReq>span:hover {
    opacity: 0.8;
}

.contentListUser .userList .actReq>span:active {
    opacity: 1;
}

.boxMessageContainer {
    position: fixed;
    bottom: 21px;
    right: 256px;
    max-width: 600px;
    z-index: 10;
}

#chat-area {
    float: left;
}

.hiddenElm {
    display: none !important;
}

.boxMessageContainer .moreChat {
    height: 24px;
    background: #FFF url(../skins/blueGray/chat-icon.png) 4px 50% no-repeat;
    float: left;
    border: 1px solid #aaa;
    padding-left: 30px;
    font-weight: bold;
    line-height: 24px;
    color: #444;
    position: relative;
    margin-right: 1px;
    display: none;
}

.countChat {
    margin-left: -28px;
    padding-left: 28px;
    padding-right: 8px;
    cursor: pointer;
}

.boxMessageContainer .moreChat .wrapHideChat {
    position: absolute;
    bottom: 24px;
    right: -1px;
    border: 1px solid #CCC;
    display: none;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat {
    width: 200px;
    height: 22px;
    line-height: 22px;
    padding: 0 5px;
    background: #DDD;
    border-top: 1px solid #CCC;
    position: relative;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat .closeHide {
    width: 20px;
    float: right;
    text-align: center;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat .closeHide:hover {
    color: #000;
    cursor: pointer;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat .nameHide {
    width: 180px;
    float: left;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat:hover {
    background: #EEE;
}

.boxMessageContainer .moreChat .wrapHideChat .hiddenChat:first-child {
    border-top: none;
}

.boxMessageContainer .chatBox {
    float: left;
    width: 250px;
    position: relative;
    height: 26px;
    border: none;
    background: none;
    margin-right: 3px;
}

.boxMessageContainer .chatBoxWrap {
    position: absolute;
    width: 250px;
    bottom: 0;
    background: #FFF;
    border: 1px solid #aaa;
}

.boxMessageContainer .chatBox .bodyMessage {
    background: #FFF;
}

#listUser .bodyMessage {
    overflow: hidden;
    overflow-y: auto;
}

.boxMessage .headMessage {
    /*height: 45px;*/
    background: #cccccc;
    border: 1px solid #aaaaaa;
    margin: 1px;
    position: relative;
}

.boxMessage#newMessage .headMessage {
    height: 20px;
}

.boxMessage .headMessage .messageText {
    color: #000;
    font-weight: bold;
    /*height: 20px;*/
    line-height: 20px;
    padding-left: 5px;
}

.boxMessage .headMessage .newMessageText {
    float: right;
    color: #fff;
    font-weight: bold;
    margin: 3px;
    cursor: pointer;
}

.boxMessage .searchBox {
    margin: 0 3px;
    margin-top: 3px;
    /*width: 170px;*/
    float: left;
}

.boxMessage.newMessage .searchBox {
    margin: 5px;
}

.boxMessage .searchBox .searchOption {
    float: left;
    position: relative;
}

.boxMessage .searchBox .searchOption .searchButton {
    width: 36px;
    height: 17px;
    background: url("../images/searchIconBg.png") repeat-x;
    border: 1px solid #AAAAAA;
    cursor: pointer;
}

.boxMessage .searchBox .searchOption .searchButton .searchIcon {
    width: 14px;
    height: 15px;
    background: url("../images/searchIcon.png") no-repeat;
    margin-top: 2px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .userIcon {
    width: 14px;
    height: 15px;
    background: url("../images/userIcon.png") no-repeat;
    margin-top: 2px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .chatActionIcon {
    width: 17px;
    height: 17px;
    background: url("../images/chatAction.png") no-repeat;
    margin-top: 1px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .downIcon {
    width: 8px;
    height: 6px;
    background: url("../images/downarrow.png") no-repeat;
    margin-top: 6px;
    float: left;
    margin-left: 4px;
}

.boxMessage .searchBox .searchOption .searchButton:active .searchIcon,
.boxMessage .searchBox .searchOption .searchButton:active .userIcon {
    margin-top: 3px;
}

.boxMessage .searchBox .searchOption .searchButton:active .chatActionIcon {
    margin-top: 2px;
}

.boxMessage .searchBox .searchOption .searchButton:active .downIcon {
    margin-top: 7px;
}

.boxMessage .searchBox .searchOption .searchOptionContent {
    position: absolute;
    width: 168px;
    background: #FFF;
    border: 1px solid #AAA;
    top: 19px;
    z-index: 1;
    display: none;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption {
    border-top: 1px solid #AAA;
    height: 18px;
    color: #999999;
    font-size: 11px;
    line-height: 18px;
    text-indent: 5px;
    font-weight: bold;
    cursor: pointer;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption:hover {
    color: #7b7b7b;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption:first-child {
    border-top: none;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption.label {
    font-weight: normal;
    cursor: default;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption.label:hover {
    color: #999;
}

.boxMessage .searchBox .searchInput {
    padding: 1px 4px;
    width: 170px;
    height: 17px;
    background: #FFF;
    border: 1px solid #AAAAAA;
    margin-bottom: 2px;
}

.boxMessage#listUser .searchBox .searchInput {
    width: 210px;
}

.boxMessage .searchBox .searchInput input {
    background: none;
    border: none;
    width: 100%;
    color: #2b2b2b;
    font-size: 11px;
    line-height: 18px;
}

.boxMessage .bodyMessage#roster-area {
    overflow-x: hidden;
    overflow-y: auto;
}

.boxMessage .bodyMessage .listMessage {
    border-top: 1px dotted #999;
    overflow: auto;
    padding: 3px;
    position: relative;
    list-style: none;
    word-wrap: break-word;
}

.boxMessage .bodyMessage .listMessage.hasHover:hover {
    background: #a8b6d1;
    cursor: pointer
}

.boxMessage .bodyMessage .listMessage:first-child {
    border-top: none;
    /*padding-top: 0;*/
}

.boxMessage .bodyMessage .listMessage .status {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 5px;
}

.boxMessage .bodyMessage .listMessage:hover .arrow {
    background: url("../images/msgArrow.png") no-repeat;
    width: 7px;
    height: 9px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -3px;
}

.boxMessage .bodyMessage .listMessage .online .status {
    background: url("../images/onlineIcon.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .offline .status {
    background: url("../images/offlineIcon.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .away .status {
    background: url("../images/idle.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .offline .name,
.boxMessage .bodyMessage .listMessage .offline .dateTime {
    color: #777;
}

.boxMessage .bodyMessage .listMessage .status.me,
.boxMessage .bodyMessage .listMessage .status.you {
    margin-right: 0px;
    margin-top: 5px;
    margin-left: 5px;
}

.boxMessage .bodyMessage .listMessage .status.you {
    background: url("../images/arrowLeftRed.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .status.me {
    background: url("../images/arrowRightGreen.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .detail {
    margin-left: 21px;
    color: #2b2b2b;
    font-size: 11px;
    line-height: 18px;
}

.boxMessage .bodyMessage .listMessage .detail .name {
    font-weight: bold;
}

.boxMessage .bodyMessage .listMessage.offline .detail .name {
    color: #AAA;
}

.boxMessage .bodyMessage .listMessage .detail .dateTime {
    font-size: 10px;
    font-style: italic;
}

.boxMessage .bodyMessage .listMessage .postingArea textarea {
    width: 96%;
    max-width: 96%;
    min-width: 96%;
    margin: 3% 1%;
    height: 50px;
    max-height: 50px;
    min-height: 50px;
}

.boxMessage .bodyMessage .listMessage .postingArea input.msgInputButton {
    float: right;
    margin: 0 2px 3px 5px;
}

.boxMessage .bodyMessage .listMessage .postingArea input.msgInputButton:active {
    margin-top: 1px;
    margin-bottom: 2px;
}

.boxMessage .text {
    font-weight: bold;
    margin: 5px;
    font-size: 11px;
    margin-top: 10px;
}

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

/*----------------back-up message------------------*/
/*

.message {
    position: relative;
    display: block;
}

.msgButton {
    cursor: pointer;
    width: 25px;
    height: 24px;
    margin-top: 3px;
    background: transparent url(../skins/blueGray/messageIcon.png) 50% 50% no-repeat;
}

.msgButton:hover {
    background: transparent url(../skins/blueGray/messageIconHover.png) 50% 50% no-repeat;
}

.message .notify {
    position: absolute;
    right: 24px;
    z-index: 1;
    top: 7px;
    display: none;
}

.message .notify .lnot {
    width: 4px;
    height: 17px;
    background: url("../images/notifyIcon.png") 0 0 no-repeat transparent;
    float: left;
}

.message .notify .rnot {
    width: 8px;
    height: 17px;
    background: url("../images/notifyIcon.png") -5px 0 no-repeat transparent;
    float: right;
}

.message .notify .cnot {
    height: 17px;
    background: url("../images/notifyHLine.png") repeat-x transparent;
    margin: 0 8px 0 4px;
    text-align: center;
    padding: 0 3px;
    color: #FFF;
    font-size: 11px;
    font-weight: bold;
}

.messageContainer {
    position: fixed;
    right: 24px;
    z-index: 1;
    top: 63px;
    */
/*right: -200px;*//*

    display: none;
}

.boxMessage {
    width: 180px;
    background: #FFF;
    border: 1px solid #aaaaaa;
    float: right;
}

#msgContainer {
    */
/*display: none;*//*

}

#chatBox {
    display: none;
}

#newMessage {
    display: none;
}

.boxMessage .headMessage {
    height: 45px;
    background: #cccccc;
    border: 1px solid #aaaaaa;
    margin: 1px;
}

.boxMessage#newMessage .headMessage {
    height: 20px;
}

.boxMessage .headMessage .messageText {
    float: left;
    color: #000;
    font-weight: bold;
    margin: 4px;
}

.boxMessage .headMessage .newMessageText {
    float: right;
    color: #fff;
    font-weight: bold;
    margin: 3px;
    cursor: pointer;
}

.boxMessage .searchBox {
    margin: 0 3px;
    width: 170px;
}

.boxMessage.newMessage .searchBox {
    margin: 5px;
}

.boxMessage .searchBox .searchOption {
    float: left;
    position: relative;
}

.boxMessage .searchBox .searchOption .searchButton {
    width: 36px;
    height: 17px;
    background: url("../images/searchIconBg.png") repeat-x;
    border: 1px solid #AAAAAA;
    cursor: pointer;
}

.boxMessage .searchBox .searchOption .searchButton .searchIcon {
    width: 14px;
    height: 15px;
    background: url("../images/searchIcon.png") no-repeat;
    margin-top: 2px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .userIcon {
    width: 14px;
    height: 15px;
    background: url("../images/userIcon.png") no-repeat;
    margin-top: 2px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .chatActionIcon {
    width: 17px;
    height: 17px;
    background: url("../images/chatAction.png") no-repeat;
    margin-top: 1px;
    margin-left: 3px;
    float: left;
}

.boxMessage .searchBox .searchOption .searchButton .downIcon {
    width: 8px;
    height: 6px;
    background: url("../images/downarrow.png") no-repeat;
    margin-top: 6px;
    float: left;
    margin-left: 4px;
}

.boxMessage .searchBox .searchOption .searchButton:active .searchIcon,
.boxMessage .searchBox .searchOption .searchButton:active .userIcon {
    margin-top: 3px;
}

.boxMessage .searchBox .searchOption .searchButton:active .chatActionIcon {
    margin-top: 2px;
}

.boxMessage .searchBox .searchOption .searchButton:active .downIcon {
    margin-top: 7px;
}

.boxMessage .searchBox .searchOption .searchOptionContent {
    position: absolute;
    width: 168px;
    background: #FFF;
    border: 1px solid #AAA;
    top: 19px;
    z-index: 1;
    display: none;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption {
    border-top: 1px solid #AAA;
    height: 18px;
    color: #999999;
    font-size: 11px;
    line-height: 18px;
    text-indent: 5px;
    font-weight: bold;
    cursor: pointer;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption:hover {
    color: #7b7b7b;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption:first-child {
    border-top: none;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption.label {
    font-weight: normal;
    cursor: default;
}

.boxMessage .searchBox .searchOption .searchOptionContent .listOption.label:hover {
    color: #999;
}

.boxMessage .searchBox .searchInput {
    width: 130px;
    height: 17px;
    background: #FFF;
    border: 1px solid #AAAAAA;
    float: left;
}

.boxMessage .searchBox .searchInput input {
    background: none;
    border: none;
    color: #2b2b2b;
    font-size: 12px;
    line-height: 16px;
}

.boxMessage .bodyMessage .listMessage {
    width: 97%;
    border-top: 1px dotted #999;
    overflow: auto;
    padding: 2%;
    position: relative;
}

.boxMessage .bodyMessage .listMessage.hasHover:hover {
    background: #a8b6d1;
    cursor: pointer
}

.boxMessage .bodyMessage .listMessage:first-child {
    border-top: none;
    padding-top: 0;
}

.boxMessage .bodyMessage .listMessage .status {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 5px;
}

.boxMessage .bodyMessage .listMessage:hover .arrow {
    background: url("../images/msgArrow.png") no-repeat;
    width: 7px;
    height: 9px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -3px;
}

.boxMessage .bodyMessage .listMessage .status.online {
    background: url("../images/onlineIcon.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .status.offline {
    background: url("../images/offlineIcon.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .status.me,
.boxMessage .bodyMessage .listMessage .status.you {
    margin-right: 0px;
    margin-top: 5px;
    margin-left: 5px;
}

.boxMessage .bodyMessage .listMessage .status.you {
    background: url("../images/arrowLeftRed.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .status.me {
    background: url("../images/arrowRightGreen.png") no-repeat;
}

.boxMessage .bodyMessage .listMessage .detail {
    margin-left: 21px;
    color: #2b2b2b;
    font-size: 11px;
    line-height: 18px;
}

.boxMessage .bodyMessage .listMessage .detail .name {
    font-weight: bold;
}

.boxMessage .bodyMessage .listMessage .detail .dateTime {
    font-size: 10px;
}

.boxMessage .bodyMessage .listMessage .postingArea textarea {
    width: 166px;
    margin: 5px 2px;
    height: 50px;
}

.boxMessage .bodyMessage .listMessage .postingArea input.msgInputButton {
    float: right;
    margin: 0 2px 3px 5px;
}

.boxMessage .bodyMessage .listMessage .postingArea input.msgInputButton:active {
    margin-top: 1px;
    margin-bottom: 2px;
}

.boxMessage .text {
    font-weight: bold;
    margin: 5px;
    font-size: 11px;
    margin-top: 10px;
}
*/

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

/*======overlay====*/

.overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 22;
    display: none;
    top: 0;
    left: 0
}

.overlay#overlay3 {
    background-image: -webkit-radial-gradient(50% 50%, ellipse cover, transparent 7%, rgba(0, 0, 0, 0.7) 98%);
    background-image: -moz-radial-gradient(50% 50%, ellipse cover, transparent 7%, rgba(0, 0, 0, 0.7) 98%);
    background-image: -ms-radial-gradient(50% 50%, ellipse cover, transparent 7%, rgba(0, 0, 0, 0.7) 98%);
}

.overlay#overlay2 {
    background: rgba(0, 0, 0, 0.5);
}

/*============pop up=======*/

/*======notification====*/

#notificationContainer {
    position: fixed;
    right: 26px;
    bottom: 22px;
    z-index: 9999;
}

#notificationContainer li {
    position: relative;
    list-style: none;
}

.notification {
    background-color: rgba(250, 250, 250, 0.85);
    border: 1px solid #928F8F;
    min-width: 170px;
    /*display: none;*/
}

.notifIcon {
    width: 48px;
    height: 45px;
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
    float: left;
}

.notifIcon.successIcon {
    background: url("../images/contact_add.png") no-repeat;
}

.notifIcon.failedIcon {
    background: url("../images/contact_add.png") 0 -45px no-repeat;
}

.notifIcon.warningIcon {
    background: yellow;
}

.notifText {
    height: 60px;
    font-size: 13px;
    display: table;
    text-indent: 10px;
    margin-right: 35px;
    white-space: nowrap;
    line-height: 16px;
}

.notifText>div {
    display: table-cell;
    vertical-align: middle;
}

.notifCloseBtn {
    /*background: #333;*/
    width: 18px;
    height: 18px;
    position: absolute;
    right: 0;
    top: 5px;
    cursor: pointer;
    opacity: 0;
    font-size: 13px;
    font-weight: bold;
}

#notificationContainer li:hover .notifCloseBtn {
    opacity: 1;
}

/*======dialogBox====*/
.dialogBox {
    width: 300px;
    background: #FFFFFF;
    border: 1px solid #333;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -150px;
    z-index: 23;
    display: none;
}

.dialogBox .dBTitle {
    background: #333;
    color: #FFF;
    padding: 8px;
    text-align: center;
}

.dialogBox .dBContent {
    padding: 10px;
    text-align: center;
}

.dialogBox .dBContent .dbBtn {
    display: inline-block;
    margin: 3px;
    background: #333;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.dialogBox .dBContent .dbBtn:hover {
    opacity: 0.9;
}

.dialogBox .dBContent .dbBtn:active {
    background: #000;
}

.dialogBox .dBContent .userInfo {
    margin-bottom: 10px;
}

.dialogBox .dBContent .userInfo>div {
    margin-bottom: 5px;
}

.dialogBox .dBContent .userInfo .labelTitle {
    width: 100px;
    text-align: right;
    display: inline-block;
}

.dialogBox .dBContent .userInfo .labelSp {
    width: 20px;
}

.dialogBox .dBContent .userInfo .labelDetail {
    width: 150px;
    text-align: left;
    display: inline-block;
}

.dialogBox .dBContent .userInfo .labelDetail input {
    padding: 3px;
}

/*============tooltip=============*/

#tooltipInfo {
    /*max-width: 200px;*/
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    left: 50%;
    top: 200px;
    z-index: 9999;
    border-radius: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 3px;
    box-shadow: 0 5px 15px rgba(15, 18, 24, 0.59);
    -moz-box-shadow: 0 5px 15px rgba(15, 18, 24, 0.59);
    -webkit-box-shadow: 0 5px 15px rgba(15, 18, 24, 0.59);
    padding: 4px 6px;
    color: #FFF;
    font-size: 10px;
    line-height: 16px;
    border: 2px solid #FFF;
    display: none;
    white-space: nowrap;
    z-index: 99;
}

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

.emptyClass input {color:#CCC;}

#btnShow{
		float: left;
		position: absolute;
		display:inline-block;
	}