#central-body {

    .header-row {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    @media (min-width: 1400px) {
        .col-xl-left-modified {
            flex: 0 0 calc(50% - 42px);
            max-width: calc(50% - 42px);
            min-height: 482px;
            padding-left: calc(calc(100% - 1335px) / 2 - 18px);
        }

        .col-xl-right-modified {
            flex: 0 0 calc(50% + 42px);
            max-width: calc(50% + 42px);
            padding: 0;
        }
    }
}

#strojni-park-nav {
    & {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(15px, calc(48 / 1920 * 100vw), 48px) clamp(15px, calc(60 / 1920 * 100vw), 60px);
        margin: clamp(0px, calc(148 / 1920 * 100vw), 148px) 0 clamp(60px, calc(100 / 1920 * 100vw), 100px);
    }

    @media (min-width: 576px) {
        & {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (min-width: 992px) {
        & {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    > a {
        display: none;
    }

    .nav-item {
        appearance: none;
        border: none;
        background: var(--g-color-main-blue);
        padding: clamp(22px, calc(34 / 1920 * 100vw), 34px) clamp(28px, calc(26 / 1920 * 100vw), 26px) clamp(22px, calc(20 / 1920 * 100vw), 20px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 38px;
        text-align: center;
        cursor: pointer;
        min-height: clamp(0px, calc(264 / 1920 * 100vw), 264px);
    }


    .nav-item.is-active {
        background: var(--g-color-ligh-blue);
    }

    .img-wrapper {
        position: relative;
        width: 92px;
        height: 71PX;
    }

    .img-wrapper img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: opacity 0.25s ease-in-out;
    }

    .img-wrapper .active,
    .nav-item.is-active .img-wrapper .default {
        opacity: 1;
    }

    .nav-item.is-active .img-wrapper .active,
    .img-wrapper .default {
        opacity: 0;
    }


    .sub-title {
        color: var(--g-color-ligh-blue);
        font-size: 24px;
        margin-top: -29px;
        line-height: 1.2;
        padding-bottom: 9px;
    }

    .nav-item.is-active .sub-title {
        color: white;
    }

    .title {
        color: white;
        font-size: clamp(23px, calc(41 / 1920 * 100vw), 41px);
        font-weight: 800;
        line-height: 1;
        transition: color 0.3s ease-in-out;
    }

    @media (min-width: 1300px) {
        .title {
            font-size: clamp(25px, calc(41 / 1920 * 100vw), 41px);
        }
    }


    .nav-item:hover .title {
        color: var(--g-color-ligh-blue);

    }

    .nav-item.is-active:hover .title {
        color: white;
    }

}

#strojni-park-accordion {
    & {
        padding-right: 28px;
        padding-top: 38px;
    }

    .section-header-title {
        margin-bottom: 0;
        color: var(--g-color-2);
    }

    @media (min-width: 992px) {
        .section-header-title {
            margin-bottom: 20px;
        }
    }

    .table-header {
        color: var(--g-color-ligh-blue);
        font-size: 24px;
        font-weight: bold;
        margin-top: 50px;

        border-top: 2px solid var(--g-color-ligh-blue);
        max-width: 1200px;
        padding-top: 50px;
        position: relative;
    }

    @media (min-width: 1300px) {
        .table-header {
            margin-top: 0;
        }
    }


    .table-header:first-child {
        border-top: none;
    }

    .card {
        border: none;
        display: none;
    }

    .card.is-active {
        display: block;
    }

    @media (min-width: 1700px) {
        .card.is-active {
            overflow: visible;
        }
    }

    .accordion-collapse {
        display: none;
    }

    .card.is-active .accordion-collapse {
        display: block;
    }

    .card:not(:last-child) {
        border-bottom: 1px solid #a2d6fe;
    }

    .card-header {
        display: none;
    }

    .card-header {
        padding: 0;
        background-color: transparent;
        border: none;
    }

    .accordion-control {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0.5rem 1.5rem 0.5rem;
        background-color: #e6f8fe;
        transition: background-color 0.3s ease-in-out;
        position: relative;
        gap: 1rem;
    }

    @media (min-width: 576px) {
        .accordion-control {
            padding: 1rem 2rem 1.5rem 2rem;
        }
    }

    @media (min-width: 992px) {
        .accordion-control {
            padding: 1rem 2rem 1.5rem 2rem;
        }
    }

    .accordion-control.collapsed {
        background-color: white;
    }

    .accordion-control:after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 20px solid #e6f8fe;
        opacity: 1;
        transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
        z-index: 0;
    }

    .accordion-control.collapsed:after {
        opacity: 0;
        bottom: 5px;
    }

    .accordion-control .accordion-arrow {
        display: flex; /* pro správnou rotaci*/
        width: 20px; /* pro správnou rotaci*/
        font-size: 32px;
        position: relative;
        top: 6px;
        color: var(--g-color-1);
        transform: rotateZ(180deg);
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    }

    .accordion-control.collapsed .accordion-arrow {
        transform: rotateZ(0);
        color: var(--g-color-2);
    }

    .title-container {
        display: flex;
        align-items: center;
    }

    .accordion-control .title-container .title {
        font-weight: 500;
        font-size: 26px;
        color: var(--g-color-2);
        transition: color 0.3s ease-in-out;
    }

    @media (min-width: 576px) {
        .accordion-control .title-container .title {
            font-weight: bold;
        }
    }
    @media (min-width: 992px) {
        .accordion-control .title-container .title {
            font-size: 34px;
        }
    }

    .accordion-control.collapsed .title-container .title {
        color: var(--g-color-1);
    }

    .ico-controller {
        position: relative;
        height: 50px;
        width: 60px;
        min-width: 60px;
        margin-right: 32px;
    }

    @media (min-width: 992px) {
        .ico-controller {
            height: 50px;
            margin-right: 32px;

        }
    }

    @media (min-width: 992px) {
        .ico-controller {
            height: 60px;
            width: 80px;
            min-width: 80px;
            margin-right: 45px;
        }
    }

    .ico-controller img {
        width: 100%;
        object-fit: contain;
        object-position: center;
        height: 100%;
        position: absolute;
        left: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .accordion-control.collapsed .ico-controller img.default,
    .accordion-control .ico-controller img.active {
        opacity: 1;
    }

    .accordion-control.collapsed .ico-controller img.active,
    .accordion-control .ico-controller img.default {
        opacity: 0;
    }

    .card-body {
        padding: 0 0 5rem 0;
    }

    .strojni-park-panel-title {
        color: #47b7ff;
        font-size: 66px;
        line-height: 0.92;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.01em;
        margin: 0 0 42px;
    }
}

.strojni-park-legend {
    & {
        gap: 0.5rem;
        color: var(--g-color-2);
        padding: 1.2rem 2.2rem;
        background: rgba(var(--g-color-1-rgb), 0.1);
        border-radius: 6px;
    }

    .ico_container {
        width: 30px;
    }
}

.tabstroj, .tabmain {

    & {
        line-height: 1.4em;
        margin: 15px 0 6px 0;
        background: #FFF;
        width: 100%;
        font-size: clamp(15px, calc(19 / 1920 * 100vw), 19px);
        max-width: 1200px;
        position: relative;
    }

    @media (min-width: 992px) {
        & {
            font-size: 19px;
        }
    }


    @media (min-width: 1300px) {
        & {
            margin: 43px 0 40px 0;
        }
    }

    &:not(:last-child):after {
        content: "";
        border: 1px solid var(--g-color-ligh-blue);
        width: 100%;
        bottom: -30px;
        position: absolute;
        left: 0;
    }

    a {
        font-size: 0.9em;
        color: #004677;
        white-space: nowrap;
        text-decoration: none;
        border-bottom: none;
        background: none;
    }

    thead th {
        white-space: nowrap;
    }

    thead th,
    thead td {
        padding: clamp(0px, calc(23 / 1920 * 100vw), 23px) clamp(0px, calc(45 / 1920 * 100vw), 45px);
        text-align: left;
        color: #FFF;
        font-weight: normal;
        /* border:1px solid #fff; */
        border-bottom: 1px solid #fff;
        background: var(--g-color-2);
        background: -moz-linear-gradient(center bottom, #0a75e2 2%, #1763b0 87%);
        font-size: clamp(15px, calc(19 / 1920 * 100vw), 19px);
    }

    @media (min-width: 992px) {
        thead th,
        thead td {
            font-size: 19px;
        }
    }

    thead th:empty {
        background: transparent;
        border: none;
    }

    tbody th {
        color: black;
        padding: clamp(0px, calc(28 / 1920 * 100vw), 28px) clamp(20px, calc(35 / 1920 * 100vw), 35px);
        text-align: left;
        font-weight: bold;
    }

    @media (min-width: 992px) {
        tbody th {
            padding: clamp(0px, calc(28 / 1920 * 100vw), 28px) clamp(0px, calc(35 / 1920 * 100vw), 35px);
        }
    }

    thead th.th1 {
        min-width: clamp(226px, calc(418 / 1920 * 100vw), 418px);
    }

    @media (min-width: 992px) {
        thead th.th1 {
            width: clamp(386px, calc(418 / 1920 * 100vw), 418px);
            min-width: clamp(386px, calc(418 / 1920 * 100vw), 418px);
        }
    }

    thead th.th2 {
        width: 15px;
        min-width: 15px;
    }

    thead th.th3 {
        width: auto;
        padding-left: 26px;
    }

    thead th.th4 {
        width: clamp(140px, calc(186 / 1920 * 100vw), 186px);
        min-width: clamp(140px, calc(186 / 1920 * 100vw), 186px);
        text-align: left;
        padding-left: 0;
    }

    @media (min-width: 992px) {
        thead th.th4 {
            width: 186px;
            min-width: 186px;
        }
    }

    thead th.th5 {
        width: 55px;
        min-width: 55px;
    }

    tbody td {
        padding: clamp(8px, calc(28 / 1920 * 100vw), 28px) clamp(10px, calc(35 / 1920 * 100vw), 35px);
        text-align: left;
        font-weight: 600;
    }

    @media (min-width: 992px) {
        tbody td {
            padding: clamp(20px, calc(28 / 1920 * 100vw), 28px) clamp(10px, calc(35 / 1920 * 100vw), 35px);
        }
    }

    tbody td:nth-child(2) {
        text-align: center;
    }

    tbody td:nth-child(3) {
        padding-left: 26px;
        line-height: 1.3;
    }

    tbody td:nth-child(4) {
        padding: clamp(15px, calc(28 / 1920 * 100vw), 28px) 0 clamp(15px, calc(28 / 1920 * 100vw), 28px) clamp(15px, calc(21 / 1920 * 100vw), 21px);
        text-align: center;
        display: flex;
        gap: 23px;
        justify-content: flex-start;
    }

    @media (min-width: 992px) {
        tbody td:nth-child(4) {
            padding: 28px 0 28px 21px;
        }
    }

    tbody tr,
    tbody tr th {
        cursor: default;
        transition: background-color 0.3s ease-in-out;
    }

    tbody tr:nth-of-type(odd) {
        background-color: #f8f8f8;
    }

    tbody tr:nth-of-type(even) {
        background-color: #f0eeef;
    }


    tbody tr:nth-of-type(even):hover,
    tbody tr:nth-of-type(odd):hover {
        background-color: #d1cccf;
    }

    .ico_foto {
        margin-right: 4px;
    }

    tbody tr:nth-of-type(even):hover th,
    tbody tr:nth-of-type(odd):hover th {
        background-color: #d1cccf;
    }
}




#strojni-park-accordion .table-header {
    position: relative;
}

@media (min-width: 768px) and (max-width: 1699px) {
    #strojni-park-accordion .table-header:before {
        content: "";
        position: absolute;
        width: 300px;
        height: 24px;
        background-image: url(/_data/styly/svg/drill.svg);
        top: 52px;
        right: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }
}

@media (min-width: 1700px) {
    #strojni-park-accordion .tabulkascroll{
        position: relative;
    }
    #strojni-park-accordion .tabulkascroll:before {
        content: "";
        position: absolute;
        width: 300px;
        height: 24px;
        background-image: url(/_data/styly/svg/drill.svg);
        top: 15px;
        right: calc(calc(100vw - 100%) / 2 * -1);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: right;
    }
}

table.tabmain {
    tbody th {
        border-right: 1px solid #fff;
        background-color: var(--g-color-1);
        padding-top: 45px;
        padding-bottom: 20px;
        position: relative;
        padding-left: 12px;
        font-weight: 600;
        color: white;
    }

    tbody th:after {
        content: "";
        top: 0;
        position: absolute;
        width: 100%;
        height: 28px;
        left: 0;
        background: white;
    }

    tbody th:before {
        content: "";
        bottom: 0;
        position: absolute;
        width: 100%;
        height: 5px;
        left: 0;
        background: white;
    }

}

/*Scroll na tabulkách ve wysiwig - .tabulkascroll se přidává v plugins.js*/

@media (max-width: 1299px) {
    .tabulkascroll {
        overflow-x: auto;
        white-space: nowrap;
    }

    .tabulkascroll::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
    }

    .tabulkascroll::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 1px solid #fff;
        background-color: rgba(0, 0, 0, .5);
    }
}

.strojni-park-nav-separator{
    position: relative;
}
.strojni-park-nav-separator:after {
    content: "";
    position: absolute;
    z-index: 9;
    bottom: 0;
    width: 100%;
    height: clamp(18px, calc(28 / 1920 * 100vw), 28px);
    background: url('/_data/styly/zakoturcin/img/web/strojni-park-ruller.webp') center;
    background-size: cover;
    background-repeat: no-repeat;
}