:root {
    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
    --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
    --step-0: clamp(1rem, calc(1.02rem + 0.22vw), 1rem);
    --step-1: clamp(1.15rem, calc(1.05rem + 0.37vw), 1.20rem);
    --step-2: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
    --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
    --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
    --step-5: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
}

@font-face {
    font-family: "EYInterstateBold";
    src: local("EYInterstateBold"),
    /* url("./assets/fonts/EYInterstate/EYInterstate-Bold.ttf") format("truetype"); */
    url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-Bold.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateBoldItalic";
    src: local("EYInterstateBoldItalic"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-BoldItalic.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "EYInterstateItalic";
    src: local("EYInterstateItalic"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-Italic.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-Italic.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateLight";
    src: local("EYInterstateLight"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-Light.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-Light.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateLightBold";
    src: local("EYInterstateLightBold"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-LightBold.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-LightBold.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateLightBoldItalic";
    src: local("EYInterstateLightBoldItalic"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-LightBoldItalic.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-LightBoldItalic.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateLightItalic";
    src: local("EYInterstateLightItalic"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-LightItalic.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-LightItalic.ttf") format("truetype");
}
  
@font-face {
    font-family: "EYInterstateRegular";
    src: local("EYInterstateRegular"),
        /* url("./assets/fonts/EYInterstate/EYInterstate-Regular.ttf") format("truetype"); */
        url("https://cdn.ey.com/pwreset/assets/fonts/EYInterstate/EYInterstate-Regular.ttf") format("truetype");
}


body {
    font-family: -apple-system, BlinkMacSystemFont, "EYInterstateBold", "EYInterstateBoldItalic", "EYInterstateItalic", "EYInterstateLight"
        "EYInterstateLightBold", "EYInterstateLightBoldItalic", "EYInterstateLightItalic", "EYInterstateRegular";
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

body {
    background: #F6F6FA !important;
    font-family: 'EYInterstateRegular',sans-serif;
}

.app-container {
    /* font-family: EYInterstateRegular !important; */
    margin: 1rem;
}

.app-logo, .app-title {
    padding: 0;
}

.app-logo-icon {
    width: 7.5rem;
    margin-right: 15px;
}

.app-title-text {
    padding-top: 20px;
    margin: 0;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 2px solid #e5e5e5;
    margin-left: 15px;
}
.app-subtitle-text{
	font-size: var(--step-1);
	margin-bottom: 1.5rem;
}
.points {
    font-size: var(--step-0);
    
}
  
.note {
    font-size: 0.8rem;
    color: red;
    margin-top: 5px;
}
  
.note-info {
    color: #f26a6a;
}
  
.info-text {
    font-weight: 300;
    text-align: left;
    font-size: var(--step-0);
    
}

.connectunnel-image {
    width: 3rem;
    margin-left: 4.5rem;
}

.connectunnel-image-text-container {
    margin-bottom: 15px;
}

.logo-header {
    margin: 2rem 0rem;
}

.need-help-text1 {
    font-size: var(--step-0);
    margin-bottom: 15px;
}

.need-help-text2 {
    padding-left: 20px;
    padding-bottom: 20px;
    color: #838080;
    font-size: var(--step-0);
}

a:link, a:visited, a:active {
		color:#838080;
	}

a:hover{
		color:#4d4c4c;
	}


.anchor-link {
    padding-left: 25px;
    padding-bottom: 25px;
    color: #838080;
    font-size: var(--step--1);
    margin-left: 15px;
}

.padding-0 {
    padding: 0;
}

.margin-0 {
    margin: 0;
}

.points-divider {
    padding-bottom: 0rem;
}

.bold-text {
    font-weight: 700;
    color: #4d4c4c;
}

.hyper-link {
    font-weight: 700;
}

.first-sentance {
    font-size: var(--step-0);
}

.video-player {
    width: 100% !important;
}


.scrollable-container {
    height: 100%;
    overflow: auto;
    position: relative;
}

.scroll-indicator {

}

#scroll-indicator {
    width: 100%;
    background-color: #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    visibility: visible;
    text-align: center;
}

#indicator {
    height: 100%;
}

.demo-video-block {
    padding: 1rem 1rem 1rem 1rem;
    margin: 1rem 1rem 1rem 1rem;
    /* border-top: 1px solid #e5e5e5; */
}

@media screen and (min-width: 280px) and (max-width: 820px) {
    .app-logo-icon {
        width: 3rem;
    }
    .app-title-text {
        font-size: var(--step-1);
        margin: 0;
        padding-top: 12px;
        border-bottom: 2px solid #e5e5e5;
        display: inline-block;
        padding-bottom: 10px;
        margin-left: 10px;
    }
    .logo-header {
        margin: 2rem 0rem;
    }
    .demo-video-block {
        padding: 1rem 0rem 2rem 0rem;
        margin: 2rem 0.5rem 1rem 4rem;
        border-top: 1px solid #e5e5e5;
    }
    .video-player {
        width: 100% !important;
    }
    .need-help-text1 {
        font-size: var(--step-0);
    }
    
    .need-help-text2 {
        padding-left: 25px;
        padding-top: 5px;
        padding-bottom: 20px;
        color: #838080;
        font-size: var(--step-0);
        text-align: left;
    }
}

@media screen and (min-width: 576px) and (max-width: 820px) {
    .app-logo-icon {
        width: 4rem;
    }
}