.content-parser-data{
    width: 100%;
    min-height: 100px;
    margin-bottom: 10px;
}
.content-charts-results{
    width: 100%;
    min-height: 10px;
    margin-bottom: 10px;
}
.grid-parser-data{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(1, 1fr);
    padding: 15px;
}
.grid-charts-results{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
}
.content-charts-item{
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    max-width: 100%;
    height: 600px;
    position: relative;
}
.content-charts-item svg{
    pointer-events: all;
}
.grid-parser-item:nth-child(1){
    padding: 30px;
}
.code {
    background: var(--theme-bg-widget,#eeeeee);
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    margin: 0;
    border-radius: 4px;
    border: 1px solid var(--theme-bg-widget,#eeeeee);
    position: relative;
    width: 100%;
    flex-direction: row;
    display: flex;
    justify-content: center;
}
.code .code_lang {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    height: 100%;
    color: var(--theme-color-text,#0C1914);
    display: flex;
    flex-direction: column;
    justify-content: start;
    user-select: none;
}
.code .code_lang>label{
    padding-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.list_save_json{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 15px;
    pointer-events: all;
}
.code .code_data {
    overflow: auto;
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 0;
    padding: 0 15px 0 15px;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: var(--theme-color-text,#0C1914);
    height: 100%;
    width: 100%;
    overflow: auto;
    max-width: 80vw;
}
.code .code_data>code{
    width:80px;
}
code .hljs-attr{
    color: var(--theme-color-widget-error,#c81e1e);
}
code .hljs-string,
code .hljs-keyword,
code .hljs-number{
    color: var(--theme-color-widget-valid,#32bea6);
}
code .hljs-punctuation{
    color: var(--theme-color-widget-default,#2178e9);
}
.code-json .btn_sort_json{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='white'%3e%3cpath d='M19 6L19 42' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M7 17.8995L19 5.89949' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M29 42.1005L29 6.10051' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M29 42.1005L41 30.1005' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}
.code-json .btn_sort_json[sort="asc"]{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='white' class='bi bi-sort-up' viewBox='0 0 16 16'%3e%3cpath d='M3.5 12.5a.5.5 0 0 1-1 0V3.707L1.354 4.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 3.707V12.5zm3.5-9a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zM7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z'/%3e%3c/svg%3e");
}
.code-json .btn_sort_json[sort="desc"]{
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='bi bi-sort-down' fill='white'%3e%3cpath fill-rule='evenodd' d='M3 2a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-1 0v-10A.5.5 0 0 1 3 2z'/%3e%3cpath fill-rule='evenodd' d='M5.354 10.146a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L3 11.793l1.646-1.647a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 9a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e");
}
.code-json .code_lang button{
    margin-top: 10px;
}
.form_parse{
    width: 100%;
    margin: auto;
    /* max-width: 500px; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    user-select:none;
    overflow: auto;
}
.form_parse>.form_row{
    margin-top:15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.form_parse>.form_row h5{
    margin: 0;
    margin-bottom: 10px;
}
.form_parse>.form_row .row_input{
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    margin-bottom: 12px;
}
.box_chartconfig{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#change_key_btn{
    margin: auto;
}
#selector_chart{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.type-chart-list-content{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;;
    margin: auto;
}
.checkbox-block{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 7rem;
    min-height: 7rem;
    border-radius: 0.5rem;
    border: 1.1px solid var(--theme-hover-widget,#f3cfcf);
    background-color: var(--theme-bg-main,white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;
    user-select:none;
    margin: 2.5px;
}
.checkbox-block>label{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.checkbox-block>input{
    display: flex;
    position: absolute;
    top: 5px;
    left: 5px;
    cursor: pointer;
}
.checkbox-block svg{
    width:40px;
    height:40px;
    transition: 0.15s ease;
}
.checkbox-block>h5{
    text-align: center;
    margin: 0;
    margin-top: 10px;
    transition: 0.15s ease;
}
.checkbox-block:hover{
    border: 1.1px solid var(--theme-hover-widget,#f3cfcf);
    fill:var(--theme-color-widget-active,#df1b1b) !important;
    color: var(--theme-color-widget-active,#df1b1b);
}
#box_btn_submit{
    align-items: center;
    justify-content: center;
    display: flex;
}
.btn_aipsin {
    background-color: var(--theme-color-widget-active,#df1b1b);
    color: var(--theme-bg-main,white) !important;
    cursor: pointer;
    font-family: Arial;
    font-size: 13pt;
    text-decoration: none;
    padding: 5px 20px;
    border: none;
    border-radius: 3px;
    outline: none;
}
.btn_aipsin:hover {
    color: var(--theme-bg-main,white);
    background: var(--theme-color-widget,#c81e1e);
    cursor: pointer;
}
.btn_chart_export{
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--theme-color-widget-active,#df1b1b);
    color: var(--theme-bg-main,white) !important;
    fill: var(--theme-bg-main,white);
    cursor: pointer;
    font-family: Arial;
    font-size: 13pt;
    text-decoration: none;
    padding: 5px 8px;
    border: none;
    outline: none;
    margin-top: 10px;
    pointer-events: all;
}
.btn_chart_export:hover{
    background-color: var(--theme-color-widget,#c81e1e);
}
.btn_chart_export:active{
    background-color: var(--theme-color-widget,#c81e1e);
}
.btn_chart_export svg{
    pointer-events: none;
}
.btn_refresh{
    margin-right: 5px;
    background-color: var(--theme-bg-main,white);
    transition: all 0.3s;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 3px;
    padding: 3px;
}
.btn_refresh:hover{
    background-color: var(--theme-bg-main,white);
}

.input_box {
    margin-right: 5px;
}
/*.grid-parser-item:nth-child(2){
    display: none;
}*/
@media only screen and (min-width: 1000px) {
    .grid-parser-data{
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-parser-item:nth-child(1) {
        grid-column: span 6/auto;
    }
    .grid-parser-item:nth-child(2) {
        grid-column: span 2/auto;
    }
    .grid-parser-item:nth-child(3) {
        grid-column: span 4/auto;
    }
    .grid-parser-item:nth-child(4) {
        grid-column: span 6/auto;
    }
    .grid-parser-item:nth-child(5) {
        grid-column: span 6/auto;
    }
}