/*
HTML CSS styles for WSM
*/
body {
  margin: 0;
  font-family: 'HYQiHei 55S', Microsoft YaHei, SimSun, Arial, sans-serif;
  font-size: 12pt;
  c-or: #2e3337;
  background-color: #ffffff;
}

/* General font-family depending of lang attribute on html/body tag */

body:lang(zh){
	font-family: 'HYQiHei 55S', Microsoft YaHei, SimSun, Arial, sans-serif;
}

body:lang(en){
	font-family: effra, verdana, Microsoft YaHei, sans-serif;
}

html:lang(en) h1, html:lang(en) h2, html:lang(en) h3, html:lang(en) h4, html:lang(en) h5,
html:lang(en) h6, html:lang(en) .h1, html:lang(en) .h2, html:lang(en) .h3, html:lang(en) .h4,
html:lang(en) .h5, html:lang(en) .h6, html:lang(en).title-sie, html:lang(en) .title-siesub{
	font-family: effra, verdana, Microsoft YaHei, sans-serif;
}

html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(zh) h4, html:lang(zh) h5,
html:lang(zh) h6, html:lang(zh) .h1, html:lang(zh) .h2, html:lang(zh) .h3, html:lang(zh) .h4,
html:lang(zh) .h5, html:lang(zh) .h6, html:lang(zh) .title-sie, html:lang(zh) .title-siesub
{
	font-family: 'HYQiHei 65S', Microsoft YaHei, SimSun, Arial, sans-serif;
}

/*  BEGIN OF NAV TREE STYLES  */

#tree {
    font-family: 'HYQiHei 65S', Microsoft YaHei, SimSun, Arial, sans-serif;
}

/* When body tag set to lang=zh */
body:lang(zh) #tree {
	font-family: 'HYQiHei 65S', Microsoft YaHei, SimSun, Arial, sans-serif;
}

/* When body tag set to lang=en */
body:lang(en) #tree {
	font-family: effra, verdana,Microsoft YaHei,sans-serif;
}

/*  END OF NAV TREE STYLES  */

.allCaps{
    text-transform: uppercase;
    font-weight: bold;
}

.table-title{
    text-align: left;
	font-weight: bold;
}

.fig-title{
    text-align: left;
	font-weight: bold;
}

.title-para{
    text-align: left;
	font-weight: bold;
}

.blue{
    color: rgb(0,125,195);
}

.cyan.color{
    color: rgb(10,234,212);
}

.thead-rbcolor{
	border: 1px solid #FFFFFF;
}

table.Format-Pgwide
{
    border-collapse: collapse;
    margin-bottom: 10px;
    margin-top: 10px;
    table-layout: auto;
    width: 100%;
	border:2px solid rgb(137,134,138);
}

thead {
	border:1px solid rgb(137,134,138);
}

tr>th{
	background-color:rgb(137,134,138);
	color:#FFFFFF;
	border:1px solid rgb(137,134,138);
}

table {
    border-collapse: collapse;
    margin-bottom: 10px;
    margin-top: 10px;
    table-layout: auto;
    width: 100%;
	font-size: 12pt;
	border:2px solid rgb(137,134,138);
}

.connector-table{
    border-collapse: collapse;
    margin-bottom: 10px;
    margin-top: 10px;
    table-layout: auto;
    width: 100%;
	font-size: 12pt;
	border:2px solid #FFFFFF;
}

.no-border  td {
	border:1px solid #FFFFFF;
}

td {
    font-weight: normal;
    padding: 2px 10px;
    vertical-align: middle;
	display: table-cell;
    font-size: 12pt;
	border:1px solid rgb(137,134,138);
}

th>p, th>div,td>p, td>div {
    margin: 0px 0px 0px;
}

.toc-level1{
    font-size: 13pt;
    margin-bottom: 2mm;
}

.toc-level2{
    font-size: 11pt;
    margin-bottom: 2mm;
    color: rgb(0,125,195);
}

.prespace-s{
    margin-top: 0.4em;
}
.prespace{
    margin-top: 0.8em;
}
.prespace-l{
    margin-top: 1em;
}

.postspace-s{
    margin-bottom: 0.4em;
}
.postspace{
    margin-bottom: 0.8em;
}
.postspace-l{
    margin-bottom: 1em;
}

.lowerAlpha, ol.lowerAlpha{
    list-style-type: lower-alpha;
}

.upperAlpha, ol.upperAlpha{
    list-style-type: upper-alpha;
}

.lowerRoman, ol.lowerRoman{
    list-style-type: lower-roman;
}
.upperRoman, ol.upperRoman{
    list-style-type: upper-roman;
}

.square, ul.square{
    list-style-type: square;

}
.unlabeled, ul.unlabeled{
    list-style-type: none;
}

.important-info-low{
    color: #666666;
}
.important-info-medium {
    color: #3366ff;
}
.important-info-high{
    color: #A60846;
}

h1, h2, h3{
    font-weight: bold;
    margin: 0px 0px 10px;
    padding: 0px;
}

h1 {
    font-size: 18pt;
}

h2{
    font-size: 16pt;
    margin-bottom: 2mm;
    color: rgb(10,234,212);
}

h3{
    font-size: 14pt;
    margin-bottom: 2mm;
	color: rgb(10,234,212);
}

h4{
    font-size: 12pt;
    margin-bottom: 2mm;
	color: rgb(10,234,212);
}

p, div {
    margin: 0px 0px 10px;
}

.wl-attention {
    border: 2px solid black;
    margin-bottom: 10px;
}

.wl-attention-content {
    margin: 10px 10px 10px 10px;
    padding: 0px;
}

.note-image{
	width:30px;
	height:30px;
	vertical-align: middle;
}
.valign-middle{
	display: table-cell;
	vertical-align: middle;
}

.valign-top{
	display: inline;
	vertical-align: 2mm;
}

.wl-attention > header {
	display: table;
	margin-left: auto;
    margin-right: auto;
	width:100%;
	height:34px;
	text-align:center;
	padding-top:2pt;
    border-bottom: 2px solid black;
	font-weight: bold;
}

.wl-attention[data-attention-type="note"] > header {
	background-color:rgb(10,234,212);
}

.wl-attention[data-attention-type="warning"] > header {
	background-color:rgb(255,153,0);
}

.wl-attention[data-attention-type="danger"] > header {
	background-color:rgb(204,0,0);
}

.wl-attention[data-attention-type="caution"] > header {
	background-color:rgb(255,241,0);
}

.imgdesc {
    font-size: 10pt;
}

.scalable-width{
    cursor: zoom-in;
    margin-bottom: 10px;
    vertical-align: middle;
}

.image-center{
  align:middle;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.image-left{
  align:left;
}

.border img{
	border: 1px solid #000;
}

.thumb {
    width: 50%;
}

.full {
    width: 100%;
}

a[href] {
    text-decoration: none;
    color: rgb(0,125,195);
}

.divDocumentPlaceHolder {
    margin: 10px;
}

.purple{
    color: rgb(0,125,195);
}

.proc td {
    vertical-align: top;
}

/* Graphic float inside step-group */

.clearfloat::after {
    content: "";
    clear: both;
}

.clearboth {
	clear:both;
}

.float-left{
	float:left;
	width:25%;
}

.float-right{
	float:right;
	width:75%;
}

.arrow-image
{
	width:65px;
	height:65px;
}

/* Graphic float with callout inside figure or figure-trans */

.fig-float-left{
	float:left;
	width:39%;
}

.fig-float-right{
	float:right;
	width:60%;
}

/*Begin of Diagnosis Layout */
.dg-table{
	width:100%;
	border:0;
}

.dg-table td {
    font-weight: normal;
    padding: 2px 10px;
    vertical-align: middle;
	display: table-cell;
    font-size: 12pt;
	border:0;
}

.dg-table td[type="top-align"] {
    vertical-align: top;
}

.dg-table[data-attention-type="step"] td{
	border:3px solid rgb(10,234,212);
}


.dg-table[data-attention-type="step"]{
	border:3px solid rgb(10,234,212);
}

.dg-table[data-attention-type="stepresult"]{
	border:0;
	color:rgb(137,134,138);
}

.stepresult-td{
	padding: 0;
	border:0;
}

.stepresult-border{
	border:3px solid rgb(137,134,138);
	padding: 2px 10px;
}

.stepresult-color{
	color:rgb(137,134,138);
}

.left-border{
	border-left:3px solid rgb(10,234,212);
}

.align-middle{
	vertical-align:middle;
	display:table-cell;
}
.dg-image {
	width:350px;
	min-width:350px;
}

.dg-arrow {
	width:70px;
	min-width:70px;
}

.align-top{
vertical-align: top;
}

.dg-height{
	height:40px;
}

/*End of Diagnosis Layout */

/*Below is css style for showing modal dialog to show the zoomed graphic */
#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 5px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 90%;
  max-height: 95%;
  height: 95%;
  background-color:white;
}

/* Add Animation */
.modal-content{  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 5px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}