/* Form styles */
input, select, button {
    font-family: var(--nc-font-sans);
}

form {
    margin: 0;
}

fieldset, input:not([type='submit']):not([type='checkbox']), select, textarea {
    margin-bottom: 1rem;
    width: 100%;
}

.btn, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: #0069d9;
    border: none;
    border-radius: .4rem;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    height: 2.8rem;
    letter-spacing: .1rem;
    line-height: 2.8rem;
    padding: 0 2.0rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.btn:focus, .btn:hover,
input[type='button']:focus, input[type='button']:hover,
input[type='reset']:focus, input[type='reset']:hover,
input[type='submit']:focus, input[type='submit']:hover {
    background-color: #606c76;
    color: #fff;
    outline: 0;
}

.btn[disabled],
.btn--disabled,
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
    cursor: default;
    opacity: .5;
}

.btn[disabled]:focus, .btn[disabled]:hover,
.btn--disabled:focus, .btn--disabled:hover,
input[type='button'][disabled]:focus, input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus, input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus, input[type='submit'][disabled]:hover {
    background-color: #0069d9;
}

.btn.btn-outline,
input[type='button'].btn-outline,
input[type='reset'].btn-outline,
input[type='submit'].btn-outline {
    background-color: transparent;
    color: #0069d9;
}

.btn.btn-outline:focus, .btn.btn-outline:hover,
input[type='button'].btn-outline:focus, input[type='button'].btn-outline:hover,
input[type='reset'].btn-outline:focus, input[type='reset'].btn-outline:hover,
input[type='submit'].btn-outline:focus, input[type='submit'].btn-outline:hover {
    background-color: transparent;
    color: #606c76;
}

.btn.btn-outline[disabled]:focus,
.btn.btn-outline[disabled]:hover,
.btn.btn-outline.btn--disabled:focus,
.btn.btn-outline.btn--disabled:hover,
input[type='button'].btn-outline[disabled]:focus,
input[type='button'].btn-outline[disabled]:hover,
input[type='reset'].btn-outline[disabled]:focus,
input[type='reset'].btn-outline[disabled]:hover,
input[type='submit'].btn-outline[disabled]:focus,
input[type='submit'].btn-outline[disabled]:hover {
    color: #0069d9;
}

.btn.btn-clear,
input[type='button'].btn-clear,
input[type='reset'].btn-clear,
input[type='submit'].btn-clear {
    background-color: transparent;
    color: #0069d9;
}

.btn.btn-clear:focus,
.btn.btn-clear:hover,
input[type='button'].btn-clear:focus,
input[type='button'].btn-clear:hover,
input[type='reset'].btn-clear:focus,
input[type='reset'].btn-clear:hover,
input[type='submit'].btn-clear:focus,
input[type='submit'].btn-clear:hover {
    background-color: transparent;
    color: #606c76;
}

.btn.btn-clear[disabled]:focus,
.btn.btn-clear[disabled]:hover,
.btn.btn-clear.btn--disabled:focus,
.btn.btn-clear.btn--disabled:hover,
input[type='button'].btn-clear[disabled]:focus,
input[type='button'].btn-clear[disabled]:hover,
input[type='reset'].btn-clear[disabled]:focus,
input[type='reset'].btn-clear[disabled]:hover,
input[type='submit'].btn-clear[disabled]:focus,
input[type='submit'].btn-clear[disabled]:hover {
    color: #0069d9;
}

.btn {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 100, 0.5);
}

.btn:active {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 100, 0.5);
}

.btn:hover {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 100, 0.3);
}

.btn--transparent {
    background: transparent;
}

.btn--transparent:hover, .btn--transparent:focus {
    background-color: #0069d9;
}

.btn--icon {
    line-height: 3rem;
    padding: 0 1rem;
}

.btn--mini {
    font-size: 0.9rem;
    height: 2rem;
    letter-spacing: .1rem;
    line-height: 2rem;
    padding: 0 1rem;
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='date'],
input[type='file'],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0.1rem solid #777777;
    border-radius: .4rem;
    box-shadow: none;
    box-sizing: inherit;
    color: var(--nc-tx-2);
    height: 2.8rem;
    padding: .6rem 1.0rem;
    width: 100%;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='date']:focus,
input[type='file']:focus,
textarea:focus,
select:focus {
    border-color: var(--highlight-color, #0069d9);
    outline: 0;
}

input[type='date'],
select:not([multiple]) {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%23d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
    padding-right: 2.0rem;
}

input[type='date']:focus,
select:not([multiple]):focus {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="%230069d9" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
}

select[multiple] {
    min-height: 5rem;
}

option {
    padding: 0.5rem;
}

textarea {
	/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
	max-width: 100%;
    min-height: 6.5rem;
    height: initial;
}

label, legend {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: .5rem;
    float: left;
    text-align: left;
}

.label-inline {
    display:inline-block;font-weight:normal;margin-left:.5rem;
}

input[type='checkbox'], input[type='radio'] {
    display: inline;
}

.form-group {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0;
    border: none;
}

.form-group--checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.form-group--checkbox label {
    flex: 1 0 90%;
}

.btn-container {
    max-width: 40rem;
    text-align: right;
    border: none;
    padding: 0;
    margin: 0 auto;
}

.btn-container--full-width {
    max-width: initial;
}

.btn-container__secondary {
    margin: 0 1rem;
}

.btn-container button,
.btn-container input[type='button'] {
    margin: 0;
}

/** Have to include button and input selectors to override the rule right above */
.btn-container > * + *,
.btn-container > * + button,
.btn-container > * + input[type='button'] {
    margin-left: 1rem;
}

/* Alerts and form errors */
.alert, .alert-placeholder {
    padding: 1rem;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    min-height: 50px;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert p {
    margin-bottom: 0;
}

.alert:empty {
    display: none;
}

.alert:not(:empty) ~ .alert-placeholder {
    display: none;
}

.alert--cta {
    text-align: left;
    border-color: var(--blue);
    margin-top: 1rem;
}

.article p.alert--cta {
    text-indent: 0;
}

.alert--cta button {
    float: right;
}

.help-block {
    color: #a94442;
    color: var(--red);
    display: block;
    margin: 0rem 0 2rem;
}

fieldset.has-error input {
    border-color: var(--red);
}