/* ------------------------------------------------- */
body{
	padding: 0px;
	margin: 0px;

	font-family: "Roboto", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400;

	min-height: 100vh;
	display: flex;
	flex-direction: column;

	color: #494949;
	user-select: none;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.mdi-loading:before{
	-webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;

    transform: rotate(0deg);
}
/* ------------------------------------------------- */
header{
	padding: 10px;
}
.header-logo img{
	height: 40px;
	padding-left: 30px;
}
@media screen and (max-width: 992px) {
	header{
		text-align: center;
	}
	.header-logo img{
		padding-left: 0px;
	}
}
/* ------------------------------------------------- */
.screen{
	display: flex;
	align-items: center;
	flex-grow: 1;
	flex-direction: column;
	padding-bottom: 60px;

	background-image: url('/register/back.svg');
	background-repeat: no-repeat; 
	background-position-y: calc(100% - 35px);
    background-size: 40%;
}
.btn-primary{
	background-color: #0E187F;
	border-color: #0E187F;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
}
.btn-primary:hover{
	background-color: #0d1560 !important;
	border-color: #0d1560 !important;
}
/* ------------------------------------------------- */
.screen-main{
	flex-direction: row;
}
.screen-main-left{
	width: 50%;
}
.screen-main-right{
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	align-items: center;
}
.screen-main-text{
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 10px;
}
.screen-main-subtext{
	font-size: 16px;
	margin-bottom: 20px;
}
.screen-main .btn-primary{
	width: 250px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}
@media screen and (max-width: 992px) {
	.screen-main-left{
		display: none;
	}
	.screen-main{
		background-size: 250px;
		background-position-x: left;
		justify-content: center;
	}
}
/* ------------------------------------------------- */
.screen-form{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 60px;
}
.form{
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
	box-sizing: border-box;
	max-width: 450px;
}
.form-name{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}
.form-text{
	font-size: 16px;
	margin-bottom: 35px;
	text-align: center;
}
.form label{
	margin-bottom: 5px;
}
.form .btn{
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
.form .form-group{
	margin-bottom: 15px;
}
.form .form-check-label{
	text-align: center;
}
.form .form-check-input{
	border-color: gray;
	margin-right: 10px;
}
.form .form-check{
	display: flex;
	align-items: center;
}
.form .btn-primary[disabled]{
	pointer-events: none;
	background-color: #b3b3b3;
	border: #b3b3b3;
}
.form .input-password{
	position: relative;
}
.form .input-password i{
	position: absolute;
	height: 100%;
	width: 40px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	right: 0px;
	top: 0px;
	cursor: pointer;
	border-top-right-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
}
.form .input-password i:hover{
	background-color: #efefef;
}
/* ------------------------------------------------- */
.points{
	display: flex;
	margin-bottom: 35px;
}
.point{
	width: 150px;
	display: flex;
	flex-direction: column;
}
.point .name{
	margin-bottom: 5px;
	text-align: center;
}
.point.active .name{
	color: #0E187F;
}
.point .dot-line{
	display: flex;
}
.point .dot{
	border-radius: 50%;
	width: 10px;
	height: 10px;
	border: 1px solid #E9EAEB;
}
.point.active .dot{ 
	background-color: #0E187F;
	border: none;
}
.point .line{
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.point .line > div{
	width: 100%;
	height: 2px;
	background-color: #E9EAEB;
}

@media screen and (max-width: 420px) {
	.point{
		width: 125px;
	}
}
@media screen and (max-width: 350px) {
	.point{
		width: 100px;
	}
	.point .name{
		height: 42px;
	}
}
/* ------------------------------------------------- */
.screen-actvation-code .form{
	max-width: 500px;
}
.screen-actvation-code .activationKeyInput{
	width: 340px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
}
/* ------------------------------------------------- */