/* app css stylesheet */

/* below styles are for the login validation popup */
#modalBoxWrap {display:none;z-index:40001}
#closeModalBoxLink {position:absolute;top:-12px;right:-12px;z-index:50}
.modalBoxOverlay {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:black;opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);z-index:40001}
/* USE THE NEXT FOUR LINES ONLY FOR APPS WITH ONE TO THREE CSPs */
/*.modalVerticalOffset {position:fixed;top:10%;right:0;left:0;width:100%;height:207px;z-index:40002}*/
/*.modalBox {width:390px;height:100%;position:relative;margin:0 auto;background-color:white;padding:0px}*/
/*@media only screen and (max-width: 490px) {.modalBox {width: 92%} .modalVerticalOffset {max-height:280px;height: 80%}}*/
/*@media only screen and (max-height: 400px) {.modalVerticalOffset {top:4%;max-height:250px !important;height: 92%}}*/

/* FOR APPS WITH FOUR OR MORE CSPs, USE THE NEXT FOUR LINES */
.modalVerticalOffset {position:fixed;top:10%;right:0;left:0;width:100%;height:361px;z-index:40002}
.modalBox {width:620px;height:100%;position:relative;margin:0 auto;background-color:white;padding:0px}
@media only screen and (max-width: 640px) {.modalBox {width: 92%} .modalVerticalOffset {max-height:580px;height: 85%;}}
@media only screen and (max-height: 500px) {.modalVerticalOffset {max-height:361px;height: 80%}}
/*end login validation popup*/

.va-seal-header-container {
    background-image: url("../images/va-seal-header-background-color.png");
    background-color: #01133F;
    padding: 0px;
    width: 100%;
    height: 87px;
}

.va-header-container {
    #background-color: #FFF8B2;
    width: 100%;
    height: 290px;
	font-size: 1.2em;
    vertical-align: middle;
    color:#000000;
	margin: 0px;
}

.p-banner {
	margin-left: 5px;
}

.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.hide {
    display: none !important;
}
.show {
    display: block !important;
}
.invisible {
    visibility: hidden;
}
a {
    font-weight: bold;
}
a:hover   { color: #3399FF }  /* user hovers


/*left navigation*/
.timeline {
    position: relative;
    padding: 21px 0px 10px;
    margin-top: 4px;
    margin-bottom: 30px;
}

.timeline .line {
    position: absolute;
    width: 2px;
    display: block;
    background: currentColor;
    top: 0px;
    bottom: 0px;
    margin-left: 30px;
}

.timeline .separator {
    border-top: 1px solid currentColor;
    padding: 5px;
    padding-left: 40px;
    font-style: italic;
    font-size: .9em;
    margin-left: 30px;
}

.timeline .line::before { top: -4px; }
.timeline .line::after { bottom: -4px; }
.timeline .line::before,
.timeline .line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: 12px;
    height: 12px;
    display: block;
    border-radius: 50%;
    background: currentColor;
}

.timeline .panel {
    position: relative;
    margin: 10px 0px 30px 70px;
    clear: both;
}

.timeline .panel::before {
    position: absolute;
    display: block;
    top: 8px;
    left: -24px;
    content: '';
    width: 0px;
    height: 0px;
    border: inherit;
    border-width: 12px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.timeline .panel .panel-heading.icon  * { font-size: 16px; vertical-align: middle; line-height: 32px; }
.timeline .panel .panel-heading.icon {
    position: absolute;
    left: -54px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
}

.timeline .panel .panel-heading-completed.icon  * { font-size: 16px; vertical-align: middle; line-height: 32px; }
.timeline .panel .panel-heading-completed.icon {
    position: absolute;
    left: -54px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
}

.timeline .panel .panel-heading-current.icon  * { font-size: 16px; vertical-align: middle; line-height: 32px; }
.timeline .panel .panel-heading-current.icon {
    position: absolute;
    left: -54px;
    display: block;
    width: 30px;
    height: 30px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    float: left;
}

.timeline .panel-outline {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.timeline .panel-outline .panel-body {
    padding: 10px 0px;
}

.timeline .panel-outline .panel-bodyEx {
    color: #1677bd;
    font-weight: 500;
    font-style: italic;
}

.timeline .panel-outline .panel-bodyExCompleted {
    color: #009933;
    font-weight: 500;
    font-style: italic;
}

.timeline .panel-outline .panel-bodyExCurrent {
    color: #003366;
    font-weight: 700;
    font-style: normal;
}

.timeline .panel-outline .panel-heading:not(.icon),
.timeline .panel-outline .panel-footer {
    display: none;
}

.panel-titleEx {
    font-size: 14px;
    line-height: 1.2;
}

.panel-info>.panel-heading {
    color: #ffffff;
    background-color: #1677bd;
    border-color: #1677bd;
}

.panel-info>.panel-heading-completed {
    color: #ffffff;
    background-color: #009933;
    border-color: #009933;
}

.panel-info>.panel-heading-current {
    color: #ffffff;
    background-color: #003366;
    border-color: #003366;
}
/*end left navigation */

/*customisation for grid layout */
  .usa-grid .usa-width-eleven-twelves,
  .usa-grid-full .usa-width-eleven-twelves {
    float: left;
    display: block;
    margin-right: 0%;
    width: 90%;
  }

 /*end grid layout*/

.usa-accordion-borderedEx {
    margin-left: 8px;
    margin-top: 8px;
    width: 101%;
}

.usa-button:focus {
	box-shadow:	0px 0px 10px #dbebf6, 0px 0px 14px #dbebf6;
}

/* customization for the fielset*/
.customFieldset {
    border: 1px solid #c0c0c0;
    margin: 10px;
    padding: 10px;
}

.customFieldset legend {
    font-size: 16px;
    font-style: italic;
    margin-bottom: 0px;
    width: auto;
    color: #1677bd;
}

.customFieldset label {
    font-size: 14px;
    margin-top: 1.2rem;
}

.customFieldset input[type="text"] input[type="select"] {
    height: 3rem;
}
/*end settings for fieldset

/*customisation for additional text*/
.additional_textEx {
    float: none;
    margin-left:5px;
    font-size: 18px;
    position: relative;
    top: 5px;
    line-height: normal;
}

.headerText {
    margin-top: 10px;
    color: #FFFFFF;
    font-weight: 600;
}

.labelSmall {
    font-size: 15px !important;
    font-weight: 800 !important;
}

/*date picker */
select.ui-datepicker-year {
    display: inline;
}

select.ui-datepicker-month {
    display: inline;
}

div.ui-datepicker-header {
    background: #d1e0e0;
}

/*end date picker*/

/* radio buttons in tables */
.radioInputInTableColumn {
    padding-bottom:10px;
    width:40px;
    height: 40px;
}

.radioLabelInTableColumn {
    width:0;
    padding:0;
    padding-top:7px;
    margin:0;
    padding-right:5px;
}

/* end radio buttons in tables */

/*progress spiner */
.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*end progress spiner */

/*popup styles*/
.ui-widget-header {
    background:  #003366;
    color: #ffffff;
}
.ui-dialog {
    padding: 0px;
}
/*end popup styles*/

input[type="submit"] {
    padding: 1rem 2rem;
    margin-top: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    height: 2.2em;
}


/*errors panel */
.usa-alert {
    margin-top:0;
    width:101.2%;
    background-size: 35px;
    padding-bottom: 0px;
}
.usa-alert-close {
    float:right;
    font-weight: 900;
    font-size:20px;
    cursor: pointer;
    cursor: hand;
}
/* end errors panel */

/*table in selection popup */
table tr td.selectionPopupTdLabel {
    border:none;
    background-color: transparent;
    font-weight: bold;
    text-align: right;
    padding: 0.3em;
    width:80px;
}
table tr td.selectionPopupTd {
    border:none;
    background-color: transparent;
    text-align: left;
    padding: 0.3em;
}
table tr td.selectionPopupTdFixed {
    border:none;
    background-color: transparent;
    text-align: left;
    padding: 0.3em;
    width:142px;
}
.btn-defaultEx {
    white-space: normal;
    width:100%;
}
/*end table in selection popup */

/*styles to show sucess after submit of delegate info */
label.labelSubmitResults {
   margin-top:0;
}
.success {
    background-color: #e7f4e4;
    height:3em;
    padding: .8em;
    font-size: larger;
}
/*end styles to show sucess after submit of delegate info */


/*style to handle valid, invalid inputs in html elements */
input:required {
    border:2px solid red;
}

input:optional {
    border:1px  solid green;
}

input:valid {
    border:1px  solid green;
}

input:in-range {
    border:1px  solid green;
}

input:invalid {
    border:2px  solid red;
}

input:out-of-range {
    border:2px  solid red;
}

input:focus + .help,
input:invalid + .help {
    display:inline-block;
}


select:required {
    border:2px solid red;
}

select:optional {
    border:1px solid green;
}

select:valid  {
    border:1px  solid green;
}
select:in-range {
    border:1px  solid green;
}

select:invalid {
    border:2px solid  red;
}

select:out-of-range {
    border:2px solid  red;
}

select:focus + .help,
select:invalid + .help {
    display:inline-block;
}


textarea:required {
    border:2px solid red;
}

textarea:optional {
    border:1px solid green;
}

textarea:valid  {
    border:1px  solid green;
}
textarea:in-range {
    border:1px  solid green;
}

textarea:invalid {
    border:2px solid  red;
}

textarea:out-of-range {
    border:2px solid  red;
}

textarea:focus + .help,
textarea:invalid + .help {
    display:inline-block;
}
/*end style to handle valid, invalid inputs in html elements */


/* styles to handle html placeholder attribute text color */
input::-webkit-input-placeholder {
    color: #A6A2A2;
}
input::-moz-placeholder {
    color:#A6A2A2;
}
input:-moz-placeholder {   /* Older versions of Firefox */
    color: #A6A2A2;
}
input:-ms-input-placeholder {
    color: #A6A2A2;
}
/* end styles to handle html placeholder attribute text color */

.accordion-borderedDiv {
    display: inline-block;
    font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
    margin: 0;
    padding: 1.5rem 5.5rem 1.5rem 3rem;
    width: 100%;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background-color: #f1f1f1;
}
.frontPageSection {
    border-style: solid;
    border-width: .15em;;
    border-color: #8c8c8c;
    padding: 0;
    margin: 0;
}
.index_1 {
    display: inline-block;
    width:336px;
    padding-left: 5px;
}
.index_2 {
    margin-top: 0em;
    padding-top: 0em;
}
.index_3 {
    font-size: larger;
    font-weight: bolder
}
.index_4 {
    margin-top: .7em;
}
.index_5 {
    font-size: larger;
    font-weight: bolder
}
.index_6 {
    border:none;
}

/* below font definitions copied and modified from uswds.css
this is done because IIS does not support mime type of .woff2 format which is used in uswds.css
.woff2 is removed below and .woff format is served instead */

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    src: url("../libs/uswds-0.9.5/fonts/sourcesanspro-regular-webfont.woff") format("woff"), url("../libs/uswds-0.9.5/fonts/sourcesanspro-regular-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 700;
    src: url("../libs/uswds-0.9.5/fonts/sourcesanspro-bold-webfont.woff") format("woff"), url("../libs/uswds-0.9.5/fonts/sourcesanspro-bold-webfont.ttf") format("truetype");
}