[class^="formRow"] {
    padding-bottom: 5px;
}
[class^="formRow"] > .formLeft {
    font-weight: bold;
    vertical-align: top;
}
[class^="formRow"] > .formRight {
}
[class^="formRow"] > .formRight > input {
    width: 250px;
}

.formRow-12 > .formLeft {
    width: 250px;
}
.formRow-8 > .formLeft { }
.formRow-6 > .formLeft { }
.formRow-5 > .formLeft { }
.formRow-4 > .formLeft { }

@media(max-width: 575px) { /*xs*/

    [class^="formRow"] > .formLeft {
        text-align: left;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    [class^="formRow"] > .formRight {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .formRow-12 > .formLeft {
        width: 250px;
    }
    .formRow-12 > .formRight {
        width: 250px;
    }
    .formRow-12 > .formRight > textarea {
        width: 250px;
    }

    .formRow-8 > .formLeft {
        display: inline-block;
        text-align: left;
        width: 250px;
    }
    .formRow-8 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-8 > .formRight > input {
        width: 250px;
    }
    .formRow-8 > .formRight > textarea {
        width: 250px;
    }

    .formRow-6 > .formLeft {
        width: 250px;
    }
    .formRow-6 > .formRight {
        width: 250px;
    }

    .formRow-5 > .formLeft {
        display: inline-block;
        text-align: left;
        width: 250px;
    }
    .formRow-5 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-5 > .formRight > input {
        width: 250px;
    }
    .formRow-5 > .formRight > textarea {
        width: 250px;
    }

    .formRow-4 > .formLeft {
        display: block;
        text-align: left;
        width: 100%;
    }
    .formRow-4 > .formRight {
        display: block;
        width: 100%;
        text-align: left;
    }
    .formRow-4 > .formRight > input {
        max-width: 320px;
    }
    .formRow-4 > .formRight > select {

    }

}

@media(min-width: 576px) { /*sm*/
    .formRow-12 > .formLeft {
        display: inline-block;
        text-align: right;
    }
    .formRow-12 > .formRight {
        display: inline-block;
        text-align: left;
        padding-left: 7px;
        width: 250px;
    }
    .formRow-12 > .formRight > input {
        width: 250px;
    }
    .formRow-12 > .formRight > textarea {
        width: 250px;
    }

    .formRow-8 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 250px;
    }
    .formRow-8 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-8 > .formRight > input {
        width: 250px;
    }
    .formRow-8 > .formRight > textarea {
        width: 250px;
    }

    .formRow-6 > .formLeft {
        display: block;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        width: 250px;
    }
    .formRow-6 > .formRight {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 250px;
    }
    .formRow-6 > .formRight > input {
        width: 250px;
    }
}
@media(min-width: 768px) { /*md*/
    .formRow-12 > .formRight {
        width: 330px;
    }
    .formRow-12 > .formRight > textarea {
        width: 330px;
    }
    .formRow-12 > .formRight > input {
        width: 330px;
    }

    .formRow-8 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 250px;
    }
    .formRow-8 > .formRight {
        display: inline-block;
        text-align: left;
        width: 330px;
        padding-left: 7px;
    }
    .formRow-8 > .formRight > input {
        width: 330px;
    }
    .formRow-8 > .formRight > textarea {
        width: 330px;
    }

}
@media(min-width: 992px) { /*lg+*/
/*    .formRow-12 > .formRight {
        width: 430px;
    }*/
    .formRow-12 > .formRight > textarea {
        width: 430px;
    }
    .formRow-12 > .formRight > input {
        width: 430px;
    }

    .formRow-8 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 200px;
    }
    .formRow-8 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-8 > .formRight > input {
        width: 250px;
    }

    .formRow-6 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 150px;
    }
    .formRow-6 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-6 > .formRight > input {
        width: 250px;
    }

    .formRow-5 > .formLeft {
        display: block;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        width: 250px;
    }
    .formRow-5 > .formRight {
        display: block;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        width: 250px;
    }
    .formRow-5 > .formRight.lg-left {
        text-align: left;
    }

    .formRow-4 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 100px;
    }
    .formRow-4 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-4 > .formRight > input {
        width: 250px;
    }

}
@media(min-width: 1200px) { /*xl+*/
    .formRow-5 > .formLeft {
        display: inline-block;
        text-align: right;
        width: 150px;
    }
    .formRow-5 > .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .formRow-5 > .formRight > input {
        width: 250px;
    }

    .formRow-8 > .formLeft {
        width: 250px;
    }
}

[class^="formRow"] > .formRight > input[type="checkbox"] {
    width: initial;
}


.calendarRow {
    width: 100%;
    padding-bottom: 5px;
}
.calendarRow .formLeft {
    font-weight: bold;
    vertical-align: top;
}
.calendarRow .formRight {
}
.recentCalendars {
    width: initial;
    margin-left: initial;
    margin-right: initial;
}

@media(min-width: 320px) {
    .recentCalendars {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .calendarRow {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .calendarRow .formLeft {
        display: block;
        text-align: left;
        width: 100%;
    }
    .calendarRow .formRight {
        display: block;
        text-align: left;
        width: 100%;
    }
    .calendarRow > .formRight > input {
        width: 100%;
    }
 }
@media(min-width: 768px) {
    .calendarRow {
        width: 360px;
    }
    .calendarRow .formLeft {
        display: inline-block;
        text-align: right;
        width: 165px;
    }
    .calendarRow .formRight {
        display: inline-block;
        text-align: left;
        width: 170px;
        padding-left: 7px;
    }
    .calendarRow > .formRight > input {
        width: 170px;
    }
    .recentCalendars {
        width: initial;
        margin-left: initial;
        margin-right: initial;
    }
 }
@media(min-width: 992px) {
    .calendarRow {
        width: 480px;
    }
    .calendarRow .formLeft {
        display: inline-block;
        text-align: right;
        width: 165px;
    }
    .calendarRow .formRight {
        display: inline-block;
        text-align: left;
        width: 250px;
        padding-left: 7px;
    }
    .calendarRow > .formRight > input {
        width: 250px;
    }
    .recentCalendars {
        width: initial;
        margin-left: initial;
        margin-right: initial;
    }
 }
@media(min-width: 1200px) {
    .calendarRow {
        width: 380px;
    }
    .calendarRow .formLeft {
        display: inline-block;
        text-align: right;
        width: 165px;
    }
    .calendarRow .formRight {
        display: inline-block;
        text-align: left;
        width: 185px;
        padding-left: 7px;
    }
    .calendarRow > .formRight > input {
        width: 185px;
    }
    .recentCalendars {
        width: initial;
        margin-left: initial;
        margin-right: initial;
    }
 }
@media(min-width: 1400px) {
    .calendarRow {
        width: 440px;
    }
    .calendarRow .formLeft {
        display: inline-block;
        text-align: right;
        width: 165px;
    }
    .calendarRow .formRight {
        display: inline-block;
        text-align: left;
        width: 240px;
        padding-left: 7px;
    }
    .calendarRow > .formRight > input {
        width: 240px;
    }
    .recentCalendars {
        width: initial;
        margin-left: initial;
        margin-right: initial;
    }
 }