/* ==========================================================================
   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%;
   }

   .form input {
       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;
   }

   .body--Firefox .form input {
       /*height:40px;*/
       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: 51px;
       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;
   }

   /* 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: 25px;
       border: solid 2px #1c2b39;
       background-color: #fff;
       background-color: #FFFFFF;
       font-family: inherit;
       font-size: 14px;
       line-height: 14px;
       font-weight: 300;
       font-style: normal;
       color: #565656;
   }

   .form select{
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       background: url('../images/icons/arrow.svg') no-repeat #FFFFFF;
       background-position-x: 0%;
       background-position-y: 0%;
       background-size: auto auto;
       background-position-x: 0%;
       background-position-y: 0%;
       background-size: auto auto;
       background-position: calc(100% - 1em) center;
       background-size: 6px 16px;
   }

   .select2-container{
       padding: 10px 10px 10px 6px;
       background: #FFFFFF;
       border-radius: 25px;
       border: solid 2px #1c2b39;
   }

   .select2-container--default .select2-selection--single{
       background-color: transparent;
       border: none;
   }

   .select2-container--default .select2-selection--single .select2-selection__arrow{
       top: 11px;
       right: 7px;
   }

   .select2-container--default .select2-selection--single .select2-selection__arrow b{
       border-color: #666666 transparent transparent transparent;
   }

   .select2-container .select2-selection--single .select2-selection__rendered{
       padding-right: 40px;
   }

   ::-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: #565656;
   }

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

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

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

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

   /* Structure
      -------------------------------------------------------------------------- */
   button,
   .genericButton,
   .saveButton,
   .nextButton,
   .gotoButton,
   .redirectUrlButton,
   .previousButton,
   .homeButton,
   .clearButton,
   .cancelButton,
   .button {
       padding: 12px 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: 200px;
       border-width: 1px;
       border-style: solid;
       font-size: 18px;
       font-weight: 600;
       font-stretch: normal;
       font-style: normal;
       line-height: 1.5;
       letter-spacing: normal;
       text-align: center;
       color: #fff;
       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); /* 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--30); /* 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--buttons); /* 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); /* 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 */
   }

   .previousButton:focus,
   .homeButton:focus,
   .clearButton:focus,
   .cancelButton:focus,
   .button--cancel: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 */
   }

   /* 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;
   }