/* This stylesheet contains fields and form styling. It DOES NOT contain individual inputs,
   they live over in the applejack-inputs stylesheet. */

/* ------------------------- Fields ------------------------- */
div.field {
    display: flex;
    flex-direction: row;
    padding: 5px 0px 5px 0px;
    align-items: center;
}

div.field > div.label-container {
    color: black;
    margin-right: 10px;
    margin: 0px 12px 0px 12px;
}

div.field > div.field-container {
    margin: 0px 12px 0px 12px;
}

div.field > div.label-container > label {
    font-weight: normal;
    margin: 0px;
}

@media (max-width: 767px) {
    div.field > div.label-container > label {
        display: inline;
    }
}

div.field > div.label-container .formHint {
    color: #696b68;
    width: 100%;
    font-size: 15px;
}

div.field > div.label-container .formHint.redTxt {
    color: #ff0000;
}

/* Stack radio options into a column */
div.field > div.field-container > .radioOptions {
    display: flex;
    flex-direction: column;
}

/* Must be final rule for all field styles */
div.field.hidden {
    display: none;
}

div.field > span {
    width: 65%;
}

@media (max-width: 991px ) {
    div.field > span {
        width: 60%;
        word-break: break-word;
    }
}

/* ------------------------- Form ------------------------- */
form > p {
    margin-bottom: 20px;
}

/* Add required asterisk */
div.field.requiredField > div.label-container > label::before {
    font-family: "Glyphicon Halflings";
    font-size: 24px;
    color: #D5002B;
    content: "\002a";
}

div.field.requiredField > div.label-container > label {
    padding-top: 0px;
}

/* ------------------------- displayFieldset ------------------------- */
div.displayFieldSet {
    margin-bottom: 20px;
}

div.displayFieldSet div.field > .label-container,
div.displayFieldSet div.field > label  {
    flex-basis: 33%;
    margin: 0px 6px 0px 6px;
    font-weight: normal;
    color: #621a4b;
}

div.displayFieldSet div.field {
    min-width: 800px;
    flex-basis: 66%;
    min-height: 36px;
    align-items: baseline;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    div.displayFieldSet div.field {
        min-width: auto;
    }
}

/* ------------------------- Fieldset ------------------------- */
div.displayFieldSet,
fieldset {
    margin-bottom: 20px;
}

/* Center fields */
fieldset div.field {
    justify-content: center;
    align-items: flex-start;
}

div.label-container label {
    padding-top: 7px;
}

/* Labels have 30%, inputs have 70 of space */
fieldset div.field .label-container {
    flex-basis: 33%;
    text-align: right;
}

fieldset div.field .input-container {
    display: flex;
    flex-basis: 66%;
    min-height: 36px;
    align-items: center;
    flex-wrap: wrap;
}

/* Because the container wraps, set some elements to 100%
   width so they appear on their own line */
fieldset div.field .input-container .fieldError,
fieldset div.field .input-container .formHint,
fieldset div.field .input-container .formWarning {
    color: #696b68;
    width: 100%;
}

fieldset.repeatingGroup.ui-accordion-content {
    border: none;
}

@media (max-width: 767px) {
    fieldset div.field .input-container .fieldError,
    fieldset div.field .input-container .formHint,
    fieldset div.field .input-container .formWarning {
        word-break: break-word;
    }
}

.fieldError,
fieldset div.field .input-container .fieldError {
    color: #D5002B;
}

.formWarning::before {
    font-family: 'Glyphicons Halflings';
    margin-right: 5px;
    content: '\e107';
}

div.notice,
.gel-revealed-section {
    background-color: #f4f3f0;
    border-top: 1px solid #c5beb7;
    border-bottom: 1px solid #c5beb7;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.notice {
    text-align: center;
}