:host {
    display: flex;
  }
  #props-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: 10px; */
    overflow: hidden;
    /* background-color: black; */
  }
  .text_error {
    color: rgb(247, 91, 19);
  }
  .flex, .flex-1 {
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  
  .section-line {
    border-bottom: 1px solid var(--color-normal-border-weaker);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .script-line {
    border-bottom: 1px double var(--color-normal-border-weaker);
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 0px ;
  }
  
  .ml-5 {
    margin-left: 5px;
  }
  .ml-10 {
    margin-left: 10px;
  }
  .mt-10 {
    margin-top: 10px;
  }
  .settings {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    overflow: hidden;
  }
  .row {
    margin: 16px 0;
    user-select: text;
  }
  .row_item {
    margin: 5px 0;
  }
  .prop-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: auto;
  }
  .prop_content {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* margin: 5px 0; */
    margin: 16px 0;
  }
  .script_label{
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: auto;
    margin: 6px 0;
  }
  .script_content {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin: 6px 0;
  }
  
  .color_bule {
    color: deepskyblue;
  }
  .color_grey {
    color: grey;
  }
  
  /* .settings > .slider {
    width: 150px;
    border: 1px solid var(--color-normal-border-weaker);
    border-radius: calc(var(--size-normal-radius) * 1px);
    overflow-y: auto;
    background-color: var(--color-normal-fill-emphasis);
  }
  .settings > .slider::-webkit-scrollbar {
    display: block;
    border-left: 1px solid var(--color-normal-border-weaker);
  }
  .settings > .slider > ul > li {
    padding-top: 6px;
  }
  .settings > .slider > ul > li > ui-label {
    opacity: 0.5;
    margin-left: 10px;
    font-size: 11px;
  }
  .settings > .slider > ul > li > ul > li {
    cursor: pointer;
    transition: background-color 0.2s;
    padding: 4px 4px 4px 22px;
  }
  .settings > .slider > ul > li > ul > li:hover,
  .settings > .slider > ul > li > ul > li[active] {
    background-color: var(--color-active-fill-emphasis);
    color: var(--color-active-contrast-emphasis);
  } */
  .settings > .content {
    flex: 1;
    /* margin-left: 2px; */
    /* padding: 25px; */
    /* border: 1px solid var(--color-normal-border-weaker); */
    /* border-radius: calc(var(--size-normal-radius) * 1px); */
    overflow: auto;
    user-select: text;
  }
  .settings > .content .section {
    display: block;
    margin-bottom: 16px;
    user-select: text;
  }
  .settings > .content .row {
    /* margin: 16px 0; */
    user-select: text;
  }
  .settings > .content h2,
  .settings > .content h3,
  .settings > .content h4,
  .settings > .content h5 {
    padding-bottom: 8px;
  }
  .settings > .content ui-code {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .settings > .content .mb-10 {
    margin-bottom: 10px;
  }
  .settings .ui-checkbox-wrap ui-checkbox {
    margin-right: 20px;
  }
  .settings ui-color,
  .settings ui-file,
  .settings ui-gradient,
  .settings ui-input,
  .settings ui-num-input,
  .settings ui-select,
  .settings ui-slider,
  .settings ui-node,
  .settings ui-component,
  .settings ui-asset {
    width: 100%;
  }
  .settings .ui-drag-wrap ui-drag-item {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    padding: 15px;
    background-color: var(--color-normal-fill-important);
  }
  .settings .ui-drag-wrap ui-drag-area {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    padding: 15px;
    border: dashed 1px var(--color-normal-border-important);
  }
  .settings .ui-drag-wrap ui-drag-area[hoving] {
    border-color: var(--color-success-border);
  }
  .settings .ui-icon-wrap .icon-box {
    display: inline-block;
    width: 140px;
    font-size: 14px;
  }
  .settings .dialog-wrap ui-button {
    margin-right: 20px;
  }

  .wrap {
    color: rgb(201, 201, 201);
  }

  ui-tooltip {
    color: rgb(108, 221, 255) !important;
  }

  ui-section {
    overflow: auto;
  }
  
  .handler {
    padding-top: 8px;
    background-color: transparent;
    border: transparent;
  }
  .handler-group {
    padding: 2px;
    margin: 5px 0px;
    border: solid 1px rgba(128, 128, 128, 0.2);
  }
  .prop-node {
    padding-top: 10px;
    margin-top: 2px;
    border-top: dashed 1px rgba(128, 128, 128, 0.2);
  }
  .prop-script {
    padding-top: 5px;
    margin-top: 2px;
    align-items: center;
    /* border-top: dashed 1px rgba(128, 128, 128, 0.2); */
  }
  .section-mt10 {
    margin-top: 10px;
  }

  .group-line {
    margin: 5px 0px;
    border-top: dashed 1px rgba(128, 128, 128, 0.5);
  }

  .prop-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: auto;
  }
  .prop-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* margin: 5px 0; */
    /* margin: 16px 0; */
  }
  .prop-label-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin: 5px 0; */
    /* margin: 16px 0; */
  }
  .prop-button {
    padding: 2px;
  }
  .prop-icon {
    padding-top: 3px;
    font-size: 9px;
  }
  .prop-span {
    flex: auto;
  }
  .prop-mr2 {
    margin-right: 5px;
  }

  /* .icon-lock {
    padding-top: 8px !important;
  }

  .icon > span {
    padding-top: 8px !important;
  }

  ui-icon > span.icon-lock {
    padding-top: 8px !important;
  } */


  .layout.horizontal,.layout.horizontal-reverse,.layout.vertical,.layout.vertical-reverse{display:-ms-flexbox;display:-webkit-flex;display:flex}.layout.inline{display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}.layout.horizontal{-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.layout.horizontal-reverse{-ms-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.layout.vertical{-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.layout.vertical-reverse{-ms-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse}.layout.wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.layout.wrap-reverse{-ms-flex-wrap:wrap-reverse;-webkit-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-auto{-ms-flex:1 1 auto;-webkit-flex:1 1 auto;flex:1 1 auto}.flex-none{-ms-flex:none;-webkit-flex:none;flex:none}.flex,.flex-1{-ms-flex:1;-webkit-flex:1;flex:1}.flex-2{-ms-flex:2;-webkit-flex:2;flex:2}.flex-3{-ms-flex:3;-webkit-flex:3;flex:3}.flex-4{-ms-flex:4;-webkit-flex:4;flex:4}.flex-5{-ms-flex:5;-webkit-flex:5;flex:5}.flex-6{-ms-flex:6;-webkit-flex:6;flex:6}.flex-7{-ms-flex:7;-webkit-flex:7;flex:7}.flex-8{-ms-flex:8;-webkit-flex:8;flex:8}.flex-9{-ms-flex:9;-webkit-flex:9;flex:9}.flex-10{-ms-flex:10;-webkit-flex:10;flex:10}.flex-11{-ms-flex:11;-webkit-flex:11;flex:11}.flex-12{-ms-flex:12;-webkit-flex:12;flex:12}.layout.start{-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}.layout.center,.layout.center-center{-ms-flex-align:center;-webkit-align-items:center;align-items:center}.layout.end{-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}.layout.start-justified{-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start}.layout.center-center,.layout.center-justified{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.layout.end-justified{-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end}.layout.around-justified{-ms-flex-pack:around;-webkit-justify-content:space-around;justify-content:space-around}.layout.justified{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.self-start{-ms-align-self:flex-start;-webkit-align-self:flex-start;align-self:flex-start}.self-center{-ms-align-self:center;-webkit-align-self:center;align-self:center}.self-end{-ms-align-self:flex-end;-webkit-align-self:flex-end;align-self:flex-end}.self-stretch{-ms-align-self:stretch;-webkit-align-self:stretch;align-self:stretch}.block{display:block}[hidden]{display:none!important}.invisible{visibility:hidden!important}.relative{position:relative}.fit{position:absolute;top:0;right:0;bottom:0;left:0}body.fullbleed{margin:0;height:100vh}.scroll{-webkit-overflow-scrolling:touch;overflow:auto}.fixed-bottom,.fixed-left,.fixed-right,.fixed-top{position:fixed}.fixed-top{top:0;left:0;right:0}.fixed-right{top:0;right:0;bottom:0}.fixed-bottom{right:0;bottom:0;left:0}.fixed-left{top:0;bottom:0;left:0}#app,body,html{height:100%;margin:0;padding:0}:host{display:flex}.body{flex:1;height:100%;position:relative}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}#loader-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;z-index:99}#loader{display:block;position:relative;left:50%;top:50%;width:120px;height:120px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-webkit-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;-o-animation:spin 3s linear infinite;-ms-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#fff;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;-ms-animation:spin 1.5s linear infinite;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}#loader-wrapper .loader-section{position:fixed;top:150px;width:51%;height:100%;background:0 0;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}.no-js #loader-wrapper{display:none}.no-js h1{color:#222}#loader-wrapper .load-title{color:#fff;font-size:16px;width:100%;text-align:center;z-index:9999999999999;position:absolute;top:60%;opacity:1;line-height:30px}#loader-wrapper .load-title span{font-weight:400;font-style:italic;font-size:14px;color:#fff;opacity:.5}.switch{width:50px;height:20px;position:relative;background-color:var(--color-normal-fill-weakest);box-shadow:var(--color-normal-fill) 0 0 0 0 inset;border-radius:20px;background-clip:content-box;display:inline-block;-webkit-appearance:none;user-select:none;outline:0}.switch:before{content:"";width:16px;height:16px;position:absolute;top:-3;left:0;border-radius:20px;background-color:var(--color-normal-fill);border:2px solid var(--color-normal-contrast-important);box-shadow:0 1px 3px rgba(0,0,0,.4)}.switch:checked{border-color:var(--color-success-fill);box-shadow:var(--color-success-fill) 0 0 0 20px inset;background-color:var(--color-success-fill)}.switch:checked:before{left:30px}.switch.switch-anim{transition:border cubic-bezier(0,0,0,1) .4s,box-shadow cubic-bezier(0,0,0,1) .4s}.switch.switch-anim:before{transition:left .3s}.switch.switch-anim:checked{box-shadow:var(--color-success-fill) 0 0 0 16px inset;background-color:var(--color-success-fill);transition:border ease .4s,box-shadow ease .4s,background-color ease 1.2s}.switch.switch-anim:checked:before{transition:left .3s}body{font-family:Arial,sans-serif}.div-link:hover{color:#fd942b}:host{display:flex;flex-direction:column}.clerrfix{content:"";clear:both;display:block;overflow:hidden}.clearfix::after{zoom:1}h3{margin-top:0;margin-bottom:10px}.toolbar{display:flex;flex-direction:column;align-items:left;padding:10px}#loading{text-align:center;background:rgba(0,0,0,.5);z-index:99}#loading>div{position:absolute;top:calc(50% + 50px);width:100%;font-size:14px}#loading>ui-loading{position:absolute;top:calc(50% - 20px);left:50%;margin:-50px;font-size:100px}#view{flex:1;padding:10px;padding-top:0;overflow-y:auto;overflow-x:hidden}div.section{border-bottom:1px solid #666;padding-bottom:10px;margin-bottom:10px}div.section:last-child{border-bottom:0}div.group{min-width:420px;margin-bottom:5px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}span{margin-right:.25em}.select{border:none;overflow:hidden;height:inherit;width:inherit;position:relative;display:block}select{height:inherit;width:100%;background:0 0;border:none;outline:0;color:inherit;font-size:inherit;line-height:inherit;-webkit-appearance:none;cursor:pointer;padding-right:16px}.select:after{display:block;content:' ';position:absolute;top:50%;right:.8em;pointer-events:none;transform:translateX(50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--color-normal-contrast);margin-top:-3px}.serviceItem{background:var(--color-normal-fill-emphasis);border-radius:3px;min-height:24px}.serviceItem.hasGroup{background:var(--color-normal-fill)}.serviceItem.hovered:hover{background:var(--color-normal-fill-weaker);cursor:pointer}.service-item-enable-status{background:var(--color-normal-fill-important);border-radius:3px;text-align:center;width:50px;height:18px;line-height:18px;margin-top:4px}.service-item-title{flex:1;font-size:18px;margin-left:4px;margin-top:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.groupItem{background:var(--color-normal-fill-emphasis);border-radius:3px;padding-bottom:5px}.groupItem:hover{background:var(--color-normal-fill-emphasis)}.groupItem.unfolded:hover{background:var(--color-normal-fill-weaker);cursor:pointer}.group-title{color:var(--color-normal-contrast-weaker);font-size:18px;margin-left:4px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.group-folded-tips{padding:0 5px 0 10px;font-size:12px;color:var(--color-normal-contrast-important)}.config-set-content{margin-top:20px;line-height:18px;overflow-y:auto;max-height:336px;margin-right:-5px}.config-set-content>ui-prop{--left-width:30%}.config-set-content>ui-prop>div{width:100%}.config-set-content>ui-prop>div>ui-input,ui-textarea{flex:1}.pop-mask{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.5);z-index:1}.popup-rectangle{position:relative;top:calc(50% - 20px);left:calc(50% - 20px);transform:translate(-50%,-50%);min-height:24px;max-width:300px;max-height:400px;margin:20px;padding:10px;border-radius:10px;background:var(--color-normal-fill)}.filter-container{opacity:1;display:block;position:absolute;background:var(--color-normal-fill-weaker);min-width:80px;min-height:80px;max-width:250px;max-height:480px;height:75vh;top:45px;right:15px;box-shadow:0 8px 16px 0 #000;border-radius:5px}.filter-platform{height:calc(100% - 170px);overflow:hidden scroll;margin-right:-10px}.filter-platform::-webkit-scrollbar-thumb{border-radius:calc(var(--size-normal-radius) * 2px);border:calc(var(--size-normal-font) * .25px) solid transparent;background-color:var(--color-active-fill-weaker);background-clip:content-box;transition:background-color .3s}.filter-platform::-webkit-scrollbar-thumb:hover{border:calc(var(--size-normal-font) * .25px) solid transparent;background-color:var(--color-active-fill-weakest);background-clip:content-box}.filter-button{background:var(--color-default-fill)}.filter-button[pressed]{background:var(--color-primary-fill)}.pop-menu-container{opacity:1;display:block;position:absolute;background:var(--color-normal-fill-weaker);padding:7px 10px;min-width:100px;min-height:20px;max-width:200px;top:0;left:0;box-shadow:0 8px 16px 0 #000;border-radius:5px}.pop-sub-menu-container{background:var(--color-normal-fill-weaker);padding:7px 10px;min-width:100px;min-height:20px;max-width:200px;box-shadow:0 8px 16px 0 #000;border-radius:5px}.pop-menu-item{white-space:nowrap;color:var(--color-normal-contrast-weaker);font-style:normal;height:20px;width:calc(100% - 10px);margin:3px 0;line-height:20px;text-align:center;cursor:pointer;padding:0 5px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border-radius:3px}.pop-menu-item:hover{background-color:#bdbdbd;color:#333}.div-no-wrap{display:flex;justify-content:space-between}.service-detail-text{color:var(--color-normal-contrast-emphasis);font-size:12px;line-height:15px}.service-detail-jump-button{white-space:nowrap;flex:1;max-width:100px;margin:0 5px;padding:0}.service-detail-section-line{font-size:14px;color:var(--color-normal-contrast-weaker);margin-top:10px}.icon-close{position:absolute;top:10px;right:14px;cursor:pointer;z-index:9}.icon-update{margin:-1px 0 0 2px;height:16px;width:16px}.icon-close:hover{color:red}.right{transform:rotate(-90deg)}.left{transform:rotate(90deg)}.up{transform:rotate(180deg)}.down{transform:rotate(0)}a{color:#ddd;cursor:pointer}a:hover{text-decoration:underline}