.mc_link,.fa_icons{
    color: #8f8989;
}
.mc_link {
font-size: 14px;
}
.mc_link:hover{
    color: #EC1F25;
}
.fa_icons:hover{
    color: #EC1F25;
}
.errorMessage{
    width: 70%;
    text-align: end;
    color: red;
    font-size: small;
    font-weight: 600;
}
.password-container {
position: relative;
width: 100%;
}
.password-container i {
position: absolute;
right: 16%;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

.mc_inside-container{
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
.mc-input-group{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mc_input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 70%;
border-radius: 4px;
}
.mc_input:focus {
    outline: none;
}

.mc_login_h1 {
font-weight: bold;
margin: 0;
}
.mc_login_p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
.login_button {
border-radius: 5px;
border: 1px solid #F66F73;
background: #F66F73;
background: -webkit-linear-gradient(to right, #F66F73, #FF8277);
background: linear-gradient(to right, #F66F73, #FF8277);
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
width: 70%;
transition: transform 80ms ease-in;
}

.login_button:active {
transform: scale(0.95);
}

.login_button:focus {
outline: none;
}

.mc_form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.container {
background-color: #fff;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
        0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
min-height: 480px;
height: 100vh;
}

.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}

.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}

.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}

.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}

.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}

@keyframes show {
0%, 49.99% {
    opacity: 0;
    z-index: 1;
}

50%, 100% {
    opacity: 1;
    z-index: 5;
}
}

.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}

.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}

.overlay {
/* background: #EC1F25;
background: -webkit-linear-gradient(to right, #EC1F25, #FF4B2B);
background: linear-gradient(to right, #EC1F25, #FF4B2B);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0; */
background: #F66F73;
background: -webkit-linear-gradient(to right, #F66F73, #FF8277);
background: linear-gradient(to right, #F66F73, #FF8277);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;

color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
transform: translateX(50%);
}

.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-left {
transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
transform: translateX(0);
}

.overlay-right {
right: 0;
transform: translateX(0);
}

.container.right-panel-active .overlay-right {
transform: translateX(20%);
}

@media (max-width: 768px) {
.overlay-container {
    display: none;
}
.container {
    max-width: 100%;
}
.form-container.sign-in-container,
.form-container.sign-up-container {
    width: 100%;
}
.mc_form{
padding: 0px !important;
}
.container.right-panel-active .sign-up-container{
    transform:none !important;
}
}
.w-90{
    width: 90% !important;
}
.w-80{
    width: 80%;
}