/* Forms */
.custom-lock label {
    font-size: 14px !important;
}

.actions button:nth-of-type(1n+2), a.btn:nth-of-type(1n+2), .btn a:nth-of-type(1n+2) {
    margin-left: 10px;
}

button, input[type="submit"] {
    border: 0;
}

input[type="text"], input[type="email"], input[type="password"], textarea, select, input[type="tel"] {
    background: #fff;
    border: 1px solid #ccc;
    height: 34px;
    margin-bottom: 5px;
    padding: 5px;
    width: 100%;
}

textarea {
    height: 80px;
}

input[disabled], button[disabled], a[disabled] {
    opacity: .4;
}

label {
    padding-right: 7px;
    padding-bottom: 3px;
}

.req {
    font-size: 13px;
}

.error, .req {
    color: #BA2525;
}

.success {
    color: #589B22;
}

.actions {
    padding: 10px 0;
}

/* For inputs that shouldn't be 100% wide*/
.short-input {
    max-width: 350px;
    width: 100%;
}

/* Styling classes for forms, can be used for other things that need similar formatting */
/* "item" = class name of element you wrap a row in, so say you have 2 halfi you need in a row, you wrap it in an element called "item".  There's not styles for "item" in particular, but some of the forms stylings below require the form elements to be wrapped in an element named "item" to work. */

/* "halfi" = element that will be 50% in width.
    "onethirdi" = element that will be 30% in width. Often used with "twothirdi".
    "twothirdi" = element that will be 70% in width. */
.halfi:nth-child(2n), div.halfi:nth-of-type(2n) {
    margin-left: 0;
    padding: 0;
}

.onethirdi, .twothirdi {
    display: block;
    margin-left: 0;
    padding: 0;
    width: 100%;
}

@media only screen and (min-width : 550px) {
    .halfi, .onethirdi, .twothirdi {
        display: inline-block;
        padding-right: 10px;
        vertical-align: top;
    }

    .halfi {
        width: 50%;
    }

    .twothirdi {
        width: 70%;
    }

    .onethirdi {
        width: 30%;
    }

    /* every second halfi in an element will get these stylings */
    div.halfi:nth-of-type(2n) {
        margin-left: -5px;
        padding-left: 10px;
    }

    /* when used together every iteration will get these stylings */
    .onethirdi + .twothirdi, .twothirdi + .onethirdi {
        margin-left: -5px;
        padding-left: 10px;
        padding-right: 0;
    }
}

/* "checki" and "radioi" = classes to use with checkboxes and radio buttons for styling */
.checki, .radioi {
    margin-bottom: 5px;
}

/* "nesti" = put several inputs side-by-side, wrap only the inputs in this  */
.item .nesti input, .item .nesti select {
    margin-left: 2px;
    margin-right: 2px;
    width: 60px;
}

    .item .nesti input:first-child {
        margin-left: 0;
    }

    .item .nesti input:last-child {
        margin-right: 0;
    }

/* General stylings to be targeted for inputs used inside an "item" element only */
.item .checki input, .item .radioi input {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 3px;
}

.item input, .item select, .item textarea {
    margin-bottom: 15px;
}

@media only screen and (min-width : 400px) {
    .item .nesti input, .item .nesti select {
        margin-left: 5px;
        margin-right: 5px;
    }
}