@import url(/style.css);

content, headerComplex
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

content {
    gap: 3rem;
}

content img
{
    max-width: 15rem;
}

headerComplex
{
    position: relative;

    background-color: #EBF5FF;

    padding: 2rem;

    border-radius: 1rem;
}

form {
    display: flex;
    flex-direction: column;

    gap: 1.5rem;

    padding: 3vw;

    border: 1px solid #e2e8f0;

    border-radius: 1rem;
}

.inputError {
  outline: 2px solid #e5484d;
  outline-offset: 2px;
}

select {
    appearance: none;
}

.outlinedBox, input, select {
    padding: calc(var(--modal-padding-reduced) * 0.5);
}

.mandatoryCheckbox::after {
    content: "*";

    color: #f87171;

    padding-left: 0.2rem;
}
.mandatoryCheckbox {
    padding-left: 0.3rem;
}

input[type="text"], input[type="email"], select
{
    font-size: 1rem;
    border: 1px solid #e4e6ee;

  border-radius: 5px;
}

.formLabelInputComplex {
    display: flex; 
    flex-direction: column; 
    gap: 0.3rem;
}