body {
    margin: 0;
    padding: 0;
}

nav {
    background-color: #00607F;
    box-shadow: 0 0 10px grey;
}

h2 {
    margin-top: 0;
    text-align: center;
}

hr {
    border-top: 1px solid silver;
    margin: 0;
}

#submitButton {
    font-size: 1.5em;
    padding: 5px 15px 5px 15px;
}

#PaidSickTimeComplaintForm input[type=checkbox],
#PaidSickTimeComplaintForm input[type=radio] { margin: 0; }

#PaidSickTimeComplaintForm label { font-weight: bold; }

#PaidSickTimeComplaintForm select,
#PaidSickTimeComplaintForm textarea,
#PaidSickTimeComplaintForm input { border-radius: 0; }

#PaidSickTimeComplaintForm .form-control {
    height: 35px;
    padding: 5px;
}

#PaidSickTimeComplaintForm .input-validation-error {
    outline: 2px solid red;
    outline: 2px solid rgba(255, 0, 0, .575);
}

.errorList {
    color: red;
    margin: 0 auto 0 auto;
    padding-left: 30%;
    width: 75%;
}

label {
    font-weight: normal;
    margin: 0;
}

.mainWrapper {
    background-color: white;
    box-shadow: 0 0 10px grey;
    margin: 15px;
    margin-left: auto;
    margin-right: auto;
    max-width: 70%;
    padding: 15px;
}

.formHeader {
    border-bottom: 1px solid lightgrey;
    margin-bottom: 40px;
    padding-bottom: 1%;
    padding-top: 1%;
    text-align: center;
}

.input-group-text {
    border-radius: 3.7px 0 0 3.7px !important;
    border-right: 0;
}

.form-control { height: auto; }

.inputGroupFlex, .inputGroupFlexVertical { display: flex; }

.inputGroupFlexVertical { flex-direction: column; }

.justifyBetween { justify-content: space-between; }

.justifyAround { justify-content: space-around; }

.flexFullWidth { flex: 1; }

.inputGroup {
    display: grid;
    grid-template-columns: 40% 60%;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.inputGroup > div { margin: 0 0 15px 15px; }

.submitButton {
    margin-bottom: 3%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    width: 25.3%;
}

.text-danger,
.field-validation-error,
.validation-summary-errors,
.arpaButtonRed { color: red; }

.validation-summary-valid > ul {
    margin: 0;
}

.validation-summary-errors > ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-left: 30px;
}

.editor-field { margin: 0; }

.col-md-6 { padding-left: 0 !important; }

.charsLeft {
    opacity: 0.6;
    text-align: right;
}

.commentsBox {
    display: grid;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.instruction {
    color: red;
    opacity: 0.7;
    text-align: center;
}

.successMessage {
    color: green;
    font-size: 3rem;
    padding: 5%;
    text-align: center;
}

@media (max-width: 560px) {
    .mainWrapper { box-shadow: 0 0 0 grey; }

    .inputGroup {
        grid-template-columns: 100%;
        margin-bottom: 10%;
        width: 100%;
    }

    .inputGroup > div { margin: 0; }

    .mainWrapper { max-width: 100%; }

    .commentsBox {
        margin-bottom: 10%;
        width: 100%;
    }

    .errorList { width: 100%; }

    .inputGroupFlex { flex-direction: column; }
}