/*
 * Forms
 */

.form {
    margin-top: 3rem;
}

.form-element {
}

.text-input {
    color: #696969;
    border: 1px solid #f1f1f1;
    border-radius: 3px;
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    outline: none;
    padding: 1.2rem;
    z-index: 10;

    -webkit-box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.14);
    box-shadow: inset 0px 2px 8px 0px rgba(0,0,0,0.14);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* We have to play with the margins for validated inputs.  Remove the
       transitions for margins to keep things from bouncing around.       */

    -webkit-transition: margin 0 ease-in;
    -moz-transition: margin 0 ease-in;
    -o-transition: margin 0 ease-in;
    transition: margin 0 ease-in;
}

/* When jQuery.validate() detects an input error, it adds an error class
   to the input and adds a label with an error class.  To keep the label
   up against the input it is for, remove the input's bottom margin and
   move that margin to the bottom of the label.  */

.text-input.error {
    margin-bottom: 0;
}

label.error {
    margin-bottom: 1rem;
    color: red;
    font-size: 80%;
    padding-left: 10px;
    float: left;
    width: 100%;
}

.text-input:focus {
    border: 1px solid #bbdd70;
    box-shadow: 0 0 6px #bbdd70;
}

.text-input.negative {
    border: 1px solid #db5b2e;
    box-shadow: 0 0 6px #db5b2e;
    color: #db5b2e;
}

.text-label {
    color: #757575;
    font-size: 1.6rem;
    font-weight: 300;
    padding-right: 2rem;
    position: relative;
    text-align: right;
}

input[type=checkbox].checkbox-input {
    border:0;
    clip: rect(0 0 0 0);
    height:1px;
    overflow: hidden;
    margin:-1px;
    padding:0;
    position: absolute;
    width:1px;
}

input[type=checkbox].checkbox-input + .checkbox-label {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 1.6rem auto;
    color: #696969;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 300;
    height: 1.6rem;
    line-height: 1.6rem;
    padding-left: 2.8rem;
    vertical-align: baseline;
}

input[type=checkbox].checkbox-input:checked + .checkbox-label {
    background-position: 0 -1.6rem;
}

.checkbox-label {
    background-image: url('../img/checkbox.png');
}

input[type=radio].radio-input {
    border:0;
    clip: rect(0 0 0 0);
    height:1px;
    overflow: hidden;
    margin:-1px;
    padding:0;
    position: absolute;
    width:1px;
}

input[type=radio].radio-input + .radio-label {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 3.2rem auto;
    color: #696969;
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 300;
    height: 3.2rem;
    line-height: 3.2rem;
    padding-left: 2.8rem;
    vertical-align: baseline;
}

input[type=radio].radio-input:checked + .radio-label {
    background-position: 0 -3.2rem;
}

.radio-label {
    background-image: url('../img/radio.png');
}

.submit {
    margin-top: 3rem;
}

.notification {
    color: #696969;
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
}

.negative {
    color: #db5b2e;
    font-weight: 400;
}

@media only screen and (max-width: 719px) {
    .notification {
        font-size: 3.4rem;
        margin: 3.4rem 0;
        width: auto;
    }

    .form {
        display: block;
        padding: 0 1rem;            /* 0 4rem; */
        width: auto;
    }

    .form-group {
        background-color: #fff;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.16);
        border-radius: 0.8rem;
        overflow: hidden;
    }

    .form-element {
        display: block;
        margin: 0 4rem;
        position: relative;
        width: auto;
    }

    .form-element.full-width {
        margin: 0;
    }

    .form-element .form-group,
    .form-group .form-element {
        margin: 0;
    }

    .form-element label,
    .form-element .slash {
        display: none;
    }

    .form-element .heading-e {
        display: block;
        float: none !important;
        font-size: 2.8rem;
        font-weight: 500;
        padding: 0;
    }

    .form-group .text-input {
        background-color: transparent;
        border: none;
        border-bottom: 1px solid #d7d8d8;
    }

    .form-group .btn-group {
        padding: 4rem;
    }

    .form-group .btn-group .dropdown-toggle {
        margin-bottom: 0;
    }

    input[type=checkbox].checkbox-input + .checkbox-label {
        background-image: none;
        font-size: 2.8rem;
    }

    .transaction-history input[type=checkbox].checkbox-input {
        clip: auto;
        height: auto;
        overflow: auto;
        margin: 0;
        padding: 0;
        position: relative;
        width: auto;
    }

    .text-input {
        border: 1px solid #d3d3d3;
        border-radius: 0;
        color: #918b86;
        font-size: 1.5rem;  /* 3rem; */
        font-weight: 300;
        margin-bottom: 0;
        margin-right: -1px;
        padding: 1rem 2rem; /* 2rem 4rem; */

        -webkit-box-shadow: 0 0 0 #fff;
        box-shadow: 0 0 0 #fff;
    }

    /* When input is invalid, move bottom border to below label. */

    .text-input.error {
        padding-bottom: 0.1rem;
        border: none;
    }

    label.error {
        margin-bottom: 0;  /* override desktop's margin */
        border-bottom: 1px solid #d7d8d8;
    }

    .text-input:focus {
        box-shadow: 0 0 0 #fff;
    }

    .text-input.negative {
        box-shadow: 0 0 0 #fff;
    }

    .form-group textarea.text-input {
        border: none;
        margin-bottom: 0;
        outline: none;
    }

    .form-element .pin {
        text-align: center;
        width: 16rem;
    }
}