*
{
    -webkit-tap-highlight-color: transparent;
}

input:focus,
select:focus,
textarea:focus,
button:focus
{
    outline: none;
}

body
{
    padding: 0;
    margin: 0;
    font-family: ui-rounded, -apple-system, Helvetica, Arial, sans-serif;
    background: #FFF;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: env(safe-area-inset-bottom);
    background: #f9f9f9;
}

h3
{
    text-align: left;
    font-size: 17px;
    font-weight: bold;
    color: #000;
    margin-top: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

h4
{
    text-transform: uppercase;
    color: #999;
    display: block;
    font-size: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
}

p
{
    font-size: 15px;
    line-height: 21px;
    margin-top: 16px;
    margin-bottom: 16px;
}

a
{
    color: #F58021;
    text-decoration: none;
    cursor: pointer;
}

.with-shadow
{
    box-shadow: 0px 0px 5px #ddd;
}

.standard-button
{
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    background: #F58021;
    font-size: 17px;
    line-height: 17px;
    color: #FFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    display: block;
}

    .standard-button:disabled
    {
        color: #999;
        background: #ddd;
    }

.loading-indicator
{
    padding: 16px;
    color: #bbb;
    text-align: center;
}


.nav-wrapper
{
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 0;
    background: #FFF;
    z-index: 1;
}

    .nav-wrapper .nav
    {
        padding: 16px;
        margin: 0px auto;
        max-width: 600px;
        position: relative;
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }
        .nav-wrapper language-switcher {
            margin-left: auto;
            margin-right: 10px;
        }

        html[dir="rtl"] .nav-wrapper language-switcher {
            margin-left: 10px;
            margin-right: auto;
        }

        .nav-wrapper .nav .logo
        {
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
            color: #429bdf;
            display: inline-block;
            width: 50%;
            max-width: 280px;
            max-height: 100%;
        }

            .nav-wrapper .nav .logo img
            {
                width: auto;
                max-height: 48px;
            }

    .nav-wrapper .nav-open
    {
        display: none;
    }

    .nav-wrapper .nav-options a
    {
        display: inline-block;
        padding-left: 32px;
        line-height: 48px;
        color: #4154af;
        font-size: 14px;
        font-weight: bold;
        color: #484D57;
    }

    .nav-wrapper .change-language {
        margin-top: 14px;
        margin-left: auto;
    }


@media only screen and (max-width: 600px)
{
        .nav-wrapper .nav  {
            padding: 10px;
        }

        .nav-wrapper .nav .logo
        {
            font-size: 17px;
        }

    .nav-wrapper .nav-open
    {
        border: solid 1px #4154af;
        font-size: 17px;
        line-height: 32px;
        cursor: pointer;
        color: #4154af;
        display: block;
        border-radius: 5px;
        padding: 8px;
        height: 18px;
    }
    
    .nav-wrapper .nav-options
    {
        position: absolute;
        display: none;
        left: 0;
        padding: 16px;
        right: 0;
        top: 100%;
        background: #FFF;
        padding: 0;
        box-shadow: 0px 3px 5px #ddd;
    }

    .nav-wrapper .language-switcher {
        margin-left: 15px;
    }

        .nav-wrapper .nav-options a
        {
            display: block;
            border-bottom: solid 1px #eee;
            padding-left: 16px;
            padding-right: 16px;
            padding-top: 16px;
            padding-bottom: 16px;
            line-height: 1em;
        }

        .nav-wrapper .nav-options.expanded
        {
            display: block;
        }
}


.dashboard-section
{
    border-radius: 10px;
    background: #FFF;
    overflow: hidden;
    position: relative;
    display: block;
    color: #000;
    box-shadow: 0px 0px 3px #aaa;
}


    .dashboard-section.survey
    {
        padding: 16px;
        cursor: pointer;
        margin-bottom: 16px;
    }

        .dashboard-section.survey .survey-title
        {
            font-size: 17px;
            font-weight: bold;
        }

        .dashboard-section.survey .survey-description
        {
            font-size: 15px;
            color: #555;
        }

        .dashboard-section.survey .fa-circle-o
        {
            position: absolute;
            left: 16px;
            font-size: 32px;
            color: #555;
            top: calc(50% - 16px);
        }


    .dashboard-section.join-study
    {
        padding: 16px;
        padding-right: 32px;
        color: #484D57;
        background: #fdf9eb;
        border: none;
    }

        .dashboard-section.join-study .fa-chevron-right
        {
            position: absolute;
            right: 16px;
            font-size: 15px;
            top: calc(50% - 8px);
            color: #c7c7cc;
        }



    .dashboard-section.register-account
    {
        padding: 16px;
        border: none;
    }

        .dashboard-section.register-account .fa-chevron-right
        {
            position: absolute;
            right: 16px;
            font-size: 15px;
            top: calc(50% - 8px);
            color: #c7c7cc;
        }

        .dashboard-section.register-account img
        {
            width: 48px;
            position: absolute;
            right: 0;
            top: calc(50% - 24px);
        }


    .dashboard-section.public-health
    {
        padding: 16px;
        padding-left: 48px;
        cursor: pointer;
        font-size: 17px;
        padding-right: 32px;
    }

        .dashboard-section.public-health p
        {
            margin: 0;
            font-size: 15px;
        }

        .dashboard-section.public-health h2
        {
            margin: 0;
            font-size: 17px !important;
            line-height: 21px;
        }

        .dashboard-section.public-health .fa-chevron-right
        {
            position: absolute;
            right: 16px;
            color: #c7c7cc;
            font-size: 15px;
            top: calc(50% - 8px);
        }

        .dashboard-section.public-health .fa-hospital-o
        {
            position: absolute;
            left: 17px;
            top: 19px;
            color: #3878BC;
        }


    .dashboard-section.app-download
    {
        padding: 16px;
        font-size: 17px;
        background: #FFF;
    }

        .dashboard-section.app-download p
        {
            font-size: 15px;
        }

        .dashboard-section.app-download h2
        {
            margin: 0;
            font-size: 17px;
        }

        .dashboard-section.app-download img
        {
            height: 44px;
        }

.home .home-body .dashboard-section.phone-section
{
    padding: 16px;
    margin-top: 16px;
}

    .home .home-body .dashboard-section.phone-section .phone-number
    {
        padding: 8px;
        text-align: center;
        border-radius: 20px;
        background: #FFF;
        width: 100%;
        font-weight: bold;
        font-size: 17px;
        font-family: ui-rounded, -apple-system, Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        margin-bottom: 16px;
        margin-top: 16px;
        border: solid 1px #00B5D1;
    }

        .home .home-body .dashboard-section.phone-section .phone-number:focus
        {
            outline: none;
        }

    .home .home-body .dashboard-section.phone-section p
    {
        margin: 0;
    }

    .home .home-body .dashboard-section.phone-section .schedule-select
    {
        width: 100%;
        font-size: 17px;
        padding: 8px;
        margin-bottom: 16px;
    }

.home .home-body .dashboard-section.test-results-section
{
    padding: 16px;
}


    .home .home-body .dashboard-section.test-results-section h2 a
    {
        font-size: 15px;
        position: absolute;
        right: 0;
        bottom: 0;
        font-weight: normal;
    }

.home .home-header a.feature-action
{
    background: #F58021;
    text-align: center;
    padding: 16px;
    font-size: 21px;
    border-radius: 5px;
    color: #FFF;
}

.home .home-header .sub-actions
{
    text-align: center;
    padding-top: 16px;
}

.home .home-header a.sub-action
{
    font-size: 15px;
    display: inline-block;
    padding-right: 32px;
}

.home .home-header .sub-actions a.sub-action
{
    padding-right: 0;
}

.home .home-body .dashboard-section.test-info-section
{
    padding: 16px;
    padding-bottom: 0;
    font-size: 15px;
}

    .home .home-body .dashboard-section.test-info-section a
    {
        text-decoration: underline;
        color: #5d6e81;
        font-weight: bold;
    }

    .home .home-body .dashboard-section.test-info-section h2
    {
        padding-right: 32px;
        cursor: pointer;
        position: relative;
        padding-left: 32px;
        font-size: 17px;
        font-weight: bold;
    }

        .home .home-body .dashboard-section.test-info-section h2 .fa-chevron-up,
        .home .home-body .dashboard-section.test-info-section h2 .fa-chevron-down
        {
            color: #c7c7cc;
            position: absolute;
            right: 0;
            top: 5px;
            font-size: 15px;
        }

        .home .home-body .dashboard-section.test-info-section h2 .fa-info-circle
        {
            position: absolute;
            left: 0;
            top: 4px;
            color: #F58021;
        }

    .home .home-body .dashboard-section.test-info-section ul,
    .home .home-body .dashboard-section.test-info-section ol
    {
        padding-left: 32px;
    }

        .home .home-body .dashboard-section.test-info-section ul li,
        .home .home-body .dashboard-section.test-info-section ol li
        {
            line-height: 21px;
            margin-bottom: 16px;
        }

    .home .home-body .dashboard-section.test-info-section ol
    {
        list-style: none;
        counter-reset: my-awesome-counter;
    }

        .home .home-body .dashboard-section.test-info-section ol li
        {
            counter-increment: my-awesome-counter;
            position: relative;
        }

            .home .home-body .dashboard-section.test-info-section ol li::before
            {
                content: counter(my-awesome-counter);
                color: #F58021;
                font-weight: bold;
                position: absolute;
                right: 100%;
                top: 5px;
                text-align: right;
                padding-right: 8px;
                font-size: 30px;
            }


.home .home-body .dashboard-section.incentive-start
{
    background: #00B5D1;
    color: #FFF;
    padding: 16px;
    position: relative;
    cursor: pointer;
    padding-right: 48px;
}

    .home .home-body .dashboard-section.incentive-start .overlay
    {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 240, 0.2) 100%);
    }

    .home .home-body .dashboard-section.incentive-start .fa-dollar
    {
        color: #FFF;
        position: absolute;
        right: 16px;
        top: calc(50% - 24px);
        font-size: 48px;
        text-shadow: 0px 2px 6px rgba(0,0,0,.5);
        color: #00c7e6;
    }


.home .home-body .dashboard-section.incentive-progress
{
    padding: 16px;
}

    .home .home-body .dashboard-section.incentive-progress .reward-section
    {
        position: relative;
        padding-bottom: 8px;
        border-bottom: dashed 1px #ddd;
    }

        .home .home-body .dashboard-section.incentive-progress .reward-section .reward-section-header
        {
            padding-top: 16px;
            font-size: 12px;
            color: #555;
            text-transform: uppercase;
        }

    .home .home-body .dashboard-section.incentive-progress .reward-progress
    {
        position: absolute;
        left: 0;
        top: 0;
        width: calc(100% - 96px);
        height: 100%;
        pointer-events: none;
    }

        .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-line
        {
            background: #bbb;
            height: 4px;
            width: 100%;
            top: calc(50% - 2px);
            left: 0;
            position: absolute;
        }

        .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-line-fill
        {
            background: #00907a;
            height: 4px;
            width: 100%;
            top: calc(50% - 2px);
            left: 0;
            position: absolute;
        }

        .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-bubble
        {
            position: absolute;
            left: 0;
            border-radius: 20px;
            height: 38px;
            width: 38px;
            background: #FFF;
            border: solid 1px #aaa;
            text-align: center;
            line-height: 38px;
            font-size: 24px;
            top: calc(50% - 20px);
            font-weight: normal;
            color: #bbb;
        }

            .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-bubble:nth-child(2)
            {
                left: calc(33% - 15px);
            }

            .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-bubble:nth-child(3)
            {
                left: auto;
                right: calc(33% - 15px);
            }

            .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-bubble:nth-child(4)
            {
                left: auto;
                right: 0;
            }

        .home .home-body .dashboard-section.incentive-progress .reward-progress.exit-survey-progress .progress-bubble
        {
            left: auto;
            right: 0;
        }

            .home .home-body .dashboard-section.incentive-progress .reward-progress.exit-survey-progress .progress-bubble .fa
            {
                display: inline;
                line-height: 40px;
            }

        .home .home-body .dashboard-section.incentive-progress .reward-progress .progress-bubble.filled
        {
            background: #00907a;
            color: #FFF;
            border: solid 1px #00907a;
            font-weight: bold;
        }


    .home .home-body .dashboard-section.incentive-progress .reward-section-note
    {
        font-size: 12px;
    }

    .home .home-body .dashboard-section.incentive-progress .reward-dollars
    {
        font-size: 48px;
        font-weight: bold;
        text-align: right;
        color: #bbb;
    }

        .home .home-body .dashboard-section.incentive-progress .reward-dollars.filled
        {
            color: #00907a;
        }

        .home .home-body .dashboard-section.incentive-progress .reward-dollars.closed
        {
            text-decoration: line-through solid red;
        }


    .home .home-body .dashboard-section.incentive-progress .reward-section .total-earned
    {
        font-size: 21px;
        text-align: left;
        color: #555;
        top: 0;
        left: 0;
        position: absolute;
    }

    .home .home-body .dashboard-section.incentive-progress .reward-section .standard-button.exit-survey-button
    {
        background: #00B5D1;
        width: auto;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 8px;
        font-size: 15px;
        line-height: 15px;
        font-weight: normal;
        padding: 12px;
    }

        .home .home-body .dashboard-section.incentive-progress .reward-section .standard-button.exit-survey-button:disabled
        {
            background: #bbbbbb;
            color: #FFF;
            cursor: default;
        }

    .home .home-body .dashboard-section.incentive-progress .reward-footer
    {
        font-size: 15px;
    }

.footer
{
    text-align: center;
    max-width: 600px;
    box-sizing: border-box;
    margin: 0px auto;
    padding: 16px;
    padding-top: 0;
}

    .footer a
    {
        color: #555;
    }

        .footer a:hover
        {
            color: #429bdf;
        }

    .footer .credits
    {
        font-size: 12px;
        padding-top: 16px;
        line-height: 17px;
    }

    .footer .powered-by
    {
        text-align: center;
        text-transform: uppercase;
        font-size: 12px;
        color: #555;
        font-weight: bold;
    }

        .footer .powered-by img
        {
            height: 20px;
            margin-left: 4px;
            margin-right: 4px;
            margin-top: 4px;
        }

    .footer .app-name
    {
        text-align: center;
        display: block;
        line-height: 21px;
        font-size: 17px;
        font-weight: bold;
        color: #555;
    }

        .footer .app-name img
        {
            height: 19px;
            vertical-align: top;
        }

    .footer .company
    {
        font-size: 15px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .footer .privacy-policy
    {
        font-size: 15px;
        padding-top: 15px;
    }
    
    .footer .language-switcher {
      justify-content: center;
    }

.home .home-header .state-option
{
    border: solid 1px #F58021;
    text-align: center;
    padding: 16px;
    font-size: 21px;
    border-radius: 5px;
    color: #F58021;
    margin-bottom: 16px;
    cursor: pointer;
    font-weight: bold;
}

/* Visible currently on the order track page */
.ihealth-expiration {
    background-color: #ff5200;
}
  
  .ihealth-expiration p {
      text-align: center;
      max-width: 1050px;
      margin: 0 auto;
      color: #fff;
      padding: 0 5px 5px 5px;
      font-size: 0.96rem;
    }
    .ihealth-expiration h3 {
        text-align: center;
        max-width: 1050px;
        margin: 0 auto;
        color: #fff;
        padding: 5px 5px 0 5px;
        font-size: 1.1rem;
      }
      .ihealth-expiration a {
        text-decoration: underline;
      }
    /* Hide when we don't have language */
    .ihealth-expiration p:empty {
      padding: 0;
    }
  
  .ihealth-expiration a {
    color: #ffffff !important;
    font-size: 1em;
  }