.div {
   display: flex;
   gap: 50px;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
   margin: none;
}

.pic {
   display: flex;
   align-items: center;
   gap: 10px;
   position: relative;
   background-color: #ffffff;
   border-radius: 16px;
   overflow: hidden;
}

input#photo {
   padding-left: 60px;
}

img.rectangle {
   width: 300px;
   border-radius: 16px;
   position: relative;
   height: 333px;
   object-fit: cover;
}
.estimateD{
   display: flex;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: space-between;
   justify-content: space-between;
   column-gap: 100px;
   row-gap: 20px;
}

.div-2 {
   display: flex;
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: space-between;
   justify-content: space-between;
   column-gap: 100px;
   row-gap: 20px;
}



.div-3,
.username-field {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
}

.div-3 {
   flex-direction: column;
   gap: 10px;
}

.div-4,
.username-field {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
}

.div-4 {
   flex-direction: column;
   gap: 10px;
}

.text-wrapper {
   position: relative;
   font-size: 14px;
   font-weight: 500;
   font-style: italic;
   font-family: "mulish";
   color: #313030;
   text-align: left;
   display: inline-block;
   min-width: 67px;
}

input#lastname {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
}

input#firstname {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
}

input#preferred_name {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
}

input#campus {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
}

textarea#comments {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
   line-height: 2.2;
}

textarea#notifyIfEntryAttemptComments {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   height: 30px;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 230px;
   line-height: 2.2;

}

input#exclusion_end {
   border: 1px solid #313030;
   outline: 0;
   background-color: transparent;
   border-radius: 8px;
   box-sizing: content-box;
   flex-direction: row;
   padding: 0 14px;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   width: 108px;
   line-height: 2;
   padding-inline-start: 9px;
   font-family: "Mulish-Medium", Helvetica;
}

.CNE {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: center;
   gap: 31px 233px;
   position: relative;
}


.button-frame {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   border-radius: 20px;
   cursor:pointer;
   border: 0'
}

.home {
   text-decoration: none;
   position: relative;
   font-size: var(--font-size-lg);
   letter-spacing: 0.12em;
   line-height: 18px;
   text-transform: uppercase;
   font-weight: 800;
   font-family: var(--font-outfit);
   color: var(--color-white);
   text-align: left;
   display: inline-block;
   min-width: 73px;
}

.home-wrapper {
   cursor: pointer;
   top: 24px;
   left: 32px;
   gap: 32px;
   border: 0;
   padding: var(--padding-3xs) var(--padding-2xl);
   background-color: var(--color-goldenrod);
   border-radius: var(--br-xl);
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   position: relative;
   opacity: 0.8;
   z-index: 1;
}

.home-wrapper:hover {
   background-color: var(--color-darkgoldenrod);
}



.prodetails {
   display: flex;
   position: relative;
   gap: 50px;
   align-items: stretch;
   margin-top: 122px;
   left: 30px;
}

.sign-in-card {
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;
}

.sign-in-card {
   margin: 0;
   box-shadow: 0 6px 8px rgba(0, 0, 22, 10.05);
   border-radius: 32px;
   background-color: #ffffff;
   flex-direction: column;
   justify-content: flex-start;
   padding: 32px;
   gap: 36.5px;
   max-width: 100%;
}

.username {
   position: relative;
   font-size: var(--font-size-sm);
   font-weight: 500;
   font-family: var(--font-mulish);
   color: var(--color-darkslategray-100);
   text-align: left;
   display: inline-block;
   min-width: 67px;
}

.credentials,
.username-field {
   align-self: stretch;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
}

.username-field {
   border: 1px solid var(--color-darkslategray-100);
   outline: 0;
   background-color: transparent;
   height: 45px;
   border-radius: var(--br-7xs);
   box-sizing: border-box;
   flex-direction: row;
   padding: 0 var(--padding-xs);
   min-width: 211px;
}
.bottom-buttons{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   row-gap: 20px  ;
   column-gap: 163px;
   align-items: center;
   align-content: center;
   padding: 10px 100px;
}
input.login-wrapper{
   color:#313030 ;
   font-family: outfit  ;
   font-size: 17px;
   letter-spacing: 2px;
   font-weight:600 ;
   position: relative;
   border: 0;
   padding: 10px 21px;
   background-color: #f1dfb5;
   border-radius: 18px;
   opacity: 0.8;
}

input.div-wrapper{
   color:#313030 ;
   font-family: outfit  ;
   font-size: 17px;
   line-height: 18px;
   letter-spacing: 2px;
   font-weight:520 ;
   position: relative;
   border: 0;
   padding: 10px 21px;
   background-color: #f1dfb5;
   border-radius: 18px;

}

label.custom-button{
   color:#313030 ;
   font-family: Outfit;
   font-size: 16px;
   line-height: 18px;
   letter-spacing: 2px;
   font-weight:588 ;
   position: relative;
   border: 0;
   padding: 10px 21px;
   background-color: #f1dfb5;
   border-radius: 18px;
   opacity: 0.8;
}



body {
   background-color: #011e33;
   position: relative;
}