/*-------------------------+
 | Site: YALSA Book Finder |
 | Part: Form styles       |
 +-------------------------*/


/* Global
======================================================================*/
input, select, textarea { font-size: 1em; }
input:focus, select:focus, textarea:focus { outline: 2px solid #0192ff; outline-offset: -1px; outline-radius: 3px; }
textarea { height: 5em; }

/* Specifics
======================================================================*/

/* ASP.NET MVC Errors */
.validation-summary-valid { display: none; }
.validation-summary-errors { background: #fffccc; border: 2px solid #EA3C20; border-radius: 4px; color: #FF0000; margin: 0 0 1em 0; padding: 1.5em 1.5em 0.5em 1.5em; }
.input-validation-error { border: 2px solid #FF0000 }
.field-validation-error { color: #FF0000; margin : 0 0 0 3px; padding : 3px 0 3px 0; }

/* Character counters */
.charcount { color: #777; float: right; font-weight: normal; margin-right: 0.5em; }
.charcount .over { color: #f00; font-weight: bold; }

/* Checklists */
.checklist { border: 1px solid #ccc; max-height: 20em; line-height: 1.4;    margin: 0 0 1em 0; overflow: auto; }
.checklist input { margin-bottom: 1px; }
.checklist label { display: block; padding: 0.1em 0 0.1em 25px; height: 1%; text-indent: -25px; }
.checklist li { background: none; display: block; float: none; margin: 0; padding: 0; white-space: normal; width: 100%; }
.checklist li p { margin: 0; padding: 1em 0 0; }
.checklist li ul { margin: 0 0 0 2em; }
.checklist .mute { font-size: 1em; white-space: nowrap; }
.checklist p { font-weight: bold; margin-bottom: 0.25em; }
.checklist .selected { background: #ffa; }
.checklist ul { margin-bottom: 1em; }

/* Fields */
.form-field { float: right; width: 70%; }
.form-field { margin-bottom: 1em; position: relative; }
.form-field p { margin-bottom: 0.25em; }
.form-label { float: left; text-align: right; width: 27%; }
.form-label label { color: #000; }
.form-row { clear: both; font-weight: normal; margin: 0; }

    /* Multiple fields on a single line */
    .field-single-line { width: 60%; }
    .field-single-line p { box-sizing: border-box; float: left; margin: 0; padding-right: 10px; }
    .field-single-line .txt { width: 100%; }
    
        /* Location fields */
        .field-single-line .field-loc-city { width: 50%; }
        .field-single-line .field-loc-state { width: 20%; }
        .field-single-line .field-loc-postal { float: right; padding-right: 0; width: 30%; }
        
        /* Name fields */
            /* Full name (first/middle/last) */
            .fields-name-full .field-name-first, .fields-name-full .field-name-last { width: 40%; }
            .fields-name-full .field-name-last { float: right; padding-right: 0; }
            .fields-name-full .field-name-middle { width: 20%; }
            
            /* Long name (first/middle/last/suffix) */
            .fields-name-long .field-name-first, .fields-name-long .field-name-last { width: 30%; }
            .fields-name-long .field-name-middle, .fields-name-long .field-name-suffix { width: 20%; }
            .fields-name-long .field-name-suffix { float: right; padding-right: 0; }
            
            /* Short name (first/last) */
            .fields-name-short .field-name-first, .fields-name-short .field-name-last { width: 50%; }
            .fields-name-short .field-name-last { float: right; padding-right: 0; }
        
        /* Phone */
        .field-single-line .field-phone-number { width: 70%; }
        .field-single-line .field-phone-ext { padding-right: 0; width: 20%; }
        .field-single-line .field-phone-x { padding-top: 0.5em; text-align: center; width: 10%; }

/* Help text */
.field-help { color: #666; font-size: 0.8em; font-weight: normal; }

/* List builder */
.list-builder { list-style: none; margin-left: 0; }
.list-builder > li { border: 1px solid #ddd; border-radius: 4px; margin: 0 0 0.5em; overflow: hidden; padding: 20px 40px 20px 20px; position: relative; }
.list-builder .remove-trigger { line-height: 1; position: absolute; right: 20px; top: 20px; }
    
/* Notifications */
.flash .confirm, .flash .error, .flash .notice, .flash .warn { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
.flash h2 { font-weight: bold; margin-bottom: 0.5em; }
.flash p { list-style: none; margin: 0; }

    /* Confirmation */
    .flash .confirm { background: #e8f8d1; padding: 30px; }
    .flash .confirm h2 { color: #516f26; }
    
    /* Errors */
    .flash .error { background: #ffc; padding: 30px; }
    .flash .error h2 { color: #d20000; }
    .field-with-errors { color: #f00; }
    .input-validation-error.txt, 
	.input-validation-error.txt-date, 
	.input-validation-error.txt-med, 
	.input-validation-error.txt-num { border: 2px solid #f00; }
    .label .field-with-errors { display: inline; }
    
    /* Notices */
    .flash .notice { background: #e0f0ff; padding: 30px; }
    .flash .notice h2 { color: #274d70; }
    
    /* Warnings */
    .flash .warn { background: #fef5c6; padding: 30px; }
    .flash .warn h2 { color: #ac6b04; }

/* Options */
.options-h, .options-v { list-style: none; margin: 0; }
.options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
.options-h li, .options-v li { background: none; margin-bottom: 0.3em; padding: 0; }
.options-h li { display: inline; margin-right: 0.7em; white-space: nowrap; }
.options-v li { padding-left: 25px; text-indent: -25px; }

/* Placeholder */
input.placeholder, textarea.placeholder { color: #777; font-style: italic; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #999; font-style: italic; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; font-style: italic; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; font-style: italic; }

/* Required text */
.req { color: #f00; }

/* Selects (custom) */
.custom-select { display: inline-block; position: relative; }
.custom-select option { color: #000; }

.custom-select:after {
    bottom: 0;
    color: #206aa3;
    content: "▼";
    font-size: 10px;
    line-height: 37px;
    right: 4px;
    padding: 0 7px;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.custom-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    color: #206aa3;
    display: inline-block;
    font-size: 14px;
    padding: 6px 20px 6px 10px;
}

.select2-container--bootstrap { display: inline-block !important; }

/* Text boxes */
[class *= "txt"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px #ddd;
    margin-right: 0.5em;
    padding: 0.3em;
    vertical-align: middle;
}

.txt { width: 100%; }
.txt-date { width: 7em; }
.txt-med { width: 60%; }
.txt-num { width: 4em; }

/* Search */
.search { background: #fff; border: 1px solid #ccc; border-radius: 0.5rem; display: -ms-flexbox; display: flex; white-space: nowrap; }

.search button {
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-radius: 0 4px 4px 0;
    color: #f26522;
    cursor: pointer;
    -ms-flex: 0 0 3em;
    flex: 0 0 3em;
    font-size: 0.8em;
    padding: 0.7em 0;
}

.search button:hover { background: #eee; }
.search .search-label { display: none; }
.search .txt { background: none; border: 0; box-shadow: none; display: block; margin: 0; min-width: 0; padding: 0; text-indent: 0.6em; }

    /* Site search */
    #site-search { margin: 0 auto 1em; width: 70%; }
    #site-search .search { border: 0; font-size: 30px; }
    #site-search .search input { color: #000; }