{% if current_person.signed_in? == false %}
    <script>
        window.location.href = '/learners/sign_in'
    </script>
{% endif %}

{% include "header" %}
<div class="page-container">
  {% if current_person.signed_in? %}
    <div class="np-hidden-mobile custom-sub-navigation">
      {% include "sub_navigation" %}
    </div>
  {% endif %}

  {%- comment -%} {% if current_person.email == 'alexa.taylor+1+preview-3hy5ulxxu@skuid.com' %}
    <div onclick="callNPWebhook()" style="height: 50px; width: 100px;">Call Webhook</div>
  {% endif %} {%- endcomment -%}


  <main class="np-main np-subpage-container np-max-width certification-page">
    {% comment %}================================================ REGISTRATION HEADER  ============================================={% endcomment %}

    {%- comment -%} <div class="register-button">Register Now</div> {%- endcomment -%}

    {% comment %}=================================================== TEXT HEADER ==================================================={% endcomment %}

    {%- comment -%} <div class="np-resource-title skuid-cert-reg-header">Skuid Certification Registration</div> {%- endcomment -%}

    {% comment %}================================================= HEADER BUBBLES ==================================================={% endcomment %}
    {% if current_person.properties.cert_status == 'Default' %}
        <div class="base-state">
            <div class="np-resource-title">Skuid Certification Registration</div>
        </div>
    {% else %}
        <div class="cert-step-bubbles col-xs-12">
            <div class="cert-bubble col-xs-3">GET STARTED</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Registered' %}cert-bubble-active{% endif %}">EXAM PREP</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Exists-qm' %}cert-bubble-active{% endif %}">EXAM PENDING</div>
            <div class="cert-bubble col-xs-3 {% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}cert-bubble-active{% endif %}">
                {% if current_person.properties.cert_status == 'Pass' or current_person.properties.cert_status == 'Fail' %}
                    {{current_person.properties.cert_status}}
                {% else %}
                    COMPLETION STATUS
                {% endif %}
            </div>
        </div>
    {% endif %}

    {% comment %}=========================================== CERTIFICATION REGISTRATION =============================================={% endcomment %}

    {% if current_person.properties.cert_status == 'Default' %}
        <div class="cert-content-container col-xs-12">
            <div class="np-resource-title cert-header" style="color: #000;">Ready to be Skuid Certified?</div>
            <div class="np-resource-subtitle cert-sub-header registration-sub-header">
                <div>The Skuid - Certified Builder Exam assumes knowledge in topics from these learning paths: <a href="https://www.skuidskool.com/app/learning_paths/46ae5253-8c64-426b-a638-e80c08ce29da" class="registration-sub-header-link" target="_blank">Level 1</a>, <a href="https://www.skuidskool.com/app/learning_paths/e7d6e7ca-39ad-4a40-b75c-83d382715c4a" class="registration-sub-header-link" target="_blank">Level 2</a>, <a href="https://www.skuidskool.com/app/learning_paths/e15cd738-8681-4171-9d09-ba3d31c02005" class="registration-sub-header-link" target="_blank">Deploy and Manage Skuid Apps in Salesforce</a>, and <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a>.</div>
                {%- comment -%} <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a> {%- endcomment -%}
                <br>
                <div>Click below to agree to the terms and register for your exam.</div>
            </div>

            <div style="background: rgb(255, 224, 143, 0.46); border-radius: 10px; padding: 20px 0; width: 80%;">
                <div class="np-resource-subtitle cert-sub-header registration-sub-header" style="padding: 0; text-align: center; width: 100%;">
                    <span>
                        **Important: Make sure you register with the same email that you use in Skuid Skool.** 
                    </span>
                    <br>
                    <span style="font-weight: 400;">If you don't, you may not be able to take the exam or get credit for the certification.</span>
                </div>
                <div style="align-items: center; display: flex; flex-direction: row; justify-content: center;" >
                    <input type="checkbox" id="skuid-cert-agreement-input" onclick="agreementValidator()" style="font-weight: 500; margin-right: 10px;"><span style="color: #000000;">I have read and understand the <a href="https://www.skuid.com/legal/skuid-certification-exam-agreement" target="_blank">Skuid Terms and Agreements*</a></span>
                </div>
            </div>

            {%- comment -%} Test Button 1 {%- endcomment -%}
            {%- comment -%} <form id="skuid-cert-registration-button" name="PrePage" method ="post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
            height: 52px;
            margin: 30px 0 25px; 
            pointer-events: none;">
                <input type = "hidden" name = "LinkId" value ="f0b2546a-f610-4015-80b3-19357fbb7b88" />
                <input type = "image" src ="//testcontent.authorize.net/images/buy-now-gold.gif" />
            </form> {%- endcomment -%}

            {%- comment -%} Test Button 2 {%- endcomment -%}
            {%- comment -%} <form id="skuid-cert-registration-button" name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
            height: 52px;
            margin: 30px 0 25px; 
            pointer-events: none;"> 
                <input type = "hidden" name = "LinkId" value ="f0b2546a-f610-4015-80b3-19357fbb7b88" /> 
                <input type = "image" src ="https://uploads-ssl.webflow.com/5f3ae94493a8451beac90951/64ad5965ca60ccb9008e0cb0_RegisterButtonCert.svg" alt="Register Now" /> 
            </form> {%- endcomment -%}

            {%- comment -%} Test Button 3 {%- endcomment -%}
            <form id="skuid-cert-registration-button" name="PrePage" method = "post" action = "https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx" target="_blank" style="
            height: 52px;
            margin: 30px 0 25px; 
            pointer-events: none;"> 
                <input type = "hidden" name = "LinkId" value ="ed5efb0e-a511-4f73-9d37-d47a2b6db15e" /> 
                <input type = "image" src ="https://uploads-ssl.webflow.com/5f3ae94493a8451beac90951/64ad5965ca60ccb9008e0cb0_RegisterButtonCert.svg" alt="Register Now" /> 
            </form>

            <span style="color: #000; font-size: 20px; font-weight: 500; line-height: 20px; margin-bottom: 20px">Once you’ve registered, refresh this page to access the prep materials.</span>

            {%- comment -%} <span style="
            bottom: -200px; 
            color: #000; 
            font-size: 1rem;
            font-weight: 500;
            line-height: 28px;
            position: absolute;">Learn more at <a href="https://skuidskool.com/certification" style="color: #000;">skuidskool.com/certification</a></span> {%- endcomment -%}

            <img src="https://cdn.northpass.io/Skuid/images/Cert_Registration.svg" alt="exam-registration-image" class="exam-status-image exam-registration-image">
            </img>
        </div>
    {% endif %}


    {% comment %}================================================ EXAM PREP ==================================================={% endcomment %}
    
    {% if current_person.properties.cert_status == 'Registered' or current_person.properties.cert_status == 'Exists-qm' %}
    
        {%- comment -%} {% assign render_practice = true %}
        {% if courses.enrolled.any? and courses.in_catalog.any? %}
            {% for course in courses.enrolled %}
                {% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
                    {% if course.completed? %}
                        {% assign render_practice = false %}
                    {% endif %}
                {% endif %}
            {% endfor %}

            {% for course in courses.in_catalog %}
                {% if course.id == '3500821c-4b76-4155-a714-2947dc1b8d0c' or course.id == '10eeed9b-a5b8-446d-8023-2d109766fda6' %}
                    {% if course.completed? %}
                        {% assign render_practice = false %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        {% endif %} {%- endcomment -%}

        <div class="cert-content-container col-xs-12">
            <div class="np-resource-title cert-header">Skuid Certification Exam Prep</div>
            <div class="np-resource-subtitle cert-sub-header" style="color: #000;">Prep, practice, and take your exam.</div>

            <div class="cert-exam-prep-cards col-xs-9 col-sm-12">
                {%- comment -%} {% if render_practice == true %}{% endif %} {%- endcomment -%}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="https://www.skuidskool.com/c/7ed8d12a54a69be1339fcc12ce5fce92c2da8d19" target="_blank">Prep Guide</a>
                        <div class="cert-card-blurb">
                            View courses, documentation, and other resources to prep for the certification exam.
                        </div>
                    </div>
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="https://www.skuidskool.com/c/7288cf328ff4fa291c430d179fa962dc20c069ae" target="_blank">Practice Exam</a>
                        <div class="cert-card-blurb">
                            Take a practice exam to test what you've learned. 
                        </div>
                    </div>
                {%- comment -%} {% endif %} {%- endcomment -%}
                {% if current_person.properties.cert_status == 'Registered' %}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button cert-button-locked" href="#" target="_blank">Exam Not Ready</a>
                        <div class="cert-card-blurb">
                            This button will activate when you've received your exam confirmation email.
                        </div>
                    </div>
                {% elsif current_person.properties.cert_status == 'Exists-qm' %}
                    <div class="cert-card col-xs-12 col-md-3">
                        <a class="cert-button" href="https://ondemand.questionmark.com/home/406287/user?destination=assessments" target="_blank">Take Exam</a>
                        <div class="cert-card-blurb">
                            Ready? Take your exam to become certified. 
                        </div>
                    </div>
                {% endif %}
            </div>

            <span style="font-size: 16px; font-weight: 500; line-height: 20px; margin: 30px 0 15px">
                Not seeing what you expect? Refresh this page.
            </span>
        </div> 
        <div onclick="callNPWebhook()" style="display: none;" id="webhook-caller-item"></div>
        <script>
            $( document ).ready(function(){
                let caller = document.getElementById('webhook-caller-item');

                if(caller){
                    caller.click();
                }
            });
        </script>
    {% endif %}

    {% comment %}============================================== PASSED ========================================================{% endcomment %}

    {% if current_person.properties.cert_status == 'Pass' %}
        <div class="cert-content-container col-xs-12 exam-status-container">
            <img src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/cert_exam_passed.svg" alt="exam-passed-background" class="exam-status-image">
                <a class="cert-button-big share-cert-button" href="{{ current_person.properties.accredible_url }}" target="_blank">View Credential</a>
            </img>
        </div>
    {% endif %}

    {% comment %}=============================================== FAILED  ======================================================{% endcomment %}

    {% if current_person.properties.cert_status == 'Fail' %}
        <div class="cert-content-container col-xs-12" style="padding-bottom: 30px;">
            <div class="np-resource-title cert-header" style="color: #000;">Exam failed.</div>
            <div class="np-resource-subtitle cert-sub-header">
                If you'd like to try again, <a href="mailto:certification@skuid.com">certification@skuid.com</a>.
            </div>
            {%- comment -%} <a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a> {%- endcomment -%}
        </div> 
    {% endif %}

    {% comment %}============================================= CERTIFIED (UNUSED)======================================================{% endcomment %}

    {%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
        <img src="https://cdn.northpass.io/Skuid/images/cert_recert.svg" alt="cert-recert-background" class="exam-status-image">
            <div class="cert-recert-content-container">
                <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
                <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
            </div>
        </img>
    </div> {%- endcomment -%}

    {%- comment -%} <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Congratulations you're certified!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
    </div>  {%- endcomment -%}

    {% comment %}============================================ RECERTIFIED (UNUSED)====================================================={% endcomment %}

    {%- comment -%} <div class="cert-content-container col-xs-12">
        <div class="np-resource-title cert-header">Time for your recertification!</div>
        <div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>

        <a class="cert-button-med re-cert-button" href="#">Get recertified</a> 
    </div>  {%- endcomment -%}
    <div class="ceritfication-footer" style="
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 15%;
    text-align: center;
    width: 100%;">
        <span>Learn more at <a href="https://skuid.com/certification" style="color: #0d6efd;">skuid.com/certication</a>.</span>
        <br>
        <br>
        <span>Questions? Contact us at <a href="mailto:certification@skuid.com" style="color: #0d6efd;">certification@skuid.com</a>.</span>
    </div>
  </main>
</div>
{%- comment -%} {% include "footer" %} {%- endcomment -%}

<!-- Hotjar Tracking Code for Skool Staging/test site -->
<script>
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:3393511,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

    let agreementValidator = () => {
        if(document.getElementById('skuid-cert-agreement-input').checked){
            document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'auto'
        } else {
            document.getElementById('skuid-cert-registration-button').style.pointerEvents = 'none'
        }
    }

    let callNPWebhook = async () => {
        let webhookCaller = async () => {
            return new Promise(function(res, rej) {
                let xhr = new XMLHttpRequest();
                url = "https://webhooks.workato.com/webhooks/rest/e3211958-706d-4f5d-8148-fc904421241b/webhook-from-templates";

                //xhr.addEventListener("load", e => {
                //    window.location.replace('/app/waiting-room');
                //});
                xhr.open("POST", url, true);
                xhr.send(JSON.stringify({
                    email: '{{ current_person.email }}',
                    name: "{{ current_person.first_name }} {{ current_person.last_name }}",
                    user_id: '{{ current_person.id }}',
                    cert_status: '{{ current_person.properties.cert_status }}',
                    learner_points: '{{ current_person.properties.learner_points }}'
                }))
            })
        }

        try {
            await webhookCaller()
            .then((res) => {
                window.location.replace('/app/dashboard');
            })
        } catch(err) {
            console.log(err)
        }
    }
</script>

<style>
    .certification-page{
        height: 100%;
        padding: 40px 15px 20px;
        width: 100%;
    }

    .cert-header,
    .cert-sub-header{
        text-align: center;
    }

    .cert-sub-header{
        font-weight: 500;
        margin-bottom: 40px;
    }

    .register-cert-button{
        margin-top: -4px !important;
    }

    .cert-recert-content-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: absolute;
        padding-top: 12%;
        left: -5px;
        font-size: 10px;
    }

    .cert-recert-content-container .cert-sub-header{
        font-size: 8px;
    }

    .registration-sub-header{
        color: #000000;
        padding: 0 8%;
    }

    .registration-sub-header-link{
        text-decoration: none;
    }

    @media screen and (min-width: 450px){
        .cert-recert-content-container{
            padding-top: 13%;
        }
    }

     @media screen and (min-width: 550px){
        .cert-recert-content-container{
            padding-top: 14%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }

    }

    @media screen and (min-width: 768px){
        .certification-page{
            padding: 30px 3% 75px;
        }

        .cert-recert-content-container{
            left: unset; 
            margin-right: 10px;
            padding-top: 8%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 900px){
        .cert-recert-content-container{
            padding-top: 9%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 16px;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 18px;
        }
    }

    @media screen and (min-width: 1280px){
        .cert-recert-content-container .cert-sub-header{
            font-size: 20px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-recert-content-container{
            padding-top: 11%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 22px;
        }
    }

    @media screen and (min-width: 1950px){
        .cert-recert-content-container{
            padding-top: 10%;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 24px;
        }
    }

    @media screen and (min-width: 2150px){
        .cert-recert-content-container{
            padding-top: 200px;
        }

        .cert-recert-content-container .cert-sub-header{
            font-size: 26px;
        }
    }

    /* TOP ELEMENT STYLES */ 

    .base-state{
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .base-state .np-resources-title{
        margin-bottom: 0;
    }
    
    .register-button{
        background: #603DD8;
        color: #FFFFFF;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 500;
        height: 35px;
        padding: 5px;
        text-align: center;
        width: 150px;
    }

    .cert-step-bubbles{
        align-items: center;
        display: flex;
        flex-direction: row;
        height: 73px;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 0;
    }

    .cert-bubble{
        align-items: center;
        background: #B195F4;
        border-radius: 8px;
        color: #FFFFFF;
        display: flex;
        font-size: 9px;
        font-weight: 500;
        height: 100%;
        justify-content: center;
        max-width: 24%;
        text-align: center;
    }

    .cert-bubble-active{
        background: #603DD8;
    }

    @media screen and (min-width: 450px){
        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 650px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 750px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 768px){
        .base-state{
            margin-bottom: 12px;
        }

        .cert-bubble{
            font-size: 10px;
        }
    }

    @media screen and (min-width: 850px){
        .cert-bubble{
            font-size: 12px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-bubble{
            font-size: 14px;
        }
    }

    @media screen and (min-width: 1200px){
        .cert-bubble{
            font-size: 12px;
        }
    }


    /* CONTENT STYLES ===================================================================================================================================================== */ 
    .certification-iframe,
    .cert-content-container{
        background: #F7F5FD;
        width: 100%;
    }

    .certification-iframe{
        min-height: 970px;
    }

    /* .certification-iframe::-webkit-scrollbar{
        display: none;
    } */

    .cert-content-container{
        align-items: center;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        /* padding-bottom: 127px; */
        padding-top: 50px;
    }

    .exam-status-container{
        padding: 0;
    }

    .exam-status-image{
        width: 100%;
    }

    .exam-registration-image{
        margin-left: -15%;
    }

    .cert-exam-prep-cards{
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .cert-card{
        align-items: center;
        background: #E7E3F4;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
    }

    .cert-button{
        margin-bottom: 24px;
        margin-top: 40px;
        width: 55%;
    }

    .cert-button-locked{
        opacity: 0.65;
        pointer-events: none;
    }

    .cert-button-med{
        width: 45%;
    }

    .cert-button-big{
        font-size: 18px;
        height: 40px;
        padding: 5px;
        width: 70%;
    }

    .cert-button,
    .cert-button-med{
        font-size: 14px;
        height: 35px;
        padding: 7px
    }

    .cert-button-med,
    .cert-button-big{
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .cert-button,
    .cert-button-med,
    .cert-button-big{
        background: #603DD8;
        border-radius: 16px;
        color: #FFFFFF;
        font-weight: 500;
        margin-bottom: 24px;
        text-align: center;
        text-decoration: none;
    }

    .retake-cert-button{
        font-size: 16px;
        padding: 7px;
    }

    .cert-button:hover,
    .cert-button-big:hover{
        color: #FFFFFF;
    }

    .cert-card-blurb{
        font-size: 18px;
        font-weight: 500;
        min-height: 100px;
        margin-bottom: 19px;
        padding: 0 25px;
        text-align: center;
    }

    .completion-status-card-blurb{
        min-height: 70px;
    }

    .share-cert-button{
        font-size: 12px !important;
        height: 40px;
        margin-top: -40%;
        margin-bottom: calc(34% + 24px);
        max-width: 275px;
        padding: 11px 0px;
        width: 38% !important;
    }

    .download-cert-button{
        font-size: 12px;
        height: 27px;
        margin-top: -25px;
        max-width: 210px;
        padding-top: 5px;
    }

    @media screen and (min-width: 450px){
        .cert-button{
            font-size: 16px;
            padding: 5px;
        }

        .cert-button-med{
            width: 40%;
        }

        .cert-button-big{
            width: 55%;
        } 

        .download-cert-button{
            font-size: 14px;
            height: unset;
            margin-top: -15px;
            width: 40%;
        }
    }

    @media screen and (min-width: 500px){
        .retake-cert-button{
            font-size: 18px;
            padding: 5px;
        }

        .share-cert-button{
            font-size: 14px;
            padding: 8px;
        }
    }

    @media screen and (min-width: 550px){
        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 
    }

    @media screen and (min-width: 600px){
        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 650px){
        .cert-button-big{
            width: 40%;
        } 
    }

    @media screen and (min-width: 700px){
        .cert-button-med{
            width: 27%;
        }

        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 768px){
        .cert-exam-prep-cards{
            width: 100%;
        }

        .cert-card-blurb{
            min-height: 130px;
        }

        .completion-status-card-button{
            width: 75%;
        }

        .cert-button-med{
            width: 35%;
        }

        .cert-button-big{
            width: 50%;
        } 

        .retake-cert-button{
            font-size: 16px;
            padding: 7px;
        }
    }

    @media screen and (min-width: 850px){
        .completion-status-card-button{
            width: 65%;
        }

        .cert-button-med{
            width: 30%;
        }

        .cert-button-big{
            width: 45%;
        } 
    }

    @media screen and (min-width: 900px){
        .completion-status-card-button{
            width: 60%;
        }

        .share-cert-button{
            font-size: 18px !important;
            padding: 5px !important;
        }

       .cert-button-big{
            width: 40%;
        }
    }

    @media screen and (min-width: 950px){
        .cert-button-med{
            width: 25%;
        }

        .completion-status-card-button{
            width: 55%;
        }
    }

    @media screen and (min-width: 1000px){
        .cert-button-big{
            width: 35%;
        } 
    }

    @media screen and (min-width: 1024px){
        .cert-exam-prep-cards{
            flex-direction: row;
        }

        .cert-button{
            font-size: 14px;
            padding: 0;
            padding-top: 7px;
            width: 80%;
        }
        
        .cert-card-blurb{
            min-height: 190px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }

    @media screen and (min-width: 1100px){
        .cert-button{
            font-size: 14px;
            padding: 7px;
            width: 75%;
        }

        .cert-button-med{
            width: 22%;
        }
    }

    @media screen and (min-width: 1150px){
        .cert-button-big{
            width: 30%;
        } 
    }

    @media screen and (min-width: 1200px){
        .cert-button{
            width: 70%;
        }
    }

     @media screen and (min-width: 1300px){
        .cert-button{
            width: 65%;
        }

        .cert-button-med{
            max-width: 170px;
        }

        .cert-button-big{
            max-width: 230px;
            width: 25%;
        } 

        .download-cert-button{
            margin-top: 25px;
        }
    }

    @media screen and (min-width: 1350px){
        .cert-button{
            font-size: 16px;
            padding: 6px;
        }
    }

    @media screen and (min-width: 1440px){
        .cert-button{
            width: 60%;
        }

        .cert-card-blurb{
            min-height: 140px;
        }

        .completion-status-card-blurb{
            min-height: 80px;
        }
    }
</style>


{%- comment -%} UNUSED ELEMENTS {%- endcomment -%}

{% comment %}=================================================== IFRAME (REMOVE) =========================================================={% endcomment %}

{%- comment -%} <iframe src="https://www.skuid.com/certification" title="skuid_certification_embed" class="certification-iframe"></iframe> {%- endcomment -%}

{% comment %}============================================ EXAM NOT STARTED (UNUSED)=================================================={% endcomment %}

{%- comment -%} <div class="cert-content-container col-xs-12">
    <div class="np-resource-title cert-header">Exam not started</div>
    <div class="np-resource-subtitle cert-sub-header">See email for instructions or schedule your exam below</div>

    <div class="cert-card col-xs-9 col-sm-5">
        <a class="cert-button completion-status-card-button" href="#">Schedule Exam</a>
        <div class="cert-card-blurb completion-status-card-blurb">
            Ready? Schedule your exam to become certified.
        </div>
    </div>
</div>  {%- endcomment -%}

{% comment %}============================================ EXAM COMPLETE ===================================================={% endcomment %}

{%- comment -%} <div class="np-resource-title cert-header">Exam complete</div>
<div class="np-resource-subtitle cert-sub-header">Results are still qm_created. Check back in 10 business days from your exam date.</div> {%- endcomment -%}

{%- comment -%} <div class="cert-content-container col-xs-12 exam-status-container">
    <img src="https://cdn.northpass.io/Skuid/images/exam_complete_background.svg" alt="exam-complete-background" class="exam-status-image">
</div> {%- endcomment -%}