/*** CSS RESET ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*** Root font size ***/

@media only screen and (min-width: 1400px){
	html { font-size: 17px; }
}

@media only screen and (max-width: 1024px){
	.desktop { display: none; }
	.mobile { display: block; }
}

@media only screen and (min-width: 640px) and (max-width: 1400px){
	html { font-size: 16px; }
}

@media only screen and (max-width: 640px){
	html { font-size: 15px; }
}


/*** Base ***/

body {
  font-family: 'helvetica','HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif;
  margin: 0 !important;
  padding: 0 !important;
}

div#site-wrapper,
div#header-content
{
	width: 92%;
	max-width: 920px;
	margin: 0 auto;
	position: relative;
}

div#site-wrapper ol{
  list-style-position: inside;
}

div#site-wrapper ol li{
  margin-top: 0.25rem;
}

div#header-content a{
  display: inline-block;
}

img.usab-logo
{
  display: block;
  width: 70%;
}

div#site-wrapper { margin-top: 2rem; margin-bottom: 4rem;}

h1, h2
{
  font-weight: 600;
  line-height: 120%;
  color: #5B872C;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem;  margin-bottom: 0.5rem; }

p, ol {
  width: 100%;
  font-size: 1.125rem;
  margin-top: 1rem;
  line-height: 140%;
}

p a
{
  color: #5B872C;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

p a:hover { color: #789963 }

.no-word-break { white-space: nowrap; }

.page-section
{
  margin-top: 2rem;
}

.btn-wrapper { text-align: center; margin: 0 auto; }
.btn-wrapper.left { text-align: left; }

a.filled-btn 
{
  color: #fff;
  border-color: #526a33;
  background-color: #5B872C;
  font-size: 1rem;

  text-decoration: none;
  display: inline-block;
  line-height: 1.2em;
  position: relative;
  font-weight: 400;
  text-align: center;
  max-width: 100%;

  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

a.filled-btn:hover{
  background-color: #789963;
}

@media only screen and (max-width: 640px){

  div#site-wrapper,
  div#header-content { width: 90%; }

  div#site-wrapper { margin-top: 1.5rem; margin-bottom: 3rem;}

  .page-section
  {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
  }
  .page-section.top-border { padding-top: 1.5rem; }
  .page-section.bot-border { padding-bottom: 1.5rem; }

  p { margin-top: 0.75rem; }

  img.usab-logo { max-width: 255px; }

}


@media only screen and (max-width: 480px){
  h2 { margin-bottom: 0.25rem; }

  a.filled-btn 
  {
    color: #fff;
    border-color: #526a33;
    background-color: #5B872C;
    font-size: 1.125rem;

    text-decoration: none;
    display: inline-block;
    line-height: 1.2em;
    position: relative;
    font-weight: 400;
    text-align: center;
    max-width: 100%;

    -webkit-transition: all .25s ease;
    transition: all .25s ease;
  }

  a.filled-btn:hover{
    background-color: #789963;
  }
}


/*** Loader ***/

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 3rem auto 2rem;
  font-size: 8px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(120,153,99, 0.2);
  border-right: 1.1em solid rgba(120,153,99, 0.2);
  border-bottom: 1.1em solid rgba(120,153,99, 0.2);
  border-left: 1.1em solid #789963;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 640px){
  .loader {
    margin: 2.25rem auto 1.5rem;
    font-size: 6px;
  }
}

/*** Column wrapper ***/

div.col-wrapper
{
	display: flex;
	align-items: stretch;
	flex-direction: row;
	flex-wrap: wrap;
}

div.col
{
	flex-grow: 0;
	flex-shrink: 0;
	margin: 1rem;
	box-sizing: border-box;
	position: relative;
}

div.col.col-1 { margin-left: 0px; margin-right: 0px; }

div.col:first-of-type { margin-left: 0px; }
div.col:last-of-type { margin-right: 0px; }

div.col-2:nth-of-type(odd) { margin-left: 0px; }
div.col-2:nth-of-type(even) { margin-right: 0px; }

div.col-1 { flex-basis: 100%; }
div.col-2 { flex-basis: calc((100% - 2rem) / 2); }
div.col-3 { flex-basis: calc((100% - 4rem) / 3); }

@media only screen and (max-width: 1024px){
	div.col-2 { flex-basis: calc((100% - 2rem) / 2); }
}

@media only screen and (max-width: 920px){
	div.col-3
	{ 
		flex-basis: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}
}

@media only screen and (max-width: 720px){

	div.col-1,
	div.col-2
	{ 
		flex-basis: 100%;
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
}


/*** Form and review ***/

.page-section.error-section {
  background-color: #F8EAEA;
  padding: 3%;
  border-radius: 2px;
}

.error-section h2 { color: #BB3131; }
.error-section p { margin-top: 0.5rem; }

.form-section label
{
  font-weight: 500;
  font-size: 1.125rem;
}

.form-section label span.ssn-format
{
  font-weight: 500;
  font-size: 0.75rem;
  color: rgba(0,0,0,0.75);
}

.form-section input.inputdefinition
{
  display: block;
  width: 100% !important;
  margin-top: 0.875rem;
  padding: 0.875rem 0.625rem;
  background: #fcfcfc;
  border: 1px solid #e1e1e1;
  /* margin-bottom: 20px; */
  -webkit-appearance: none;
  outline: none;

  font-size: 1.125rem;
  color: #777;

  border-radius: 2px;
  box-sizing: border-box;


  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  
  /* Overrides **/
  height: auto;
}

.form-section input.inputdefinition {
  text-align: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  /*border: 1px solid #92af82;*/
  -webkit-text-fill-color: #444;
  -webkit-box-shadow: 0 0 0px 1000px #F3F6F1 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.form-section input.inputdefinition:focus{ 
  outline: none !important;
	border-color: #92af82;
}


@media only screen and (max-width: 480px){

  .page-section.error-section, .page-section.info-section { padding: 3% 5%; }
  
  .error-section p { margin-top: 0rem; }

  .info-section p { margin-top: 0.25rem; }
  
  .form-section .col {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
  }

  .form-section label { font-size: 1rem; }
  
  .form-section label span { font-size: 0.75rem; }
  
  .form-section input.inputdefinition {
    /*margin-top: 0.4375rem;*/
    padding: 0.75rem 0.5rem;  
    font-size: 1.125rem;
  }
      
}

/*** Confirm page ***/
a.bankid_btn {
  padding: 0.75rem 1.5rem 0.625rem;
  margin: 1rem 0px 1rem;
}

@media only screen and (max-width: 400px){

  a.bankid_btn {
    display: block;
    padding: 0.875rem 1rem 0.75rem;
    margin: 1.25rem 0px 1.25rem;
  }
  
  a.bankid_btn + a.bankid_btn { margin-left: 0rem; margin-top: 0.25rem;}
}

/*** BankID and Complete ***/
div.small-content
{ 
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div.small-content.login-wrapper { margin-top: 15%; }

div.btn-wrapper.top-margin
{
  margin-top: 1rem;
}

div.bankid-wrapper .btn-wrapper a { margin-bottom: 0px; }
div.btn-wrapper p
{
  font-size: 0.875rem;
  font-size: 1.125rem;
  margin-top: 0px;
  margin-bottom: 0px;
  opacity: 0.5;
}
div.btn-wrapper a.text-btn { margin-top: 0.875rem; }

a.text-btn
{
  display: inline-block;
  font-size: 0.975rem;
  color: #5B872C;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
  text-decoration: none;
}

a.text-btn:hover { color: #789963 }

/* div.complete-wrapper .btn-wrapper a { margin-top: 3rem; } */

@media only screen and (max-width: 1024px){
  div.small-content.login-wrapper { margin-top: 10%; }
  /*
  div.small-content.complete-wrapper { margin-top: 10%; }
  div.complete-wrapper .btn-wrapper a { margin-top: 2rem; }
  */
}

@media only screen and (max-width: 720px){
  /*div.small-content.complete-wrapper { margin-top: 12%; }*/
  div.small-content.login-wrapper { margin-top: 12%; }
}

@media only screen and (max-width: 480px){
  a.text-btn { font-size: 1rem; }
}