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

   * INPUT, SELECT & TEXTAREA

   * BUTTONS: ALL
   * BUTTONS: PRIMARY
   * BUTTONS: SECONDARY
   * BUTTONS: CANCEL
   * BUTTONS: CANCEL IN WIZARDS WITH SECONDARY SIBLING
   * BUTTONS: LINK
   * 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.

 */

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

.form input:not([type="checkbox"]):not([type="radio"]):not([class*="select2"]),
.form select,
.form textarea {
    display: block;
    outline-width: 0;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: #f8f7f7; /* var(--color--borders--1) */
    width: 100%;
    max-width: 100%;
    background-color: #f8f7f7;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    font-style: normal;
    color: #3d3936; /* var(--color--text--2) */
    -webkit-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.form input:not([type="checkbox"]):not([type="radio"]):focus,
.form select:focus,
.form textarea:focus {
    border-color: #D8D8D8; /* var(--color--borders--2) */
}

.form .hasErrors input:not([type="checkbox"]):not([type="radio"]),
.form .hasErrors select,
.form .hasErrors textarea {
    border-color: #BC2828; /* var(--color--error) */
}

::-webkit-input-placeholder {
    opacity: 1;
    color: #3d3936;
}

::-moz-placeholder {
    opacity: 1;
    color: #3d3936;
}

:-ms-input-placeholder {
    opacity: 1;
    color: #3d3936;
}

:-moz-placeholder {
    opacity: 1;
    color: #3d3936;
}

.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;
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .form select[multiple],
    .form textarea {
        height: 83px;
    }

}

/* Media query to target only desktop */
@media all and (min-width:1025px) {
    .form select[multiple],
    .form textarea {
        height: 112px;
    }

}
.form select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background:url(../images/arrow-select.svg) no-repeat center right 5px #f8f7f7;
    padding-right: 30px;
}
.form select[multiple] option {
    background-color: inherit;
}

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

/* INPUT, SELECT & TEXTAREA: SIZING
   ========================================================================== */
.form textarea {
    padding: 9px 8px;
}

/* Media query to target only mobile */
@media all and (max-width:750px) {
    .form input {
        padding: 11px 8px; /* We achieve 44px height trough padding */
    }

    .body:not(.body--Firefox) .form input[type="date"],
    .body:not(.body--Firefox) .form input[type="datetime-local"],
    .body:not(.body--Firefox) .form input[type="month"],
    .body:not(.body--Firefox) .form input[type="time"],
    .body:not(.body--Firefox) .form input[type="week"] {
        padding: 9px 8px; /* We achieve 44px height trough padding */
    }

    .form input[type="file"] {
        padding: 8px 8px 8px 4px; /* We achieve 44px height trough padding */
    }

    .body--Firefox .form input[type="file"] {
        padding: 6px 4px; /* We achieve 44px height trough padding */
    }

    .form select:not([multiple]) {
        height: 44px; /* needed for macOS */
        padding: 11px 8px 10px 4px; /* We achieve 44px height trough padding */
    }

    .body--Firefox .form select {
        padding: 11px 8px 10px 4px; /* We achieve 44px height trough padding */
    }

    .body--ismobile .form select[multiple] {
        height: 44px; /* needed for macOS */
        padding: 11px 8px 10px 4px; /* We achieve 44px height trough padding */
    }

    .form select[multiple] option {
        padding: 11px 8px; /* We achieve 44px height trough padding */
    }

}

/* Media query to target tablet and desktop */
@media all and (min-width:751px) {
    .form input {
        padding: 9px 8px; /* We achieve 40px height trough padding */
    }

    .body:not(.body--Firefox) .form input[type="date"],
    .body:not(.body--Firefox) .form input[type="datetime-local"],
    .body:not(.body--Firefox) .form input[type="month"],
    .body:not(.body--Firefox) .form input[type="time"],
    .body:not(.body--Firefox) .form input[type="week"] {
        padding: 7px 8px; /* We achieve 40px height trough padding */
    }

    .form input[type="file"] {
        padding: 6px 8px 6px 4px; /* We achieve 40px height trough padding */
    }

    .body--Firefox .form input[type="file"] {
        padding: 4px 4px; /* We achieve 40px height trough padding */
    }

    .form select:not([multiple]) {
        height: 40px; /* needed for macOS */
        padding: 9px 8px 9px 4px; /* We achieve 40px height trough padding */
    }

    .body--Firefox .form select {
        padding: 9px 8px 8px 4px; /* We achieve 40px height trough padding */
    }

    .body--ismobile .form select[multiple] {
        height: 40px; /* needed for macOS */
        padding: 9px 8px 8px 4px; /* We achieve 40px height trough padding */
    }

    .form select[multiple] option {
        padding: 9px 8px; /* We achieve 40px height trough padding */
    }

}

/* BUTTONS: ALL
   ========================================================================== */
button,
input[type="submit"],
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    display: inline-block;
    outline: 0;
    border-radius: 20px;
    border-width: 2px;
    border-style: solid;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    text-transform: initial;
    text-decoration: none;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    cursor: pointer;
}

button,
input[type="submit"],
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    padding: 8px 16px; /* We achieve 40px height trough padding */
    height: 40px;
}

button:hover,
button:active,
input[type="submit"]:hover,
input[type="submit"]: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,
input[type="submit"]: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--medium {
    padding: 4px 16px;
}

.smallButton,
.button--small {
    padding: 2px 4px;
    font-size: 11px;
    height: 29px;
}
.smallButton:hover,
.button--small:hover {
    background-origin: border-box !important;
}

.removeFile {
    margin-left: 16px;
    padding: 2px 4px;
}

.button__icon {
    float: left;
    margin-right: 8px;
    line-height: inherit !important;
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    .button__icon {
        float: none;
        vertical-align: bottom;
    }

}

/* BUTTONS: PRIMARY
   ========================================================================== */
button,
button:link,
button:visited,
input[type="submit"],
input[type="submit"]:link,
input[type="submit"]:visited,
.button,
.button:link,
.button:visited,
.button--default,
.button--default:link,
.button--default: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 {
    position: relative;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border: none;
    border-radius: 20px;
    padding: 12px 22px;
    transition: background 0.3s ease;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

button::after,
.button::after,
.button--default::after,
input[type="submit"]::after,
.genericButton::after,
.saveButton::after,
.nextButton::after,
.gotoButton::after,
.redirectUrlButton::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border-radius: 18px;
    z-index: -1;
    transition: background 0.3s ease;
}

button:hover::after,
button:active::after,
input[type="submit"]:hover::after,
input[type="submit"]:active::after,
.button:hover::after,
.button:active::after,
.button--default:hover::after,
.button--default:active::after,
.genericButton:hover::after,
.genericButton:active::after,
.saveButton:hover::after,
.saveButton:active::after,
.nextButton:hover::after,
.nextButton:active::after,
.gotoButton:hover::after,
.gotoButton:active::after,
.redirectUrlButton:hover::after,
.redirectUrlButton:active::after {
    background: #FFFFFF;
}

button:focus::after,
input[type="submit"]:focus::after,
.button:focus::after,
.button--default:focus::after,
.genericButton:focus::after,
.saveButton:focus::after,
.nextButton:focus::after,
.gotoButton:focus::after,
.redirectUrlButton:focus::after {
    background: #FFFFFF;
}

button.tox-tbtn::after, button.tox-mbtn::after, button.tox-button::after, button.tox-swatch::after {
    content: none;
}

/* BUTTONS: SECONDARY
   ========================================================================== */
.button--secondary,
.button--secondary:link,
.button--secondary:visited,
.partialSaveButton,
.partialSaveButton:link,
.partialSaveButton:visited,
.previousButton,
.previousButton:link,
.previousButton:visited,
.homeButton,
.homeButton:link,
.homeButton:visited,
.clearButton,
.clearButton:link,
.clearButton:visited {
    position: relative;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border: none;
    border-radius: 20px;
    padding: 12px 22px;
    transition: background 0.3s ease;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button--secondary::after,
.partialSaveButton::after,
.previousButton::after,
.homeButton::after,
.clearButton::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #FFFFFF;
    border-radius: 18px;
    z-index: -1;
    transition: background 0.3s ease;
}

.button--secondary:hover::after,
.button--secondary:active::after,
.partialSaveButton:hover::after,
.partialSaveButton:active::after,
.previousButton:hover::after,
.previousButton:active::after,
.homeButton:hover::after,
.homeButton:active::after,
.clearButton:hover::after,
.clearButton:active::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

.button--secondary:focus::after,
.partialSaveButton:focus::after,
.previousButton:focus::after,
.homeButton:focus::after,
.clearButton:focus::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

/* BUTTONS: CANCEL
   ========================================================================== */
.button--cancel,
.button--cancel:link,
.button--cancel:visited,
.cancelButton,
.cancelButton:link,
.cancelButton:visited {
    position: relative;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border: none;
    border-radius: 20px;
    padding: 12px 22px;
    transition: background 0.3s ease;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button--cancel::after,
.cancelButton::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #FFFFFF;
    border-radius: 18px;
    z-index: -1;
    transition: background 0.3s ease;
}

.button--cancel:hover::after,
.button--cancel:active::after,
.cancelButton:hover::after,
.cancelButton:active::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

.button--cancel:focus::after,
.cancelButton:focus::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

/* BUTTONS: CANCEL IN WIZARDS WITH SECONDARY SIBLING
   ========================================================================== */
.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton,
.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:link,
.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:visited {
    position: relative;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border: none;
    border-radius: 20px;
    padding: 12px 22px;
    transition: background 0.3s ease;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #FFFFFF;
    border-radius: 18px;
    z-index: -1;
    transition: background 0.3s ease;
}

.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:hover::after,
.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:active::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:focus::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

.button-bar .button--secondary + .button--cancel,
.button-bar .button--secondary + .button--cancel:link,
.button-bar .button--secondary + .button--cancel:visited {
    position: relative;
    background: linear-gradient(to right, #B0E14E, #78BF26);
    border: none;
    border-radius: 20px;
    padding: 12px 22px;
    transition: background 0.3s ease;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.button-bar .button--secondary + .button--cancel::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #FFFFFF;
    border-radius: 18px;
    z-index: -1;
    transition: background 0.3s ease;
}

.button-bar .button--secondary + .button--cancel:hover::after,
.button-bar .button--secondary + .button--cancel:active::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

.button-bar .button--secondary + .button--cancel:focus::after {
    background: linear-gradient(to right, #B0E14E, #78BF26);
}

/* BUTTONS: LINK LIKE
   ========================================================================== */
.button--link {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 14px;
    text-transform: uppercase;
}

.button--link + .button {
    margin-left: 8px;
}

.button--link,
.button--link:link,
.button--link:visited {
    border-color: transparent;
    background-color: transparent;
    color: #00b142; /* var(--color--clickable) */
}

.button--link:hover,
.button--link:active {
    border-color: transparent;
    background-color: transparent;
    color: #00b142; /* var(--color--clickable) */
    text-decoration: underline;
}

.button--link:focus {
    border-color: transparent;
    background-color: transparent;
    color: #00b142; /* var(--color--clickable) */
}

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

.button--action-secondary,
.button--action-secondary:link,
.button--action-secondary:visited {
    background-color: #FFFFFF;
    color: #8F98A7;
}

.button--action-secondary:hover,
.button--action-secondary:active {
    background-color: #FFFFFF;
    color: #8F98A7;
}

.button--action-secondary:focus {
    background-color: #FFFFFF;
    color: #8F98A7;
}

.button--action-disabled,
.button--action-disabled:link,
.button--action-disabled:visited {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    text-transform: uppercase; /* var(--color--borders--1) */
    font-size: 13px;
    pointer-events: none;
}

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

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

.button--action-secondary,
.button--action-secondary:link,
.button--action-secondary:visited {
    border-color: #8f98a7; /* var(--color--borders--1) */
}

.button--action-secondary:hover,
.button--action-secondary:active {
    border-color: #8f98a7; /* var(--color--borders--1) */
}

.button--action-secondary:focus {
    border-color: #8f98a7; /* var(--color--borders--1) */
}

.removeFile,
.removeFile:link,
.removeFile:visited,
.removeFile:hover,
.removeFile:active,
.removeFile:focus {
    border-color: transparent;
    background-color: transparent;
    color: #e87928; /* var(--color--secondary) */
}
.body--Firefox button,
.body--Firefox button:hover,
.body--Firefox .button,
.body--Firefox .button:hover,
.body--Safari button,
.body--Safari button:hover,
.body--Safari .button,
.body--Safari .button:hover {
    border-image-slice: 0 !important;
}