div#holder {
    border: 5px dashed #ccc;
    height:140px;
    width:400px;
    font-family:Verdana;
    text-align:center;
}

/* mPopup box style */
.mpopup {
//    display: none;
    position: fixed;
    z-index: 300;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(11,11,11);
    background-color: rgba(11,11,11,0.4);
}

.mpopup0 {
//    display: none;
    position: fixed;
    z-index: 300;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
//	background:transparent;
 //   background-color: rgb(11,11,11);
   background-color: rgba(11,11,11,0.4);
}

.mpopup0x {
    position: fixed;
    z-index: 300;
    padding: 0px;
    left: 0;
    top: 0;
    width: 30%;
    height: 20%;
	background:transparent;
}

.mpopup-content3 {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 800px;
	height:650px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content2 {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 640px;
	height:500px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content1 {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 850px;
	height:650px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content0 {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
//	background: rgba(220,220,220,.5);
	margin: auto;
	padding: 6px;
	width: 640px;
	height:400px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}
/**/

.mpopup-content0x {
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-style:normal;
	color:white;
	position: relative;
//	margin: auto;
	padding: 0px;
	width: 340px;
//	height:200px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
	background:transparent;
//    background-color: rgb(11,11,11);
 //  background-color: rgba(11,11,11,0.4);
}
/**/

.mpopup-head {
    padding: 4px 8px 4px 20px;
	height: 35px;
    background-color: #111;
    color: white;
}
.mpopup-main {padding: 0px 0px;}


/* add animation effects */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.htmlstyle {
	background:#f5f5f5;
//	height:100%;
	overflow:auto;
	overflow-y: scroll;
}

.bodystyle {
	background:#f5f5f5;
//	height:100%;
	overflow:hidden;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
	max-height:540px;
	max-width:820px;
}

/* close button style */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover, .close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

/* close button style */
.closeblk {
    color: #555;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.closeblk:hover, .closeblk:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.picstyle {
	border: 1px solid #ccc;
    position: absolute;
    z-index: 40;
}

.searchflag {
	margin-top:6px;
	margin-left:2px;
	cursor:pointer;
}

.margin_bottom_5 { clear: both; width: 100%; height: 5px; font-size: 1px;	}
.margin_bottom_7 { clear: both; width: 100%; height: 7px; font-size: 1px;	}
.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;	}
.margin_bottom_15 { clear: both; width: 100%; height: 15px; font-size: 1px;	}
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;	}
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;	}
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;	}
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;	}
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;	}

#register_section {
	margin: 0px 0 0 30px;
}
#register_section span {
	font-family: verdana,arial,sans-serif;
	font-size: 10.5pt;
	color: red;
	padding: 0 0 0 20px;
}

h3
{
	margin-bottom:8px;
	margin-top:10px;
}

.datafield {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	height: 18px;
	width: 200px;
	padding: 4px 0px 4px 8px;
	margin-left:0px;
	margin-bottom:0px;
	color: #333;
	font-size: 11pt;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}

.errorfield {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	height: 20px;
	width: 270px;
	padding: 2px 0px 2px 3px;
	margin-left:10px;
	margin-bottom:8px;
	color: #333;
	font-size: 11px;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: transparent;
	border: 0px solid #ccc;	
//	border-radius: 5px;
}


.contfield {
	height: 20px;
	width: 270px;
	padding: 2px 0 2px 5px;
	margin:2px 8px 0 0;
	color: #666;
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;
	float:right;	
}

.dragdrop {
	height: 40px;
	width: 200px;
	padding: 2px 0 2px 5px;
	margin:2px 8px 0 0;
	color: #666;
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;
	float:right;	
}

.vsearchlocal {
	height: 22px;
	width: 450px;
	padding: 4px 0px 4px 10px;
	margin:20px 0px 2px 24px;
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
//	letter-spacing: 1px;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
//	background: url("vserve4img/magnifier.png") #ffffff no-repeat left
}

.vsearchfield {
	height: 22px;
	width: 380px;
//	padding: 4px 0px 4px 36px;
	padding: 4px 0px 4px 10px;
	margin:3px 0px 2px 24px;
//	color: #333;
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
//	letter-spacing: 1px;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
//	background: url("vserve4img/magnifier.png") #ffffff no-repeat left
}

.vmonitorfield {
	height: 22px;
	min-width: 30px;
	max-width:120px;
	padding: 4px 0px 4px 0px;
	margin:3px 0px 2px 6px;
	color: #ccc;
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	font-variant: normal;
	background: #000;
	border: 1px solid #000;	
	border-radius: 5px;
}

.filterfield {
	height: 20px;
	width: 180px;
	padding: 2px 0px 2px 10px;
	margin:3px 0px 2px 12px;
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
//	border-radius: 5px;
}

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

html { 
    overflow: hidden; 
    height: 100%;    
}

body {
//	font-family: Helvetica, Calibri, Geneva, Tahoma, Verdana, Consolas, sans-serif;
//	font-size: 14px;
//	line-height: 1;
	margin : 0;
	padding: 0;
    overflow: auto;
    position: relative;
 }
 
 .capture {
	position:fixed;
	left:10px;
	top:10px;
	width:100%;
 }


.msginput {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	margin:0 6px 4px 6px;
	width:625px;
	border:1px solid #888;
	padding:5px;
	overflow:auto;
	position:relative;
	background: #fff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	resize: vertical;//auto;//
 }

#lobbyinput p {
	margin: 0;
}


.srchtarget {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	font-size:10pt;
	border:0px;
	width:100%;
	height:100%;
	padding:0px;
 }


/*******************************************************/
.visral_vheader {
//	background: black;//#611;
	background: repeating-linear-gradient(
    45deg,
    #039BE5 0px,
    #039BE5 20px,
    #90CAF9 20px,
    #90CAF9 40px
  );	
	position: fixed;
	margin: 0 auto;
	width: 100%;
    z-index: 40;
}
.visral_vheader:hover {
//	background-color:transparent !important;
}
.visral_vheader div {
	padding: 0;
	margin: 0 auto;
	max-width: 950px;
	height:39px;
}
.visral_vheader .visral_navigation {
	padding: 0 10px;
}
.visral_vheader .visral_navigation > ul:before, #vheader .navigation > ul:after {
	content: "";
	display: table;
}
.visral_vheader .visral_navigation > ul:after {
	clear: both;
}
.visral_vheader .visral_navigation > ul {
	margin: 0;
	padding: 0;
}
.visral_vheader .visral_navigation > ul > li {
	display: block;
	float: right;
	list-style: none;
	margin: 0 20px 0 0;
	position: relative;
	padding: 0;
}
.visral_vheader .visral_navigation ul ul {
	left: -99999px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 36px;
	z-index: 110;
}
.visral_vheader .visral_navigation > ul > li:hover ul {
	left: -30px;
	border: 1px solid #ccc;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.visral_vheader .visral_navigation ul ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
//	width: 110px;
}
.visral_vheader .visral_navigation ul ul li a {
	background: #fff;
	color: #666;
	display: block;
	height: 30px;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	line-height: 30px;
	margin: -0px 0 0 0px;
	min-width:45px;
	padding: 0 20px;
	text-decoration: none;
//	text-transform: capitalize;
}
.visral_vheader .visral_navigation ul ul li a:hover {
	background: #e9e9e9;
	color: #666;
}


.emailbutton {
	font-family: Helvetica, Calibri, Geneva, verdana,arial,sans-serif;
	width: 120px;
 	height: 40px;
	cursor: pointer;
	font-size: 14px;
	font-weight:normal;
	text-align: center;
	white-space: pre;
	background: url(vserve4img/templatemo_button_02.png) no-repeat 0 0;
	border: none;
	color:#fff;
	letter-spacing: 1px;
}

.emailbutton:hover{
	color:#00bfff;
}

/*------------------------------ Sprites ------------------------------*/

.cryptobutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 110px;
 	height: 30px;
	margin: 0 0 0px 7px;
	padding: 0 0 0 16px;
	cursor: pointer;
	font-size: 10.5pt;
	text-align: left;
//	vertical-align: bottom;
	white-space: pre;
	background: url(vserve4img/templatemo_button_03.png) no-repeat 0 0;
	border: none;
	color:#fff;
//	letter-spacing: 1px;
	opacity:.50;
//	border-radius:5px;
 //   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.cryptobutton:hover{
	color:#00bfff;
	opacity:.90;
}

.searchbutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 90px;
 	height: 30px;
	margin: 0 0 0px 7px;
	padding: 0 0px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
//	vertical-align: bottom;
	white-space: pre;
	background: url(vserve4img/templatemo_button_01.png) no-repeat 0 0;
	border: none;
	color:#fff;
	letter-spacing: 1px;
}

.searchbutton:hover{
	color:#00bfff;
}

.actionbutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 80px;
	margin: 0 10px 8px -2px;
	padding:4px 4px 4px 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
	letter-spacing: 1px;
	cursor:pointer;
}

.actionbutton:hover{
	background: #c0c0c0; 
	color:#780000;
}

.dialogbutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 60px;
	margin: 0 3px 0px 0px;
	padding:2px;
	cursor: pointer;
	font-size: 11pt;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	color:#fff;
	letter-spacing: 1px;
	cursor:pointer;
}

.dialogbutton:hover{
	background: #c0c0c0; 
	color:#780000;
}

.gobutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 80px;
	margin: 0 10px 0px 0px;
	padding:4px 0 0 0px;
	height:24px;
	cursor: pointer;
	font-size: 11pt;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	color:#fff;
	letter-spacing: 1px;
	cursor:pointer;
}

.gobutton:hover{
	background: #c0c0c0; 
	color:#780000;
}

.actionhelp {
	position:absolute;
	margin-top:-7px;
	margin-right:-12px;
	float:right;
	vertical-align:top;
	z-index:1000;
}

/********************************************************************************/
/* The container <div> - needed to position the dropdown content */
.visral_dropdown {
    position: relative;
    display: inline-block;
}

/* Show the dropdown menu on hover */
.visral_dropdown:hover .visral_dropdown-content {
    display: block;
 }

/* Dropdown Content (Hidden by Default) */
.visral_dropdown-content {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
    display: none;
    position: absolute;
	margin: 0px;
	background: #fff;
	border: 1px solid #ccc;	
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:345;
	text-decoration:none;
	color:#666;
//	animation: mymove 2s;
	overflow-y:hidden;
}
@keyframes mymove {
  from {height: 0px;}
  to {height: 100px;}
}

/* Links inside the dropdown */
 .visral_dropdown-content a {
    color: #333;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .visral_dropdown-content a:hover {
	background: #B5CFD2;
	color: #666;
}


/* Links inside the dropdown */
 .visral_dropdown-content div {
    color: #333;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .visral_dropdown-content div:hover {
	background: #B5CFD2;
	color: #666;
}


/********************************************************************************/
/* The container <div> - needed to position the dropdown content */
.emoji_dropdown {
    position: relative;
    display: inline-block;
}

/* Show the dropdown menu on hover */
.emoji_dropdown:hover .emoji_dropdown-content {
    display: block;
}

/* Dropdown Content (Hidden by Default) */
.emoji_dropdown-content {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
    display: none;
    position: absolute;
	margin: 0px;
	background: #fff;
	border: 1px solid #ccc;	
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:45;
	text-decoration:none;
}

/* Links inside the dropdown */
 .emoji_dropdown-content a {
    color: #666;
    padding: 3px 6px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .emoji_dropdown-content a:hover {
	background: #e9e9e9;
	color: #666;
}


/*********************************************************************************/
/* Dropdown Content (Hidden by Default) */
.vdroptext {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	margin: 0 0px 1px px;
	padding:6px;
//	background: #f1f1f1;
	cursor: pointer;
	background: url(vserve4img/templatemo_button_03.png) no-repeat 0 0;
	border: none;
	color:#fff;
	letter-spacing: 1px;
	text-align:center;
	line-height:1em;
//	border-radius:5px;
}

.vdroptext:hover{
	color:#00bfff;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
	display:block;
}



/* all */
::-webkit-input-placeholder { color:grey;font-style:italic;ont-family:verdana,Calibri,arial,sans-serif;font-size:10.5pt;letter-spacing: 1px;}
::-moz-placeholder { color:grey;font-style:italic;ont-family:verdana,Calibri,arial,sans-serif;font-size:10.5pt;letter-spacing: 1px;} /* firefox 19+ */
:-ms-input-placeholder { color:grey;font-style:italic;font-family:verdana,Calibri,arial,sans-serif;font-size:10.5pt;letter-spacing: 1px;} /* ie */
input:-moz-placeholder { color:grey;font-style:italic;font-family:verdana,Calibri,arial,sans-serif;font-size:10.5pt;letter-spacing: 1px;}


[contentEditable=true]:empty:not(:focus)::before
{
	content:attr(data-ph);
	color:grey;
	font-style:italic;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	letter-spacing: 1px;
	line-height:20px;
}


/**************** slider switch ****************/
.switchrd {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-top:7px;
  margin-right:4px;
  margin-left:px;
}

.switchrd input {display:none;}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-bottom:-6px;
  margin-right:4px;
  margin-left:8px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}


/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.unselectable{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.filelist {
	overflow-y:auto; 
	overflow-x:hidden;
	max-height: 150px;
	position: relative;
//	margin-top:2px;
//	padding-top:5px;
}

.filesect {
//	background:#F5F5F5;	
	margin: 0px 0px 0px 0px;
//	overflow:auto;
//	max-height:150px;
//	width: 300px;
	padding: 0px;
	border-width: 0px;
	border-color: #eee;
	border-collapse: collapse;
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	color:#666;
//	height: 24px;
}

.dragger{
	position:absolute;
	cursor:pointer;
	z-index: 100;
}

.ekey{
	position:absolute;
	display:none;
	cursor:pointer;
	z-index: 21;
}

.iconplace {
	cursor:pointer;
	float:left;
	margin:5px;
}

.visral_navit {
	margin: 0px 0 0 10px;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	font-weight:normal;
	width:120px;
}
.visral_navit ul {
	margin:0px; 
	padding:0px;
}
.visral_navit li {list-style: none;} 

.visral_navit ul.visral_top-level {background:#FFFFFF;}
.visral_navit ul.visral_top-level li {
	border: #bbb solid; 
	border-width: 0px;
	z-index:320;
}

.visral_navit ul.visral_sub-level {
	border:1px solid #888;
	z-index:250;
	opacity:.85;
}
.visral_navit span {
	color: #333;
	cursor: pointer;
	display:block;
	height:25px;
	line-height: 25px;
	text-indent: 5px;
	text-decoration:none;
	width:100%;
}
.visral_navit a:hover{
	text-decoration:none;
}

.visral_navit li:hover {
 	list-style: none;
	background: #B5CFD2;
	position: relative;
}
.visral_navit ul.visral_sub-level {
    display: none;  
}
.visral_navit li:hover .visral_sub-level {
//    background: #999;
    border: #888 solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 45px;
    top: 5px;
}
.visral_navit ul.visral_sub-level li {
	list-style: none;
    border: none;
    float:left;
	width:140px;
}

.visral_navit .visral_sub-level {
    background: #FFFFFF;
}


.post-content {
	top:0px;
	left: 0px);
	margin-left: 10px;
	padding: 0px;
    width: calc(100% - 20px);
	height:calc(100% - 120px);//70vh;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	color:#333;
	z-index:100;
    background: #ddd;
}

.post-contentA {
//	top:0px;
//	left: 0px);
	margin-left: 15px;
	padding: 0px;
    width: calc(100% - 30px);
//	height:650px;
	height:75vh;
//    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	color:#333;
	z-index:100;
    background: #ddd;
	overflow-y:auto;
	margin-top:15px;
}

.post-contentA1 {
//	top:0px;
//	left: 0px);
	margin-left: 15px;
	padding: 0px;
    width: calc(100% - 30px);
//	height:650px;
	height:75vh;
//    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	color:#333;
	z-index:100;
    background: #ddd;
	overflow-y:auto;
	overflow-x:hidden;
	margin-top:15px;
}

.post-contentA2 {
//	top:0px;
//	left: 0px);
	margin-left: 15px;
	padding: 0px;
    width: calc(100% - 30px);
//	height:650px;
	max-height:75vh;
//    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-family: verdana,arial,sans-serif;
	font-size:10pt; 
	font-weight: normal; 
	color:#333;
	z-index:100;
    background: #ddd;
//	overflow:hidden;
	margin-top:15px;
}

.vertical {
	font-family: verdana,arial,sans-serif;
	font-size:11.5pt;
	letter-spacing: 1px;
	writing-mode:tb-rl;
//	-webkit-transform:rotate(90deg);
//	-moz-transform:rotate(90deg);
//	-o-transform: rotate(90deg);
//	-ms-transform:rotate(90deg);
//	transform: rotate(90deg);
	margin:0px ;
	color:red;
	float:right;
	left:calc(97% + 15px);//184px;
	top:55px;
	position:fixed;
    text-decoration: none;
	z-index:100;
}

.dragelements {
	font-family: verdana,arial,sans-serif;
	font-size:11.5pt;
	writing-mode:tb-rl;
	margin:0px ;
	color:#333;
	float:right;
	left:10px;
	top:250px;
	position:absolute;
    text-decoration: none;
	z-index:100;
}

.visral_leftside {
	top:0px;
	overflow-y:hidden; 
	overflow-x:hidden;
	overflow: hidden;
	height:calc(99% - 32px);
	position: fixed;
	margin-top:10px;
	z-index:24;
}

.visral_leftsidesect {
//	background:#F5F5F5;	
	margin: 0px;
	width: 200px;
	padding: 0px;
	border-width: 0px;
//	border-color: #999999;
//	border-collapse: collapse;
	font-family: verdana,arial,sans-serif;
	font-size:11pt; 
	font-weight: normal; 
	color:#666;
	z-index:24;
//	height: 24px;
}

//===========================================================================

.portraitid {
	width:300px;
	height:425px;
	border:1px solid #ccc;
}

.visral_post_sect {
	background:#f5f5f5;	
	margin-bottom: 5px;
	width: 720px;
	padding: 0px;
	border: 0px solid #ccc;	
	font-family: Arial,verdana,arial,sans-serif;
	font-size:10.5pt;
	font-weight: normal; 
	color:#666;
}

.visral_mainsect {
	margin: 5px 0px 40px 5px;
	width: 690px;
	padding: 0px;
	font-family: Arial,verdana,arial,sans-serif;
	font-size:10.5pt;
	font-weight: normal; 
	color:#666;
	min-height:140px;
}

//===============================================
.visitor:link {color: #eeeeee;
	text-decoration:none;
} 
.visitor:visited {color: #2e6cd1;
	text-decoration:none;
} 
.visitor:hover {color: #2e6cd1;
	text-decoration:underline;
	/*text-decoration:none;*/
	cursor:pointer;
} 
.visitor:active {
	text-decoration:none;
}

.visitor
{
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
//	font-weight: bold; 
	color:#666;
	text-decoration:none;
}

.account
{
	font-family: verdana,arial,sans-serif;
	font-size:11px;
//	font-weight: bold; 
	color:#888;
	text-decoration:none;
	line-height:15px;
}

.lobbyclass
{
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:13pt;
	font-weight:normal;
	color:#333;
	border:none;
	background: transparent;
	white-space: nowrap;
	float:left;
	margin-top:0;
	padding-left:6px;
	display:inline-block;
	text-decoration: underline;
}

.stub {
	width: 680px;
//	z-index:0;
}

.visral_post {
	background:#fff;	
	margin: 0px;
	width: 655px;
	padding: 0px;
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight: normal; 
	color:#666;
	border:1px solid #ccc;
	overflow:auto;
}

.visral_chat {
	background:#fff;	
	margin: 0px;
	width: 655px;
	padding: 0px;
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight: normal; 
	color:#666;
	border:1px solid #666;
	overflow:hidden;
}


.portrait_post {
	border: 1px solid #ccc;	
	margin:4px 2px 4px 4px;
	cursor:pointer;
	float:left;
	z-index:311;
 // position: absolute;
 // clip: rect(0px,56px,56px,0px);
	width:56px;
	height:56px;
	object-fit: cover;
//	object-fit: contain;
}

.FullGroup {
	position:relative;
//	border: 0px solid #ccc;	
	padding: 0px 0px 0 0;
	vertical-align: top;
//    line-height: 22px;
    overflow: hidden;  /* prevents extra lines from being visible */
//	float:right;
}

.FullGroupchat {
	position:relative;
//	border: 0px solid #ccc;	
	padding: 0px 0 0 0;
	vertical-align: top;
//    line-height: 22px;
    overflow: hidden;  /* prevents extra lines from being visible */
//	float:right;
}

.showtime {
	float: right;	
	vertical-align: top;
}

.clrance {
	font-weight:bold;
	margin-right:5px;
}

.showmssg {
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	position:fixed;
	z-index:20;
	margin-left:105px;
	transform:translateY(-10px);
	visibility:hidden;
	border:0 1px 1px 1px solid #777;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width:580px;
	height:60px;
	background:#ffffe6; 
	padding:10px;
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.todo2id {
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	position:fixed;
	z-index:20;
	margin-left:75px;
	transform:translateY(-10px);
	visibility:hidden;
	border:0 1px 1px 1px solid #777;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width:600px;
	height:60px;
	background:#f1f1f1; 
	padding:10px;
}

.filterid {
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	position:fixed;
	z-index:20;
	margin-left:75px;
	transform:translateY(-10px);
	visibility:hidden;
	border:0 1px 1px 1px solid #777;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width:600px;
	height:60px;
	background:#f1f1f1; 
	padding:10px;
}

hr { 
	display: block;
	float:left;
	width:570px;
	margin: 0;
	border-top: 1px solid #8c8b8b;
}

.subjectback {
	width:calc(100% - 2px);
	border:none;
	background: transparent;
	float:left;
	margin-top:0px;
	display:inline-block;
	border:1px solid red;
}

.textsubject {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:12pt;
	font-weight:normal;
	color:#333;
	width:calc(100% - 30px);
	border:none;
	background: transparent;
	white-space: nowrap;
	float:left;
	margin:0px;
	text-decoration:none;
}

.text-container1 {
	background:white;
	float: right;	
	vertical-align: top;
	margin-right:10px;
//	width:calc(99% - 10px);
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:#333;
	word-wrap:break-word;
	overflow-wrap:break-word;
	cursor:default;
	padding:3px 3px 10px 0;
	line-height:normal;
	border:1px solid #ccc;
	 width:570px;
	/* prevent copying text */
//	-webkit-user-select: none;  /* Chrome all / Safari all */
//	-moz-user-select: none;     /* Firefox all */
//	-ms-user-select: none;      /* IE 10+ */
//	user-select: none;          /* Likely future */      
	overflow-y:auto;
	resize: vertical;
//	height:auto;
	min-height:30px;
}

.text-container1 p {margin: 0;}


.dsplychat {
	margin:0px;
	background:transparent;
//	border:1px solid blue;
	width:100%;
	height:auto;
	z-index:0;
}

.text-container2 {
	z-index:24;
	background:white;
	float: right;	
	vertical-align: top;
	margin-right:20px;
	width:calc(99% - 54px);
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:#333;
	word-wrap:break-word;
	overflow-wrap:break-word;
	overflow:auto;
	cursor:default;
	padding-right:20px;
	/* prevent copying text */
//	-webkit-user-select: none;  /* Chrome all / Safari all */
//	-moz-user-select: none;     /* Firefox all */
//	-ms-user-select: none;      /* IE 10+ */
//	user-select: none;          /* Likely future */      
}

.text-container2 p {margin: 0;}

.text-container {
	background:white;
	float: left;	
	vertical-align: top;
	margin:0 0 0 5px;
	width:calc(99% - 7px);
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:#333;
	word-wrap:break-word;
	overflow-wrap:break-word;
	cursor:default;
	padding:0 0px 0 0;
	line-height:normal;
	border:1px solid #ccc;
	overflow-y:auto;
	resize: vertical;
	min-height:180px;
	height:auto;
}

.text-container p {margin: 0;}

.dsply {
	margin:0px;
	background:transparent;
//	border:1px solid blue;
//	height:%dpx;
	height:100%;//7.5em;
	width:100%;
	position:relative;
//	top:-20px;
//	overflow:auto;
	z-index:0;
}

.pictid {
    opacity: 0.0;
	margin-left:4px;
	cursor:default; 
 }

.flagid {
    opacity: 0.0;
	margin-left:4px;
	cursor:default; 
 }

.filesid {
    opacity: 1;
	margin-left:4px;
	cursor:pointer; 
 }

.sitesid {
    opacity: 1;
	margin-left:4px;
	cursor:pointer; 
 }

.todoid {
    opacity: 0.4;
	margin-left:4px;
	cursor:pointer; 
 }

.fullid {
    opacity: 0.4;
	margin-left:4px;
	cursor:pointer; 
 }

.readid {
    opacity: 0.4;
	margin-left:4px;
	margin-right:5px;
	cursor:pointer; 
 }

.chatid {
 //   opacity: 0.4;
	margin-left:5px;
	cursor:pointer; 
 }

.offid {
   opacity: 0;
	margin-left:5px;
	cursor:default; 
 }


//===============================================
.visral_post_sect table { 
    border-spacing: 0px;
    border-collapse: separate;
}

.visral_post_sect td {
	padding: 0px 0 0px 0;
}

.visral_head_sect {
	background:#ffffff;	
	margin: 0px 0px 0px 0px;
	width: 730px;
	padding: 0px;
	border: 1px solid #ccc;	
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	font-weight: normal; 
	color:#666;
//	border-radius: 5px;
	min-height:52px;
	cursor: pointer;
}

.visral_head_sect table { 
    border-spacing: 0px;
    border-collapse: separate;
}

.visral_head_sect td {
	padding: 4px 10px 3px 12px;
}

.firstcol {
	position:relative;
	margin-top:20px;
//	max-width:700px;
//	margin-left: auto ;
//	margin-right: auto ;
//	border:1px solid #ccc;
	max-height:calc(99vh - 120px);
	overflow-y:scroll;
	-ms-overflow-style: none;
}
/*
.lastcol {
	margin:35px 0px 0 835px;
	padding: 5px 0 5px 5px;
//	background:#E29898;	
	color:#333;
	float:right;
	position:fixed;
//	overflow-y:scroll;
	overflow: auto;
	min-width:400px;
	width:calc(96% - 600px);
	height:calc(92% - 92px);
}
*/

.visral_subject_line {
	margin: 0px 0px 0px 0px;
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:#333;
	max-width:700px;
	word-wrap:break-word;
	overflow-wrap:break-word;
	line-height: 19px;
	cursor:default;
//	overflow-y:scroll; 
//	overflow-x:hidden;
//	overflow: auto;
//	max-height:350px;
}

.subject_find {
	margin: -16px 0 0px 7px;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	color:#AE2F2D;
}

.postoutsect {
//	background:#ffffff;
	width:460px;
//	margin-top:-12px;
//	margin:0px 10px 0px 7px;
	font-family: verdana,arial,sans-serif;
//	word-wrap:break-word;
//	overflow-wrap:break-word;
	font-size:10pt; 
	white-space:normal;
//	line-height: 20px;
//	-webkit-touch-callout: none;
//	-webkit-user-select: none;
//	-khtml-user-select: none;
//	-moz-user-select: none;
//	-ms-user-select: none;
//	user-select: none;
	display:inline-block;
//	border-top:1px solid #ddd;
}

.mclass {
//	background:#f5f5f5;
//	width:600px;
	margin:10px 0px 0px 600px;
	position:relative;
//	top:200px;
}

.portrait {
	border: 1px solid #ccc;	
	margin: 0 5px 5px 5px;
	float:right;
	border-radius: 5px;
}


.searchstyle {
	background:#F1F1F1;	
	margin: 0px 0px 0px -4px;
	border: 1px solid #ccc;
	padding:4px 0 5px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
	min-width:304px;
	text-align: left;
	z-index:1;
}

.netstyle {
	background:#F1F1F1;	
	width:100%;
	min-width:150px;
	margin: 0px 0px 0px -4px;
	border: 1px solid #ccc;
	padding:4px 0 5px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
//	min-width:330px;
	text-align: left;
	z-index:1;
}

/* Change background color of buttons on hover */
.netstyle:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.netstyle:active {
 //   background-color: #ccc;
	color:#00bfff;
//	opacity:.90;
}


.chatstyle {
	display:none;
	position:fixed;
	bottom:0%;
	left:80px;
	width:570px;
	border:1px solid #ccc;
	background:#fff;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	z-index:25;
}

#firstcol .chatbox {
//	position: absolute;
//  bottom: 0;
//	left: 5px;
//	background:#fff;//e8e8e8;
margin-top:-4px;
	display:none;
//	position:fixed;
//	top:calc(0% + 50px);
//	left: calc(52% - 5px);
//	transform: translateX(-48%);
//	max-width:660px;
//	max-height:550px;
//	padding:0 35px 10px 0px;
//	border:1px 1px 1px 1px solid #777;
//	border-radius:5px;
 //   box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.3);
//	overflow-y:auto;
//	overflow-x:hidden;
//	z-index:25;
}


div.dialog {
    position: -webkit-sticky;
    position: sticky;
	top:40px;
	background:#e8e8e8;
	display:none;
	max-width:740px;
	min-height:240px;
	padding:0 35px 10px 0px;
	border:0 1px 1px 1px solid #888;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:25;
//	margin-top:40px;
	margin-bottom:-30px;
	margin-left: auto ;
	margin-right: auto ;
}

.searchup {
	background:#e8e8e8;
	display:none;
	position:fixed;
	top:calc(0% + 50px);
	left: calc(50% + 32px);
	transform: translateX(-50%);
	max-width:740px;
	min-height:250px;
	padding:0 0px 20px 0px;
	border:0 1px 1px 1px solid #888;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:25;
}

.vsubjectfield {
	width: 98%;
	padding: 2px 10px 2px 10px;
	margin:0;
//	color:#365899;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:12pt;
	letter-spacing: 1px;
	line-height: normal;
	background: #f8f8f8;
	border: 1px solid #ccc;	
	border-radius:5px;
//	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.accountfield {
	height: 20px;
	width: 530px;
	padding: 2px 10px 2px 4px;
	margin:0;
//	color:#365899;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:12pt;
	letter-spacing: 1px;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.textedit {
	background:#fff;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	padding:10px;
	min-height: 110px;
	width: 650px;
	text-align: left;
	margin: 3px 0px 8px 6px;
	border: 1px solid #ccc;
//	line-height: 15px;
//	overflow-y: auto;
//  max-height: 305px;
	z-index:105;
}



.notedit {
	position:absolute;
//	display:none;
//	visibility:hidden;
	background:#ffffe6;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	padding:10px 0 0 10px;
//	line-height: 5px;
	min-height: 70px;
	width: 450px;
	text-align: left;
	margin: 0px 0 0 0px;
	border: 1px solid #ccc;
	overflow-y: auto;
    max-height: 305px;
	z-index:105;
	border:0 1px 1px 1px solid #888;
//	border-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	overflow-wrap: break-word;
}

.noteditex {
	position:absolute;
	display:none;
	background:#9F9F9F;
	padding:0px;
	height: 80px;
	width: 500px;
	margin: 8px 0px 8px 8px;
	z-index:105;
	border:0 1px 1px 1px solid #888;
	border-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.filterex {
	position:absolute;
	display:none;
	background:#9F9F9F;
	padding:0px;
	height: 80px;
	width: 500px;
	margin: 8px 0px 8px 8px;
	z-index:105;
	border:0 1px 1px 1px solid #888;
	border-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.notemenu {
    color: white;
    float: right;
    font-size: 20px;
    font-weight: bold;
}

.notemenu:hover, .notemenu:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

.chatedit {
	background:#fff;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	padding:10px;
	min-height: 30px;
	width: 670px;
	text-align: left;
	margin: 0px 0px 0px 6px;
	border: 1px solid #ccc;
//	line-height: 15px;
	overflow-y: scroll;
	max-height: 305px;
	z-index:105;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.chatedit p { line-height: normal; }

.chateditex {
	position:absolute;
	display:none;
	background:#9F9F9F;
	padding:0px;
	height: 80px;
	width: 500px;
	margin: 8px 0px 8px 8px;
	z-index:105;
	border:0 1px 1px 1px solid #888;
	border-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.chateditchx {
	position:relative;
	margin-top:50px;
	margin-left: auto ;
	margin-right: auto ;
	display:none;
//	background:#9F9F9F;
	padding:0px;
	height: 40px;
	width: 500px;
	z-index:105;
	border:0 1px 1px 1px solid #888;
//	border-radius:5px;
//    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.paper {
  font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
  width: 50%;
  height: 80%;
  margin: 0 auto;
  padding: 6px 5px 4px 42px;
  position: relative;
  color: #444;
  line-height: 20px;
  border: 1px solid #d2d2d2;
  background: #fff;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
  background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
  -webkit-background-size: 100% 20px;
  -moz-background-size: 100% 20px;
  -ms-background-size: 100% 20px;
  -o-background-size: 100% 20px;
  background-size: 100% 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  width: 816px;
  height: 1056px;
}
.paper::before {
  content: '';
  position: absolute;
  width: 4px;
  top: 0;
  left: 30px;
  bottom: 0;
  border: 1px solid;
  border-color: transparent #efe4e4;
}


.verifyid {
	position:fixed;
//	visibility:hidden;
	background:#fff;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	padding:5px;
	min-height: 70px;
	width: 380px;
	text-align: left;
	margin: 8px 0px 8px 66px;
	border: 1px solid #ccc;
	line-height: 20px;
	overflow-y: auto;
    max-height: 305px;
	z-index:105;
}

.mode2 {
	display:none;
	overflow-x:hidden;
	overflow-y:hidden;
	overflow: auto;
	margin-top:40px;
}

.mode3 {
	background: #111;
	font-family:Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, sans-serif;
	font-size: 13px;
	margin: 0 auto;
	padding-top: 50px;
	max-width: 900px;
}

.midcol {
	margin: 0 auto;
	padding: 40px 5px 50px 5px;
	color:#333;
	float:left;
	position:fixed;
//	overflow-y:scroll;
	overflow: auto;
	width:100%;
	height:100%;
}

.Editable {
	-ms-user-select:text;
	color:#333;
	font-size:11pt;
	font-weight:500;
//	line-height:3px;
}

.Linkable {
	-ms-user-select:text;
	color:#333;
	font-size:11pt;
	font-weight:500;
	color:#333;
	font-size:11pt;
	font-weight:500;
	position:absolute;
	width:300px;
	height:20px;
	opacity:.99;
	z-index:20;
	padding:2px 0 2px 5px;
	border:0px;
	overflow:auto;
	outline:1px dashed #888;
}

.titletable {
	padding-top:5px;
	line-height:18px;
	font-family: verdana,arial,sans-serif;
	font-size:10.5pt;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-style: solid;
	background-color:#f5f5f5;
	padding-bottom:0px;
	padding-right:0px;
}
.titletable th {
	background-color:#DDDDDD;
	border-width: 0px;
	padding: 4px;
	border-style: solid;
	border-color: #999999;
}
.titletable td {
	background-color:#f5f5f5;
	border-width: 0px;
	padding: 0px 4px 0 0;
	border-style: solid;
	border-color: #999999;
}

.visral_article {
	color: #0E5A62;
	font-family: verdana,arial,sans-serif;
	font-size: 13pt;
	font-weight: normal;
	margin: 0 0 15px 0px;
	padding: 0px;
	display:inline-block;

}


/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 15px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
//    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
	background:#ddd;
} 

.lockerx {
	background:#ccc;
	color: #333;
	font-size: 14px;
	letter-spacing: 1px;
	font-variant: normal;
    padding: 6px 20px;
	border:1px solid #aaa;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}

.birthmonth {
    -webkit-appearance: menulist-button;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
	padding: 3px 5px 7px 5px;
	border: 0px;
	height: 26px;
	line-height: 26px;
	width: 115px;
	margin-left:10px;
	margin-bottom:10px;
	color: #333;
	font-size: 14px;
	letter-spacing: 1px;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
}

.birthday {
    -webkit-appearance: menulist-button;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
	padding: 3px 5px 7px 5px;
	border: 0px;
	height: 26px;
	line-height: 26px;
	width: 65px;
	margin-left:10px;
	margin-bottom:10px;
	color: #333;
	font-size: 14px;
	letter-spacing: 1px;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
}

.birthyear {
    -webkit-appearance: menulist-button;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
	padding: 3px 5px 7px 5px;
	border: 0px;
	height: 26px;
	line-height: 26px;
	width: 72px;
	margin-left:10px;
	margin-bottom:10px;
	color: #333;
	font-size: 14px;
	letter-spacing: 1px;
	font-variant: normal;
	background: #fff;
	border: 1px solid #ccc;	
}

#scroll {
	width: 250px;
	height: 50px;
	border: 2px solid black;
	background-color: lightyellow;
	top: 100px;
	left: 50px;
	position:absolute;
}

.menutable {
//	margin:10px 0 0 10px;
	line-height:18px;
	font-family: verdana,arial,sans-serif;
	color:#333333;
	padding:0px;
	border-width: 1px;
	border-color: #999999;
	border-style: solid;
	background-color:#FFFFFF;
	border-collapse:collapse;
}
.menutable th {
	background-color:#111;
	color:#ffffff;
	font-size:10pt;
	border-width: 0px;
	padding: 5px;
	border-style: solid;
	border-color: #999999;
}
.menutable td {
	font-size:10pt;
	background-color:#F5F5F5;
	border-width: 1px 1px 0 0;
	padding: 2px 8px;
	border-style: solid;
	border-color: #999999;
	max-height:30px;
	overflow-y:auto;
}

.srch {
 //	background-color:#c6cdd2;
	border-width: 0;
	padding: 0px;
	border-style: solid;
	border-color: #999999;
	min-height:20px;
	max-height:40px;
	overflow-y:auto;
    font-size:10pt;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
	width:310px;
}

.vtargetfield {
	line-height:20px;
	height:20px;
	width: 200px;
	padding: 2px 2px;
	margin:0;
	font-size:10pt;
	line-height: normal;
	border:1px solid #bbb;
	border-radius:5px;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	text-decoration:none;
	overflow:hidden;
}


//===============================================

.safety:link {color: #eeeeee;
	text-decoration:none;
} 
.safety:visited {color: #eeeeee;
	text-decoration:none;
} 
.safety:hover {color: #444;
	text-decoration:underline;
	/*text-decoration:none;*/
	cursor:pointer;
} 
.safety:active {
	text-decoration:none;
}

.safety
{
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight: bold; 
	color:#666;
	text-decoration:none;
	z-index:26;
}


#sidemenu {
	position: fixed;
	right: -430px;
	top: 50px;
	width: 420px;
	height:80vh; 
	background: rgba(149, 149, 149, 0.99);
	color: white;
	margin: 0px 0 0 0;
	padding: 8px 8px 8px 40px;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	z-index:26;
}

#sidemenu { 
	transition: .4s;
//	transition-delay: .1s;
}

#sidemenu a {
  position: relative;
  left: 0;
}

#sidemenu a:focus {
  left: -100px;
  background: rgba(149, 149, 149, 0.99);
}

#sidemenu a { transition: 0.2s }

#sidemenu:hover a:focus {
	left: 0;
	background: none;
//    transition-delay: 0.1s ease-out;
}

/******************************************************/
#sideup {
	position: fixed;
	bottom: -400px;
	left: 70px;
	height: 430px;
	width:430px; 
	background: rgba(149, 149, 149, 0.99);
	color: white;
	margin: 0px 0 0 0;
	padding: 8px 8px 8px 20px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	z-index:26;
}

#sideup { 
	transition: 1.2s;
//	transition-delay: .6s;
}


#sideup:hover {
  bottom: -100px;
  background: rgba(149, 149, 149, 0.99);
}


.vertflag {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	writing-mode:tb-rl;
	margin:0 0 0 0px ;
}


.verticalmenu {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	writing-mode:tb-rl;
	margin:0 0 0 -33px ;
	color:white;
	float:left;
	left:-100px;
    text-decoration: none;
	line-height: 20px;
	z-index:100;
	cursor:pointer;
	padding:10px 2px 10px 2px;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.verticalmenu:hover {
	background: #c0c0c0; 
	color:#780000;
}


/******************************************************/
#sideout {
	position: fixed;
	top: 50px;
	left: -500px;
	height: 290px;
	width:497px; 
	background: rgba(149, 149, 149, 0.99);
	color: white;
	margin: 0px 0 0 0;
	padding: 8px 8px 8px 20px;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
	z-index:26;
}

#sideout { 
	transition: 1.2s;
	transition-delay: .8s;
}


#sideout:hover {
	left: -20px;
	background: rgba(149, 149, 149, 0.99);
}


.vertslide {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
    text-decoration: none;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform:rotate(90deg);
	transform: rotate(90deg);
	float:right;
	width: 70px;//504px;
	margin: 26px -24px 24px 0px;
	padding:4px 4px 4px 4px;
	cursor: pointer;
//	text-align: center;
//	vertical-align: bottom;
//	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
}


.vertslide:hover{
	background: #c0c0c0; 
	color:#780000;
}


.vertslide1 {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
    text-decoration: none;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform:rotate(90deg);
	transform: rotate(90deg);
	float:right;
	width: 100px;//504px;
	margin: 45px -39px 24px 0px;
	padding:4px 4px 4px 4px;
	cursor: pointer;
//	text-align: center;
//	vertical-align: bottom;
//	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
}


.vertslide1:hover{
	background: #c0c0c0; 
	color:#780000;
}


.vertslide2 {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
    text-decoration: none;
	writing-mode:tb-rl;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform:rotate(90deg);
	transform: rotate(90deg);
	float:right;
	width: 110px;
	margin: 40px -49px 44px 0px;
	padding:4px 4px 4px 4px;
	cursor: pointer;
//	text-align: center;
//	vertical-align: bottom;
//	white-space: pre;
	background: transparent; 
	border:0px;
//	border-radius:5px;
//	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
}


//.vertslide2:hover{
//	background: #c0c0c0; 
//	color:#780000;
//}


.upmenu {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	margin:6px 0 0 0px ;
	color:white;
	width:90px;
	display: inline-block;
    text-decoration: none;
	line-height: 15px;
	z-index:100;
	cursor:pointer;
	padding:5px 0 5px 0;
	border: 1px solid #ccc;
	text-align: center;
	background: #999;
	margin-left:4px;
}

.upmenu:hover {
 	color:#333;
}


.side {
	overflow-y:auto; 
	overflow-x:hidden;
	min-height:250px;
	width:100%; // sets width of scroll section
	margin-top:10px;
//	margin-right:0px;
//	background:rgba(149, 149, 149, 0.5);
//	border: 0px solid #ccc;
//	float:right;
}

.side2 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height:calc(98% - 100px);
	width:410px; // sets width of scroll section
	margin-top:10px;
	margin-right:6px;
	background:rgba(149, 149, 149, 0.5);
	border: 0px solid #ccc;
	float:right;
}


leftside{
}

leftside > div{
    position:fixed;
    left:0;
	top: 50px;
	height:130px;
	width:345px;
    margin-left:0px;
    padding: 15px;
    z-index:26;
	background: rgba(189, 189, 189, 0.99);
	color:#fff;
	border:1px solid #bbb;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.listedstyle {
	background:#F1F1F1;	
	width:570px;
	overflow:hidden;
	margin: 0px 0px 0px 5px;
	border: 1px solid #ccc;
	padding:4px 0 5px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
//	min-width:330px;
	text-align: left;
	z-index:1;
}

/* Change background color of buttons on hover */
.listedstyle:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.listedstyle:active {
 //   background-color: #ccc;
	color:#00bfff;
//	opacity:.90;
}


.liststyle {
	background:#F1F1F1;	
	width:130px;
	overflow:hidden;
	margin: 0px 0px 0px 5px;
	border: 1px solid #ccc;
	padding:4px 0 5px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
//	min-width:330px;
	text-align: left;
	z-index:1;
}

/* Change background color of buttons on hover */
.liststyle:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.liststyle:active {
 //   background-color: #ccc;
	color:#00bfff;
//	opacity:.90;
}


.listsite {
	background:#F1F1F1;	
	width:308px;
	overflow:hidden;
	margin: 0px 0px 0px 5px;
	border: 1px solid #ccc;
	padding:3px 0 4px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
//	min-width:330px;
	text-align: left;
	z-index:1;
}

/* Change background color of buttons on hover */
.listsite:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.listsite:active {
 //   background-color: #ccc;
	color:#00bfff;
//	opacity:.90;
}



.tracestyle {
	background:transparent;	
	width:540px;
	overflow:hidden;
	margin: 0px 0px 0px 5px;
	border: 1px solid #ccc;
	padding:4px 0 5px 10px;
	font-family: verdana,arial,sans-serif;
	color:#333;
	font-size:10pt;
	cursor:pointer;
//	min-width:330px;
	text-align: left;
	z-index:1;
}

/* Change background color of buttons on hover */
.tracestyle:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.tracestyle:active {
 //   background-color: #ccc;
	color:#00bfff;
//	opacity:.90;
}

.botflag {
	margin-top:6px;
	margin-right:4px;
	cursor:pointer;
}
 
.botscroll {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 100%;
	max-height:250px;
	width:170px; 
	margin-top:0px;
	margin-right:0px;
	margin-left:5px;
	margin-bottom:5px;
	background:white;
	border: 1px solid #ccc;
	float:left;
}


.botscroll1 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 260px;
	width:400px; 
	margin:0 0 0 10px;
	padding:10px;
	background:rgba(149, 149, 149, 0.5);
	border:1px solid #ccc;
	float:left;
}


.botscroll2 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 260px;
	width:330px; 
	margin-top:6px;
	margin-right:6px;
	margin-left:0px;
	background:rgba(149, 149, 149, 0.5);
	border: 1px solid #ccc;
	float:left;
}
 

.botscroll3 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 260px;
	width:600px; 
	margin-top:6px;
	margin-right:6px;
	margin-left:0px;
	background:rgba(254, 254, 254, 0.9);
	border: 1px solid #ccc;
	float:left;
}


.botscroll4 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 260px;
	width:590px; 
	margin-top:6px;
	margin-right:6px;
	margin-left:0px;
	background:rgba(149, 149, 149, 0.5);
	border: 1px solid #ccc;
	float:left;
}


.botscroll5 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 70px;
	width:340px; 
	margin-top:6px;
	margin-right:6px;
	margin-left:0px;
	background:rgba(254, 254, 254, 0.9);
	border: 1px solid #ccc;
	float:left;
}


.botscroll6 {
	overflow-y:scroll; 
	overflow-x:hidden;
	height: 270px;
	width:426px; 
	margin-top:6px;
	margin-right:6px;
	margin-left:0px;
	background:rgba(254, 254, 254, 0.9);
	border: 1px solid #ccc;
	float:left;
}


.scrollbox2 {
//  overflow: auto;
  visibility: hidden;
}

.scrollbox2-content, .scrollbox2:hover {
  visibility: visible;
} 

.contactstyle {
	display:none;
	position:fixed;
	top:50px;
	left:60%;
	width:390px;
//	transform: translateX(-50%);
	border:1px solid #888;
	background:#fff;
	padding-left:10px;
	padding-bottom:10px;
    box-shadow: 0px 8px 16px 0px rgba(149, 149, 149,0.2);
//	z-index:25;
}

#tooltip_div{
	background-color:#FFFCC8;
//		border:1px solid #000;
	position:absolute;
	display:none;
	z-index:20000;
	padding:8px;
	font-size:0.9em;
	line-height:1.2em;
//		-moz-border-radius:6px;	/* Rounded edges in Firefox */
	font-family: "Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
		
	border:1px 1px 1px 1px solid #555;
	border-radius:5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.progbar {
//	position:fixed;
//	top:228px;
//	left: calc(50% - 75px);
//	z-index:300;
	background:white;
	height:10px;
}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 121; /* Stay on top */
    top: 40;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 38px; /* Place content 60px from the top */
    transition: 0.01s; /* 0.5 second transition effect to slide in the sidenav */
	color: white !important;
}
 
/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 12px;
    text-decoration: none;
    font-size: 18px;
    color: #818181 !important;
    display: block;
    transition: 0.01s
}
 
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1 !important;
}
 
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 35px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
 
/* The container <div> - needed to position the dropdown content */
.nav_dropdown {
    position: relative;
    display: inline-block;
}

/* Show the dropdown menu on hover */
.nav_dropdown:hover .sidenav_dropdown {
    display: block;
}

 /* Dropdown Content (Hidden by Default) */
.sidenav_dropdown {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
    display: none;
    position: absolute;
	margin: 0px;
	background: #fff;
	border: 1px solid #ccc;	
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:45;
	text-decoration:none;
}

/* Links inside the dropdown */
 .sidenav_dropdown a {
    color: #666;
    padding: 6px 20px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .sidenav_dropdown a:hover {
	background: #e9e9e9;
	color:#00bfff; !important
}



/* Style the tab */
.tab2 {
    float: left;
 //   border: 1px solid #ccc;
//    background-color: #f1f1f1;
    width: 70px;
    height: 200px;
}

/* Style the buttons that are used to open the tab content */
.tab2 button {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 90px;
 	height: 30px;
	margin: 0 0 0px 7px;
	padding: 0 0px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	white-space: pre;
	background: url(vserve4img/templatemo_button_01.png) no-repeat 0 0;
	border: none;
	color:#fff;
	opacity:.50;
	letter-spacing: 1px;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
 //   background-color: #ddd;
	color:#00bfff;
}

/* Create an active/current "tab button" class */
.tab2 button.active {
 //   background-color: #ccc;
	color:#00bfff;
	opacity:.90;
}


.sidesect {
	line-height:20px;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 14pt;
}


.sidesect1 {
	margin-left:8px;
	line-height:20px;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 11pt;
}

.sidesect2 {
	background:rgba(149, 149, 149, 0.5);	
	margin-right: 5px;
	padding: 0px;
	border-width: 0px;
	font-family: verdana,arial,sans-serif;
	font-size:11pt; 
	font-weight: normal; 
	color:#666;
	z-index:25;
}




//====================================================================================
.tab-menu{}
.tab-menu ul{
  margin: 0 0 8px 0;
  padding: 0;
}
.tab-menu ul li{
  list-style-type: none;
  display: inline-block;
}
.tab-menu ul li button{
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 90px;
 	height: 30px;
	margin: 0 0 0px 7px;
	padding: 0 0px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	white-space: pre;
	background: url(vserve4img/templatemo_button_01.png) no-repeat 0 0;
	border: none;
	color:#fff;
	opacity:.80;
	letter-spacing: 1px;
}
.tab-menu ul li button.active-a{
	background: #ccc;
//	border-color: rgba(0xcc,0xcc,0xcc,0.0);
	color:#000;
}

.blink {
		animation: blink 1s linear infinite;
}

@keyframes blink{
	0%{opacity: 0;}
	50%{opacity: .5;}
	100%{opacity: 1;}
}

/*=============================================================================*/
.shadow1 {
	position:fixed;
	margin: 25px 0px 0px 35px;
	z-index:20;
	background: #eee;
	border: 1px solid #888;	
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.shadow1.content {
  position: relative; /* This protects the inner element from being blurred */
  padding: 5px;
//  background-color: #DDD;
}

.verttitle {
	position:absolute;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:10.5pt;
	letter-spacing: 1px;
	writing-mode:vertical-rl;
	transform: rotate(-180deg);
	margin:115px 0 0 0px ;
	color:grey;
	float:left;
	left:-28px;
    text-decoration: none;
	line-height: 20px;
	z-index:0;
//	cursor:pointer;
	padding:5px 2px 5px 2px;
	background: transparent !important;
	border:none;
//	border-radius:5px;
//	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.vertspec {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:9pt;
	letter-spacing: 1px;
	writing-mode:vertical-rl;
	transform: rotate(-180deg);
	color:grey;
	float:left;
    text-decoration: none;
//	line-height: 20px;
//	z-index:0;
	cursor:pointer;
	padding:5px 2px 5px 2px;
	background: transparent !important;
	border:none;
}


.vertmenu {
	position:absolute;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	writing-mode:tb-rl;
	margin:115px 0 0 0px ;
	color:white;
	float:left;
	left:-28px;
    text-decoration: none;
	line-height: 20px;
	z-index:0;
	cursor:pointer;
	padding:5px 2px 5px 2px;
	background: #a0a0a0;
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.vertmenu:hover {
	background: #c0c0c0;
	color:#780000;
}


.horzmenu {
//	position:relative;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
	margin:10px 0 0 5px ;
	color:white;
    text-decoration: none;
	line-height: 20px;
	z-index:110;
	text-align:center;
	cursor:pointer;
	padding:3px 8px;
	background: #a0a0a0;
	border:1px solid #666;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.horzmenu:hover {
	background: #c0c0c0;
	color:#780000;
}


.showpics {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:10pt;
	letter-spacing: 1px;
	margin:0px 0 0 5px ;
	color:white;
    text-decoration: none;
	line-height: 16px;
	z-index:110;
	text-align:center;
	cursor:pointer;
	padding:2px 4px;
	background: #a0a0a0;
	border:1px solid #a0a0a0;
	border-radius:0 0 5px 5px;
}

.showpics:hover {
	background: #c0c0c0;
	color:#780000;
}

.decrypt {
//	position:relative;
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
//	margin:10px 0 0 5px ;
	color:white;
    text-decoration: none;
	line-height: 20px;
	z-index:0;
	text-align:center;
	cursor:pointer;
	padding:3px 0px;
	background: #a0a0a0;
	border:1px solid #999;
	border-radius:5px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.decrypt:hover {
	background: #c0c0c0;
	color:#780000;
}

.dsplyfull {
	margin:0px;
	background:transparent;
	border:0px;
	min-height:80vh;
	width:100%;
	position:relative;
	top:0px;
}


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


/*------------------------------ Sprites ------------------------------*/
.select-style {
    border: 1px solid #ccc;
    width: 320px;
    border-radius: 3px;
//    overflow: hidden;
	margin-right:30px;
    background: #fafafa url("img/icon-select.png") no-repeat 90% 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 110%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

.select-style select:focus {
    outline: none;
}

select option{
    font-size: 13pt;
}


/**********************************************************************************/

#div0 {
    width: 84px;
    height: 220px;
    padding:0px;
//    border: 1px solid #aaaaaa;
//	float:left;
	margin:0px;
}

#div1 {
    width: 84px;
    height: 220px;
    padding:0px;
 //   border: 1px solid #aaaaaa;
//	float:left;
	margin:0px;
}

#div2 {
    width: 84px;
    height: 220px;
    padding:0px;
 //   border: 1px solid #aaaaaa;
//	float:left;
	margin:0px;
}

#div3 {
    width: 105px;
    height: 240px;
    padding: 10px 0 0 0px;
    border: 1px solid #aaaaaa;
	float:left;
}

#div4 {
    width: 105px;
    height: 80px;
    padding: 10px 0 0 0px;
 //   border: 1px solid #aaaaaa;
	float:left;
	margin-left:0px;
	margin-right:0px;
}


.div3 {
    width: 100%;
    height: 32px;
    padding: 10px 0 0 0px;
    border: 0px solid #aaaaaa;
	padding-top:3px;
	padding-bottom:3px;
	float:left;
}

.filtermatch {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 140px;
 	height: 24px;
	margin: 0px 0 0px 5px;
	padding: 0px 5px 2px 5px;
	vertical-align: top;
	color: #222;
	font-size: 14px;
	text-align: left;
//	white-space: pre;
	background:#ffffe6; 
	border: 1px solid #aaa;	
	letter-spacing: 1px;
//	border-radius: 3px;
	text-overflow: ellipsis;
}


.dragbutton {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 74px;
	margin: 0 0px 4px 5px;
	padding:4px 4px 5px 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #a0a0a0; 
	border:1px solid #666;
//	border-radius:3px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
	letter-spacing: 1px;
	cursor:pointer;
}


.dragbutton:hover{
	background: #c0c0c0; 
	color:#780000;
}


.fdes{
	cursor:pointer;
	text-align:center;
}

.fdes:hover{
	background: #c0c0c0; 
	color:#780000;
}

/**********************************************************************************/
.dragbuttonx {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 74px;
	margin: 0 0px 4px 5px;
	padding:4px 4px 5px 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #A3C7FA; 
	border:1px solid #666;
//	border-radius:3px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#fff;
	letter-spacing: 1px;
	cursor:pointer;
}


.dragbuttonx:hover{
	background: #c0c0c0; 
	color:#780000;
}


.dragbuttony {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 74px;
	margin: 0 0px 4px 5px;
	padding:4px 4px 5px 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #FFFFE6; 
	border:1px solid #666;
//	border-radius:3px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#333;
	letter-spacing: 1px;
	cursor:pointer;
}


.dragbuttony:hover{
	background: #c0c0c0; 
	color:#780000;
}


.dragbuttonz {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 74px;
	margin: 0 0px 4px 5px;
	padding:4px 4px 5px 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background: #C6DF99; 
	border:1px solid #666;
//	border-radius:3px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#333;
	letter-spacing: 1px;
	cursor:pointer;
}


.dragbuttonz:hover{
	background: #c0c0c0; 
	color:#780000;
}


.dragbuttona {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	width: 73px;
	margin: 0 0px 4px 5px;
	padding:0px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
	vertical-align: bottom;
	white-space: pre;
	background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      #ccc 20px,
      #ccc 30px);
	border:1px solid #666;
//	border-radius:3px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#333;
	letter-spacing: 1px;
	cursor:pointer;
}


.dragbuttona:hover{
	background: #c0c0c0; 
	color:#780000;
}



/**********************************************************************************/
div.ListContainer {
	clear: both;
	border: 1px solid #CCC;
//	height: 435px;
	margin-left:10px;
	overflow: auto;
	width: 600px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.ListContainer {
	overflow: hidden;
	width: 600px;
	color:#333;
}

/* define width of table. IE browsers only                 */
div.ListContainer table {
	float: left;
	/* width: 740px */
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.ListContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of ListContainer has an overflow property set to auto */


/**********************************************************************************/
div.tableContainer {
	clear: both;
	border: 1px solid #CCC;
	height: 285px;
	overflow: auto;
	width: 440px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 440px;
	color:#333;
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	/* width: 740px */
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */

thead.fixedHeader tr {
	position: relative;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

html>body tbody.scrollContent {
	display: block;
	height: 285px;
	overflow: auto;
	width: 100%
}

html>body thead.fixedHeader {
	display: table;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}



tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}


#sidemenu2 {
	position: fixed;
	right: -200px;
	top: 430px;
	width: 220px;
	height:420px;
	background: rgba(0, 0, 0, 0.99);
	color: white;
	margin: -300px 0 0 0;
	padding: 0.5em 0.5em 0.5em 0.5em;
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
	z-index:220;
	vertical-align:top;
}

#sidemenu2:hover { right: 0 }

#sidemenu2 { transition: 0.2s }

#sidemenu2 a {
  position: relative;
  left: 0;
}

#sidemenu2 a:focus {
  left: -7em;
  background: rgba(0, 0, 0, 0.99);
}

#sidemenu2 a { transition: 0.2s }

#sidemenu2:hover a:focus {
  left: 0;
  background: none;
}


.vertical2 {
	font-family: verdana,arial,sans-serif;
	font-size:11.5pt;
	letter-spacing: 1px;
	writing-mode:tb-rl;
//	-webkit-transform:rotate(90deg);
//	-moz-transform:rotate(90deg);
//	-o-transform: rotate(90deg);
//	-ms-transform:rotate(90deg);
//	transform: rotate(90deg);
	margin:0px ;
	color:red;
	float:left;
	width:20px;
//	left:calc(97% + 15px);//184px;
	top:55px;
	position:relative;
    text-decoration: none;
	z-index:100;
}


.notvalid {
	font-family: verdana,arial,sans-serif;
	font-size:18pt;
	letter-spacing: 1px;
	-webkit-transform:rotate(-20deg);
	-moz-transform:rotate(-20deg);
	-o-transform: rotate(-20deg);
	-ms-transform:rotate(-20deg);
	transform: rotate(-20deg);
	color:red;
	position:fixed;
    text-decoration: none;
	z-index:100;
	text-align: center;
}


.naturalimage {
	cursor:pointer;
	border-color:#fff;
	margin:4px;
	max-width:100%;
	height:auto;
}


.filtername {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	background:#efefef;
	border:1px solid #ccc;
	width:75px;
}


/* Style the tab */
.tabx {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tabx button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tabx button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tabx button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontentx {
	display: none;
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-style:normal;
	color:white;
	position: relative;
	padding: 0px;
	width: 340px;
    background-color: rgb(11,11,11);
   background-color: rgba(11,11,11,0.4);
}

/* Style the tab content */
.tabcontx {
	display: none;
//	font-family: verdana,arial,sans-serif;
//	font-size:10pt;
//	font-style:normal;
//	color:white;
	position: relative;
	padding: 0px;
	width: 620px;
	height:400px;
 //   background-color: rgb(11,11,11);
  // background-color: rgba(11,11,11,0.4);
}

.wrapper {
  display: grid;
  grid-template-columns: 120px 120px 120px 120px 120px 120px;
  grid-gap: 10px;
  background-color: transparent;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
}


/* ======================================================= */
.step {
  position: relative;
  min-height: em;
  color: gray;
}

.step + .step {
  margin-top: 1.4em
}

.step > div:first-child {
  position: static;
  height: 0;
}

.step > div:not(:first-child) {
  margin-left: 1.5em;
  padding-left: 1em;
}

.circle {
  background: gray;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  box-shadow: 0 0 0 3px #fff;
}

.circle:after {
  content: ' ';
  position: absolute;
  display: block;
  top: 1px;
  right: 50%;
  bottom: 1px;
  left: 45%;
  height: 140%;
  width: 2px;
  transform: scale(1, 2.1);
  transform-origin: 50% -80%;
  background-color: rgba(0, 0, 0, 0.5);
//  z-index: -1;
}

.step:last-child .circle:after {
  display: none
}

.step.step-active {
  color: #4285f4
}
.step.step-active .circle {
  background-color: #4285f4;
}

.title {
	color:#333;
	width:400px;
}


/*********************************************************************/	
.switch-field {
	font-family: Calibri, Verdana, "Lucida Grande", Tahoma, sans-serif;
//	padding: 3px 0 6px 0px;
	margin-left:-3px;
	margin-bottom:6px;
	overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
	display: inline-block;
//	width: 50px;
//	margin-top:1px;
	background-color: #a0a0a0;//#e4e4e4;
	color: #fff;//rgba(0, 0, 0, 0.6);
	font-size:10.5pt;
	font-weight: normal;
	text-align: center;
//	padding: 5px 14px;
//	border:1px solid #666;
	border-radius:5px;
//	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #c0c0c0;//#B5CFD2;
	box-shadow: none;
	color:#780000;
}

.switch-field label:first-of-type {
	border:1px solid #666;
//	border-top-right-radius:5px;
//	border-top-left-radius:5px;
}

.switch-field label:last-of-type {
	border-top: 0px solid #666;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	border-left: 1px solid #666;
//	border-bottom-right-radius:5px;
//	border-bottom-left-radius:5px;
}	


input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
	background-color: #a0a0a0;//#e4e4e4;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color: #fff;//rgba(0, 0, 0, 0.6);
	font-size:10.5pt;
	font-weight: normal;
	font-family: Calibri, Verdana, "Lucida Grande", Tahoma, sans-serif;
	padding: 3px 0 6px 0px;
  cursor: pointer;
  display: block;
  height: 25px;
  width: 90px;
  text-align: center;
  line-height: 30px;
}
input[type="radio"]:checked + label {
	background-color: #c0c0c0;//#B5CFD2;
	box-shadow: none;
	color:#780000;
}

/*
.hidden {
	position:absolute;
	visibility:hidden;
	opacity:0;
}

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
}
 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}
*/

.containerF {
 // background: lightcoral;
 // color: white;
  height: 26px;
 // display: flex;
//  justify-content: center;
//  align-items: center;
border:0px;
text-align: center;
  font-size: 10pt;
}

/*
.containerX {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

  border: 2px solid var(--gs0);
//  border-radius: 5px;
  height: 26px;
}

.containerX div {
  scroll-snap-align: start;

  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
}
.containerX div:nth-child(1) {
  background: hotpink;
  color: white;
}
.containerX div:nth-child(2) {
  background: azure;
}
.containerX div:nth-child(3) {
  background: blanchedalmond;
}
.containerX div:nth-child(4) {
  background: lightcoral;
  color: white;
}
.containerX div:nth-child(5) {
  background: cadetblue;
  color: white;
}


.containerZ {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

  border: 2px solid var(--gs0);
//  border-radius: 5px;
  height: 26px;
}

.containerZ div {
  scroll-snap-align: start;

  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11pt;
}
.containerZ div:nth-child(1) {
  background: hotpink;
  color: white;
}
.containerZ div:nth-child(2) {
  background: azure;
 color: black;
}
.containerZ div:nth-child(3) {
  background: blanchedalmond;
 color: black;
}
.containerZ div:nth-child(4) {
  background: lightcoral;
  color: white;
}

.containerY {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;

  border: 2px solid var(--gs0);
//  border-radius: 5px;
  height: 26px;
}

.containerY div {
  scroll-snap-align: start;

  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11pt;
}
.containerY div:nth-child(1) {
  background: hotpink;
  color: white;
}
.containerY div:nth-child(2) {
  background: azure;
 color: black;
}
.containerY div:nth-child(3) {
  background: blanchedalmond;
 color: black;
}
.containerY div:nth-child(4) {
  background: lightcoral;
  color: white;
}


.snapX {
	cursor:pointer;
}
*/

h6 {
color: rgba(255, 255, 255, 0.8);
font-family:Georgia;
font-size: 50px;
text-align: center;
//padding-top: 50px;
line-height: 60px;
text-shadow: 2px 2px #000;
}


/* OUTER CONTAINER ***************************************************/
.tcontainer {
  width: 100%;
  overflow: hidden; /* Hide scroll bar */
}
 
/* MIDDLE CONTAINER */
.ticker-wrap {
  width: 100%;
  padding-left: 100%; /* Push contents to right side of screen */
  background-color: #eee;
}

/* INNER CONTAINER */
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
  /* Basically move items from right side of screen to left in infinite loop */
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 30s;
}
.ticker-move:hover{
  animation-play-state: paused; /* Pause scroll on mouse hover */
}

/* ITEMS */
.ticker-item{
  display: inline-block; /* Lay items in a horizontal line */
  padding: 0 2rem;
}

/* WRAPPER ***************************************************/
.tickerv-wrap {
  background: #eee;
  box-sizing: content-box;
  height: 16px; /* Take note of this */
  overflow: hidden; /* Hide scrollbars */
  padding: 0px;
} 

/* TICKER ANIMATION */
@keyframes tickerv {
  0%   {margin-top: 0;}
  /* Quite literally -ve height of wrapper */
  25%  {margin-top: -20px;} /* 1 X 25 px */
  50%  {margin-top: -40px;} /* 2 X 25 px */
  75%  {margin-top: -60px;} /* 3 X 25 px */
  100% {margin-top: 0;} /* Back to first line */
}
.tickerv-wrap ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  animation-name: tickerv; /* Loop through items */
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1, 0, .5, 0);
}
.tickerv-wrap ul:hover {
  /* Pause on mouse hover */
  animation-play-state: paused;
}

/* ITEMS */
.tickerv-wrap ul li {
  font-size: 14px;
  line-height: 20px /* Same as wrapper height */
}



.push {
    -webkit-appearance:none;
    width:60px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
.push:checked {
    background: #abd;
}

.dropper{
	background:white;
	float: right;	
	vertical-align: top;
	margin-right:20px;
	width:150px;
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
	font-weight:normal;
	color:#333;
	cursor:default;
	padding:3px 3px 10px 0;
	line-height:normal;
	border:1px solid #ccc;
	overflow-y:auto;
	resize: vertical;
//	height:auto;
	min-height:80px;
}

.mpopup-content2A {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 800px;
	height:calc(97% + 15px);
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content1C {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 660px;
	height:350px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content0A {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 700px;
	height:500px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.mpopup-content1A {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 660px;
	height:400px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}


.stitle {
	font-family: verdana,arial,sans-serif;
	font-size:10pt;
color:#333;
//text-align: center;
line-height: 40px;
//text-shadow: 2px 2px #000;
background:#f5f5f5;
}


/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
	width: 835px; height: 380px;
	overflow: hidden;
	
	/*Time for some styling*/
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	border-radius: 5px;
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
	width: 2000px;
	/*This will give ample space to the last item to move
	instead of falling down/flickering during hovers.*/
}

.accordian li {
	position: relative;
	display: block;
	width: 40px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	/*If you hover on the images now you should be able to 
	see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}



/* Style the tab */
.taber {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.taber button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
  font-size: 12px;
}

/* Change background color of buttons on hover */
.taber button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.taber button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabercontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  max-width:100%;
  max-height:100%;
}

.datafield {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	height: 18px;
	width: 300px;
	padding: 4px 0px 4px 8px;
	margin-left:0px;
	margin-bottom:0px;
	color: #333;
	font-size: 10pt;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}

.registerfield {
	height: 18px;
	width: 300px;
	padding: 5px;
	margin-left:0px;
	margin-bottom:8px;
	color: #333;
	font-size: 10pt;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}

.passwordfield {
	height: 18px;
	width: 300px;
	padding: 5px;
	margin-left:0px;
	margin-bottom:8px;
	color: #333;
	font-size: 10pt;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}


.answerfield {
	font-family: Consolas, Calibri, Geneva, Tahoma, Verdana, Helvetica, sans-serif;
	height: 18px;
	width: 120px;
	padding: 4px 0px 4px 8px;
	margin-left:0px;
	margin-bottom:0px;
	color: #333;
	font-size: 10pt;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}

.urlfield {
	height: 18px;
	width: 420px;
	padding: 4px;
	margin-left:0px;
	margin-bottom:8px;
	color: #333;
	font-size: 14px;
	letter-spacing: 1px;
	font-variant: normal;
	line-height: normal;
	background: #fff;
	border: 1px solid #ccc;	
	border-radius: 5px;
}

/********************************************************************************/
/* The container <div> - needed to position the dropdown content */
.visral_dropdown {
    position: relative;
    display: inline-block;
}

/* Show the dropdown menu on hover */
.visral_dropdown:hover .visral_dropdown-content {
    display: block;
 }

/* Dropdown Content (Hidden by Default) */
.visral_dropdown-content {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
    display: none;
    position: absolute;
	margin: 0px;
	background: #fff;
	border: 1px solid #ccc;	
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:345;
	text-decoration:none;
	color:#666;
//	animation: mymove 2s;
	overflow-y:hidden;
}
@keyframes mymove {
  from {height: 0px;}
  to {height: 100px;}
}

/* Links inside the dropdown */
 .visral_dropdown-content a {
    color: #333;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .visral_dropdown-content a:hover {
	background: #B5CFD2;
	color: #666;
}


/* Links inside the dropdown */
 .visral_dropdown-content div {
    color: #333;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .visral_dropdown-content div:hover {
	background: #B5CFD2;
	color: #666;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Dropdown Content (Hidden by Default) */
.droptext {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	margin: 0 10px 1px -2px;
	padding:5px 8px 5px 8px;
	background: #f1f1f1;
	cursor: pointer;
	background: url(image/templatemo_button_01.png) no-repeat 0 0;
	border: none;
	color:#fff;
	letter-spacing: 1px;
	text-align:center;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	font-family: Calibri, Geneva, Helvetica, verdana,arial,sans-serif;
	font-size:11pt;
	letter-spacing: 1px;
    display: none;
    position: absolute;
	margin: 0px;
	background: #fff;
	border: 1px solid #ccc;	
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index:45;
}

/* Links inside the dropdown */
 .dropdown-content a {
    color: #666;
    padding: 6px 20px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
 .dropdown-content a:hover {
	background: #e9e9e9;
	color: #666;
}



.boxer{
	position: absolute;
	margin-top:0px;
	border: 1px solid #088;	
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	background: #fff;
}

#redbox{
  top: 80px;
  left: 80px;
  z-index: 2;
}

#bluebox{
  top: 40px;
  left: 40px;
  z-index: 1;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
	background-color: #fff;
	width: 100%;
	border-top: 1px solid #cfd5d7;
	position: absolute;
	left: 0;
}
#footer > div {
	width: 960px;
	margin: 0 auto;
	height:50px;
}


.footnote {
	clear: both;
	color: #6c6e69;
	font: 10pt verdana,arial,sans-serif;;
	text-align: center;
	text-shadow: none;
}

/* Style the tab */
.vtab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 20%;
  height: 300px;
}

/* Style the buttons that are used to open the tab content */
.vtab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 10px 14px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.vtab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.vtab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.vtabcontent {
	float: left;
	padding: 0px 12px;
//	border: 1px solid #ccc;
	width: 76%;
//	border-left: none;
	height: 75vh;//640px;
	border:none;
	overflow-y:auto;
}


#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
//border-bottom: 1px solid gray;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-right: 3px;
//border: 1px solid #778;
//border-bottom: none;
background: black;
}

#tablist li a:link{
color: white;
}

#tablist li a:visited{
color: white;
}

#tablist li a:hover{
color: red;
background: lightgrey;
//border-color: navy;
}

#tablist li a.current{
background: lightyellow;
}



	.demog {
		border:1px solid #C0C0C0;
		border-collapse:collapse;
		padding:5px;
	}
	.demog th {
		border:1px solid #C0C0C0;
		padding:5px;
		background:#F0F0F0;
	}
	.demog td {
		border:1px solid #C0C0C0;
		padding:5px;
	}


	.demog1 {
		border:1px solid #C0C0C0;
		border-collapse:collapse;
		padding:5px;
	}
	.demog1 th {
		border:1px solid #C0C0C0;
		padding:5px;
		color:#fff;
		background:#000;
	}
	.demog1 td {
		border:1px solid #C0C0C0;
		padding:5px;
	}


	.demog2 {
		border:1px solid #aaa;
		border-collapse:collapse;
		padding:5px;
	}
	.demog2 th {
		border:1px solid #aaa;
		padding:5px;
		color:#fff;
		background:#000;
	}
	.demog2 td {
		border:1px solid #aaa;
		padding:9px;
		background:#eee;
	}


h4 {
	color:#c23b41!important;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif!important;
	font-size:12pt!important;
	font-weight:normal;
//	letter-spacing: 1px;
	line-height:22px!important;
	margin:0px 0 0 0;
	text-transform:uppercase!important;
}


.clearview {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11pt;
}

.vtablinks {
//	color:#BCA944!important;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif!important;
	font-size:10pt!important;
//	line-height:26px!important;
//	margin:0px 0 0 0;
//	text-transform:uppercase!important;
}


.mpopup-content2X {
	font-family: verdana,arial,sans-serif;
	font-size:11pt;
	font-style:normal;
	position: relative;
	background-color: #ddd;
	margin: auto;
	padding: 0;
	width: 700px;
	height:500px;
	box-shadow: 0 4px 8px 0 rgba(11,11,11,0.2),0 6px 20px 0 rgba(11,11,11,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

.xframe {
	width:100%;
	height:100%;
//	-ms-zoom: 0.75;
//	moz-transform: scale(0.75);
//	moz-transform-origin: 0 0;
//	-o-transform: scale(0.75);
//	-o-transform-origin: 0 0;
}