/** Shopify CDN: Minification failed

Line 8:0 Unexpected "{"
Line 8:1 Expected identifier but found "%"
Line 473:61 Expected "}" to go with "{"

**/
{% block customCSS %}
      @font-face {
  font-family: Figtree;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("//directhearing.com/cdn/fonts/figtree/figtree_n4.3c0838aba1701047e60be6a99a1b0a40ce9b8419.woff2") format("woff2"),
       url("//directhearing.com/cdn/fonts/figtree/figtree_n4.c0575d1db21fc3821f17fd6617d3dee552312137.woff") format("woff");
}

      @font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("//directhearing.com/cdn/fonts/figtree/figtree_n7.2fd9bfe01586148e644724096c9d75e8c7a90e55.woff2") format("woff2"),
       url("//directhearing.com/cdn/fonts/figtree/figtree_n7.ea05de92d862f9594794ab281c4c3a67501ef5fc.woff") format("woff");
}

      @font-face {
  font-family: Figtree;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("//directhearing.com/cdn/fonts/figtree/figtree_i4.89f7a4275c064845c304a4cf8a4a586060656db2.woff2") format("woff2"),
       url("//directhearing.com/cdn/fonts/figtree/figtree_i4.6f955aaaafc55a22ffc1f32ecf3756859a5ad3e2.woff") format("woff");
}

      @font-face {
  font-family: Figtree;
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("//directhearing.com/cdn/fonts/figtree/figtree_i7.06add7096a6f2ab742e09ec7e498115904eda1fe.woff2") format("woff2"),
       url("//directhearing.com/cdn/fonts/figtree/figtree_i7.ee584b5fcaccdbb5518c0228158941f8df81b101.woff") format("woff");
}

      @font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("//directhearing.com/cdn/fonts/bricolage_grotesque/bricolagegrotesque_n8.6b4643248f6cafd49733d179ce363f756812293c.woff2") format("woff2"),
       url("//directhearing.com/cdn/fonts/bricolage_grotesque/bricolagegrotesque_n8.6870e61ca4ac6456cdb292e6bd2fa689ac537968.woff") format("woff");
}

   

      
      
:root {
    --small-header-color: #48818d;
    --foreground: #fff;
    --accent: #f8c79d;
    --background: #fff;
    --background-dark: #091e31;
    --background-mid: #f9f6ed;
    --background-grey: #ccc;
    --background-blue: #edf6fc;
    --color-action: #ff7015;
    --color-complete: #090;
    --grid-box: #ffffff;
    --muted-border-color: #ddd;
    --serial-box: #ebf6f8;
    --grey-text: #888;
    --color-on-hold: #B7791F;
    --color-on-hold-halo: #B7791F80;    
    --color-error: #D9463B;
    --color-error-halo: #D9463B80;
    --background-color-action-required: #FFF3F1;
    --border-color-action-required: #F3B9B1;
    --button-color-action-required: #D9463B;
    --color-action-required: #7A1F18;
    --color-action-required-halo: #7A1F1880;
    --color-current: #EE7A36;
    --color-current-halo: #EE7A3680;
    

}
@font-face {
    font-family: "Figtree";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url(https://directhearing.com/cdn/fonts/bricolage_grotesque/bricolagegrotesque_n8.6b46432….woff2) format("woff2"), url(//directhearing.com/cdn/fonts/bricolage_grotesque/bricolagegrotesque_n8.6870e61….woff) format("woff");
}
main {background: var(--background-blue);}
.portal-heading h3 {font-family:"Bricolage Grotesque" !important;}
.shop-page-area {
    background-color:var(--background-blue);
}

.smallheading {
    color: var(--small-header-color);
    font-weight:bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding-bottom:1rem;
}
.textColor {
    color: var(--foreground);
}
.accent {
    color: var(--accent);
    font-style: italic;
    
}
.box {
    border-radius: 16px;
    padding:24px;font-size:16px;
}
.box.inner {
    border:1px solid #E1E6E9;
}
.accented {
    background: var(--background-mid);
    border: 1px solid #EFE0CA;
    margin-top: 1rem;
}
.white {
    background-color: #fff;
}
h1,h2,h3,h4 {
    font-family: "Figtree" !important;font-weight:600;
}

.button-right {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: 32px;
    button {
        height: max-content;
    }
}

.scheduler {
    display:flex;
    flex-direction: column;
    gap:16px;
    border-radius: 16px;
    background-color: var(--background-dark);
    color: var(--foreground);
    border-top: 4px solid var(--color-action);
    h1,h2,h3,h4 {
        color: var(--foreground);
    }
    .smallheading {font-size: 13px;color:#5fa9b9;}
    .description {
        max-width:650px;
        color: #C8D4DE;
        font-size: 15.5px;
        b {
            color: #fff;
        }
    }
    .next-appointment-slot {
        font-size: 14.5px;
        margin-top: 16px;
        color: #8FA3B3;
        b {
            color: #fff;
        }
    }

    .button-right {
        grid-template-columns:1fr 500px;
        gap:32px;
    }

    button {
        pointer-events: none;
        opacity:0.5;
    }
    
}
.scheduler.delivered {    
    button {
        opacity: 1;
        pointer-events:auto;
    }
}
.shipped a, .shipped span span {font-weight:600;color: #48818d;}

.buttons {
    gap:16px;
}
button {max-width: 300px;display: inline-block;}
.inner {
    background-color: var(--grid-box);
}
button {
    color: var(--foreground);
        padding: 1rem 2rem;
    border-radius:5px;
    font-weight: bold;
    
}
button#schedule {
    background: var(--color-action);
}
button#followup {
    background: var(--background-dark);
    border: 1px solid var(--small-header-color);
}
.portal-wrapper {
    display:flex;
    flex-direction: column;
    gap:24px;
}
a.tel {
    color:var(--color-action);
    text-decoration: none;margin-top:16px;font-weight:600;font-family:"Bricolage Grotesque";letter-spacing:0.05em;
    font-size:24px;display:block;
}
.grid2,.grid3,.grid4,.grid5,.grid6 {
    display: grid!important;
    gap: 16px;
}
.grid2  {
    grid-template-columns: 1fr 1fr;
}
.grid3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.grid5 {
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}
.grid6 {
    grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
}
.grid3.buttons {
    width:100%;margin-top:1.5rem;
 
}
.grid3.buttons .box {font-weight:600;padding:1rem;border:1px solid #E1E6E9;align-items:center;}
.grid3.buttons .box span {font-size:14px !important;}
.grid3.buttons .box .icon {margin:5px;}

.with-icon .icon, .product-image {
    border-radius: 25%;
    background-color: #F3F7F8;
    padding: 10px;
    font-size: 16px !important;
    border: 1px solid #E1E6E9;
}

button.accented {
    border-radius: 16px;
    color: #000;
    
}

a.with-icon .icon {
    height: 40px;
    width: 40px;
}

.product-image {
    max-width: 128px;display:none;
    image {
        width:100%;
        height:auto;
    }
}
.lineItemWithImage {
    display: flex;
    gap: 32px;
}

a.with-icon {
    padding: 20px;
}

button.with-icon {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 16px;
    color: var(--small-header-color);
}


button#klaviyo-contact {border:1px solid var(--small-header-color);}
button#klaviyo-contact.with-icon {display:block;padding:8px 24px;}
button#klaviyo-contact.with-icon .icon {background:transparent;border:none;padding:0;}

.header-with-subheader {
    display: flex;
    gap:24px;
    align-items: center;
}

.serial-number {
    background-color: var(--serial-box);border:1px solid #E1E6E9;padding:1rem !important
}
.serial-number-display {font-weight:600;}
ul.address {
    list-style: none;
    margin: 32px 0;
    padding: 0;
}

ul.orderDetails {
    li:first-child {
        list-style-type: none;
    }
    display: flex;
    flex-direction: row;
    gap:32px;
    margin:8px auto;
    color: var(--grey-text);
    font-family: "Courier New", Courier, monospace;
    font-size: 15px;font-weight:600;
    line-height:2;
    letter-spacing: 0.025em;
    padding-bottom:1rem;
}

.button {border-radius:25px;}
.smallheading {color:#48818d;letter-spacing: 0.1em;padding-bottom:1rem;}
 
.box {div.box {padding:24px;}
.box.inner {border:1px solid #E1E6E9;}
.timeline-holder {
    position: relative;
    height:128px;
    margin-bottom:2rem;
}
.timeline-track {
    position: absolute;
    display: block;
    z-index: 5000;
    top: 40px;
    left: 72px;
    height: 4px;
    width: calc(100% - 150px);
    background: #ddd;
}
.timeline-track-inner {
    background-color: var(--color-complete);
    display: block;
    height: 4px;
    width: 0;
}
.timeline {
    position: absolute;
    z-index: 5001;
    .milestone {
        text-align: center;
        opacity: 0.5;
        .miledate {font-size:13px;}
        .bubble {
            box-shadow:0 0 0 6px #0000;
            color: var(--grey-text);
            border: 3px solid var(--background-grey);
            background-color: #ffffff;
            border-radius:100%;
            text-align: center;
            font-weight: 900;
            width: 48px;
            height: 48px;
            display: flex;  
            justify-content: center;
            align-items: center;
            margin: 16px auto;
            .cb {
                display: none;
            }
        }
        .miletext {
            font-size:13.5px;
            color: #8B95A0;
        }
        
    }
    .milestone:not(.current), .milestone:not(.complete) {opacity:1;}
    .milestone.current, .milestone.complete,.milestone.error, .milestone.on-hold {
            .bubble {
                color: #fff;
                border: none;
            }
            opacity: 1;
            
        }
       
    .milestone.current .bubble {
        background-color: var(--color-current);
        box-shadow:0 0 0 6px var(--color-current-halo);
    }
    .milestone.current .miletext {
        color: var(--color-action);
       
    }


    .milestone.complete .bubble {
        .cb {
            display: block;
        }
        .step {
            display: none;
        }
    }
    .milestone.complete .bubble {
        background-color: var(--color-complete);
    }

    .milestone.on_hold .bubble {
        background-color: var(--color-on-hold);
        box-shadow:0 0 0 6px var(--color-on-hold-halo);
        
    }

    .milestone.error .bubble {
        background-color: var(--color-error);
        box-shadow:0 0 0 6px var(--color-error-halo)
    }
    
    .milestone.error .miletext, .milestone.on_hold .miletext, .milestone.complete .miletext,.milestone.current .miletext {
        color: var(--color-dark);
        font-weight: 600;
    }
    .milestone.current .miletext {
        color: var(--color-current);
    }
    .milestone.current.on_hold .miletext {
        color: var(--color-dark);
    }


}
.vertical-stack {
    display: flex;
    flex-direction: column;
    gap:8px;
}
.vertical-stack.sixteen {
    gap: 16px;
}

.accented.right-now {
    background-color:#F0F6F8;   
}
.accented.right-now.delivered {
    background-color: #EFF7F1;
}

.accented.action-required {
    .smallheading {
        color: var(--color-error);
    }
    background-color: var(--background-color-action-required);
    color: var(--color-action-required);
    h4 {
        color: var(--color-action-required);
    }
    button {
        background-color: var(--button-color-action-required);
        color: #fff;
    }
}



.box.inner a.box span, .grid3.buttons .box span {color:#333;}