@import url("//fonts.googleapis.com/earlyaccess/nanumgothic.css");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

html, body, div, iframe, h1, h2, h3, h4, h5, h6, fieldset {
    font-family    : 'Nanum Gothic', "돋움", Dotum, sans-serif;
    margin         : 0;
    padding        : 0;
    border         : 0;
    outline        : 0;
    font-size      : 100%;
    vertical-align : baseline;
    background     : transparent;
}

html, body {
    height : 100%;
}

body {
    width : 100%;
}

input, textarea, select {
    font-family : 'Nanum Gothic', "돋움", Dotum, sans-serif;
    font-size   : 13px;
    color       : #555;
    margin      : 0;
    padding     : 0
}

.head_area {
    background    : #F5F5F6;
    border        : 1px solid #ABB0BD;
    border-radius : 10px;
    overflow      : auto;
    margin-bottom : 5px;
}

.head_area input[type="text"] {
    height         : 26px;
    border         : 1px solid #ABB0BD;
    padding        : 0 10px;
    vertical-align : middle;
    box-sizing     : border-box;
    color          : #555;
    font-size      : 13px;
}

.head_area select {
    width          : 80px;
    color          : #555;
    font-size      : 13px;
    border         : 1px solid #ABB0BD;
    vertical-align : middle;
    height         : 26px;
    background     : #FFF;
    box-sizing     : border-box;
    padding-left   : 10px;
}

.head_area button {
    border      : 0;
    width       : 70px;
    height      : 26px;
    color       : #FFF;
    font-size   : 12px;
    font-weight : bold;
    background  : #005BA8;
    line-height : 23px;
    margin-left : 5px;
}

.head_area button i {
    margin-right : 3px;
}

.head_area label {
    font-size      : 13px;
    color          : #333;
    font-weight    : bold;
    padding        : 0 10px 0 20px;
    vertical-align : middle;
    display        : inline-block;
    height         : 32px;
    line-height    : 32px;
}

.page_head {
    display     : inline-block;
    float       : left;
    height      : 30px;
    line-height : 30px;
    margin-left : 5px;
    padding     : 5px 5px 5px 0;
}

.page_head strong {
    font-size      : 16px;
    color          : #005BA8;
    padding-left   : 20px;
    display        : inline-block;
    vertical-align : middle;
    position       : relative;
}

.page_case {
    align-items : center;
    display     : flex;
    float       : right;
    height      : 30px;
    padding     : 5px;
}

.args_area {
    float       : left;
    align-items : center;
    display     : flex;
    height      : 30px;
    padding     : 5px;
}


.args_case {
    align-items : center;
    display     : flex;
    float       : right;
    height      : 30px;
    padding     : 5px;
}

.body_area {
    display : flex;
}

.work-area {
    height       : 80%;
    width        : 55%;
    margin-right : 5px;
}

.work-area-full {
    height : 80%;
    width  : 100%;
}

.code-area {
    font-size     : 90%;
    height        : 556px;
    width         : 45%;
    border        : 1px solid #323743;
    border-radius : 3px;
}

.code-body {
    width     : 100%;
    font-size : 12px;
}

.code-body th {
    background    : #F5F5F6;
    border-bottom : 1px solid #E4E5E7;
    border-right  : 1px solid #E4E5E7;
    padding       : 4px;
}

.code-body th:first-of-type {
    border-top-left-radius : 4px;
}

.code-body td {
    min-height    : 25px;
    border-bottom : 1px solid #D4D4D4;
    padding       : 5px;
}

.required {
    background-color : #FF9494;
}

.is-required {
    border : 1px solid #FF9494;
}