/* =====================================================
   ОБЩИЕ СТИЛИ МОДАЛЬНЫХ ОКОН
   Login + Register + Project
===================================================== */

#ws-login-modal,
#ws-register-modal,
#ws-project-modal {
	display: none;
	position: fixed;
	z-index: 10000;
	inset: 0;
	width: 100%;
	height: 100%;

	align-items: flex-start;
	justify-content: center;

	overflow-y: auto;

	padding: 40px 20px;

	background:
		url(data:image/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAAAAeW/F+AAAAOklEQVR4Ae3QIQrAUADD0Lj2AIV//5uO+RE59asKz4U177rz9VAdqkU1qAbVoBpUg2pR3V/VbrVb7QHULigVcx3ZmQAAAABJRU5ErkJggg==);

	background-color: rgba(0, 0, 0, 0.6);
}


/* =====================================================
   КОНТЕЙНЕР МОДАЛЬНОГО ОКНА
===================================================== */

#ws-login-modal .ws-modal-content,
#ws-register-modal .ws-modal-content,
#ws-project-modal .ws-modal-content {
	background: #fff;

	width: 100%;
	max-width: 450px;

	padding: 20px;
	margin: auto;

	border-radius: 10px;

	position: relative;

	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}


/* =====================================================
   КРЕСТИК ЗАКРЫТИЯ
===================================================== */

#ws-login-modal .modal-close,
#ws-register-modal .modal-close,
#ws-project-modal .modal-close {
	position: absolute;

	top: 10px;
	right: 15px;

	font-size: 22px;
	line-height: 1;

	cursor: pointer;

	z-index: 2;
}


/* =====================================================
   ПОЛЯ ФОРМ
===================================================== */

#ws-login-modal form p,
#ws-register-modal form p,
#ws-project-modal form p {
	margin-bottom: 15px;
}


#ws-login-modal input,
#ws-register-modal input,
#ws-project-modal input,
#ws-project-modal select,
#ws-project-modal textarea {
	width: 100%;

	padding: 10px;

	box-sizing: border-box;

	border: 1px solid #ccc;
	border-radius: 6px;

	font: inherit;
}


#ws-project-modal textarea {
	min-height: 110px;
	resize: vertical;
}


/* =====================================================
   КНОПКИ
===================================================== */

#ws-login-modal button,
#ws-register-modal button,
#ws-project-modal button:not(.btn-one) {
	width: 100%;

	padding: 10px;

	background-color: #0073aa;
	color: #fff;

	border: none;
	border-radius: 6px;

	cursor: pointer;
}


#ws-login-modal button:hover,
#ws-register-modal button:hover,
#ws-project-modal button:not(.btn-one):hover {
	background-color: #005f8d;
}


/* =====================================================
   ОШИБКИ РЕГИСТРАЦИИ
===================================================== */

#ws-register-error {
	color: #d63638;

	margin-bottom: 15px;

	font-size: 14px;
	line-height: 1.4;

	padding: 8px 10px;

	background: #fde8e8;

	border: 1px solid #f5c2c2;
	border-radius: 6px;

	display: none;
}


#ws-register-error.active {
	display: block;
}


/* =====================================================
   PROJECT MODAL
===================================================== */

#ws-project-modal .ws-project-modal-content {
	max-width: 520px;
}


#ws-project-modal h2 {
	margin-top: 0;
	margin-bottom: 20px;

	padding-right: 35px;
}


#ws-project-modal label {
	display: block;

	margin-bottom: 6px;

	font-weight: 600;
}


#ws-project-modal small {
	display: block;

	margin-top: 5px;

	font-size: 12px;

	color: #666;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 576px) {

	#ws-login-modal,
	#ws-register-modal,
	#ws-project-modal {
		padding: 20px 12px;
	}

	#ws-login-modal .ws-modal-content,
	#ws-register-modal .ws-modal-content,
	#ws-project-modal .ws-modal-content {
		padding: 18px;
	}

}