/*配置选项样式 - 单选开关 */
.单选按钮{
    font-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 20px;
    background: #ddd;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 3px;
}
.单选按钮:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    -webkit-box-shadow: 0 0 0.25em rgba(0,0,0,.3);
    box-shadow: 0 0 0.25em rgba(0,0,0,.3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 3px;
}
.单选按钮:checked{
    background: rgb(0, 129, 250);
}
input[type="checkbox"].单选按钮:checked:after{
    left: calc(100% - 20px);
}
/*数字框*/
.数字框{
    outline: none;
    margin: 0px 5px;
    color: #cd4109;
    padding-left: 5px;
}
.custom-number-input{
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}


/*IO口*/
.画布_IO{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    position: relative;
}
.画布_IO_盒子{
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #9176c9;
    position: relative;
    width: max-content;
}
.IO变量名{
    background: #0081fa;
    color: #fff;
    padding: 0px 8px;
    font-size: 12px;
    height: 21px;
    line-height: 21px;
    border-radius: 3px;
    margin-right: 3px;
}
/*寄存器*/
.画布_寄存器{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    position: relative;
}
.画布_寄存器_盒子{
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #9176c9;
    position: relative;
    width: max-content;
}
/*子程序*/
.画布_子程序{
    width: 58px;
    position: relative;
}
.子程序盒子{
    display: flex;
    align-items: stretch;
    width: max-content;
}
.子程序名称{
    padding: 3px 9px;
    color: #fafafa;
    background: #226ea7;
    font-size: 14px;
}
.子程序横线{
    width: 200px;
    height: 1px;
    background: #226ea7;
    margin-top: 13px;
}
.子程序内容{
    min-width: 200px;
    min-height: 200px;
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.返回子程序{
    padding: 3px 9px;
    color: #fafafa;
    background: #226ea7;
    font-size: 14px;
}
/*中断程序*/
.画布_中断程序{
    width: 58px;
    position: relative;
}
.中断程序盒子{
    display: flex;
    align-items: stretch;
    width: max-content;
}
.中断程序名称{
    padding: 3px 9px;
    color: #fafafa;
    background: #226ea7;
    font-size: 14px;
}
.中断程序内容{
    min-width: 200px;
    min-height: 200px;
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.返回中断程序{
    padding: 3px 9px;
    color: #fafafa;
    background: #226ea7;
    font-size: 14px;
}
/*长 短跳转*/
.短跳转名称,.长跳转名称{
    padding: 3px 9px;
    color: #fafafa;
    background: #226ea7;
    font-size: 14px;
}
.文本框{
    border: 1px solid #ccc;
    padding: 4px 5px;
    font-size: 12px;
    outline: none;
    height: 25px;
    width: 55px;
    margin: 0px 5px;
}


.寄存器变量名{
    background: #0081fa;
    color: #fff;
    padding: 0px 8px;
    font-size: 12px;
    height: 21px;
    line-height: 21px;
    border-radius: 3px;
    margin-right: 3px;
}
.寄存器值{
    display: flex;
    margin: 0px 5px;
}
.寄存器值_比特位[value="0"]{
    font-size: 10px;
    margin: 2px;
    background: #d7d7d7;
    padding: 3px;
    border-radius: 3px;
    color: #6c6c6c;
}
.寄存器值_比特位[value="1"]{
    font-size: 10px;
    margin: 2px;
    background: #109734;
    padding: 3px;
    border-radius: 3px;
    color: #0dfb4d;
}
.寄存器设置{
    font-size: 8px;
    background: #836113;
    padding: 2px 3px;
    color: #fafafa;
    border-radius: 3px;
}






/*寄存器便宜地址展示*/
.addr{
    font-size: 12px;
    color: #f00;
    margin-right: 5px;
}



/*asm汇编展示效果*/
.asm_content_li{
    display:flex;
}
.asm_content_li_name{
    width: 200px;
}
.asm_content_li_desc{
    color: #c14f4f;
}



/*普通容器框*/
.普通容器框{
    display: flex;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    position: relative;
    width: max-content;
}