@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap');


/* =========================================================
   WIU GENCYBER STUDENT APPLICATION
   ========================================================= */

#gencyber-recommendation {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0.1em 0.3%;

    color: #000;

    font-family:
        'Open Sans',
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.6;

    box-sizing: border-box;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   GLOBAL BOX SIZING
   ========================================================= */

#gencyber-recommendation *,
#gencyber-recommendation *::before,
#gencyber-recommendation *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

#gencyber-recommendation .gencyber-container {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   MAIN FEATURE
   ========================================================= */

#gencyber-recommendation .gencyber-feature {
    width: 100%;

    margin: 0;

    padding: 0;

    background: #fff;

    border: 1px solid #B8860B;
}


/* =========================================================
   MAIN PURPLE PAGE HEADER
   ========================================================= */

#gencyber-recommendation .gencyber-heading {
    width: 100%;

    margin: 0;

    padding: 1rem 1.25rem;

    background: #663399;

    color: #ffcc00;

    font-size: 1.25rem;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   INNER CONTAINERS
   ---------------------------------------------------------
   Same width for:
   - Instructions
   - Before You Begin
   - Ready to Join GenCyber Cybersecurity Camp?
   - Form
   - Form Instructions
   ========================================================= */

#gencyber-recommendation .gencyber-theme-container,
#gencyber-recommendation .gencyber-form-wrapper,
#gencyber-recommendation .gencyber-form-instructions {

    width: calc(100% - 30px);

    max-width: none;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   INFORMATION CONTAINERS
   ========================================================= */

#gencyber-recommendation .gencyber-theme-container {

    margin-top: 18px;

    margin-bottom: 18px;

    padding: 0;

    background: #FAF9F6;

    border: 1px solid #B8860B;

    border-radius: 0;

    overflow: hidden;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   SECTION HEADERS
   ---------------------------------------------------------
   WHITE BACKGROUND
   PURPLE TEXT
   ========================================================= */

#gencyber-recommendation .gencyber-theme-header {

    width: 100%;

    margin: 0;

    padding: 9px 16px;

    background: #ffffff;

    color: #663399;

    border-bottom: 2px solid #663399;

    font-size: 1.2rem;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   INFORMATION CONTENT
   ========================================================= */

#gencyber-recommendation .gencyber-theme-content {

    padding: 15px 18px;

    background: #FAF9F6;

    color: #0D0D0D;

    font-size: 1.2rem;

    line-height: 1.6;
}


/* =========================================================
   INFORMATION PARAGRAPHS
   ========================================================= */

#gencyber-recommendation .gencyber-theme-content p {

    margin: 0 0 12px 0;

    padding: 0;
}


#gencyber-recommendation .gencyber-theme-content p:last-child {

    margin-bottom: 0;
}


/* =========================================================
   INFORMATION LISTS
   ========================================================= */

#gencyber-recommendation .gencyber-theme-content ul {

    margin-top: 8px;

    margin-bottom: 10px;

    padding-left: 25px;
}


#gencyber-recommendation .gencyber-theme-content li {

    margin-bottom: 8px;
}


#gencyber-recommendation .gencyber-theme-content li:last-child {

    margin-bottom: 0;
}


/* =========================================================
   NESTED LISTS
   ========================================================= */

#gencyber-recommendation .gencyber-theme-content ul ul {

    margin-top: 8px;

    margin-bottom: 5px;
}


/* =========================================================
   LINKS
   ========================================================= */

#gencyber-recommendation .gencyber-theme-container a {

    color: #663399;

    font-weight: 600;

    text-decoration: underline;
}


#gencyber-recommendation .gencyber-theme-container a:hover {

    color: #4B2673;
}


/* =========================================================
   START YOUR APPLICATION BUTTON WRAPPER
   ========================================================= */

#gencyber-recommendation .gencyber-application-button-wrapper {

    width: 100%;

    margin: 22px 0 5px 0;

    text-align: center;
}


/* =========================================================
   START YOUR APPLICATION BUTTON
   ---------------------------------------------------------
   Designed to match the GenCyber Camp Information
   section/button styling.
   ========================================================= */

#gencyber-recommendation .gencyber-application-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 240px;
    min-height: 52px;

    padding: 12px 24px;

    background: #663399;

    color: #ffcc00 !important;

    border: 2px solid #B8860B;

    border-radius: 0;

    font-family:
        'Open Sans',
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 1rem;

    font-weight: 700;

    line-height: 1.3;

    text-align: center;

    text-decoration: none !important;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.12);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

#gencyber-recommendation .gencyber-application-button:hover {

    background: #4B2673;

    color: #ffffff !important;

    border-color: #B8860B;

    text-decoration: none !important;

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.18);

    transform: translateY(-1px);
}


/* =========================================================
   BUTTON FOCUS
   ========================================================= */

#gencyber-recommendation .gencyber-application-button:focus {

    background: #4B2673;

    color: #ffffff !important;

    border-color: #B8860B;

    text-decoration: none !important;

    outline: none;
}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

#gencyber-recommendation .gencyber-application-button:focus-visible {

    outline: 3px solid #ffcc00;

    outline-offset: 3px;
}


/* =========================================================
   ACTIVE BUTTON
   ========================================================= */

#gencyber-recommendation .gencyber-application-button:active {

    transform: translateY(0);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   FORM SECTION
   ========================================================= */

#gencyber-recommendation .gencyber-form-section {

    width: 100%;

    margin: 0;

    padding: 0 0 20px 0;
}


/* =========================================================
   FORM WRAPPER
   ---------------------------------------------------------
   SAME WIDTH AS INFORMATION CONTAINERS
   ========================================================= */

#gencyber-recommendation .gencyber-form-wrapper {

    margin-top: 18px;

    margin-bottom: 18px;

    padding: 0;

    background: #EDEDED;

    border: 1px solid #B8860B;

    border-radius: 0;

    overflow: hidden;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   FORM HEADER
   ========================================================= */

#gencyber-recommendation .gencyber-form-wrapper .gencyber-theme-header {

    width: 100%;

    background: #ffffff;

    color: #663399;

    border-bottom: 2px solid #663399;

    font-size: 1.2rem;

    font-weight: 700;
}


/* =========================================================
   FORM CONTENT
   ========================================================= */

#gencyber-recommendation .gencyber-form-content {

    width: 100%;

    padding: 12px;

    background: #EDEDED;
}


/* =========================================================
   JOTFORM
   ========================================================= */

#gencyber-recommendation .gencyber-google-form {

    display: block;

    width: 100%;

    min-height: 1800px;

    margin: 0;

    padding: 0;

    border: 0;

    background: #EDEDED;
}


/* =========================================================
   BEFORE SUBMITTING
   ========================================================= */

#gencyber-recommendation .gencyber-form-instructions {

    margin-top: 10px;

    margin-bottom: 0;

    padding: 0;

    background: #FAF9F6;

    border: 1px solid #B8860B;

    color: #333;

    font-size: 0.9rem;

    line-height: 1.5;

    overflow: hidden;
}


/* =========================================================
   BEFORE SUBMITTING HEADER
   ========================================================= */

#gencyber-recommendation .gencyber-form-instructions-header {

    margin: 0;

    padding: 9px 16px;

    background: #ffffff;

    color: #663399;

    border-bottom: 2px solid #663399;

    font-size: 1.2rem;

    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   BEFORE SUBMITTING CONTENT
   ========================================================= */

#gencyber-recommendation .gencyber-form-instructions-content {

    padding: 10px 15px;

    background: #FAF9F6;

    color: #333;
}


#gencyber-recommendation .gencyber-form-instructions-content p {

    margin: 0;

    padding: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 768px) {


    /* -----------------------------------------------------
       MAIN CONTAINER
       ----------------------------------------------------- */

    #gencyber-recommendation {

        padding-left: 0.2%;
        padding-right: 0.2%;
    }


    /* -----------------------------------------------------
       INNER CONTAINERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-container,
    #gencyber-recommendation .gencyber-form-wrapper,
    #gencyber-recommendation .gencyber-form-instructions {

        width: calc(100% - 20px);

        max-width: none;
    }


    /* -----------------------------------------------------
       MAIN HEADER
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-heading {

        padding: 0.9rem 1rem;

        font-size: 1.15rem;
    }


    /* -----------------------------------------------------
       INFORMATION CONTAINERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-container {

        margin-top: 15px;

        margin-bottom: 15px;
    }


    /* -----------------------------------------------------
       SECTION HEADERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-header {

        padding: 8px 14px;

        font-size: 1.1rem;
    }


    /* -----------------------------------------------------
       INFORMATION CONTENT
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-content {

        padding: 14px 15px;
    }


    /* -----------------------------------------------------
       APPLICATION BUTTON
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-application-button-wrapper {

        margin-top: 20px;

        margin-bottom: 5px;
    }


    #gencyber-recommendation .gencyber-application-button {

        min-width: 230px;

        min-height: 50px;

        padding: 11px 22px;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-form-wrapper {

        margin-top: 15px;

        margin-bottom: 15px;
    }


    #gencyber-recommendation .gencyber-form-content {

        padding: 10px;
    }


    #gencyber-recommendation .gencyber-google-form {

        min-height: 1900px;
    }


    /* -----------------------------------------------------
       BEFORE SUBMITTING
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-form-instructions-header {

        padding: 8px 14px;

        font-size: 1.1rem;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media screen and (max-width: 480px) {


    /* -----------------------------------------------------
       MAIN CONTAINER
       ----------------------------------------------------- */

    #gencyber-recommendation {

        width: 100%;

        padding-left: 0;
        padding-right: 0;
    }


    /* -----------------------------------------------------
       MAIN FEATURE
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-feature {

        width: 100%;

        margin: 0;
    }


    /* -----------------------------------------------------
       MAIN HEADER
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-heading {

        padding: 0.8rem 0.85rem;

        font-size: 1.05rem;
    }


    /* -----------------------------------------------------
       INNER CONTAINERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-container,
    #gencyber-recommendation .gencyber-form-wrapper,
    #gencyber-recommendation .gencyber-form-instructions {

        width: calc(100% - 10px);

        max-width: none;
    }


    /* -----------------------------------------------------
       INFORMATION CONTAINERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-container {

        margin-top: 10px;

        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       SECTION HEADERS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-header {

        padding: 8px 12px;

        font-size: 0.9rem;

        border-bottom-width: 2px;
    }


    /* -----------------------------------------------------
       INFORMATION CONTENT
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-content {

        padding: 12px;

        font-size: 1.1rem;
    }


    /* -----------------------------------------------------
       LISTS
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-theme-content ul {

        padding-left: 20px;
    }


    #gencyber-recommendation .gencyber-theme-content li {

        margin-bottom: 7px;
    }


    /* -----------------------------------------------------
       APPLICATION BUTTON
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-application-button-wrapper {

        margin-top: 18px;

        margin-bottom: 3px;
    }


    #gencyber-recommendation .gencyber-application-button {

        display: flex;

        width: 100%;

        min-width: 0;

        min-height: 50px;

        padding: 11px 18px;

        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-form-wrapper {

        margin-top: 10px;

        margin-bottom: 10px;
    }


    #gencyber-recommendation .gencyber-form-content {

        padding: 5px;

        background: #EDEDED;
    }


    /* -----------------------------------------------------
       JOTFORM
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-google-form {

        min-height: 2100px;
    }


    /* -----------------------------------------------------
       BEFORE SUBMITTING
       ----------------------------------------------------- */

    #gencyber-recommendation .gencyber-form-instructions {

        width: calc(100% - 10px);

        font-size: 0.85rem;
    }


    #gencyber-recommendation .gencyber-form-instructions-header {

        padding: 8px 12px;

        font-size: 0.9rem;
    }


    #gencyber-recommendation .gencyber-form-instructions-content {

        padding: 9px 12px;
    }

}