.template-inner,
.template-inner * {
    box-sizing: border-box
}

.template-inner .content-wrap {
    max-width: 1200px
}

.zw-product-header {
    background: #f5f7d7;
}

#block-panels-mini-product-menu {
    background: #f5f7d7;
}

.template-inner h1,
.template-inner h2,
.template-inner h3 {
    font-family: var(--zf-primary-bold)
}

.template-inner h1 {
    font-size: 50px
}

.template-inner h1 span {
    display: block;
    font-size: 40px;
    margin: 0 auto 15px
}

.template-inner h2 {
    font-size: 45px;
    text-align: center
}

.template-inner h3 {
    font-size: 18px
}

.top-section {
    padding: 70px 0;
    text-align: center;
    background: #f5f7d7;
}

.top-box p {
    max-width: 750px;
    margin: 0 auto
}

.top-box img {
    max-width: 400px;
    margin: 30px auto 0;
    width: 100%;
}

.top-box .act-btn {
    margin: 30px 0 0;
}

.top-box picture {
    display: block;
}

.apps-section {
    padding: 100px 0;
}

.apps-outer {
    max-width: 1000px;
    margin: 50px auto 0
}

.apps-inner {
    border-color: #4e4e4e;
    border-style: solid;
    border-width: 1px 0 0 0;
    transition: background .2s ease
}

.apps-inner:last-child {
    border-width: 1px 0 1px 0
}

.apps-inner.active {
    background: #f5f5f5
}

.app-head {
    display: grid;
    grid-template-columns: max-content auto;
    grid-gap: 20px;
    align-items: center;
    padding: 25px 70px 25px 40px;
    position: relative;
    cursor: pointer
}

.apps-inner.active .app-head {
    cursor: default
}

.app-head:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 10px solid #4e4e4e;
    border-bottom: 7px solid transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    margin: auto
}

.apps-inner.active .app-head:after {
    border-top: 10px solid #4e4e4e;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent
}

.app-head h3 {
    margin: 0;
}

.app-head>div {
    min-width: 200px;
    display: grid;
    grid-template-columns: max-content auto;
}

.app-icon {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    grid-gap: 10px;
    padding: 15px 15px;
    border-radius: 10px;
    background: #f5f5f5;
    position: relative;
    transition: background .2s ease;
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
}

.apps-inner.active .app-icon {
    background: #fff
}

.sec-icon {
    margin-right: 30px
}

.sec-icon:before {
    content: '';
    width: 40px;
    height: 40px;
    margin: auto;
}

.pri-icon:before {
    background: var(--product-icons) no-repeat;
    background-size: var(--zp-i-bs);
    width: var(--zp-i-w);
    height: var(--zp-i-h);
    content: '';
    margin: auto
}

.sec-zoho-mail::before {
    background-position: var(--zp-mail-bp);
}

.sec-zoho-cliq::before {
    background-position: var(--zp-cliq-bp);
}

.sec-zoho-meeting::before {
    background-position: var(--zp-meeting-bp);
}

.sec-zoho-workdrive::before {
    background-position: var(--zp-workdrive-bp);
}

.sec-zoho-writer::before {
    background-position: var(--zp-writer-bp);
}

.sec-zoho-sheet::before {
    background-position: var(--zp-sheet-bp);
}

.sec-zoho-show::before {
    background-position: var(--zp-show-bp);
}

.sec-zoho-connect::before {
    background-position: var(--zp-connect-bp);
}

.sec-zoho-calendar::before {
    background-position: var(--zp-calendar-bp);
}

.sec-icon:before {
    background: url('/sites/zweb/images/workplace/guide-apps-sprite.png') no-repeat 0 0/440px auto
}

.sec-icon:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 9px solid #4e4e4e;
    border-bottom: 6px solid transparent;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -22px;
    margin: auto
}

.sec-google-docs:before {
    /* background-position: 0 -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-docs.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-sheets:before {
    /* background-position: -40px -40px */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-sheets.svg);
    height: 37px;
    background-size: contain;
    background-position: center;
}

.sec-google-slides:before {
    /* background-position: -80px -40px */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-slides-icon.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-drive:before {
    /* background-position: -400px -40px */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-drive.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-meet:before {
    /* background-position: -120px -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-meet-icon.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-hangouts:before {
    /* background-position: -160px -40px; */
}

.sec-google-chats:before,
.sec-google-hangouts:before {
    /* background-position: -160px -40px */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-chat.png);
    background-size: contain;
    background-position: center;
}

.sec-gmail:before,
.sec-google-gmail:before {
    /* background-position: -200px -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/gmail.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-calendar:before {
    /* background-position: -240px -40px */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-calendar.svg);
    background-size: contain;
    background-position: center;
    width: 35px;
    height: 35px;
}

.sec-google-tasks:before {
    /* background-position: -280px -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-tasks.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-keep:before {
    /* background-position: -320px -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-keep.svg);
    background-size: contain;
    background-position: center;
}

.sec-google-currents:before {
    /* background-position: -360px -40px; */
    background-image: url(/sites/zweb/images/otherbrandlogos/google-currents.svg);
    background-size: contain;
    background-position: center;
    width: 35px;
}

.sec-microsoft-word:before {
    /* background-position: 0 0 */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-word.png);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-excel:before {
    /* background-position: -40px 0 */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-excel.svg);
    background-size: contain;
    background-position: center;
    height: 34px;
}

.sec-microsoft-powerpoint:before {
    /* background-position: -80px 0; */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-powerpoint.svg);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-onedrive:before {
    /* background-position: -120px 0 */
    background-image: url(/sites/zweb/images/otherbrandlogos/onedrive.svg);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-teams:before {
    /* background-position: -160px 0 */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-office-teams.svg);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-outlook:before,
.sec-microsoft-outlook-calendar:before {
    /* background-position: -200px 0; */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-outlook-icon.svg);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-outlook-calendar:before {
    /* background-position: -360px 0 */
}

.sec-microsoft-to-do:before {
    /* background-position: -240px 0; */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-to-do.svg);
    background-size: contain;
    background-position: center;
    width: 37px;
}

.sec-microsoft-onenote:before {
    /* background-position: -280px 0 */
    background-image: url(/sites/zweb/images/otherbrandlogos/onenote.svg);
    background-size: contain;
    background-position: center;
}

.sec-microsoft-yammer:before {
    /* background-position: -320px 0; */
    background-image: url(/sites/zweb/images/otherbrandlogos/microsoft-office-yammer.svg);
    background-size: contain;
    background-position: center;
    width: 35px;
}



.pri-zoho-writer:before {
    background-position: var(--zp-writer-bp);
}

.pri-zoho-sheet:before {
    background-position: var(--zp-sheet-bp);
}

.pri-zoho-show:before {
    background-position: var(--zp-show-bp);
}

.pri-zoho-workdrive:before {
    background-position: var(--zp-workdrive-bp);
}

.pri-zoho-meeting:before {
    background-position: var(--zp-meeting-bp);
}

.pri-zoho-cliq:before {
    background-position: var(--zp-cliq-bp);
}

.pri-zoho-mail:before {
    background-position: var(--zp-mail-bp)
}

.pri-zoho-calendar:before {
    background-position: var(--zp-calendar-bp)
}

.pri-zoho-connect:before {
    background-position: var(--zp-connect-bp)
}

.pri-zoho-showtime:before {
    background-position: var(--zp-showtime-bp);
}

.app-body {
    display: none;
    padding: 25px 40px 70px;
    table-layout: fixed;
    width: 100%
}

.apps-inner:first-child .app-body {
    display: block
}

.app-right,
.app-left {
    width: 50%;
    display: table-cell;
    vertical-align: top
}

.app-left {
    padding: 0 50px 50px 0;
    position: relative
}

.app-more {
    border: 1px solid #4e4e4e;
    padding: 10px 20px;
    color: #000;
    text-transform: uppercase;
    font-size: 14px;
    font-family: var(--zf-primary-semibold);
    position: absolute;
    left: 0;
    bottom: 0
}

.app-more:hover {
    border-color: #000
}

.app-right {
    padding-left: 50px
}

.app-right li {
    font-family: var(--zf-primary-semibold);
    margin-bottom: 30px;
    position: relative;
    padding-left: 50px
}

.app-right li:before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50px;
    background: #01a768;
    position: absolute;
    top: 5px;
    left: 0
}

.app-right li:after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(38deg);
    position: absolute;
    top: 7px;
    left: 5px
}

.app-right li:last-child {
    margin: 0
}

.bottom-section {
    padding: 0 0 80px;
    text-align: center
}

.bottom-section h2 {
    margin: 0 auto 20px
}

.act-btn {
    background: #000;
    color: #fff;
    margin: 20px 0 0
}

@media only screen and (min-width: 1400px) and (max-width:1599px) {
    .template-inner h1 {
        font-size: 48px
    }

    .template-inner h1 span {
        font-size: 38px
    }

    .template-inner h2 {
        font-size: 43px
    }
}

@media only screen and (max-width: 1399px) {
    .template-inner h1 {
        font-size: 45px
    }

    .template-inner h1 span {
        font-size: 35px
    }

    .template-inner h2 {
        font-size: 40px
    }
}

@media only screen and (max-width: 1199px) {
    .top-section {
        padding: 70px 0
    }

    .apps-section {
        padding: 80px 0 90px
    }

    .bottom-section {
        padding: 0 0 60px
    }
}

@media only screen and (max-width: 991px) {
    .template-inner h1 {
        font-size: 40px;
        max-width: 500px;
        margin: 0 auto 20px
    }

    .template-inner h1 span {
        font-size: 30px
    }

    .template-inner h2 {
        font-size: 35px
    }

    .template-inner h3 {
        font-size: 18px;
    }

    .app-head {
        padding: 25px 45px 25px 15px;
    }

    .app-head:after {
        right: 15px;
    }

    .app-right li {
        font-size: 15px;
        margin-bottom: 15px;
        padding-left: 35px;
    }

    .app-right li:before {
        top: 3px;
    }

    .app-right li:after {
        top: 5px;
    }
}

@media only screen and (max-width: 800px) {
    .template-inner h3 {
        font-size: 17px;
    }

    .app-head {
        padding: 20px 70px 20px 20px;
    }

    .app-head>div {
        min-width: 160px
    }

    .app-icon {
        padding: 10px 10px;
        grid-gap: 6px;
        font-size: 15px;
    }

    .sec-icon:before,
    .pri-icon:before {
        transform: scale(.8)
    }

    .app-right,
    .app-left {
        width: 100%;
        display: block;
        padding: 0
    }

    .app-body {
        padding-top: 15px;
        padding-bottom: 50px;
    }

    .app-left {
        text-align: center
    }

    .app-left p {
        max-width: 500px;
        margin: 0 auto 30px
    }

    .app-more {
        position: static;
        display: inline-block
    }

    .app-right {
        margin: 50px 0 0
    }
}

@media only screen and (max-width: 767px) {
    body {
        -webkit-text-size-adjust: none
    }

    .main-container-wrapper #mini-panel-product_menu .menu-icon-help-header {
        margin-top: 20px
    }

    .main-container-wrapper.body-umain #mini-panel-product_menu .menu-icon-help-header {
        margin-top: 0
    }

    .template-inner h1 {
        font-size: 32px
    }

    .template-inner h1 span {
        font-size: 25px
    }

    .template-inner h2 {
        font-size: 28px
    }

    .template-inner h3 {
        font-size: 20px
    }

    .top-section {
        padding: 70px 0 30px
    }

    .top-box p {
        max-width: 530px
    }

    .top-box img {
        margin: 10px auto 0;
        max-width: 280px;
    }

    .apps-section {
        padding: 40px 0 60px
    }

    .app-head {
        display: block;
        padding: 20px 40px 20px 15px
    }

    .app-head:after {
        right: 15px
    }

    .apps-inner.active .app-head:after {
        top: 5px
    }

    .app-head h3 {
        padding: 0;
        margin: 0;
        font-size: 18px;
    }

    .app-head>div {
        display: none;
    }

    .app-body {
        padding: 25px 20px 40px
    }

    .app-left>div {
        margin-bottom: 20px;
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: center;
    }

    .bottom-section {
        padding: 0 0 40px
    }

    .bottom-section h2 {
        margin: 0 auto 10px
    }
}

@media only screen and (max-width: 550px) {
    .app-left>div {
        grid-gap: 30px;
        grid-template-columns: max-content;
    }

    .app-icon {
        justify-content: center;
    }

    .sec-icon {
        margin-right: 0px;
    }

    .sec-icon:after {
        top: auto;
        bottom: -22px;
        right: 0;
        left: 0;
        rotate: 90deg;
    }
}

@media only screen and (max-width: 480px) {
    .app-right li {
        padding-left: 30px
    }
}