/* -------------------- Table of contents --------------------

Author Name: Loginov Artem
Author URI: http://loginov.biz
ThemeForest: http://themeforest.net/user/noblige?ref=noblige
Description: A forms stylesheet for AppStory Landing Page Template

1. Forms reset
2. Forms layout
3. Forms elements
4. Forms fields
5. Transitions
6. Forms elements states
7. Notifications
8. Forms on background

-------------------- */

/* -------------------- Forms reset -------------------- */
.b-form input::-ms-clear,
.b-form textarea::-ms-clear { visibility: hidden; }
.b-form textarea { overflow: auto; }

/*input, select { -webkit-appearance: none; -moz-appearance: none; }*/

/* --------------------
   -------------------- Forms layout -------------------- */
.b-form { position: relative; font: 400 1em 'Lato', sans-serif; }

.b-form:first-child { margin-top: auto; }
.b-form:last-child { margin-bottom: auto; }

.b-form .flex:last-child { margin-bottom: -16px; }
.b-form .flex > [class*="col-"] { margin-bottom: 16px; }

.b-form_box a,
.b-form_bottom a { text-decoration: underline; }

.b-form_box a:hover,
.b-form_bottom a:hover{ text-decoration: none; }

/* * * * * *
 * * * * * * Form boxes * * * * * */
.b-form_box,
.b-form_box_field,

.b-form input,
.b-form textarea,

.b-form .e-select,
.b-form .e-uploader { position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.b-form_box,
.b-form_box_field { display: block; }

.b-form_box { margin-bottom: 16px; }

.b-form_box__expanded { margin-bottom: 24px; }
.b-form_box__collapsed { margin-bottom: 8px; }

.b-form_box:last-child { margin-bottom: auto; }

/* * * * * *
 * * * * * * Form footer * * * * * */
.b-form_bottom { margin-top: 32px; white-space: nowrap; }
.b-form_bottom__collapsed { margin-top: 16px; }

.b-form_bottom:first-child { margin-top: auto; }

.b-form_bottom > a,
.b-form_bottom > span,
.b-form_bottom > button { display: inline-block; vertical-align: middle; margin-right: 4px; }

.b-form_bottom__right { text-align: right; }
.b-form_bottom__right > a,
.b-form_bottom__right > button { display: inline-block; margin-left: 7px; margin-right: 0; }

.b-form_bottom__center { text-align: center; }
.b-form_bottom__center > a,
.b-form_bottom__center > button { display: inline-block; margin: 0 7px; }

.b-form_bottom .e-btn { min-width: 140px; }

.b-form .e-btn_progress:after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity 250ms, visibility 250ms; -moz-transition: opacity 250ms, visibility 250ms; transition: opacity 250ms, visibility 250ms; background: center center no-repeat; content: ''; }
.b-form .e-btn_progress:before { -webkit-transition: opacity 250ms, visibility 250ms; -moz-transition: opacity 250ms, visibility 250ms; transition: opacity 250ms, visibility 250ms; }

.b-form .e-btn_progress.request { color: transparent !important; }

.b-form .e-btn_progress.request:after { opacity: 1; visibility: visible; }
.b-form .e-btn_progress.request:before { opacity: 0; visibility: hidden; }

.b-form .e-btn_progress[disabled] { opacity: .9 !important; }


/* -------------------- Forms elements -------------------- */
/* * * * * *
 * * * * * * Labels * * * * * */
.b-form_box_title { display: block; margin-bottom: 6px; font: 400 14px 'Lato', sans-serif; color: #4a5358; transition: color 250ms; }
.b-form_box_title.required:after { color: #ff4d46; content: ' \002A'; }

.b-form_box_title:last-child { margin-bottom: auto; }

@media (min-width: 1246px) {

    .b-form_box_title__middle:last-child { margin-top: 12px; }

}

@media (max-width: 1245px) {

    .b-form_box_title__middle:last-child { margin-bottom: 7px; }

}


/* --------------------
   -------------------- Forms fields -------------------- */
/* * * * * *
 * * * * * * Fields * * * * * */
.b-form_box_field input[type="text"],
.b-form_box_field input[type="date"],
.b-form_box_field input[type="tel"],
.b-form_box_field input[type="email"],
.b-form_box_field input[type="password"],

.b-form_box_field textarea,

.b-form_box_field .e-select,
.b-form_box_field .selectric { display: block; position: relative; padding: 0 20px; width: 100%; height: 40px; font: 400 16px 'Lato', sans-serif; text-overflow: ellipsis; text-shadow: none; color: #333; background: #fff; border: 1px solid #e2e3e4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; transition: all 250ms; }

.b-form_box_field textarea { padding: 11px 20px; max-width: 100%; height: 100px; min-height: 100px; resize: none; }

.b-form_box_field .e-select,
.b-form_box_field .selectric { padding: 0 50px 0 20px; text-align: left; }

.b-form_box_field .e-select span,
.b-form_box_field .selectric .label,

.b-form_box_field .e-select:before,
.b-form_box_field .selectric:before { position: absolute; top: 50%; right: 0; margin-top: -8px; width: 40px; font: normal 16px/1 'AppStory'; text-align: center; content: '\f107'; transition: all 250ms; }

.b-form_box_field .e-select option[value=""] { display: none; }
.b-form_box_field > select { height: 40px; visibility: hidden; }

/* * * * * *
 * * * * * * Radio/checkboxes * * * * * */
.b-form_box_field label { display: inline-block; position: relative; margin-right: 16px; font: 400 14px 'Lato', sans-serif; color: #4a5358; transition: color 250ms; cursor: pointer; }

.b-form_box_field:first-child label,
.b-form_box_title ~ .b-form_box_field label { margin-top: 6px; }

.b-form_box_field label > .radio { vertical-align: -3px; margin: 0 8px 0 0; }
.b-form_box_field label > .checker { vertical-align: -2px; margin: 0 8px 0 0; }

.b-form_box_field label > input { position: absolute; visibility: hidden; }

.b-form_box_field.list label { display: block; position: relative; margin: 0; padding-left: 28px; min-height: 19px; }
.b-form_box_field.list label ~ label { margin-top: 16px; }

.b-form_box_field.list label > .radio { position: absolute; left: 0; top: 0; }
.b-form_box_field.list label > .checker { position: absolute; left: 0; top: 1px; }

.b-form_box_field label a { text-decoration: underline; }
.b-form_box_field label a:hover { text-decoration: none; }

/* * * * * *
 * * * * * * Icons * * * * * */
.b-form_box_field__icon input,
.b-form_box_field__icon textarea { padding-right: 50px; }

.b-form_box_field__icon:before { position: absolute; z-index: 5; top: 0; right: 0; width: 40px; height: 40px; font-size: 24px; line-height: 40px; text-align: center; color: #e9e9e9; }


/* --------------------
   -------------------- Transitions -------------------- */
/* * * * * *
 * * * * * * Fields * * * * * */
.b-form_box_field input,
.b-form_box_field textarea,

.b-form_box_field .e-select { transition: color 400ms, background 400ms, border 400ms, box-shadow 400ms; }


/* --------------------
   -------------------- Forms elements states -------------------- */
/* * * * * *
 * * * * * * Fields read only * * * * * */
.b-form_box_field input[readonly],
.b-form_box_field textarea[readonly],
.b-form_box_field .e-select.readonly { padding: 0; font: 400 14px 'Lato', sans-serif; color: #4a5358; background: none; border: none; cursor: default; }

/* * * * * *
 * * * * * * Fields disabled * * * * * */
.b-form_box_field input[disabled],
.b-form_box_field textarea[disabled],
.b-form_box_field .e-select.disabled { color: #4a5358; background: #f5f5f5; border-color: #d5d5d5; cursor: not-allowed; }

/* * * * * *
 * * * * * * Elements focus * * * * * */
.b-form_box_field input:focus,
.b-form_box_field textarea:focus,

.b-form_box_field .e-select.focus,
.b-form_box_field .selectric-open .selectric {  }

/* * * * * *
 * * * * * * Elements error * * * * * */
.b-form_box.m-error .b-form_box_field input,
.b-form_box.m-error .b-form_box_field textarea,

.b-form_box.m-error .b-form_box_field .e-select,
.b-form_box.m-error .b-form_box_field .selectric { border-color: #ff4d46 !important; box-shadow: 0 0 8px rgba(255, 0, 0, .15); }

/* * * * * *
 * * * * * * Placeholders * * * * * */
.b-form_box_field input[placeholder],
.b-form_box_field textarea[placeholder] { text-overflow: ellipsis; }

.b-form_box_field input::-webkit-input-placeholder,
.b-form_box_field textarea::-webkit-input-placeholder { font-style: normal; color: #ccc !important; text-overflow: ellipsis; transition: all 250ms ease; }

.b-form_box_field input:-moz-placeholder,
.b-form_box_field textarea:-moz-placeholder { font-style: normal; color: #ccc !important; text-overflow: ellipsis; transition: all 250ms ease; }

.b-form_box_field input:-ms-input-placeholder,
.b-form_box_field textarea:-ms-input-placeholder { font-style: normal; color: #ccc !important; text-overflow: ellipsis; transition: all 250ms ease; }

.b-form_box_field .e-select .placeholder,
.b-form_box_field .selectric .placeholder { font-style: normal; color: #ccc !important; }

/* * * * * *
 * * * * * * Placeholders on focus * * * * * */
.b-form_box_field input:focus:-moz-placeholder,
.b-form_box_field textarea:focus:-moz-placeholder { color: transparent !important; }

.b-form_box_field input:focus::-webkit-input-placeholder,
.b-form_box_field textarea:focus::-webkit-input-placeholder { color: transparent !important; }

.b-form_box_field input:focus:-ms-input-placeholder,
.b-form_box_field textarea:focus:-ms-input-placeholder { color: transparent !important; }

/* * * * * *
 * * * * * * Label placeholders * * * * * */
label.b-form_box_field_placeholder { display: block; position: absolute; left: 20px; top: 0; right: 20px; padding: 0 !important; margin: 0 !important; font: 400 1em/40px 'Lato', sans-serif; text-align: left !important; color: #ccc !important; text-overflow: ellipsis; overflow: hidden; box-sizing: border-box; transition: all 250ms; cursor: text; pointer-events: none; }

label.b-form_box_field_placeholder.complete,

input:focus ~ label.b-form_box_field_placeholder,
textarea:focus ~ label.b-form_box_field_placeholder { opacity: 0; visibility: hidden; }


/* --------------------
   -------------------- Notifications -------------------- */
/* * * * * *
 * * * * * * Notices * * * * * */
.b-form_box_notice { margin: 10px 0; font: 400 .75em/1.333333333333 'Lato', sans-serif; color: #4a5358; transition: all 250ms; }

.b-form_box_notice:first-child { margin-top: 6px; }
.b-form_box_notice:last-child { margin-bottom: auto; }

.b-form_box.m-error .b-form_box_notice { color: #ff4d46; }

/* * * * * *
 * * * * * * Errors * * * * * */
.b-form_box_error { margin-top: 0; font: 400 .75em/1.333333333333 'Lato', sans-serif; color: #ff4d46 !important; max-height: 0; opacity: 0; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; }

.b-form_box_error a { text-decoration: underline; color: inherit; }
.b-form_box_error a:hover { text-decoration: underline; color: inherit; opacity: .5; }

.b-form_box.m-error .b-form_box_error { margin-top: 10px; max-height: 48px; opacity: 1; }

.b-form__hideLabels .b-form_box_error { display: none; visibility: hidden; }

@media (min-width: 768px) {

    .b-form_box_error { position: absolute; z-index: 5; left: 0; top: 100%; right: 0; margin: 15px auto 0; padding: 8px 5px; width: 80%; text-align: center; white-space: nowrap; color: #fff !important; background: #ff4d46; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; visibility: hidden; -webkit-transform: translate(0, -20px); -moz-transform: translate(0, -20px); -o-transform: translate(0, -20px); transform: translate(0, -20px); -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; }
    .b-form_box_error:before { position: absolute; left: 50%; bottom: 100%; margin: 0 0 -1px -6px; width: 0; height: 0; border-bottom: 7px solid #ff4d46; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ''; }

    .m-error .b-form_box_error { opacity: 1; visibility: visible; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); transform: translate(0, 0); }

}

/* * * * * *
 * * * * * * Form notifications * * * * * */
.b-form_message { position: relative; padding-bottom: 18px; overflow: hidden; visibility: hidden; opacity: 0; transition: visibility 250ms, opacity 250ms, overflow 250ms; }
.b-form_message__show { visibility: visible; opacity: 1; overflow: visible; }

.b-form .b-form_message + form { visibility: visible; opacity: 1; transition: visibility 250ms, opacity 250ms; }
.b-form.b-form__hide .b-form_message + form { visibility: hidden; opacity: 0; }

.b-form_message_balloon { position: relative; font: 400 1.25em 'Lato', sans-serif; text-align: center; transition: background 250ms; }

.b-form_message_balloon_capsule { display: table; width: 100%; }
.b-form_message_balloon_capsule_inner { display: table-cell; vertical-align: middle; }

.b-form_message_balloon h6 { margin: 0 0 2px !important; font: 500 1.375em 'Museo Sans', sans-serif; transition: color 250ms; }

.b-form_message_balloon p { margin-top: auto !important; margin-bottom: auto !important; }
.b-form_message_balloon p ~ p { margin-top: 1.4375em !important; }

.b-form_message_balloon ul { margin-left: 50px; }

@media (max-width: 767px) {

    .b-form_message_balloon:before { content: none; }
    .b-form_message_balloon_capsule_inner { padding: 30px 40px; }

}

@media (max-width: 479px) {

    .b-form_message_balloon { margin-left: -20px; margin-right: -20px; }
    .b-form_message_balloon_capsule_inner { padding: 30px 20px; }

}

.b-form_message_balloon__error {  }
.b-form_message_balloon__success {  }


/* --------------------
   -------------------- Forms on backgrounds -------------------- */
.b-form__onBackground .b-form_box_field input[type="text"],
.b-form__onBackground .b-form_box_field input[type="date"],
.b-form__onBackground .b-form_box_field input[type="tel"],
.b-form__onBackground .b-form_box_field input[type="email"],
.b-form__onBackground .b-form_box_field input[type="password"],

.b-form__onBackground .b-form_box_field textarea,

.b-form__onBackground .b-form_box_field .e-select,
.b-form__onBackground .b-form_box_field .selectric { border: none !important }