src/contactus/body/styles.css
.form-box {
align-items: center;
display: block;
justify-content: center;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #8789b5;
font-family: 'Open Sans', sans-serif;
opacity: 1; /* Firefox */
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #8789b5;
font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8789b5;
font-family: 'Open Sans', sans-serif;
}
#form-particulars > * {
margin: 0 0.58vw;
}
input,
textarea:focus {
outline: none;
}
.form-particulars {
display: flex;
flex: 1;
justify-content: center;
}
.form-particulars-holder {
background-color: #fafbff;
border: 1px solid rgba(166, 175, 251, 1);
border-radius: 5px;
display: flex;
flex-direction: row;
height: 60px;
width: 100%;
}
.form-particulars-holder > input {
background-color: transparent;
border-color: transparent;
border-radius: 5px;
color: #8789b5;
font-family: 'Open Sans', sans-serif;
height: 50px;
transform: translate(4px, 4px);
width: 240px;
}
.form-particulars-holder > span {
align-self: center;
color: #8789b5;
font-family: 'Open Sans', sans-serif;
transform: translateX(4px);
}
input:-webkit-autofill {
-webkit-text-fill-color: #8789b5 !important;
}
/* https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete Nathan White */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
.form-particular-error-holder {
height: 60px;
width: 15%;
}
.form-particular-error-holder > span {
align-self: center;
color: #c00;
font-family: Nunito, serif;
font-weight: 500;
}
#drop-down-arrow-holder {
align-items: center;
color: #8789b5;
display: flex;
font-size: 17px;
height: 60px;
justify-content: flex-end;
position: absolute;
width: 100%;
}
.form-details {
align-items: center;
display: flex;
flex: 2;
height: 100%;
justify-content: center;
width: 100%;
}
.form-details-holder {
background-color: #fafbff;
border: 1px solid rgba(166, 175, 251, 1);
border-radius: 5px;
height: 100%;
width: 100%;
}
.form-details-error-holder {
height: 75%;
width: 47.25%;
}
.form-details-error-holder > span {
align-self: center;
color: #c00;
font-family: Nunito, serif;
font-weight: 500;
}
.form-details-holder > textarea {
background-color: transparent;
border-color: transparent;
border-radius: 5px;
color: #8789b5;
flex-wrap: wrap;
font-family: 'Open Sans', sans-serif;
height: 190px;
resize: none;
transform: translate(6px, 6px);
width: 860px;
}
.form-submit-button-box {
align-items: center;
display: flex;
flex-direction: column;
height: 60px;
width: 100vw;
}
.form-submit-button {
align-items: center;
background-image: linear-gradient(90deg, #6d7bf3, #5466ff);
border: none;
border-radius: 5px;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
height: 50px;
justify-content: center;
outline: none;
width: 150px;
}
.form-submit-button > span {
color: white;
font-family: 'Nunito', sans-serif;
font-weight: bolder;
}
.message-acknowledgement {
background-color: #5467ff;
float: left;
height: 50px;
width: 200px;
}
.close-notification-button {
border-radius: 100%;
}
.close-notification-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}