@font-face {
    font-family: "jwtFont";
    src: url("//cdn1.box3.cn/assets/fonts/RobotoMono-Regular.ttf");
}
.CodeMirror, .jwt-encode {
    font-family: 'jwtFont';
    padding: 10px;
}
/* index.html START */
.index-left, .index-right {
    overflow: hidden;
    white-space: nowrap;
}
.index-left .CodeMirror {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    outline: none;
    height: auto;
    min-height: 360px;
    width: 100%;
    border: 0;
}
.index-right .CodeMirror {
    font-weight: 500;
    font-size: 14px;
    outline: none;
    border-width: 0;
    line-height: 22px;
    border-radius: 0;
    height: auto;
    border: 0;
}
.CodeMirror .cm-jwt-dot {
    color: #000;
    word-break: break-all;
}
.CodeMirror .cm-jwt-header, .box3-jwt-header .CodeMirror {
    color: #f7085f;
    word-break: break-all;
}
.CodeMirror .cm-jwt-payload, .box3-jwt-payload .CodeMirror {
    color: #ce2df6;
    word-break: break-all;
}
.CodeMirror .cm-jwt-signature {
    color: #06bef7;
    word-break: break-all;
}
.decode_header {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}
.index-left .CodeMirror-scroll, .index-right .CodeMirror-scroll{
    overflow: hidden !important;
}
.width50 {width: 50%;}
/* index.html END */
.jwt-encode {
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    color: #03c1fb;
    font-size: 14px;
    border: 0;
    border-radius: 0;
    margin: 0;
    line-height: 25px;
}
.jwt-encode p {
    margin-bottom: 0;
    clear: both;
}
.jwt-encode .col-sm-5 {
    padding-left: 0;
}
.pd15 {
    padding-left: 15px;
}
.box3-mark {color: #777;}
input,textarea,select {font-family: 'jwtFont';}

.b-b-color {border-bottom: 1px solid silver;}
.b-color {border: 1px solid silver; border-radius: 4px; padding-bottom: 6px;}