/*
* ----------------------------------------------
* Form styles
* ----------------------------------------------
* 01 - Wrappers
* 02 - Errors
* 03 - Form
* 04 - Labels
* 05 - Base inputs
* 06 - Text fields
* 07 - Textarea
* 08 - Buttons
* 09 - Checkbox
* 10 - Select
* 11 - Focus
* 12 - legend
* 13 - Placeholders
* 14 - Misc
* 14 - Responsive
* ----------------------------------------------
*/

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

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

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

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

/*
* ----------------------------------------------
* 03 - Form
* ----------------------------------------------
*/
form {
    display: block;
    border: none;
    margin: 0;
    padding: 0;
}

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

/*
* ----------------------------------------------
* 04 - Labels
* ----------------------------------------------
*/
label {
    display: block;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

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

input.inline {
    display: inline;
}

/*
* ----------------------------------------------
* 06 - 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"],
input[list="naam"] {
    width: 100%;
    height: 45px;
    margin: 0;
    padding: 0 0.5rem;
    outline: none;
    border-radius: 0.5rem;
}

/*
* ----------------------------------------------
* 07 - 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;
}

/*
* ----------------------------------------------
* 08 - 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;
}

/*
* ----------------------------------------------
* 09 - Checkbox
* ----------------------------------------------
*/
input[type="checkbox"] {
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 2px 0 0 0;
}

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

/*
* ----------------------------------------------
* 10 - Select
* ----------------------------------------------
*/
select {
    display: block;
    width: 100%;
    height: 45px;
    margin: 0.5rem 0 0 0;
    padding: 0 5px 0 5px;
    box-sizing: border-box;
    outline: none;
    border: solid 1px #cccccc;
    background: #ffffff;
    border-radius: 0.5rem;
    appearance: none;
    background: #ffffff url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 98% 50%;
}

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

/*
* ----------------------------------------------
* 11 - Focus
* ----------------------------------------------
*/
textarea:focus,
input:focus {
    border: 1px solid #C5D8CF;
    color: #606c76;
}

/*
* ----------------------------------------------
* 12 - 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;
}

/*
* ----------------------------------------------
* 13 - Placeholders
* ----------------------------------------------
*/
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder {
    color: inherit;
    opacity: 0.5;
}

/*
* ----------------------------------------------
* 14 - Misc
* ----------------------------------------------
*/
::-moz-focus-inner {
    border: 0;
}

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

/*
* ----------------------------------------------
* 15 - 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;
    }

}