﻿.dwt-features header { background: #f5f5f5; padding-top: 50px; padding-bottom: 60px; }
    .dwt-features header h1 { width: 750px; margin: 0 auto; max-width: 100%; }
    .dwt-features header .try-download-btn { margin-top: 50px; }
        .dwt-features header .try-download-btn .orange-btn { height: 46px; line-height: 46px; padding: 0 30px; font-size: 18px; margin-right: 40px; }
        .dwt-features header .try-download-btn .orange-border-btn { height: 46px; line-height: 42px; padding: 0 30px; font-size: 18px; }


.dwt-features main .h3 { font-weight: normal; width: 100%; }
.dwt-features main .try-download-btn a:last-child { margin-left: 20px; }

.dwt-features main table.support-table, .dwt-features main table.technical-table { width: 100%; border-collapse: unset; border-spacing: 0; }
    .dwt-features main table.support-table.support-table-mobile { display: none; }
    .dwt-features main table.support-table th { border: 1px solid #707070; border-bottom: 0; font-size: 20px; padding: 10px 36px; background: #323234; color: white; font-weight: normal; /*text-transform: uppercase;*/ font-family: 'Oswald-Regular'; border-right: 0; }
    .dwt-features main table.support-table td { border: 1px solid #707070; padding: 22px 44px; border-bottom: 0; }
    .dwt-features main table.support-table th:nth-child(1) { width: 265px; }
    .dwt-features main table.support-table th:nth-child(2) { width: 295px; }
    .dwt-features main table.support-table th:nth-child(3) { width: 480px; }
    .dwt-features main table.support-table th:nth-child(4) { width: 290px; }
    .dwt-features main table.support-table tr:last-child td { border-bottom: 1px solid #707070; }
    .dwt-features main table.support-table:not(.support-table-mobile) tr td:first-child { border-right: 0; }

    .dwt-features main table.support-table td:nth-child(1) { padding: 21px 40px; }
    .dwt-features main table.support-table td:nth-child(2), .dwt-features main table.support-table td.sndDesc { font-size: 16px; line-height: 22px; }
        .dwt-features main table.support-table td:nth-child(2) li, .dwt-features main table.support-table td:nth-child(2) p { font-size: inherit; line-height: normal; }
    .dwt-features main table.support-table td:nth-child(n+3) { text-align: center; padding: 10px; border-right: none; border-left: none; }
        .dwt-features main table.support-table td:nth-child(n+3) p { font-size: 14px; line-height: 26px; }
    .dwt-features main table.support-table td:nth-child(8) p { font-size: 16px; }
        .dwt-features main table.support-table td:nth-child(8) p:first-child { margin-top: 70px; height: auto; }
    .dwt-features main table.support-table td:nth-child(9) p:first-child { margin-top: 70px; }
    .dwt-features main table.support-table td:nth-child(8) p:last-child { margin-top: 20px; }
    .dwt-features main table.support-table td:nth-child(9) p:last-child { margin-top: 16px; }
    .dwt-features main table.support-table td:nth-child(8) p:last-child i:not(:last-child) { margin-right: 20px; }
    .dwt-features main table.support-table td .title { font-family: 'Oswald-Regular'; font-size: 20px; margin-bottom: 0px; }
    .dwt-features main table.support-table td .detail, .dwt-features main table.support-table td:last-child p { font-size: 16px; line-height: 30px; }

    .dwt-features main table.support-table td .tags { display: flex; gap: 18px; margin-bottom: 10px; flex-wrap: wrap; }
        .dwt-features main table.support-table td .tags li p { text-align: center; display: block; width: auto; color: white; background-color: #999999; padding: 2px 5px; }


.dwt-features main .technical table { width: 100%; background-color: #F5F5F5; }
    .dwt-features main .technical table th { background-color: white; }
    .dwt-features main .technical table td { border: 1px solid #707070; font-size: 18px; padding: 10px 25px; }
        .dwt-features main .technical table td:last-child { width: 230px; }
        .dwt-features main .technical table td:nth-child(n+2) { text-align: center; }
    .dwt-features main .technical table tr.technical-title td { border: 1px solid #707070; font-size: 18px; padding: 10px 25px; background: #323234; color: white; font-weight: normal; /*text-transform: uppercase;*/ font-family: 'Oswald-Regular'; }
    .dwt-features main .technical table th.devices { font-weight: normal; font-size: 18px; font-family: Oswald-Regular; width: 230px; text-align: center; border-right: 1px solid #707070; }
        .dwt-features main .technical table th.devices > div { border: 1px solid #707070; border-bottom: 0; border-right: 0; padding: 10px 25px; margin: -1px; }

.dwt-features main .productivity-list { display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; grid-gap: 30px 150px; }
.dwt-features main .productivity p { font-size: 16px; line-height: 1.5; }
.dwt-features main .productivity .productivity-title { font-size: 24px; line-height: 26px; }

i.vue { display: inline-block; width: 40px; height: 40px; background: url(../../images/icons/vue.svg) no-repeat center; background-size: contain; }
i.angular { display: inline-block; width: 40px; height: 40px; background: url(../../images/icons/angular.svg) no-repeat center; background-size: contain; }
i.react { display: inline-block; width: 40px; height: 40px; background: url(../../images/icons/react-grey.svg) no-repeat center; background-size: contain; }

/* other */
table .hide-sm, table .hide-md { display: table-cell; }
.dwt-features main .technical ul li { list-style: disc; margin-left: 20px; margin-top: 10px; }

/* dwt features */
.dwt-features .remoteScan { height: 280px; width: 100%; background-color: #F5F5F5; display: flex; align-items: center; }
    .dwt-features .remoteScan p { text-align: center; margin: 24px 0 0 0; width: 64%; margin-left: auto; margin-right: auto; }

.puzzleDiv { display: flex; justify-content: center; align-items: stretch; gap: 6px; position: relative; z-index: 0; }
    .puzzleDiv .puzzleCard { position: relative; box-sizing: border-box; color: white; display: flex; flex-direction: column; }
        .puzzleDiv .puzzleCard.left { flex: 1; background-color: #306877; padding: 45px 0 45px 90px; z-index: 2; }
        .puzzleDiv .puzzleCard.center { width: 412px; background-color: #323234; text-align: center; font-size: 30px; justify-content: center; }
        .puzzleDiv .puzzleCard.right { flex: 1; background-color: #59626A; padding: 45px 0 45px 90px; z-index: 2; }
        .puzzleDiv .puzzleCard .icon { display: inline-block; width: 72px; height: 72px; border: 2px solid #323234; background: #FFFFFF; padding: 13px; }
        .puzzleDiv .puzzleCard h3 { margin: 25px 0 20px; color: #FFFFFF; font-size: 24px; }
        .puzzleDiv .puzzleCard p { color: #FFFFFF; font-size: 16px; }
        .puzzleDiv .puzzleCard.left p { width: 380px; }
        .puzzleDiv .puzzleCard.right p { width: 380px; }
        .puzzleDiv .puzzleCard .link { margin-top: 20px; color: #FEA543; text-decoration: none; font-size: 18px; }
        .puzzleDiv .puzzleCard .puzzleAngleLeft { position: absolute; left: -32px; bottom: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #306877; border: 6px solid #FFFFFF; z-index: 1; }
        .puzzleDiv .puzzleCard .puzzleAngleRight { position: absolute; right: -32px; top: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #59626A; border: 6px solid #FFFFFF; z-index: 1; }

.dwt-features main .banner { padding: 80px 0; background-color: #f5f5f5; }

@media (max-width: 1679px) {
    .dwt-features main .productivity-list { grid-gap: 30px 100px; }

    .dwt-features main table.support-table th { font-size: 16px; padding: 12px 20px; }
    .dwt-features main table.support-table td { padding: 9px 24px; }
        .dwt-features main table.support-table td:nth-child(1) { padding: 10px 20px; }
        .dwt-features main table.support-table td .tags { grid-gap: 8px; }
        .dwt-features main table.support-table td:nth-child(2), .dwt-features main table.support-table td.sndDesc { font-size: 14px; line-height: 24px; }
        .dwt-features main table.support-table td:nth-child(n+3) { padding: 10px 20px; }
            .dwt-features main table.support-table td:nth-child(n+3) p { font-size: 12px; line-height: 15px; margin-bottom: 0; height: 30px; }
        .dwt-features main table.support-table td:nth-child(8) p { font-size: 14px; line-height: 20px; }
        .dwt-features main table.support-table td .detail, .dwt-features main table.support-table td:last-child p { font-size: 14px; line-height: 24px; }
            .dwt-features main table.support-table td:last-child p i { margin: 0; }
    .dwt-features main .technical table td { font-size: 14px; }
    .dwt-features main .technical table th.devices { font-size: 16px; width: 180px; }
        .dwt-features main .technical table th.devices > div { padding: 10px 15px; }

    i.vue, i.angular, i.react { width: 30px; height: 30px; }
    .dwt-features main table.support-table td:nth-child(8) p:last-child i:not(:last-child) { margin-right: 12px; }

    .dwt-features main .productivity .productivity-title { font-size: 20px; line-height: 24px; }
    .f24 { font-size: 20px; }
    .dwt-features main table.support-table td .title { font-size: 18px; }
    .dwt-features main table.support-table th:nth-child(1) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(2) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(3) { width: 30%; }
    .dwt-features main table.support-table th:nth-child(4) { width: 15%; }
    .dwt-features main table.support-table th:nth-child(5) { width: 15%; }

    .puzzleDiv .puzzleCard.left { flex: 1; background-color: #306877; padding: 45px 0 45px 40px; z-index: 2; }
    .puzzleDiv .puzzleCard.center { width: 350px; background-color: #323234; text-align: center; font-size: 26px; justify-content: center; }
    .puzzleDiv .puzzleCard.right { flex: 1; background-color: #59626A; padding: 45px 0 45px 40px; z-index: 2; }
    .puzzleDiv .puzzleCard .icon { display: inline-block; width: 72px; height: 72px; border: 2px solid #323234; background: #FFFFFF; padding: 13px; }
    .puzzleDiv .puzzleCard h3 { margin: 25px 0 20px; color: #FFFFFF; font-size: 22px; }
    .puzzleDiv .puzzleCard p { color: #FFFFFF; font-size: 16px; }
    .puzzleDiv .puzzleCard.left p { width: 380px; }
    .puzzleDiv .puzzleCard.right p { width: 330px; }
    .puzzleDiv .puzzleCard .link { margin-top: 20px; color: #FEA543; text-decoration: none; font-size: 18px; }
    .puzzleDiv .puzzleCard .puzzleAngleLeft { position: absolute; left: -32px; bottom: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #306877; border: 6px solid #FFFFFF; z-index: 1; }
    .puzzleDiv .puzzleCard .puzzleAngleRight { position: absolute; right: -32px; top: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #59626A; border: 6px solid #FFFFFF; z-index: 1; }
}

@media (max-width: 1399px) {
    .dwt-features main .banner { padding: 60px 0; }

    .dwt-features main .productivity-list { grid-gap: 30px 80px; }

    .puzzleDiv .puzzleCard.left { flex: 1; background-color: #306877; padding: 45px 0 45px 40px; z-index: 2; }
    .puzzleDiv .puzzleCard.center { width: 300px; background-color: #323234; text-align: center; font-size: 24px; justify-content: center; }
    .puzzleDiv .puzzleCard.right { flex: 1; background-color: #59626A; padding: 45px 0 45px 40px; z-index: 2; }
    .puzzleDiv .puzzleCard .icon { display: inline-block; width: 72px; height: 72px; border: 2px solid #323234; background: #FFFFFF; padding: 13px; }
    .puzzleDiv .puzzleCard h3 { margin: 25px 0 20px; color: #FFFFFF; font-size: 22px; }
    .puzzleDiv .puzzleCard p { color: #FFFFFF; font-size: 16px; }
    .puzzleDiv .puzzleCard.left p { width: 350px; }
    .puzzleDiv .puzzleCard.right p { width: 300px; }
    .puzzleDiv .puzzleCard .link { margin-top: 20px; color: #FEA543; text-decoration: none; font-size: 16px; }
    .puzzleDiv .puzzleCard .puzzleAngleLeft { position: absolute; left: -32px; bottom: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #306877; border: 6px solid #FFFFFF; z-index: 1; }
    .puzzleDiv .puzzleCard .puzzleAngleRight { position: absolute; right: -32px; top: 65px; width: 96px; height: 96px; border-radius: 50%; background-color: #59626A; border: 6px solid #FFFFFF; z-index: 1; }
}


@media (max-width: 1199px) {
    .dwt-features main table.support-table td .tags li p { width: auto; text-align: center; }

    .dwt-features main table.support-table td:nth-child(n+3) { padding: 10px 10px; }
    .dwt-features main .productivity .productivity-title { font-size: 18px; }

    /*.puzzleDiv { display: flex; justify-content: center; align-items: stretch; gap: 6px; position: relative; z-index: 0; flex-direction: column; }*/
    .puzzleDiv .puzzleCard.left { flex: 1; background-color: #306877; padding: 25px 0 25px 30px; z-index: 2; }
    .puzzleDiv .puzzleCard.center { width: 250px; background-color: #323234; text-align: center; font-size: 24px; justify-content: center; }
    .puzzleDiv .puzzleCard.right { flex: 1; background-color: #59626A; padding: 25px 0 25px 30px; z-index: 2; }
    .puzzleDiv .puzzleCard .icon { display: inline-block; width: 72px; height: 72px; border: 2px solid #323234; background: #FFFFFF; padding: 13px; }
    .puzzleDiv .puzzleCard h3 { margin: 15px 0 10px; color: #FFFFFF; font-size: 20px; }
    .puzzleDiv .puzzleCard p { color: #FFFFFF; font-size: 14px; }
    .puzzleDiv .puzzleCard.left p { width: 280px; }
    .puzzleDiv .puzzleCard.right p { width: 260px; }
    .puzzleDiv .puzzleCard .link { margin-top: 0px; color: #FEA543; text-decoration: none; font-size: 16px; }
    .puzzleDiv .puzzleCard .puzzleAngleLeft { position: absolute; left: -32px; bottom: 45px; width: 86px; height: 86px; border-radius: 50%; background-color: #306877; border: 6px solid #FFFFFF; z-index: 1; }
    .puzzleDiv .puzzleCard .puzzleAngleRight { position: absolute; right: -32px; top: 45px; width: 86px; height: 86px; border-radius: 50%; background-color: #59626A; border: 6px solid #FFFFFF; z-index: 1; }
}

@media (max-width: 991px) {
    .dwt-features main .banner { padding: 40px 0; }

    .dwt-features main .productivity-list { grid-template-columns: 1fr; grid-gap: 20px; }

    .dwt-features main .try-download-btn a { font-size: 16px; }
    .dwt-features .remoteScan { height: auto; padding: 20px 0; }
        .dwt-features .remoteScan p { width: 90%; }

    table .hide-sm, table .hide-md { display: none; }
    table .show-sm, table .show-md { display: table-cell !important; }
    main .mt150 { margin-top: 60px; }
    .dwt-features header { width: 90%; }
    .dwt-features main table.support-table td { padding: 9px; }
        .dwt-features main table.support-table td .title { font-size: 14px; line-height: 18px; }
        .dwt-features main table.support-table td .detail, .dwt-features main table.support-table td:last-child p { font-size: 14px; line-height: 20px; margin-top: 5px; margin-bottom: 0; }
        .dwt-features main table.support-table td:nth-child(n+3) p { height: auto; font-size: 14px; line-height: 20px; }
        .dwt-features main table.support-table td.show-md p { margin-bottom: 3px; }
        .dwt-features main table.support-table td:nth-child(2), .dwt-features main table.support-table td.sndDesc { font-size: 14px; line-height: 20px; word-break: break-word; }
        .dwt-features main table.support-table td:nth-child(n+3) { padding: 9px 15px; }
    .dwt-features main table.support-table th { font-size: 14px; padding: 9px 15px; }
    .dwt-features main .technical table td { font-size: 14px; line-height: 20px; padding: 9px 15px; }

    .dwt-features main .technical table th.devices { font-size: 14px; width: 107px; }
        .dwt-features main .technical table th.devices > div { padding: 9px; }
    .dwt-features main .technical table tr.technical-title td { font-size: 14px; padding: 9px 15px; }
    .dwt-features main table.support-table th:nth-child(1) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(2) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(3) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(4) { width: 20%; }
    .dwt-features main table.support-table th:nth-child(5) { width: 20%; }

    .puzzleDiv { display: flex; justify-content: center; align-items: stretch; gap: 6px; position: relative; z-index: 0; flex-direction: column; }
        .puzzleDiv .puzzleCard.left { flex: 1; background-color: #306877; padding: 25px 30px 25px 30px; z-index: 2; }
        .puzzleDiv .puzzleCard.center { width: 250px; background-color: #323234; text-align: center; font-size: 24px; justify-content: center; }
        .puzzleDiv .puzzleCard.right { flex: 1; background-color: #59626A; padding: 25px 30px 25px 30px; z-index: 2; }
        .puzzleDiv .puzzleCard.center { width: 100%; line-height: 200px; }
        .puzzleDiv .puzzleCard.left p { width: 100%; }
        .puzzleDiv .puzzleCard.right p { width: 100%; }
        .puzzleDiv .puzzleCard .puzzleAngleLeft { position: absolute; left: 40px; bottom: -45px; width: 86px; height: 86px; border-radius: 50%; background-color: #59626A; border: 6px solid #FFFFFF; z-index: 1; }
        .puzzleDiv .puzzleCard .puzzleAngleRight { position: absolute; right: 40px; top: -45px; width: 86px; height: 86px; border-radius: 50%; background-color: #306877; border: 6px solid #FFFFFF; z-index: 1; }
}

@media (max-width: 767px) {
    h2, .h2 { font-size: 22px; line-height: 1.5; }

    .d-btn-wrap { --column-gap: 22px; }
        .d-btn-wrap .d-btn { padding: 0 17px; }

    .dwt-features main table.support-table { display: none; }
        .dwt-features main table.support-table.support-table-mobile { display: block; }
            .dwt-features main table.support-table.support-table-mobile th { text-align: center; font-size: 18px; }
            .dwt-features main table.support-table.support-table-mobile .tag-container { width: fit-content; display: block; margin: 0 auto; }
            .dwt-features main table.support-table.support-table-mobile td p.fontOswald { font-size: 18px; }
                .dwt-features main table.support-table.support-table-mobile td p.fontOswald + p { margin-top: 20px; }
            .dwt-features main table.support-table.support-table-mobile td .tags { gap: 18px; margin-top: 10px; }
                .dwt-features main table.support-table.support-table-mobile td .tags p { font-size: 16px; }
            .dwt-features main table.support-table.support-table-mobile .browser-list { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
                .dwt-features main table.support-table.support-table-mobile .browser-list > div { text-align: center; }
                    .dwt-features main table.support-table.support-table-mobile .browser-list > div p { font-size: 12px; }
            .dwt-features main table.support-table.support-table-mobile .framework-list { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
            .dwt-features main table.support-table.support-table-mobile .os-list { margin-top: 20px; display: flex; justify-content: center; gap: 15px; }

    .basicPageFooter { padding: 30px 15px; }
    .footer-btns { margin-top: 20px; display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap; }
    .basicPageFooter .footer-btns .d-btn { margin: 0; padding: 0 15px; }

    .dwt-features main .try-download-btn a { display: block; max-width: 280px; margin: 0 auto; font-size: 16px; }
        .dwt-features main .try-download-btn a.orange-border-btn { margin: 0 auto; margin-top: 20px; }

    .dwt-features header { margin-bottom: 60px; }
    .basicPageFooter { margin-top: 80px; }
    .f24 { font-size: 18px; }
    .dwt-features main .productivity { margin-top: 0; }
    .dwt-features main table.support-table td:nth-child(8) p:last-child i:not(:last-child) { margin: 0; }
}

@media (max-width: 575px) {
    .dwt-features main table.support-table td, .dwt-features main table.support-table th { word-break: break-all; }
}

@media (min-width: 1680px) {
    .dwt-features .container { max-width: 1640px; }
}


.org-link-hover:hover span { margin: unset; position: relative; left: 10px; }
