/* LOGIN user from */

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');



.login__container {

	display: flex;

	align-items: center;

	justify-content: center;

	font-family: Raleway, sans-serif;

	margin-top: 1em;

}



.screen {		

	background: linear-gradient(90deg, #5D54A4, #7C78B8);		

	position: relative;

	overflow:hidden;

	border-radius:3px;

	height: 400px;

	width: 380px;	

	box-shadow: 0px 0px 24px #5C5696;

}



.screen__content {

	z-index: 1;

	position: relative;	

	height: 100%;

}



.screen__background {	

    overflow: clip;

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	z-index: 0;

	-webkit-clip-path: inset(0 0 0 0);

	clip-path: inset(0 0 0 0);	

}



.screen__background__shape {

	transform: rotate(45deg);

	position: absolute;

}



.screen__background__shape1 {

	box-shadow: 5px 0px 15px black;

	height: 520px;

	width: 520px;

	background: #FFF;	

	top: -50px;

	right: 100px;	

	border-radius: 0 62px 0 0;

}



.screen__background__shape2 {

	height: 220px;

	width: 220px;

	background: #6C63AC;	

    top: -185px;

    right: -15px;

	border-radius: 32px;

}



.screen__background__shape3 {

	height: 540px;

	width: 190px;

	background: linear-gradient(270deg, #5D54A4, #6A679E);

	top: -24px;

	right: 0;	

	border-radius: 32px;

}



.screen__background__shape4 {

	height: 400px;

	width: 200px;

	background: #7E7BB9;	

	top: 420px;

	right: 50px;	

	border-radius: 60px;

}



.login {

	width: 90%;

	margin: 0 auto;

	padding-top: 1.5em;

}



.login__signature {

    display: flex;

    justify-content: center;

	align-items: center;

    margin-top: 1.0em;

}



.login__field {

	margin: 20px 0px;	

	position: relative;	

}



.login__icon {

	position: absolute;

	top: 5px;

	color: #7875B5;

}





.login__icon_user {

    -webkit-mask: url(/_assets/icon/person.svg) no-repeat center;

    mask: url(/_assets/icon/person.svg) no-repeat center;

    background-color: var(--color_scheme_1_light-Secondary);

    display: block;

    width: 25px;

    height: 25px;

}

.login__icon_lock {

    -webkit-mask: url(/_assets/icon/lock-closed.svg) no-repeat center;

    mask: url(/_assets/icon/lock-closed.svg) no-repeat center;

    background-color: var(--color_scheme_1_light-Secondary);

    display: block;

    width: 25px;

    height: 25px;

}



.login__input {

	border: none;

	border-bottom: 2px solid #D1D1D4;

	background: none;

	padding: 10px;

	padding-left: 30px;

	font-weight: 700;

	width: 75%;

	transition: .2s;

}



.login__input:active,

.login__input:focus,

.login__input:hover {

	outline: none;

	border-bottom-color: #6A679E;

}



/* this style affects all the children except the one you're hovering over 

.parent:hover .child:not(:hover) {}

*/

.login__field:hover > .login__icon {

	background:var(--color_scheme_1_light-Quaternary);

	transition: all ease-in-out 0.6s;

}

		

.login__submit_wrap {

    display: flex;

    justify-content: center;

	align-items: center;

}



.login__submit {

	background: linear-gradient(270deg, #5D54A4, #6A679E);

    color: white;

	border: 1px solid #D4D3E8;

	border-radius: 5px;

	font-size: 14px;

	margin-top: 0.8em;

	padding: 10px 20px;

	text-transform: uppercase;

	font-weight: 700;

	display: flex;

	align-items: center;

	box-shadow: 0px 2px 2px #5C5696;

	cursor: pointer;

	transition: .2s;

}



.login__submit:active,

.login__submit:focus,

.login__submit:hover {

	border-color: #6A679E;

	outline: none;

}



.button__icon {

	font-size: 24px;

	margin-left: auto;

	color: #7875B5;

}



.social-login {	

	position: absolute;

	height: 95px;

	width: 140px;

	text-align: center;

	bottom: 0px;

	right: 0px;

	color: #fff;

}



.social-icons {

	display: flex;

	align-items: center;

	justify-content: center;

}



.social-login__icon {

	padding: 20px 10px;

	color: #fff;

	text-decoration: none;	

	text-shadow: 0px 0px 8px #7875B5;

}



.social-login__icon:hover {

	transform: scale(1.5);	

}



.divider_wrap{

	margin: 0 auto;

	margin-left: -0.5em;

	margin-right: -0.5em;

	display: flex;

	align-items: center;

	justify-content: center;

}

.divider {

  display: flex;

  align-items: center;

  margin: 25px 0;

  color: var(--color_scheme_1_light-Quaternary);

  font-weight: bold;

  width:400px;

}



.divider::before, .divider::after {

  content: "";

  flex: 1;

  border-bottom: 2px solid var(--color_scheme_1_light-Primary);

  margin: 0 10px;

}



.regi_wrap, .reset_wrap{

	text-align: center;

	margin-bottom: 2em;

}