.sdc-tutorial-page {

    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);

    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;

    .sdc-tutorial-container-wrapper {
        display: flex;
        flex-direction: column;
    }

    .sdc-tutorial-container {
        .bg_c;
        width: 830px;
        height: 466px;
        box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.35);
    }

    .sdc-tutorial-container-tabs {
        height: 56px;
        display: flex;
        flex-direction: row;
    }

    .sdc-tutorial-container-tab {
        .a_6;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        display: flex;
        height: 56px;
        position: relative;
        opacity: 0.8;

        span {
            .hand;
        }

        &::after {
            content: '';
            display: block;
            border-right: solid 1px ;
            border-color: rgba(59, 123, 155, 0.31);
            height: 28px;
            right: 0;
            position: absolute;
            top: 14px; //(56-28)/2
            width: 1px;
        }

        &:last-child:after {
            display: none;
        }

        &.selected {
            opacity: 1;
            .bold;
        }

    }

    .sdc-tutorial-container-content {
        .bg_a;
        .perfect-scrollbar;
        display: flex;
        align-items: center;
        height: 410px;
    }

    .sdc-tutorial-skip {
        .c_1;
        .hand;
        text-align: right;
        margin-bottom: 9px;
    }

    .sdc-tutorial-footer {
        .c_4;
        margin-top: 9px;

        .sdc-tutorial-footer-prev-button {
            float: left;
            position: relative;
            padding-left: 14px;
            .noselect;

            span {
                .hand;
                &::before {
                    content: '<';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }

        .sdc-tutorial-footer-page-counter {
            .e_3;
            position: absolute;
            left: 50%;
            margin-top: 2px;
            cursor: default;
            .noselect;

            .selected {
                .c_3;
                .bold;
                margin-right: 2px;
            }

            .total {
                margin-left: 2px;
            }
        }

        .sdc-tutorial-footer-next-button {
            float: right;
            position: relative;
            padding-right: 14px;
            .noselect;

            span {
                .hand;

                &::after {
                    content: '>';
                    display: block;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }

    }

}

///////////////// TEXT TEMPLATE
.sdc-tutorial-text-template {

    padding: 20px 65px;

    h1 {
        .c_15;
        margin-top: 0;
    }

    p {
        .c_10;
    }
}

///////////////// IMAGE TEMPLATE
.sdc-tutorial-image-template {

    .sdc-tutorial-image-template-text {
        padding: 16px 38px;
        height: 118px;
        h1 {
            .c_11;
            margin: 0 0 4px 0;
        }

        p {
            .c_4;
            font-weight: 300;
            line-height: 21px;
        }

    }

    .sdc-tutorial-page-2-image  { background: transparent url('../../../styles/images/tutorial/2.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-3-image  { background: transparent url('../../../styles/images/tutorial/3.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-4-image  { background: transparent url('../../../styles/images/tutorial/4.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-5-image  { background: transparent url('../../../styles/images/tutorial/5.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-6-image  { background: transparent url('../../../styles/images/tutorial/6.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-7-image  { background: transparent url('../../../styles/images/tutorial/7.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-8-image  { background: transparent url('../../../styles/images/tutorial/8.png') no-repeat 0 0; width: 830px; height: 292px;}

    .sdc-tutorial-page-10-image { background: transparent url('../../../styles/images/tutorial/10.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-11-image { background: transparent url('../../../styles/images/tutorial/11.png') no-repeat 0 0; width: 830px; height: 292px;}

    .sdc-tutorial-page-13-image { background: transparent url('../../../styles/images/tutorial/13.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-14-image { background: transparent url('../../../styles/images/tutorial/14.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-15-image { background: transparent url('../../../styles/images/tutorial/15.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-16-image { background: transparent url('../../../styles/images/tutorial/16.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-17-image { background: transparent url('../../../styles/images/tutorial/17.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-18-image { background: transparent url('../../../styles/images/tutorial/18.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-19-image { background: transparent url('../../../styles/images/tutorial/19.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-20-image { background: transparent url('../../../styles/images/tutorial/20.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-21-image { background: transparent url('../../../styles/images/tutorial/21.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-22-image { background: transparent url('../../../styles/images/tutorial/22.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-23-image { background: transparent url('../../../styles/images/tutorial/23.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-24-image { background: transparent url('../../../styles/images/tutorial/24.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-25-image { background: transparent url('../../../styles/images/tutorial/25.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-26-image { background: transparent url('../../../styles/images/tutorial/26.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-27-image { background: transparent url('../../../styles/images/tutorial/27.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-28-image { background: transparent url('../../../styles/images/tutorial/28.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-29-image { background: transparent url('../../../styles/images/tutorial/29.png') no-repeat 0 0; width: 830px; height: 292px;}
    .sdc-tutorial-page-30-image { background: transparent url('../../../styles/images/tutorial/30.png') no-repeat 0 0; width: 830px; height: 292px;}

}