/* app css stylesheet */

body { font-size: 16px; font-family: Arial, "Microsoft YaHei"; background-color: #fff;; padding-top: 51px; padding-bottom: 32px; }

/*------ navigation ------*/
/*#systemTitle {
    font-size: 15px;
    color: #333;
}
#leftNav, #rightNav { font-size: 0.875em; }
#leftNav a, #rightNav a { color: #333; }
#leftNav a:hover, #rightNav a:hover { background-color: #ddd; }
#leftNav li ul { min-width: 120px; }
#alarmCount { background-color: #f56954; }
#taskCount {background-color: #00bf00; }*/
.navbar { background-color: #294e80!important; border-bottom: none; }
.navbar-brand { font-size: 15px; font-weight: normal; text-shadow: -1px -1px 0px #003566; padding-top: 12px; }
.gs-system-title { color: #ddd; padding-left: 5px; line-height: 26px;}
.gs-logo-wrapper { display: inline-block; width: 56px; height: 26px;}
.gs-logo-wrapper img { max-width: 100%; }

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: #213f66;
}

#leftNav, #rightNav { font-size: 0.875em; }
#leftNav li ul { min-width: 120px; }

#leftNav > li > a, #rightNav > li > a { color: #ddd; font-weight: normal; cursor: pointer;}
#leftNav .active a { background-color: #083766; }
#leftNav > li > a:hover { background-color: #213f66; }
#leftNav li a ul li a { font-size: 14px; font-weight: normal; color: #333;}

/*------ footer ------*/
.footer {
	background-color: #eee;
	height: 32px;
	line-height: 32px;
	position: fixed;
	bottom: 0;
	font-size: 12px;
	width: 100%;
	text-align: right;
	padding-right: 15px;
}

/*------ Icon ------*/
.ion-size-default {
    font-size: 1.5em;
}

/*------ Login -----*/
.login-container { margin-top: 60px; }
.login-form, .register-form {
    border: 1px solid #ddd;
    border-radius: 2px;
    background-color: #f8f8f8;
    padding: 30px 45px 15px;
    font-size: 0.875em;
}
.register-form { margin: 50px auto; }
#mobileInput { background: #fff url("/images/icon-username.png") 10px center no-repeat; padding-left: 36px; }
#passwordInput { background: #fff url("/images/icon-password.png") 10px center no-repeat; padding-left: 36px; }
.dcode-container { margin-top: 40px; }
.dcode { border: 1px solid #ddd; padding: 10px; background-color: #f8f8f8; border-radius: 2px; }
.dcode img { max-width: 100%; }
.dcode-title { font-size: 12px; color: #333; margin-top: 10px; text-align: center;}

/*------ Panel ------*/
.panel-heading { padding: 6px 10px; font-size: 0.75em; }

/*------ List ------*/
.list-condensed a { padding: 6px 10px; cursor: pointer; font-size: 0.75em; }
.list-condensed li { padding: 6px 10px;}

/*------ Modal -----*/
.modal { margin-top: 50px; }
.modal-deletion, .modal-confirm { margin-top: 150px; }

/*---- Disbled Menu ----*/
#leftNav > .disabled > a,
#leftNav > .disabled > a:hover,
#leftNav > .disabled > a:focus {
    color: #999;
    background: none;
}

/*---- Popover ----*/
.popover { max-width: 400px; }

/*------ Table ------*/
.table caption { background-color: #f8f8f8; padding-left: 8px; }
.table>tbody>tr>td { vertical-align: middle; }
.table-header th { background-color: #f5f5f5; }
table .header{ cursor:pointer; font-weight: bold; }
table .header:after {
    content: "";
    float: right;
    margin-top: 7px;
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: #000 transparent;
    visibility: hidden;
}
table .headerSortUp, table .headerSortDown {
    background-color: #cce5ff;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table .header:hover { background-color: #cce5ff }
table .header:hover:after { visibility: visible; }
table .headerSortDown:after, table .headerSortDown:hover:after {
    visibility: visible;
    filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}
table .headerSortUp:after {
    border-bottom: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    visibility: visible;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/*------ Form ------*/
.form-horizontal { background-color: #f8f8f8; font-size: 0.75em; padding: 15px; }
.form-inline { background-color: #f5f5f5; font-size: 0.75em; padding: 3px 15px; border-radius: 2px; }
.form-group.required .control-label:after {
    content: "*";
    color: #dd0000;
    position: absolute;
    margin-left: 8px;
    top: 8px;
    font-size: 14px;
}
.required-group.required .required-label:after {
    content: "*";
    color: #dd0000;
    margin-left: 5px;
    font-size: 14px;
}
.control-label-right { margin-top: 7px; }
.textarea-as-paragraph {
    width: 500px;
    resize:none;
    border: none;
    background: #f8f8f8;
    outline: none;
}

/*-------- Title ---------*/
.header-title {
    background-color: #f5f5f5;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 36px;
    padding-left: 10px;
    border-radius: 2px;
}

.header-subtitle {
    background-color: #f5f5f5;
    font-size: 0.75em;
    font-weight: bold;
    line-height: 28px;
    padding-left: 10px;
    border-radius: 2px;
    margin: 5px;
}

/*-------- Rotatable ---------*/
.ui-rotatable-handle {
    height: 16px;
    width: 16px;
    cursor: pointer;
    background-image: url("/images/icon-rotate.png");
    position: absolute;
    right: 2px;
    top: 2px;
}

/*------ Pagination ------*/
.page-list .pagination { float: right; margin: 0;}
.page-list .pagination span { cursor: pointer; }
.page-list .pagination .separate span { cursor: default; }
.page-list .page-total { float: right; margin: 5px 15px 0px; font-size: 0.75em; font-weight: bold; }

/*------ Breadcrumb ------*/
.breadcrumb {
    padding-top: 5px;
    padding-bottom: 5px;
}

.breadcrumb-mix {
    background-color: #f5f5f5;
    font-size: 0.875em;
    border-radius: 4px;
    padding: 0;
}
.breadcrumb-info { background-color: #d9edf7 }

/*------ Alert ------*/
.alert {
    display: inline-block;
    width: 100%;
    font-size: 12px;
    border-radius: 3px;
    padding: 6px 15px;
    margin-bottom: 0;
    border: #d6e9c6 solid 1px;
}
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6 }
.alert-info    { color: #31708f; background-color: #d9edf7; border-color: #bce8f1 }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc }
.alert-danger  { color: #a94442; background-color: #f2dede; border-color: #ebccd1 }

/*------ Input Search ------*/
.input-search {
    padding-left: 22px;
    background: url("/images/icon-query.png") 5px center no-repeat;
    background-size: 12px 12px;
}

/* Dashboard */
.col-right { padding-left: 0; }
#dashboard-event { overflow-y: auto; }
#mapSearch {
    position: absolute;
    left: 25px;
    top: 40px;
    width: 400px;
    background-color: #fff;
    font-size: 0.75em;
    border-radius: 0px;
}
#depotStatistics {
    position: absolute;
    left: 15px;
    bottom: 20px;
    width: 270px;
}
#depotStatisticsContainer { width: 100%; height: 180px; }
#depotLegend img { width: 14px; height: 12px; }
#dashboard-temperature, #dashboard-humidity { height: 140px; }
@media (max-width: 768px) {
    .col-right { padding-left: 15px; }
}

.dashboard-alarm, .dashboard-measure-fail {
    border: 2px solid #f00;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    /*animation: twinkling 1.5s infinite;
    -moz-animation: twinkling 1.5s infinite;
    -o-animation: twinkling 1.5s infinite;
    -ms-animation: twinkling 1.5s infinite;
    -webkit-animation: twinkling 1.5s infinite;*/
}
.dashboard-measure-fail { border-color: #fa0; }

@keyframes twinkling{
    0%{
       opacity: 0;
    }
    100%{
       opacity: 1;
    }
}
@-webkit-keyframes twinkling{
    0%{
       opacity: 0;
    }
    100%{
       opacity: 1;
    }
}
@-moz-keyframes twinkling{
    0%{
       opacity: 0;
    }
    100%{
       opacity: 1;
    }
}
@-o-keyframes twinkling{
    0%{
       opacity: 0;
    }
    100%{
       opacity: 1;
    }
}
@-ms-keyframes twinkling{
    0%{
       opacity: 0;
    }
    100%{
       opacity: 1;
    }
}

/* Depotmgt */
#depotTree, #roleTree, #depotCheckTree, #resourceCheckTree { overflow-y: auto; min-height: 200px; font-size: 0.75em; padding: 10px; background-color: #f8f8f8; }
.create-depots-menu { min-width: 100px; }
.depot-layout { width: 100%; height: 200px; margin-top: 15px; border: 2px solid #ddd;}
.draggable {
    background: #fcdb97;
    border: 1px solid #ddd;
    border-radius: 2px;
    cursor: move;
    text-align: center;
    font-size: 10px;
    position: absolute;
}
.draggable-circle { border-radius: 200px; }
#depotInfoTab { min-height: 405px; }
.depot-info-basic-form { height: 330px; }
#depotStatusChart { width: 870px; height: 300px;}

/* Alarm */
.point-lost-3 { width: 12px; height: 12px; display: inline-block; border: 2px #ff0000 solid; border-radius: 8px; background-color: #fff;}
.point-lost-2 { width: 12px; height: 12px; display: inline-block; border: 2px #ff7f00 solid; border-radius: 8px; background-color: #fff;}
.point-lost-1 { width: 12px; height: 12px; display: inline-block; border: 2px #0073ea solid; border-radius: 8px; background-color: #fff;}
.temp-rise-3 { background-color: #ff0000; color: #fff; padding: 2px; }
.temp-rise-2 { background-color: #ff7f00; color: #fff; padding: 2px; }
.temp-rise-1 { background-color: #0073ea; color: #fff; padding: 2px; }

/* Grain */
#grain-column-container { border: 1px solid #eee; border-radius: 2px; }
#grain-column-title { font-size: 0.875em; text-align: center; padding: 15px; line-height: 24px; }
.border-none td { border: 0px!important; }
.border-left-none { border-left: 0px!important; }
.border-right-none { border-right: 0px!important; }
.border-bottom { border-bottom: 1px solid; }
.margin-top-7 { margin-top: 7px!important; }
.padding-top-17 { padding-top: 17px!important; }

/* Environment Temperature */
#granaryHistoryCanvas { width: 100%; height: 400px; }
#temperature-chart-container, #temperature-table-container { border: 1px solid #eee; border-radius: 2px; margin-top: 10px; }

/* Measurement */
.measure-progress { height: 24px; border: 1px solid #ddd; margin-bottom: 0px; position: relative; }
.measure-progress p { position: absolute; text-align: center; width: 100%; line-height: 24px; font-size: 10px; }
.measureReportTitle { font-size: 12px; font-weight: bold; margin-top: 15px; }
.glyphicon-granary { width: 16px; height: 16px; background: url("/images/icon-granary.png") center center no-repeat; }
.glyphicon-depot { width: 16px; height: 16px; background: url("/images/icon-depot.png") center center no-repeat; }
#tips, #deleteConfirm, #applyConfirm, #resetConfirm, #upgradeConfirm, #deleteDepotScheduleModal { margin-top: 150px; }

#t3d, #t251d, #t252d, #reportTableModal, #attendanceTableModal, #statsReportTableModal { margin-top: 20px; }

.temperature3d-h1, .temperature3d-h2, .temperature3d-h3, .temperature3d-h4, .temperature3d-h5 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f30;
    margin-left: 5px;
}
.temperature3d-h2 { background: #fc0;}
.temperature3d-h3 { background: #390;}
.temperature3d-h4 { background: #0cc;}
.temperature3d-h5 { background: #03c;}

/* 平房仓 2.5D */
.t251d-container {

    background: #ccc;
    margin-top: 15px;
    position: relative;
}

.t251d-layer {
    width:100%;
    margin-top: 10px;
    background-color: #ddd;
    /*border-top: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-right: 2px solid #ccc;*/
    transform:skew(-45deg, 0);
    -ms-transform:skew(-45deg, 0);     /* IE 9 */
    -moz-transform:skew(-45deg, 0);    /* Firefox */
    -webkit-transform:skew(-45deg, 0); /* Safari 和 Chrome */
    -o-transform:skew(-45deg, 0);  /* Opera */
}

.t251d-layer tbody tr td { padding: 1px; }

.t251d-row, .t251d-col {
    display: block;
    /*width: 32px;*/
    margin: 0 auto;
    padding: 0;
    border-radius: 2px;
    text-align: center;
    background: #eee;
    color: #666;
}

.t251d-point {
    display: block;
    /*width: 32px;*/
    margin: 0 auto;
    padding: 0;
    border-radius: 2px;
    text-align: center;
    background: #fff;
    color: #000;
}

.t251d-point-0 { color: #03c }
.t251d-point-1 { color: #0cc }
.t251d-point-2 { color: #0c0 }
.t251d-point-3 { color: #fa0 }
.t251d-point-4 { color: #f00 }

.t251d-cover-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: #ddd;
}

.t251d-cover-fg {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: rgba(100,100,100,0.25);
    transform:skew(0, -45deg);
    -ms-transform:skew(0, -45deg);     /* IE 9 */
    -moz-transform:skew(0, -45deg);    /* Firefox */
    -webkit-transform:skew(0, -45deg); /* Safari 和 Chrome */
    -o-transform:skew(0, -45deg);  /* Opera */
}

.t251d-cover-tl {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
}

.t251d-cover-br {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
}

/* 圆筒仓 2.5D */
.t252d-container {
    margin: 15px;
    font-size: 12px;
    background: #ddd;
    background: -webkit-linear-gradient(left, #ddd, #ddd, #bbb);
    position: relative;
}

.t252d-tb {
    background: #fff;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.t252d-bb {
    background: #fff;
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.t252d-layer {
    width: 100%;
    height: 200px;
    /*border: 1px dashed #666;*/
    border-radius: 50%;
    position: relative;
    background: #eee;
    margin-top: 20px;
}

.t252d-layer-index {
    font-size: 12px;
    position: absolute;
    left: 15px;
    top: 90px;
}

.t252d-circle {
    border: 1px dashed #666;
    border-radius: 50%;
    position: absolute;
}

.t252d-point {
    width: 32px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: #333;
    text-align: center;
    position: absolute;
    border: 1px solid #ddd;
    /*transform:skew(-15deg, 0);*/
}

.t252d-point-0 { color: #03c }
.t252d-point-1 { color: #0cc }
.t252d-point-2 { color: #0c0 }
.t252d-point-3 { color: #fa0 }
.t252d-point-4 { color: #f00 }

/*stats report table*/
.table-h {
    background-color: #f6f6f6;
    font-size: 13px;
    font-weight: bold;
    line-height: 2em!important;
    text-align: center;
}
/* Auth Management */
.menu-item {
    text-align: center;
    background-color: #f5f5f5;
    font-size: 0.75em;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 2px;
}

.menu-item .active { background-color: #16a085; }

.noauth {
    text-align: center;
    padding-top: 125px;
    font-size: 1.5em;
    color: #f00;
    width: 470px;
    height: 389px;
    margin: 100px auto;
    background: url("/images/bg-imac.png") center center no-repeat;
    background-size: 100% 100%;
}

/* Attendance */
.attendance-type {
    width: 20px;
    height: 10px;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 5px;
}

.attendance-stats {
    display: inline-block;
    width: 16px;
    height: 10px;
    border-radius: 2px;
}

#attendanceTable table th, #attendanceTable table td {
    word-break: keep-all;
}

/* Archive */
.uploadContainer {
    width: 100%;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}

.uploadContainer input[type=file] {
    width:112px;
    height:30px;
    background:#333;
    margin: 0 auto;
    position:absolute;
    right:50%;
    margin-right:-94px;
    top:0;
    right/*\**/:0px\9;
    margin-right/*\**/:0px\9;
    width/*\**/:10px\9;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:2;
}
a.upload-img{
    width:112px;
    display: inline-block;
    height:30px;
    line-height: 30px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background-color: #5cb85c;
    border-radius: 3px;
    text-decoration:none;

}
a.upload-img:hover{ background-color: #5cb85c; }

 /*loading effect*/
.load-container {
    margin: 200px auto;
    width: 120px;
    height: 120px;
    position: relative;
    display: block;
 }

 .load-container-position-abs {
    margin-top: -120px;
    margin-left: -60px;
    width: 120px;
    height: 120px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
 }

.load .loader,
.load .loader:after {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.load .loader {
  margin: 60px auto;
  font-size: 5px;
  position: relative;
  border-top: 5px solid rgba(70, 130, 180, 1);
  border-right: 5px solid rgba(200, 200, 200, 1);
  border-bottom: 5px solid rgba(200, 200, 200, 1);
  border-left: 5px solid rgba(200, 200, 200, 1);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  -ms-animation: load8 1.1s infinite linear;
  -moz-animation: load8 1.1s infinite linear;
  -o-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*measurement-auto*/
.padding-2  { padding: 2px!important }

.margin-top-2 {
    margin-top: 2px!important;
}

.width-155 { width: 155px!important }

.width-80p { width: 600px!important }

.height-455 { height: 455px!important }

.border-bottom-solid {
    border-bottom: 1px solid #ddd;
}

.border-bottom-dashed {
    border-bottom: 1px dashed #ddd;
}

#depotScheduleModal .modal-dialog {
    width: 1000px!important;
}

#autoDetectGranariesArea div {
    height: 399px!important;
    overflow: auto;
}

.detectModeC1 {
    display: inline-block;
    width: 280px;
}

.detectModeC2 {
    display: inline-block;
    /*width: 80px;*/
    margin-left: 10px;
}