:root {
	--black: #031016;
	--white: white;
	--white-2: #FAFAFA;
	
	--primary-1: #dbc078;
	--primary-1-bright: #dbc078;
	--primary-1-dark: #c88233;
		
	--primary-2: #0a3042;
	--purple-bright: #561B8C;
	--purple-soft: #A37ACE;
	--purple-light: #EBDEF9;
	
	--primary-2-soft: 	;
	--primary-2-light: #779AC4;
	--primary-2-bright: blue;
	
	--green: #4CA88E;
	--green-bright: #4CA88E;
	--green-soft: #A8DBD1;
	
	--red: #D94E4C;
	--pink-cool: #FF97A6;
	--pink-soft: #FFC2CE;
	--pink-light: #FFF0F3;
	--red-soft: #C80F5C;
	
	--gray: gray;
	--gray-mild: #AAA;
	--gray-light: #EAE9E8;
	--gray-cold: #ddd;
	--gray-soft: #ccc;
	--gray-dark: #555;
	--gray-dark-2: #333;
	
	--blue-light: #f1f5fa;  
	
	--yellow: #F0E05C;
	--yellow-cool: #F0EA7B;
	--yellow-soft: #F6F2AA;
	--yellow-light: #FCFBE2
}

body {
/* 	font-family: 'Inter'; */
	height: 100vh;
	background-color: var(--primary-2-soft);
	background: rgb(24,110,150);
	background: radial-gradient(circle, rgba(24,110,150,1) 0%, var(--primary-2-soft) 20%,  var(--primary-2) 80%);
	color: var(--white);
	overflow: hidden;
}

h1 {
	margin: 0;
}

#signin-container {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.aligner-container {
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-content: center;
	align-items: center;
}

.button {
	border: 1px solid var(--primary-2);
	border-radius: 3px;
	color: var(--primary-2);
	background-color: var(--white);
	cursor: pointer;
	text-align: center;
	transition:all .3s ease-in-out;
}

.button-primary {
	background: var(--primary-2) !important;
	border-color: var(--primary-2) !important;
	color: var(--white) !important;
}

.button:hover, .button-primary:hover {
	background: var(--primary-1-bright) !important;
	border-color: var(--primary-1-bright) !important;
	color: var(--white);
}

#sign-in.auth-container.main-container {
	background-color: #fff;
	border-color: #ddd #ddd #d8d8d8;
	box-shadow: 0 2px 0 hsla(0, 0%, 69%, .12);
}

#sign-in {
	border-radius: 3px;
	border-style: solid;
	border-width: 1px;
	color: var(--primary-2);
	font-size: 14px;
	font-weight: 400;
	height: auto;
	line-height: 1.4;
	margin: 8px auto 8px;
	min-width: 300px;
	overflow: auto;
	position: relative;
	width: 400px;
}

#sign-in input[type=text]:focus, #sign-in input[type=password]:focus {
	box-shadow: 0 0 8px #80c4ff;
}

#sign-in .auth-header {
	border-bottom: 1px solid #ddd;
	padding: 30px 90px 75px;
	position: relative;
	-moz-transition: padding-bottom .4s;
	-webkit-transition: padding-bottom .4s;
	transition: padding-bottom .4s;
	z-index: 10;
}

#sign-in .form-fieldset:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

#sign-in.no-beacon .auth-header {
	padding-bottom: 30px;
}

#sign-in.no-beacon .auth-content {
	padding-top: 20px;
}

#sign-in .beacon-container {
	bottom: -42px;
	height: 85px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	width: 85px;
}

#sign-in .auth-org-logo {
	display: block;
	margin: 0 auto;
	max-height: 80px;
	max-width: 220px;
}

#sign-in .auth-content {
	padding: 60px 42px 20px;
	-moz-transition: padding-top .4s;
	-webkit-transition: padding-top .4s;
	transition: padding-top .4s;
}

#sign-in .auth-content .auth-content-inner {
	position: relative;
}

#sign-in .form-theme {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 20px;
}

#sign-in .siw-main-view .clearfix:before {
	content: "";
	height: 102%;
	visibility: visible;
}

#sign-in .form-head {
	font-size: 16px;
	line-height: 1.6;
	margin-top: 10px;
	text-align: center;
	text-transform: none;
}

#sign-in .form-info-container{
	margin-bottom:10px;
}
#sign-in .form-fieldset {
	word-wrap: break-word;
	display: inline-block;
	height: auto;
	margin-bottom: 15px;
}

#sign-in .form-fieldset {
	display: block;
}

#sign-in .siw-main-view .siw-main-body .form-content .form-label {
	padding-right: 0;
}

#sign-in.auth-container .form-label {
	color: var(--gray);
	font-weight: 600;
}

#sign-in .form-label {
	box-sizing: border-box;
	color: #5e5e5e;
	font-weight: 700;
	line-height: 16px;
	padding: 7px 10px 7px 0;
	width: 38%;
}

#sign-in .form .form-label, #sign-in .form input, #sign-in .form label,
	#sign-in .form textarea {
	font-size: 13px;
}

#sign-in .form-label-top .form-input, #sign-in .form-label-top .form-label
	{
	width: 100%;
}

#sign-in .form-input, #sign-in .form-label {
	float: left;
}

#sign-in.auth-container .form-input-field {
	background-color: #fff;
	border-color: #8c8c96;
}

#sign-in .form .input-fix, #sign-in .form .textarea-fix {
	border: 1px solid #8c8c96;
	display: inline-block;
	float: left;
	height: 40px;
	border-radius: 3px;
	box-sizing: border-box;
	width: 100%;
}

#sign-in .form .input-fix input[type=number], #sign-in .form .input-fix input[type=password],
	#sign-in .form .input-fix input[type=tel], #sign-in .form .input-fix input[type=text],
	#sign-in .form .input-fix input[type=textbox] {
	background: transparent;
	border: none;
	box-sizing: border-box;
	height: 100%;
	line-height: 16px;
	margin: 0;
	padding: 6px 8px;
	width: 100%;
	outline: 0;
}

#sign-in .form .form-fieldset:last-child {
	margin-bottom: 15px;
}

#sign-in .custom-checkbox input, #sign-in .custom-radio input {
	filter: Alpha(Opacity = 0);
	left: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 7px;
}

#sign-in .siw-main-view .custom-checkbox label {
	line-height: inherit;
}

sign-in .form .custom-checkbox label {
	font-size: 13px;
}

#sign-in .form-button-bar {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 15px;
}

#sign-in .form-button-bar .button {
	display: block;
	height: 50px;
	width: 100%;
}

#sign-in .form-button-bar a.button {
	    line-height: 48px;
	  	height: 48px;
}

#sign-in .form-button-bar .button span {
	text-alight: center;
	line-height: 50px;
}

div.copyright {
	text-align: center;
	color: var(--white-2);
	font-size: 10pt;
}

.rotate {
	display: flex;
	justify-content: center;
	height: calc(100% - 40px);
}

.rotate-container {
	width: calc(100% - 150px);
	height: 100%;
	position: relative;
	max-width: 2000px;
}

svg {
	float: left
}

.rotate-img-right {
	width: 100%;
	max-width: 400px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.rotate-img-left {
	width: 100%;
	max-width: 200px;
	position: absolute;
	right: 0;
	top: 5%;
}

.rotate-img-right img {
	width: 100%;
	animation: rotate-right 240s linear infinite;
}

.rotate-img-left img {
	width: 100%;
	animation: rotate-left 240s linear infinite;
}

.text-brand-midnight_purple
{
	color: var(--white) !important;
}

.text-brand-midnight_purple:hover {
    color: var(--primary-1) !important;
}

.auth-footer{
	font-size:12px;
	text-align:center;
}

@keyframes rotate-right {from { transform:rotate(0deg);
	
}

to {
	transform: rotate(360deg);
}

}

@keyframes rotate-left {from { transform:rotate(360deg);
	
}

to {
	transform: rotate(0deg);
}
}