/*
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
*/

* {
 font-family:'Open Sans',Helvetica,Arial,Lucida,sans-serif;
/* font-family:Nunito,Gothamr,arial,helvetica,sans; */
 font-size:18px;
 margin:0; padding:0; 
 box-sizing:border-box; 
 -moz-box-sizing:border-box; 
 -webkit-box-sizing:border-box; 
 }
body.wait, body.wait * {cursor: wait !important;}

/* change placeholder color. Need to specify in seaprate lines */
::-webkit-input-placeholder	{color:#ccc;}
:-moz-placeholder			{color:#ccc;}
::-moz-placeholder			{color:#ccc;}
:-ms-input-placeholder		{color:#ccc;}

iframe {overflow:hidden; border:0;}

p {padding-top:1em; padding-bottom:0; margin-top:0;}
pre {font-family:monospace; color:white; background:cyan;}
img	 {border:none;}
img.right {float:right; margin:0 20px;}
.nav img:hover {cursor:pointer;}

ul, ol {margin-top:0; padding-top:0;}
ul li {color:#030; margin:0 0 0.5em -2em;}
ol li {color:#008; margin:0 0 1em -1em;}

body {background:#eee;}
#page {
 background:#EFF3F6;
 width:100%; max-width:1400px;
 margin:0 auto;
 overflow:hidden;
 border-collapse:collapse;
 }
#pgnav {
 background:#242A3A;
 width:250px; vertical-align:top;
 height:100vh;
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 }
#page .pgcontent {vertical-align:top;}
.np {display:none;}

nav {
 position: relative;
 color:#fff;
 background:#2A2F43;
 float:left;
 width:100%; max-width:250px;
 height:auto;
 margin:0 6px 0 0;
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 }
nav header {background:#091823; margin:0 0 20px 0; height:auto; text-align:center;}
nav div {cursor:pointer;}
nav div div:hover,nav div div.sel {background:rgb(0,0,0,0.5); border-left:4px solid #EB4D4A;}
nav div div table {width:auto; height:60px; background:none;}
nav td {padding:0 6px; color: #fff; background:none; vertical-align: middle; line-height:18px;}

.nav1 div {height: 60px; padding:0; border-left:4px solid #2A2F43; padding-left:6px;}
.navu {margin-top:50px; border-bottom:1px solid #444;}
.navu div {height:60px; padding:0; border-top:1px solid #444; border-left:4px solid #2A2F43;}
.nav2 {margin-top:50px;}
.nav2 div {height:60px; padding-left:50px; border-top:1px solid #444; border-left:4px solid #2A2F43;}

header {
 background:#fff;
 height:60px;
 padding:0 6px;
 }

header .nav {height:60px;}
header .nav table {height:100%;}
header .nav td {vertical-align:middle; padding:0 6px;}

header .hdr2 {height:60px; float:right; margin-right:1em;}
header .hdr2 table {height:100%;}
header .hdr2 td {vertical-align:middle; padding:0 0 0 12px; width:auto; max-width:200px; text-align:center;}
header .alert {width:24px!important; background:url(/images/bell.gif) center no-repeat; cursor:pointer;}
header .alerttxt {
 font-size:11px;
 color:#fff;
 background:red;
 border-radius:50%;
 font-weight:bold;
 display:block;
 text-align:center;
 width:18px;
 height:18px;
 padding:2px 0;
 margin:-18px -6px 0 0;
 }
 
img.usr {width:40px; height:40px; border-radius:50%;}
td.usr {font-size:12px; font-weight:bold;}

article {
 color:#000;
 background:#EFF3F6;
 padding:12px;
 font-size:18px;
 }
article h1 {font-size:24px;}
article p {font-size:16px; color:#888; padding:8px 0 4px 0;}
article .tip {font-size:smaller; color:#888;}

#srh {border-spacing:0; border:1px solid #ccc; margin:0; border-radius:12px; max-width:300px;}
#srh td:first-child {background:#fff; padding:0; height:auto; border-radius:12px 0 0 12px; width:100%;}
#srh td:nth-child(2) {background:#EB4D4A; padding:0 12px; height:auto; border-radius:0 12px 12px 0; width:40px; text-align:center; vertical-align:middle; cursor:pointer;}
#srh td:nth-child(2):hover {background:red;}

#srh td input[type=image] {background:none; outline:0; padding-top:4px;}
#srh input[type=text] {width:100%; color:#000; background:#fff; border:0; border-radius:0; padding:3px; font-weight: 300; border-radius:12px 0 0 12px;}

#srh2 {border-spacing:0; border:0; margin:3px 0 0 0; font-size:12px; float:right;}
#srh2 select {color:#000; background:#fff; width:140px; padding:2px; border:0; font-weight: 300; border:1px solid #eee;}

.list {display:inline-block; background:#fff; padding:6px; margin:0; width:70%; border:0;}
.list .listtbl {background:#eee; width:100%; margin-top:6px; border-spacing:1px;}
.listtbl th {font-size:16px; color:#fff; background:#EB4D4A; font-weight:300; height:50px;}
.listtbl th:nth-child(2) {width:100px;}
.listtbl th:nth-child(3) {width:50%;}
.listtbl th:nth-child(4) {width:60px;}

.listtbl td {font-size:14px; color:#444; background:#fff; height:50px; padding:0 6px; text-align:center;}
.listtbl td:first-child {font-size:16px; text-align:left;}
.listtbl table {border-collapse:collapse;}
.listtbl table td {padding:0;}

.listbtt {background:#EB4D4A; border:1px solid #fff; border-radius:8px;}
.listbtt:hover {background:red;
 transform: scale(0.9,0.9);
/* transform: rotate(20deg); */
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 }

.cf:before, .cf:after {content:" "; display:table;}
.cf:after {clear: both;}
.cf {zoom: 1;}	/* For IE 6/7 only, Include this rule to trigger hasLayout and contain floats. */

nav span img {float:right; margin-right:6px; display:none;}

input.btt {
    color: #fff; background: #EB4D4A;
    padding: 6px 30px;
    border: 0; border-radius: 6px;
	}
input.btt:hover {
 color:#fff; background:#f00;
 transform: scale(0.9,0.9);
 transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 }

fieldset legend {
 color: white;
 background: #000;
 font-size: 16px;
 font-weight: bold;
 padding: 0 9px;
 border: 1px solid #999;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 }

.edt fieldset {margin: 0; padding: 6px;}
fieldset.msg {font-size: 14px; font-weight: 300; border: 1px solid #000;
 -moz-border-radius: 9px;
 border-radius: 9px;
 -webkit-border-radius: 9px;
 }
.msg {color: #a00; font-size: 8pt;}

.new {
 display:inline-block;
 position:absolute;
 color: white; background: red;
 font-size: 9px; font-weight: bold;
 padding: 1px 2px;
 margin:0px 0 0 4px;
 border-radius: 2px;
 }

.tim {
 color: #888;
 font-size: 10px;
 }
#playlisttim {font-size:12px; color:#aaa;}

article input[type=text],textarea {
 color:#000; background:#fff; border:1px solid #ddd; border-radius:12px; padding:6px; width:300px; outline:0;
 }

#edtpg {
 width: 100%; height: 350px;
 background: #fff;
 border: none;
 outline: none;
 overflow: hidden;
 }

div.inactive0, div.inactive {
 color: #fff; background: #f00;
 font-size: 12px; font-weight: bold; font-style: italic;
 display: inline-block;
 padding: 0 7px 0 5px; margin-left: 6px;
 border-radius: 50%;
 cursor: help;
 }
div.inactive div, div.partial div {
 width: 200px;
 display: none;
 position: absolute;
 z-index: 7;
 margin-top: -30px;
 margin-left: 10px;
 }
div.inactive div div, div.partial div div {
 color: #000; background-color: #F2F2F2;
 font-size: 12px; font-weight: normal;
 text-align: center;
 display: inline-block;
 position: relative;
 float: left;
 vertical-align: top;
 padding: 10px 18px; margin: 5px 45px 5px 20px;
 border-radius: 5px;
 box-shadow: 0 0 6px #B2B2B2;
 }
.frmmsg {
	font-size:14px;
    width: 90%;
    padding: 6px 0;
    margin: 8px 0;
	text-align:center;
    border: 1px solid #ff0000;
	border-radius: 5px;
	}

label.radio {
 display: inline-block!important;
 position: relative;
 padding: 3px 0 3px 20px;
 margin:0;
 font-size:14px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 cursor: pointer;
 }
label.radio input[type=radio] {	 /* Hide the browser's default radio button */
 position: absolute;
 opacity: 0;
 cursor: pointer;
 }
label.radio span {	 /* Create a custom radio button */
 position: absolute;
 display: block;
 top: 0; left: 0;
 height: 16px; width: 16px;
 margin:-8px 2px 2px 2px;
 background-color: #eee;
 border:2px solid #aaa;
 border-radius: 50%;
 }
label.radio:hover input ~ span {background-color: #fff; border:2px solid #EB4D4A;}	/* On mouse-over, add a grey background color */
label.radio input:checked ~ span {background-color:#fff; border:2px solid #EB4D4A;}	   /* When the radio button is checked, add a blue background */
label.radio span:after {	 /* Create the indicator (the dot/circle - hidden when not checked) */
 content: "";
 position: absolute;
 display: none;
 }
label.radio input:checked ~ span:after {display: block;}	 /* Show the indicator (dot/circle) when checked */
label.radio span:after {		/* Style the indicator (dot/circle) */
 top: 2px; left: 2px;
 width: 8px; height: 8px;
 border-radius: 50%;
 background:#EB4D4A;
 }

table label.chkbox0 {
 display:block; width:16px; height:16px;
 position: relative;
 font-size:14px; font-family:Verdana,Arial;
 padding: 0;
 margin: 0 auto;
 cursor: pointer;
 }
table label.chkbox0 input[type=checkbox] {
 position: absolute;
 opacity: 0;
 }
table label.chkbox0 span {/* <-- style the artificial checkbox */
 display: inline-block; width:16px; height:16px; 
 position:absolute; top:2px; left:-2px;
 font-size:14px;
 border: 2px solid #E1E1E1; border-radius:3px;
 }
table label.chkbox0 input[type=checkbox]:checked + span:before {/* <-- style its checked state..with a ticked icon */
 color:#fff;
 background:#EB4D4A;
 content: '✔';
 line-height:1;
 position: absolute;
 padding:0px 3px 0px 2px;
 top:-2px; left:-2px;
 }
table label.chkbox0 input[type=checkbox]:disabled+span {color:#ccc; border: 2px solid #ccc; background:#fcfcfc;}

.brw1 {background:#aaa; padding:0; border-spacing:1px; border-collapse:separate;}
.brw1 th {font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#000; background-color:#cf9; font-weight:bold; border:0; padding:0 5px;}
.brw1 td,.brw1a {font-family:Verdana,Arial,sans-serif; font-size:11px; color:#006; background-color:white; padding:4px; max-width:250px;
   overflow: hidden;
/* white-space:nowrap; */
   text-overflow: ellipsis;
   max-height: 99px;
   }
.brw1 td.ch {font-family:Verdana,Arial,sans-serif; font-size:14px;}
.brw1 tr.alert td {color:red;}
.brw1 tr:hover td {background:#f8f8ff;}
.brw1b {font-family:Verdana,Arial,sans-serif; font-size:12px; color:#006; background-color:#eee; padding-left:5px; padding-right:5px;}
.brw1 a:link,.brw1 a:visited,.brw a:active,.brw a:hover,.brw1lnk {font-family:Arial,sans-serif; font-size:10px; color:#00c; text-decoration:none; font-weight:normal;}
.brw1 a:Hover {text-decoration:none; color:#090;}
.brw1 a.ch:link,.brw1 a.ch:visited,.brw a.ch:active,.brw a.ch:hover {font-family:Verdana,Arial,sans-serif; font-size:14px; color:#00c; text-decoration:none; font-weight:normal;}
.brw1 a.ch:Hover {text-decoration:none; color:#090;}
.brw1 th div a:link, .brw1 th div a:visited, .brw1 th div a:hover {color:#666;}
.brw1 th img {padding-top:1px;}
.brw1 td.num {text-align:right; padding-left:5px; padding-right:5px;}
.brw1 td div {color:#999; margin-top:4px;}
.brw1 td div.memo {font-family:Verdana,Arial,sans-serif; font-size:11px; color:#006; background-color:white; padding:0; margin:0; max-width:250px;
   text-overflow: ellipsis;
   max-height: 99px;       /* fallback */
   }
.brw1 input[type="button"] {padding:2px 0px; min-width:48px; max-width:50px; text-align:center;}

@media (max-width:480px) {
header .hdr2 {margin-right:0;}
nav {position:absolute; z-index:10; width:90%; max-width:250px; margin-left:-300px; top:0; left:0;}
nav span img {display:inline-block;}
#pgnav {width:0;}

article {padding:6px;}
.list {width:100%; border:0; padding:0; background:#EFF3F6;}
.list th {font-size:14px;}
.list td {font-size:14px;}
#srh {width:100%;}
#srh input[type=text] {width:100%;}
}