body {

    background: linear-gradient(90deg, #C7C5F4, #9bd2e9);

}



.screen {

    background: linear-gradient(90deg, #5D54A4, #9bd2e9);

    position: relative;

    height: 600px;



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

}



.screen__content {

    z-index: 1;

    position: relative;

    height: 100%;

}



.screen__background {

    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 {

    height: 520px;

    width: 520px;

    background: #FFF;

    top: -50px;

    right: 120px;

    border-radius: 0 72px 0 0;

}











.login {



    padding: 30px;



}



.login__field {

    padding: 20px 0px;

    position: relative;

}



.login__icon {

    position: absolute;

    font-size: 20px;

    color: #7875B5;

    margin-top:7px

}



.login__input {

    border: none;

    border-bottom: 2px solid #7875B5;

    background: none;

    padding: 10px;

    padding-left: 24px;

    font-weight: 700;

    width: 75%;

    transition: .2s;

}



.login__input:active,

.login__input:focus,

.login__input:hover {

    outline: none;

    border-bottom-color: #6A679E;

}



.login__submit {

    background: #fff;

    font-size: 14px;

    margin-top: 30px;

    padding: 16px 20px;

    border-radius: 26px;

    border: 1px solid #D4D3E8;

    text-transform: uppercase;

    font-weight: 700;

    display: flex;

    align-items: center;

    width: 100%;

    color: #000;

    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: #000;

}



.social-login {

    position: absolute;

    height: 140px;

    width: 160px;

    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);

}