.modalWrapper {
    box-sizing: border-box;
    display: none;
    position: absolute;
    /* The .jqmOverlay z-index is equal to the .modalWrapper z-index - 1. Thus, this value must be
     * > 1 because a z-index of 0 for the .jqmOverlay doesn't work. */
    z-index: 999;
    left: 50%;
    width: 650px;
    margin-left: -325px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: visible;
    max-height: fit-content;
    background-color: #fff;
    text-align: left;
    font-size: 14px;
    border: 1px solid #dcdcdc;

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 6px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 6px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 6px;

    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.5);
}

.modalWrapper .ui-datepicker {
    z-index: 10000 !important;
}

.modalWrapper *,
.modalWrapper *:before,
.modalWrapper *:after {
    box-sizing: inherit;
}

.jqmOverlay {
    background-color: #000;
}

.modalHead {

    min-height: 54px;

    /* fallback */
    background-color: #ffffff;

    border-bottom: 1px solid #dcdcdc;
    cursor: move;
}

.modalHead h3,
.modalHead .h3 {
    font-weight: bold;
    color: #333;
    padding: 17px 20px;
    font-size: 20px;
}

.modalHead .headerActions {
    float: right;
    padding: 10px 20px;
}

.modalFoot {
    min-height: 54px;
    background-color: #efefef;
    border-top: 1px solid #dcdcdc;
}

.modalFoot .footerActions {
    float: right;
    padding: 10px 20px;
}

.modalFoot .footerActions a {
    margin-left: 5px;
}

.modalBody {
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.bodySection {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    padding-top: 20px;
}

.bodySection.last {
    border-bottom: none;
}

.bodySection .bodySectionRow {
    margin-bottom: 20px;
}

.bodySection .bodySectionRow:after {
    content: "";
    display: table;
    clear: both;
}

/* Notification Bar */

.modalNotificationBar {
    display: none;
    width: 100%;
    font-weight: bold;
    padding: 15px;
    margin-top: 10px;
}

.modalNotificationBar.success {
     background-color: #effeef;
}

.modalNotificationBar.fail {
    background-color: #FFB56B;
    color: #694000;
}

/* Warning Message */

.modalWarningMessage {
    width: 100%;
    background-color: #dd0000;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}

.modalWarningMessage a {
    color: #fff;
}

/*
 * Labels
 * There are different label classes for the various components (input, textarea, custom, etc.)
 */

.bodySection .bodySectionRow label {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    padding: 0 15px 0 0;
    float: left;
    text-align: right;
    width: 25%;
}

.bodySection .bodySectionRow label.reset {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
    padding: 0;
    border: 0;
    float: none;
    text-align: start;
    width: auto;
    vertical-align: baseline;
}

.bodySection .bodySectionRow label.inputLabel {
    padding-top: 6px;
}

.bodySection .bodySectionRow label.selectLabel {
    padding-top: 2px;
}

.bodySection .bodySectionRow label.checkboxLabel {
    padding-top: 0px;
}

.bodySection .bodySectionRow label.multiSelectLabel {
    padding-top: 6px;
}

.bodySection .bodySectionRow label.select2Label {
    padding-top: 6px;
}

.bodySection .bodySectionRow label.multiSelect2Label {
    padding-top: 9px;
}

.bodySection .bodySectionRow label.chooseFileLabel {
    padding-top: 10px;
}

.bodySection .bodySectionRow label.titleLabel,
.bodySection .bodySectionRow label.infoLabel {
    padding-top: 0;
}

/* Custom Components */

.bodySection .bodySectionRow textarea {
    resize: vertical;
}

.bodySection .bodySectionRow .chooseFileContainer,
.bodySection .bodySectionRow .fileContainer {
    display: inline-block;
    width: 360px;
    border: 1px solid #ccc;

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 4px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 4px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 4px;
}

.bodySection .bodySectionRow .chooseFileContainer {
    padding: 5px 132px;
}

.bodySection .bodySectionRow .fileContainer {
    padding: 5px;
    height: 37px;
    line-height: 25px;
    font-size: 14px;
}

.bodySection .bodySectionRow .fileContainer #filename {
    display: inline-block;
    width: 90%;
    float: left;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.bodySection .bodySectionRow .textContainer {
    float: left;
    width: 60%;
    padding: 6px;
    font-size: 14px;
}

.bodySection .bodySectionRow span.title {
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
}

.bodySection .bodySectionRow span.info {
    font-size: 14px;
    font-weight: normal;
    padding: 5px;
}

.bodySection .bodySectionRow select.select2 {
    width: 360px;
}

select.select2Field {
    width: 350px;
}

form label.isRequiredField:after {
  content: "*";
  color: #ff6262;
  font-weight: bold;
}

.fullWidth {
    width: 100%;
}

.primaryContactModalLabel {
    min-width: 110px;
    font-weight: bold;
    display: inline-block;
    margin-top: 1em;
}