/*
--------------------------------------------------------------
# Wrappers
--------------------------------------------------------------
*/
.form-group {
    display: block;
    width: auto;
    clear: both;
    margin: 0 0 1rem 0;
    padding: 0;
}

.form-group:after {
    content: "";
    display: table;
    clear: both;
}

/*
--------------------------------------------------------------
# Errors
--------------------------------------------------------------
*/
.pristine-error {
    margin: 10px 0;
    color: red;
}

/*
--------------------------------------------------------------
# Form
--------------------------------------------------------------
*/

form {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

fieldset {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

/*
--------------------------------------------------------------
# Labels
--------------------------------------------------------------
*/

label {
    display: block;
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

/*
--------------------------------------------------------------
# Base input
--------------------------------------------------------------
*/

input {
    display: block;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border: solid 1px #cccccc;
    border-radius: 0.5rem;
}

/*
--------------------------------------------------------------
# Text fields
--------------------------------------------------------------
*/

input[type="email"],
input[type="url"],
input[type="time"],
input[type="date"],
input[type="datetime"],
input[type="number"],
input[type="month"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="password"] {
    width: 100%;
    height: 45px;
    margin: 0.5rem 0 0 0;
    padding: 0 0.5rem;
    outline: none;
    border-radius: 0.5rem;
}

/*
--------------------------------------------------------------
# Textarea
--------------------------------------------------------------
*/

textarea {
    display: block;
    width: 100%;
    height: 120px;
    margin: 0.5rem 0 0 0;
    padding: 0.5rem;
    resize: none;
    background: #ffffff;
    border: solid 1px #cccccc;
    outline: none;
    border-radius: 0.5rem;
}

/*
--------------------------------------------------------------
# Buttons
--------------------------------------------------------------
*/

button,
input[type="button"],
input[type="submit"] {
    display: block;
    width: auto;
    height: auto;
    padding: 5px 20px 7px 20px;
    margin: 0;
    background: none;
    border: solid 1px #cccccc;
    box-sizing: border-box;
    outline: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

button {
    color: #222222;
    border: solid 1px #555555;
}

/*
--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------
*/

input[type="checkbox"] {
    display: block;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 2px 0 0 0;
}

/*
--------------------------------------------------------------
# Select
--------------------------------------------------------------
*/

select {
    display: block;
    width: auto;
    height: 30px;
    padding: 0 20px 0 5px;
    box-sizing: border-box;
    outline: none;
    border: solid 1px #222222;
    background: #ffffff;
    border-radius: 0;
    appearance: none;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/*
--------------------------------------------------------------
# Focus
--------------------------------------------------------------
*/

textarea:focus,
input:focus {
    border: 1px solid #C5D8CF;
    color: #606c76;
}

/*
--------------------------------------------------------------
# Legend
--------------------------------------------------------------
*/

form legend {
    display: inline-block;
    width: 100%;
    color: #606c76;
    margin: 15px 0 15px 0;
    padding: 0 0 4px 0;
    border-bottom: dotted 1px #222222;
}

form legend:first-child {
    margin: 5px 0 15px 0;
}

/*
--------------------------------------------------------------
# Placeholders
--------------------------------------------------------------
*/

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: inherit;
    opacity: 0.5;
}

/*
--------------------------------------------------------------
# Misc
--------------------------------------------------------------
*/

::-moz-focus-inner {
    border: 0;
}

/* -- Disabled elements -- */
:disabled {
    opacity: 0.5;
}

/*
--------------------------------------------------------------
# Responsive
--------------------------------------------------------------
*/

@media screen and ( max-width: 568px ) {
    form {
        margin: 0 0 10px 0;
    }

    legend {
        display: block;
        text-align: center;
        width: 100%;
        color: #222222;
        margin: 5px auto 10px auto;
        padding: 10px 0 2px 0;
        border-bottom: dotted 1px #222222;
    }

    label {
        width: 100%;
        margin: 10px 0 5px 0;
    }

    small {
        font-size: 100%;
        text-align: left;
    }

    input[type="email"],
    input[type="url"],
    input[type="time"],
    input[type="date"],
    input[type="datetime"],
    input[type="number"],
    input[type="month"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="password"] {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 17px;
        border-radius: 3px;
    }

    textarea,
    .llal textarea,
    .llar textarea {
        width: 100%;
        height: 120px;
        font-size: 17px;
        border-radius: 3px;
    }

    input[type="button"],
    input[type="submit"],
    button {
        height: 40px;
        font-size: 17px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 17px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

}