/* ==========================================================================
   11_FORM ELEMENTS
   --------------------------------------------------------------------------
   * README

   * INPUT, SELECT & TEXTAREA

   * BUTTONS: ALL
   * BUTTONS: PRIMARY
   * BUTTONS: SECONDARY
   * BUTTONS: ACTIONS
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Form Elements default styles.
 * That means they apply to the actual elements inside the Form HTML component,
 * and therefore, they apply only to the pages that display that component.

 * If you need to deal with an exception to these Form Elements default
 * styles, you should manage it by adding a .X--modifier class to the .X element
 * and develop the given exception nested to this .X--modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with a cross-browser fix for a Form Element, you should
 * develop it in this stylesheet, under the correspondent subtitle, separating
 * them in Structure, Behaviour or Appearance styles as appropriate.

 */

/* INPUT, SELECT & TEXTAREA
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
.form input,
.form select,
.form textarea {
    width: 100%;
    max-width: 100%;
}

.body--login-detail .form input,
.body--login-detail .form select,
.body--login-detail .form textarea {
    max-width: 360px;
    border: 1px solid var(--color--grey--light);
}

@media all and (max-width: 750px) {

    .body--login-detail .form input,
    .body--login-detail .form select,
    .body--login-detail .form textarea {
        max-width: 100%;
    }
}

.form input {
    /*height:42px;*/
    padding: 11px 10px;
}

.form input[type="date"],
.form input[type="datetime-local"],
.form input[type="month"],
.form input[type="time"],
.form input[type="week"] {
    padding: 9px 10px 8px;
}

.form input[type="file"] {
    padding: 9px 10px 9px 9px;
}

.body--Firefox .form input {
    /*height:42px;*/
    padding: 12px 10px;
}

.body--Firefox .form input[type="file"] {
    padding: 5px 4px 4px;
}

.form input[type="checkbox"] {
    width: auto;
    padding: 0;
}

.form input[type="radio"] {
    width: auto;
    padding: 0;
}

.form select {
    height: 42px;
    padding: 10px 10px 10px 6px;
}

.body--Firefox .form select {
    padding: 10px 10px 9px 6px;
}

.form select[multiple] option {
    padding: 11px 10px;
}

.form select[multiple],
.form textarea {
    height: 112px;
}

.form select[multiple] {
    padding: 0
}

.form textarea {
    padding: 8px 10px;
}

.select2-container .selection .select2-selection--single {
    height: 42px;
}

.select2-container--default .selection .select2-selection--single {
    border: 1px solid #E3E3E3;
    border-radius: 0;
    padding: 6px 10px 10px 0px;
    ;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #131313;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none;
    height: 20px;
    width: 10px;
    background-image: url("../images/arrow.svg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form--step1 .DateFormField input {
    margin-top: 6px;
    padding: 10px 10px 10px;
}

/*-FileField-*/

.form input[type="file"] {
    height: 40px;
    padding: 0;
    line-height: calc(var(--fields--height) - (var(--spacer--xs) * 2) - 2px);
    /* ↳ Calculating the line height to take all the space that is not border or padding inside the element height */
}

.form input[type="file"]::-webkit-file-upload-button {
    margin: auto 8px auto 0;
    outline: 0;
    border: none;
    background-color: #e9e9e9;
    color: var(--buttons--secondary--default--color--font);
    padding: 8px;
    font-family: var(--font--alt);
    font-size: var(--buttons--font--size);
    line-height: calc(var(--sizing--basis) * 6);
    font-weight: var(--font--weight--bold);
    text-transform: initial;
    text-decoration: none;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 250ms ease-in-out;
    height: 100%;
}

.form input[type="file"]::file-selector-button {
    margin: auto 8px auto 0;
    outline: 0;
    border: none;
    background-color: #e9e9e9;
    color: var(--buttons--secondary--default--color--font);
    padding: 8px;
    font-family: var(--font--alt);
    font-size: var(--buttons--font--size);
    line-height: calc(var(--sizing--basis) * 6);
    font-weight: var(--font--weight--bold);
    text-transform: initial;
    text-decoration: none;
    text-align: center;
    vertical-align: baseline;
    cursor: pointer;
    transition: all 250ms ease-in-out;
    height: 100%;
}

.filefield__title .description {
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    padding-bottom: 0;
}

.Section .filefield__title {
    padding-bottom: 0;
}

.fieldSpec.field--padding-bottom--none {
    padding-bottom: 0;
}

.fieldSpec.form__item--odd.RadioButtonListFormField.field--padding-bottom--none {
    padding-bottom: 8px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.form input:not([type="checkbox"]):not([type="radio"]),
.form select,
.form textarea {
    display: block;
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

/* Appearance
   -------------------------------------------------------------------------- */
.form input,
.form select,
.form textarea {
    outline-width: 0;
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--color--site);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    border-left-color: transparent;
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #131313;
}

.form--alt input,
.form--alt select,
.form--alt textarea {
    border-color: var(--color--borders);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
}

::-webkit-input-placeholder {
    opacity: 1;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #999999;
}

::-moz-placeholder {
    opacity: 1;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #999999;
}

:-ms-input-placeholder {
    opacity: 1;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #999999;
}

:-moz-placeholder {
    opacity: 1;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #999999;
}

.body--Firefox .form input[type="file"] {
    line-height: 18px;
}

.form input[type="file"]::-ms-value {
    border-width: 0;
    background-color: transparent;
}

.form input[type="file"]::-ms-browse {
    border-width: 0;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.form select[multiple] option {
    background-color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    font-style: normal;
    color: #131313;
}

.form textarea {
    line-height: 150%;
}

.form--alt input:focus,
.form--alt select:focus,
.form--alt textarea:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

.form .hasErrors input,
.form .hasErrors select,
.form .hasErrors textarea {
    border-color: #EE8080;
}

/* BUTTONS: ALL
   ========================================================================== */

/* Structure
   -------------------------------------------------------------------------- */
button,
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    padding: 10.5px 10px;
}

button[id*="Remove_"],
.removeFile,
.smallButton,
.button--small {
    padding: 2px 4px !important;
}

.button__icon {
    float: left;
    margin: -2px 8px -2px 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */
button,
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

/* Appearance
   -------------------------------------------------------------------------- */
button,
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    outline: 0;
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    font-family: inherit;
    font-size: 16px;
    line-height: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
}

button:hover,
button:active,
.genericButton:hover,
.genericButton:active,
.saveButton:hover,
.saveButton:active,
.nextButton:hover,
.nextButton:active,
.gotoButton:hover,
.gotoButton:active,
.redirectUrlButton:hover,
.redirectUrlButton:active,
.previousButton:hover,
.previousButton:active,
.homeButton:hover,
.homeButton:active,
.clearButton:hover,
.clearButton:active,
.cancelButton:hover,
.cancelButton:active,
.button:hover,
.button:active {
    text-decoration: none;
}

button:focus,
.genericButton:focus,
.saveButton:focus,
.nextButton:focus,
.gotoButton:focus,
.redirectUrlButton:focus,
.previousButton:focus,
.homeButton:focus,
.clearButton:focus,
.cancelButton:focus,
.button:focus {
    text-decoration: none;
}

button[id*="Remove_"],
.removeFile,
.smallButton,
.button--small {
    font-size: 11px !important;
}

@media all and (max-width:768px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .button__icon {
        float: none;
    }

}

/* BUTTONS: PRIMARY
   ========================================================================== */

/* Appearance
   -------------------------------------------------------------------------- */
button,
button:link,
button:visited,
.genericButton,
.genericButton:link,
.genericButton:visited,
.saveButton,
.saveButton:link,
.saveButton:visited,
.nextButton,
.nextButton:link,
.nextButton:visited,
.gotoButton,
.gotoButton:link,
.gotoButton:visited,
.redirectUrlButton,
.redirectUrlButton:link,
.redirectUrlButton:visited,
.button--default,
.button--default:link,
.button--default:visited {
    border-color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: #FFFFFF;
}

button:hover,
button:active,
.genericButton:hover,
.genericButton:active,
.saveButton:hover,
.saveButton:active,
.nextButton:hover,
.nextButton:active,
.gotoButton:hover,
.gotoButton:active,
.redirectUrlButton:hover,
.redirectUrlButton:active,
.button--default:hover,
.button--default:active {
    border-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: #FFFFFF;
}

button:focus,
.genericButton:focus,
.saveButton:focus,
.nextButton:focus,
.gotoButton:focus,
.redirectUrlButton:focus,
.button--default:focus {
    border-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: #FFFFFF;
}

/* BUTTONS: SECONDARY
   ========================================================================== */

/* Appearance
   -------------------------------------------------------------------------- */
.previousButton,
.previousButton:link,
.previousButton:visited,
.homeButton,
.homeButton:link,
.homeButton:visited,
.clearButton,
.clearButton:link,
.clearButton:visited,
.cancelButton,
.cancelButton:link,
.cancelButton:visited,
.button--cancel,
.button--cancel:link,
.button--cancel:visited {
    border-color: var(--color--borders);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: transparent;
    color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
}

.previousButton:hover,
.previousButton:active,
.homeButton:hover,
.homeButton:active,
.clearButton:hover,
.clearButton:active,
.cancelButton:hover,
.cancelButton:active,
.button--cancel:hover,
.button--cancel:active {
    border-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: #FFFFFF;
}

.previousButton:focus,
.homeButton:focus,
.clearButton:focus,
.cancelButton:focus,
.button--cancel:focus {
    border-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--65);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: #FFFFFF;
}

/* BUTTONS: ACTIONS
   ========================================================================== */

/* Appearance
   -------------------------------------------------------------------------- */
.button--action-default,
.button--action-default:link,
.button--action-default:visited {
    border-color: transparent;
    background-color: transparent;
    color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
}

.button--action-default:hover,
.button--action-default:active {
    border-color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--15);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
}

.button--action-default:focus {
    border-color: var(--color--buttons--30);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    background-color: var(--color--buttons--15);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
    color: var(--color--buttons);
    /* Theme color defined in #16, with an override for each Library use as IE fallback */
}

.button--action-secondary,
.button--action-secondary:link,
.button--action-secondary:visited {
    border-color: transparent;
    background-color: transparent;
    color: #828282;
}

.button--action-secondary:hover,
.button--action-secondary:active {
    border-color: #828282;
    background-color: #ECECEC;
    color: #828282;
}

.button--action-secondary:focus {
    border-color: #D9D9D9;
    background-color: #ECECEC;
    color: #828282;
}

.button--action-disabled,
.button--action-disabled:link,
.button--action-disabled:visited {
    border-color: transparent;
    background-color: transparent;
    color: #828282;
}

.button--action-disabled:hover,
.button--action-disabled:active {
    border-color: transparent;
    background-color: transparent;
    color: #828282;
}

.button--action-disabled:focus {
    border-color: transparent;
    background-color: transparent;
    color: #828282;
}