/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

main .accordion > .overlay-content {
    /* display: none;*/
}

main *[class*="accordion-set"],
main .overlay-content.accordion-set {
    opacity: 1;
    display: block;
    transition: opacity 300ms;
}


    main *[class*="accordion-set"] *[class*="accordion-holder-closed"] > :not([class*="accordion-title"]) {
        display: none;
    }

    main *[class*="accordion-set"] *[class*="accordion-holder-open"] > :not([class*="accordion-title"]) {
        opacity: 1;
        display: block;
        margin: 0px 25px 8px 25px;
    }

    main *[class*="accordion-set"] *[class*="accordion-holder-open"] ul:not([class*="accordion-title"]) {
        margin: 8px 50px;
    }

    main *[class*="accordion-set"] *[class*="accordion-holder-open"] input:not([class*="accordion-title"]) {
        min-width: 50%;
        padding: 8px;
        border-radius: var(--border-radius-small);
    }

.accordion-title {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
}

li.accordion-title {
    display: revert;
    font-weight: bold;
    font-size: var(--font-size-ibp-title);
}

    li.accordion-title::marker {
        color: inherit;
    }

p.accordion-title {
    font-weight: 800;
    font-size: var(--font-size-large);
    grid-template-columns: 1fr;
}

[class*='accordion'] p.accordion-title {
    width: calc(100% - 80px);
}

main *[class*="accordion-set"] *[class*="-right"] .accordion-title {
    grid-template-columns: 44px 1fr 44px;
}

.accordion-left-icon, .accordion-right-icon {
    text-align: center;
}

.accordion-left-icon {
    display: none;
}

.accordion-right-icon {
    transform: rotateZ(0deg);
    transition: transform var(--transition-time) ease-in-out;
}

details[open] .accordion-right-icon {
    transform: rotateZ(90deg);
    transition: transform var(--transition-time) ease-in-out;
}

details[open] summary {
    transition: background-color var(--transition-time) ease-in-out;
}

main *[class*="accordion-set"] *[class*="-right"] .accordion-right-icon {
    display: block;
}

details {
    margin: 10px;
    margin-top: 0px;
    width: calc(100% - 20px);
}

summary {
    display: grid;
    grid-template-columns: 1fr 30px;
    background-color: var(--primary);
    color: var(--primary-text);
    font-weight: bold;
    padding: 10px;
    cursor: pointer;
    list-style-type: none !important;
}


details summary > * {
    display: inline;
}

summary::marker,
summary::-webkit-details-marker {
    display: none;
}


details > *:not(summary) {
    padding: 10px 20px;
    margin: auto;
    margin-bottom: 5px;
}

details > table {
    margin: 15px 20px;
    width: calc(100% - 40px);
}

details > ul, details > ol {
    padding-left: 25px;
    width: calc(100% - 30px);
}

/*----------------------------------------
   DEFAULT STYLE
*/

details summary {
    padding: 20px;
}

details[open] summary {
    margin-bottom: 8px;
}

*[id*="box"][class*='stock-'] .accordion .overlay-content, *[id*="box"][class*='stock-'] .accordion .overlay-content *:not(.visually-hidden) {
    color: var(--white-text);
}

details[open] {
    border: solid 1px var(--gray);
    background-color: var(--white);
    color: var(--white-text);
    display: inline-block;
    width: calc(100% - 20px);
}

details summary {
    /* display: grid;
    grid-template-columns: 1fr 30px;*/
}

    details summary * {
        font-weight: bold;
    }

details[open] summary .accordion-left-icon i:before {
    content: "\f0d7";
}

.arrow-right details summary {
    grid-template-columns: 1fr 30px;
}

    .arrow-right details summary .accordion-left-icon {
        display: none
    }

    .arrow-right details summary .accordion-right-icon {
        display: block
    }

.arrow-right details[open] summary .accordion-right-icon i:before {
    content: "\f0d8";
}

.arrow-right details summary::marker {
    display: none;
}

/*-----------------------
    COLOR Style
*/

main [class*="accordion"] summary:focus, main [class*="accordion"] summary:active, main [class*="accordion"] summary:hover {
    outline: solid 1px var(--orange);
}

/*---------------------------------------------------
    TABBED CONTENT
*/

[class*="tab-content"] .overlay-content {
    display: grid;
    grid-template-columns: 1fr;
    height: fit-content;
}

[class*="tab-content"].vertical .overlay-content {
    display: grid;
    grid-template-columns: auto 1fr;
}

[class*="tab-content"].vertical.small-content .overlay-content,
.mobile .tab-content.vertical .overlay-content {
    display: grid;
    grid-template-columns: 1fr;
}

[class*="tab-content"].vertical .before-section {
    grid-column: span 2;
}

.tabbed-content-buttons-section {
    border-bottom: solid 6px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    border-color: var(--warm-gray);
    display: inline-flex;
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
}

[class*="tab-content"].vertical .tabbed-content-buttons-section {
    display: flex;
    flex-direction: column;
    justify-content: start;
    border-bottom: none;
    /* border-right: solid 6px;
    border-color: var(--warm-gray);*/
    margin-left: 0px;
    margin-right: 0px;
    width: fit-content;
}

.tabbed-content-buttons-section button {
    padding: 15px;
    margin: 0px 4px;
    border: 0px;
    font-size: var(--font-size);
    border: solid 1px var(--gray);
    border-bottom: 0px;
}

    .tabbed-content-buttons-section button:not(.active) {
        background-color: var(--cloud) !important;
        color: var(--cloud-text) !important;
    }

    .tabbed-content-buttons-section button:hover:not(.active) {
        background-color: var(--orange-hover) !important;
        color: var(--orange-text) !important;
    }

    .tabbed-content-buttons-section button.active {
        border-color: var(--warm-gray);
        background-color: var(--warm-gray);
        color: var(--warm-gray-text);
        border-width: 1px;
        border-style: solid;
        border-bottom: 0px;
    }

    .tabbed-content-buttons-section button:first-child {
        margin-left: 0px;
    }

    .tabbed-content-buttons-section button:last-child {
        margin-right: 0px;
    }

[class*="tab-content"].vertical .tabbed-content-buttons-section button {
    border-bottom: 1px;
    display: block;
    width: 95%;
    margin: 0px;
    margin-bottom: 8px;
    border: solid 1px var(--gray);
    /*border-right: 0px;*/
}

    [class*="tab-content"].vertical .tabbed-content-buttons-section button.active {
        border-bottom: solid 1px;
        border-right: 0px;
        border-color: var(--warm-gray);
        width: 100%;
    }


.tabbed-content-buttons-section button:hover {
    cursor: pointer;
}

[class*="tab-content"] .details-section details {
    border: 0px;
    margin-bottom: 0px;
    min-height: 14vh;
}

    [class*="tab-content"] .details-section details summary {
        display: none;
    }



[class*="tab-content"].small-content .details-section {
    border: none;
}

[class*="tab-content"].small-content .tab-content .details-section, .mobile .tab-content .details-section {
    border: none;
}

[class*="tab-content"].small-content .tabbed-content-buttons-section,
.mobile .tabbed-content-buttons-section {
    display: none;
}

[class*="tab-content"].small-content .details-section details,
.mobile .tab-content .details-section details {
    border: solid 1px;
    margin: 0px;
    margin-bottom: 10px;
    width: 100%;
}

/*-------------------------------
    mobile / small content
*/
.small-content [class*="tab-content"] .details-section details,
.mobile [class*="tab-content"] .details-section details {
    margin: 0px;
    margin-bottom: 15px;
    width: 100%;
}

    .small-content [class*="tab-content"] .details-section details summary,
    .tablet-small [class*="tab-content"] .details-section details summary,
    .mobile [class*="tab-content"] .details-section details summary {
        display: grid;
        grid-template-columns: 1fr 30px;
    }

/*------------------------------------
    making details open and close smoothly
*/

.accordion-smooth details::details-content {
    block-size: 0;
    transition: block-size 1s;
    transition-behavior: allow-discrete;
}

.accordion-smooth details {
    overflow: hidden;
}

    .accordion-smooth details[open]::details-content {
        block-size: auto;
    }

    .accordion-smooth details > div, .accordion-smooth details > p {
        padding-block: 1rem;
    }

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+              END OF STANDARD STYLES YOU ARE                                         +
+     USE THE MY STYLE OVERRIDE CSS FILE TO ADJUST STYLES AS NEEDED                   +
+     PLEASE MAINTAIN YOUR SITE NAVIGATION SECTION IN THE MY NAVIGATION CSS FILE      +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/