/*
 * Rules for SyncShield forms and any controls/components that are mostly used inside them
 */

/*
 * Save/cancel button area used by inline-form.
 * Try to make the buttons align with the right edge of the input fields.
 */
.form-controls {
    float: right;
}

/* for cases where the form needs to reserve one column e.g. for help icons */
.form-margin .form-controls {
    margin-right: 8.33333333%;
}

.form-errors [ng-message], .form-errors ng-message {
    color: #b94a48;
}

.required-field:after {
    content: "*";
    color: gray;
}

/*
 * Use this to make form controls narrow enough to contain an icon on the right
 * side. If any control needs an icon, it probably makes sense to make all
 * fields narrow in the form.
 */
.narrow-control {
    width: 100%;
    margin-right: -26px;
    padding-right: 32px;
    display: inline-block !important;
    vertical-align: middle !important;
}

.narrow-control-icon {
    font-size: 19px;
    vertical-align: top;
    margin-top: 5px;
    max-height: 32px;
}

.narrow-control-icon:hover {
    color: #3276b1;
    cursor: pointer;
}

/*
 * A directive that appears as an icon until clicked. This is the primary use for .narrow-control
 */
help, inline-help {
    display: inline;
}

inline-help .help-icon {
    vertical-align: text-bottom;
}

.help-content {
    opacity: 1;
    color: green;
}

help .help-content {
    display: block;
    padding-top: 0.2em;
    width: 90%;
}

inline-help .help-icon {
    font-size: 1.3em;
    padding-left: 3px;
    cursor: pointer;
}

input-boolean.form-control {
    border: none;
    padding: 6px 0;
}

input-boolean.form-control[disabled] {
   background-color: inherit;
   cursor: inherit;
}

input-boolean.form-control[disabled] * {
   cursor: not-allowed;
}

/* 
 * DEPRECATED: use narrow-control instead, this is too confusing and requires an unnecessary number of overrides
 *
 * override Bootstrap styling so that the help icon can be placed after input
 */
.help-group input,
.help-group select,
.help-group textarea,
.help-group input-number,
.help-group input-number-type2,
.help-group input-text,
.help-group input-boolean {
    width: 90% !important;
    display: inline-block !important;
    vertical-align: middle !important;
    padding-right: 5px !important;
}

.help-group .input-group {
    width: 90% !important;
}

.help-group .input-group input {
    width: 100% !important;
}

/* Fix custom form controls that use nested inputs */
.help-group input-number input[type="range"] {
    width: 100% !important;
}

.help-group .input-radio-password input[type="radio"] {
    width: 15px !important;
}

.help-group label {
    display: block;
}

reusable-form .input-loading {
    text-align: center;
    margin-bottom: 10px;
}

wizard-step-group > reusable-form .input-loading {
    display: none;
}

toggle-section .toggle-icon {
    margin-right: 5px;
}

variable-dropdown.custom-variable + help {
    display: none;
}

key-values .key-value-row {
    margin-bottom: 15px;
}

key-values .add-new-row {
    margin-top: -5px;
}

key-values .no-rows {
    margin-top: 12px;
}


key-values .icon-column {
    line-height: 32px; /* the same height as that of Bootstrap's .form-control */
}

key-values .icon-column a {
    color: inherit;
}

/*
 * When there are multiple form controls under the same label but using Bootstrap .row would mess up something
 */
.multicontrol-row {
    margin-bottom: 10px;
}

.add-new-row-link hr {
    margin-top: 10px;
}

.form-control-feedback.validation-icon {
    padding-right: 8px;
}

/*
 * Bootstrap examples use glyphicon. Make FontAwesome icons slightly larger
 */
.form-control-feedback.validation-icon i {
    font-size: 120%;
}

field-warning {
    display: none;
}

field-warning.warning-on {
    display: inline;
}

.has-error field-warning.warning-on {
    display: none;
}

.readonly-form .control-label {
    font-weight: bold;
}