/* SCHEMA TAB LINKS */
#schema-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    gap: 15px 2.5%;
    position: relative;
    z-index: 1;
}

#schema-tabs .schema-tab {
    width: 22.5%;
    color: #2dbdb6;
    display: block;
    text-align: center;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    border-radius: 30px;
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

#schema-tabs .schema-tab::before {
    content: '';
    display: inline-block;
    height: 32px;
    width: 32px;
    margin-right: 6px;
    position: relative;
    top: 8px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 80%;
}

#schema-tabs .schema-tab[data-schema-target="Article"]::before { background-image: url(../img/icon-schema-markup-generator-article.png); }
#schema-tabs .schema-tab[data-schema-target="BreadcrumbList"]::before { background-image: url(../img/icon-schema-markup-generator-breadcrumb.png); }
#schema-tabs .schema-tab[data-schema-target="FAQPage"]::before { background-image: url(../img/icon-schema-markup-generator-faq.png); }
#schema-tabs .schema-tab[data-schema-target="Product"]::before { background-image: url(../img/icon-schema-markup-generator-product.png); }
#schema-tabs .schema-tab[data-schema-target="Person"]::before { background-image: url(../img/icon-schema-markup-generator-person.png); }
#schema-tabs .schema-tab[data-schema-target="LocalBusiness"]::before { background-image: url(../img/icon-schema-markup-generator-localbusiness.png); }
#schema-tabs .schema-tab[data-schema-target="HowTo"]::before { background-image: url(../img/icon-schema-markup-generator-howto.png); }
#schema-tabs .schema-tab[data-schema-target="Organization"]::before { background-image: url(../img/icon-schema-markup-generator-organization.png); }

#schema-tabs .schema-tab.active,
#schema-tabs .schema-tab:hover {
    background: #E3EEFF;
}

/* SCHEMA CONTAINER */
#schema-wrapper {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* GENERATED SCHEMA CODE */
#schema-generated {
    width: 45%;
    padding-top: 34px;
}

#schema-generated code {
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    display: block;
    white-space: pre-line;
    font-size: 20px;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight: 400;
    box-sizing: border-box;
    padding: 20px;
    overflow: scroll;
    max-height: 85%;
    color: #000000;
}

#schema-generated code span {
    line-height: 100%;
}

#schema-generated code .code-purple { color: #881276; }
#schema-generated code .code-orange { color: #994500; }

#schema-generated code .code-block,
#schema-generated code .code-line {
    display: inline-block;
    padding-left: 1em;
    width: 100%;
    box-sizing: border-box;
    line-height: 30px;
    word-break: break-all;
}

#schema-generated #code-actions {
    text-align: right;
    margin-top: 20px;
}

#schema-generated #code-actions .code-action-button {
    display: inline-block;
    margin-left: 4px;
    background: #2dbdb6;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
}

#schema-generated #code-actions #delete-code {
    background: #FF5254;
}

#schema-generated #code-actions .code-action-button svg { 
    fill: #ffffff; 
}

#schema-generated #code-actions .code-action-button:hover {
    background: #ffffff;
    box-shadow: inset 0 0 0 2px #2dbdb6;
}

#schema-generated #code-actions #delete-code:hover {
    background: #ffffff;
    box-shadow: inset 0 0 0 2px #FF5254;
}

#schema-generated #code-actions .code-action-button:hover svg { 
    fill: #2dbdb6; 
    stroke: #2dbdb6;
    stroke-width: .5;
}

#schema-generated #code-actions #delete-code:hover svg {
    fill: #FF5254; 
    stroke: #FF5254;
}

#validator { display: none; }

/* SCHEMA FORM */
#schema-form {
    width: 55%;
}

#schema-form .form-tab { 
    display: none;
    padding-top: 240px;
    position: relative;
    top: -240px;
}

#schema-form .form-tab.active-tab { display: block; }

#schema-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    border: none; 
    align-items: flex-end;
}

#schema-form .schema_form_repeater[data-repeater-name="howto_supplies"] {
    align-items: flex-start;
}

/* FLEX BREAK */
#schema-form .flex-break {
    flex-basis: 100%;
    height: 0;
}

/* FORM FIELDS & GROUPS */
#schema-form .schema_form_repeater,
#schema-form .field-group {
    display: flex;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

#HowTo fieldset > .field-group {
    align-items: flex-start;
}

#schema-form .schema_form_repeater {
    flex-direction: column;
}

#schema-form .schema_form_field {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    display: inline-block;
    width: 100%;
    flex-grow: 2;
    margin-top: 6px;
    position: relative;
}

#schema-form .flexed {
    flex: 1 0 auto;
}

#schema-form .repeated-field,
#schema-form .to-clone {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    align-content: flex-start;
    width: 100%;
}

#schema-form .repeated-field:not(.no-border), 
#schema-form .field-group:not(.no-border), 
#schema-form .to-clone:not(.no-border) {
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
}

#schema-form .schema_form_repeater[data-repeater-name="article_images"] .repeated-field,
#schema-form .schema_form_repeater[data-repeater-name="howto_supplies"] .repeated-field,
#schema-form .schema_form_repeater[data-repeater-name="howto_tools"] .repeated-field {
    height: 50px;
    border: none;
    border-radius: 0;
    padding: 0;
}

#schema-form .schema_form_repeater[data-repeater-name="howto_tools"] .repeated-field,
#schema-form .schema_form_repeater[data-repeater-name="howto_supplies"] .repeated-field {
    height: 74px;
}

#schema-form .schema_form_repeater[data-repeater-name="product_reviews"] .to-clone,
#schema-form .schema_form_repeater[data-repeater-name="business_hours"] .to-clone {
    height: 0;
    margin-bottom: -20px;
}

fieldset > .field-group:first-child, fieldset > .schema_form_repeater:first-child {
    margin-top: 30px;
}

#schema-form .hidden_field_container {
    display: none;
    gap: 20px;
    width: 100%;
}

#schema-form .hidden_field_container.wrap {
    flex-wrap: wrap;
}

#schema-form .hidden_field_container.reveal {
    display: flex !important;
}

#schema-form .hidden_field_container .hidden_field {
    display: none;
}

#schema-form .repeated-field a.remove {
    display: inline-block;
    height: 35px !important;
    line-height: 35px !important;
    font-size: 20px;
    text-align: center;
    border-radius: 25px;
    background: #BDBDBD;
    border-color: #BDBDBD;
    color: #FFFFFF;
    position: relative;
    cursor: pointer;
    flex-basis: content;
    order: 2;
}

#schema-form .repeated-field:has(> .schema_form_field label) a.remove,
#schema-form .repeated-field:has(> .field_group .schema_form_field label) a.remove {
    top: 14px;
}

#schema-form .schema_form_repeater[data-repeater-name="howto_steps"] .repeated-field a.remove,
#schema-form .schema_form_repeater[data-repeater-name="organization_contacts"] .repeated-field a.remove {
    top: 0 !important;
}

#schema-form .repeated-field a.remove span {
    width: 60px;
    display: block;
}

#schema-form .repeated-field a.remove:hover {
    background: #FF5254 !important;
    border-color: #FF5254 !important;
    color: #FFFFFF !important;
}

#schema-form .schema_form_repeater[data-repeater-name="breadcrumb_page"] .repeated-field .schema_form_field:nth-child(2),
#schema-form .schema_form_repeater[data-repeater-name="faq_items"] .repeated-field .schema_form_field:nth-child(2) {
    order: 3 !important;
}

#schema-form .schema_form_repeater[data-repeater-name="product_reviews"] .repeated-field {
    align-items: flex-start !important;
}

/* WIDTHS */
#schema-form .w-10 { width: 10% !important; }
#schema-form .w-20 { width: 20% !important; }
#schema-form .w-30 { width: 30% !important; }
#schema-form .w-40 { width: 40% !important; }
#schema-form .w-50 { width: 50% !important; }
#schema-form .w-60 { width: 60% !important; }
#schema-form .w-70 { width: 70% !important; }
#schema-form .w-80 { width: 80% !important; }
#schema-form .w-90 { width: 90% !important; }

#schema-form .mt-0 { margin-top: 0px !important; }
#schema-form .mt-20 { margin-top: 20px !important; }
#schema-form .mt-40 { margin-top: 40px !important; }

#schema-form .d-none { display: none !important; }

/* MAX VALUE COUNTERS */
#schema-form .schema_form_field .counter {
    position: absolute;
    top: 0;
    right: 0;
}

/* SCHEMA FORM LABELS */
#schema-form .schema_form_field label {
    color: #000000;
    display: block;
}

#schema-form .howto_supply,
#schema-form .howto_tool {
    margin-bottom: 10px;
}

/* SCHEMA FORM INPUTS, SELECTS & TEXTAREAS */
#schema-form .schema_form_field input:not(.multiselect_checkbox),
#schema-form .schema_form_field select,
#schema-form .schema_form_field textarea {
    background: #FFFFFF;
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    height: 45px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    color: #00225D;
    font-family: proxima-nova, sans-serif;
}

#schema-form .schema_form_field textarea {
    resize: none;
    height: 146px;
}

#schema-form .schema_form_field input[type="date"] {
    text-transform: uppercase;
    color: #CECECE !important;
}

#schema-form .schema_form_field input[type="date"].date-picked {
    color: #00225D !important;
}

#schema-form .schema_form_field select,
#schema-form .schema_form_field .multiselect_input {
    -webkit-padding-end: 40px !important;
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNDkzNzQgMC4wMTEzNTI0QzEuODY0OTggLTAuMDEyNzIzOCAyLjE4OTI3IDAuMjI4MDM4IDIuNDkwMDcgMC41MTgzNjlDNC44MzE5NyAyLjc3ODcgNy4xNzM4NiA1LjAzNzYyIDkuNTE0MjkgNy4yOTc5NUM5LjU1Njg0IDcuMzM5MDIgOS42MDA4NiA3LjM4MTUxIDkuNjQzNDEgNy40MjI1OEM5Ljg4MzA4IDcuNjUyOTYgMTAuMTE5OCA3LjY1NTc5IDEwLjM1MzYgNy40MzEwOEMxMi43NjU5IDUuMTA1NiAxNS4xNzUzIDIuNzc3MjkgMTcuNTg5MSAwLjQ1MzIyMkMxOC4xNjU4IC0wLjEwMzM2NCAxOC45ODAyIC0wLjE1MDEgMTkuNTMwNCAwLjMzMDAwOEMyMC4xNDA4IDAuODYzOTM0IDIwLjE2MTQgMS43MTc5MyAxOS41NjEyIDIuMzA5OTJDMTguODQyMiAzLjAxODA1IDE4LjExMTUgMy43MTM0MyAxNy4zODUyIDQuNDEzMDVDMTUuMzM2NyA2LjM5MDEzIDEzLjI4OTggOC4zNjcyMiAxMS4yMzk5IDEwLjM0MjlDMTEuMTEwOCAxMC40Njc1IDEwLjk3NTggMTAuNTg5MyAxMC44MjkgMTAuNjk0MUMxMC4yMjc0IDExLjEyODkgOS41NjU2NCAxMS4xMDQ4IDkuMDM1OTMgMTAuNTk1QzYuMTYyODUgNy44MzA0NiAzLjI5NTY1IDUuMDYwMjggMC40Mjk5MTEgMi4yODg2OEMtMi4yNzM5OWUtMDUgMS44NzM3MiAtMC4xMTMwMDkgMS4zNjY3IDAuMTE1ODk4IDAuODI3MTExQzAuMzQ2MjcyIDAuMjg0Njg4IDAuNzg3OTQ1IDAuMDA3MTAzNjYgMS40OTM3NCAwLjAxMTM1MjRaIiBmaWxsPSIjQzRDNEM0Ii8+Cjwvc3ZnPgo=) !important;
    background-repeat: no-repeat !important;
    background-position: center right 15px !important;
    background-size: 20px !important;
    text-overflow: ellipsis;
}

#schema-form .schema_form_field input::placeholder {
    font-style: italic;
    color: #CECECE;
}

.schema_form_field:has(> input[id="product_price"])::after,
.schema_form_field:has(> input[id="product_low_price"])::after,
.schema_form_field:has(> input[id="product_high_price"])::after {
    position: absolute;
    bottom: 10px;
    left: 10px;
    content: "$";
    font-size: 120%;
    color: #CECECE;
    pointer-events: none;
}

input#product_price,
input#product_low_price,
input#product_high_price {
    text-indent: 10px;
}

.schema_form_field > label:has(> input) {
    height: 45px;
    line-height: 45px;
}

.schema_form_repeater[data-repeater-name="organization_contacts"] .schema_form_field > label:has(> input) {
    line-height: 125%;
    display: flex !important;
    align-items: center;
    width: 100%;
}

.schema_form_field > label input {
    float: left;
    width: 20px !important;
    margin: 0 15px 0 0;
}

.schema_form_field.minimal > label:not(:first-child) {
    display: inline-block !important;
    margin-right: 20px;
    font-size: 80%;
}

.schema_form_field.minimal > label:not(:first-child) input {
    width: 16px !important;
}

.multiselect {
    position: relative;
}

.multiselect .multiselect_input_wrapper {
    position: relative;
    z-index: 2;
}

.multiselect .checkboxes {
    display: none;
    width: 100%;
    box-shadow: inset 0 0 0 1px #C4C4C4;
    border-radius: 0 0 5px 5px;
    border-top: none;
    top: 42px;
    position: absolute;
    z-index: 1;
    background: #FFFFFF;
    max-height: 120px;
    overflow-y: scroll;
}

.multiselect.expand .checkboxes {
    display: block;
}

.multiselect .checkboxes label {
    display: block;
    padding: 10px;
    cursor: pointer;
}

.multiselect .checkboxes label:nth-child(1) {
    padding-top: 14px;
}

.multiselect .checkboxes label:hover {
    background-color: #2dbdb6;
}

.multiselect .checkboxes input {
    margin-right: 5%;
}

#schema-form .field-repeater-button {
    padding: 8px 20px;
    background: #2dbdb6;
    color: #FFFFFF;
    display: inline-block;
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
    line-height: 150%;
    border-radius: 30px;
    cursor: pointer;
}

#schema-form .field-repeater-button.disable {
    pointer-events: none;
    background: #C4C4C4;
}

#schema-form .field-repeater-button:hover {
    color: #2dbdb6;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 2px #2dbdb6;
}

#schema-form .field-repeater-button::before {
    content: '+';
    position: relative;
    top: -1.5px;
    margin-right: 4px;
}

#schema-form .field-repeater-button[data-repeater="breadcrumb_page"]::before,
#schema-form .field-repeater-button[data-repeater="faq_items"]::before {
    display: none;
}


/* REFERENCE LINKS */
ul.references {
    list-style: none;
    display: flex;
    padding: 20px;
    margin-top: 20px;
}

ul.references > li {
    display: block;
    width: 50%;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 125%;
}

ul.references li ul {
    list-style: none;
    padding: 10px 0 0 0;
}

ul.references li ul li {
    line-height: 200%;
    padding: 0;
}

ul.references li ul li a {
    font-style: normal;
    font-weight: 700;
    color: #2dbdb6;
    text-decoration: none;
}

@media only screen and (max-width: 866px) {
    #schema-tabs .schema-tab {
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
    }

    #schema-tabs .schema-tab::before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -16px;
        margin-left: -16px;
    }

    #schema-wrapper {
        flex-wrap: wrap;
    }

    #schema-form {
        width: 100%;
    }

    #schema-generated {
        width: 100%;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    #schema-generated code {
        font-size: 1.1em;
    }

    #schema-generated #code-actions {
        margin: 0 0 20px 0;
    }

    /* WIDTHS */
    #schema-form .w-80 { width: 70% !important; }
    #schema-form .w-90 { width: 80% !important; }
}

/* Primal color hotfix */
#schema-tabs .schema-tab::before {
    filter: hue-rotate(305deg);
}