@CHARSET "UTF-8";

html, body { margin: 0; padding: 0; color: black; font-family: Roboto, sans-serif; font-weight: 300; height: 100%; }

a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}	

p { margin: 0 10px 20px 10px; }

.bold { font-weight: bold; }
.center { text-align: center; }

.error { color: red; text-align: center; font-weight: bold; padding-top: 10px; }
.error a { color: red; }
.success { color: green; text-align: center; font-weight: bold; padding-top: 10px; }
.subtext { font-size: 11px; color: #666; }
.confirmation { font-size: 17px; color: #666; }
.required { color: red; padding-left: 1px; }

.flex { display: flex; }

#logo-container { height: 90px; text-align: center; padding-bottom: 25px; padding-top: 45px; }

#panel-outer { background-color: white; padding: 3px; width: 450px; }
#panel-inner { border: 2px solid transparent; }

#steps { width: 100%; height: 51px; border-bottom: 1px solid transparent; }
#steps td { padding: 0; color: transparent; font-size: 14px; font-weight: 400; vertical-align: middle; white-space: nowrap; }
#steps td.step.selected { background-color: transparent; color: white; }
#steps .arrow-container { float: left; width: 27px; overflow: hidden; height: 50px; margin-right: 10px; }
#steps .arrow-container.left { background-color: transparent; }
#steps .arrow { border: 1px solid transparent; transform: rotate(45deg); margin-left: -25px; margin-top: 4px; width: 40px; height: 40px; }
#steps .arrow-container.right .arrow { background-color: transparent; }
#steps .arrow-container.left .arrow { background-color: white; }

#content-outer { background-color: #f3f5f8; position: fixed; top: 0; bottom: 65px; width: 100%; overflow-y: scroll; }
#content-inner { background-color: white; width: 800px; border-left: 1px solid #cfcfd0; border-right: 1px solid #cfcfd0; margin: 0 auto; min-height: 100%; }
#header { margin-bottom: 50px; border-bottom: 2px solid #aaa; position: relative; }
#header img { margin: 20px; }

#narrow-header { font-size: 24px; text-align: center; margin-bottom: 35px; font-weight: 400; }
#narrow-container { width: 400px; margin: 0 auto; text-align: center; } 
#narrow-container input { width: 70%; }
#narrow-account { border-top: 1px solid #aaa; margin: 25px 12px; padding-top: 25px; font-weight: 400; color: #666;  }

input[type="text"], input[type="password"], select { display: block; width: 100%; margin: 0 auto 12px auto; font-size: 15px; border: 1px solid #999; color: #666; padding: 6px; border-radius: 6px; box-sizing: border-box; }
.dark-button { text-align: center; width: 150px; background-color: transparent; color: white; font-size: 15px; border-radius: 6px; padding: 6px; display: block; margin: 25px auto 0 auto; cursor: pointer; }
.light-button { text-align: center; height: 30px; width: 122px; background-color: white; color: transparent; font-size: 13px; border-radius: 15px; margin: 5px 0; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }

.dark-link { text-decoration: none; color: transparent; }
.dark-link:hover { text-decoration: underline; }

#header-menu { position: absolute; top: 0; right: 5px; z-index: 99; }

#header-menu a { text-decoration: none; }

#help #header-menu { display: none; }


#form-outer {
	background-color: white;
	height: 100%;
	color: #666;
	font-size: 16px;
    line-height: 22px;   
}


#form-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow-y: scroll;
}


#form-inner {
	position: relative;
	background-color: white;
	width: 1016px;
	min-width: 1016px;
	box-shadow: 5px 3px 44px rgba(0, 0, 0, 0.16);
	display: flex;
	margin: 50px auto 80px auto;
}

.form-sides {
	position: relative;
}

#form-outer #copyright {
	position: absolute;
	bottom: -40px;
	width: 100%;
	font-size: 12px;
	line-height: 18px;
	color: #707986;
	z-index: 2;
	text-align: center;
}

#form-outer #copyright a {
	text-decoration: none; 
	color: #f16722;
}

#form-outer #copyright a:hover {
	text-decoration: underline; 
	cursor: pointer;
}

#form-left, #form-right {
	position: relative;
	width: 50%;
	min-height: 644px;
}

#form-left {
	display: flex;
	justify-content: center;
	align-items: center;
	max-height: 90%;
	overflow-y: auto;
}

#form-left > div {
	/* max-height: 90%; */
	overflow-y: auto;
}

#form-right {
	position: absolute;
	right: 0;
	top: 0;
	background: white no-repeat top right;
	height: 100%;
	background-size: cover;
}

#form-content {
	text-align: center;
	margin: 30px 0;
	width: 100%;
	padding: 0 70px;
	margin-right: 16%;
}

#form-logo-container {
	margin-top: 75px;
	margin-bottom: 35px;
	text-align: center;
}

#form-logo-container img {
	max-width: 100%;
	max-height: 75px;
}

#reseller-logo-container {
	margin-bottom: 20px;
	text-align: center;
	
}

#reseller-logo-container img {
	max-width: 100%;
	margin-bottom: 15px;
}

#reseller-logo-container .caption {
	font-size: 22px;
	font-style: italic;
	font-weight: bold;
	color: #333;
}

.wide-form #form-container {
	display: block;
}

.wide-form #form-left {
	width: 100%;
}

.wide-form #form-right {
	display: none;
}

.wide-form #form-content {
	text-align: left;
}

.wb-info {
	margin-right: 50px;
	padding-top: 10px;
	font-size: 14px;
}

.wb-info .large {
	font-weight: 500;
	font-size: 30px;
}

.wb-items {
	display: flex;
	flex-wrap: wrap;
}

.wb-item {
	padding-top: 20px;
}

.wb-item:nth-child(odd) {
	width: 15%;
}

.wb-item:nth-child(even)  {
	width: 85%;
}

.wb-item-header {
	font-size: 22px;
	margin-bottom: 10px;
}

.wb-buttons {
	margin-top: 25px;
	display: flex;
	justify-content: center;
}

.wb-buttons img {
	width: 210px;
}


/*
*/

#form-inner input[type="text"],
#form-inner input[type="password"],
#form-inner select {
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
	font-size: 13px;
	border: 1px solid #dadfe7;
	color: #666;
	padding: 12px 8px;
	border-radius: 4px;
	box-sizing: border-box;
	height: 42px;
	background-color: white;
}

#form-inner .subtext { margin-top: 20px; font-size: 13px; }
#form-inner a { text-decoration: none; color: #f16722; }
#form-inner a:hover { text-decoration: underline; }
#form-inner .error a, #form-inner .error a:hover { color: #2569c8; text-decoration: underline; }

#form-header {
	font-size: 16px;
	margin-bottom: 35px;
	font-weight: 400; 
	text-align: center;
	color: #777;
	line-height: 22px;
	font-weight: bold;
}

#form-success, #form-fail {
	font-size: 22px;
	font-weight: bold;
	color: #218c0a;
	margin-bottom: 15px;
}

#form-fail {
	color: #f16722;
}

#account-footer {
	border-top: 2px solid #ccc;
	padding-top: -10px;
	margin: 70px auto 0 auto;
}

.name-step.resellerLogo #account-footer {
	margin-top: 15px
}

.name-step.resellerLogo #form-logo-container {
	margin-bottom: 25px
}

.gradient-btn {
	border: none;
	border-radius: 8px;
	text-align: center;
	width: 175px;
	margin-top: 20px;
	cursor: pointer;
	font-size: 12px;
	font-family: arial, helvetica, sans-serif;
	padding: 10px;
	text-decoration: none;
	display: inline-block;
	color: #fff;
	background-color: #52a0fd;
	background-image: linear-gradient(#64b5ff 0%, #297ccf 100%);
}

.gradient-btn:hover {
/*  background-color: #2084FC;
	background-image: linear-gradient(#2084FC 0%, #1d539e 100%); */
 /*
background-image: -webkit-gradient(linear, left top, left bottom, from(#2084FC), to(#1d539e));
 background-image: -webkit-linear-gradient(top, #2084FC, #1d539e);
 background-image: -moz-linear-gradient(top, #2084FC, #1d539e);
 background-image: -ms-linear-gradient(top, #2084FC, #1d539e);
 background-image: -o-linear-gradient(top, #2084FC, #1d539e);
 background-image: linear-gradient(to bottom, #2084FC, #1d539e);
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2084FC, endColorstr=#1d539e);
 */
}