/*------------------------------------*\
      # Сброс стилей
\*------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, p, blockquote, table, th, td, embed, object {
    padding : 0;
    margin  : 0;
}

fieldset, img, abbr {
    border: 0;
}

address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
    font-weight : normal;
    font-style  : normal;
}
ul {
    list-style : none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 1.0em;
}
q:before, q:after {
    content: '';
}
a, ins {
    text-decoration: none;
}





/*------------------------------------*\
      # Основные стили
\*------------------------------------*/
textarea{
    resize: none
}
.b-wrapper {
    max-width : 1280px;
    width     : 100%;
    min-width : 800px;
    height    : 100vh;
    margin    : 10px auto 10px auto;

}

.b-editor {
    width      : 100%;
    box-sizing : border-box;
    text-align : center;
    border     : 1px solid #f2f2f2;

}

    .b-editor__title {
        font-family      : helvetica;
        font-size        : 32px;
        line-height      : 40px;
        background-color : #2d2827;
        padding          : 8px 0 8px 0;
        color            : #e8e7e7;
        text-align       : center;

    }

    .b-editor__data {
        display          : block;
        background-color : #ffffff;
        padding          : 32px 24px;
        vertical-align   : top;


    }

        .b-data__title {
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;
            padding     : 16px 0 8px 0;
            text-align  : left;

        }


        .b-data__info {
            text-align       : left;
            background-color : #f7f7f7;
            font-size        : 16px;
            display          : block;
            margin           : 8px auto 24px auto;
            box-sizing       : border-box;
            padding          : 8px 16px 8px 24px;
            line-height      : 21px;
            border-left      : 8px solid #ef7a16;

        }

        .b-data__info span {
            font-size   : 18px;
            font-weight : bold;
            line-height : 34px;
        }

        .b-data__area {
            display    : block;
            width      : 1228px;
            height     : 506px;
            padding    : 24px 32px;
            box-sizing : border-box;
            font-size  : 16px;
            overflow-y : auto;

        }

    .b-editor__2sort {
        display          : inline-block;
        width            : 400px;
        box-sizing       : border-box;
        background-color : #f3f3f3;
        padding          : 10px;
        vertical-align   : top;

    }

        .b-2sort__title {
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;
            margin      : 10px 10px 20px 10px;
            text-align  : center;

        }



            .b-2sort__info {
                text-align       : left;
                background-color : #4BCBFF;
                width            : 95%;
                font-size        : 16px;
                display          : block;
                margin           : 0 auto 10px auto;
                box-sizing       : border-box;
                padding          : 10px;
                border-radius    : 5px;
                line-height      : 21px;

            }

            .b-2sort__info span {
                font-size   : 18px;
                font-weight : bold;
                line-height : 34px;
            }

        .b-2sort__area {
            width     : 90%;
            height    : 400px;
            padding   : 10px;
            font-size : 16px;

        }

    .b-editor__3sort {
        display          : inline-block;
        width            : 400px;
        box-sizing       : border-box;
        background-color : #f3f3f3;
        padding          : 10px;
        vertical-align   : top;


    }

        .b-3sort__title {
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;
            margin      : 10px 10px 20px 10px;
            text-align  : center;

        }


            .b-3sort__info {
                text-align       : left;
                background-color : #4BCBFF;
                width            : 95%;
                font-size        : 16px;
                display          : block;
                margin           : 0 auto 10px auto;
                box-sizing       : border-box;
                padding          : 10px;
                border-radius    : 5px;
                line-height      : 21px;

            }

            .b-3sort__info span {
                font-size   : 18px;
                font-weight : bold;
                line-height : 34px;
            }

        .b-3sort__area {
            width     : 90%;
            height    : 400px;
            padding   : 10px;
            font-size : 16px;

        }

    .b-editor__4sort {
        display          : inline-block;
        width            : 400px;
        box-sizing       : border-box;
        background-color : #f3f3f3;
        padding          : 10px;
        vertical-align   : top;


    }

        .b-4sort__title {
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;
            margin      : 10px 10px 20px 10px;
            text-align  : center;

        }


        .b-4sort__info {
            text-align       : left;
            background-color : #4BCBFF;
            width            : 95%;
            font-size        : 16px;
            display          : block;
            margin           : 0 auto 10px auto;
            box-sizing       : border-box;
            padding          : 10px;
            border-radius    : 5px;
            line-height      : 21px;

        }

        .b-4sort__info span {
            font-size   : 18px;
            font-weight : bold;
            line-height : 34px;
        }

        .b-4sort__area {
            width     : 90%;
            height    : 400px;
            padding   : 10px;
            font-size : 16px;

        }
    .b-editor__button-box {
        width      : 100%;
        padding    : 10px 10px 35px 10px;
        text-align : right;
        box-sizing : border-box;

    }

        .b-button-box__button {
            display          : inline-block;
            width            : 250px;
            background-color : #327DFF;
            padding          : 10px;
            color            : white;
            text-align       : center;
            font-size        : 32px;
            font-weight      : bold;
            text-decoration  : none;
            border-radius    : 5px;

        }

.b-code {
    width            : 100%;
    box-sizing       : border-box;
    padding          : 30px;
    background-color : #f3f3f3;

}

    .b-code__title{
        font-family : Arial;
        font-size   : 24px;
        line-height : 34px;
        margin      : 0 0 20px 0;
        text-align  : left;
    }

    .b-code__area {
        width  : 99%;
        height : 600px;

    }

.b-visual {
    width      : 100%;
    box-sizing : border-box;
    padding    : 30px;
    border     : 1px solid #f2f2f2;

}

    .b-visual__title{
        font-family : Arial;
        font-size   : 24px;
        line-height : 34px;
        margin      : 0 0 20px 0;
        text-align  : left;
    }
    .b-visual__table {
        width  : 600px;
        margin : 15px auto 15px auto;
        border : 1px solid grey;

    }

.b-out {
    width            : 100%;
    box-sizing       : border-box;
    padding          : 30px;
    border           : 1px solid #f2f2f2;
    background-color : #f4f4f3;

}

    .b-out-visual {
        width          : 600px;
        min-height     : 600px;
        display        : inline-block;
        vertical-align : top;

    }

        .b-out-visual__title {
            padding     : 15px 0 0 15px;
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;

        }

        .b-out-visual__table {
            width            : 600px;
            margin           : 15px auto 15px auto;
            border           : 1px solid grey;
            background-color : #ffffff;
            min-height       : 600px;

        }

    .b-out-code {
        width          : 600px;
        display        : inline-block;
        vertical-align : top;
        box-sizing     : border-box;

    }

        .b-out-code__title {
            padding     : 15px 0 0 30px;
            font-family : Arial;
            font-size   : 24px;
            line-height : 34px;
        }

        .b-out-code__area {
            margin     : 15px 0 0 15px;
            width      : 94%;
            height     : 600px;
            box-sizing : border-box;

        }


@media only screen and (max-width : 1300px) {

    .b-out-visual {
        width          : 100%;
        min-height     : 600px;
        text-align     : center;
        display        : inline-block;
        vertical-align : top;

    }

    .b-out-code {
        width          : 100%;
        text-align     : center;
        display        : inline-block;
        vertical-align : top;
        box-sizing     : border-box;

    }

}