* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: inherit;
}
body{
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%), #FFF;

}
.flex-container{  
height: 100vh;
margin: 0px;
padding: 0;
border: 0px;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%), #FFF;
}

.Card{
order: 1;
display: flex;
width: auto;
height: auto;
flex-direction: column;
align-items: stretch;
gap: 24px;
flex-shrink: 0;
border-radius: 14px;
border: 1px solid rgba(0, 0, 0, 0.10);
background: #FFF;
margin-top: 100px;
padding-bottom: 30px;
}

.CardHeader{
display: grid;
width: 446px;
height: 184px;
padding: 24px 24px 0 24px;
row-gap: 6px;
column-gap: 6px;
flex-shrink: 0;
grid-template-rows:    88px 36px minmax(0,1fr);
grid-template-columns: repeat(1,minmax(0,1fr));
}

#LogoContainer{
order: 1;
display: flex;
height: 72px;
padding: 0 163px;
justify-content: center;
align-items: flex-start;
grid-row: 1 / span 1;
grid-column: 1 / span 1;
justify-self: stretch;
}

#LogoCircle{
display: flex;
width: 72px;
height: 72px;
padding: 12px 12px 0 12px;
flex-direction: column;
align-items: flex-start;
border-radius: 3.402820018375656e+38px;
background: #FF6900;
}

#LogoSVG{
height: 48px;
flex-shrink: 0;
align-self: stretch;
}

#CardTitle{
order: 2;
display: inline-flex;
padding: 0 40.35px 3px 40.65px;
justify-content: center;
align-items: center;
align-self: stretch;
grid-row: 2 / span 1;
grid-column: 1 / span 1;
justify-self: stretch;
}

#Welcome{
color: #0A0A0A;
text-align: center;
font-family: "Segoe UI Emoji";
font-size: 30px;
font-style: normal;
font-weight: 500;
line-height: 36px; /* 120% */
}
#Subtitle{
grid-row: 3 / span 1;
grid-column: 1 / span 1;
justify-self: stretch;
color: #717182;
text-align: center;
font-family: "Segoe UI Emoji";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}


.CardContent{
display: flex;
flex-direction: column;
width: 446px;
flex: 1 0 0;
padding: 0 24px;
gap: 16px;
}
.Input{
display: flex;
flex-direction: column;
gap: 6px;
}
.CardContent form {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.InputLabel{
color: #0A0A0A;
font-family: "Segoe UI Emoji";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 14px; /* 100% */
}
.InputField{
font-family: "Segoe UI Emoji";
display: flex;
height: 36px;
width: 100%;
padding: 4px 12px;
align-items: center;
flex-shrink: 0;
align-self: stretch;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.00);
background: #F3F3F5;
}

#CreateAcc{
display: flex;
padding: 6.5px 0 9.5px 0;
justify-content: center;
align-items: center;
align-self: stretch;
border-radius: 8px;
border: none;
background: #030213;
width: 100%; 
color:#FFF;
text-align: center;
font-family: "Segoe UI Emoji";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
}

#OR_Space{
display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
}
#OR_Line{
flex: 1; /* this makes each line grow to fill available space */
height: 1px;
background: #D1D5DC;
}
#OR_Text {
  color: #717182;
  font-family: "Segoe UI Emoji";
  font-size: 14px;
}
#Signup{
display: flex;
justify-content: center;
align-items: center; /* changed from flex-start */
width: 100%;
gap: 4px;
}
#SignupText{
color: #4A5565;
text-align: center;
font-family: "Segoe UI Emoji";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
a{
color: #F54900;
text-align: center;
font-family: "Segoe UI Emoji";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; /* 150% */
text-decoration: none;
}
a:hover{
text-decoration: underline;
}