/*********************************/
/** GRAVITY FORMS CUSTOMIZATION **/
/*********************************/

/**********************/
/** GLOBAL GF STYLES **/
/**********************/

/**
Copy Center Form Styles
- change color + background color
- add padding to the form
 */
form.cart {
    background: white;
    color: var(--darker-blue);
}

/**
Steps Container
- adjust margin to hide top form-body top border
- add background color for tab spacing appearance
- position relative + negative margin overlaps top border
 */
form.cc-form div.gf_page_steps {
    position: relative;
    width: fit-content;
    padding: 0;
    border: var(--thin-medium-gray);
    border-bottom: none;
    background: var(--light-gray);
    margin: 0 0 -2px 0;
    z-index: 2;
}

/**
Step (Tabs)
- increase font-size
- increase spacing
- establish set width
- center text
 */
form.cc-form div.gf_page_steps div.gf_step {
    font-size: 2rem;
    font-weight: 500;
    padding: 1.4rem;
    margin: 0 2px;
    width: 23rem;
    height: unset;
    text-align: center;
}

form.cc-form div.gf_page_steps div.gf_step:hover {
    cursor: pointer;
}

/**
Steps Border
- do not display (removes invisible border from form body and steps container)
 */
form.cc-form div.gf_step_clear {
    display: none;
}

/**
Active Step
- match background with card
 */
form.cc-form div.gf_page_steps div.gf_step.gf_step_active {
    background: var(--light-gray);
}

/**
First Step
- add left border & remove left margin
 */
form.cc-form div.gf_page_steps div.gf_step.gf_step_first {
    margin-left: 0;
}

/**
Last Step
- remove end border (background blends with border)
 */
form.cc-form div.gf_page_steps div.gf_step.gf_step_last {
    margin-right: 0;
}

/**
Step Label
- increase font size
 */
form.cc-form div.gf_page_steps div.gf_step {
    font-size: 2rem;
}

/**
Non-active Steps
- give it a dark background
- override opacity
- specify borders
 */
form.cc-form div.gf_page_steps div.gf_step,
form.cc-form div.gf_page_steps div.gf_step.gf_step_pending,
form.cc-form div.gf_page_steps div.gf_step.gf_step_previous,
form.cc-form div.gf_page_steps div.gf_step.gf_step_next {
    background: var(--medium-gray);
    opacity: 1;
}

/* screensize < 780px (Tablets Portrait) */
@media (max-width: 780px) {
    /**
    Steps Container
     */
    form.cc-form div.gf_page_steps {
        width: 100%;
    }

    /**
    Steps
     */
    form.cc-form div.gf_page_steps div.gf_step {
        margin: 2px 0;
        width: 100%;
    }

    /**
    Active Step
    - add blue outline to easier identify active step
     */
    form.cc-form div.gf_page_steps div.gf_step.gf_step_active {
        font-weight: 700;
    }

    /**
    First Step
    - remove top margin
     */
    form.cc-form div.gf_page_steps div.gf_step.gf_step_first {
        margin-top: 0;
    }

    /**
    Buttons (Next & Back)
    - override included styles and prevent it from expanding to 100%
     */
    .gform_wrapper .gform_page_footer input.button.gform_previous_button,
    .gform_wrapper .gform_page_footer input.button.gform_next_button,
    input[type='submit']#gform_submit_button_4,
    input[type='submit']#bc_preview{
        width: unset;
    }

}

/**
Next Button
- change shape of next button (forward pentagon)
 */
input.gform_next_button.button {
    background: var(--darker-blue);
    --webkit-clip-path: var(--next-button-shape);
    clip-path: var(--next-button-shape);
    padding: var(--next-button-padding);
}

/**
Previous (Back) Button
- change shape of previous button (backwards pentagon)
 */
input.gform_previous_button.button {
    background: var(--darker-blue);
    --webkit-clip-path: var(--back-button-shape);
    clip-path: var(--back-button-shape);
    padding: var(--back-button-padding);
}

/**
Form Button Container
- move it the right of the form
- align button to the right of the container
- remove top border
- fix spacing
 */
.gform_wrapper div.gform_page_footer {
    position: relative;
    bottom: 0;
    right: 0;
    text-align: right;
    border-top: none;
    padding: 3rem 0;
    margin: 0;
    max-width: 100%;
}

/**
GF form validation
- blend background with the rest of the form
- remove margin
- position element above others
 */
#gform_wrapper_4 div.validation_error, /* Business Cards */
form.cc-form .gform_wrapper div.gf_page_steps + div.validation_error {
    background: var(--light-gray);
    margin-top: 0;
    margin-bottom: 0;
    z-index: 3;
    position: relative;
    border-right: var(--thin-medium-gray);
    border-left: var(--thin-medium-gray);
}

/**
Form Body (Child of GF Form Element)
- make it relative to position button container (absolute)
- add inner spacing
 */
form.cc-form div.gform_body {
    position: relative;
    background: var(--light-gray);
    padding: 2rem;
    border: var(--thin-medium-gray);
    min-height: 325px;
}

/*
Form Field INPUT
- expand input to be 100% with a max limit
 */
form.cc-form div.gform_body ul.gform_fields li.gfield input {
    width: 100%;
    max-width: 50rem;
}

/**
Generic Number Input Instruction
- hide
 */
form div.gform_wrapper div.instruction {
    display: none;
}

/**
Custom Radio Button Styling
 */
input[type="radio"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: -1px;
    left: -1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #2c78ca;
}

input[type="radio"]:checked:before {
    background: #2c79ca;
    border: 1px solid #FFFFFF;
}

/**
Checkbox Custom Styling
 */
input[type="checkbox"]:checked:before {
    content: "";
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: #2c78ca;
    border: 1px solid #2c78ca;
}

input[type="checkbox"]:checked:focus {
    outline: none;
}

/**
All Forms: Rich Text Editor
- change button background color to white
 */
form div.mce-widget.mce-btn > * {
    background: #ffffff;
}

/**
All Forms: Special Instructions
- expand to the entire width of the form
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.special-instructions {
    flex-basis: 100%;
    margin-top: 2rem;
}

/**
File Upload: "Please Wait..." message
 */
#please-wait-message {
    color:      var(--dark-red);
    font-style: italic;
    font-size:  1.8rem;
    animation:  pulse 1.5s ease infinite;
}
@keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/**
Tooltip Styling
- position tooltip below to right of hover target
 */
.disabled-tooltip {
    bottom:         -50px;
    right:          0;
    position:       absolute;
    width:          200px;
    word-wrap:      normal;
    font-size:      1.4rem;
    font-weight:    500;
    background:     #fff;
    color:          #000;
    z-index:        999999;
    padding:        8px;
    border-radius:  15px;
    box-shadow:     var(--lightest-box-shadow);
    align-text:     center !important;

    transition:     all 0.3s ease;
    opacity:        0; /* triggered via JS */
}
.disabled-tooltip.tooltip-fadein {
    transition:     all 0.3s ease;
    opacity:        1; /* triggered via JS */
}
.disabled-tooltip.tooltip-fadeout {
    transition:     all 0.3s ease;
    opacity:        0; /* triggered via JS */
}

/************************/
/** BUSINESS CARD FORM **/
/************************/

/**
Form Wrapper
- Extend the form to the whole page
 */
div#gform_wrapper_4.gform_wrapper {
    margin: 5rem 0;
    width: 100%;
    max-width: 100%;
}

/**
Form Fields Wrapper
- change display to flex
- user ID selector for highest priority
 */
form.cc-form div.gform_body ul.gform_fields {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

/**
Form Fields
- Determine base size for each form field
- increase z-index to ensure fields aren't blocked form overlapping containers
- increase minimum height;
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield {
    margin: 2rem;
    flex: 0 1 46rem;
    z-index: 2;
    min-height: 120px;
}

/**
Name Field
- give it its own row with flex-basis
 */

form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.bc-name {
    flex-basis: 60%;
}

/**
Address Field
- expand on larger screens
 */
@media (min-width: 1025px) {
    form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.address-field {
        flex-basis: 50rem;
    }
}

/**
Form Fields (Phone Field)
- reduce flex starting size to shrink fields
 */
form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.phone-field {
    flex-basis: 20rem;
    flex-grow: 0;
}

/**
Preview Button
- reduce padding
 */
input[type='submit']#gform_submit_button_4,
#bc_preview {
    padding: var(--preview-button-padding);
    background: var(--green);
}


/* screensize < 1200px (Large Desktop) */
@media (max-width: 1200px) {
    /**
    Button Wrapper
    - occupy right hand side & overlap with bottom row
     */
    .gform_wrapper div.gform_page_footer {
        position: relative;
        padding: 2rem 0;
    }

    /**
    Phone Fields
    - expand
     */
    form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.phone-field {
        flex-basis: 46rem;
    }
}

/* screensize < 1024px (Tablet Landscape) */
@media (max-width: 1024px) {
    /**
    Form Fields Wrapper
    - center all form fields
     */
    form.business-card-form div.gform_body ul.gform_fields {
        justify-content: center;
    }

    /**
    Name Field
    - reduce flex-basis to standard size
     */
    form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.bc-name {
        flex: 0 1 46rem;
    }

    /**
    Business Card Form
    - add margin around the form
     */
    .gform_wrapper form.business-card-form {
        margin: 2rem;
    }
}


/* screensize < 540px (Phones Portrait) */
@media (max-width: 540px) {

    /**
    Form
    - remove margin
     */
    div#gform_wrapper_4.gform_wrapper form.business-card-form {
        margin: 0;
    }

    /**
    Form Body
    - remove inside padding
     */
    form.business-card-form div.gform_body {
        padding: 0;
        margin: 0;
    }

    /**
    Form Fields Wrapper
    - add padding to the inside
     */
    form.business-card-form div.gform_body ul.gform_fields {
        padding: 2rem;
    }

    /**
    Form Fields
    - remove min-height
    */
    form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield {
        min-height: unset;
    }

    /**
    Buttons Container
    - convert to flex and line at the end
    - change position to absolute
     */
    form.business-card-form div.gform_page_footer {
        display: flex;
        justify-content: flex-end;
    }

    /**
    Buttons
    - remove bottom margin
     */
    .gform_wrapper .gform_page_footer input.button.gform_previous_button,
    .gform_wrapper .gform_page_footer input.button.gform_next_button,
    input[type='submit']#gform_submit_button_4,
    #bc_preview {
        margin-bottom: 0;
    }
}

/***************************/
/** BUSINESS CARD PREVIEW **/
/***************************/

/**
Business Card Preview Modal Wrapper
-  container to make Preview modal position relative to this container.
*/
div.wp-preview-img-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 99999;
    animation: fadeIn 0.5s;
}

/**
Business Card Preview Modal
- z-index should be above all elements
- darken background
- Fix the position of the element
 */
div.wp-preview-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 1rem;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: scroll;
    display: flex;
    padding-top: 14rem;
}

/**
Business Card Preview Image
- add drop shadow and margin
 */
img.bc-preview-image {
    margin: 1rem;
    box-shadow: var(--medium-box-shadow) !important;
    max-width: 768px !important;
    width: 85%;
}

/**
Business Card Preview Modal Button Container
 */
div.bc-preview-button-container {
    max-width: 768px;
    width: 85%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5rem;
}

/**
Back Button
- center the the container on the page
 */
form#confirm-bc {
    margin: auto;
}

/***********************************************************/
/** STANDARD-SIZE PRINTING & LARGE FORMAT PRINTING PAGE 1 **/
/***********************************************************/

/**
 Both forms have similar styles on page 1. Styles for both forms
 will be defined in this section with the appropriate acronyms
 above each selector.

 SSP - Standard-Size Printing
 LFP - Large Format Printing
*/

/** override GF size */
@media only screen and (min-width: 641px) {
    /**
    Form Labels
    */
    form.standard-size-form label.gfield_label,
    form.large-format-form label.gfield_label {
        font-size: 1.6rem;
        float: unset;
    }
}

/*
SSP & LFP Form Wrapper
- Extend the form to the whole page
*/
div#gform_wrapper_1.gform_wrapper,
div#gform_wrapper_7.gform_wrapper {
    margin: 5rem 0 0 0;
    width: 100%;
    max-width: unset;
}

/**
SSP & LFP Form Fields
- remove margin & min-height from cc-form styles
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield,
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield {
    margin: unset;
    min-height: unset;
    flex: 0 1 48rem;
}

form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print,
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print {
    flex: 0 1 100%;
}

/**
SSP: Levels Options Field
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.levels-options {
    flex: 0 1 100%;
}

form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.levels-options > div > ul > li > label {
    font-size: 1.5rem;
}

form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.levels-label {
    flex: 0 1 60rem;
}

/**
SSP & LFP Field Inputs
- remove vertical alignment for centering via flexbox
- increase label size
 */
form.standard-size-form div.gform_wrapper li.gfield .gfield_checkbox li input, .gform_wrapper .gfield_checkbox li input[type=checkbox] {
    vertical-align: unset;
}

/** SSP & LFP Page 1 */

/**
LFP 1: Tab 3 "Additional Options"
- reduce font size to fit in 1 tab
 */
form.large-format-form   div.gf_page_steps div.gf_step_last span.gf_step_label {
    font-size: 0.8em;
}

/**
SSP, LFP, & BC 1: Due Date Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 100%;
    padding: 0 0 15px 0;
    margin-bottom: 11px;
    border-bottom: var(--normal-dark-blue);
}
form.cc-form.business-card-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date div.ginput_container input {
    margin-right: 2rem;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date > label {
    display: inline-flex;
    height: 20px;
    margin: auto 0 auto auto;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date > div.gfield_description {
    text-align: right;
    padding-right: 2rem;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date > div {
    margin-top: 0 !important;
    left: 21px;
    position: relative;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date > div > input {
    margin: auto 0 auto auto;
    width: 150px;
    height: 40px;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.due-date > div > img {
    position: relative;
    right: 30px;
    top: 0;
}

/**
SSP & LFP 1: Job Name Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.job-name {
    flex: 0 50%;
    min-width: 280px;
}

/**
SSP & LFP 1: Department Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.department {
    flex: 0 50%;
    min-width: 280px;
}

/**
SSP & LFP 1: Requested Number of Fields
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.num-copies {
    flex: 0 100%;
    min-width: 280px;
    padding: 0 0 15px 0;
    margin-bottom: 11px;
    border-bottom: var(--normal-dark-blue);
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info.num-copies > div > div.instruction {
    padding: 5px 0 5px 0;
}

/**
SSP & LFP 1: File Upload Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.file-upload {
    flex: 0 100%;
    min-width: 280px;
}

/**
SSP & LFP 1: Proof Required Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required {
    flex: 0 100% !important;
    min-width: 280px;
    flex-flow: column;
    display: inline-flex;
    height: 50px;
    margin-top: 2rem;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > div > ul li label {
    width: 60px;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > div > ul {
    display: inline-flex;
    margin: 0;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > div > ul li {
    width: 88px;
}

/**
SSP 1: Print Type Field
 */
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type {
    margin-top: 16px;
    flex: 0 100% !important;
    min-width: 280px;
    height: 50px;
    flex-flow: column;
    display: inline-flex;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul {
    margin: 0 !important;
    height: 45px;
    display: inline-flex;
    vertical-align: middle;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul li {
    margin: auto 0 auto 15px !important;
    height: 30px;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul li:first-of-type > label {
    width: 50px;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul li:first-of-type {
    width: 88px;
    margin-left: 0 !important;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div,
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > div {
    margin: 0 !important;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > label,
form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > label {
    display: inline-flex;
    align-items: center;
    padding-right: 10px;
    margin: 0 !important;
    font-size: 1.5vh;
}

form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul li:last-of-type > label {
    width: 230px;
}

/** Screensize less than 680px for both "Proof Required" & "Print Type" fields*/
@media (max-width: 680px) {

    form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required,
    form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type {
        height: unset;
    }

    form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.proof-required > div > ul,
    form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul {
        flex-direction: column;
        align-items: flex-start;
        height: unset;
        display: unset;
    }

    form.cc-form div.gform_body div.gform_page ul.gform_fields li.gfield.proof-print.print-type > div > ul > li {
        margin: unset !important;
    }
}

/**
SSP 1: Levels Option
 */
li#field_1_62 {
    flex: 0 50% !important;
    min-width: 280px;
    margin-top: 25px;
}

li#field_1_62 > div > ul li {
    background: #2c79ca;
    color: #FFFFFF;
    min-width: 280px;
    max-width: 420px;
    font-size: 1.4vh;
    text-align: center;
    padding: 15px !important;
    border-radius: 6px;
}

li#field_1_62 > div > ul li > input {
    opacity: 0;
}

/**
SSP 1: Levels Labels
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.levels-label {
    flex-basis: 100%;
    margin-bottom: 4rem;
    border-bottom: var(--normal-dark-blue);
}

/**
SSP 1: Finishing Options Fields (after Levels)
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.finishing-options {
    flex-basis: 30rem;
}

/**
SSP 1: Single-Sided & Double-Sided
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.pagination {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    flex-basis: 100%;
    margin: 2rem 0 0 0;
}
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.pagination label {
    margin: 0 0 -2px 0;
}
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.pagination div.ginput_container {
    margin: 0;
}
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.pagination div.ginput_container ul.gfield_radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.pagination div.ginput_container ul.gfield_radio li {
    min-width: 15rem;
}

form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.double-sided-notice {
    flex-basis: 100%;
    color: var(--dark-green);
    font-size: 1.7rem !important;
}

/** screensize < 1024 (tablet landscape) */
@media (max-width: 1024px) {
    /**
    Levels Field
    - expand to cover the entire form
     */
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.finishing-options {
        flex-basis: 100%;
    }
}

/** screensize < 768 (tablet portrait) */
@media (max-width: 768px) {
    /**
    SSP 1: Top Three Fields
    - expand to the entire screen size
     */
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info,
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.your-info {
        flex-basis: 100% !important;
    }
}

/** SSP Page 2 & 3 */

/**
SSP 2 & 3: Fields
- consume entire row with flex-basis
- change to flex item
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2,
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    margin: 1rem auto;
}

/**
SSP 2 & 3: Fields Container Wrapper
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container,
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 div.ginput_container {
    margin: 0;
}

/**
SSP 2 & 3: Fields Container List
- change list display to flex to align vertically and horizontally
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container ul,
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 div.ginput_container ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/**
SSP 2: Fields Label
- remove margin from label
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 label {
    margin: 0;
}

/**
SSP 2 & 3: Fields Container List Item
- add spacing between options
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container ul li,
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 div.ginput_container ul li {
    margin: 0 2rem;
}

/**
SSP 2: Paper Size Options
- flex
  */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.paper-size {
    flex-wrap: wrap;
}

/**
SSP 2: Multiple Paper Size notice
- align text to the right
- expand to the entire container
- reduce font-size
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.paper-size p#large-paper-size-notice {
    font-size: 1.6rem;
    text-align: right;
    flex-basis: 100%;
    color: var(--dark-red);
}

/**
SSP 2: Label For Card Card
 */
#label_1_35_6 {
    width: 20rem;
}

/**
SSP 2: Paper Color Options
- flex
  */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.paper-color {
    display: flex;
}

/**
SSP 2: Stock Option Description
- change to block display
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.stock-option-description {
    display: block;
}

/**
SSP 3: Fields Label
- remove margin from label
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 label {
    margin: 0;
    width: 17rem;
}

/**
SSP 3: Cutting Field
 */
form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3.cutting-option {
    display: block;
}

/** Screens =< 1200px */
@media (max-width: 1200px) {

    /**
    SSP 3: Labels
     */
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 label {
        width: unset;
    }

    form.standard-size-form div.gform_body div.gform_page ul.gform_fields {
        justify-content: center;
    }

    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2,
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 {
        flex: 0 1 60rem;
        margin: 1rem 0;
        display: block;
    }

    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container ul,
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 div.ginput_container ul {
        display: block;
    }

    /**
    SSP 2: Paper Color Options
    - change to block
    */
    form.standard-size-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.paper-color {
        display: block !important;
    }
}

/** LFP Page 2 & 3 */

/* TODO - Note: "Format" has changed to "Application". Update selectors when possible */

/**
LFP 2: Don't center flex items vertically (Format field only)
*/
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.format ul.gfield_radio {
    align-items: flex-start;
}

/**
LFP 2: Format Inputs (Align at the top)
*/
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.format div.ginput_container ul li input {
    vertical-align: top;
}

/**
LFP 2: Format Label Descriptions
 */
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.format div.ginput_container ul li p.description {
    margin-top: 0.5rem;
}

/**
LFP 2: Format Label Descriptions (Capital Project Signoff)
 */
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.format div.ginput_container ul li p.description.red {
    margin-top: 0.5rem;
    color: var(--dark-red);
}

/**
LFP 2: Paper Type (Long-Term Outdoor Signage - Premium)
- Too jammed in flex row. Change to column
 */
form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.premium-paper-type div.ginput_container ul {
    flex-flow: column;
    align-items: flex-start;
}

form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.premium-paper-type div.ginput_container ul li label {
    max-width: unset;
}

/** screens at least 1200px */
@media (min-width: 1200px) {

    /**
    LFP 2 & 3: Fields
    - expand rows across the entire page
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2,
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 {
        flex-basis: 100%;
    }

    /**
    LFP 2: Field Input Containers
    - remove each margin
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container {
        margin: 0;
    }

    /**
    LFP 2 & 3: Format Field Container
    - flex container
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 ul.gfield_radio,
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3 ul.gfield_radio {
        display: flex;
        align-items: center;
    }

    /**
    LFP 2: Field Input choices
    - Remove margin between input choices
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2 div.ginput_container ul li {
        margin: 0 2rem;
    }

    /**
    LFP 3:
    - space between the inputs
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-3.large-format-binding div.ginput_container ul li {
        margin: 0 1rem;
    }

    /**
    LFP 2: Custom Paper Size
    - max containers at half
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.custom-paper-size {
        flex-basis: 50%;
    }

    /**
    LFP 2: Custom Paper Size
    - max containers at half
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields li.gfield.page-2.side-validation-notice {
        flex-basis: 100%;
        margin-bottom: 1rem;
    }

}

/** screen smaller than 1200px */
@media (max-width: 1200px) {
    /**
    LFP: Field Container
    - center items horizontally
     */
    form.large-format-form div.gform_body div.gform_page ul.gform_fields {
        justify-content: center;
    }
}

/**
Custom Footer Size for LFP
 */
form.large-format-form .gform_wrapper div.gform_page_footer {
    position: relative;
    padding: 2rem 0;
    width: 100%;
    max-width: unset;
}

/********************************/
/** GF: USER REGISTRATION FORM **/
/********************************/

/**
User Registration Form Wrapper
- width: 100%
 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: unset;
    width: 100%;
}

/**
User Registration Form Fields
- expanded to cover the entire form
 */
form.user-registration-form div.gform_body li.gfield {
    width: 100%;
}

/********************************/
/** GF: Confirmed Account PAGE **/
/********************************/

/**
Main Container
 */
div#content.widecolumn {
    text-align: center;
    min-height: 60vh;
    background: var(--lighter-gray);
    padding: 3rem 0;
}

div#content.widecolumn p.lead-in {
    max-width: 768px;
    margin: auto;
}

/************************************************/
/** GRAVITY FORMS W/ WOOCOMMMERCE INTEGRATIONS **/
/************************************************/

/** NOTE: These styles are integrated with Gravity Forms Pages and must be applied to every form */
/** (for specific WooCommerce page styles, please refer to includes/woocommerce.css) */

/** WooCommerce **/
.woocommerce {
    max-width: 1200px !important; /*Temporarily expand width of WooCommerce pages*/
}

/** screen sizes smaller than 680px */
@media (max-width: 680px) {
    div.woocommerce {
        margin: auto;
        width: 100% !important;
    }
}

/**
WooCommerce Product Image
- Adjust margin to only Right
 */
.woocommerce div.product div.images {
    width: unset;
    margin: 0 2rem 0 0;
}
/**
WooCommerce Product Image Zoom
- hide
 */
div.woocommerce-product-gallery.woocommerce-product-gallery--with-images a.woocommerce-product-gallery__trigger {
    display: none;
}

/**
WooCommerce Product Image
- hide this container on standard-size printing and large-format printing
 */
div.woocommerce-product-gallery.woocommerce-product-gallery--without-images.images {
    display: none;
}

/**
WooCommerce Pages
- Remove extra spacing inside woocommerce pages
 */
.woocommerce-cart #site-content .woocommerce,
.woocommerce-account #site-content .woocommerce {
    padding: 0;
    margin: auto;
}

/**
WooCommerce Summary (Gravity Forms)
- expand container to fit the entire page
 */
.woocommerce div.product div.summary.entry-summary {
    float: unset;
    clear: unset;
    width: 100%;
}

/**
WooCommerce Product Totals
- hide the totals + subtotal on Service page
 */
form.cc-form div.gform_wrapper div.product_totals {
    display: none;
}

/**
WooCommerce Categories
- hide
 */
.single-product div.product_meta {
    display: none;
}

/**
Quantity Container
- right justify next to add to cart button
 */
form.cc-form div.quantity {
    position: absolute;
    right: 12rem;
    display: flex;
}

/**
Quantity Input at the end of Forms
- increase width to account for 5 digits
 */
form.cart div.quantity input[type="number"].qty {
    height: 50px;
    width: 10rem;
    margin-right: 5rem;
}

/**
Add to Cart/Edit Button
- right justify
 */
form.cc-form button[name="add-to-cart"][type="submit"] {
    position: absolute;
    right: 0;
    width: 170px;
}

/**********************/
/** MASS MAILER FORM **/
/**********************/

form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields {
    display: flex;
    flex-direction: column;
}

/**
Mailer Type
- re-use radio button styling from SSP levels field
 */

div#product-2254 h1.product_title.entry-title {
    display: none;
}

form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > label {
    margin-top: 0 !important;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type label {
    width: 100%;
    padding: 11px 0 11px 0;
    margin: 0 auto !important;
    left: 0;
    bottom: 7px;
    position: relative;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type input[type='radio'] {
    display: none !important;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type {
    padding: 0 !important;
    flex-flow: column;
    display: inline-flex;
    min-width: 280px;
    width: 100%;
    flex-grow: 1;
    flex-basis: 100%;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > div > ul {
    display: inline-flex;
    width: 100%;
    flex-flow: wrap;
    margin-bottom: 0 !important;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > div > ul li {
    background: #2c79ca;
    margin-left: 5px !important;
    height: 44px;
    display: inline-flex;
    padding: 6px 0 0 0 !important;
    color: #FFFFFF;
    flex-wrap: wrap;
    flex-grow: 1;
    min-width: 260px;
    font-size: 16px;
    text-align: center;
    border-radius: 6px;
    margin-bottom: 10px !important;
    align-self: center;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > div > ul li > label:hover form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > div > ul li {
    cursor: pointer;
    background: #1b8bff;
    color: #FFFFFF;

}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mail-merge
{
    min-width: 50%;
}

form.cc-form.mass-mailer-form .gform_wrapper .validation_message {
    color: #790000;
    position: relative !important;
    bottom: 47px !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: normal;
}
.gform_wrapper .gform_fileupload_multifile .gform_drop_area {
    padding: 12px 24px 40px 24px !important;
}
.ginput_preview {
    display: inline-flex;
    font-size: 14px;
    word-break: keep-all;
}
.ginput_preview > img.gform_delete {
    height: 16px;
    width: 16px;
    align-self: center;
}
.ginput_preview > strong {
    font-size: 14px;
    text-indent: 8px;
}
.ginput_preview > a {
    font-size: 14px;
    min-width: 55px;
}
.ginput_preview > b {
    font-size: 14px;
    min-width: 50px;
    text-align: center;
}

li.mail-merge-img figure:first-of-type {
    padding: 0 !important;
    width: 100%;
    height: 0;
    opacity: 0;
    position:relative;
    z-index: -1;
    bottom: 5px;
    -webkit-transition: height, opacity 850ms, 1000ms;
    -moz-transition: height, opacity 850ms, 1000ms;
    -ms-transition:height, opacity 850ms, 1000ms;
    -o-transition: height, opacity 850ms, 1000ms;
    transition: height, opacity 850ms, 1000ms;
}

li.mail-merge-img {
    align-self: center;
    display: inline-flex;
    flex-flow: column;
    flex-grow: 1;
    margin-top: 0 !important;
    padding: 0 !important;
    text-align: center;
    font-size: 14px;
    width: 135px;
    position: relative;
    justify-content: center;
    max-width: 720px !important;
    -webkit-transition: all 850ms;
    -moz-transition: all 850ms;
    -ms-transition: all 850ms;
    -o-transition: all 850ms;
    transition: all 850ms;
}
li.mail-merge-img:active,
li.mail-merge-img:hover
{
    width: 100%;
}

li.mail-merge-img:active > figure,
li.mail-merge-img:hover > figure {
    height: 100% !important;
    opacity: 100% !important;
    z-index: 9;
    padding: 2rem !important;

}

li.mail-merge-img:active > figure,
li.mail-merge-img:hover > figure {
    margin: 20px 5px 10px 0 !important;
}

li.mail-merge-img:active> span,
li.mail-merge-img:hover > span {
    background: #074bca !important;
}

li.mail-merge-img > span:first-of-type {
    height: 47px;
    min-width: 108px;
    flex-grow: 1;
    background: #027aca;
    color: #FFFFFF;
    padding: 12px 12px 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.letter-upload > div.gfield_description {
    text-align: center;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.bulk-mailer-header div.bulk-mailer-header-div,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.employee-mailer-header div.employee-mailer-header-div {
    width: 100%;
    border-top: 1px dashed #cccccc;
    margin-top: 15px;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.bulk-mailer-header div.bulk-mailer-header-div > h2,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.employee-mailer-header div.employee-mailer-header-div > h2 {
    text-align: left !important;
    margin-top: 15px !important;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.bulk-mailer-header div.bulk-mailer-header-div > h2,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.employee-mailer-header div.employee-mailer-header-div > h2,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mail-merge > label,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.letter-upload > label {
    text-align: center;
    font-size: 20px;
    margin: 0;
    font-weight: 700;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.bulk-mailer-header,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.employee-mailer-header {
    width: 100%;
}

form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.letter-upload,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mail-merge {
    width: 100%;
    max-width: 720px;
    display: inline-flex;
    flex-flow: column;
    flex-grow: 1;
    align-self: center;
    margin-top: 30px;
    text-align: left;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mail-merge > div.ginput_container_fileupload > input[type='file'] {
    color: transparent;
}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mailer-type > div > ul li > input {
    opacity: 0;
}
p.price {
    display: none !important;
    opacity: 0 !important;
}

div#product-2254 h2 {

}
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.mail-merge > div.ginput_container_fileupload {
    margin-top: 8px;
    text-align: center;
    height: 135px;
    color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/**
Global Figure Styling (for all example images)
- add box minimal shadow
- round borders
- whiten background
 */
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield figure {
    border: var(--thin-light-gray);
    padding: 2rem;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2);
}

/**
Image Example
- add black border
 */
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield figure img {
    margin: auto;
    border: 1px solid black;
}

/********************************/
/** VTA BULK PERMIT MAILER 589 **/
/********************************/

/**
Bulk Mailer Size Example Containers
- flex image containers for Bulk Mailer image examples
- wrap for over flowing elements
 */
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.large-bulk-mailer-img,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.small-bulk-mailer-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/**
Bulk Mailer Size Example Container (Individual)
- create minimum size for each individual figure element
 */
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.large-bulk-mailer-img figure,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.small-bulk-mailer-img figure {
    flex-basis: 35rem;
    flex-shrink: 0;
    flex-grow: 1;
}

/**
Bulk Mailer Size Example "Example" Text
- stretch flex child across the entire container
 */
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.large-bulk-mailer-img span,
form.cc-form.mass-mailer-form div.gform_wrapper ul.gform_fields li.gfield.small-bulk-mailer-img span {
    width: 100% !important;
}


/*******************************/
/** VTA EMPLOYEE/OTHER MAILER **/
/*******************************/

/**
Return Envelope Preview Image
- max-width + centering image with auto margin
 */
img.mm-return-env-preview {
    max-width: 1024px;
    margin: auto;
}

/**
Return Envelope Preview Modal Button container
- match max width w/ image & right justify
 */
div.mm-preview-button-container {
    max-width: 1024px;
    margin: auto;
    display: flex;
    justify-content: flex-end;
}