@font-face {
    font-family: 'gilroy-regular';
    src: url('/Content/fonts/gilroy_regular_macroman/gilroy-regular-webfont.woff2') format('woff2'),
         url('/Content/fonts/gilroy_regular_macroman/gilroy-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroy-regularitalic';
    src: url('/Content/fonts/gilroy_italic_macroman/gilroy-regularitalic-webfont.woff2') format('woff2'),
         url('/Content/fonts/gilroy_italic_macroman/gilroy-regularitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'gilroy-semibold';
    src: url('/Content/fonts/gilroy_semibold_macroman/gilroy-semibold-webfont.woff2') format('woff2'),
         url('/Content/fonts/gilroy_semibold_macroman/gilroy-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'gilroy-bold';
    src: url('/Content/fonts/gilroy_bold_macroman/gilroy-bold-webfont.woff2') format('woff2'),
         url('/Content/fonts/gilroy_bold_macroman/gilroy-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}



body {
	font-family: 'gilroy-regular', sans-serif;
	background:#F4F7FA;
	color:#4E555F;
	font-size:14px;
	font-weight:300;
}

button {border:none; cursor:pointer; box-sizing:border-box;}

body.login:before {content:''; position:absolute; top:0; left:0; right:0; width:100%; height:42vh; z-index:0; background:url(../images/bg-wfsf-infinity-w.png) no-repeat center center #002957;   background-size: cover;}

img.object-cover {object-fit:cover; max-width:none; min-width:100%; min-height:100%;}
img.center-center {object-position:center center;}


.wsfs-green {color:#046A38;}
.wsfs-light-green {color:#23D07A;}
.wsfs-blue {color:#002957;}
.wsfs-orange-alert {color:#FFBC33;}

.wsfs-near-black {color:#231F20;}
.wsfs-gray {color:#4E555F;}
.wsfs-cool-gray {color:#88898D;}
.wsfs-near-white {color:#F4F7FA;}

.bg-wsfs-green {background:#046A38;}
.bg-wsfs-light-green {background:#23D07A;}
.bg-wsfs-blue {background:#002957;}
.bg-wsfs-orange-alert {background:#FFBC33;}

.bg-wsfs-near-black {background:#231F20;}
.bg-wsfs-gray {background:#4E555F;}
.bg-wsfs-cool-gray {background:#88898D;}
.bg-wsfs-near-white {background:#F4F7FA;}

.b--wsfs-cool-gray {border-color:#88898D;}

.btn {display:inline-block; font-family: 'gilroy-bold', sans-serif; -webkit-border-radius:25px; border-radius:25px; text-decoration:none;}
.btn.btn-lg {font-size:18px; padding:0.75rem 1.5rem;}
.btn.btn-md {font-size:16px; padding:0.65rem 1.25rem;}
.primary-btn {background:#23D07A; color:#231F20;}
.secondary-btn {border:solid 2px #88898D; color:#231F20; background:transparent;}

h1, h2, h3, h4, h5, h6, p {width:100%;}


/* START LOGIN */

body.login {display:flex; flex-wrap:wrap; align-items: center; justify-content: center;}
body.login .login-wrap {position:relative; z-index:1;}
.login-wrap .intro-ctas button {width:100%; margin-bottom:1.5rem; text-align:center;}

.login-content-wrap {min-height:300px; transition:height 0.2s;}

.login-card-stage {
    position: relative;
    min-height: 460px; /* adjust to fit your tallest step */
}

#login-step-1,
#login-step-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

/* Step 1 starts visible */
#login-step-1 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 2;
}

/* Step 1 exits up + fades */
#login-step-1.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-24px);
}

/* Step 2 starts hidden, slightly lower */
#login-step-2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    z-index: 1;
}

/* Step 2 enters up + fades in */
#login-step-2.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 3;
}

.status-stage {color:#999; position:relative;}
.status-stage:not(:first-of-type):before {content:''; height:2rem; width:3px; background:#999; position:absolute; top:0; left:18px;}
.status-stage .material-icons {background:#999;}

.status-stage.complete {color:#002957; position:relative; font-weight:600;}
.status-stage.complete:not(:first-of-type):before {background:#23D07A;}
.status-stage.complete .material-icons {background:#23D07A; color:#002957;}



.status-card-stage {
    position: relative;
    min-height: 260px; /* adjust as needed */
}

.check-status.status-step1,
.check-status.status-step2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

/* step 1 starts visible */
.check-status.status-step1 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 2;
}

/* step 1 exits */
.check-status.status-step1.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-24px);
}

/* step 2 starts hidden */
.check-status.status-step2 {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(24px);
    z-index: 1;
}

/* step 2 enters */
.check-status.status-step2.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 3;
}



/* END LOGIN */



/* START APPLICATION */




/* END APPLICATION */


/* START GLOBAL LAYOUT */

.icon-sm {font-size:18px;}
.icon-xsm {font-size:14px;}

footer {font-size:16px;}
footer a {text-decoration:none;}
footer .about-links a {margin-left:1rem;}

.tabs .tabs__nav {display:flex; width:100%; gap:12px; font-size:16px; }
.tabs .tabs__nav .tabs__btn {display:inline-block; padding:0.3rem .9rem; color:#231F20; border:solid 1px #ccc; -webkit-border-radius:25px; border-radius:25px; background:transparent;}
.tabs .tabs__nav .tabs__btn.is-active {border:none; color:#fff; background:#002957;}

.tabs__panels {
    position: relative;
    min-height: 420px;
}

.tabs__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px);

    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* panel entering */
.tabs__panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* panel exiting */
.tabs__panel.is-leaving {
    opacity: 0;
    transform: translateY(-16px);
}

.label-input-wrap {display:flex; flex-wrap:wrap; width:100%;}
.label-input-wrap label {margin-bottom:.25rem;}
.label-input-wrap input[type=text], .label-input-wrap input[type=number], .label-input-wrap input[type=password], .label-input-wrap input[type=email], .label-input-wrap input[type=tel], .label-input-wrap input[type=date], .label-input-wrap select {width:100%; padding:.75rem; background:#F4F7FA; border:solid 1px #ccc; -webkit-border-radius:4px; border-radius:4px;}



.pw-wrap {position:relative;}
.pw-wrap .pw-toggle {position:absolute; top:50%; right:0.5rem; transform:translateY(-50%); font-size:18px;}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
input[type=checkbox] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
input[type=checkbox] + label:before {
  content: "";
  margin-right: 8px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: #fff;
  border:solid 1px #CCC; 
  -webkit-border-radius:4px;
  border-radius:4px;
	margin-top:-2px;
	margin-bottom:3px;
}
input[type=checkbox]:hover + label:before {
  background: #CCC;
}
input[type=checkbox]:focus + label:before {
  background: #CCC;
}
input[type=checkbox]:checked + label:before {
  background: #0E1528;
}
input[type=checkbox]:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
input[type=checkbox]:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
input[type=checkbox]:checked + label:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0px;
  width: 4px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inner-side-nav {display:flex; padding:1rem; flex-wrap:wrap; align-items:flex-start;}
.inner-side-nav, .inner-side-nav li {list-style-type:none; width:100%;}
.inner-side-nav li {margin-bottom:0.5rem;}
.inner-side-nav a {width:100%; padding:0.75rem 1rem; color:#231F20; display:flex; align-items:center; text-decoration:none; font-weight:bold; border-radius:0.5rem;}
.inner-side-nav a .material-icons {font-size:18px;}
.inner-side-nav li.complete a {color:#23D07A; position:relative;}
.inner-side-nav li.complete a:after {content:'\e86c'; font-family: 'Material Icons'; position:absolute; top:50%; right:1rem; transform:translateY(-50%); font-size:18px;}
.inner-side-nav li.incomplete a {position:relative;}
.inner-side-nav li.incomplete a:after {content:'\e836'; font-family: 'Material Icons'; position:absolute; top:50%; right:1rem; transform:translateY(-50%); font-size:18px; color:#88898D;}
.inner-side-nav li.active a {background:#F4F7FA;}
.inner-side-nav li.active a .material-icons {color:#23D07A;}
.inner-side-nav li.active a .nav-label {color:#002957;}

.progress-bar {width:100%; display:flex; margin:1rem 0; height:8px; border-radius:8px; background:#F4F7FA; position:relative;}
.progress-bar .progress {height:8px; position:absolute; top:0; left:0; border-radius:8px; background:#23D07A;}

ol.list-items {padding-left:16px;}
ol.list-items li {line-height:1.3;}


/* END GLOBAL LAYOUT */

.mv-n2, .form-fields {width:calc(100% + 1rem); min-width:calc(100% + 1rem); margin-left:-0.5rem;}
.mv-n3 {width:calc(100% + 2rem); min-width:calc(100% + 2rem); margin-left:-1rem;}

.mw74rem {max-width:74rem;}

@media only screen and (min-width:769px) {
    


}



@media only screen and (max-width:769px) {
    
.login-wrap h1 {font-size:1.4rem;}
footer {font-size:16px;}
footer .about-links a {margin-left:0rem; width:100%; text-align:center; margin-top:1rem; font-size:18px;}

.tabs .tabs__nav {font-size:14px; gap:8px}
.tabs .tabs__nav .tabs__btn {padding:0.25rem .75rem;}

}