/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

html, body{
	height: 100%;
}

body{
	background: #e6e6e6;
}

.header{
	background: #363c40;
	color: #fff;
	height: 50px;
	line-height: 50px;
}

.header .logo{
	float: left;
	margin-left: 10px;
}
.header .logo img,
.header .user img{
	margin-right: 10px;
}

.header .user{
	float: right;
	font-size: 14px;
	margin-right: 10px;
}

.wrapper{
	margin: 0 auto;
	width: 1090px;
}

.content{
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 0;
	right: 0;
}

.content .wrapper{
	background: #f2f2f2;
	height: 100%;
}

.side{
	background: #3d4751;
	color: #aaa;
	float: left;
	font-size: 14px;
	height: 100%;
	overflow: auto;
	width: 230px;
}
.side h2{
	background: #313a43;
	color: #36a4ea;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0 10px;
}

.order-list, .order-list li{
	list-style: none;
	margin: 0;
	padding: 0;
}

.order-list{
	margin-bottom: 10px;
}

.order-list .active, .order-list li:hover{
	background: #2f8ddc;
}
.order-list .active div, .order-list li:hover div{
	color: #fff;
}

.order-list .order-status{
	background: #0596f3;
	border-radius: 4px;
	color: #fff;
	display: block;
	float: right;
	font-size: 12px;
	height: 18px;
	line-height: 18px;
	margin-top: 5px;
	text-align: center;
	width: 44px;
}

.order-item{
	border-bottom: solid 1px #4b5763;
	cursor: pointer;
	margin: 0 10px;
	line-height: 26px;
	padding: 12px 0;
	position: relative;
}

.order-item h3{
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	line-height: 26px;
	margin: 0;
	padding: 0;
}

.content-main{
	height: 100%;
	margin-left: 231px;
	position: relative;
}

.order-meta{
	margin: 0 20px;
}

.order-grid{
	width: 100%;
}
.order-grid .hover{
	background: #f0f0f0;
}
.order-grid td{
	border-bottom: solid 1px #ddd;
	color: #313131;
	font-size: 16px;
	line-height: 24px;
	padding: 14px 0;
}
.content .btn-wrap{
	padding-top: 20px;
}

.content .btn-wrap .btn{
	float: right;
	margin-left: 25px;
}
.content-main .chart{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: scroll;
}

.chart .messages-wrap{
	clear: both;
}

.chart .messages{
	margin: 0 40px;
	padding-bottom: 50px;
}

.messages .message{
  overflow: hidden;
	padding-top: 20px;
}

.messages .message:last-child{
	border: none;
}

.message time{
}

.message .text-wrap{
}

.message p{
	color: #000;
	font-size: 15px;
	line-height: 27px;
	margin: 0;
	padding: 0 0 10px;
  max-width: 90%;
}
.msg-1{
}
.msg-1 p{
  float: left;
}
.msg-2{
}
.msg-2 p{
  float: right;
}

.message .msg-meta{
	color: #b4b4b4;
	font-size: 12px;
}
.msg-2 .msg-meta{
  text-align: right;
}


.mask{
	background: #7f7f7f;
	background: rgba(127, 127, 127, .8);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.chart-input{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.chart-input .wrapper{
	background: #fefefe;
}
.chart-input-in{
  padding: 30px;
}
.chart-input h2{
	font-size: 20px;
	line-height: 30px;
	margin: 0 0 20px;
	text-align: center;
}
.chart-input-wrap{
	outline: solid 1px #badbff;
	padding: 10px;
  margin-bottom: 10px;
}
.yingxiang{
  top: 50px;
}
.chart-input textarea{
	border: none;
	outline: none;
	margin: 0;
	display: block;
	height: 200px;
	width: 100%;
}

.yingxiang textarea{
	height: 140px;
}

.chart-input-footer{
	padding: 28px 0;
}

.btn{
	background: #49a9d7;
	border: none;
	border-radius: 4px;
	color: #fff;
	height: 34px;
	line-height: 34px;
	margin: 0;
	outline: none;
	padding: 0;
	width: 120px;
}

.btn-primary{
	background: #2f8ddc;
}
.btn-info{
	background: #00c2c9;
}
.btn-default{
	background: #ccc;
}
.btn-warning{
	background: #eeae02;
}


.chart-input-footer .btn{
	float: right;
	margin-top: 10px;
	margin-right: 20px;
}

.page-index{
	background: url(../img/login_bg.jpg) no-repeat 50% 0;
	min-height: 640px;
	position: relative;
}

.page-index .page-header{
	margin: 0 auto;
	width: 980px;
}

.page-header .logo{
	margin-top: 20px;
}

.page-index .page-footer{
	background: #61a4ca;
	background: rgba(255, 255, 255, .16);
	bottom: 0;
	color: #fff;
	font-size: 12px;
	height: 48px;
	line-height: 48px;
	position: absolute;
	text-align: center;
	width: 100%;
}

.page-index{
	min-width: 980px;
}

.page-content .main-wrap{
	background: url(../img/gap.gif) no-repeat 325px 60px;
	height: 340px;
	width: 790px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -390px;
	margin-top: -140px;
}

.main-wrap h2{
	font-size: 20px;
	font-weight: normal;
	height: 60px;
	line-height: 60px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.main-wrap .code-wrap{
	float: left;
}
.code-box{
	background: #fff;
	height: 240px;
	width: 240px;
}
.code-box img{
	width: 240px;
}
.code-desc{
	color: #fff;
	text-align: center;
	margin-top: 8px;
}
.main-wrap .login-form{
	float: right;
	width: 350px;
}
.login-form .text-input{
	display: block;
	height: 42px;
	line-height: 42px;
	margin-bottom: 24px;
	padding: 0 5px;
	width: 330px;
}
.login-form .btn{
	background: #2992f6;
	border-radius: 8px;
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 100%;
}
.login-form label.error{
    position: relative;
    top: -20px;
    color: #f00;
}


.btn-use-template{
  background: none;
  border: none;
  color: #323232;
}
.template-list{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.template-list .wrapper{
  background: #fefefe;
  height: 100%;
  overflow: auto;
}
.template-list-item{
  border-bottom: solid 1px #e6e6e6;
  padding: 20px 16px;
}
.template-list-item h3{
  color: #000;
  font-size: 16px;
  margin: 0;
  width: 75%;
}
.template-list-item p{
  color: #787878;
  font-size: 14px;
  margin: 12px 0 0;

  width: 75%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.template-list-item .btn-wrap{
  float: right;
}
.template-list-item .btn-wrap a{
  color: #0088f0;
  font-size: 12px;
}
.template-list-item .btn-wrap span{
  color: #dcdcdc;
  font-size: 12px;
  padding: 0 20px;
}
.template-list-header{
  background: #e6e6e6;
  height: 52px;
  line-height: 52px;
  padding: 10px 20px 0;
}
.template-list-header h2{
  font-size: 18px;
  margin: 0;
}
.template-add-btn{
  background-color: #308ddd;
  border: none;
  border-radius: 6px;
  color: #fff;
  float: right;
  height: 40px;
  line-height: 34px;
  width: 136px;
}
.template-add-btn i{
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
}

.template-dialog {
  background: #fff;
  border: solid 1px #cfcfcf;
  border-radius: 5px;
  padding: 30px;
  width: 780px;
  position: absolute;
  top: 140px;
  left: 50%;
  margin-left: -400px;
}
.template-dialog h2{
  font-size: 20px;
  line-height: 30px;
  margin: 0 0 20px;
  text-align: center;
}
.template-dialog .input-wrap{
  outline: solid 1px #badbff;
  padding: 10px;
  margin: 0 0 20px 0;
}
.template-dialog .input-wrap input{
  border: none;
  outline: none;
  margin: 0;
  display: block;
  width: 100%;
}
.template-dialog .input-wrap textarea{
  border: none;
  outline: none;
  margin: 0;
  display: block;
  height: 200px;
  width: 100%;
}