/* ==========================================================================
   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: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #e1e1e1; /* var(--color--borders) */
    width: 100%;
    max-width: 100%;
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    font-style: normal;
    color: #565656;
    -webkit-transition: all 250ms ease-in-out;
    -ms-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: #666666; /* var(--color--secondary) */
}

.form .datasetfieldSpec.hasErrors {
    padding-bottom: 0;
}
.form .fieldSpec.MultipleDatasetEntryFormField.hasErrors .errorMessage {
    padding-top: 3px;
    padding-bottom: 16px;
}

.form div:not(.MultipleDatasetEntryFormField).hasErrors input:not([type="checkbox"]):not([type="radio"]),
.form div:not(.MultipleDatasetEntryFormField).hasErrors select,
.form div:not(.MultipleDatasetEntryFormField).hasErrors textarea,
.form div.MultipleDatasetEntryFormField.hasErrors .SelectFormField.hasErrors select,
.form div.MultipleDatasetEntryFormField.hasErrors .SelectFormField.hasErrors select,
.form div.MultipleDatasetEntryFormField.hasErrors .SelectFormField.hasErrors textarea,
.form div.MultipleDatasetEntryFormField.hasErrors .SelectFormField.hasErrors input:not([type="checkbox"]):not([type="radio"]){
    border-color: #F93535;
}

.form div.MultipleDatasetEntryFormField.hasErrors .SelectFormField.hasErrors .select2-container {
    border: 1px solid #F93535 !important;
}

.form div.datasetfieldSpec.hasErrors .select2-container {
    border: 1px solid #F93535 !important;
}

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

::-moz-placeholder {
    opacity: 1;
    color: #999999;
}

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

:-moz-placeholder {
    opacity: 1;
    color: #999999;
}

.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],
.form textarea {
    height: 112px;
}

.form select[multiple] option {
    background-color: inherit;
}

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

.form select:not([multiple]) {
    -webkit-appearance: none; /* Webkit */
    -moz-appearance: none; /* FF */
    -ms-appearance: none; /* Edge */
    appearance: none; /* Future */
    background-image: url("../images/select-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
}

/* IE11 */
.form select::-ms-expand {
  display: none;
}

/* SELECT 2 PATCH */
.form input.select2-search__field {
    width:auto !important
}

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

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

/* Media query to target only desktop */

.form input:not([type="checkbox"]):not([type="radio"]) {
    padding: 9px 10px; /* 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 10px; /* We achieve 40px height trough padding */
}

.form input[type="file"] {
    padding: 6px 10px 6px 10px; /* 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: 7px 10px 8px 10px; /* We achieve 40px height trough padding */
    background-color: #FFFFFF;
}

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

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

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

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

button,
input[type="submit"],
.genericButton,
.saveButton,
.nextButton,
.gotoButton,
.redirectUrlButton,
.previousButton,
.homeButton,
.clearButton,
.cancelButton,
.button {
    position: relative;
    display: inline-block;
    outline: 0;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    padding: 9px 12px; /* We achieve 40px height trough padding */
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-transform: initial;
    text-decoration: none;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: background-color 250ms ease-in-out;
    -ms-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
}

.saveButton,
.nextButton,
.gotoButton {
    padding-left: 55px;
}

.saveButton:before,
.nextButton:before,
.gotoButton:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 12px;
    display: inline-block;
    width: 30px;
    height: 22px;
    border-right: 1px dotted #FFFFFF;
    background-image: url("../images/icon-check-white.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px;
}

.previousButton,
.clearButton,
.cancelButton {
    padding-right: 55px;
}

.previousButton:after,
.clearButton:after,
.cancelButton:after {
    content: "";
    position: absolute;
    top:8px;
    right: 12px;
    display: inline-block;
    width: 30px;
    height: 22px;
    border-left: 1px dotted #e1e1e1;
    background-image: url("../images/icon-close.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px;
}

/* Media query to target mobile and tablet */
@media all and (max-width:1024px) {
    button,
    input[type="submit"],
    .genericButton,
    .saveButton,
    .nextButton,
    .gotoButton,
    .redirectUrlButton,
    .previousButton,
    .homeButton,
    .clearButton,
    .cancelButton,
    .button {
        /*padding:9px 15px; *//* We achieve 44px height trough padding */
    }

}

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: 5px 15px;
}

.smallButton,
.button--small {
    padding: 2px 5px;
    font-size: 11px;
}

.removeFile {
    margin-left: 15px;
    padding: 2px 5px;
}

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

button,
button:link,
button:visited,
input[type="submit"],
input[type="submit"]:link,
input[type="submit"]: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 {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #4076bf; /* var(--color--buttons) */
    color: #FFFFFF;
}

button:hover,
button:active,
input[type="submit"]:hover,
input[type="submit"]:active,
.button--default:hover,
.button--default:active,
.genericButton:hover,
.genericButton:active,
.saveButton:hover,
.saveButton:active,
.nextButton:hover,
.nextButton:active,
.gotoButton:hover,
.gotoButton:active,
.redirectUrlButton:hover,
.redirectUrlButton:active {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #2c74d7; /* var(--color--buttons--65) */
    color: #FFFFFF;
}

button:focus,
input[type="submit"]:focus,
.button--default:focus,
.genericButton:focus,
.saveButton:focus,
.nextButton:focus,
.gotoButton:focus,
.redirectUrlButton:focus {
    border-color: #B2DAF2; /* var(--color--buttons--30) */
    background-color: #2c74d7; /* var(--color--buttons--65) */
    color: #FFFFFF;
}

/* 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 {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #FFFFFF;
    color: #4076bf; /* var(--color--buttons) */
}

.button--secondary:hover,
.button--secondary:active,
.partialSaveButton:hover,
.partialSaveButton:active,
.previousButton:hover,
.previousButton:active,
.homeButton:hover,
.homeButton:active,
.clearButton:hover,
.clearButton:active {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #CFE5FF; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

.button--secondary:focus,
.partialSaveButton:focus,
.previousButton:focus,
.homeButton:focus,
.clearButton:focus {
    border-color: #B2DAF2; /* var(--color--buttons--30) */
    background-color: #CFE5FF; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

/* BUTTONS: CANCEL
   ========================================================================== */
.button--cancel,
.button--cancel:link,
.button--cancel:visited,
.cancelButton,
.cancelButton:link,
.cancelButton:visited {
    border-color: #e1e1e1; /* var(--color--buttons) */
    background-color: #f4f4f4;
    color: #bdbcbc; /* var(--color--buttons) */
}

.button--cancel:hover,
.button--cancel:active,
.cancelButton:hover,
.cancelButton:active {
    border-color: #e1e1e1; /* var(--color--buttons) */
    background-color: #eeeeee;
    color: #bdbcbc; /* var(--color--buttons) */
}

.button--cancel:focus,
.cancelButton:focus {
    border-color: #e1e1e1; /* var(--color--buttons) */
    background-color: #eeeeee;
    color: #bdbcbc; /* var(--color--buttons) */
}

/* 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 {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #4076bf; /* var(--color--buttons) */
}

.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:hover,
.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:active {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #CFE5FF; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

.fieldSpec.button-bar button:not(.genericButton, .saveButton, .nextButton, .gotoButton, .redirectUrlButton) + .cancelButton:focus {
    border-color: #C9EDE2; /* var(--color--buttons--30) */
    background-color: #E9F9F4; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

.button-bar .button--secondary + .button--cancel,
.button-bar .button--secondary + .button--cancel:link,
.button-bar .button--secondary + .button--cancel:visited {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #4076bf; /* var(--color--buttons) */
}

.button-bar .button--secondary + .button--cancel:hover,
.button-bar .button--secondary + .button--cancel:active {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #E9F9F4; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

.button-bar .button--secondary + .button--cancel:focus {
    border-color: #C9EDE2; /* var(--color--buttons--30) */
    background-color: #E9F9F4; /* var(--color--buttons--15) */
    color: #4076bf; /* var(--color--buttons) */
}

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

.button--link,
.button--link:link,
.button--link:visited {
    border-color: transparent;
    background-color: transparent;
    color: #4076bf; /* var(--color--secondary) */
}

.button--link:hover,
.button--link:active {
    border-color: transparent;
    background-color: transparent;
    color: #4076bf; /* var(--color--secondary) */
    text-decoration: none;
}

.button--link:focus {
    border-color: transparent;
    background-color: transparent;
    color: #4076bf; /* var(--color--secondary) */
}

.downloadAttachmentsForm .downloadAttachmentsButton,
.downloadAttachmentsForm .downloadAttachmentsButton:link,
.downloadAttachmentsForm .downloadAttachmentsButton:visited {
    border-color: transparent;
    background-color: transparent;
    color: #4076bf;
    text-decoration: none !important;
    background-image: url("../images/icon-download.svg");
    background-size: 16px;
    background-position:left center;
    padding-left:22px;
}

.downloadAttachmentsForm .downloadAttachmentsButton:hover,
.downloadAttachmentsForm .downloadAttachmentsButton:active,
.downloadAttachmentsForm .downloadAttachmentsButton:focus {
    border-color: transparent;
    background-color: transparent;
    color: #4076bf; /* var(--color--secondary) */
    text-decoration: none !important;
}

.downloadAttachmentsForm .downloadAttachmentsButton {
    padding-left: 22px;
    padding-right: 5px;
    font-size: 14px;
}

.button--link-icon:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
}

.icon-edit-profile:before {
    background-image: url("../images/icon-edit.png");
}

.icon-create-alert:before {
    background-image: url("../images/icon-create-alert.png");
}

.link--icon,
.link--icon:link,
.link--icon:visited,
.link--icon:hover,
.link--icon:active,
.link--icon:focus {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
   text-indent: -99999px;
   text-decoration: none !important;
}
.link--edit {
    background-image: url("../images/icon-edit-grey.png");
}
.link--delete {
    background-image: url("../images/icon-x.png");
    background-size: 14px;
}

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

[class*="button--action-"] {
    padding: 9px 12px;
    font-size: 16px;
}

.button--action-default,
.button--action-default:link,
.button--action-default:visited {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #FFFFFF;
    color: #4076bf; /* var(--color--buttons) */
}

.button--action-default:hover,
.button--action-default:active {
    border-color: #4076bf; /* var(--color--buttons) */
    background-color: #CFE5FF;
    color: #4076bf; /* var(--color--buttons) */
}

.button--action-default:focus {
    border-color: #B2DAF2; /* var(--color--buttons--30) */
    background-color: #CFE5FF;
    color: #4076bf; /* var(--color--buttons) */
}

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

.button--action-secondary:hover,
.button--action-secondary:active,
.button--action-secondary:focus {
    border-color: #4076bf;
    background-color: #4076bf;
    color: #FFFFFF;
}

.button--action-disabled,
.button--action-disabled:link,
.button--action-disabled:visited {
    border-color: #FFFFFF;
    background-color: #FFFFFF;
    color: #CCCCCC;
    font-style: italic;
}

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

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

.button--small {
    padding: 3px 10px;
    margin-bottom: 5px;
}

.icon__button {
    display: inline-block;
    width: 30px;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px;
    vertical-align: top;
    border-right: 1px dotted;
}

.button--link .icon__button {
    width: 28px;
    height: 20px;
    margin-right: 5px;
    border-right: none;
}

.button--icon {
    position: relative;
    padding-left: 55px;
}

.button--icon .icon__button {
    position: absolute;
    top:9px;
    left: 12px;
}

.icon__button--check-blue {
    background-image: url("../images/icon-check-blue.svg");
}

.icon__button--check-white {
    background-image: url("../images/icon-check-white.svg");
}

.icon__button--alarm-blue {
    background-image: url("../images/icon-alert-blue.png");
}

.icon__button--alarm-white {
    background-image: url("../images/icon-alert-white.png");
}

.button--alarm:hover .icon__button--alarm-blue,
.button--alarm:active .icon__button--alarm-blue,
.button--alarm:focus .icon__button--alarm-blue{
    background-image: url("../images/icon-alert-white.png");
}

.form--search .submitButton,
.form--search .clearButton {
    position: relative;
    padding-left: 48px;
}

.form--search .clearButton:after {
    display: none;
}

.form--search .clearButton {
    padding-right: 10px;
}

.form--search .submitButton:before,
.form--search .clearButton:before {
    content: "";
    position: absolute;
    left: 8px;
    top:10px;
    width: 28px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16px;
    border-right: 1px dotted;
}

.form--search .submitButton:before {
    background-image: url("../images/icon-search-white.svg");
    background-position: 1px 1px;
}

.form--search .clearButton:before {
    background-image: url("../images/icon-reset-blue.png");
    background-position: 1.5px center;
}

.removeFile,
.removeFile:link,
.removeFile:visited {
    border-color: transparent;
    background-color: transparent;
    color: #0084D5; /* var(--color--secondary) */
}

.removeFile:hover,
.removeFile:active {
    border-color: #0084D5; /* var(--color--secondary) */
    background-color: transparent;
    color: #0084D5; /* var(--color--secondary) */
}

.removeFile:focus {
    border-color: #0084D5; /* var(--color--secondary) */
    background-color: transparent;
    color: #0084D5; /* var(--color--secondary) */
}

/* Select 2 */

.fieldSpec.CheckBoxListFormField.AutoCompleteField .ui-widget {
    background-color: transparent;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    list-style: none;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 65px;
    white-space: nowrap;
    position: unset !important;
}

.select2-container {
    border: none !important;
    border-radius: 5px;
}

.select2-container--below,
.select2-container--above {
    /*overflow: auto;
    height: 40px;*/
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #e1e1e1 !important;
    overflow: auto;
    height: 40px;
}

.select2-container .select2-search--inline {
    /*float: none !important;*/
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    float: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 40px !important;
    background-image: url("../images/select-arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #e1e1e1 !important;
}

/* Properties proposed by ECB */

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    position: relative;
    position: unset !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    right: 0;
    right: 15px !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    width: 0 !important;
    padding: 0 !important;
}