/* http://woork.blogspot.com/2008/01/three-column-fixed-layout-structure.html */
/*
    bg blue: #073763, rbg: 7, 55, 99
    icon red: #ED1C24, rbg: 237, 28, 36
    icon orange: #FF6600, rbg: 255, 102, 00
    icon green: #22B14C, rbg: 34, 177, 76
    icon blue: #00A2E8, rbg: 0, 162, 232
    col red: #E06868, rbg: 224, 104, 104
    col yellow: #D9DD59, rbg: 217, 221, 89
    col orange: #FF7F27, rbg: 255, 127, 39
    col green: #71DF5B, rbg: 113, 223, 91
    col blue: #5793E2, rbg: 87, 147, 226
    -alt orange1: #FFCC00, rbg: 255, 204, 0 - more yellow
    -alt orange2: #FF9900, rbg: 255, 153, 0 - more orange
    header Text: #CCD5D9, rbg: 204, 217, 213
    leftNav ltBlue: #A6D1F9, rbg: 166, 209, 249
    leftNav red: #880015, rbg: 136, 0, 21
    leftNav orange: #FF7F27, rbg: 255, 127, 39
    leftNav green: #22B14C, rbg: 34, 177, 76
*/
/* PAGE FRAMEWORK */
* {margin: 0;}
html, body, form {height:100%; width: 100%;}

#wrapperOut {position:relative; width:100%; min-width:1000px; min-height:100%;}						/* Sticky Footer: padding-bottom = footer's height */					
	#pageOut {position:relative; width:100%; min-width:1000px; }	/* Sticky Footer: padding-bottom = footer's height */					
		#headOut {position:fixed; right: 0; z-index: 999; width:100%; min-width:650px; height:50px; background:#fff; border-bottom:1px solid #CCC;}		/* 100% wide Black Header; use to have border-bottom:1px solid #AAA; */		
			#headerOut {position:relative; min-width:650px; height:50px; margin:0px auto;}
				#headerLOut {position:relative; margin-left:10px; float:left; height:50px; text-align:left;}
				#headerROut {position:relative; margin-right:20px; float:right; height:50px; text-align:right; color:#073763;}
		#contentFullOut {position:relative; width:100%; background:#FFFFFF; padding:0px; margin:0px auto; clear:both; overflow:hidden;}
	
#wrapper {position:relative; width:100%; min-width:1000px; height: 100%; min-height:100%;}		/* Sticky Footer: padding-bottom = footer's height */					
	#page {position:relative; width:100%; min-width:1000px; height: 100%; min-height:100%; text-align:center;}			/* Sticky Footer: padding-bottom = footer's height */					
    #head {position:relative; width:100%; min-width:1000px; height:64px; background:#073763; border-bottom:2px solid #8EB4E3; z-index: 2;}		/* 100% wide Black Header; use to have border-bottom:1px solid #AAA; */		
      #header {position:relative; min-width:1000px; margin:0px auto;}
        #headerL {position:relative; padding-left:10px; float:left; width:250px; text-align:left;}
        /*#headerR {position:relative; padding-right:30px; top:26px; float:right; width:700px; text-align:right; color:#FFF;}*/
#headerR {
    position: relative;
    padding-right: 30px;
    top: 17px;
    float: right;
    width: 121px;
    text-align: right;
    color: #FFF;
}
    #contentNarrow {position:relative; width:600px; height: 100%; padding:0px; margin:0px auto; overflow:hidden;}
    #contentWide {position:relative; width:900px; min-width:900px; padding:0px; margin:0px auto; text-align:left;}
    #contentFull2 {position:relative; height: 100%; padding: 0px; margin:0px auto;}
    #contentFull {position:relative;}

#sidenav {
	height: 100%;
	width: 80px;
	position: relative;
	margin: auto auto auto 0px;
	z-index: 1;
	float: left;
	background-color: #eee;
	overflow-x: hidden;
	padding-top: 20px;
}
#sidenav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
}
#sidenav a:hover {color: #f1f1f1;}


#grid-container {
  display: grid;
  grid-template-columns: 80px auto; /*15vh*/
  grid-template-rows: 64px auto;
  grid-template-areas: "header header" "nav content";
  height: 100vh;
  overflow: none;
}

#grid-header {
  grid-area: header;
  background-color: #073763;
  position: sticky;
  min-height: 3.5rem;
  border-bottom:2px solid #8EB4E3;
}

#grid-nav {
  grid-area: nav;
  background-color: #eee;
}
#grid-nav a {
	padding: 6px 8px 6px 16px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
}
#grid-nav a:hover {color: #f1f1f1;}

#grid-content {
  grid-area: content;
  overflow-x: none;
  overflow-y: auto;
  min-height: calc(100vh - 64px);
}




















/* Sticky Footer: Opera Fix */
/*Opera Fix*/
body:before {
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px;
}
div.spacer {position:static; width:100%; height:71px; clear:both; border:none;} /* Solves an issue about container height */
div.spacer2 {clear:both; height:10px; display:block; border:none;} /* Solves an issue about container height */
div.mgrHeader {width:100%; height:50px; border-bottom:1px solid #CCC; background:#EAEEF6; padding-top:15px;}

#alert {position:absolute; top:150px; left:50%; margin-left:-200px; z-index:5;}
/* END PAGE FRAMEWORK */


/* REDEFINE HTML TAGS */
/*body {background-image:url('images/bg.png'); background-repeat:repeat-x; text-align: center; margin:0px auto; border:none; padding:0px;}*/
body {text-align:left; border:none; padding:0px; margin:0px auto;}
form {font-family:Calibri, Arial; font-size:16px; color:#000000; padding:0px; margin:0px;}
p {border:none; padding:0px 10px 16px 0px; margin:0px;}
p.modRight {font-size:14px; padding:0px 0px 5px 0px;}
p.modRightStrong {font-size:14px; font-weight:bold; padding:0px 0px 5px 0px;}

table {border:none; padding:3px; margin:0px; border-collapse:collapse;}
th {font-weight: bold; border:none; padding:3px; margin:0px;}
tr {border:none; padding:3px; margin:0px;}
td {border:none; padding:3px; margin:0px;}

/* NEW STYLES */
input, select, textarea{
	font-family: Helvetica, Arial; 
	font-size: small;
	padding: 10px 20px;
	margin: 1px 0px;
	/* height: 40px; */
	border: 1px solid #CCCCCC;	
	border-radius: 3px;
	box-sizing: border-box;
}
input.MedFields, select.MedFields, textarea.MedFields{
	font-family: Helvetica, Arial; 
	font-size: small;
	/* width: 200px; */
	padding: 8px 16px;
	margin: 0px;
	/* height: 20px; */
	border: 1px solid #CCCCCC;	
	border-radius: 3px;
	box-sizing: border-box;
}
input.SmFields, select.SmFields, textarea.SmFields{
	font-family: Helvetica, Arial; 
	font-size: x-small;
	/* width: 200px; */
	padding: 5px 10px;
	margin: 0px;
	/* height: 20px; */
	border: 1px solid #CCCCCC;	
	border-radius: 3px;
	box-sizing: border-box;
}

.formRow {
	padding:  0 0 10px 0;
}
.formRow p {
	padding: 0px;
	font-size:14px; 
	color:#666;
}



/* FLOATING LABELS */
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 0 0 13px;
  transition: all 200ms;
  opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}
/* FLOATING LABELS */





#loader {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(70,70,70, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
}
.loadingmessage { 
  top: 50%; 
  position: relative; 
}
.spinner { 
  width: 40px;
  margin: -100px auto 0;
  display: block;
}
/* END NEW STYLES */

.priceBox {
	clear: left; 
	display: inline-block; 
	height:250px; 
	width:200px; 
	border-radius: 5px; 
	background-color: #FFF; 
	border: #CCC solid 1px; 
	margin: 20px 10px 10px 10px;
	font-weight: bold;
}


h1 {font-size:28px; color:#186ab7; font-weight:normal; text-rendering:optimizeLegibility; padding:6px 0 6px 10px;}
h2 {font-size:20px; color:rgb(146, 190, 243); font-weight:normal; border-bottom:none; padding:3px 0 0 0; margin:0px;}
h2.line {border-bottom:solid 1px #808080; width:100%;} 
h3 {font-size:14px; color:#666; font-weight:normal; border-bottom:none; padding:2px 0 0 0; margin:0px;}

.m1 {font-size:14px; color:#1F497D; border-bottom:none; padding:0px; margin:none;}

a:link, a:visited {color:#558ED5; text-decoration:none;}
a:hover {text-decoration:none; color:#1F497D; text-decoration:underline;}
a.nav:link, a.nav:visited {font-size:18px; color:#CCD5D9; text-decoration:none;}
a.nav:hover {font-size:18px; color:#CCD5D9; text-decoration:underline;}
a.dark:link, a.dark:visited {font-size:18px; color:#333; text-decoration:none;}
a.dark:hover {font-size:18px; color:#666; text-decoration:none;}
a.darkSm:link, a.darkSm:visited {font-size:16px; color:#333; text-decoration:none;}
a.darkSm:hover {font-size:16px; color:#666; text-decoration:none;}
a.navOut:link, a.navOut:visited {font-size:18px; color:#333; text-decoration:none;}
a.navOut:hover {font-size:18px; color:#999; text-decoration:underline;}
a.foot:link, a.foot:visited {font-size:16px; color:#C6D9F1; text-decoration:none;}
a.foot:hover {font-size:16px; color:#FFFFFF; text-decoration:underline;}

a.logoLink {text-decoration:none; border:none; clear:none;}
a.logoLink:hover {text-decoration:none; border:none; cursor:auto;}
a.linkMed {font-size:14px;}
a.linkSm {font-size:10px;}

/* Links */
.Link1Medium {cursor:pointer;text-decoration:none; font-family:Calibri, Arial; color:#0069FF; font-size:16px;}
.Link1Small {cursor:pointer;text-decoration:none; font-family:Calibri, Arial; color:#0069FF; font-size:14px;}
.Link1XSmall {cursor:pointer;text-decoration:none; font-family:Calibri, Arial; color:#0069FF; font-size:10px;}
.LinkDisabledMedium {cursor:default; text-decoration:none; font-family:Calibri, Arial; color:#666666; font-size:16px;}
.LinkDisabledSmall {cursor:default; text-decoration:none; font-family:Calibri, Arial; color:#666666; font-size:14px;}
.LinkDisabledXSmall {cursor:default; text-decoration:none; font-family:Calibri, Arial; color:#666666; font-size:10px;}

img.embedTopLeft {float:left; vertical-align:text-top; border-right:10px solid #fff; border-bottom:10px solid #fff}
img.imageButton {cursor:pointer;}
/* REDEFINE HTML TAGS */




/* for ModalPopups */
.ModalPopupBG {background:Black; filter:alpha(opacity=40); opacity:0.4;}	/* Gray or #666699 */
.ModalPopup {width:300px; height:140px; background-color:#FFFFFF; border-width:1px; border-color:Black; border-style:solid; padding:0px;}	/* white or #FFFFDD */ 
.ModalPopupHeader {background-color:#8EB4E3; height:25px; text-align:left; vertical-align:middle; padding:2px 5px; font-weight:bold;}	/* Gray or #EEEECC */
.ModalPopupHeaderImg {float:left; width:30px; vertical-align:middle;}
.ModalPopupHeaderTxt {float:left; vertical-align:baseline; padding:5px;}
.ModalPopupBody {padding:15px;}
.ModalPopupControls {padding:0px;}
.ModalBackground {background-color:Black; filter:alpha(opacity=90);	opacity:0.8;}

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

/* Modal Content */
.modal-content {
  width: 80%;
  margin: auto;
  padding: 10px 20px;
  border: 1px solid #666;
  border-radius: 6px;
  text-align: left;
  background-color: #fefefe;
}

/* The Close Button */
.close {
  color: #333 !important;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999 !important;
  text-decoration: none;
  cursor: pointer;
}
/* End Modal Content */


/* TEXT STYLES */
/* Err Text */
.Err {color: #DD2121; font-size:16px;}
.ErrSm {color:#DD2121; font-size:14px;}

/* Header Text */
.Header1Large {font-family: Helvetica, Arial; color: #003399; font-size: 22px;}
.Header1Medium {font-family: Helvetica, Arial; color: #003399;	font-size: medium;}
.Header1Small {font-family: Helvetica, Arial; color: #003399; font-size: small;}
.Header1XSmall {font-family: Helvetica, Arial;	color: #003399;	font-size: x-small;}

/* Standard Content */
.ContentLarge {color: #333333;	font-size: 18px;}
.ContentMedium {color: #333333;	font-size: 16px;}
.ContentSmall {color: #333333; font-size: 14px;}
.ContentXSmall {color: #333333; font-size: 12px;}
.ContentLargeCBlue {color: #073763;	font-size: 18px;}
.ContentMediumVBlue {color: #073763;	font-size: 16px;}
.ContentLargeBlue {color: #186ab7;	font-size: 18px;}
.ContentMediumBlue {color: #186ab7;	font-size: 16px;}
.ContentH2 {font-size:24px; color:#186ab7;}
.blue {color: #186ab7;}	
.ltblue {color: #558ED5;}
.colorH {color: red;}
.colorM {color: orange;}
.colorL {color: green;}

/* Standard Content [Default: font-family:Calibri, Arial; font-size:16px; color:#000000; padding:none; margin:0px;] */
.Footer {color:#EEEEEE; font-size:11px;}  
.DataGrid {font-size:12px; width:960px; margin:0 auto;}  
.DataGrid tr {line-height:22px;}
.DataGrid input {font-size:12px;}
/* END TEXT STYLES */


@font-face {
  font-family: 'pword';
  font-style: normal;
  font-weight: 400;
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

input.mask {
  font-family: 'pword';
}

.hidden {
  display: none;
}

/* Btn1 Blue Buttons */
.btn1{
	display: inline-block;
	color:#FFF;					
	text-decoration: none;
	background-color: #00A2E8;	
	border:none !important;	
	cursor:pointer;
	border-radius:3px;			/* CSS3 */ 
	-moz-border-radius:3px;		/* Firefox */
	-webkit-border-radius:3px;	/* Safari and Chrome */
	-webkit-appearance: none;	/* iPad / Safari */
	border-collapse: collapse;
}
.btnXSmall {font-size:8px;	padding:2px 3px 3px 3px; width:40px; overflow:visible;}     /* width and overflow solve IE padding issue */
.btnSmall {font-size:14px;	padding:5px 10px 7px 10px; width:auto;overflow:visible;}
.btnLarge {font-size:16px;	padding:8px 15px; width:auto; overflow:visible;}
.btnXLarge {font-size:24px; padding:10px 15px; width:auto; overflow:visible;}
.btnXLargeAndWide {font-size:24px; padding:10px 50px; width:auto; overflow:visible;}
.btnJoin {font-size:20px; padding:8px 15px; margin: 5px 0px 0px 0px; width:auto; overflow:visible;}
.btnPriority {font-size:8px;	padding:4px 3px 4px 3px; width:20px; overflow:visible;}     /* width and overflow solve IE padding issue */
.btnH {background-color: red;}
.btnM {background-color: orange;}
.btnL {background-color: green;}
.btn1:hover {opacity:0.8;}	/* opacity:0.5;  -or- background-color: rgb(0, 197, 232);*/ 
/* END Btn1 STYLES */

/* START CIRCLE AVATARS */
.avatar-circle {
  width: 32px;
  height: 32px;
  display: inline-block;
  /* background-color: #A6D1F9; */
  vertical-align: middle;
  text-align: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.initials {
  position: relative;
  top: 6px; /* general rule: 25% of parent */
  font-size: 14px; /* general rule: 50% of parent */
  line-height: 14px; /* general rule: 50% of parent */
  color: #fff;
}
/* END CIRCLE AVATARS */

/* START MESSAGE BOX STYLES */
.message {
  width: 70%;
  padding: 10px;
  color: white;
  opacity: 1;
  display: inline-block;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.message.success {background-color: #4CAF50;}  /* rgb(183, 255, 185) */
.message.info {background-color: #2196F3;} /* rgb(124, 192, 248) */
.message.warning {background-color: #ff9800;} /* #ffca7b */
.message.critical {background-color: #f44336;}  /* #ff6161 */

.msgX {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.msgX:hover {
  color: black;
}
/* END MESSAGE BOX STYLES */