﻿<style>
a, a:visited{
	color:#0078D7;
	text-decoration:none;
	cursor:pointer;	
}
.error {
	color: red;
	font-size: 13px;
	height:15px;
	padding-bottom:5px;
}
.title {
	padding-bottom: 40px;
	font-size: 38px;
	letter-spacing: 2px;
	line-height: 32px;
	text-align: left;
}
.section {
	font-size: 18px;
	line-height: 20px;
	text-align: left;
}
#container	{
	padding: 25px 20px 25px 20px;
}
* {
	box-sizing: border-box;
}
.row:after {
	content: "";
	clear: both;
	display: block;
}
[class*="col-"] {
	float: left;
	width: 100%;
}
input[type=text], [type=password], [type=email], [type=number] {
	height: 50px !important;
	border: 2px silver solid;
	padding-left: 5px;
	font-size: 15px;
}
.header {
	background-color: #0078D7;
	color: #FFF;
	height: 50px;
}
.focus {
	border: 2px #0078D7 solid;
}
.submit_btn {
	width: 100%;
	height: 40px;
	background-color: #0078D7;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	-webkit-appearance: button;
}
.cancel_btn {
	width: 100%;
	height: 40px;
	background-color: #C0C0C0;
	border: none;
	color: #000000;
	cursor: pointer;
	font-size: 15px;
	-webkit-appearance: button;
}
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -135px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 30px;
    font-size: 17px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 30px; opacity: 1;}
}
@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {top: 30px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}
@keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0; opacity: 0;}
}
@media (orientation: portrait){
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -135px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 100px;
    font-size: 17px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {top: 0px; opacity: 0;} 
    to {top: 100px; opacity: 1;}
}
@keyframes fadein {
    from {top: 0px; opacity: 0;}
    to {top: 100px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {top: 100px; opacity: 1;} 
    to {top: 0px; opacity: 0;}
}
@keyframes fadeout {
    from {top: 100px; opacity: 1;}
    to {top: 0px; opacity: 0;}
}
}
@media (orientation: landscape){
.col-sm-1 {
	width: 8.33%;
}
.col-sm-2 {
	width: 16.66%;
}
.col-sm-3 {
	width: 25%;
}
.col-sm-4 {
	width: 33.33%;
}
.col-sm-5 {
	width: 41.66%;
}
.col-sm-6 {
	width: 50%;
}
.col-sm-7 {
	width: 58.33%;
}
.col-sm-8 {
	width: 66.66%;
}
.col-sm-9 {
	width: 75%;
}
.col-sm-10 {
	width: 83.33%;
}
.col-sm-11 {
	width: 91.66%;
}
.col-sm-12 {
	width: 100%;
}
.spacer {
	padding:20px 0px 20px 0px
}
.footer {
	height:50px; width:100%; 
	padding-left:25px; padding-right:25px; 
	font-size:.85em; 
	display: flex; align-items:center; 
	background-color:#000000; color:#ffffff;
}
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -135px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 75px;
    font-size: 17px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 75px; opacity: 1;}
}
@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 75px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {top: 75px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}
@keyframes fadeout {
    from {top: 75px; opacity: 1;}
    to {top: 0; opacity: 0;}
}
}
@media only screen and (min-width: 768px) {
/* For tablets: */
#container	{
	padding: 75px 50px 25px 50px;
}
input[type=text], [type=password], [type=email], [type=number] {
	height: 50px !important;
	border: 2px silver solid;
	padding-left: 5px;
	font-size: 15px;
}
.col-m-1 {
	width: 8.33%;
}
.col-m-2 {
	width: 16.66%;
}
.col-m-3 {
	width: 25%;
}
.col-m-4 {
	width: 33.33%;
}
.col-m-5 {
	width: 41.66%;
}
.col-m-6 {
	width: 50%;
}
.col-m-7 {
	width: 58.33%;
}
.col-m-8 {
	width: 66.66%;
}
.col-m-9 {
	width: 75%;
}
.col-m-10 {
	width: 83.33%;
}
.col-m-11 {
	width: 91.66%;
}
.col-m-12 {
	width: 100%;
}
.spacer {
	padding:80px 0px 20px 0px;
}
.footer {
	position:fixed; bottom:0px; 
	height:50px; width:100%; 
	padding-left:25px; padding-right:25px; 
	font-size:.85em; 
	display: flex; align-items:center; 
	background-color:#000000; color:#ffffff;
}
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -135px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 75px;
    font-size: 17px;
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 75px; opacity: 1;}
}
@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 75px; opacity: 1;}
}
@-webkit-keyframes fadeout {
    from {top: 75px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}
@keyframes fadeout {
    from {top: 75px; opacity: 1;}
    to {top: 0; opacity: 0;}
}
}
@media only screen and (min-width: 1280px) {
/* For desktop: */
#container	{
	padding: 75px 50px 25px 50px;
}
input[type=text], [type=password], [type=email], [type=number] {
	height: 50px !important;
	border: 2px silver solid;
	padding-left: 5px;
	font-size: 15px;
}
.col-1 {
	width: 8.33%;
}
.col-2 {
	width: 16.66%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.33%;
}
.col-5 {
	width: 41.66%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.33%;
}
.col-8 {
	width: 66.66%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.33%;
}
.col-11 {
	width: 91.66%;
}
.col-12 {
	width: 100%;
}
.spacer {
	padding:80px 0px 20px 0px
}
.footer {
	position:fixed; bottom:0px; 
	height:50px; width:100%; 
	padding-left:25px; padding-right:25px; 
	font-size:.85em; 
	display: flex; align-items:center; 
	background-color:#000000; color:#ffffff;
}
}
</style>