/*-------------------+
 | Site: USDN        |
 | Part: Form styles |
 +-------------------*/


/* Global
======================================================================*/
fieldset { border: 1px solid #ddd; margin-bottom: 2em; padding: 1em 1.5em; }
input, select, textarea { font-size: 1em; }
input:focus, select:focus, textarea:focus { outline: 2px solid #0192ff; outline-offset: -1px; outline-radius: 3px; }
legend { background: #fff; color: #b9121b; font-size: 20px; font-weight: bold; margin: 0 0 0 -0.5em; padding: 0.1em 0.75em 0.1em; }
legend em { color: #777; font-size: 0.7em; font-style: normal; font-weight: normal; margin-left: 0.3em; }
textarea { height: 5em; }

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

/* Agency */
.agency .error-message{display:block;}

/* Autocomplete */
#search-autocomplete { max-height: 23em; overflow-y: auto; width: 490px !important; }
#search-autocomplete [class *= "fa-"] { font-size: 0.85rem; margin-right: 0.2rem; opacity: 0.7; }
.select2 { margin-bottom: 1em; }
.select2-highlighted .mute { color: #fff; opacity: 0.7; }
.select2-results li { margin: 0; }
.select2-result-single { margin: 0; }

/* Datepicker */
.ui-datepicker-trigger { background: none; border: 0; cursor: pointer; padding: 0; }

/* Fields */
.form-field { flex: 0 0 auto; width: 70%; }
.form-field { margin-bottom: 1em; position: relative; }
.form-field p { margin-bottom: 0.25em; }
.form-label { flex: 0 0 auto; text-align: right; width: 27%; }
.form-row { clear: both; display: flex; font-weight: normal; justify-content: space-between; margin: 0; }

    /* Multiple fields on a single line */
    .field-single-line { display: flex; justify-content: space-between; width: 60%; }
    .field-single-line p { box-sizing: border-box; flex: 0 0 auto; 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%; }
            
    /* Fields in modal dialog */
    .modal .form dd.field { width: 50%; }
    .modal .form dt .label { width: 47%; }
    
    /* Stacked fields */
    .form-row.form-row-stacked { display: block; }
    .form-row.form-row-stacked .form-field { width: auto; }
    .form-row.form-row-stacked .form-label { text-align: left; width: auto; }
    
/* Help text */
.field-help { color: #666; font-size: 0.8em; font-weight: normal; }

/* Invite */
#invite .action { margin-right: 1em; }
#invite span.error-message { color: #fff; }
#invite textarea.txt { width: 98%; }
#invite input.error-message, #invite .txt.error-message { border-color: #fff; }

/* List builder */
.list-builder { list-style: none; margin-left: 0; }
.list-builder > * { border: 1px solid #ddd; border-radius: 10px; margin-bottom: 0.5em; padding: 20px; position: relative; }
.list-builder > *:hover { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }
.list-builder-tools { font-size: 15px; position: absolute; right: 20px; text-align: right; top: 10px; }
.list-builder-tools .remote { font-size: 2rem; }
.list-builder-tools input { font-weight: bold; padding: 0.2em 0.75em; }

/* List Edit */
.list-edit { list-style: none; margin: 0; }
.list-edit .c2l, .list-edit .c2r { float: left; margin-right: 1em; width: 40%; }
.list-edit .list-remove { font-weight: bold; margin-top: 0.2em; }
.list-edit .list-remove .remove { border-radius: 20px; padding: 0.1em 0.4em 0.075em; }
.list-edit .list-remove .remove:hover { background: #3c6cc7; color: #fff; text-decoration: none; }
.list-edit .field-help { display: block; margin: 0; }
.list-edit .ItemTemplate { clear: both; }

/* Message */
#form-message { position:relative; text-align:center; }
#form-message-wrapper { left:0; position:fixed; top:0; width:100%; z-index: 99; }        

#form-message-content {
    background:#ffc;
    border:1px solid #ddd;
    border-top:0;
    border-radius:0 0 5px 5px;
    box-shadow:0 1px 5px rgba(0,0,0,0.3);
    display:inline-block;
    font-weight:bold;
    padding:0.5em 1em 0.6em;                
}

#form-message-content.error { background: #ffb6c1; border:1px solid #f00; color: #000; font-weight: bold; }

.confirm-message { position:relative; text-align:center; }
.confirm-message .confirm-message-wrapper { left:0; position:fixed; top:0; width:100%; z-index: 1001; }        
.confirm-message .confirm-message-content {
    background:#ffc;
    border:1px solid #ddd;
    border-top:0;
    border-radius:0 0 5px 5px;
    box-shadow:0 1px 5px rgba(0,0,0,0.3);
    display:inline-block;
    font-weight:bold;
    padding:0.5em 1em 0.6em;                
}

.confirm-message .error { background: #ffb6c1; border:1px solid #f00; color: #000; font-weight: bold; }


/* Notifications */
.flash > div { margin-bottom: 2em; }
.flash h2 { color: #000; font-size: 1.3em; margin-bottom: 0.5em; }
.flash p { list-style: none; margin: 0; }

    /* AJAX notifications */
    #ajax-message { display: none; position: absolute; top: 0; width: 100%; }
    #ajax-text { background-color: #FFF1A8; font-size: 90%; font-weight: bold; margin: 0 auto !important; padding: 3px 0; position: relative; text-align: center; white-space: nowrap; width: 100px }
    
    /* Confirmation */
    .flash .confirm { background: #e8f8d1 url(/images/shared/check.png) no-repeat 1em 1em; border: 2px solid #c8e999; padding: 1.5em 1.5em 1.5em 3.5em; }
    
    /* Errors */
    .error { background: url(/images/shared/exclamation.gif) no-repeat 0 0.25em; color: #f00; padding: 3px 0 3px 20px; }
    .custom-help .error-message, .field-single-line .error-message { display: block; text-align: left; }
    .error { color: #f00; padding: 3px 0; }
    .error-message { color: #bf0210; font-weight: bold; margin-right: 0.5em; }
    
    #errorExplanation, .flash .error {
        background: #ffc url(/images/shared/error.png) no-repeat 1em 1.1em;
        border: 2px solid #ea3c20;
        color: #f00;
        padding: 20px 20px 20px 60px;
    }
    
    input.error-message, .mce-tinymce.error-message,.txt.error-message { border-color: #bf0210; color: #000; font-weight: normal; }
    
    .field-with-errors { color: #f00; }
    .field-with-errors .txt, .field-with-errors .txt-med { border: 2px solid #f00; }
    .label .field-with-errors { display: inline; }
    
    /* ASP.NET MVC Errors */
    .validation-summary-valid { display: none; }
    
    .validation-summary-errors {
        background: url(/images/shared/error.gif) no-repeat scroll 10px 0.5em #FFFCCC;
        border: 2px solid #EA3C20;
        color: #FF0000;
        padding: 1.5em 1.5em 1.5em 3.5em;
    }
    
    .input-validation-error { border: 2px solid #FF0000 }
    
    .field-validation-error {
        background: url(/images/shared/exclamation.gif) no-repeat scroll 0 0.25em transparent;
        color: #FF0000;
        margin : 0 0 0 3px;
        padding : 3px 0 3px 20px;
    }
    
    /* Notices */
    .flash .notice { background: #e0f0ff url(/images/shared/notice.png) no-repeat 13px 13px; border: 2px solid #a1d0fb; padding: 20px 20px 20px 60px; }
    
    /* Warnings */
    .flash .warn { background: #fef5c6 url(/images/shared/warning.png) no-repeat 13px 13px; border: 2px solid #ffcd36; padding: 20px 20px 20px 60px; }

/* Options */
.options-h, .options-v { list-style: none; margin: 0; }
.options-h input, .options-v input { margin: 0 0.5em -0.05em 0; }
.options-h img { border-bottom: 3px solid #fff; padding: 5px; vertical-align: middle; }
.options-h .label, .options-v label { display: inline; }
.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: 22px; text-indent: -22px; }
.options-v ul { margin: 0.3em 0 1em; }

/* Photo updates */
.photo-update img { width: initial; }

/* Placeholder */
.placeholder { color: #999; 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; }

/* Related tags */
ul.related-tags { clear: left; float: left; list-style: none; margin: 3px 0 7px; }
ul.related-tags li { display: inline; margin-right: 0.5em; width: auto; }

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

/* Search */
.search { background: #fff; border: 1px solid #ccc; border-radius: 4px; display: flex; position: relative; white-space: nowrap; }

.search .search-btn {
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: #0068ab;
    cursor: pointer;
    display: block;
    flex: 0 0 3em;
    font-size: 0.8em;
    padding: 0.8em 0.6em 0.6em 0.6em;
    text-align: center;
}

.search .search-btn:hover { color: #000; }
.search .search-txt { background: none; border: 0; box-shadow: none; display: block; flex: 1 1 auto; margin: 0; min-width: 0; padding: 0; text-indent: 0.6em; }
.search-loading { background: white url(/images/loading-small.gif) 95% center no-repeat !important; }
    
    /* Dedicated search */
    .dedicated-search { margin-right: 1em; width: 33%; }
    
    /* Site search */
    #react-content-search { flex: 1 1 auto; margin: 0 40px; }
    #site-search { border: 1px solid #ddd; }
    #site-search > .input-group { flex-wrap: nowrap; margin: 0 !important; }
    #site-search .basic-multi-select { flex: 1 1 auto; order: 2; }
    #site-search .basic-multi-select * { border: 0; }
    #site-search .input-group-append { flex: 0 0 auto; order: 4; }
    #site-search .input-group-append > .btn { opacity: 0.4; }
    #site-search .input-group-append > .btn:hover { opacity: 1; }
    #site-search .input-group-append .dropdown-menu { width: 100%; }
    #site-search .input-group-append .dropdown-menu .form-control { padding: 0; }
    #site-search .input-group-prepend { flex: 0 0 auto; order: 1; }
    #site-search .search-btn { flex: 0 0 auto; order: 3; }
    .select__control--is-focused { position: absolute; }
    .select__control--is-focused .select__value-container { height: auto; }
    .select__indicators, #site-search .select__placeholder { display: none; }
    .select__menu { z-index: 110; }
    .select__menu-list { max-height: 23em; }
    .select__multi-value { background: rgba(0, 140, 179, 0.1); }
    .select__option { font-size: 0.9rem; }
    .select__value-container { background: #fff; height: 2em; z-index: 100; }
    
    #site-search .btn-outline-secondary {
        border: 0;
        border-radius: 0;
        color: #000;
        font-weight: normal;
        padding: 0.5rem .75rem 0.3rem;
    }
    
        /* Search footer */
        #site-search .search-footer { display: flex; justify-content: space-between; }
        
        /* Search help */
        .search-help { display: flex; flex-wrap: wrap; justify-content: space-between; }
        .search-help dd { flex: 0 0 auto; width: calc(100% - 9rem); }
        .search-help dd, .search-help dt { margin-bottom: 0.5rem; }
        .search-help dt { flex: 0 0 auto; width: 7rem; }
        .search-help .mute { font-style: italic; margin: 0; }

/* Sequencing */
.sequence { list-style: none; line-height: 1.4; margin-left: 0; }
.sequence .call-r { margin-top: 0; }

.sequence li {
	background: #f5f5f5;
	border: 2px solid #ddd;
	border-radius: 4px;
	cursor: move;
	height: 1%;
	margin-bottom: 5px;
	padding: 0.7em 1em;
}

.sequence li:hover { background: #ddd; }
.sequence-single li { cursor: default; }

/* Sign in */
.signin { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; min-height: 50vh; max-width: 400px; }

/* Text boxes */
.txt, .txt-date, .txt-med, .txt-num, .txt-time {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px #ddd;
    box-sizing: border-box;
    margin-right: 0.5em;
    padding: 0.4em 0.3em;
    vertical-align: middle;
}

.txt { width: 100%; }
.txt-date, .txt-time { width: 7em; }
.txt-med { width: 47%; }
.txt-num { width: 4em; }
.txt-time { width: 5em; }


/*User selector*/
#user-list.loading {position:relative; overflow: hidden; }
.user-list.loading {position:relative; overflow: hidden; }
#user-list .modal {display:none;position:fixed;z-index:1000;top: 0;left:0;height:100%; width: 100%; position:absolute; background: rgba( 255, 255, 255, .8 ) url(/images/ajax-loader.gif) 20% 50% no-repeat;}
.user-list .modal {display:none;position:fixed;z-index:1000;top: 0;left:0;height:100%; width: 100%; position:absolute; background: rgba( 255, 255, 255, .8 ) url(/images/ajax-loader.gif) 20% 50% no-repeat;}
#user-list.loading .modal {display:block;}
.user-list.loading .modal {display:block;}