/* 

CONTENT

    1. STRUCTURE
    2. ERROR
    3. ILLUSTRATION

 */


/* ==================================== 
    STRUCTURE
==================================== */

.wt-user-profile-ui-wrapper { 
    box-shadow: 0 0 1rem rgba(0,0,0, 0.15);
}

.wtin-login-forms .wtin-background-img  {
    background-color: #ffdb40;
    background-size: cover;
    min-height: 200px;
}
	
.wtin-login-forms .wtin-form {
    padding: 1rem 1rem 2rem ;
}
	
.wtin-login-forms ul {
    margin: 0;
    padding:0;
}

.wtin-login-forms li {
    list-style: none;
}

@media screen and (min-width: 620px) {
    .wtin-login-forms {
        display: flex; 
    }
    
    .wtin-login-forms > div {
        flex-grow: 1;
    }
    
    .wtin-login-forms .wtin-background-img  {
        display: flex;
        align-items: stretch;
        order: 1;
        width: 30%;
    }

    .wtin-login-forms .wtin-form {
        padding: 2rem;
        order: 2;
        width: 70%;
    }

  }

  @media screen and (min-width: 1024px) {    	
    .wtin-login-forms .wtin-form {
        padding: 3rem;
    }

    .wtin-login-forms .wtin-background-img  {
        width: 50%;
    }

    .wtin-login-forms .wtin-form {
        width: 50%;
    }
  }


/* ==================================== 
    ERROR
==================================== */

.wt-user-profile-ui-wrapper .wt-error, 
#wt-user-change-password-form .wt-error,
.wt-user-profile-ui-wrapper .wt-forgot-password-response-error {
    position: relative;
    margin: 1rem 0;
    background: rgba(243, 154, 48, 0.2);
    border-radius: 0.3rem;
    padding: 1rem;
}

#wt-user-change-password-form .wt-user-form-errors {
    margin: -0.5rem 0 1.5rem;
    padding: 0;
    list-style-type: none;
    color: #F39A30;
}

/* ==================================== 
    ILLUSTRATION SVG
==================================== */

.wt-user-profile-ui-wrapper svg {
    width: 100%;
    height: 100%;
}

.wt-user-profile-ui-wrapper #computer-content .st2 {
    fill: #ffdb40;
}

.wt-user-profile-ui-wrapper #chat-box .st3 {
    fill: #44e29a;
}