/* Material Design Form Inputs */
.form_wrapper {
    z-index: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    vertical-align: top;
    display: inline-block;
}

.form_input {
    outline: 0;
    width: 100%;
    border: none;
    color: #fff;
    display: block;
    padding: 15px 0;
    margin-top: 15px;
    position: relative;
    box-sizing: border-box;
    border-bottom: solid 1px #333;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    -moz-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    -o-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #cc9933 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #cc9933 4%);
    background-position: -600px 0;
    background-size: 600px 100%;
    background-repeat: no-repeat;
    /**
   * Remove default box-shadow for required pseudo classes 
   */
    /**
   *  When input contain a class of .error 
   */
}

    .form_input option {
        background-color: #000;
    }

    .form_input:required {
        box-shadow: none;
    }

    .form_input.error {
        -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        -moz-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        -o-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #f44336 4%);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #f44336 4%);
        background-position: 0 0;
        background-size: 400px 100%;
        background-repeat: no-repeat;
    }

    .form_input:focus {
        background-position: 0 0;
        color: #fff;
        -webkit-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        -moz-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        -o-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
        transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    }

/* Form Label */
.form_label {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 1em);
    text-align: left;
    pointer-events: none;
    color: #999;
}

/* Form Label Content */
.form_label-content {
    font-weight: 600;
    position: absolute;
    -webkit-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    -moz-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    -o-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}

/**
 * 1. When input is focused move the label to top
 * 2. when the input field has a value move the label to top
 */
.form_input:focus ~ .form_label .form_label-content,
.form--filled .form_label-content {
    -webkit-transform: translate3d(0, -85%, 0);
    -moz-transform: translate3d(0, -85%, 0);
    transform: translate3d(0, -85%, 0);
}

/**
 * Error Styles
 * .error class generated by jquery.validate.min.js plugin
 */
.error {
    font-size: 1.4rem;
    color: #f44336;
    display: block;
}

/* Basic Buttons */
/*.btn {
  display: inline-block;
  padding: 0.6em 1.5em;
  border-radius: 2px;
  background-color: #2196f3;
  color: #fff;
  border: 0;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 400;
  font-size: 1.6rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.24), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}
.btn:focus, .btn:hover {
  background-color: #0d8aee;
}*/
/*.btn.btn-block {
  width: 100%;
  display: block;
}*/

/* Modal Styles */
/*.modal {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  padding: 1em;
  z-index: 999;
  border-radius: 2px;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -webkit-transition: transform 0.3s cubic-bezier(0, 0.795, 0, 1);
  -moz-transition: transform 0.3s cubic-bezier(0, 0.795, 0, 1);
  -ms-transition: transform 0.3s cubic-bezier(0, 0.795, 0, 1);
  -o-transition: transform 0.3s cubic-bezier(0, 0.795, 0, 1);
  transition: transform 0.3s cubic-bezier(0, 0.795, 0, 1);
}*/

/* Close icon style for model */
/*.modal--close {
  display: block;
  float: right;
  cursor: pointer;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 1.6em;
  color: #888;
}

.modal--open {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}*/