/*
    Default.css
    Created on : Dec 18, 2017, 10:08:04 PM
    Author     : <a href="mailto:eric.liang@noaa.gov">Eric Liang</a>
    Updated to migrate to USWDS 2.1.0
*/

form {
    margin: 0;
}

/* padding until the page gets too small */
@media (min-width: 64em) {
    .page-container{padding:2rem;}
}
@media (max-width:63.99em){
    .page-container{padding:0;}
}

/* Undo jquery-ui font */
.ui-widget,.ui-widget .ui-widget {
    font-family: inherit;
}

/* usa button icons */
.ui-datatable .ui-button-text-icon-right {
    padding-right: 0;
}
.ui-datatable .ui-button-text-icon-left {
    padding-left: 0;
}
.ui-button-text-icon-right,.ui-button-text-icon-right.usa-button {
    padding-right: 2.75rem;
}
.ui-button-text-icon-left,.ui-button-text-icon-left.usa-button {
    padding-left: 2.75rem;
}
.ui-datatable-header .ui-widget-header .ui-button-text-icon-left{padding-left:0;}
.ui-datatable-header .ui-widget-header .ui-button-text-icon-right{padding-right:0;}
.ui-button-icon-right.ui-icon.ui-c.fa {
    margin-top: -8px;
    padding-right: .75rem;
}
.ui-button-icon-left.ui-icon.ui-c.fa {
    margin-left:.5rem;
    margin-top: -8px;
    overflow: visible;
}
.usa-button .ui-button-text.ui-c {
    padding-right: 0;
    padding-left: 0;
    display: inline;
}

/* Position of the ajax spinner in the center of the page  */
.ajaxstatus{position:fixed;left:50%;top:35%;}

/* Monospace the beacon ID*/
.bcnIdMsText{font-family: Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace;}

/*sidebar no shadow when hidden*/
.ui-sidebar[aria-hidden="true"]{box-shadow: none;}
.ui-sidebar [aria-hidden="false"]{
    height: 98%;
    width: 98%;
    margin: 1%;
    padding: 0;
}

/* Use this: <h:messages globalOnly="true" errorClass="messages-error" styleClass="alert-messages usa-list--unstyled"/>*/
.alert-messages .messages-info {
    border-left:.5rem solid;
    border-color: #00bde3;
    background-color: #e7f6f8;
    background-image: url("../uswds/info.svg");
    background-repeat: no-repeat;
    background-size: 3.5rem;
    padding:1.25rem 1.25rem 1rem 5rem;
    background-position: .75rem;
}
.alert-messages .messages-error {
    border-left:.5rem solid;
    border-color: #d63e04;
    background-color: #f4e3db;
    background-image: url("../uswds/error.svg");
    background-repeat: no-repeat;
    background-size: 3.5rem;
    padding:1.25rem 1.25rem 1rem 5rem;
    background-position: .75rem;
}

/*p:messages */
div.ui-messages.ui-widget{
    padding:0;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
div.ui-messages.ui-widget > .ui-messages-info {
    color:#000;
    margin: 0;
    padding: 1.25rem 1.25rem 1rem .75rem;
    background-color: #e7f6f8;
    border-width:0 0 0 .5rem;
    border-color: #00bde3;
}
div.ui-messages.ui-widget > .ui-messages-error {
    margin: 0;
    padding: 1rem 1rem 1rem .75rem;
    background-color: #f4e3db;
    border-width:0 0 0 .5rem;
    border-color: #d63e04;
    color:rgba(0, 0, 0, 0.8);
}

.ui-messages-info-icon,.ui-messages-error-icon{
    background-size: 2rem;
    width: 3rem;
    height: 2.5rem;
    background-position: center;
}

.ui-messages-info-icon{
    background-image: url("../uswds/info.svg");
}
.ui-messages-error-icon{
    background-image: url("../uswds/error.svg");
}
.ui-messages-info-summary,.ui-messages-error-summary {
    margin: 0 0 .5rem 0;
    font-size: 1.46397rem;
    display:block;
    line-height: 1.12707;
    color:rgba(0, 0, 0, 0.8);
}
.ui-messages-info-detail,.ui-messages-error-detail{
    display:block;
    margin: 0;
    color:rgba(0, 0, 0, 0.8);
}
.ui-messages ul {
    margin: 0;
    padding: 0 0 0 3.75rem;
}

/* Tooltip max-width */
.ui-tooltip {
    max-width: 30rem;
    white-space: pre-line;
}

/* Full width grid container*/
.grid-container--full{
    max-width: none;
    padding-left:0;
    padding-right:0;
}
.grid-container-widescreen.grid-container--full{
    padding-left:0;
    padding-right:0;
}

/*Datatable*/


form [type=submit].ui-button-icon-only {
    padding:0;
    margin:0 0.1em 0 0;
    width: 2.4em;
    display:inline-block;
}

/* error labels */
.ui-outputlabel.ui-widget.ui-state-error{
    font-weight:700;
    /*color: #d63e04;*/
    border: 0;
    border-left: .25rem solid #d63e04;
    padding-left: 1rem;
    position: relative;
}
.infoView.ui-outputlabel.ui-widget.ui-state-error{
    border-left:none;
}

@media (min-width:64em) {
    .ui-outputlabel.ui-widget.ui-state-error {
        margin-left:-1.25rem;
    }
}

.usa-input-error-message.usa-input-error{
    margin-top:0;
}
.infoView .usa-input-error-message.usa-input-error {
    padding:0;
    margin-bottom:0;
}
.ui-outputlabel.ui-widget.ui-state-error{
    background: inherit;
}

.usa-error-message{
    color: #d63e04;
}
.usa-form-group--error{
    border-left-color: #d63e04;
}

/*Label asterisk no space*/
.ui-outputlabel .ui-outputlabel-rfi{margin-left:0;}

/*Select checkbox menu small labels*/
.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item label {
    margin-top: 0;
}
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-label{
    line-height: 2rem;
    height: 100%;
}
.ui-selectcheckboxmenu.ui-widget {
    max-width: 30rem;
    width: 100%;
    border: 1px solid #565c65;
    margin: .5rem 0 0 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger .ui-icon {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}

/*date picker no background from uswds*/
thead th, thead td .datepicker  {
    background-color:inherit;
}

/*Calendar border*/
.infoView .ui-calendar {
    height: 1.5em;
}
.ui-calendar.ui-trigger-calendar{
    display:flex;
}
.ui-calendar .ui-inputfield {
    max-width:30rem;
    width: 100%;
    border: 1px solid #565c65;
    border-radius: 0;
}
.ui-datepicker-trigger.ui-button{
    outline:inherit !important;
}

.ui-datalist .ui-datalist-nobullets{
    margin:0;
    padding:0;
}


/*compact data view using uswds grid layout. labels in their own column right aligned.*/
.infoView .ui-outputlabel, .emailPreview .ui-outputlabel{
    font-weight: bold;
    margin-right:0rem;
    display: block;
    text-align: right;
    margin-top: 0;
}
/*top labels use usa-label and it will be aligned left with top margin.*/
.infoView .usa-label{margin-top:1.5em;text-align:left;}
/* hints are grey and smaller*/
.infoView .ui-outputLabel .usa-hint{font-size:.75em;}
.infoView div.usa-hint {
    max-width: 30rem;
    font-size:.75em;
}
.infoView.ui-tabs-header li{
    display:inline-block;
    margin:0 1rem 0 0;
}

/*.infoView .ui-panelgrid-cell.labelColumn {text-align: right;}*/
.infoView .ui-panelgrid .ui-panelgrid-cell{padding: 0 .5em;}
.infoView .ui-panelgrid-cell.labelColumn span, .infoView .ui-panelgrid-cell.labelColumn label, .ui-panelgrid-cell.valueColumn input {vertical-align: middle;margin-top: 0;display:block;}
.infoView .ui-panelgrid-cell.valueColumn table{margin:0;}
.infoView .ui-panelgrid-cell label{margin:0;}

.infoView td > label, .infoView td {
    white-space: nowrap;
}

.disable-scroll, .disable-scroll .ui-accordion-content{overflow:hidden;}
.ui-accordion.mapAccordion > .ui-accordion-content{
    padding:0;
}

.smallmenu .ui-inputfield{width:5em;}
.ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer{
    vertical-align: middle;
}

.ui-state-default.usa-input {
    background-color: #FFF;
}
.ui-inputfield.ui-inputtext {
    background-color: #FFF;
}

.ui-widget-content .ui-inputfield{
    background:#FFF;
    box-shadow: none;
}
.ui-inputfield.ui-state-disabled, 
.ui-selectonemenu.ui-state-disabled, 
.ui-spinner.ui-state-disabled,
.ui-inputtextarea.ui-state-disabled,
input[type="text"]:disabled, select:disabled{
    background-color: #eee;
    opacity: .75;
}
.ui-selectonemenu.ui-state-disabled .ui-inputfield,.ui-selectonemenu.ui-state-disabled .ui-selectonemenu-trigger{
    background-color:#eee;
    opacity: .75;
}
.ui-spinner.ui-state-disabled .ui-inputfield {
    background-color: #eee;
    opacity: .75;
}
.ui-spinner > .ui-spinner-input.ui-inputfield{padding-right:20px; text-align: left;}
.infoView table{
    margin-top:0;
    margin-bottom:1em;
}
.usa-input.ui-inputnumber .ui-inputfield {
    padding: 0;
    width: 100%;
    border: none;
    outline-offset: 9px !important;
}
.usa-table--borderless th, .usa-table--borderless td,.ui-autocomplete-panel .ui-autocomplete-table .usa-table--borderless td{
    border:0;
}
td > input[type="checkbox"], input[type="radio"] {
    vertical-align: baseline;
}
/*apply to keep on one line*/
.infoView .feedbackRadio td{
    white-space: nowrap;
}

.infoView input[type="text"]{
    height:1.5em;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}
.infoView select, .infoView .ui-selectonemenu-label {
    height:1.5em;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    padding-right:2rem;
}
.infoView .ui-inputtextarea, .infoView textarea{
    max-width:none;
}

.ui-widget .usa-input, .ui-widget-content .usa-input {
    border-color: #565c65;
}
.smallDataTable table{
    font-size:.75em;
}
.smallTable{
    font-size:.75em;
}
.smallTable td{
    padding: .2em;
}
.smallTable label{
    white-space: nowrap;
    vertical-align: middle;
}
.smallTable input{
    vertical-align: middle;
}

.infoView .ui-spinner-input, .infoView .ui-spinner {
    width: 100%;
}
.ui-spinner.ui-widget{border: 1px solid #565c65;border-radius: 0;}
.ui-spinner-button{border-radius:0;}
.ui-spinner-input.ui-inputfield{border:none;}

/* site Data Preview*/
.sitePreviewComponent td {
    border:0;padding: .5em;
}
.sitePreviewComponent table{
    display: inline-block;border:1px solid #565c65 ;padding:.5em;
}

/* Fix the header*/
.usa-header--extended .usa-logo{max-width:none;}

.usa-layout-docs-main_content {padding-left: 0rem; padding-right: 0rem;}

/* Override jquery ui button colors with USWDS colors. */
/*normal button*/
button.usa-button.ui-button.ui-widget{border:0;background-color:#005ea2;color:white;font-weight:bold;}

.usa-button.ui-button.ui-widget:hover, .usa-button.ui-button.ui-widget.usa-button--hover{
    background-color:#1a4480;
    border-bottom:0;
    color:white;
    text-decoration:none;
}

.usa-button.ui-button.ui-widget:active, .usa-button.ui-button.ui-widget.usa-button--active{
    background-color:#162e51;
    color:white;
}

/* secondary color button*/
.usa-button.ui-button.ui-widget.usa-button--secondary {
    background-color: #d83933;
}
.usa-button.ui-button.ui-widget.usa-button--secondary.usa-button--hover, .usa-button.ui-button.ui-widget.usa-button--secondary:hover {
    background-color: #b50909;
}
.usa-button.ui-button.ui-widget.usa-button--secondary:active, .usa-button.ui-button.ui-widget.usa-button--secondary.usa-button--active{
    background-color:#8b0a03;
}

/* cool accent color button*/
.usa-button.ui-button.ui-widget.usa-button--accent-cool {
    background-color: #00bde3;
    color: #1b1b1b;
}
.usa-button.ui-button.ui-widget.usa-button--accent-cool.usa-button--hover, .usa-button.ui-button.ui-widget.usa-button--accent-cool:hover {
    background-color: #28a0cb;
    color: #fff;
}
.usa-button.ui-button.ui-widget.usa-button--accent-cool:active, .usa-button.ui-button.ui-widget.usa-button--accent-cool.usa-button--active{
    background-color:#07648d;
    color:white;
}

/* base color button*/
.usa-button.ui-button.ui-widget.usa-button--base{
    background-color:#71767a;
}

.usa-button.ui-button.ui-widget.usa-button--base:hover, .usa-button.ui-button.ui-widget.usa-button--base.usa-button--hover{
    background-color:#565c65;
}

.usa-button.ui-button.ui-widget.usa-button--base:active, .usa-button.ui-button.ui-widget.usa-button--base.usa-button--active{
    background-color:#3d4551;
}

/* outlined button*/
.usa-button.ui-button.ui-widget.usa-button--outline{
    background-color:transparent;
    -webkit-box-shadow:inset 0 0 0 2px #005ea2;
    box-shadow:inset 0 0 0 2px #005ea2;
    color:#005ea2;
}

.usa-button.ui-button.ui-widget.usa-button--outline:hover, .usa-button.ui-button.ui-widget.usa-button--outline.usa-button--hover{
    background-color:transparent;
    -webkit-box-shadow:inset 0 0 0 2px #1a4480;
    box-shadow:inset 0 0 0 2px #1a4480;
    color:#1a4480;
}

.usa-button.ui-button.ui-widget.usa-button--outline:active, .usa-button.ui-button.ui-widget.usa-button--outline.usa-button--active{
    background-color:transparent;
    -webkit-box-shadow:inset 0 0 0 2px #162e51;
    box-shadow:inset 0 0 0 2px #162e51;
    color:#162e51;
}


/* Footer don't underline*/
.usa-footer__contact-info{margin:0;}
.usa-footer__contact-info a{display: inline-block;white-space: nowrap;}
/*Footer size*/
.usa-footer__logo-img {max-width: 5rem;}
.footer_required_links a,.footer_required_links span{text-decoration: none;font-size:0.75rem;margin:0;white-space: nowrap;}
.footer_required_links li {display: inline;padding: 0 0.5rem;}
ul.footer_required_links {text-align: center;padding:0}
@media (max-width:30em) {
    ul.footer_required_links {text-align: left;padding:1rem 0}
    .footer_required_links li {display: block;}
}
.usa-footer a:hover{text-decoration: underline;}
.usa-footer__address{
    display: flex;
    align-items: center;
}

/*p Select One Menu*/
.ui-selectonemenu{
    background-color: transparent;
    border: 1px solid #565c65;
    margin: .5rem 0 0 0;
    height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.ui-selectonemenu-label{padding: .5rem;}
.ui-selectonemenu-filter-container>.ui-icon.ui-icon-search{margin:3px;}
.ui-selectonemenu-label.ui-inputfield{height: 100%;}
.ui-selectonemenu .ui-selectonemenu-trigger,.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger{width: 2rem;}

/* sticky navtoolbar*/
#navToolbar{
    position: sticky;
    top:-.7em;
    z-index: 999999;
}

/* date range picker*/
.table-condensed th  {padding :1px;}
.table-condensed select{display: inline-block;}
.daterangepicker.auto-apply .drp-buttons{display:block;}
.applyBtn.btn{display: none;}
.daterangepicker select.monthselect, .daterangepicker select.yearselect{background-position: right 2px center;}
table.table-condensed, td{padding:1px;}

/*p panelgrid without border*/
.usa-table--borderless tr, .usa-table--borderless .ui-panelgrid-cell {border:0;}


/*usa-link visited*/
.usa-link:visited , .usa-form .usa-link:visited{
    color: #005ea2;
}

/* Password validation */
.valid{
    text-indent: -2.5rem;
}
.valid:before {
    content:" ";
    display:inline-block;
    height:1rem;
    margin-left:-.25rem;
    margin-right:.75rem;
    width:1rem;
    background-image:url(../uswds/correct9.svg),-webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent));
    background-image:url(../uswds/correct9.svg),linear-gradient(transparent,transparent);
    background-repeat:no-repeat;
    background-position:100%;
    background-size:100%;
}
.invalid{
    color: #d63e04;
    border-left: .25rem solid #d63e04;
    padding-left: 1rem;
    position: relative;
}

.unselectable{
    -webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-user-select:none;
}


/* mapping css */ 
.visible{
    display:block !important;
}
.loadingStatus, .mapStatus{
    background-color: #000;
    color: #fff;
    display:none;opacity: .5;
    left: 8rem;
    padding: .5em;
    position: absolute;
    top: 1rem;
}
.refresh_button{
    background-color: #000;
    cursor:pointer;
    display: inline;
    padding: 1em;
}
.refresh_button:hover{
    background-color:#333;
}
.refresh_button a{
    color: #fff;
}
.draw_circle.visible{
    display:inline-block !important;
}
.draw_circle{
    background-color: #000;
    color: #fff;
    cursor:pointer;
    display: none;
    padding: 1em;
}
.draw_circle:hover{
    background-color:#333;
}
.draw_circle.clicked{
    background-color: #888;
    outline:orange 2px solid;
}
.draw_circle a{
    color:#fff;
}
.instructionsWidget{width: 300px;background: #fff;padding:1rem;}