html, body {
    height: 100%;
}

#menu{
	
	height: 100%;
    padding-top: 48px;
}

#divSysGenInfo {
    background-color: #F3F3F6;
    height: 48px;
    position: absolute;
    width: 98.5%;
    z-index: 999;
}

.sysGenInfoLeft {
    float: left;
    width: 210px;
    height: 48px;
    background-color: #333F4B;
}

#imm3Name {
    font-size: 20px;
    font-family: arial,sans-serif;
    padding-top: 12px;
    margin-left: 12px;
    height: 48px;
    color: #FFF;
}
button {
    background-color: rgba(0, 255, 255, 0);
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
#menuTitle {
    display: none;
    padding-top: 8px;
    height: 48px;
}

#arrowLeft {
    display: none;
    padding-top: 12px;
    margin-right: 5px;
    height: 48px;
    float: right;
}

#immSysInfo {
    margin-left: 200px;
    padding-top: 8px;
    height: 48px;
}

#immProName {
    margin-left: 20px;
    font-size: 16px;
    color: #666;
    font-weight: 700;
    display: inline-block;
    width: 25%;
}

#immSrvName {
    margin-left: 16px;
    display: inline-block;
}

#immSysInfo span {
    font-size: 14px;
    color: #333;
}

.sysGenInfoRight {
    float: right;
   /* height: 48px;*/
}

#immTime {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    height: 48px;
    margin-top: -10px;
    padding-top: 10px;
}
#immLanguage {
    float: left;
    margin-right: 40px;
    padding-right: 10px;
    padding-left: 10px;
    height: 48px;
    margin-top: -10px;
    padding-top: 10px;
}

#immExport {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    height: 48px;
    margin-top: -10px;
    padding-top: 10px;
}

#immUser {
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    height: 48px;
    margin-top: -10px;
    padding-top: 10px;
}

#immExport:hover, #immUser:hover, #immTime:hover, #immLanguage:hover {
    cursor: pointer;
    background-color: #0079BA;
}
#immExport:focus, #immUser:focus, #immTime:focus, #immLanguage:focus{
    cursor: pointer;
    background-color: #546372;
}
#immExport:focus span, #immUser:focus span, #immTime:focus span,
#immExport:hover span, #immUser:hover span, #immTime:hover span{
    color: white;
}
#immExport:focus div,#immExport:hover div{
    background-image: url('../images/icons/export-white.png');
}
#immUser:focus div,#immUser:hover div{
    background-image: url('../images/icons/user-white.png');
}
#immTime:focus div,#immTime:hover div{
    background-image: url('../images/icons/time-white.png');
}
#immLanguage:focus div,#immLanguage:hover div{
    background-image: url('../images/icons/more-white.png');
}
#immExport span, #immUser span, #immTime span {
    color: #333;
    font-size: 14px;
}

#userDetailShow, #exportDetailShow, #timeDetailShow, #languageDetailShow {
    float: right;
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
    border-radius:0;
    padding: 10px;
    background-color: #FFF;

}

#timeDetailShow {
    margin-right: 30px;
    width: 370px;
    overflow-y: auto;
}
#languageDetailShow {
    margin-right: 30px;
    width: 210px;
    overflow-y: auto;
    background-color: #333F4B;
}

#userDetailShow {
    margin-right: 30px;
    width: 270px;
    /*height: 280px;*/
    overflow-y: auto;
}

#exportDetailShow {
    margin-right: 30px;
    width: 340px;
    /*height: 500px;*/
    overflow-y: auto;
}
.languageIcon{
    width: 30px;
    float: left;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px
}
.languageText{
    width: 144px;
    float: left;
    padding-top: 2px;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #fff;
}
#about:hover,#help:hover,#license:hover,#visit:hover{
    background-color:#0079BA ;

}

.exportDetailChkBoxLine {
    margin-bottom: 16px;
    color: #333;
    font-size: 12px;
}

.exportDetailSubChkBox {
    margin-top: -16px;
    display: inline-block;
    color: #333;
    font-size: 12px;
    margin-left: 24px; 
    width: 100%;
}

.exportDetailAs {
    display: inline-block;
    color: #333;
    font-size: 12px;
    margin-top: -8px;
}

.exportDetailChkBoxLine input:hover, .exportDetailChkBoxLine div:hover,
.exportDetailSubChkBox input:hover, .exportDetailSubChkBox div:hover,
.exportDetailAs input:hover, .exportDetailAs div:hover {
    cursor: pointer;
}

.exportDetailChkBoxLine div, .exportDetailSubChkBox div, .exportDetailAs div {
    margin-top: 2px;
}


#app {
	
    height: 100%; 
    /* overflow-x: hidden; */
    overflow-y: auto;
    background-color: #F3F3F6;
	
}
 
.appLoginStyle{
	
	margin-left: 200px;
	padding-left: 20px;
    padding-right: 20px;
	padding-top: 48px;
}
#menuXClarity {
    padding-left: 20px;
}

.lineInput {
    outline: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #000000;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    height: 24px;
    line-height: 24px;
}

.customHyperLink {
    outline: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: #3DA3DA;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
    font-weight: bold;
    color: #3DA3DA;
}

@media (max-width: 1080px) {
    .sysGenInfoLeft {
        width: 48px;
    }
    
    #immSysInfo {
        margin-left: 48px;
    }
    
    #imm3Name {
        display: none;
    }    
    
    #menuTitle {
        display: block;
    }

    #menuXClarity {
        display: none;
    }
        
    body.showMenu .sysGenInfoLeft {
        width: 210px;
    }

    body.showMenu #app, body.showMenu #immSysInfo {
        margin-left: 200px;
    }
    
    body.showMenu #imm3Name {
        display: block;
    }
    
    body.showMenu #arrowLeft {
        display: block;
    }

    body.showMenu #menuTitle {
        display: none;
    }
    body.showMenu #menuXClarity {
        padding-left:12px;
        display: block;
    }
    
    .sysGenInfoLeft:hover {
        cursor: pointer;
    }
}

@media (max-width: 1080px) and (min-width: 460px) {
    #app {
        margin-left: 48px;
    }
}

@media (max-width: 460px) {
    #app {
        margin-left: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
    .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media (max-width: 1080px) {
    #immSrvName {
        display: none;
    }
    #immProName{
        width: 40%;
    }
}

@media (max-width: 800px) {
    #immTime {
        display: none;
    }
}

@media (max-width: 600px) {
    #immProName {
        display: none;
    }
}

@media (max-width: 400px) {
    #immExport, #exportDetailShow {
        display: none;
    }
}

@media (max-width: 320px) {
    #immUser span {
        display: none;
    }
}
.select-file{
    margin-left: 10px;
}

.commonIconBlueBorder:hover {
    outline: 2px solid #0079BA;
    outline-offset: 2px;
    cursor: pointer;
}
.operationDisabled:hover, .operationDisabled:focus{
    outline: 2px solid #E51C23;
    outline-offset: 0px;
    cursor: not-allowed;
}
.actionDisabled:hover, .actionDisabled:focus{
    outline: 2px solid #E51C23;
    outline-offset: 2px;
    cursor: not-allowed;
}
.operationMouse:hover {
    outline: 2px solid #0079BA;
    outline-offset: 0px;
    cursor: pointer;
}
select:hover {
    outline: 2px solid #0079BA;
    outline-offset: 0px;
    cursor: pointer;
}
.customize-dropdown-menu{
    font-size:14px;
    margin: 0px;
    padding: 0px;
}

.customize-dropdown-menu>li>a{
    line-height: 30px;
    background-color: #333F4B;
    color: #fff;
    padding-left: 0px;
}
.customize-dropdown-menu>li>a:hover{
    background-color: #0079BA;
    color: #fff;
}

.divWithShadow {
    background-color: #FFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    float: left;
}
.grayShadow {
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
    float: left;
    padding: 10px;
}
.ax_horizontal_line {
    font-size: 13px;
    color: #333333;
    text-align: center;
    line-height: 1px;;
}
.time_font {
    font-family:'Arial Bold', 'Arial';
    font-weight:700;
}
.dateDetailFont {
    font-family: 'Arial Bold', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 12px;
    color: #666666;
}
.ax_radio_button {
    font-family: 'Arial Regular', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #333333;
    text-align: left;
    line-height: normal;
}
.div_in_date {
    margin-bottom: 10px;
}
.line_blue_input{
    outline:medium;
    border-top-style:none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-bottom-color: cornflowerblue;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
    width: 242px;
}
.over_hide_select{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*.over_hide_select > option{*/
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
/*white-space: nowrap;*/
/*width: inherit;*/
/*}*/
option > div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 280px;
}

.optionsUl {
    display: block;
    position: absolute;
    z-index: 2;
    height: 250px;
    overflow-y: scroll;
    background-color: white;
    border: solid 1px #769DC0;
    margin:0px;
    padding: 0px;
    width: 280px;
}
.optionsUl > li{
    display: block;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    height: 18px;
    margin-bottom: 2px;
}
.optionsUl > li:hover{
    background: -webkit-linear-gradient(#E4F2FF, #AFD8FF); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#E4F2FF, #AFD8FF); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#E4F2FF, #AFD8FF); /* Firefox 3.6 - 15 */
    background: linear-gradient(#E4F2FF, #AFD8FF); /* 标准的语法 */
    cursor: pointer;
}
.fakeInput{
    width: 255px;
    height: 28px;
    border-bottom:1px solid gainsboro;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.input-check-fail {
    width: 18px;
    height: 18px;
    position: relative;
    left: -24px;
}

.input-check-success {
    width: 18px;
    height: 18px;
    position: relative;
    left: -24px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0;
}
input[type="number"]{
    -moz-appearance:textfield;
}

.input-check-info {
    font-size: 12px;
    color: #aa1111;
    white-space: initial;
    position: absolute;
    background-color: #FFF;
    z-index: 100;
    border: solid 1px;
    padding: 0 5px;
}
/*start big loading*/
.bigSpinner {
    width: 40px;
    height: 40px;
    position: relative;
    float: right;
    margin-right: 170px;
    margin-top: 55px;
}
.bigContainer1 > div, .bigContainer2 > div, .bigContainer3 > div {
    width: 6px;
    height: 6px;
    background-color: #0096e7;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.bigSpinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bigContainer2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.bigContainer3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}


.bigContainer2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.bigContainer3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.bigContainer1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.bigContainer2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.bigContainer3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.bigContainer1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.bigContainer2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.bigContainer3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.bigContainer1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.bigContainer2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.bigContainer3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

/*start small loading*/
.smallSpinner {
    width: 16px;
    height: 16px;
    position: relative;
    float: left;
    margin-left: 20px;
    margin-top: 5px;
}

.smallContainer1 > div, .smallContainer2 > div, .smallContainer3 > div {
    width: 4px;
    height: 4px;
    background-color: #333;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.smallSpinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.smallContainer2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.smallContainer3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.smallContainer2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.smallContainer3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.smallContainer1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.smallContainer2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.smallContainer3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.smallContainer1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.smallContainer2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.smallContainer3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.smallContainer1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.smallContainer2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.smallContainer3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

/*start loading*/
.spinner {
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
    margin-right: 320px;
    margin-top: 5px;
}

.container1 > div, .container2 > div, .container3 > div {
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.popUpBox{
    position:relative;
    margin-left:30%;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 1px 5px rgba(0,0,0,0.28);
    border-bottom-right-radius:3px;
    border-bottom-left-radius: 3px;
    width:600px;
    margin-top:2px;
    line-height: 20px;
}

.go_to_top_link {
    width: 48px;
    height: 48px;
    background-image: url('../images/icons/go-to-top-dcgg.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}
.go_to_top_link:hover{
    background-image: url('../images/icons/go-to-top-mouseover.png');
}
.table_fixed_layout {
    table-layout:fixed;
}

.table_fixed_label {
    width: 150px;
    height: 36px;
    vertical-align: top;
}

.table_fixed_input {
    width: 200px;
    height: 36px;
    vertical-align: top;
}

.transparent-disable-layer {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #BDBDBD;
    opacity: 0.3;
    cursor: not-allowed;
}

.transparent-disable-img {
    /*background-color: #BDBDBD;*/
    /*opacity: 0.3;*/
    cursor: not-allowed;
}

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

/*text with icon*/
.textWithIcon{
    cursor: pointer;
    height: 24px;
}
.textWithIcon>div{
    display: inline-block;
}
.textWithIcon>div[class*="xcc-icon"]{
    float: left;
    margin: 2px 5px 0 0;
}

input[type=number] {
    -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}
/*end loading*/