/* toprate-login.css */
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
width: 100vw;
height: 100vh;
overflow-x: hidden;
margin-bottom: 0;
background-color: #FFF1F1;
@media (min-width: 768px) {

overflow-y: hidden;
}
}
.container2 {
display: flex; 
flex-direction: column; 
width: 100vw; 
height: 100vh;
@media (min-width: 768px) { 
flex-direction: row;

}
}

.darkColumn {
display: flex; 
background: linear-gradient(to bottom right, var(--tw-gradient-stops)); 
flex-direction: column; 
width: 100%;
border: 2px;
background: linear-gradient(110.89deg, rgba(20, 20, 20, 0.96) -5.82%, rgba(156, 14, 78, 0.97) 84.88%);
@media (min-width: 768px) { 
width: 41.666667%; 
height: 100%; 
}
}
.lightColumn {
width: 100%; 
background: #FFF1F1;


@media (min-width: 768px) { 
width: 58.333333%; 
height: 100%; 
}
}
.header {
display: flex; 
margin-right: 0.5rem; 
justify-content: space-between; 
align-items: center; 
z-index: 1;
}
.logo {
padding: 1.25rem; 
@media (min-width: 768px) { 
padding: 2.5rem; 
}
}
.image {
width: 120px;
height: 50px;
@media (min-width: 768px) { 
width: 180px;
height: 75px; 
}
}
.header-button { 
padding: 0.5rem;  
background: none;
outline: none;
border: none;
@media (min-width: 768px) { 
display: none; 
}

}
.header-span {
color: rgb(255 255 255);
}
.darkInnerContainer {
display: flex; 
margin-bottom: 1.75rem; 
flex-direction: column; 
justify-content: space-between; 
align-items: center; 
width: 100%; 
height: 100%;
}
.lightInnerContainer {
display: flex;  
flex-direction: column; 
align-items: center; 
width: 100%; 
height: 100%; 


/* @media (min-width: 768px) { 
padding-top: 5rem;
padding-bottom: 5rem; 
} */
}
.darkInnerTextContainer {
display: flex;  
flex-direction: column; 
align-items: center; 
@media (min-width: 768px) { 
width: 75%
}
}
.leadText {
color: #ffffff; 
font-size: 1rem;
line-height: 1.5rem; 
font-weight: 700; 
width: 100%; 


@media (min-width: 768px) { 
font-size: 2.25rem;
line-height: 2.5rem; 
}
@media (min-width: 1024px) { 
font-size: 3rem;
line-height: 1; 
}
}
.subText {
color: #ffffff; 
font-size: 0.75rem;
line-height: 1rem; 
width: 100%; 


@media (min-width: 768px) { 
font-size: 1rem;
line-height: 1.5rem; 
}
}

.loginButton {
display: none; 
padding: 0.5rem; 
margin-top: 2.5rem; 
background-color: #ffffff; 
justify-content: center; 
align-items: center; 
width: 75%; 
color: #9C0E4E;
border: none;
border-radius: 5px;

@media (min-width: 768px) { 
display: flex; 
padding: 0.75rem; 
margin-top: 5rem; 
}
}
.formSection {
display: flex;
flex-direction: column;  
width: 75%;
margin-top: 1rem;  
align-items: center; 
z-index: 10;
}
.formSectionHeader {
color: #141414;
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 162.02%;
text-align: center;
}
.form { 
width: 100%; 
}
.inputLabel {
display: block; 
position: relative;
margin-top: 15px;
}
.inputName {
color: #141414;
font-weight: 600;
font-size: 14px;
line-height: 23px;
}
.input {
display: flex;
padding-left: 10px;
top: 31px;
margin-top: 0.5rem;
outline: none;
width: 100%;
height: 2.5rem;
background: #FFFFFF;
border: 1px solid #ECECEC;
border-radius: 10px;
}
.inputSpan {
font-weight: 400; 
font-size: 12px;
line-height: 12px;
color: rgba(24,24,24,0.45);
}

.inputButton {
background: none;
border: none;
cursor: pointer;
padding: 0;
position: absolute;
right: 10px;
transform: translateY(-165%);
  }


.formButtomSection {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 1.5rem;
}
.keepLoggedInContainer {
display: flex;
width: 100%;
color: #141414;

}
.keepLoggedIn {
height: 15px;
width: 15px;
border-radius: 4px;
left: 2.5px;
top: 2.5px;
}
.keepLoggedInLabel {
height: 12px;
font-size: 14px;
line-height: 20px;
text-align: left;
margin-left: 5px;
}
.forgetPasswordSpan {

font-size: 14px;
line-height: 12px;
color: #9C0E4E;
white-space: nowrap;
text-align: right; 
}
.forgetPasswordLink {

font-size: 14px;
line-height: 12px;
color: #9C0E4E;
white-space: nowrap;
text-align: right;
text-decoration: none; 
cursor: pointer;
}

.login {
padding: 0.5rem; 
margin-top: 2.5rem;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 56px;
background: #9C0E4E;
padding: 12px;
border-radius: 5px;
border: none;
}

.loginSpan {
color:#FFFFFF;
font-weight: 500;
font-size: 16px;
line-height: 12px;
}
.bottomContainer {
font-size: 1rem;
line-height: 1.5rem;
margin-top: 48px;
width: 100%;
margin-bottom: 24px;
}
.buttomSpan {
color: #141414;
}
.signUp {
color: #9C0E4E;
text-decoration: none;
}
.bubble1 {
position: absolute;
width: 91px;
height: 91px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.2;
transform: rotate(15deg);
left: 72px;
top: 0;
}

.bubble2 {
position: absolute;
width: 91px;
height: 91px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.2;
transform: rotate(15deg);
left: 51px;
bottom: 200.73px;
display: none;
@media (min-width: 768px) {
    display: flex;
}
}

.bubble3 {
position: absolute;
width: 91px;
height: 91px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.2;
transform: rotate(15deg);
left: 5px;
bottom: 10px;
@media (min-width: 768px) { 
left: 38%; 
bottom: 100px;
}
}

.bubble4 {
display: none; 
position: absolute; 
width: 162px;
height: 162px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.1;
transform: rotate(-44.97deg);
left: 44%;
@media (min-width: 768px) {  
display: flex; 
top: 150.7px;
}
}

.bubble5 { 
position: absolute; 
width: 162px;
height: 162px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.1;
transform: rotate(-44.97deg);
left: 58%;
bottom: 40px;
display: none;
@media (min-width: 768px) {
    display: flex;
}
}

.bubble6 { 
position: absolute; 
width: 162px;
height: 162px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.1;
transform: rotate(-44.97deg);
right: 2.5rem;
top: 145.06px;
}

.bubble7 {
position: absolute;
width: 91px;
height: 91px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.1;
transform: rotate(-15deg);
right: 300.43px;
top: 20px;
display: none;
@media (min-width: 768px) {
    display: flex;
}
}

.bubble8 {
position: absolute;
width: 91px;
height: 91px;
border-radius: 50%;
background: linear-gradient(129.81deg, rgba(156, 14, 78, 0.71) 0.08%, rgba(255, 255, 255, 0) 108.11%);
opacity: 0.1;
transform: rotate(-15deg);
left: 5%;
top: 25%;
@media (min-width: 768px) { 
right: 15.99%;
bottom: 205.33px;
}
}
.svg-fill {
    fill: #7f7a7d;
}

/*Validation styling*/

.validation-summary-errors ul li {
    color: red;
}