/* some reset styles.  feel free to add your own */
body {
	margin: 0px;
	padding: 0px;
	font-family: 'Okta Neue', sans-serif;
	/* make Open-Sans from google fonts be the default font */
}

header {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	width: 100%;
	height: auto;
	background: rgba(0, 0, 0, 0.7);
	padding: 10px 0px;
}

header img.logo {
	display: block;
	margin: 0px auto;
	height: 40px;
}

.main {
	position: relative;
	min-height: 100vh;
	background: url(../media/login-bgrd.jpeg) no-repeat 50% fixed;
	background-size: cover;
}

.mainContent {
	min-height: 100vh;
}

.mainContent.withHeader {
	padding-top: 60px !important;
}

.loginbox {
	background: #3d3d3d;
	padding: 90px 20px 20px 20px;
	margin: 0px 20px 20px 20px;
	border-radius: 3px;
}

.signUpLink {
	text-align: right;
	padding-bottom: 50px;
}

.signUpLink a {
	color: white;
	text-decoration: none;
	font-size: 13px;
}

.leftIcons {
	display: none;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translate(0, -50%);
}

.leftIcons .box {
	position: relative;
	width: 83px;
}

.leftIcons .box.selected::after {
	content: '';
	position: absolute;
	left: 0px;
	top: 0px;
	width: 6px;
	height: 100%;
	background-color: #3498db;
}

.leftIcons .box img {
	margin: 5px 0px 0px 30px;
}

.leftIcons .box p {
	margin: 0px;
	text-align: center;
	font-size: 10px;
	color: #b6b6b6;
}

.leftIcons .box.login {
	margin-bottom: 20px;
}

.leftIcons .box.login.selected p,
.leftIcons .box.apps.selected p {
	color: #b6b6b6;
}

.orangeLogoBox {
	display: none;
	position: absolute;
	left: 83px;
	top: -10px;
	z-index: 1;
	width: 387px;
	height: calc(100% + 20px);

	background: #c45326;
	/* Old browsers */
	background: -moz-linear-gradient(-45deg, #c45326 0%, #da804a 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #c45326 0%, #da804a 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #c45326 0%, #da804a 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c45326', endColorstr='#da804a', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
}

.orangeLogoBox .content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: white;
}

.orangeLogoBox .content h4 {
	margin: 30px 0px 5px 0px;
	font-size: 32px;
	font-weight: normal;
}

.orangeLogoBox .content p {
	margin: 0px;
	white-space: nowrap;
	font-size: 18px;
}

#login-form .inputContainer {
	margin-bottom: 20px;
}

.inputContainer input,
.inputContainer select {
	display: block;
	width: 100%;
	padding: 10px;
	/* margin-bottom:20px; */
	box-sizing: border-box;
	background-color: white;
	border: 1px solid #3498db;
	border-radius: 4px;
	font-family: 'Okta Neue';
}

.inputContainer input:focus,
.inputContainer select:focus {
	outline: none;
	border: 1px solid #3498db;
	background-color: #686868;
	color: white;
	font-family: 'Okta Neue';
}

.inputContainer input[type="radio"] {
	width: auto;
	display: inline;
	font-family: 'Okta Neue';
}

#login-form .btnLogin {
	display: inline-block;
	width: 48px;
	border: none;
	outline: none;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}

#login-form .btnLogin:focus {
	outline: none;
	border: 0px;
}

#login-form .btnLogin:hover {
	text-shadow: 0px 0px 10px black;
	filter: drop-shadow(0px 3px 5px gray);
	cursor: pointer;
}

#login-form a {
	font-size: 13px;
	color: white;
	text-decoration: none;
}


.mobileOrangeBox {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 10px 20px;


	background: #3d3d3d;
	/* Old browsers */
	background: -moz-linear-gradient(-45deg, #3d3d3d 0%, #3d3d3d 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #3d3d3d 0%, #3d3d3d 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #3d3d3d 0%, #3d3d3d 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d3d3d', endColorstr='#3d3d3d', GradientType=1);
	/* IE6-9 fallback on horizontal gradient */
}

.mobileOrangeBox img {
	height: 35px;
}



.iconContent {
	min-width: 300px;
	min-height: 300px;
	padding-top: 100px;
	padding-left: 100px;
}
.icon1 {
	padding-top: 0px;
}

.icon2 {
	padding-top: 0px;
}
.iconBox {
	display: inline-block;

	padding: 15px 12px;
	margin-right: 10px;
	text-align: center;
	color: white;
	font-size: 13px;
}

.iconBox.orange {
	background-color: #303030;
}

.iconBox.orange:hover {
	box-shadow: 0px 0px 3px #3d3d3d;
	transform: scale(1.03);
}

.iconBox.grey {
	background-color: #939393;
}




/* START Registration page */
.registerBox {
	max-width: 800px;
	margin: 0px auto;
	padding: 20px 20px 40px 20px;
	background: #303030;
	text-align: center;
	border-radius: 25px
}

.registerBox h3 {
	font-weight: normal;
	padding-bottom: 20px;
}

.registerBox form {
	max-width: 350px;
	margin: 0px auto;
}

.registerBox form .inputContainer {
	margin-bottom: 15px;
}

.registerBox form .errorMessage {
	text-align: left;
}

.button {
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	font-size: 17px;
	font-weight: normal;
	background-color: #4caf50;
}

.button:hover {
	background-color: #45a049;
	cursor: pointer;
}

.button:disabled,
.button:disabled:hover .button[disabled],
.button[disabled]:hover {
	background-color: gray;
	cursor: not-allowed;
}

.registerSpacer {
	height: 20px;
}

.register.mainContent {
	padding: 0px 15px;
}

/* END Registration page */








/* misc */
.center {
	text-align: center;
}

.errorShadow {
	border: 1px solid red !important;
}

.errorMessage {
	font-size: 11px;
	color: red;
}

.errorText {
	font-size: 12px;
	color: red;
}

.padTop5 {
	padding-top: 5px;
}

.infoText {
	padding-bottom: 10px;
}


.animate {
	-webkit-transition: all 500ms cubic-bezier(0.050, 0.840, 0.430, 1);
	-webkit-transition: all 500ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-moz-transition: all 500ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-o-transition: all 500ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	transition: all 500ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
}

.animateFast {
	-webkit-transition: all 370ms cubic-bezier(0.050, 0.840, 0.430, 1);
	-webkit-transition: all 370ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-moz-transition: all 370ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-o-transition: all 370ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	transition: all 370ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
}

.animateSlow {
	-webkit-transition: all 2800ms cubic-bezier(0.050, 0.840, 0.430, 1);
	-webkit-transition: all 2800ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-moz-transition: all 2800ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-o-transition: all 2800ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	transition: all 2800ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
}

.animateSuperSlow {
	-webkit-transition: all 200000ms cubic-bezier(0.050, 0.840, 0.430, 1);
	-webkit-transition: all 200000ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-moz-transition: all 200000ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	-o-transition: all 200000ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
	transition: all 200000ms cubic-bezier(0.050, 0.840, 0.430, 1.020);
}

.animateBounce {
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}