/* Colors
Bold Coral:  #F26553
Red: #D92D20
Blue: #2F80ED;
Text: #171415
Grey Text: #727272
Light grey: #E0E0E0
Lighter grey: #EAECF0
*/

/* Form styles */

.form-group {
    width: 100%;
}

.form-item {
    margin-bottom: 15px;
}

.input--wrapper {
    position: relative;
    height: 100%;
}

form:not(#search-block-form) .form-item:not(.checkbox) .input--wrapper {
    width: 100%;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
textarea,
select,
.form-control,
#crm-container.crm-public input[type="text"], 
#crm-container.crm-public input[type="password"], 
#crm-container.crm-public input[type="email"], 
#crm-container.crm-public select,
.crm-container input.crm-form-text {
  padding: 11px 16px;
  border: 1px solid #667085;
  box-shadow: none;
  max-width: 100%;
  border-radius: 12px;
  font-size: 1.85rem;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.has-error .form-control:focus,
#crm-container.crm-public input[type="text"], 
#crm-container.crm-public input[type="password"], 
#crm-container.crm-public input[type="email"], 
#crm-container.crm-public select,
.crm-container input.crm-form-text {
    border-color: #727272;
    box-shadow: none;
}

/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
select,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; 
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
select,
.form-control,
#crm-container.crm-public input[type="text"], 
#crm-container.crm-public input[type="password"], 
#crm-container.crm-public input[type="email"], 
#crm-container.crm-public select,
.crm-container input.crm-form-text {
    height: 4.5rem;
}

select,
#crm-container.crm-public select {
    background: #fff url(../../images/chevron--down.svg) no-repeat center right 12px;
    padding-right: 35px;
}

.form-control {
    display: inline;
    color:#171415;
    font-size: 1.85rem;
    width: auto;
}

.input-group .form-control {
    position: static;
}

label,
legend {
    display: block;
    width: 100%;
    line-height: 1.2;
    margin-bottom: 5px;
    font-size: 1.85rem;
}

label {
    font-weight: normal;
}

fieldset {
    margin-bottom: 1rem;
}

legend {
    margin-bottom: 1.6rem;
    color:#171415;
    font-size: 1.85rem;
    font-weight: bold;
    border-bottom: 1px solid #667085;
    padding-bottom: 1rem;
}

.label {
    padding: 0;
    line-height: 1.5;
}

.form-type-checkbox,
.form-type-radio {
    margin-bottom: 10px;
}

.has-glyphicons .select-wrapper:after {
    content: '';
}

/*.form-type-select.form-group {
    margin-bottom: 0;
}*/

/*.select-wrapper:after {
    color:#171415;
    width: 1.5rem;
    height: 0.8rem;
    background: url(../../images/chevron--down.svg) no-repeat center center;
    background-size: contain;
    margin-top: 0;
    transform: translateY(-50%);
    right: 12px;
}*/

.form--required,
.form-required:after,
.crm-container .crm-marker {
    color: #D85849;
    font-weight: bold;
    font-size: 2.5rem;
}

.form--required,
.form-required:after {
    vertical-align: sub;
}

.form-required:after {
    background-image: none;
    content: '*';
    margin-left: 2px;
}

.crm-container .crm-marker {
    position: absolute;
    margin-left: 0.3rem;
    margin-top: -0.3rem;
}

.help-block, 
.control-group .help-inline,
.form-description,
.webform-form-description,
.password-confirm-message {
    font-size: 1.6rem;
    color: #727272;
}

form[class*="user"] input[type="email"][value=""]:valid,
form[class*="user"] .form-control:valid,
#crm-container.crm-public input[type="email"].valid,
#crm-container.crm-public input[type="email"]:valid,
form[class*="user"] input[type="email"][aria-invalid="false"],
form[class*="user"] input[type="text"][value=""]:valid,
form[class*="user"] input[type="text"][value=""][aria-invalid="false"],
#crm-container.crm-public input[type="text"][value=""]:valid,
#crm-container.crm-public input[type="text"][aria-invalid="false"],
form[class*="user"] .form-control[type="text"][value=""]:valid,
form[class*="user"] .form-control[type="text"][aria-invalid="false"],
form[class*="user"] input[type="password"][value=""]:valid,
form[class*="user"] input[type="password"][aria-invalid="false"],
#crm-container.crm-public select[value=""]:valid,
#crm-container.crm-public select[aria-invalid="false"],
.crm-container input.crm-form-text:valid,
.crm-container input.crm-form-text[aria-invalid="false"] {
    border-color: #2F80ED !important;
    background-color: #fff;
}

.has-error .form-control,
.form-item.error input,
input.error,
select.error,
textarea.error,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
#crm-container.crm-public input[type="text"][aria-invalid="true"],
#crm-container.crm-public select[aria-invalid="true"],
#crm-container.crm-public textarea[aria-invalid="true"],
input.crm-inline-error,
select.crm-inline-error,
select.error,
textarea.crm-inline-error,
#crm-container.crm-public input.crm-inline-error,
#crm-container.crm-public select.crm-inline-error,
#crm-container.crm-public textarea.crm-inline-error,
.crm-container.crm-public .select2-container.crm-inline-error a.select2-choice,
.crm-container.crm-public .select2-container.crm-inline-error a.select2-choice:after {
   background-color: #FEF3F2;
   border-color:#D92D20;
}

form.user-login-form input,
form.user-pass input,
form.user-register-form input,
form.user-register-form .crm-container .big,
form.CRM_Contribute_Form_Contribution_Main input,
.crm-container form.CRM_Contribute_Form_Contribution_Main .big,
.crm-container form.CRM_Contribute_Form_Contribution_Main .six,
.crm-container form.CRM_Contribute_Form_Contribution_Main .huge,
.crm-container form.CRM_Contribute_Form_Contribution_Main .medium {
    width: 100%;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: -1rem;
    margin-top: 1.6rem;
    gap: 10px;
}

.form-actions.form-group:last-child {
    margin-bottom: 1.6rem;
}

.form-actions .btn, 
.form-actions .btn-group {
    margin-right: 0;
}

.btn,
.crm-container .crm-button {
    font-size: 1.85rem;
    padding: 1.1rem 6.2rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: bold;
    margin-top: 0;
    margin-right: 0;
    text-shadow: none;
    border: none;
    float: none;
    overflow: visible;
    line-height: 1.2;
}

button.btn,
.crm-container button.crm-button {
    cursor: default;
}

form.user-login-form button.form-submit,
form.user-login-form .form--buttons,
form.user-login-form button[type="submit"],
form.user-pass button.form-submit,
form.user-pass .form--buttons,
form.user-pass button[type="submit"],
form.user-register-form button.form-submit,
form.user-register-form .form--buttons,
form.user-register-form button[type="submit"],
form.CRM_Contribute_Form_Contribution_Main button.form-submit,
form.CRM_Contribute_Form_Contribution_Main .form--buttons,
form.CRM_Contribute_Form_Contribution_Main button[type="submit"],
.facets-apply-button-wrapper button[type="submit"] {
    width: 100%;
}

.btn,
.btn-default,
button.form-submit,
.btn-primary,
.btn-success,
button[type="submit"],
.crm-container .crm-button {
    background-color: #D85849;
    border-color: #D85849;
    border-radius: 10px;
    color: white;
}

.btn-default:hover,
.btn-danger:hover,
.btn-default:focus,
.btn-danger:focus,
.btn-default:active,
.btn-danger:active,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:hover,
.btn-primary:active:focus,
.crm-container .crm-button:hover,
.crm-container .crm-button:active,
.crm-container .crm-button:focus {
    background-color: #D85849;
    color: white;
    border-color: #D85849;
}

button:not[value="Search"].form-submit .glyphicon,
.ui-icon[class*=" fa-"], 
.crm-container a.helpicon, 
.crm-container .replace-plain:before, 
.crm-i {
    display: none;
}

.input-group {
    display: flex;
    align-items: center;
}

.form--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.form--inline .form-item {
    margin-bottom: 0;
}

.form--inline > *:first-child {
    margin-left: -10px;
}

.form--inline .radio + .radio, 
.form--inline .checkbox + .checkbox {
    margin-top: 0;
}

.form-inline .form-type-checkbox, 
.form-inline .form-type-radio {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    padding-top: calc(1em + 5px);
}

.form--inline .form-group,
.form--inline .form-actions.form-group:last-child {
    margin-bottom: 0;
}

.form--inline .form-group,
.form--inline .input--wrapper {
    width: auto;
}

.form--inline .form-actions {
    margin-bottom: 0;
    margin-top: 0;
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.form--no-labels .form--inline .form-actions {
    align-items: stretch;
}

.form--inline .form-actions button {
    padding: 1rem 2rem;
}

.form--labels-above .form--inline .form-item {
    flex-direction: column;
    align-items: flex-start;
}

.form--labels-above .form--inline .form-actions {
    align-self: stretch;
    align-items: flex-end;
}

.form-inline.form-type-date {
    display: block;
}

.input-group,
.form-inline .input-group {
    display: flex;
    align-items: stretch;
}

.input-group-addon,
.input-group-addon .icon {
    display: flex;
    align-items: center;
}

input::placeholder {
    font-size: 1.6rem;
    color: #667085;
    font-family: "proxima-nova", Arial, Helvetica, sans-serif;
}