@charset "utf-8";
/* CSS Document */

/*любой объект нужного размера */
* {
  box-sizing: border-box;
	
}

body {
  background-color: #f1f1f1;
}

.flex-container {
/*	выравнивает блоки по горизонтали размера экрана*/
	width: 100%;
/*	height: 400px;*/
/*	border: 1px solid #B1B2B4;*/
	padding: 30px;
		
/*	подключаем флекс*/
	display: flex;
/*	распределение блоков по горизонтали*/
	justify-content: center;
/*	по вертикали внутреннее содержимое этого блока*/
	align-items: center;

	align-content: center;

/*	flex-wrap: wrap;*/

}

/*Размеры формы */
#regForm, #loginForm {
  background-color: #ffffff;
/*  margin: 100px auto;*/
/*  font-family: Raleway;*/
  padding: 40px;
  width: 360px;
/*  min-width: 150px;*/
}

/*Этот не задействован*/
.flex-form {
		width: 280px;
		height: 360px;
	/*	border: 1px solid #0014F8;*/
	/*	margin - Перемещаем все в центр 0 - это отступ сверху-снизу, 0 - авто слева/справа*/
	/*	margin: 0 0 0 0; */
 
	 background-color:#FFFFFF;
	 border-radius:3px;
	 box-shadow:0px 0px 10px 0px #0077C3;
	 padding:10px;
/*	 box-sizing: content-box;*/
	 	
	/*	подключаем флекс*/
	display: flex;
/*	по горизонтали*/
	justify-content: center;
	
/*	Распределение по вертикали строк этого блока stretch*/	
	align-content: space-between;
	
/*	по вертикали каждый объект в отдельной строке */
	flex-wrap: wrap ;
		
/*по вертикали внутреннее содержимое этого блока*/
	align-items: baseline;	
	
/*	font-family: Arial;*/
}

h2, h3 {
  text-align: center;  
}

p {
/*	подключаем флекс*/
	display: flex;
/*	по горизонтали распределяем*/
	justify-content: space-between ;
	
	/*по вертикали внутреннее содержимое этого блока*/
	align-items: baseline;		
	
}

/*селектор поля Логин по id - # */
/*селектор поля Логин по class - . */
#loginField {
	
    background: url(/img/user.png) no-repeat 5px 50%;  /* Картинка для поля с логином */
}

/*селектор поля Пароль по id - # */
#txtNewPassword, #txtConfirmPassword {
    background: url(/img/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */
}

/* значки птички и крестики */
#LoginStatus, #PasswordStatus1, #PasswordStatus2, #EmailStatus, #EmailStatusMessage,
#CodeEmailStatus, #TelefonlStatus, #CodeSMSStatus {
	font-family: Raleway;
	
}

/* для поля неверный смс при логине */
#timeleftSMS {
	
	font-size: 10pt;
	margin: 10px;
}

/* для таймера смс при логине */
div.capture, #LoginAlert {
	display: flex;	
	justify-content: space-between;
	align-items: center; 	
	text-align: center;	
	font-size: 10pt;	
}
/**/

#emailField {
	background-color: #FFFFFF;
	/* Картинка для поля с почтой */
    background: url(/img/email.png) no-repeat 5px 50%; 
	 
}

#telefonField {
	background-color: #FFFFFF;
    background: url(/img/telephon.png) no-repeat 5px 50%; /* Картинка для поля с телефоном */
}

/*
#EmailStatusMessage, 
#timeleftEmailButton, #timeleftPhonelButton {
	
	font-size: 10pt;
}
*/


input {
  padding: 10px;
  padding-left: 30px;
	 
  font-size: 17px;
/*  font-family: Raleway;*/
  border: 1px solid #aaaaaa;
  border-radius: 5px;
/*	padding-left: 5px;*/
/*	внешняя рамка*/
	outline-color: #0077C3;
	
/*	margin-right: auto 3%;*/
	
}

select {
  padding: 9px;
  
  font-size: 17px;
/*  font-family: Raleway;*/
  border: 1px solid #aaaaaa;
  border-radius: 5px;
	
/*	внешняя рамка */
	outline-color: #0077C3;
}

.code {
  padding: 10px 20px;
  padding-left: 30px;	
  width: 110px;
	
  font-size: 17px;
/*  font-family: Raleway;*/
  border: 1px solid #aaaaaa;
  border-radius: 5px;		
/*  border-radius: 5px;
	padding-left: 30px;
/*	внешняя рамка*/
	outline-color: #0077C3;
	
	background: url(/img/code.png) no-repeat 5px 50%;  
}

/* Mark input boxes that gets an error on validation: */
/*
input.invalid {
  background-color: #ffdddd;
}
*/

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
/*  background-color: #0077C3;*/
  background-color: #0d6efd;
  color: #ffffff;
  border: none;
	
  border-radius: 5px;		
	
  padding: 8px 20px;
	 margin: 8px 0;

  font-size: 17px;
/*  font-family: Raleway;*/
  cursor: pointer;

/*margin-right: auto 3%;*/
	
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #0077C3;
}
