/* Base */
.top-content-right-section {
    background: transparent radial-gradient(closest-side at 50% 77%, #5b6675, #5a6574 0%, #2d3541) 0% 0% no-repeat padding-box;
}
.warranty-section-title { margin: 0 50px 50px; width: calc(100% - 100px); font-size: 50px; font-weight: 700; font-family: Comfortaa; text-align: center; }

/* Header */
.warranty-header-container {
    position: relative;
    display: flex;
    padding-top: 10em;
    padding-bottom: 5em;
    color: #FFF;
    font-family: Comfortaa;
    gap: 125px;
    z-index: 100;
}
.warranty-header-picture { }
.warranty-header-image { display: block; width: 600px; height: unset; }
.warranty-header-content { }
.warranty-header-title { margin: 0; font-size: 50px; font-weight: 700; }
.warranty-header-logo { display: block; margin-bottom: 50px; width: 250px; fill: #FFF; }
.warranty-header-subtitle { margin: 0 0 50px; font-size: 20px; font-weight: 400; }
.warranty-header-abstract { margin-bottom: 75px; font-size: 20px; line-height: 2em; font-weight: 400; }
.warranty-header-abstract-highlight { margin: 0 5px; padding: 5px; font-weight: 400; background: #0057A5; }
.warranty-header-button { display: inline-block; padding: 25px 125px; font-size: 20px; font-weight: 700; border: 1px solid #0057A5; border-radius: 10px; transition: .25s background; cursor: pointer; user-select: none; }

@media (pointer: fine) {
    .warranty-header-button:hover { background: #0057A5; }
}

/* Summary */
.warranty-summary-container { position: relative; padding: 75px 150px; color: #303030; background: linear-gradient(90deg, #002C53, #0057A5); }
.warranty-summary-background-logo { position: absolute; top: 0; right: 0; width: 450px; fill: #FFF; aspect-ratio: 1; opacity: .02; }
.warranty-summary-logo { display: block; margin: 0 auto; width: 300px; fill: #FFF; }
.warranty-summary-title { margin: 45px; color: #FFF; font-size: 50px; font-weight: 700; font-family: Comfortaa; text-align: center; }
.warranty-summary-warranties-container { display: flex; gap: 45px; }
.warranty-summary-warranty-container { display: flex; width: calc(25% - (45px * 3 / 4)); background: #FFF; border-radius: 20px; flex-direction: column; }
.warranty-summary-warranty-header { display: flex; padding: 25px 35px; border-bottom: 1px solid #e4e4e4; justify-content: space-between; align-items: center; }
.warranty-summary-warranty-title { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: .25px; }
.warranty-summary-warranty-header-icon { display: block; width: 30px; fill: #58cca7; aspect-ratio: 1; cursor: pointer; user-select: none; }
.warranty-summary-warranty-abstract { padding: 35px; font-size: 18px; }
.warranty-summary-warranty-requirements { margin-top: auto; padding: 35px; border-top: 1px solid #e4e4e4; }
.warranty-summary-warranty-requirement { margin-top: 25px; }
.warranty-summary-warranty-requirement:first-child { margin-top: 0; }
.warranty-summary-warranty-requirement-title { font-size: 18px; }
.warranty-summary-warranty-requirement-value { margin-left: 15px; font-size: 18px; font-weight: 700; }
.warranty-summary-warranty-button { margin: 0 auto 25px; padding: 20px; width: calc(100% - (35px * 2) - (20px * 2)); color: #FFF; font-size: 20px; text-align: center; background: #ED8935; border-radius: 10px; transition: .25s filter; cursor: pointer; user-select: none; }

@media (pointer: fine) {
    .warranty-summary-warranty-button:hover { filter: brightness(150%); }
}


/* Content */
.position-content-wrapper { display: flex; padding: 75px 150px; color: #303030; background: #F3F3F3; gap: 35px; flex-wrap: wrap; }
.position-content-paragraph { width: 100%; }
.position-content-paragraph.container-width-2 { width: calc(50% - (35px / 2)); }
.position-content-paragraph-content { }
.position-content-paragraph-title { margin-bottom: 25px; font-size: 30px; line-height: 1.5em; letter-spacing: .25px; font-weight: 700; }
.position-content-paragraph-title::before { content: ''; display: inline-block; margin-right: 25px; width: 25px; height: 25px; background: #ED8935; }
.position-content-paragraph-title b { color: #ED8935; font-weight: 700; }
.position-content-paragraph-abstract { font-size: 25px; line-height: 1.75em; letter-spacing: .25px; }
.position-content-paragraph-abstract b { color: #ED8935; font-weight: 700; }
.position-content-paragraph-abstract table { margin: 50px 0; width: 100%; border-collapse: collapse; }
.position-content-paragraph-abstract tbody { width: 100%; }
.position-content-paragraph-abstract table.columns-2 > tbody { display: flex; flex-wrap: wrap; }
.position-content-paragraph-abstract table.columns-2 > tbody > tr { display: flex; width: 50%; }
.position-content-paragraph-abstract table.columns-2 > tbody > tr > td { width: 50%; }
.position-content-paragraph-abstract table > tbody > tr { }
.position-content-paragraph-abstract table > tbody > tr > td { padding: 15px; vertical-align: unset; }
.position-content-paragraph-abstract ol,
.position-content-paragraph-abstract ul { margin: 50px 0; }
.position-content-paragraph-abstract ol.columns-2,
.position-content-paragraph-abstract ul.columns-2 { column-count: 2; column-gap: 100px; }
.position-content-paragraph-abstract ol.no-style,
.position-content-paragraph-abstract ul.no-style { margin: 50px 0; padding: 0; list-style: none; }
.position-content-paragraph-abstract li { margin-bottom: 15px; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-25 { gap: 25px; }

/* Comparator */
.warranty-comparator-container { padding: 125px; color: #303030; background: #FFF; }
.warranty-comparator-wrapper { font-size: 20px; line-height: 30px; text-align: center; }
.warranty-comparator-header-container { display: flex; }
.warranty-comparator-header-warranty { padding: 35px; width: 20%; font-size: 28px; line-height: 1em; letter-spacing: .25px; font-weight: 500; }
.warranty-comparator-component-group-container { position: relative; display: flex; border-block: 1px solid #DFDFDF; }
.warranty-comparator-component-group-container:nth-child(even) { background: #F3F3F3; }
.warranty-comparator-component-group-container.accordion { cursor: pointer; user-select: none; }
.warranty-comparator-component-group-container.complete { cursor: pointer; user-select: none; }
.warranty-comparator-component-group-container.accordion::before { content: ''; position: absolute; display: block; bottom: 0; left: 20%; width: 80%; height: 75px; background: linear-gradient(0, #FFF, transparent); }
.warranty-comparator-component-group-container.accordion:nth-child(even)::before { background: linear-gradient(0, #F4F4F4, transparent); }
.warranty-comparator-component-group-container.accordion::after { content: ''; position: absolute; display: block; bottom: 25px; left: calc(60% - 15px); width: 30px; height: 30px; background: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20stroke%3D%22%23e95a0b%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%20viewBox%3D%220%200%2025.36%2025.359%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.984%201.5h17.391a2.484%202.484%200%200%201%202.485%202.484v17.391a2.484%202.484%200%200%201-2.484%202.484h-17.392a2.484%202.484%200%200%201-2.484-2.484v-17.391a2.484%202.484%200%200%201%202.484-2.484z%22%2F%3E%3Cpath%20d%3D%22m12.68%207.711v9.938%22%2F%3E%3Cpath%20d%3D%22m7.711%2012.68h9.938%22%2F%3E%3C%2Fsvg%3E) 0 0 / 30px 30px no-repeat; }
.warranty-comparator-component-group-container.complete::after { content: ''; position: absolute; display: block; bottom: 25px; left: calc(60% - 15px); width: 30px; height: 30px; background: url(data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20stroke%3D%22%23e95a0b%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%223%22%20viewBox%3D%220%200%2025.36%2025.359%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m3.984%201.5h17.391a2.484%202.484%200%200%201%202.485%202.484v17.391a2.484%202.484%200%200%201-2.484%202.484h-17.392a2.484%202.484%200%200%201-2.484-2.484v-17.391a2.484%202.484%200%200%201%202.484-2.484z%22%2F%3E%3Cpath%20d%3D%22m7.711%2012.68h9.938%22%2F%3E%3C%2Fsvg%3E) 0 0 / 30px 30px no-repeat; }
.warranty-comparator-component-group-wrapper { display: flex; padding: 15px 25px; width: 20%; text-align: left; background: #FFF; }
.warranty-comparator-group-icon { display: block; margin-right: 15px; padding: 5px; width: 30px; height: 30px; fill: #FFF; background: #e95a0b; }
.warranty-comparator-components-container { width: 80%; }
.warranty-comparator-component-container { display: flex; }
.warranty-comparator-component-group-container.accordion > .warranty-comparator-components-container > .warranty-comparator-component-container:not(:nth-child(-n + 2)) { display: none; }
.warranty-comparator-component { padding: 10px 15px; width: 25%; border-inline: 1px solid #DFDFDF; }
.warranty-comparator-component.full-width { width: 100%; }


.form-container.warranty-list-page {
    display: none;
}

@media (max-width: 768px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }
    thead tr { position: absolute; left: -9999px; top: -9999px; }
    tr { margin-bottom: 1rem; border: 1px solid #ccc; }
    td {
      width: 100%; padding: 0.5rem; position: relative; 
      border-bottom: 1px solid #eee;
    }

    .warranty-header-container {
        margin: 0;
        padding: 0;
        display: block;
    }

    .warranty-header-image {
        width: 400px;
        padding-top: 100px;
    }

    .warranty-header-content {
        padding: 50px
    }

    .warranty-summary-container {
        padding: 50px
    }

    .warranty-summary-warranties-container {
        display: block;        
    }

    .warranty-summary-warranty-container {
        width: 100%;
        margin-bottom: 30px;
    }

    .position-content-wrapper.warranty-list-page { 
        padding: 50px 0px 0px 0px; 
        display: block;
    }

    .position-content-paragraph.container-width-2 {
        padding: 20px;
        width: 100%;
    }

    .position-content-paragraph {
        padding: 20px;
        width: 100%;
    }

    .position-content-paragraph-abstract ol.columns-2, .position-content-paragraph-abstract ul.columns-2 {
        column-count: 1;
        padding: 20px;
    }

    .position-content-paragraph-abstract table.columns-2 > tbody {
        display: block;
    }

    .position-content-paragraph-abstract table.columns-2 > tbody > tr {
        width: 100%;
    }

    .warranty-comparator-container {
        padding: 20px;
        overflow-x: auto;
        display: grid;

    }

    .warranty-section-title {
        text-align: left;
    }
  
  }