.io-popup-box{display:none;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6)}
.popup-box{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
.popup-close{color:#e22;flex:none;margin-left:5px;line-height:26px;width:26px;height:26px;font-size:18px;text-align:center;cursor:pointer;background:#eee;border-radius:30px;transition:.3s}
.popup-close:hover{color:#fff;background-color:#e22}
.popup-content{position:relative;display:flex;flex-direction:column;max-width:90%;width:900px;background-color:#fff;border-radius:8px;padding:15px}
.popup-header{display:flex;align-items:center}
.btn-help{background:#ddd;font-size:12px;color:#555;margin-left:auto;padding:2px 8px;border-radius:6px}
.popup-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto}
.input-box{margin:8px 0}
.input-box label{font-size:12px;margin-bottom:2px;font-weight:700;color:#555}
.input-group{display:flex}
.input-group .input-box{flex:1}
.input-group .input-box:first-child{margin-right:4px}
.input-group .input-box:last-child{margin-left:4px}
.layout-body{display:flex}
.tips-box{padding:6px 12px;font-size:12px;border-radius:8px;color:#e20;background:rgb(255,226,220);margin:10px 0}
.c-blue{color:#004bee;background:#c8d5f8}
.c-green{color:#208838;background:#d3f9d9}
.tips-box a{color:inherit}
.form-input{max-height:calc(100vh - 500px);padding:5px;overflow:auto;background:#f7f7f7;border-radius:8px}
.popup-lists{margin-top:10px;max-height:calc(100vh - 436px);overflow:auto;background:#f7f7f7;padding:6px;border-radius:12px}
.text-sm{font-size:12px}
.rule-description{word-wrap:break-word;color:#888}
.popup-lists ul{padding:0;margin:0;list-style:none}
.rule-box{padding:6px 8px;cursor:pointer;background:#fff;border-radius:8px;margin-bottom:8px;transition:.3s}
.rule-box:last-child{margin-bottom:0}
.rule-box:hover{box-shadow:0 4px 10px rgba(0,0,0,0.2)}
.rule-name-box{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center}
.rule-id{font-size:14px;color:#555;background:#eee;padding:4px 8px;border-radius:6px;margin-bottom:6px}
.badge{display:inline-block;padding:.25em .4em;font-size:12px;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:middle;border-radius:.25rem}
.badge-success{color:#fff;background-color:#28a745}
.badge-secondary{color:#fff;background-color:#6c757d}
.ml-auto{margin-left:auto}
#search-rule{position:relative;margin:8px 0}
.rule-label,.search-input{width:100%;padding:6px 10px!important;margin:0!important;border-radius:6px!important;box-sizing:border-box;height:32px!important;border:1px solid #888!important}
.search-input{padding-right:50px!important}
.btn{cursor:pointer;color:#fff;background:#004bee;border-radius:4px;border-width:0px;transition:0.3s}
.add-submit{display:block;width:100%;box-sizing:border-box;margin-top:10px;padding:8px 12px;border-radius:6px;color:#fff;border-width:0px}
.btn-verify{background:rgb(204,131,5)}
.btn-search{position:absolute;top:0;right:0;margin:2px;padding:0 8px;height:36px;line-height:36px}
.btn:hover{background:#333;box-shadow:none}
.d-block{display:block}
.state-div{margin-top:10px;position:relative}
.state-div label{position:absolute;font-size:12px;top:4px;left:4px;right:4px;color:#888;padding:1px 4px;border-radius:4px;background:#eee}
.popup-body textarea{width:100%;resize:vertical;box-sizing:border-box;border-radius:6px;padding:6px;border:1px solid #888;line-height:normal}
.response-state{padding-top:24px!important;background:#fff!important}
.popup-list-title{display:flex;align-items:center;font-weight:700;margin-bottom:10px}
.layout-body .popup-l{display:none}
.popup-l,.popup-r{width:100%}
.show-customize{padding:4px 8px;background:#de25bc;box-shadow:0 2px 10px rgba(205,32,173,0.518)}
@media screen and (min-width:783px){.d-md-none{display:none}
.form-input{max-height:calc(100vh - 450px)}
.popup-lists{height:calc(100vh - 386px);min-height:60px;max-height:810px}
.btn-search{height:28px;line-height:28px}
.popup-l,.popup-r{display:block!important;box-sizing:border-box}
.layout-body .popup-l{flex:0 0 59.999996%;width:59.999996%;padding-right:6px}
.layout-body .popup-r{flex:0 0 40.000004%;width:40.000004%;padding-left:6px}
}@media only screen and (min-device-width:768px){.io-popup-box::-webkit-scrollbar-thumb{background-color:rgba(130,130,130,.5);-webkit-border-radius:4px;border-radius:4px}
.io-popup-box::-webkit-scrollbar-thumb:hover{background-color:#f1404b;-webkit-border-radius:4px;border-radius:4px}
.io-popup-box::-webkit-scrollbar{width:5px;height:5px}
.io-popup-box::-webkit-scrollbar-thumb:active{background-color:#f1404b;-webkit-border-radius:4px;border-radius:4px}
.io-popup-box::-webkit-scrollbar-corner{background:rgba(0,0,0,0);border-radius:0 0 8px 0}
.io-popup-box::-webkit-scrollbar-button{background-color:rgba(0,0,0,0);height:2px;width:2px}
}