/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss ***!
  \*********************************************************************************************************************************************************/
  @import url(https://fonts.googleapis.com/css?family=Maven+Pro&display=swap);
  /*!*************************************************************************************************************************************************************!*\
    !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss (1) ***!
    \*************************************************************************************************************************************************************/
  @import url(https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap);
  /*!***************************************************************************************************!*\
    !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/jsoneditor/dist/jsoneditor.min.css ***!
    \***************************************************************************************************/
  .jsoneditor .search input{height:auto;border:inherit;border:none;box-shadow:none}.jsoneditor table{border-collapse:collapse;width:auto}.jsoneditor td,.jsoneditor th{padding:0;display:table-cell;text-align:left;vertical-align:inherit;border-radius:inherit}.jsoneditor{color:#1a1a1a;border:thin solid #3883fa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;position:relative;padding:0;line-height:100%}div.jsoneditor-default,div.jsoneditor-field,div.jsoneditor-readonly,div.jsoneditor-value{border:1px solid transparent;min-height:16px;min-width:32px;padding:2px;margin:1px;word-wrap:break-word;float:left}div.jsoneditor-field p,div.jsoneditor-value p{margin:0}div.jsoneditor-value{word-break:break-word}div.jsoneditor-value.jsoneditor-empty::after{content:"value"}div.jsoneditor-value.jsoneditor-string{color:#006000}div.jsoneditor-value.jsoneditor-number{color:#ee422e}div.jsoneditor-value.jsoneditor-boolean{color:#ff8c00}div.jsoneditor-value.jsoneditor-null{color:#004ed0}div.jsoneditor-value.jsoneditor-invalid{color:#000}div.jsoneditor-readonly{min-width:16px;color:grey}div.jsoneditor-empty{border-color:#d3d3d3;border-style:dashed;border-radius:2px}div.jsoneditor-field.jsoneditor-empty::after{content:"field"}div.jsoneditor td{vertical-align:top}div.jsoneditor td.jsoneditor-separator{padding:3px 0;vertical-align:top;color:grey}div.jsoneditor td.jsoneditor-tree{vertical-align:top}div.jsoneditor div.jsoneditor-anchor{cursor:pointer}div.jsoneditor div.jsoneditor-anchor .picker_wrapper.popup.popup_bottom{top:28px;left:-10px}div.jsoneditor.busy pre.jsoneditor-preview{background:#f5f5f5;color:grey}div.jsoneditor.busy div.jsoneditor-busy{display:inherit}div.jsoneditor code.jsoneditor-preview{background:0 0}div.jsoneditor.jsoneditor-mode-preview pre.jsoneditor-preview{width:100%;height:100%;box-sizing:border-box;overflow:auto;padding:2px;margin:0;white-space:pre-wrap;word-break:break-all}div.jsoneditor-default{color:grey;padding-left:10px}div.jsoneditor-tree{width:100%;height:100%;position:relative;overflow:auto}div.jsoneditor-tree button.jsoneditor-button{width:24px;height:24px;padding:0;margin:0;border:none;cursor:pointer;background:transparent url(../js/../img/15f2789dd231f36d43a4.svg)}div.jsoneditor-tree button.jsoneditor-button:focus{background-color:#f5f5f5;outline:#e5e5e5 solid 1px}div.jsoneditor-tree button.jsoneditor-collapsed{background-position:0 -48px}div.jsoneditor-tree button.jsoneditor-expanded{background-position:0 -72px}div.jsoneditor-tree button.jsoneditor-contextmenu-button{background-position:-48px -72px}div.jsoneditor-tree button.jsoneditor-invisible{visibility:hidden;background:0 0}div.jsoneditor-tree button.jsoneditor-dragarea{background:url(../js/../img/15f2789dd231f36d43a4.svg) -72px -72px;cursor:move}div.jsoneditor-tree :focus{outline:0}div.jsoneditor-tree div.jsoneditor-show-more{display:inline-block;padding:3px 4px;margin:2px 0;background-color:#e5e5e5;border-radius:3px;color:grey;font-family:arial,sans-serif;font-size:10pt}div.jsoneditor-tree div.jsoneditor-show-more a{display:inline-block;color:grey}div.jsoneditor-tree div.jsoneditor-color{display:inline-block;width:12px;height:12px;margin:4px;border:1px solid grey;cursor:pointer}div.jsoneditor-tree div.jsoneditor-date{background:#a1a1a1;color:#fff;font-family:arial,sans-serif;border-radius:3px;display:inline-block;padding:3px;margin:0 3px}div.jsoneditor-tree table.jsoneditor-tree{border-collapse:collapse;border-spacing:0;width:100%}div.jsoneditor-tree .jsoneditor-button.jsoneditor-schema-error{width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../js/../img/15f2789dd231f36d43a4.svg) -168px -48px}div.jsoneditor-outer{position:static;width:100%;height:100%;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}div.jsoneditor-outer.has-nav-bar{margin-top:-26px;padding-top:26px}div.jsoneditor-outer.has-nav-bar.has-main-menu-bar{margin-top:-61px;padding-top:61px}div.jsoneditor-outer.has-status-bar{margin-bottom:-26px;padding-bottom:26px}div.jsoneditor-outer.has-main-menu-bar{margin-top:-35px;padding-top:35px}div.jsoneditor-busy{position:absolute;top:15%;left:0;box-sizing:border-box;width:100%;text-align:center;display:none}div.jsoneditor-busy span{background-color:#ffffab;border:1px solid #fe0;border-radius:3px;padding:5px 15px;box-shadow:0 0 5px rgba(0,0,0,.4)}div.jsoneditor-field.jsoneditor-empty::after,div.jsoneditor-value.jsoneditor-empty::after{pointer-events:none;color:#d3d3d3;font-size:8pt}a.jsoneditor-value.jsoneditor-url,div.jsoneditor-value.jsoneditor-url{color:#006000;text-decoration:underline}a.jsoneditor-value.jsoneditor-url{display:inline-block;padding:2px;margin:2px}a.jsoneditor-value.jsoneditor-url:focus,a.jsoneditor-value.jsoneditor-url:hover{color:#ee422e}div.jsoneditor-field.jsoneditor-highlight,div.jsoneditor-field[contenteditable=true]:focus,div.jsoneditor-field[contenteditable=true]:hover,div.jsoneditor-value.jsoneditor-highlight,div.jsoneditor-value[contenteditable=true]:focus,div.jsoneditor-value[contenteditable=true]:hover{background-color:#ffffab;border:1px solid #fe0;border-radius:2px}div.jsoneditor-field.jsoneditor-highlight-active,div.jsoneditor-field.jsoneditor-highlight-active:focus,div.jsoneditor-field.jsoneditor-highlight-active:hover,div.jsoneditor-value.jsoneditor-highlight-active,div.jsoneditor-value.jsoneditor-highlight-active:focus,div.jsoneditor-value.jsoneditor-highlight-active:hover{background-color:#fe0;border:1px solid #ffc700;border-radius:2px}div.jsoneditor-value.jsoneditor-array,div.jsoneditor-value.jsoneditor-object{min-width:16px}div.jsoneditor-tree button.jsoneditor-contextmenu-button.jsoneditor-selected,div.jsoneditor-tree button.jsoneditor-contextmenu-button:focus,div.jsoneditor-tree button.jsoneditor-contextmenu-button:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button{background-position:-48px -48px}div.jsoneditor-tree div.jsoneditor-show-more a:focus,div.jsoneditor-tree div.jsoneditor-show-more a:hover{color:#ee422e}.ace-jsoneditor,textarea.jsoneditor-text{min-height:150px}textarea.jsoneditor-text{width:100%;height:100%;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;outline-width:0;border:none;background-color:#fff;resize:none}tr.jsoneditor-highlight,tr.jsoneditor-selected{background-color:#d3d3d3}tr.jsoneditor-selected button.jsoneditor-contextmenu-button,tr.jsoneditor-selected button.jsoneditor-dragarea{visibility:hidden}tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-contextmenu-button,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{visibility:visible}div.jsoneditor-tree button.jsoneditor-dragarea:focus,div.jsoneditor-tree button.jsoneditor-dragarea:hover,tr.jsoneditor-selected.jsoneditor-first button.jsoneditor-dragarea{background-position:-72px -48px}div.jsoneditor td,div.jsoneditor th,div.jsoneditor tr{padding:0;margin:0}.jsoneditor-popover,.jsoneditor-schema-error,div.jsoneditor td,div.jsoneditor textarea,div.jsoneditor th,div.jsoneditor-field,div.jsoneditor-value,pre.jsoneditor-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;color:#1a1a1a}.jsoneditor-schema-error{cursor:default;display:inline-block;height:24px;line-height:24px;position:relative;text-align:center;width:24px}.jsoneditor-popover{background-color:#4c4c4c;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.4);color:#fff;padding:7px 10px;position:absolute;cursor:auto;width:200px}.jsoneditor-popover.jsoneditor-above{bottom:32px;left:-98px}.jsoneditor-popover.jsoneditor-above:before{border-top:7px solid #4c4c4c;bottom:-7px}.jsoneditor-popover.jsoneditor-below{top:32px;left:-98px}.jsoneditor-popover.jsoneditor-below:before{border-bottom:7px solid #4c4c4c;top:-7px}.jsoneditor-popover.jsoneditor-left{top:-7px;right:32px}.jsoneditor-popover.jsoneditor-left:before{border-left:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;right:-14px;left:inherit;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover.jsoneditor-right{top:-7px;left:32px}.jsoneditor-popover.jsoneditor-right:before{border-right:7px solid #4c4c4c;border-top:7px solid transparent;border-bottom:7px solid transparent;content:"";top:19px;left:-14px;margin-left:inherit;margin-top:-7px;position:absolute}.jsoneditor-popover:before{border-right:7px solid transparent;border-left:7px solid transparent;content:"";display:block;left:50%;margin-left:-7px;position:absolute}.jsoneditor-text-errors tr.jump-to-line:hover{text-decoration:underline;cursor:pointer}.jsoneditor-schema-error:focus .jsoneditor-popover,.jsoneditor-schema-error:hover .jsoneditor-popover{display:block;animation:fade-in .3s linear 1,move-up .3s linear 1}@keyframes fade-in{from{opacity:0}to{opacity:1}}.jsoneditor .jsoneditor-validation-errors-container{max-height:130px;overflow-y:auto}.jsoneditor .jsoneditor-validation-errors{width:100%;overflow:hidden}.jsoneditor .jsoneditor-additional-errors{position:absolute;margin:auto;bottom:31px;left:calc(50% - 92px);color:grey;background-color:#ebebeb;padding:7px 15px;border-radius:8px}.jsoneditor .jsoneditor-additional-errors.visible{visibility:visible;opacity:1;transition:opacity 2s linear}.jsoneditor .jsoneditor-additional-errors.hidden{visibility:hidden;opacity:0;transition:visibility 0s 2s,opacity 2s linear}.jsoneditor .jsoneditor-text-errors{width:100%;border-collapse:collapse;border-top:1px solid #ffc700}.jsoneditor .jsoneditor-text-errors td{padding:3px 6px;vertical-align:middle}.jsoneditor .jsoneditor-text-errors td pre{margin:0;white-space:normal}.jsoneditor .jsoneditor-text-errors tr{background-color:#ffffab}.jsoneditor .jsoneditor-text-errors tr.parse-error{background-color:#ee2e2e70}.jsoneditor-text-errors .jsoneditor-schema-error{border:none;width:24px;height:24px;padding:0;margin:0 4px 0 0;cursor:pointer}.jsoneditor-text-errors tr .jsoneditor-schema-error{background:url(../js/../img/15f2789dd231f36d43a4.svg) -168px -48px}.jsoneditor-text-errors tr.parse-error .jsoneditor-schema-error{background:url(../js/../img/15f2789dd231f36d43a4.svg) -25px 0}.fadein{-webkit-animation:fadein .3s;animation:fadein .3s;-moz-animation:fadein .3s;-o-animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.jsoneditor-contextmenu-root{position:relative;width:0;height:0}.jsoneditor-contextmenu{position:absolute;box-sizing:content-box;z-index:1}.jsoneditor-contextmenu .jsoneditor-menu{position:relative;left:0;top:0;width:128px;height:auto;background:#fff;border:1px solid #d3d3d3;box-shadow:2px 2px 12px rgba(128,128,128,.3);list-style:none;margin:0;padding:0}.jsoneditor-contextmenu .jsoneditor-menu button{position:relative;padding:0 4px 0 0;margin:0;width:128px;height:auto;border:none;cursor:pointer;color:#4d4d4d;background:0 0;font-size:10pt;font-family:arial,sans-serif;box-sizing:border-box;text-align:left}.jsoneditor-contextmenu .jsoneditor-menu button::-moz-focus-inner{padding:0;border:0}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-default{width:96px}.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand{float:right;width:32px;height:24px;border-left:1px solid #e5e5e5}.jsoneditor-contextmenu .jsoneditor-menu li{overflow:hidden}.jsoneditor-contextmenu .jsoneditor-menu li ul{display:none;position:relative;left:-10px;top:0;border:none;box-shadow:inset 0 0 10px rgba(128,128,128,.5);padding:0 10px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.jsoneditor-contextmenu .jsoneditor-menu li ul .jsoneditor-icon{margin-left:24px}.jsoneditor-contextmenu .jsoneditor-menu li ul li button{padding-left:24px;animation:all ease-in-out 1s}.jsoneditor-contextmenu .jsoneditor-menu li button .jsoneditor-expand{position:absolute;top:0;right:0;width:24px;height:24px;padding:0;margin:0 4px 0 0;background:url(../js/../img/15f2789dd231f36d43a4.svg) 0 -72px}.jsoneditor-contextmenu .jsoneditor-icon{position:absolute;top:0;left:0;width:24px;height:24px;border:none;padding:0;margin:0;background-image:url(../js/../img/15f2789dd231f36d43a4.svg)}.jsoneditor-contextmenu .jsoneditor-text{padding:4px 0 4px 24px;word-wrap:break-word}.jsoneditor-contextmenu .jsoneditor-text.jsoneditor-right-margin{padding-right:24px}.jsoneditor-contextmenu .jsoneditor-separator{height:0;border-top:1px solid #e5e5e5;padding-top:5px;margin-top:5px}.jsoneditor-contextmenu button.jsoneditor-remove .jsoneditor-icon{background-position:-24px 0}.jsoneditor-contextmenu button.jsoneditor-append .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-insert .jsoneditor-icon{background-position:0 0}.jsoneditor-contextmenu button.jsoneditor-duplicate .jsoneditor-icon{background-position:-48px 0}.jsoneditor-contextmenu button.jsoneditor-sort-asc .jsoneditor-icon{background-position:-168px 0}.jsoneditor-contextmenu button.jsoneditor-sort-desc .jsoneditor-icon{background-position:-192px 0}.jsoneditor-contextmenu button.jsoneditor-transform .jsoneditor-icon{background-position:-216px 0}.jsoneditor-contextmenu button.jsoneditor-extract .jsoneditor-icon{background-position:0 -24px}.jsoneditor-contextmenu button.jsoneditor-type-string .jsoneditor-icon{background-position:-144px 0}.jsoneditor-contextmenu button.jsoneditor-type-auto .jsoneditor-icon{background-position:-120px 0}.jsoneditor-contextmenu button.jsoneditor-type-object .jsoneditor-icon{background-position:-72px 0}.jsoneditor-contextmenu button.jsoneditor-type-array .jsoneditor-icon{background-position:-96px 0}.jsoneditor-contextmenu button.jsoneditor-type-modes .jsoneditor-icon{background-image:none;width:6px}.jsoneditor-contextmenu li,.jsoneditor-contextmenu ul{box-sizing:content-box;position:relative}.jsoneditor-contextmenu .jsoneditor-menu button:focus,.jsoneditor-contextmenu .jsoneditor-menu button:hover{color:#1a1a1a;background-color:#f5f5f5;outline:0}.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover{color:#fff;background-color:#ee422e}.jsoneditor-contextmenu .jsoneditor-menu li ul li button:focus,.jsoneditor-contextmenu .jsoneditor-menu li ul li button:hover{background-color:#f5f5f5}.jsoneditor-modal{max-width:95%;border-radius:2px!important;padding:45px 15px 15px 15px!important;box-shadow:2px 2px 12px rgba(128,128,128,.3);color:#4d4d4d;line-height:1.3em}.jsoneditor-modal.jsoneditor-modal-transform{width:600px!important}.jsoneditor-modal .pico-modal-header{position:absolute;box-sizing:border-box;top:0;left:0;width:100%;padding:0 10px;height:30px;line-height:30px;font-family:arial,sans-serif;font-size:11pt;background:#3883fa;color:#fff}.jsoneditor-modal table{width:100%}.jsoneditor-modal table td{padding:3px 0}.jsoneditor-modal table td.jsoneditor-modal-input{text-align:right;padding-right:0;white-space:nowrap}.jsoneditor-modal table td.jsoneditor-modal-actions{padding-top:15px}.jsoneditor-modal table th{vertical-align:middle}.jsoneditor-modal p:first-child{margin-top:0}.jsoneditor-modal a{color:#3883fa}.jsoneditor-modal .jsoneditor-jmespath-block{margin-bottom:10px}.jsoneditor-modal .pico-close{background:0 0!important;font-size:24px!important;top:7px!important;right:7px!important;color:#fff}.jsoneditor-modal input{padding:4px}.jsoneditor-modal input[type=text]{cursor:inherit}.jsoneditor-modal input[disabled]{background:#d3d3d3;color:grey}.jsoneditor-modal .jsoneditor-select-wrapper{position:relative;display:inline-block}.jsoneditor-modal .jsoneditor-select-wrapper:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #666;position:absolute;right:8px;top:14px;pointer-events:none}.jsoneditor-modal select{padding:3px 24px 3px 10px;min-width:180px;max-width:350px;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:0;text-overflow:"";font-size:10pt;line-height:1.5em}.jsoneditor-modal select::-ms-expand{display:none}.jsoneditor-modal .jsoneditor-button-group input{padding:4px 10px;margin:0;border-radius:0;border-left-style:none}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-first{border-top-left-radius:3px;border-bottom-left-radius:3px;border-left-style:solid}.jsoneditor-modal .jsoneditor-button-group input.jsoneditor-button-last{border-top-right-radius:3px;border-bottom-right-radius:3px}.jsoneditor-modal .jsoneditor-transform-preview{background:#f5f5f5;height:200px}.jsoneditor-modal .jsoneditor-transform-preview.jsoneditor-error{color:#ee422e}.jsoneditor-modal .jsoneditor-jmespath-wizard{line-height:1.2em;width:100%;padding:0;border-radius:3px}.jsoneditor-modal .jsoneditor-jmespath-label{font-weight:700;color:#1e90ff;margin-top:20px;margin-bottom:5px}.jsoneditor-modal .jsoneditor-jmespath-wizard-table{width:100%;border-collapse:collapse}.jsoneditor-modal .jsoneditor-jmespath-wizard-label{font-style:italic;margin:4px 0 2px 0}.jsoneditor-modal .jsoneditor-inline{position:relative;display:inline-block;width:100%;padding-top:2px;padding-bottom:2px}.jsoneditor-modal .jsoneditor-inline:not(:last-child){padding-right:2px}.jsoneditor-modal .jsoneditor-jmespath-filter{display:flex;flex-wrap:wrap}.jsoneditor-modal .jsoneditor-jmespath-filter-field{width:180px}.jsoneditor-modal .jsoneditor-jmespath-filter-relation{width:100px}.jsoneditor-modal .jsoneditor-jmespath-filter-value{min-width:180px;flex:1}.jsoneditor-modal .jsoneditor-jmespath-sort-field{width:170px}.jsoneditor-modal .jsoneditor-jmespath-sort-order{width:150px}.jsoneditor-modal .jsoneditor-jmespath-select-fields{width:100%}.jsoneditor-modal .selectr-selected{border-color:#d3d3d3;padding:4px 28px 4px 8px}.jsoneditor-modal .selectr-selected .selectr-tag{background-color:#3883fa;border-radius:5px}.jsoneditor-modal table td,.jsoneditor-modal table th{text-align:left;vertical-align:middle;font-weight:400;color:#4d4d4d;border-spacing:0;border-collapse:collapse}.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal select,.jsoneditor-modal textarea{background:#fff;border:1px solid #d3d3d3;color:#4d4d4d;border-radius:3px;padding:4px}.jsoneditor-modal,.jsoneditor-modal #query,.jsoneditor-modal input,.jsoneditor-modal option,.jsoneditor-modal select,.jsoneditor-modal table td,.jsoneditor-modal table th,.jsoneditor-modal textarea{font-size:10.5pt;font-family:arial,sans-serif}.jsoneditor-modal #query,.jsoneditor-modal .jsoneditor-transform-preview{font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt;width:100%;box-sizing:border-box}.jsoneditor-modal input[type=button],.jsoneditor-modal input[type=submit]{background:#f5f5f5;padding:4px 20px}.jsoneditor-modal input,.jsoneditor-modal select{cursor:pointer}.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc{background:#3883fa;border-color:#3883fa;color:#fff}.jsoneditor-menu{width:100%;height:35px;padding:2px;margin:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;background-color:#3883fa;border-bottom:1px solid #3883fa}.jsoneditor-menu>.jsoneditor-modes>button,.jsoneditor-menu>button{width:26px;height:26px;margin:2px;padding:0;border-radius:2px;border:1px solid transparent;background:transparent url(../js/../img/15f2789dd231f36d43a4.svg);color:#fff;opacity:.8;font-family:arial,sans-serif;font-size:10pt;float:left}.jsoneditor-menu>.jsoneditor-modes>button:hover,.jsoneditor-menu>button:hover{background-color:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4)}.jsoneditor-menu>.jsoneditor-modes>button:active,.jsoneditor-menu>.jsoneditor-modes>button:focus,.jsoneditor-menu>button:active,.jsoneditor-menu>button:focus{background-color:rgba(255,255,255,.3)}.jsoneditor-menu>.jsoneditor-modes>button:disabled,.jsoneditor-menu>button:disabled{opacity:.5;background-color:transparent;border:none}.jsoneditor-menu>button.jsoneditor-collapse-all{background-position:0 -96px}.jsoneditor-menu>button.jsoneditor-expand-all{background-position:0 -120px}.jsoneditor-menu>button.jsoneditor-sort{background-position:-120px -96px}.jsoneditor-menu>button.jsoneditor-transform{background-position:-144px -96px}.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-form>.jsoneditor-menu>button.jsoneditor-transform,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-sort,.jsoneditor.jsoneditor-mode-view>.jsoneditor-menu>button.jsoneditor-transform{display:none}.jsoneditor-menu>button.jsoneditor-undo{background-position:-24px -96px}.jsoneditor-menu>button.jsoneditor-undo:disabled{background-position:-24px -120px}.jsoneditor-menu>button.jsoneditor-redo{background-position:-48px -96px}.jsoneditor-menu>button.jsoneditor-redo:disabled{background-position:-48px -120px}.jsoneditor-menu>button.jsoneditor-compact{background-position:-72px -96px}.jsoneditor-menu>button.jsoneditor-format{background-position:-72px -120px}.jsoneditor-menu>button.jsoneditor-repair{background-position:-96px -96px}.jsoneditor-menu>.jsoneditor-modes{display:inline-block;float:left}.jsoneditor-menu>.jsoneditor-modes>button{background-image:none;width:auto;padding-left:6px;padding-right:6px}.jsoneditor-menu>.jsoneditor-modes>button.jsoneditor-separator,.jsoneditor-menu>button.jsoneditor-separator{margin-left:10px}.jsoneditor-menu a{font-family:arial,sans-serif;font-size:10pt;color:#fff;opacity:.8;vertical-align:middle}.jsoneditor-menu a:hover{opacity:1}.jsoneditor-menu a.jsoneditor-poweredBy{font-size:8pt;position:absolute;right:0;top:0;padding:10px}.jsoneditor-search{font-family:arial,sans-serif;position:absolute;right:4px;top:4px;border-collapse:collapse;border-spacing:0;display:flex}.jsoneditor-search input{color:#1a1a1a;width:120px;border:none;outline:0;margin:1px;line-height:20px}.jsoneditor-search button{width:16px;height:24px;padding:0;margin:0;border:none;background:url(../js/../img/15f2789dd231f36d43a4.svg);vertical-align:top}.jsoneditor-search button:hover{background-color:transparent}.jsoneditor-search button.jsoneditor-refresh{width:18px;background-position:-99px -73px}.jsoneditor-search button.jsoneditor-next{cursor:pointer;background-position:-124px -73px}.jsoneditor-search button.jsoneditor-next:hover{background-position:-124px -49px}.jsoneditor-search button.jsoneditor-previous{cursor:pointer;background-position:-148px -73px;margin-right:2px}.jsoneditor-search button.jsoneditor-previous:hover{background-position:-148px -49px}.jsoneditor-results{font-family:arial,sans-serif;color:#fff;padding-right:5px;line-height:26px}.jsoneditor-frame{border:1px solid transparent;background-color:#fff;padding:0 2px;margin:0}.jsoneditor .autocomplete.dropdown{position:absolute;background:#fff;box-shadow:2px 2px 12px rgba(128,128,128,.3);border:1px solid #d3d3d3;overflow-x:hidden;overflow-y:auto;cursor:default;margin:0;padding:5px;text-align:left;outline:0;font-family:"dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;font-size:10pt}.jsoneditor .autocomplete.dropdown .item{color:#333}.jsoneditor .autocomplete.dropdown .item.hover{background-color:#ddd}.jsoneditor .autocomplete.hint{color:#aaa;top:4px;left:4px}.jsoneditor-treepath{padding:0 5px;overflow:hidden;white-space:nowrap;outline:0}.jsoneditor-treepath.show-all{word-wrap:break-word;white-space:normal;position:absolute;background-color:#ebebeb;z-index:1;box-shadow:2px 2px 12px rgba(128,128,128,.3)}.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn{display:none}.jsoneditor-treepath div.jsoneditor-contextmenu-root{position:absolute;left:0}.jsoneditor-treepath .jsoneditor-treepath-show-all-btn{position:absolute;background-color:#ebebeb;left:0;height:20px;padding:0 3px;cursor:pointer}.jsoneditor-treepath .jsoneditor-treepath-element{margin:1px;font-family:arial,sans-serif;font-size:10pt}.jsoneditor-treepath .jsoneditor-treepath-seperator{margin:2px;font-size:9pt;font-family:arial,sans-serif}.jsoneditor-treepath span.jsoneditor-treepath-element:hover,.jsoneditor-treepath span.jsoneditor-treepath-seperator:hover{cursor:pointer;text-decoration:underline}.jsoneditor-statusbar{line-height:26px;height:26px;color:grey;background-color:#ebebeb;border-top:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:10pt}.jsoneditor-statusbar>.jsoneditor-curserinfo-val{margin-right:12px}.jsoneditor-statusbar>.jsoneditor-curserinfo-count{margin-left:4px}.jsoneditor-statusbar>.jsoneditor-validation-error-icon{float:right;width:24px;height:24px;padding:0;margin-top:1px;background:url(../js/../img/15f2789dd231f36d43a4.svg) -168px -48px;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-validation-error-count{float:right;margin:0 4px 0 0;cursor:pointer}.jsoneditor-statusbar>.jsoneditor-parse-error-icon{float:right;width:24px;height:24px;padding:0;margin:1px;background:url(../js/../img/15f2789dd231f36d43a4.svg) -25px 0}.jsoneditor-statusbar .jsoneditor-array-info a{color:inherit}div.jsoneditor-statusbar>.jsoneditor-curserinfo-label,div.jsoneditor-statusbar>.jsoneditor-size-info{margin:0 4px}.jsoneditor-navigation-bar{width:100%;height:26px;line-height:26px;padding:0;margin:0;border-bottom:1px solid #d3d3d3;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;color:grey;background-color:#ebebeb;overflow:hidden;font-family:arial,sans-serif;font-size:10pt}/*!
   * Selectr 2.4.0
   * https://github.com/Mobius1/Selectr
   *
   * Released under the MIT license
   */.selectr-container{position:relative}.selectr-container li{list-style:none}.selectr-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0 none}.selectr-visible{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:11}.selectr-desktop.multiple .selectr-visible{display:none}.selectr-desktop.multiple.native-open .selectr-visible{top:100%;min-height:200px!important;height:auto;opacity:1;display:block}.selectr-container.multiple.selectr-mobile .selectr-selected{z-index:0}.selectr-selected{position:relative;z-index:1;box-sizing:border-box;width:100%;padding:7px 28px 7px 14px;cursor:pointer;border:1px solid #999;border-radius:3px;background-color:#fff}.selectr-selected::before{position:absolute;top:50%;right:10px;width:0;height:0;content:'';-o-transform:rotate(0) translate3d(0,-50%,0);-ms-transform:rotate(0) translate3d(0,-50%,0);-moz-transform:rotate(0) translate3d(0,-50%,0);-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0);border-width:4px 4px 0 4px;border-style:solid;border-color:#6c7a86 transparent transparent}.selectr-container.native-open .selectr-selected::before,.selectr-container.open .selectr-selected::before{border-width:0 4px 4px 4px;border-style:solid;border-color:transparent transparent #6c7a86}.selectr-label{display:none;overflow:hidden;width:100%;white-space:nowrap;text-overflow:ellipsis}.selectr-placeholder{color:#6c7a86}.selectr-tags{margin:0;padding:0;white-space:normal}.has-selected .selectr-tags{margin:0 0 -2px}.selectr-tag{list-style:none;position:relative;float:left;padding:2px 25px 2px 8px;margin:0 2px 2px 0;cursor:default;color:#fff;border:medium none;border-radius:10px;background:#acb7bf none repeat scroll 0 0}.selectr-container.multiple.has-selected .selectr-selected{padding:5px 28px 5px 5px}.selectr-options-container{position:absolute;z-index:10000;top:calc(100% - 1px);left:0;display:none;box-sizing:border-box;width:100%;border-width:0 1px 1px;border-style:solid;border-color:transparent #999 #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.open .selectr-options-container{display:block}.selectr-input-container{position:relative;display:none}.selectr-clear,.selectr-input-clear,.selectr-tag-remove{position:absolute;top:50%;right:22px;width:20px;height:20px;padding:0;cursor:pointer;-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);border:medium none;background-color:transparent;z-index:11}.selectr-clear,.selectr-input-clear{display:none}.selectr-container.has-selected .selectr-clear,.selectr-input-container.active .selectr-input-clear{display:block}.selectr-selected .selectr-tag-remove{right:2px}.selectr-clear::after,.selectr-clear::before,.selectr-input-clear::after,.selectr-input-clear::before,.selectr-tag-remove::after,.selectr-tag-remove::before{position:absolute;top:5px;left:9px;width:2px;height:10px;content:' ';background-color:#6c7a86}.selectr-tag-remove::after,.selectr-tag-remove::before{top:4px;width:3px;height:12px;background-color:#fff}.selectr-clear:before,.selectr-input-clear::before,.selectr-tag-remove::before{-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.selectr-clear:after,.selectr-input-clear::after,.selectr-tag-remove::after{-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.selectr-input-container.active,.selectr-input-container.active .selectr-clear{display:block}.selectr-input{top:5px;left:5px;box-sizing:border-box;width:calc(100% - 30px);margin:10px 15px;padding:7px 30px 7px 9px;border:1px solid #999;border-radius:3px}.selectr-notice{display:none;box-sizing:border-box;width:100%;padding:8px 16px;border-top:1px solid #999;border-radius:0 0 3px 3px;background-color:#fff}.selectr-container.notice .selectr-notice{display:block}.selectr-container.notice .selectr-selected{border-radius:3px 3px 0 0}.selectr-options{position:relative;top:calc(100% + 2px);display:none;overflow-x:auto;overflow-y:scroll;max-height:200px;margin:0;padding:0}.selectr-container.notice .selectr-options-container,.selectr-container.open .selectr-input-container,.selectr-container.open .selectr-options{display:block}.selectr-option{position:relative;display:block;padding:5px 20px;list-style:outside none none;cursor:pointer;font-weight:400}.selectr-options.optgroups>.selectr-option{padding-left:25px}.selectr-optgroup{font-weight:700;padding:0}.selectr-optgroup--label{font-weight:700;margin-top:10px;padding:5px 15px}.selectr-match{text-decoration:underline}.selectr-option.selected{background-color:#ddd}.selectr-option.active{color:#fff;background-color:#5897fb}.selectr-option.disabled{opacity:.4}.selectr-option.excluded{display:none}.selectr-container.open .selectr-selected{border-color:#999 #999 transparent #999;border-radius:3px 3px 0 0}.selectr-container.open .selectr-selected::after{-o-transform:rotate(180deg) translate3d(0,50%,0);-ms-transform:rotate(180deg) translate3d(0,50%,0);-moz-transform:rotate(180deg) translate3d(0,50%,0);-webkit-transform:rotate(180deg) translate3d(0,50%,0);transform:rotate(180deg) translate3d(0,50%,0)}.selectr-disabled{opacity:.6}.has-selected .selectr-placeholder,.selectr-empty{display:none}.has-selected .selectr-label{display:block}.taggable .selectr-selected{padding:4px 28px 4px 4px}.taggable .selectr-selected::after{display:table;content:" ";clear:both}.taggable .selectr-label{width:auto}.taggable .selectr-tags{float:left;display:block}.taggable .selectr-placeholder{display:none}.input-tag{float:left;min-width:90px;width:auto}.selectr-tag-input{border:medium none;padding:3px 10px;width:100%;font-family:inherit;font-weight:inherit;font-size:inherit}.selectr-input-container.loading::after{position:absolute;top:50%;right:20px;width:20px;height:20px;content:'';-o-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-o-transform-origin:50% 0 0;-ms-transform-origin:50% 0 0;-moz-transform-origin:50% 0 0;-webkit-transform-origin:50% 0 0;transform-origin:50% 0 0;-moz-animation:.5s linear 0s normal forwards infinite running spin;-webkit-animation:.5s linear 0s normal forwards infinite running spin;animation:.5s linear 0s normal forwards infinite running spin;border-width:3px;border-style:solid;border-color:#aaa #ddd #ddd;border-radius:50%}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}@keyframes spin{0%{-webkit-transform:rotate(0) translate3d(0,-50%,0);transform:rotate(0) translate3d(0,-50%,0)}100%{-webkit-transform:rotate(360deg) translate3d(0,-50%,0);transform:rotate(360deg) translate3d(0,-50%,0)}}.selectr-container.open.inverted .selectr-selected{border-color:transparent #999 #999;border-radius:0 0 3px 3px}.selectr-container.inverted .selectr-options-container{border-width:1px 1px 0;border-color:#999 #999 transparent;border-radius:3px 3px 0 0;background-color:#fff}.selectr-container.inverted .selectr-options-container{top:auto;bottom:calc(100% - 1px)}.selectr-container ::-webkit-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::-moz-placeholder{color:#6c7a86;opacity:1}.selectr-container :-ms-input-placeholder{color:#6c7a86;opacity:1}.selectr-container ::placeholder{color:#6c7a86;opacity:1}
  /*!*************************************************************************************************************************************************************!*\
    !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/styles.scss (2) ***!
    \*************************************************************************************************************************************************************/
  @charset "UTF-8";
  @font-face {
    font-family: "icomoon";
    src: url(../fonts/icomoon.eot);
    src: url(../fonts/icomoon.eot?ebncm4#iefix) format("embedded-opentype"), url(../fonts/icomoon.ttf?ebncm4) format("truetype"), url(../fonts/icomoon.woff?ebncm4) format("woff"), url(../fonts/icomoon.svg?ebncm4#icomoon) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  :root {
    --menu-height: 100px;
    --footer-height: 41px;
    --content-height: calc(100vh - var(--menu-height) - var(--footer-height));
  }
  
  /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  /* Document
     ========================================================================== */
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in
   *    IE on Windows Phone and in iOS.
   */
  html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  /**
   * Remove the margin in all browsers (opinionated).
   */
  body {
    margin: 0;
  }
  
  /**
   * Add the correct display in IE 9-.
   */
  article,
  aside,
  footer,
  header,
  nav,
  section {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   * 1. Add the correct display in IE.
   */
  figcaption,
  figure,
  main { /* 1 */
    display: block;
  }
  
  /**
   * Add the correct margin in IE 8.
   */
  figure {
    margin: 1em 40px;
  }
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  /**
   * 1. Remove the gray background on active links in IE 10.
   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
   */
  a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
   */
  b,
  strong {
    font-weight: inherit;
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font style in Android 4.3-.
   */
  dfn {
    font-style: italic;
  }
  
  /**
   * Add the correct background and color in IE 9-.
   */
  mark {
    background-color: #ff0;
    color: #000;
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  audio,
  video {
    display: inline-block;
  }
  
  /**
   * Add the correct display in iOS 4-7.
   */
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  
  /**
   * Remove the border on images inside links in IE 10-.
   */
  img {
    border-style: none;
  }
  
  /**
   * Hide the overflow in IE.
   */
  svg:not(:root) {
    overflow: hidden;
  }
  
  /* Forms
     ========================================================================== */
  /**
   * 1. Change the font styles in all browsers (opinionated).
   * 2. Remove the margin in Firefox and Safari.
   */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   *    controls in Android 4.
   * 2. Correct the inability to style clickable types in iOS and Safari.
   */
  button,
  html [type=button],
  [type=reset],
  [type=submit] {
    -webkit-appearance: button; /* 2 */
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  button::-moz-focus-inner,
  [type=button]::-moz-focus-inner,
  [type=reset]::-moz-focus-inner,
  [type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  button:-moz-focusring,
  [type=button]:-moz-focusring,
  [type=reset]:-moz-focusring,
  [type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * 1. Add the correct display in IE 9-.
   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  
  /**
   * Remove the default vertical scrollbar in IE.
   */
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10-.
   * 2. Remove the padding in IE 10-.
   */
  [type=checkbox],
  [type=radio] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  [type=search] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   */
  [type=search]::-webkit-search-cancel-button,
  [type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  /*
   * Add the correct display in IE 9-.
   * 1. Add the correct display in Edge, IE, and Firefox.
   */
  details,
  menu {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  summary {
    display: list-item;
  }
  
  /* Scripting
     ========================================================================== */
  /**
   * Add the correct display in IE 9-.
   */
  canvas {
    display: inline-block;
  }
  
  /**
   * Add the correct display in IE.
   */
  template {
    display: none;
  }
  
  /* Hidden
     ========================================================================== */
  /**
   * Add the correct display in IE 10-.
   */
  [hidden] {
    display: none;
  }
  
  /* Generic */
  @keyframes dotAnim {
    0% {
      transform: scale(0.6) rotate(0deg);
      border-radius: 50%;
    }
    50% {
      transform: scale(1.2) rotate(-180deg);
      border-radius: 0;
    }
    100% {
      transform: scale(0.6) rotate(-360deg);
      border-radius: 50%;
    }
  }
  @keyframes navSlide {
    0% {
      right: 0;
      border-left-width: 0px;
    }
    100% {
      right: -15px;
      border-left-width: 15px;
    }
  }
  @keyframes loadingLoop {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes bounceHorizontal {
    0% {
      left: 0px;
    }
    100% {
      left: 10px;
    }
  }
  @keyframes slideIn {
    0% {
      transform: translate(-100%, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  @keyframes slideLoop {
    0% {
      opacity: 0;
      transform: translate(-100%, 0);
    }
    25% {
      opacity: 1;
      transform: translate(0, 0);
    }
    50% {
      opacity: 1;
    }
    75% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes timelinePath {
    0% {
      height: 0px;
    }
    100% {
      height: 60px;
    }
  }
  html, body {
    height: 100%;
    background: #200F2F;
    font-family: "Segoe UI", Arial, sans-serif;
    color: #fff;
    font-size: 16px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    opacity: 1;
    min-height: 100%;
    background: linear-gradient(170deg, #3A264B 0%, #200F2F 40%);
    overflow: hidden;
    /*background: rgb(21,170,226);
    background: linear-gradient(144deg, rgba(21,170,226,0) 26%, rgba(56,214,255,0.1) 45%, rgba(255,24,226,0.1) 60%, rgba(224,15,255,0) 79%);*/
    animation: fadeIn 0.2s linear;
  }
  
  .body-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0.2;
    filter: grayscale(0.4);
    /*background: url(../images/body-texture-sm.png);
       /*background: url(../images/body-bg-texture.jpg) center center no-repeat;
       background-size: cover;*/
  }
  .body-bg img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    display: block;
  }
  
  h1, h2, h3, h4, h5, p {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 1em;
  }
  
  h1, h2, h3, h4, h5 {
    text-transform: capitalize;
  }
  
  h2 {
    margin-bottom: 10px;
  }
  
  a {
    text-decoration: none;
    color: #fff;
  }
  
  .container-overflow {
    overflow: auto;
    height: 100%;
  }
  
  ::-webkit-scrollbar {
    width: 0.4em;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(32, 15, 47, 0.5);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(58, 38, 75, 0.5);
    border-radius: 6px;
  }
  
  ::selection {
    background: rgba(69, 105, 201, 0.6);
  }
  
  #breadcrumb {
    display: flex;
    align-items: center;
    flex-grow: 1;
    line-height: 30px;
    margin: 15px 0;
  }
  #breadcrumb span {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
  }
  #breadcrumb .app-icon {
    padding: 0;
    width: 40px;
    height: 30px;
    position: relative;
  }
  #breadcrumb .app-icon img {
    display: block;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
  #breadcrumb .studio {
    color: #4569c9;
    font-weight: bold;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    margin-right: 10px;
    flex: none;
  }
  #breadcrumb .version {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.8em;
    line-height: 28px;
    padding: 0 16px;
    padding-left: 10px;
    transition: background 0.2s, border 0.2s;
  }
  #breadcrumb .version:hover {
    background: rgba(69, 105, 201, 0.2);
    border-color: #4569c9;
  }
  #breadcrumb .version .icon {
    padding: 0;
    height: 28px;
    width: 20px;
    color: rgba(255, 255, 255, 0.4);
  }
  
  .version-options {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 20px;
  }
  .version-options .row {
    margin-bottom: 20px;
  }
  .version-options .row:last-child {
    margin: 0;
  }
  .version-options .row .btn {
    margin: 0;
    width: 100%;
    text-align: left;
  }
  .version-options .row .btn .icon {
    color: #FF7440;
  }
  .version-options .row .btn.loading .icon:after {
    width: 28px;
    height: 28px;
  }
  
  .ajax-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .ajax-loader:after {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    top: 18px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .icon-message {
    margin-bottom: 20px;
  }
  
  span.beta {
    display: inline-block;
    background: #E6FF3A;
    color: #170B22;
    font-size: 0.6em;
    line-height: 24px;
    padding: 0 12px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 0 20px 0 rgba(230, 255, 58, 0.6);
  }
  
  .plan-warn {
    line-height: 40px;
    font-size: 0.8em;
    color: #FFA011;
  }
  .plan-warn .icon {
    color: #FFA011;
  }
  
  .about-plan {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 0 10px 20px 10px;
  }
  .about-plan .label {
    font-size: 0.6em;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .about-plan .title {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    margin-top: 6px;
  }
  .about-plan .subtitle {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6em;
  }
  .about-plan .desc {
    font-size: 0.8em;
    margin-bottom: 5px;
  }
  .about-plan .desc:last-child {
    margin: 0;
  }
  
  .about-info {
    display: flex;
    margin-bottom: 40px;
  }
  .about-info .about-version {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 0 10px;
    width: calc(50% - 20px);
    flex-shrink: 0;
  }
  .about-info .about-version .brand {
    margin-bottom: 20px;
    font-size: 1.4em;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
  }
  .about-info .about-version .brand .icon-product {
    width: 60px;
    height: 60px;
  }
  .about-info .about-version .about-version-info {
    margin-bottom: 20px;
    font-size: 0.6em;
  }
  .about-info .about-version .about-version-info:last-child {
    margin: 0;
  }
  .about-info .about-version .about-version-info .key {
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .about-info .about-version .about-version-info .val {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .service-warn {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    text-align: left;
  }
  .service-warn .warn-icon {
    margin-right: 20px;
  }
  .service-warn .warn-icon .icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 2.4em;
  }
  .service-warn .msg .service {
    display: inline-block;
    border-radius: 20px;
    padding-left: 5px;
    padding-right: 15px;
    background: rgba(255, 255, 255, 0.05);
    letter-spacing: 2px;
  }
  .service-warn .msg .title {
    margin-bottom: 5px !important;
    font-size: 1.2em;
  }
  .service-warn .msg p {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.4);
  }
  .service-warn .msg p:last-child {
    margin: 0 !important;
  }
  .service-warn .msg p a {
    color: #4569c9;
    transition: color 0.2s;
    font-weight: bold;
  }
  .service-warn .msg p a:hover {
    color: #8f53d9;
  }
  
  .json-object {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    line-height: 30px;
    padding: 0 10px;
    font-size: 0.8em;
    border-radius: 20px;
  }
  
  /* App */
  .pull-left {
    float: left;
  }
  
  .pull-right {
    float: right;
    display: flex;
    justify-content: flex-end;
  }
  
  .bar {
    /*background: $color-light-transparent;*/
    padding: 10px 0;
    min-height: 60px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    /*@include glassEffect();*/
  }
  .bar.bar-zindex {
    z-index: 10;
  }
  .bar.bar-help {
    color: rgba(255, 255, 255, 0.4);
    margin-top: -30px;
    margin-bottom: 0;
  }
  .bar.bar-help .icon {
    color: rgba(255, 255, 255, 0.4);
    width: 24px;
  }
  .bar .separator {
    width: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 10px;
  }
  .bar .title {
    font-size: 1.7em;
    /*color:$color-tertiary;*/
    padding-right: 10px;
    /*font-weight: bold;*/
    line-height: 40px;
  }
  .bar .beta {
    margin: 6px 0;
    vertical-align: bottom;
  }
  .bar .description {
    padding: 10px;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }
  .bar .description p {
    margin-bottom: 10px;
  }
  .bar .description p:last-child {
    margin: 0;
  }
  .bar a.edit {
    display: inline-block;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .bar a.edit .icon {
    transition: color 0.2s;
    font-size: 2.4em;
    color: rgba(255, 255, 255, 0.4);
  }
  .bar a.edit:hover .icon {
    color: #fff;
  }
  .bar a.edit.loading .icon {
    color: transparent;
  }
  .bar a.edit.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .bar:last-child {
    margin: 0;
  }
  .bar.bar-option {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .bar.bar-bookmark {
    min-height: auto;
    padding: 10px;
    min-height: 60px;
    line-height: 40px;
    display: flex;
  }
  .bar.bar-bookmark .label {
    line-height: 40px;
    color: rgba(255, 255, 255, 0.4);
  }
  .bar.bar-bookmark .ajax-loader {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 40px;
    height: 40px;
  }
  .bar.bar-bookmark .ajax-loader:after {
    width: 20px;
    height: 20px;
    top: 8px;
    right: 8px;
  }
  .bar.bar-bookmark .inner > span {
    display: inline-block;
    padding: 0 16px;
    color: #3A264B;
    background: #200F2F;
    border-radius: 15px;
    line-height: 30px;
    font-size: 0.8em;
    margin-left: 10px;
  }
  .bar.bar-bookmark ul {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
  }
  .bar.bar-bookmark ul li {
    display: inline-block;
    margin-right: 10px;
    line-height: 40px;
    padding: 0 10px 0 0px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
  }
  .bar.bar-bookmark ul li:hover {
    cursor: pointer;
    background: rgba(69, 105, 201, 0.15);
  }
  .bar.bar-bookmark ul li.active {
    cursor: pointer;
    background: #4569c9;
  }
  .bar.bar-bookmark ul .bookmark {
    display: inline-block;
    line-height: 40px;
    padding-right: 10px;
    padding-left: 20px;
  }
  .bar.bar-bookmark ul .icon {
    width: 20px;
  }
  .bar.bar-wizard {
    height: 160px;
    text-align: center;
  }
  .bar.bar-wizard .path {
    width: 60px;
    height: 120px;
    display: inline-block;
    position: relative;
  }
  .bar.bar-wizard .path:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -15px;
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
  }
  .bar.bar-wizard .step {
    position: relative;
    display: inline-block;
    height: 130px;
    width: 100px;
    margin-top: 5px;
  }
  .bar.bar-wizard .step:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -15px;
    width: 100px;
    height: 100px;
    border: 3px solid transparent;
    border-radius: 50%;
    transition: all 0.5s;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  .bar.bar-wizard .step .circle {
    position: relative;
    width: 100px;
    height: 100px;
    border: 8px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: border-color 0.2s;
  }
  .bar.bar-wizard .step .circle .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
  }
  .bar.bar-wizard .step .label {
    position: absolute;
    bottom: 0;
    left: 50%;
    line-height: 20px;
    transform: translate(-50%, 0);
    transition: color 0.2s;
  }
  .bar.bar-wizard .step.active:after {
    border-color: #4569c9;
    filter: drop-shadow(0 0 10px rgba(69, 105, 201, 0.5));
  }
  .bar.bar-wizard .step.active .label {
    color: #4569c9;
  }
  .bar.bar-wizard .step:hover .circle, .bar.bar-wizard .step.active .circle {
    border-color: rgba(69, 105, 201, 0.15);
  }
  .bar .js-advanceFiltersToggle {
    padding: 0 20px 0 4px;
    background: rgba(255, 255, 255, 0.05);
  }
  .bar .js-advanceFiltersToggle:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .bar .js-advanceFiltersToggle:hover .icon {
    color: #fff;
  }
  .bar .js-advanceFiltersToggle.active {
    background: #4569c9;
  }
  
  .advanced-filters.busy {
    pointer-events: none !important;
    opacity: 0.7 !important;
  }
  .advanced-filters .content {
    overflow: hidden;
    height: 0;
    width: 100%;
  }
  .advanced-filters .row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .advanced-filters .col {
    width: 49%;
    margin: 0px 10px 0 0;
    padding: 10px 10px 10px 5px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  .advanced-filters .col:last-child {
    margin-right: 0;
    border-right: 0;
  }
  .advanced-filters .col .header {
    margin-bottom: 20px;
    font-size: 1.5em;
  }
  .advanced-filters .col .advanced-filter {
    display: inline-block;
    line-height: 30px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0 20px;
    margin-bottom: 10px;
    margin-right: 7px;
    font-size: 13px;
    transition: background 0.2s, border-color 0.2s;
  }
  .advanced-filters .col .advanced-filter:hover {
    background: rgba(69, 105, 201, 0.2);
    border-color: #4569c9;
    cursor: pointer;
  }
  .advanced-filters .col .advanced-filter.active {
    background: #4569c9;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .advanced-filters .advanced-filters-actions {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: flex-end;
  }
  .advanced-filters .advanced-filters-actions .js-resetFilters {
    line-height: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    padding: 0 20px;
    transition: background 0.2s;
  }
  .advanced-filters .advanced-filters-actions .js-resetFilters:hover {
    background: rgba(69, 105, 201, 0.2);
    border-color: #4569c9;
    cursor: pointer;
  }
  
  .box {
    position: relative;
    overflow: hidden;
    transition: border-width 0.2s;
    backdrop-filter: blur(5px);
  }
  .box .toggle {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 30px;
    width: 60px;
  }
  .box .toggle:after {
    width: 22px;
    height: 22px;
  }
  .box .toggle.active:after {
    left: 33px;
  }
  .box .box-drag-handles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  .box .box-drag-handles .before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
  }
  .box .box-drag-handles .after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
  }
  .box.overflow {
    overflow: visible;
  }
  .box.box-draggable {
    overflow: visible;
    cursor: move;
  }
  .box.box-draggable .front {
    transition: background 0.2s;
  }
  .box.box-draggable:hover .front {
    background: rgba(69, 105, 201, 0.2);
  }
  .box.box-draggable .box-drag-handles {
    display: block;
    z-index: 10;
  }
  .box.box-draggable .box-drag-handles .before.hover, .box.box-draggable .box-drag-handles .after.hover {
    opacity: 1;
  }
  .box.box-draggable .box-drag-handles .before.hover:after, .box.box-draggable .box-drag-handles .after.hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: #4569c9;
  }
  .box.box-draggable .box-drag-handles .before.hover.after:after, .box.box-draggable .box-drag-handles .after.hover.after:after {
    left: auto;
    right: 0;
  }
  .box.box-draggable:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px dashed #4569c9;
  }
  .box .front, .box .side {
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: left 0.4s ease-in-out;
  }
  .box .side {
    left: 100%;
  }
  .box .flag, .box .flag-visible, .box .custom-data-scope {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: #170B22;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
  }
  .box .flag.flag-active:before, .box .flag-visible.flag-active:before, .box .custom-data-scope.flag-active:before {
    content: "✔";
  }
  .box .flag-visible {
    bottom: auto;
    top: 6px;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .box .custom-data-scope {
    background: #170B22;
    transition: background 0.2s;
  }
  .box .custom-data-scope .icon {
    color: #E6FF3A;
  }
  .box .custom-data-scope .options {
    position: absolute;
    bottom: 45px;
    right: 0;
    background: #170B22;
    text-align: right;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .box .custom-data-scope .options .scope {
    padding-left: 10px;
    font-size: 0.8em;
    display: flex;
    transition: background 0.2s;
    cursor: pointer;
  }
  .box .custom-data-scope .options .scope .label {
    flex-grow: 1;
  }
  .box .custom-data-scope .options .scope .icon {
    margin: 0;
  }
  .box .custom-data-scope .options .scope:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .box .custom-data-scope:hover, .box .custom-data-scope.active {
    background: #30243B;
  }
  .box .custom-data-scope.active .options {
    opacity: 1;
    visibility: visible;
  }
  .box .trash {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .box .trash .icon {
    transition: color 0.3s;
    font-size: 1.2em;
  }
  .box .trash:hover {
    background: #EF313E;
    cursor: pointer;
  }
  .box .trash:hover .icon {
    color: #fff;
  }
  .box .edit {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: #4569c9;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .box .edit:hover {
    background: #8f53d9;
    cursor: pointer;
  }
  .box .inspect {
    position: absolute;
    bottom: 54px;
    left: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .box .inspect:hover {
    background: #4569c9;
    cursor: pointer;
  }
  .box .custom-rules {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
  }
  .box .custom-rules a {
    display: block;
    padding: 20px;
    background: #4569c9;
    border-radius: 20px 0 0 20px;
    transition: background 0.2s;
  }
  .box .custom-rules a:hover {
    background: #8f53d9;
  }
  .box .custom-rules .icon {
    font-size: 2em;
  }
  .box .drop-rate {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
    font-size: 0.8em;
    color: #4569c9;
    font-weight: bold;
  }
  .box .drop-rate:after {
    content: "%";
  }
  .box.edit .front {
    left: -100%;
  }
  .box.edit .side {
    left: 0;
  }
  .box.visible .flag-visible {
    opacity: 1;
  }
  .box.top {
    z-index: 99;
  }
  .box .header {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.8em;
  }
  .box .footer {
    padding: 0 10px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.1;
    font-size: 0.8em;
  }
  .box .footer:before {
    content: "- ";
  }
  .box .footer:after {
    content: " -";
  }
  .box .inner {
    padding: 20px;
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box p {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
  }
  .box .padding {
    padding: 20px;
  }
  .box .thumbnail {
    float: left;
    width: 110px;
    height: 110px;
    background: #8f53d9;
    margin-right: 10px;
  }
  .box input, .box textarea, .box select, .box .info-field, .box .select {
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.8em;
  }
  .box input:last-child, .box textarea:last-child, .box select:last-child, .box .info-field:last-child, .box .select:last-child {
    margin: 0;
  }
  .box textarea.single-row {
    height: 40px;
    overflow: hidden;
  }
  .box textarea.single-row:focus {
    height: 150px;
    overflow: auto;
  }
  .box .graph {
    width: 260px;
    height: 260px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .box .graph .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .box .graph .circle .ring {
    width: 170px;
    height: 170px;
    border: 10px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .box .graph .app-icon {
    border-radius: 50%;
    overflow: hidden;
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .box .graph .app-icon img {
    max-width: 100%;
  }
  .box .graph .icon, .box .graph .icon-product, .box .graph .currency-code, .box .graph .app-version {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    font-size: 6em;
  }
  .box .graph .item-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .box .graph .item-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }
  .box .graph .item-image .icon {
    width: 40px;
    height: 40px;
    font-size: 1.6em;
    top: 90%;
    background: #1a0b27;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .box .graph .currency-code, .box .graph .app-version {
    font-size: 3em;
    text-align: center;
    height: auto;
  }
  .box .graph .app-version {
    font-size: 2.2em;
  }
  .box .graph input {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
  }
  .box .graph.rule .icon {
    border-radius: 50%;
    width: 60%;
    height: 60%;
    font-size: 4em;
  }
  .box .graph-meta {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    padding: 10px;
    opacity: 1;
  }
  .box .graph-meta .bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 130px solid #170B22;
    border-left: 130px solid transparent;
    transition: opacity 0.5s;
  }
  .box .graph-meta .val {
    display: block;
    font-weight: bold;
    font-size: 1.4em;
    line-height: 10px;
    color: #E6FF3A;
    position: relative;
    transition: opacity 0.5s;
  }
  .box .graph-meta .label {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
    position: relative;
    transition: opacity 0.5s;
  }
  .box .graph-meta.loading .bg, .box .graph-meta.loading .val, .box .graph-meta.loading .label {
    opacity: 0;
  }
  .box .graph-meta.loading:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: #4569c9;
    border-bottom-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .box .graph-meta.fail .bg {
    opacity: 0.2;
  }
  .box .graph-meta.fail .val, .box .graph-meta.fail .label {
    opacity: 0;
  }
  .box .graph-meta.fail:before, .box .graph-meta.fail:after {
    content: "";
    width: 2px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: fadeIn 0.5s linear;
  }
  .box .graph-meta.fail:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .box.titled .front .inner {
    padding-top: 50px;
  }
  .box.titled .front .inner .graph {
    margin-top: 10px;
  }
  .box a.full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: background 0.5s;
  }
  .box a.full:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .box a.full:hover, .box.box-component:hover, .box.i-content:hover, .box.i-condition:hover, .box.dt-node:hover {
    cursor: pointer;
  }
  .box a.full:hover .graph .circle, .box.box-component:hover .graph .circle, .box.i-content:hover .graph .circle, .box.i-condition:hover .graph .circle, .box.dt-node:hover .graph .circle {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .box.box-component.new {
    border: 2px dashed #4569c9;
  }
  .box a.setting {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 34px;
    height: 34px;
  }
  .box.loading .graph:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .box .text-section p {
    color: #fff;
    margin-bottom: 20px;
  }
  .box .text-section p:last-child {
    margin: 0;
  }
  .box .text-section a {
    color: #4569c9;
  }
  .box .text-section a:hover {
    color: #8f53d9;
  }
  .box.disabled .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .box.disabled .icon-product {
    opacity: 0.2;
    filter: grayscale(1);
  }
  .box.empty {
    opacity: 0.2;
  }
  
  .box-list {
    margin: -10px -10px 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
  }
  .box-list .box {
    flex-shrink: 0;
    width: 400px;
    height: 400px;
    margin: 10px;
  }
  .box-list .box.filtered {
    background-color: rgba(255, 0, 0, 0.2);
  }
  .box-list .box.box-component {
    height: 400px;
    width: 400px;
  }
  .box-list .box.box-component .data {
    display: none;
  }
  .box-list .box.box-full {
    width: 100%;
  }
  .box-list.flex .box {
    height: auto;
  }
  .box-list.sm .box {
    width: 300px;
    height: 300px;
  }
  .box-list.sm .box .graph {
    width: 180px;
    height: 180px;
  }
  .box-list.md .box {
    width: 400px;
    height: 400px;
  }
  .box-list.list {
    display: block;
    margin-right: 0;
  }
  .box-list.list .box {
    width: 100% !important;
    max-width: 100%;
    height: 70px;
  }
  .box-list.list .box.loading .graph:before {
    width: 50px;
    height: 50px;
    border: 4px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    top: auto;
    left: auto;
    margin-left: 0px;
    margin-top: 0px;
  }
  .box-list.list .box .header {
    position: absolute;
    left: 65px;
    width: auto;
    font-size: 16px;
    padding-top: 15px;
  }
  .box-list.list .box .full {
    display: flex;
  }
  .box-list.list .box .inner {
    position: relative;
    padding: 0 0 0 70px;
    width: auto;
    height: auto;
  }
  .box-list.list .box .inner .graph {
    margin-top: 0;
    width: 50px;
    height: 50px;
  }
  .box-list.list .box .inner .graph .icon {
    font-size: 2em;
  }
  .box-list.list .box .inner .graph .currency-code, .box-list.list .box .inner .graph .app-version {
    font-size: 1em;
  }
  .box-list.list .box .inner .graph .circle {
    border-width: 4px;
  }
  .box-list.list .box .inner .graph .circle svg {
    width: 50px;
    height: 50px;
  }
  .box-list.list .box .flag {
    right: 10px;
  }
  .box-list.list .box .footer {
    position: absolute;
    left: 65px;
    width: auto;
    padding-bottom: 15px;
  }
  .box-list.list .box .graph.rule .icon {
    font-size: 1.2em;
  }
  
  .box-grid {
    margin: -10px -10px 10px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .box-grid .col {
    margin: 10px 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
  }
  .box-grid .col.col-sm {
    width: 300px;
  }
  .box-grid .col.col-sm-2 {
    width: 400px;
  }
  .box-grid .col.col-md {
    width: 560px;
    flex-grow: 1;
  }
  .box-grid .col.col-lg {
    width: 590px;
    flex-grow: 1;
  }
  .box-grid .col.col-flex30 {
    width: 30%;
    min-width: 400px;
    flex-grow: 1;
  }
  .box-grid .col > .widget {
    margin: 0;
    min-width: auto;
    backdrop-filter: blur(5px);
  }
  .box-grid .col > .box, .box-grid .col > .widget {
    flex-shrink: 0;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
  }
  .box-grid .col > .box h3, .box-grid .col > .widget h3 {
    margin-bottom: 20px;
    background: none;
    font-size: 1.5em;
  }
  .box-grid .col > .box h3 span.new, .box-grid .col > .widget h3 span.new {
    background: #4569c9;
    font-size: 0.4em;
    letter-spacing: 2px;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    line-height: 30px;
    border-radius: 15px;
  }
  .box-grid .col > .box h3 .beta, .box-grid .col > .widget h3 .beta {
    font-size: 0.4em;
  }
  .box-grid .col > .box h4, .box-grid .col > .widget h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  .box-grid .col > .box h4 .icon, .box-grid .col > .widget h4 .icon {
    height: auto;
  }
  .box-grid .col > .box:last-child, .box-grid .col > .widget:last-child {
    margin-bottom: 10px;
  }
  .box-grid .col > .box.box-xs, .box-grid .col > .box.box-text, .box-grid .col > .box.box-toggle, .box-grid .col > .box.box-checkbox, .box-grid .col > .box.box-select, .box-grid .col > .box.box-datetime, .box-grid .col > .box.box-flow-editor, .box-grid .col > .box.box-color, .box-grid .col > .box.box-slider, .box-grid .col > .widget.box-xs, .box-grid .col > .widget.box-text, .box-grid .col > .widget.box-toggle, .box-grid .col > .widget.box-checkbox, .box-grid .col > .widget.box-select, .box-grid .col > .widget.box-datetime, .box-grid .col > .widget.box-flow-editor, .box-grid .col > .widget.box-color, .box-grid .col > .widget.box-slider {
    height: 140px;
  }
  .box-grid .col > .box.box-auto, .box-grid .col > .widget.box-auto {
    height: auto;
  }
  .box-grid .col > .box.box-media, .box-grid .col > .widget.box-media {
    height: 300px;
  }
  .box-grid .col > .box.box-media.box-media-video .media-thumbnail, .box-grid .col > .widget.box-media.box-media-video .media-thumbnail {
    width: 200px;
  }
  .box-grid .col > .box.box-media.box-media-video .media-thumbnail .media-thumbnail-inner, .box-grid .col > .widget.box-media.box-media-video .media-thumbnail .media-thumbnail-inner {
    width: 180px;
  }
  .box-grid .col > .box.box-flow-editor .btn, .box-grid .col > .widget.box-flow-editor .btn {
    padding-left: 10px;
  }
  .box-grid .col > .box.box-select, .box-grid .col > .box.box-custom, .box-grid .col > .widget.box-select, .box-grid .col > .widget.box-custom {
    overflow: visible;
  }
  .box-grid .col > .box.box-item, .box-grid .col > .widget.box-item {
    height: 140px;
  }
  .box-grid .col > .box.box-var h4, .box-grid .col > .widget.box-var h4 {
    text-transform: none;
  }
  .box-grid .col > .box.box-var .editable, .box-grid .col > .widget.box-var .editable {
    position: absolute;
    top: 7px;
    right: 7px;
  }
  .box-grid .col > .box.box-var .editable .btn, .box-grid .col > .widget.box-var .editable .btn {
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
  }
  .box-grid .col > .box.box-var .editable .btn .icon, .box-grid .col > .widget.box-var .editable .btn .icon {
    width: 100%;
    height: 100%;
    font-size: 1.4em;
    color: #4569c9;
  }
  .box-grid .col > .box.box-json, .box-grid .col > .box.box-weighted-table, .box-grid .col > .box.box-sku-list, .box-grid .col > .widget.box-json, .box-grid .col > .widget.box-weighted-table, .box-grid .col > .widget.box-sku-list {
    height: 460px;
  }
  .box-grid .col > .box.box-json .json-field, .box-grid .col > .box.box-weighted-table .json-field, .box-grid .col > .box.box-sku-list .json-field, .box-grid .col > .widget.box-json .json-field, .box-grid .col > .widget.box-weighted-table .json-field, .box-grid .col > .widget.box-sku-list .json-field {
    height: 380px;
  }
  .box-grid .col > .box.box-textarea, .box-grid .col > .widget.box-textarea {
    height: 300px;
  }
  .box-grid .col > .box.box-textarea .form-field, .box-grid .col > .widget.box-textarea .form-field {
    max-width: 100%;
  }
  .box-grid .col > .box.box-textarea textarea, .box-grid .col > .widget.box-textarea textarea {
    height: 220px;
  }
  .box-grid .col > .box.box-sm, .box-grid .col > .box.widget-sm, .box-grid .col > .widget.box-sm, .box-grid .col > .widget.widget-sm {
    height: 280px;
  }
  .box-grid .col > .box.box-sm .graph, .box-grid .col > .box.widget-sm .graph, .box-grid .col > .widget.box-sm .graph, .box-grid .col > .widget.widget-sm .graph {
    width: 180px;
    height: 180px;
  }
  .box-grid .col > .box.box-md, .box-grid .col > .box.widget-md, .box-grid .col > .widget.box-md, .box-grid .col > .widget.widget-md {
    height: 240px;
  }
  .box-grid .col > .box.box-lg, .box-grid .col > .box.widget-lg, .box-grid .col > .widget.box-lg, .box-grid .col > .widget.widget-lg {
    height: 320px;
  }
  .box-grid .col > .box.box-xl, .box-grid .col > .box.widget-xl, .box-grid .col > .widget.box-xl, .box-grid .col > .widget.widget-xl {
    height: 580px;
  }
  .box-grid .col > .box.box-nav nav, .box-grid .col > .widget.box-nav nav {
    list-style: none;
  }
  .box-grid .col > .box.box-nav nav li a, .box-grid .col > .widget.box-nav nav li a {
    display: block;
    transition: background 0.2s;
    line-height: 40px;
    font-size: 0.8em;
  }
  .box-grid .col > .box.box-nav nav li a:hover, .box-grid .col > .widget.box-nav nav li a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .box-grid .col > .box.box-auto, .box-grid .col > .widget.box-auto {
    height: auto;
  }
  .box-grid .row {
    display: flex;
    width: calc(100% + 20px);
    margin: -10px;
    margin-bottom: 10px;
  }
  .box-grid .row .widget {
    height: calc(100% - 20px);
    min-width: 300px;
  }
  .box-grid .row .box {
    flex-grow: 1;
    margin: 10px;
    height: calc(100% - 20px);
    min-width: 300px;
  }
  .box-grid .row .box h3 {
    margin-bottom: 20px;
    background: none;
    font-size: 1.5em;
  }
  .box-grid .row .box h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
  }
  .box-grid .row .box h4 .icon {
    height: auto;
  }
  .box-grid .row.row-lg {
    height: 340px;
  }
  .box-grid .row.row-lg .box .graph {
    width: 180px;
    height: 180px;
  }
  .box-grid .row.row-md {
    height: 260px;
  }
  .box-grid .row.row-sm {
    height: 300px;
  }
  .box-grid .row.row-sm .box .graph {
    width: 180px;
    height: 180px;
  }
  .box-grid .row.row-auto {
    height: auto;
  }
  .box-grid .row:last-child {
    margin-bottom: 0;
  }
  .box-grid:last-child {
    margin-bottom: 0;
  }
  
  #main-section {
    position: relative;
    height: -moz-calc(100% - 140px);
    height: -webkit-calc(100% - 140px);
    height: -o-calc(100% - 140px);
    height: calc(100% - 140px);
  }
  
  #main-section-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-image: url(../js/../img/c7cbde5e369d76c15c09.jpg);
    transition: background-image 0.5s;
    opacity: 0.1;
    overflow: hidden;
  }
  #main-section-bg .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    animation: fadeIn 0.5s linear;
  }
  #main-section-bg .bg.visible {
    opacity: 1;
  }
  
  #base {
    display: flex;
    height: 100%;
    position: relative;
  }
  
  .container-index {
    padding: 20px;
  }
  
  #main-content, .studio, .container-iam {
    flex: 1;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
  }
  #main-content h2, .studio h2, .container-iam h2 {
    position: relative;
    /*background:$color-light-transparent;
    /*color:$color-tertiary;*/
    /*@include glassEffect();*/
    line-height: 60px;
    /*padding:0 20px;*/
    margin: 0 0 20px;
    font-size: 1.7em;
    /*font-weight: bold;*/
  }
  #main-content h2 .beta, .studio h2 .beta, .container-iam h2 .beta {
    font-size: 0.3em;
  }
  
  .studio {
    padding: 0;
  }
  
  .wizard-container.hidden {
    display: none;
  }
  
  #objective-edit {
    display: none;
  }
  
  .data-container {
    display: none;
  }
  
  .tmp {
    display: none;
  }
  
  .reward {
    /**/
  }
  
  .version {
    /*&.visible{
        .switch-version{
            display: none;
        }
    }*/
  }
  .version .header {
    text-transform: uppercase;
    color: #FF7440;
    letter-spacing: 3px;
  }
  .version .graph .circle .ring {
    opacity: 0;
    transition: opacity 0.5s;
    border-color: #4569c9;
    filter: drop-shadow(0 0 8px rgba(69, 105, 201, 0.5));
  }
  .version .flag {
    opacity: 0;
  }
  .version.primary .graph .circle .ring {
    opacity: 1;
  }
  .version.primary .deploy-version {
    display: none;
  }
  .version.primary .flag {
    opacity: 1;
  }
  .version.primary .footer {
    color: #4569c9;
    opacity: 1;
  }
  
  #access-keys {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #access-keys > li {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    padding: 40px 20px;
    transition: background 0.5s;
    animation: fadeIn 0.5s linear;
    backdrop-filter: blur(5px);
  }
  #access-keys > li:last-child {
    margin: 0;
  }
  #access-keys > li .role {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    margin-right: 40px;
    padding-right: 20px;
  }
  #access-keys > li .role .icon {
    height: 80px;
    width: 100px;
    font-size: 4em;
  }
  #access-keys > li .info {
    flex-grow: 1;
  }
  #access-keys > li .info .display-name {
    color: #4569c9;
    font-size: 1.4em;
  }
  #access-keys > li .info .display-name a {
    color: #4569c9;
  }
  #access-keys > li .info .display-name a .icon {
    font-size: 1em;
    color: #4569c9;
  }
  #access-keys > li .info .display-name a:hover {
    color: #8f53d9;
  }
  #access-keys > li .info .display-name a:hover .icon {
    color: #8f53d9;
  }
  #access-keys > li .info .email {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  #access-keys > li form {
    display: flex;
  }
  #access-keys > li .fieldset {
    margin-right: 40px;
  }
  #access-keys > li .fieldset:last-child {
    margin: 0;
  }
  #access-keys > li .description {
    padding-left: 40px;
    margin-left: 40px;
    flex-grow: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  #access-keys > li .description .title {
    font-size: 1.5em;
    color: #4569c9;
    transition: color 0.5s;
  }
  #access-keys > li .description .caption {
    font-style: italic;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 30px;
    height: 30px;
  }
  #access-keys > li .description p {
    margin-bottom: 10px;
  }
  #access-keys > li .description p:last-child {
    margin: 0;
  }
  #access-keys > li .description .btn {
    margin: 20px 0 0;
  }
  #access-keys > li .usage {
    display: flex;
    position: relative;
    width: 33%;
    flex-shrink: 0;
    padding-left: 40px;
    margin-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  #access-keys > li .restore-access-key {
    display: none;
  }
  #access-keys > li.revoked {
    background: rgba(239, 49, 62, 0.05);
  }
  #access-keys > li.revoked .analytics-widget {
    display: none;
  }
  #access-keys > li.revoked .role .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  #access-keys > li.revoked .description .title {
    color: #EF313E;
  }
  #access-keys > li.revoked .description .caption:after {
    content: "Revoked";
    background: #EF313E;
    color: #fff;
    border-radius: 15px;
    padding: 0 15px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
  }
  #access-keys > li.revoked .revoke-access-key {
    display: none;
  }
  #access-keys > li.revoked .restore-access-key {
    display: inline-block;
  }
  #access-keys > li.loading .role .icon:after {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    top: -2px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #access-keys.grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
  }
  #access-keys.grid > li {
    width: calc(50% - 20px);
    flex-shrink: 0;
    margin: 10px;
  }
  #access-keys.grid > li.iam {
    display: block;
    padding: 0;
  }
  #access-keys.grid > li.iam a {
    display: flex;
    align-items: stretch;
    height: 100%;
    padding: 20px;
    transition: background 0.2s;
  }
  #access-keys.grid > li.iam a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #access-keys.grid > li.iam .keys {
    font-size: 0.8em;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.4);
  }
  #access-keys.grid > li.iam .keys span {
    font-weight: bold;
    color: #fff;
  }
  #access-keys.grid > li.iam .actions {
    margin-top: 20px;
  }
  #access-keys.grid > li.iam .actions .btn {
    margin: 0;
    margin-right: 10px;
  }
  #access-keys.grid > li.iam.revoked .display-name {
    color: #EF313E;
  }
  #access-keys.grid > li.iam.revoked .icon {
    color: #EF313E;
  }
  
  .checkbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .checkbox-list li {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    line-height: 40px;
  }
  .checkbox-list li:last-child {
    margin: 0;
  }
  .checkbox-list li .status {
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .checkbox-list li .status:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .checkbox-list li.active .status {
    background: rgba(255, 255, 255, 0.05);
    border-color: #4569c9;
  }
  .checkbox-list li.active .status:before {
    content: "✔";
    color: #4569c9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn 0.2s linear;
  }
  .checkbox-list li.loading .status:after {
    content: "";
    width: 26px;
    height: 26px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .box-grid .col .box-semc-modpack-table {
    height: 320px;
  }
  .box-grid .col .box-semc-modpack-table .table-container {
    display: flex;
  }
  .box-grid .col .box-semc-modpack-table .table-container .left {
    width: 40%;
  }
  .box-grid .col .box-semc-modpack-table .table-container .right {
    width: 60%;
    position: relative;
  }
  .box-grid .col .box-semc-modpack-table .table-container .table-option input {
    margin: 0;
    padding-right: 40px;
    width: 100%;
  }
  .box-grid .col .box-semc-modpack-table .table-container .table-option > div {
    position: absolute;
    bottom: 11px;
    right: 20px;
  }
  .box-grid .col .box-semc-modpack-table .table-container .table-option > div > .icon {
    width: 100%;
    height: 100%;
  }
  .box-grid .col .box-semc-modpack-table .table-container .chart {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    border-radius: 50%;
    background: #200F2F;
  }
  .box-grid .col .box-semc-modpack-table .table-container .chart .chart-container {
    width: 100%;
    height: 100%;
  }
  .box-grid .col .box-semc-trait-table {
    height: 480px;
  }
  .box-grid .col .box-semc-trait-table .form-field {
    max-width: none;
  }
  
  .data-layout {
    display: flex;
    height: 500px;
    margin-bottom: 20px;
    background: #200F2F;
    padding: 5px;
  }
  .data-layout .col {
    width: 33%;
    border: 1px dashed rgba(255, 255, 255, 0.2);
  }
  .data-layout .col.hover {
    border-color: #4569c9;
  }
  .data-layout .col.b {
    margin: 0 10px;
  }
  .data-layout .col .prop {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin: 5px;
    font-size: 0.7em;
    border: 1px solid transparent;
    cursor: move;
    position: relative;
    transition: border-color 0.2s;
  }
  .data-layout .col .prop .label {
    margin-bottom: 8px;
  }
  .data-layout .col .prop .placeholder {
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
  }
  .data-layout .col .prop:hover {
    border-color: #4569c9;
  }
  .data-layout .col .prop.hover:before {
    content: "";
    background: #4569c9;
    height: 5px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .data-layout .col .prop.p-textarea .placeholder, .data-layout .col .prop.p-json .placeholder {
    height: 82px;
  }
  .data-layout .col .prop.p-weighted-table .placeholder, .data-layout .col .prop.p-sku-list .placeholder {
    height: 150px;
  }
  
  #layout-nav {
    display: flex;
  }
  #layout-nav #form-layout-nav {
    opacity: 1;
    transition: opacity 0.2s;
    position: relative;
  }
  #layout-nav #form-layout-nav.loading {
    opacity: 0.2;
  }
  #layout-nav .layout-options {
    width: 400px;
    margin-right: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  #layout-nav .layout-options ul {
    list-style: none;
    margin: 0;
    padding: 20px;
  }
  #layout-nav .layout-options ul li {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 5px;
    line-height: 40px;
    padding: 10px;
    cursor: move;
    border: 1px dashed transparent;
    transition: border 0.2s;
    position: relative;
  }
  #layout-nav .layout-options ul li:hover {
    border-color: #FF7440;
  }
  #layout-nav .layout-options ul li:after {
    content: "\e93d";
    font-family: "icomoon";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.4);
  }
  #layout-nav .layout-options ul li.title {
    background: none;
    padding: 0 10px;
    color: #4569c9;
    border-color: transparent;
  }
  #layout-nav .layout-options ul li.title:after {
    content: "";
  }
  #layout-nav .layout {
    flex-grow: 1;
  }
  #layout-nav .layout .layout-config {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  #layout-nav .layout .layout-config .nav-section {
    margin-bottom: 40px;
  }
  #layout-nav .layout .layout-config .nav-section .title {
    /**/
  }
  #layout-nav .layout .layout-config .nav-section:last-child {
    margin: 0;
  }
  #layout-nav .layout .layout-config .nav-section .section-label {
    background: #200F2F;
    padding: 20px;
    cursor: move;
    border: 1px dashed transparent;
    transition: border 0.2s;
    position: relative;
  }
  #layout-nav .layout .layout-config .nav-section .section-label:hover {
    border-color: #4569c9;
  }
  #layout-nav .layout .layout-config .nav-section .section-label .trash {
    opacity: 0.1;
  }
  #layout-nav .layout .layout-config .nav-section .section-label .trash:hover {
    opacity: 1;
  }
  #layout-nav .layout .layout-config .nav-section .section-label .trash:hover .icon {
    color: #EF313E;
  }
  #layout-nav .layout .layout-config .nav-section .section-label.hover:before {
    content: "";
    background: #4569c9;
    height: 5px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #layout-nav .layout .layout-config .nav-section ul {
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
  }
  #layout-nav .layout .layout-config .nav-section ul li {
    position: relative;
    padding: 20px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    cursor: move;
    border: 1px dashed transparent;
    border-left: 6px solid #4569c9;
    transition: border 0.2s;
  }
  #layout-nav .layout .layout-config .nav-section ul li:hover {
    border-color: #4569c9;
  }
  #layout-nav .layout .layout-config .nav-section ul li.hover:before {
    content: "";
    display: block;
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #FF7440;
  }
  #layout-nav .layout .layout-config .nav-section ul li:last-child {
    margin: 0;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition {
    line-height: 40px;
    display: flex;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition .preview {
    flex-grow: 1;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition .trash {
    opacity: 0.1;
    margin-left: 10px;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition .trash:hover {
    opacity: 1;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition .trash:hover .icon {
    color: #EF313E;
  }
  #layout-nav .layout .layout-config .nav-section ul li .definition .setting {
    padding: 0;
    margin: 0;
  }
  #layout-nav .layout .layout-config .nav-section ul li .conf {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  #layout-nav .layout .layout-config .nav-section ul li .conf .col {
    width: 400px;
    margin-right: 20px;
  }
  #layout-nav .layout .layout-config .nav-section ul li.locked {
    border-color: transparent;
    border-left-color: rgba(255, 255, 255, 0.05);
  }
  #layout-nav .layout .layout-config .nav-section ul li.locked .definition {
    opacity: 0.2;
  }
  #layout-nav .layout .layout-config .nav-section ul li.edit .conf {
    display: flex;
  }
  #layout-nav .layout .layout-config .nav-section ul li.dropable {
    background: transparent;
    border: 2px dashed rgba(255, 255, 255, 0.05);
  }
  #layout-nav .layout .layout-config .nav-section.readonly .section-label {
    cursor: default;
    border-color: transparent;
  }
  #layout-nav .layout .layout-config .nav-section.readonly ul li {
    cursor: default;
  }
  
  .dropchest-rules-container, .custom-algorithm-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    animation: fadeIn 0.5s linear;
  }
  .dropchest-rules-container .background, .custom-algorithm-container .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #200F2F;
    opacity: 0.85;
  }
  .dropchest-rules-container form, .custom-algorithm-container form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    background: #170B22;
    border-radius: 0 0 20px 20px;
  }
  .dropchest-rules-container form h2, .custom-algorithm-container form h2 {
    background: #4569c9;
    padding: 20px;
    text-align: center;
  }
  .dropchest-rules-container form .inner, .custom-algorithm-container form .inner {
    padding: 40px 60px;
  }
  .dropchest-rules-container form .inner .footer, .custom-algorithm-container form .inner .footer {
    text-align: center;
    padding-top: 20px;
  }
  .dropchest-rules-container form .ajax-loader, .custom-algorithm-container form .ajax-loader {
    width: 60px;
    height: 80px;
    display: none;
  }
  .dropchest-rules-container form input, .custom-algorithm-container form input {
    width: auto;
  }
  .dropchest-rules-container form.loading .form-field, .custom-algorithm-container form.loading .form-field {
    opacity: 0;
    visibility: hidden;
  }
  .dropchest-rules-container form.loading .ajax-loader, .custom-algorithm-container form.loading .ajax-loader {
    display: block;
  }
  .dropchest-rules-container form .form-field-info, .dropchest-rules-container form .quiz-form .disclaimers, .quiz-form .dropchest-rules-container form .disclaimers, .custom-algorithm-container form .form-field-info, .custom-algorithm-container form .quiz-form .disclaimers, .quiz-form .custom-algorithm-container form .disclaimers {
    margin-bottom: 40px;
  }
  
  #custom-data .form-field .select .options {
    max-height: 90px;
  }
  
  .bar-tabs {
    padding-bottom: 0;
    height: 60px;
  }
  .bar-tabs .btn-add {
    margin-bottom: 10px;
  }
  .bar-tabs .bar-tabs-container {
    display: inline-flex;
    margin-left: 20px;
  }
  .bar-tabs .bar-tabs-container .bar-tab {
    line-height: 50px;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 40px;
    margin-right: 4px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 0;
    position: relative;
  }
  .bar-tabs .bar-tabs-container .bar-tab:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #4569c9;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .bar-tabs .bar-tabs-container .bar-tab:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .bar-tabs .bar-tabs-container .bar-tab.active {
    background: #4569c9;
  }
  .bar-tabs .bar-tabs-container .bar-tab.active:after {
    opacity: 1;
  }
  
  #form-new-credentials .user-access-grid {
    display: flex;
    align-items: stretch;
    margin: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  #form-new-credentials .user-access-grid .left {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  #form-new-credentials .access-toggle {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: color 0.2s;
  }
  #form-new-credentials .access-toggle .check {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
  }
  #form-new-credentials .access-toggle .check:after {
    content: "✔";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4569c9;
    opacity: 0;
  }
  #form-new-credentials .access-toggle .check.checked {
    border-color: #4569c9;
  }
  #form-new-credentials .access-toggle .check.checked:after {
    opacity: 1;
  }
  #form-new-credentials .access-toggle:hover {
    color: #4569c9;
  }
  
  .content-iam .list-iam {
    background: rgba(255, 255, 255, 0.05);
    width: 400px;
    height: 100%;
    overflow-y: auto;
  }
  .content-iam .list-iam .user-iam {
    display: flex;
    align-items: center;
    transition: background 0.2s;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .content-iam .list-iam .user-iam:last-child {
    border: none;
  }
  .content-iam .list-iam .user-iam:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .content-iam .list-iam .user-iam.active {
    background: #4569c9;
  }
  
  .iam-role {
    line-height: 40px;
    padding: 0 10px;
    font-style: italic;
  }
  .iam-role span {
    color: #E6FF3A;
  }
  
  .iam-access-studio {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
  }
  .iam-access-studio .info {
    display: flex;
    align-items: center;
  }
  .iam-access-studio .toggle {
    margin-right: 20px;
  }
  .iam-access-studio .label {
    flex-grow: 1;
  }
  .iam-access-studio .app-cnt {
    background: #3A264B;
    cursor: pointer;
    padding-left: 15px;
    border-radius: 20px;
    transition: background 0.2s, opacity 0.2s;
  }
  .iam-access-studio .app-cnt:hover {
    opacity: 0.6;
  }
  .iam-access-studio.oppened .iam-access-list {
    display: flex;
  }
  .iam-access-studio.oppened .app-cnt {
    background: #4569c9;
  }
  
  .iam-access-list {
    display: none;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    margin-top: 20px;
  }
  
  .iam-access-app {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 10px;
    display: flex;
    width: 400px;
    align-items: center;
  }
  .iam-access-app .thumbnail {
    margin-right: 10px;
  }
  .iam-access-app .thumbnail img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .iam-access-app .label {
    flex-grow: 1;
    font-size: 0.8em;
  }
  
  .layout-view-list {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
  }
  .layout-view-list:last-child {
    margin-bottom: 0;
  }
  .layout-view-list .list-view-item, .layout-view-list .list-view-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
  }
  .layout-view-list .list-view-item .flag, .layout-view-list .list-view-header .flag {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #E6FF3A;
  }
  .layout-view-list .list-view-item .rank, .layout-view-list .list-view-header .rank {
    margin-right: 10px;
    width: 100px;
    text-align: center;
  }
  .layout-view-list .list-view-item .graph, .layout-view-list .list-view-header .graph {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    position: relative;
  }
  .layout-view-list .list-view-item .graph .circle, .layout-view-list .list-view-header .graph .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 6px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }
  .layout-view-list .list-view-item .graph .icon, .layout-view-list .list-view-header .graph .icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .layout-view-list .list-view-item .graph .avatar, .layout-view-list .list-view-header .graph .avatar {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #3A264B;
  }
  .layout-view-list .list-view-item .graph .avatar img, .layout-view-list .list-view-header .graph .avatar img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .layout-view-list .list-view-item .graph .currency-code, .layout-view-list .list-view-header .graph .currency-code {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
  }
  .layout-view-list .list-view-item .info, .layout-view-list .list-view-header .info {
    flex-grow: 1;
  }
  .layout-view-list .list-view-item .info .header, .layout-view-list .list-view-header .info .header {
    margin-bottom: 4px;
  }
  .layout-view-list .list-view-item .info .footer, .layout-view-list .list-view-header .info .footer {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  .layout-view-list .list-view-item .col, .layout-view-list .list-view-header .col {
    width: 200px;
    text-align: center;
  }
  .layout-view-list .list-view-item .col .sm, .layout-view-list .list-view-header .col .sm {
    font-size: 0.6em;
  }
  .layout-view-list .list-view-item .col.col-shrink, .layout-view-list .list-view-header .col.col-shrink {
    width: auto;
  }
  .layout-view-list .list-view-item .col-lg, .layout-view-list .list-view-header .col-lg {
    width: 500px;
    text-align: left;
  }
  .layout-view-list .list-view-item:last-child, .layout-view-list .list-view-header:last-child {
    border: none;
  }
  .layout-view-list .list-view-item button, .layout-view-list .list-view-header button {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
  }
  .layout-view-list .list-view-item button.trash .icon, .layout-view-list .list-view-header button.trash .icon {
    transform: rotate(-45deg);
  }
  .layout-view-list .list-view-item button.trash:hover, .layout-view-list .list-view-header button.trash:hover {
    background: #EF313E;
  }
  .layout-view-list .list-view-item button:hover, .layout-view-list .list-view-header button:hover {
    background: #4569c9;
  }
  .layout-view-list .list-view-item button.loading, .layout-view-list .list-view-header button.loading {
    background: #200F2F !important;
  }
  .layout-view-list .list-view-item button.loading .icon, .layout-view-list .list-view-header button.loading .icon {
    display: none;
  }
  .layout-view-list .list-view-item button.loading:after, .layout-view-list .list-view-header button.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .layout-view-list .list-view-item button .icon, .layout-view-list .list-view-header button .icon {
    font-size: 1em;
  }
  .layout-view-list .list-view-header {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .layout-view-list .list-view-item.loading .graph {
    color: transparent;
  }
  .layout-view-list .list-view-item.loading .graph:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .layout-view-list .list-view-item .toggle {
    height: 30px;
    width: 60px;
    display: inline-block;
  }
  .layout-view-list .list-view-item .toggle:after {
    width: 22px;
    height: 22px;
  }
  .layout-view-list .list-view-item .toggle.active:after {
    left: 33px;
  }
  .layout-view-list a.list-view-item {
    transition: background 0.2s;
  }
  .layout-view-list a.list-view-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .layout-view-hidden {
    display: none;
  }
  
  .box-table-container {
    max-height: 80%;
    overflow: hidden;
    overflow-y: auto;
  }
  
  .box-table {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .box-table td {
    padding: 5px;
  }
  .box-table .box-table-caption {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .box-table .box-table-row {
    position: relative;
  }
  .box-table .box-table-row.loading:after {
    content: "";
    opacity: 1;
    visibility: visible;
  }
  .box-table .box-table-row:after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 12px;
    right: -16px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .box-table .box-table-col {
    min-width: 60px;
    white-space: nowrap;
  }
  .box-table .box-table-col:last-child {
    margin: 0;
  }
  .box-table .box-table-col.grow {
    width: 99%;
  }
  .box-table .box-table-col.align-right {
    text-align: center;
  }
  .box-table .box-table-col .icon {
    border: 4px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }
  .box-table .box-table-col input {
    width: 80px;
    text-align: center;
    line-height: 30px;
    padding: 0 10px;
  }
  
  .bar.horizontal-nav {
    display: flex;
  }
  .bar.horizontal-nav a {
    display: block;
    padding-right: 16px;
  }
  
  .media-preview {
    display: flex;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 20px;
    text-align: left;
  }
  .media-preview .media-thumbnail {
    width: 120px;
    height: 120px;
    background: #200F2F;
    border: 1px solid #3A264B;
  }
  .media-preview .media-thumbnail .media-thumbnail-inner {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
  .media-preview .media-thumbnail .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .media-preview .media-thumbnail img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
  }
  .media-preview .media-thumbnail video {
    width: 100%;
    height: 100%;
  }
  .media-preview .media-thumbnail audio {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
  }
  .media-preview .media-actions > div {
    margin: 15px;
  }
  .media-preview .media-actions .btn-add {
    margin: 0;
  }
  
  .studio-title-bar {
    margin-top: 40px;
    margin-bottom: 0;
  }
  
  .custom-algorithm {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.2s;
  }
  .custom-algorithm .icon {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
  }
  .custom-algorithm.active .icon {
    color: #E6FF3A;
  }
  .custom-algorithm:hover {
    background: #4569c9;
  }
  .custom-algorithm:hover .icon {
    color: #fff;
  }
  
  .box .custom-algorithm {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
  }
  
  .custom-algorithm-enabled .custom-algorithm, .custom-algorithm-enabled .box .custom-algorithm {
    display: block;
  }
  
  .info-box {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
  }
  .info-box .icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .item-image-preview .item-image-edit, .item-image-preview .item-image-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
    cursor: pointer;
  }
  .item-image-preview .item-image-edit:hover, .item-image-preview .item-image-remove:hover {
    background: #4569c9;
  }
  .item-image-preview .item-image-remove {
    top: auto;
    right: auto;
    left: 10px;
    bottom: 10px;
  }
  .item-image-preview .item-image-remove .icon {
    font-size: 1em;
  }
  .item-image-preview .item-image-remove:hover {
    background: #EF313E;
  }
  .item-image-preview .preview {
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid rgba(255, 255, 255, 0.05);
  }
  .item-image-preview .preview .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.05);
    font-size: 3em;
  }
  .item-image-preview .preview .asset {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
  }
  .item-image-preview .preview .asset img {
    width: 100%;
  }
  
  header {
    height: 100px;
    background: #1a0b27;
    position: relative;
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #200F2F;
    z-index: 15;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  header .pull-right {
    display: flex;
  }
  header a {
    display: inline-block;
    line-height: 60px;
    padding: 10px;
  }
  header .home {
    width: 360px;
    height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    line-height: normal;
  }
  header .home .logo {
    height: 60px;
    width: 60px;
    margin-right: 10px;
    background: url(../js/../img/88f3152a58c0fcde8b85.png) left center no-repeat;
    background-size: contain;
  }
  header .home .brand-name {
    font-size: 1.5em;
    letter-spacing: 3px;
  }
  header .home .brand-name .tagline {
    font-size: 0.4em;
    display: block;
  }
  header .home .brand-name strong {
    display: inline-block;
    color: #FF7440;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px;
    font-size: 0.8em;
  }
  header .separator {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    margin: 14px 0;
  }
  header .main-user-profile {
    position: absolute;
    top: 0;
    right: 20px;
    height: 100%;
    display: flex;
    align-items: center;
  }
  header .user {
    height: 100%;
    display: flex;
    align-items: center;
    line-height: 30px;
    transition: color 0.2s;
    padding-left: 15px;
    vertical-align: top;
    display: inline-flex;
    position: relative;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  header .user .icon, header .user .icon-product {
    width: 30px;
    height: 30px;
    vertical-align: top;
  }
  header .user:hover {
    color: #fff;
  }
  header .user:hover .logo .icon {
    color: #fff;
  }
  header .user .logo {
    width: 40px;
    height: 40px;
    margin-left: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
  }
  header .user .logo .icon {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s, transform 0.3s ease-in-out;
  }
  header .user.active {
    color: #fff;
  }
  header .user.active .logo .icon {
    color: #E6FF3A;
    transform: scale(1.2);
  }
  
  footer {
    background: #1a0b27;
    padding: 10px 20px;
    position: relative;
    font-size: 0.6em;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    border-top: 1px solid #200F2F;
    z-index: 15;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  footer a {
    display: inline-block;
    transition: color 0.2s;
  }
  footer a:hover {
    color: #4569c9;
  }
  footer .spacer {
    display: inline-block;
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
  }
  footer .left {
    display: flex;
    align-items: center;
    width: 200px;
  }
  footer .middle {
    flex-grow: 1;
    text-align: center;
  }
  footer .right {
    width: 200px;
    text-align: right;
  }
  footer .icon {
    width: 20px;
    height: 20px;
    font-size: 2em;
  }
  
  #error-dock {
    margin-left: 5px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    display: none;
  }
  #error-dock > .icon {
    font-size: 1.2em;
    color: #EF313E;
    transform: rotate(45deg);
  }
  #error-dock .toggle-errors {
    cursor: pointer;
  }
  #error-dock ul {
    position: absolute;
    bottom: 35px;
    left: -35px;
    background: #200F2F;
    min-width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
    display: none;
  }
  #error-dock ul li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
    color: #EF313E;
  }
  #error-dock ul li:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #error-dock ul li:last-child {
    border: none;
  }
  #error-dock ul li .error {
    flex-grow: 1;
    line-height: normal;
  }
  #error-dock ul li .error .timestamp {
    display: block;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  #error-dock ul li .clear {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  #error-dock ul li .clear:hover {
    background: #EF313E;
  }
  #error-dock ul li .clear .icon {
    transform: rotate(45deg);
    font-size: 1.2em;
  }
  #error-dock.visible {
    display: block;
  }
  #error-dock.active ul {
    display: block;
  }
  
  .login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    overflow: visible;
  }
  .login-box input {
    width: 100%;
  }
  .login-box h2 {
    margin-bottom: 20px;
    font-size: 1.6em;
  }
  .login-box .btn {
    margin: 0;
  }
  .login-box input[type=checkbox] {
    width: auto;
    vertical-align: middle;
  }
  
  #login-title {
    font-size: 2em;
    color: #4569c9;
    padding: 0 10px;
  }
  
  #login-nav {
    padding: 0 10px;
  }
  #login-nav a {
    display: inline-block;
    margin: 10px 0 0;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px 10px 0 0;
  }
  #login-nav a.active {
    background: #4569c9;
  }
  
  #login-tab form {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    padding-top: 60px;
    border-top: 4px solid #4569c9;
  }
  #login-tab form.active {
    display: block;
  }
  
  #login .form-field, #login-email .form-field {
    transition: opacity 0.5s;
  }
  #login.loading .form-field, #login-email.loading .form-field {
    opacity: 0.2;
  }
  #login.loading:after, #login-email.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #login .error-msg, #login-email .error-msg {
    position: absolute;
    bottom: -40px;
    left: 0;
    color: #EF313E;
    width: 100%;
    text-align: center;
  }
  
  #main-nav {
    overflow: hidden;
  }
  #main-nav .app-info {
    display: flex;
    padding: 20px;
    align-items: center;
    background: #200F2F url(../js/../img/07b877a6f2304d2e28a8.png);
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  #main-nav .app-info .app-thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: #200F2F;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  #main-nav .app-info .app-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #main-nav .app-info .app-display-name {
    font-size: 1.2em;
  }
  #main-nav .app-info .app-id {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  #main-nav .app-info .app-version {
    font-size: 0.8em;
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 10px;
    line-height: 20px;
    border-radius: 10px;
    margin-bottom: 6px;
    margin-left: -10px;
  }
  #main-nav .gated a {
    opacity: 0.1;
    cursor: default;
  }
  #main-nav .gated a .icon:before {
    content: "\e909";
  }
  
  #main-nav, #console-nav {
    flex: 0 0 365px;
    background: rgba(255, 255, 255, 0.05) url(../js/../img/07b877a6f2304d2e28a8.png);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  #main-nav nav, #console-nav nav {
    height: calc(100% - 120px);
    list-style: none;
    overflow: auto;
  }
  #main-nav nav .title, #console-nav nav .title {
    padding: 10px;
    color: #4569c9;
    font-size: 0.8em;
  }
  #main-nav nav li a, #console-nav nav li a {
    color: #fff;
    display: block;
    position: relative;
    padding: 0 10px;
    line-height: 50px;
    transition: all 0.2s;
  }
  #main-nav nav li a.locked, #console-nav nav li a.locked {
    opacity: 0.1;
  }
  #main-nav nav li a:hover, #console-nav nav li a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #main-nav nav li a.active, #console-nav nav li a.active {
    background: #1a0b27;
  }
  #main-nav nav li a.loading:after, #console-nav nav li a.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 12px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    opacity: 0.1;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  #user-nav {
    position: absolute;
    top: 100px;
    right: -300px;
    width: 300px;
    height: calc(100% - 140px);
    background: rgba(32, 15, 47, 0.9) url(../js/../img/07b877a6f2304d2e28a8.png);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s, right 0.5s;
    overflow: hidden;
    box-shadow: 0 0 20px #1a0b27;
    padding-bottom: 60px;
    z-index: 12;
    backdrop-filter: blur(5px);
  }
  #user-nav:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #200F2F;
    position: absolute;
    top: -10px;
    right: 10px;
  }
  #user-nav > div {
    font-size: 0.8em;
    margin-top: 20px;
    margin-bottom: 5px;
    padding: 0 20px;
    color: rgba(255, 255, 255, 0.4);
  }
  #user-nav .separator {
    height: 1px;
    background: #4569c9;
    margin: 0;
    padding: 0;
  }
  #user-nav a {
    display: block;
    padding: 10px 20px;
    line-height: 30px;
    font-size: 0.9em;
    white-space: nowrap;
    transition: background 0.2s;
  }
  #user-nav a .icon, #user-nav a .icon-product {
    margin-right: 5px;
  }
  #user-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #user-nav.active {
    opacity: 1;
    visibility: visible;
    right: 0%;
  }
  
  .icon {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    font-family: "icomoon";
    font-size: 1.6em;
    color: #fff;
  }
  .icon:before {
    content: "\e904";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    speak: none;
  }
  .icon.spinning {
    animation: spin-icon 1s linear infinite;
  }
  .icon.icon-add:before {
    content: "\e900";
  }
  .icon.icon-app:before {
    content: "\e901";
  }
  .icon.icon-back:before {
    content: "\e902";
  }
  .icon.icon-dashboard:before {
    content: "\e903";
  }
  .icon.icon-default:before {
    content: "\e904";
  }
  .icon.icon-diagram:before {
    content: "\e905";
  }
  .icon.icon-filter:before {
    content: "\e906";
  }
  .icon.icon-grid:before {
    content: "\e907";
  }
  .icon.icon-list:before {
    content: "\e908";
  }
  .icon.icon-lock:before {
    content: "\e909";
  }
  .icon.icon-login:before {
    content: "\e90a";
  }
  .icon.icon-mission:before {
    content: "\e90b";
  }
  .icon.icon-search:before {
    content: "\e90c";
  }
  .icon.icon-service:before {
    content: "\e90d";
  }
  .icon.icon-setting:before {
    content: "\e90e";
  }
  .icon.icon-select-arrow:before {
    content: "\e90f";
  }
  .icon.icon-data:before {
    content: "\e910";
  }
  .icon.icon-objective:before {
    content: "\e911";
  }
  .icon.icon-reward:before {
    content: "\e912";
  }
  .icon.icon-item:before {
    content: "\e913";
  }
  .icon.icon-stat:before {
    content: "\e914";
  }
  .icon.icon-drop:before {
    content: "\e915";
  }
  .icon.icon-twitch:before {
    content: "\e916";
  }
  .icon.icon-notification:before, .icon.icon-webnotifications:before {
    content: "\e917";
  }
  .icon.icon-console:before {
    content: "\e918";
  }
  .icon.icon-client:before {
    content: "\e919";
  }
  .icon.icon-trash:before {
    content: "\e91a";
  }
  .icon.icon-currency:before {
    content: "\e91b";
  }
  .icon.icon-transition:before {
    content: "\e91d";
  }
  .icon.icon-store:before {
    content: "\e91c";
  }
  .icon.icon-automation:before {
    content: "\e91e";
  }
  .icon.icon-giveaway:before {
    content: "\e91f";
  }
  .icon.icon-dialogflow:before {
    content: "\e920";
  }
  .icon.icon-mailchimp:before {
    content: "\e921";
  }
  .icon.icon-playfab:before {
    content: "\e922";
  }
  .icon.icon-steam:before {
    content: "\e923";
  }
  .icon.icon-versioning:before {
    content: "\e924";
  }
  .icon.icon-visible:before {
    content: "\e925";
  }
  .icon.icon-upload:before {
    content: "\e927";
  }
  .icon.icon-download:before {
    content: "\e926";
  }
  .icon.icon-logout:before {
    content: "\e928";
  }
  .icon.icon-user:before {
    content: "\e929";
  }
  .icon.icon-amulet:before {
    content: "\e92a";
  }
  .icon.icon-armor:before {
    content: "\e92b";
  }
  .icon.icon-artifact:before {
    content: "\e92c";
  }
  .icon.icon-axe:before {
    content: "\e92d";
  }
  .icon.icon-helmet:before {
    content: "\e92e";
  }
  .icon.icon-relic:before {
    content: "\e94b";
  }
  .icon.icon-shield:before {
    content: "\e930";
  }
  .icon.icon-sword:before {
    content: "\e931";
  }
  .icon.icon-ring:before {
    content: "\e932";
  }
  .icon.icon-bookmark:before {
    content: "\e933";
  }
  .icon.icon-bundle:before {
    content: "\e934";
  }
  .icon.icon-chest:before {
    content: "\e935";
  }
  .icon.icon-edit:before {
    content: "\e936";
  }
  .icon.icon-aliceandsmith:before {
    content: "\e937";
  }
  .icon.icon-rule:before {
    content: "\e939";
  }
  .icon.icon-formula:before {
    content: "\e938";
  }
  .icon.icon-apikey:before {
    content: "\e93a";
  }
  .icon.icon-jwt:before {
    content: "\e93b";
  }
  .icon.icon-layout:before {
    content: "\e93c";
  }
  .icon.icon-move:before {
    content: "\e93d";
  }
  .icon.icon-migration:before {
    content: "\e93e";
  }
  .icon.icon-warning:before {
    content: "\e93f";
  }
  .icon.icon-store-more:before {
    content: "\e940";
  }
  .icon.icon-store-x:before {
    content: "\e941";
  }
  .icon.icon-cacheproxy:before {
    content: "\e942";
  }
  .icon.icon-refresh:before {
    content: "\e943";
  }
  .icon.icon-public:before {
    content: "\e946";
  }
  .icon.icon-private:before {
    content: "\e945";
  }
  .icon.icon-internal:before {
    content: "\e944";
  }
  .icon.icon-datetime:before {
    content: "\e947";
  }
  .icon.icon-teamsstreaming:before, .icon.icon-teamsgraph:before {
    content: "\e948";
  }
  .icon.icon-video:before {
    content: "\e94a";
  }
  .icon.icon-studio:before {
    content: "\e949";
  }
  .icon.icon-empty:before {
    content: "\e92f";
  }
  .icon.icon-venue:before, .icon.icon-virtualvenue:before, .icon.icon-metavenue:before {
    content: "\e94c";
  }
  .icon.icon-chatrelay:before {
    content: "\e94d";
  }
  .icon.icon-target:before {
    content: "\e9b3";
  }
  .icon.icon-jitsi:before {
    content: "\e94e";
  }
  .icon.icon-aventri:before {
    content: "\e94f";
  }
  .icon.icon-processing:before {
    content: "\e950";
  }
  .icon.icon-aws:before, .icon.icon-s3:before {
    content: "\e951";
  }
  .icon.icon-realtime:before {
    content: "\e952";
  }
  .icon.icon-mixer:before {
    content: "\e953";
  }
  .icon.icon-color:before {
    content: "\e956";
  }
  .icon.icon-number:before {
    content: "\e955";
  }
  .icon.icon-dropdown:before {
    content: "\e954";
  }
  .icon.icon-paradox:before {
    content: "\e957";
  }
  .icon.icon-progress-bar:before {
    content: "\e958";
  }
  .icon.icon-progress-circle:before {
    content: "\e959";
  }
  .icon.icon-photonengine:before {
    content: "\e95b";
  }
  .icon.icon-genvid:before {
    content: "\e95a";
  }
  .icon.icon-unreal:before {
    content: "\e95c";
  }
  .icon.icon-image:before {
    content: "\e95d";
  }
  .icon.icon-audio:before {
    content: "\e95e";
  }
  .icon.icon-database:before, .icon.icon-azurestorage:before {
    content: "\e95f";
  }
  .icon.icon-save:before {
    content: "\e960";
  }
  .icon.icon-xr:before {
    content: "\e961";
  }
  .icon.icon-clock:before {
    content: "\e962";
  }
  .icon.icon-timeline:before {
    content: "\e963";
  }
  .icon.icon-meta:before {
    content: "\e964";
  }
  .icon.icon-oculus:before {
    content: "\e965";
  }
  .icon.icon-fork:before {
    content: "\e969";
  }
  .icon.icon-play:before, .icon.icon-arrow-right:before {
    content: "▸";
    font-family: Arial, sans-serif;
    margin-left: 2px;
  }
  .icon.icon-xandr:before {
    content: "\e96d";
  }
  .icon.icon-ads:before {
    content: "\e96c";
  }
  .icon.icon-zoomin:before {
    content: "\e96e";
  }
  .icon.icon-zoomout:before {
    content: "\e96f";
  }
  .icon.icon-linechart:before {
    content: "\e970";
  }
  .icon.icon-barchart:before {
    content: "\e971";
  }
  .icon.icon-openai:before {
    content: "\e972";
  }
  .icon.icon-palette:before, .icon.icon-stablediffusion:before {
    content: "\e973";
  }
  .icon.icon-experiments:before {
    content: "\e974";
  }
  .icon.icon-loopring:before {
    content: "\e975";
  }
  .icon.icon-nft:before {
    content: "\e976";
  }
  .icon.icon-robot:before {
    content: "\e979";
  }
  .icon.icon-help:before {
    content: "\e977";
  }
  .icon.icon-info:before {
    content: "\e978";
  }
  .icon.icon-leonardoai:before {
    content: "";
    background-image: url(../js/../img/f4d548cbb3c8d264f671.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
  }
  .icon.icon-timer:before {
    content: "";
    background-image: url(../js/../img/4dfe9f2ee360d007fb2d.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
  }
  .icon.icon-dice:before {
    content: "";
    background-image: url(../js/../img/533b76fd3e7d742c7ed9.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
  }
  .icon.icon-check:before {
    content: "";
    background-image: url(../js/../img/9d5377ce6cf58e02a38f.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
  }
  .icon.icon-instantiate:before {
    content: "";
    background-image: url(../js/../img/b14334c70ef37ab32716.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 70%;
    height: 70%;
  }
  
  .icon-product {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 40px;
    background: transparent center center no-repeat;
    background-size: contain;
    vertical-align: middle;
  }
  .icon-product.icon-hive {
    background-image: url(../js/../img/c83b53d8f2b6361e15b1.svg);
  }
  .icon-product.icon-metavenue {
    background-image: url(../js/../img/5a70f1c4c53c7fad0ce6.svg);
  }
  .icon-product.icon-gameeditor {
    background-image: url(../js/../img/1d5b95705bbb462ccd3c.svg);
  }
  .icon-product.icon-realtime {
    background-image: url(../js/../img/c9896be8a6ec440f4420.svg);
  }
  .icon-product.icon-microsoft {
    background-image: url(../js/../img/88c2d24997b642272519.svg);
  }
  .icon-product.icon-analytics {
    background-image: url(../js/../img/e783a5a87e5727d7d69e.svg);
  }
  .icon-product.icon-cacheproxy {
    background-image: url(../js/../img/62a0c4a2afd2b0dadf89.svg);
  }
  .icon-product.icon-xr {
    background-image: url(../js/../img/88f3152a58c0fcde8b85.png);
  }
  
  @keyframes spin-icon {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .btn {
    background: #4569c9;
    color: #fff;
    border: 0;
    display: inline-block;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    margin: 0 10px;
    outline: none;
  }
  .btn:hover {
    background: #8f53d9;
  }
  .btn.btn-disabled {
    cursor: default;
    opacity: 0.5;
  }
  .btn.btn-disabled:hover {
    background: #4569c9;
  }
  .btn.btn-invert {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .btn.btn-invert:hover {
    background: rgba(69, 105, 201, 0.2);
    border-color: #4569c9;
  }
  .btn.btn-faded {
    background: rgba(69, 105, 201, 0.2);
    border: 1px solid #4569c9;
  }
  .btn.btn-faded:hover {
    background: rgba(143, 83, 217, 0.2);
    border-color: #8f53d9;
  }
  .btn.loading .icon {
    color: transparent;
  }
  .btn.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .btn .icon {
    vertical-align: top;
  }
  
  .btn-add, .btn-back, .btn-remove {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding-right: 20px;
    line-height: 40px;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    border: none;
    color: #fff;
    outline: none;
  }
  .btn-add .icon, .btn-back .icon, .btn-remove .icon {
    width: 30px;
    height: 30px;
    margin: 5px;
  }
  .btn-add:hover, .btn-back:hover, .btn-remove:hover {
    background: rgba(143, 83, 217, 0.15);
  }
  .btn-add.important .icon, .btn-back.important .icon, .btn-remove.important .icon {
    background: #FF7440;
  }
  .btn-add.loading > .icon, .btn-back.loading > .icon, .btn-remove.loading > .icon {
    color: transparent;
  }
  .btn-add.loading > .icon:after, .btn-back.loading > .icon:after, .btn-remove.loading > .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .btn-add .icon {
    background: #4569c9;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .btn-add:hover .icon {
    background-color: #8f53d9;
  }
  
  .btn-back .icon {
    color: #4569c9;
    transition: color 0.2s;
  }
  .btn-back:hover .icon {
    color: #8f53d9;
  }
  
  .btn-remove {
    padding-right: 0px;
    padding-left: 20px;
  }
  .btn-remove .icon {
    font-size: 1em;
    background: #EF313E;
    border-radius: 50%;
    margin-left: 10px;
  }
  
  .btn-file.done {
    background: rgba(69, 105, 201, 0.2);
  }
  .btn-file.done .icon {
    background: #4569c9;
  }
  .btn-file.done .icon:before {
    content: "\e912";
  }
  
  .btn-option {
    position: relative;
  }
  .btn-option .options {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 99;
    background: #200F2F;
    border: 1px solid #fff;
    min-width: 250px;
    padding: 10px 0;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s;
    max-height: 215px;
    overflow-y: auto;
  }
  .btn-option .options a {
    display: block;
    padding: 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .btn-option .options a:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .btn-option .options a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .btn-option .options a .icon {
    background: none;
    margin: 0;
    margin-right: 5px;
    height: 40px;
    line-height: 40px;
  }
  .btn-option .options:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #200F2F;
    position: absolute;
    top: -10px;
    left: 10px;
  }
  .btn-option.visible .options {
    visibility: visible;
    opacity: 1;
  }
  .btn-option.loading > .icon {
    color: transparent;
  }
  .btn-option.loading > .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .btn-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    float: right;
  }
  .btn-close .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    font-size: 0.8em;
  }
  .btn-close:hover {
    background: rgba(255, 255, 255, 0.4);
  }
  
  .btn-box {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    transition: background 0.2s;
  }
  .btn-box:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .btn-tab, .btn-rnd {
    display: inline-block;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 10px;
    transition: background 0.2s;
  }
  .btn-tab:hover, .btn-rnd:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .btn-tab.active, .btn-rnd.active {
    background: #4569c9;
  }
  
  .btn-delete {
    background: #EF313E;
  }
  .btn-delete:hover {
    background: rgba(239, 49, 62, 0.2);
  }
  
  .btn-action {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
    transition: background 0.2s;
    position: relative;
    margin-left: 5px;
  }
  .btn-action .icon {
    font-size: 1.2em;
  }
  .btn-action:hover, .btn-action.active {
    background: #4569c9;
  }
  .btn-action.btn-action-trash:hover {
    background: #EF313E;
  }
  .btn-action.btn-action-tab {
    background: transparent;
  }
  .btn-action.btn-action-tab:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .btn-action.btn-action-tab.active {
    background: #1a0b27;
  }
  .btn-action.loading {
    background: rgba(255, 255, 255, 0.05);
  }
  .btn-action.loading .icon {
    display: none;
  }
  .btn-action.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .btn-keygen {
    display: inline-block;
    line-height: 38px;
    border-radius: 0 20px 20px 0;
    padding-left: 10px;
    background: #3A264B;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 0.8em;
  }
  .btn-keygen:hover {
    background: #200F2F;
  }
  .btn-keygen .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 4px;
    font-size: 1em;
  }
  .btn-keygen.loading {
    background: #200F2F;
  }
  .btn-keygen.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  ::placeholder {
    color: #fff;
    opacity: 0.1;
    font-style: italic;
  }
  
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  input[type=number] {
    -moz-appearance: textfield;
  }
  
  input[type=color] {
    width: 100px;
    height: 60px;
    padding: 9px;
    border-radius: 30px;
  }
  input[type=color]:hover {
    cursor: pointer;
    border-color: #4569c9;
  }
  input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  input[type=color]::-webkit-color-swatch {
    border-radius: 20px;
    height: 40px;
    width: 40px;
    border: none;
  }
  
  .input-number {
    display: flex;
    padding-top: 10px;
  }
  .input-number .nb {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-grow: 1;
    text-align: center;
    margin-right: 10px;
    line-height: 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .input-number .nb:last-child {
    margin: 0;
  }
  .input-number .nb:hover {
    background: rgba(69, 105, 201, 0.1);
  }
  .input-number .nb.active {
    background: rgba(69, 105, 201, 0.4);
    border-color: #4569c9;
  }
  
  fieldset {
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    padding: 20px;
  }
  input, textarea, select, .select, .info-field, .multi-select, .taggable-textarea .editable {
    color: #fff;
    line-height: 38px;
    width: 400px;
    background: none;
    padding: 0 20px;
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: border-color 0.2s;
  }
  input.search, input.search-with-filters, input.mixed-search, textarea.search, textarea.search-with-filters, textarea.mixed-search, select.search, select.search-with-filters, select.mixed-search, .select.search, .select.search-with-filters, .select.mixed-search, .info-field.search, .info-field.search-with-filters, .info-field.mixed-search, .multi-select.search, .multi-select.search-with-filters, .multi-select.mixed-search, .taggable-textarea .editable.search, .taggable-textarea .editable.search-with-filters, .taggable-textarea .editable.mixed-search {
    padding-left: 40px;
  }
  input.sm, textarea.sm, select.sm, .select.sm, .info-field.sm, .multi-select.sm, .taggable-textarea .editable.sm {
    width: 200px;
  }
  input[type=file], textarea[type=file], select[type=file], .select[type=file], .info-field[type=file], .multi-select[type=file], .taggable-textarea .editable[type=file] {
    display: none;
  }
  input[type=datetime-local]:after, textarea[type=datetime-local]:after, select[type=datetime-local]:after, .select[type=datetime-local]:after, .info-field[type=datetime-local]:after, .multi-select[type=datetime-local]:after, .taggable-textarea .editable[type=datetime-local]:after {
    content: "\e947";
    font-family: "icomoon";
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    right: 3px;
    line-height: 34px;
    transform: translate(0, -50%);
    text-align: center;
    font-size: 1.5em;
    pointer-events: none;
  }
  input[type=datetime-local]::-webkit-calendar-picker-indicator, textarea[type=datetime-local]::-webkit-calendar-picker-indicator, select[type=datetime-local]::-webkit-calendar-picker-indicator, .select[type=datetime-local]::-webkit-calendar-picker-indicator, .info-field[type=datetime-local]::-webkit-calendar-picker-indicator, .multi-select[type=datetime-local]::-webkit-calendar-picker-indicator, .taggable-textarea .editable[type=datetime-local]::-webkit-calendar-picker-indicator {
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    position: absolute;
    right: 3px;
    top: 3px;
    padding: 0;
    transition: background 0.2s;
    outline: none;
  }
  input[type=datetime-local]::-webkit-calendar-picker-indicator:hover, textarea[type=datetime-local]::-webkit-calendar-picker-indicator:hover, select[type=datetime-local]::-webkit-calendar-picker-indicator:hover, .select[type=datetime-local]::-webkit-calendar-picker-indicator:hover, .info-field[type=datetime-local]::-webkit-calendar-picker-indicator:hover, .multi-select[type=datetime-local]::-webkit-calendar-picker-indicator:hover, .taggable-textarea .editable[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
    background: #4569c9;
  }
  
  .input-keygen {
    padding-right: 120px;
  }
  
  .info-field .icon {
    margin-left: -10px;
    height: 38px;
    width: 30px;
  }
  
  textarea, .taggable-textarea .editable {
    resize: none;
    line-height: normal;
    padding: 10px 20px;
  }
  textarea.md, .taggable-textarea .editable.md {
    height: 100px;
  }
  textarea.lg, .taggable-textarea .editable.lg {
    height: 150px;
  }
  textarea.xl, .taggable-textarea .editable.xl {
    height: 400px;
  }
  
  .taggable-textarea {
    position: relative;
  }
  .taggable-textarea .options {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #1a0b27;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #fff;
    padding: 10px 0;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .taggable-textarea .options .option {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
  }
  .taggable-textarea .options .option:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .taggable-textarea .options .option:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .taggable-textarea .editable {
    overflow-y: auto;
  }
  .taggable-textarea .editable span {
    display: inline-block;
    background: rgba(32, 15, 47, 0.6);
    padding: 0 10px 0 4px;
    line-height: 20px;
    margin: 2px;
    vertical-align: middle;
    font-size: 0.9em;
    border-radius: 10px;
    transition: background 0.2s;
    color: #4569c9;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  .taggable-textarea .editable span:before {
    content: "@";
  }
  .taggable-textarea .editable span:hover {
    background: #1a0b27;
  }
  .taggable-textarea .editable span.editing {
    background: #3A264B;
  }
  .taggable-textarea.active .options {
    display: block;
  }
  
  .search-field {
    position: relative;
    display: inline-block;
    height: 40px;
  }
  .search-field .icon {
    position: absolute;
    top: 1px;
    left: 1px;
  }
  .search-field .icon:before {
    color: rgba(255, 255, 255, 0.05);
  }
  
  .json-field {
    height: 320px;
  }
  .json-field .jsoneditor {
    background: #200F2F;
    border-color: rgba(255, 255, 255, 0.05);
    padding: 10px;
  }
  .json-field .jsoneditor .jsoneditor-field, .json-field .jsoneditor .jsoneditor-value, .json-field .jsoneditor .jsoneditor-readonly {
    border: 1px solid transparent;
    border-radius: 10px !important;
    padding: 5px 10px;
  }
  .json-field .jsoneditor .jsoneditor-field:hover, .json-field .jsoneditor .jsoneditor-value:hover, .json-field .jsoneditor .jsoneditor-readonly:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
  }
  .json-field .jsoneditor .jsoneditor-field:focus, .json-field .jsoneditor .jsoneditor-value:focus, .json-field .jsoneditor .jsoneditor-readonly:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
  }
  .json-field .jsoneditor .jsoneditor-button {
    margin: 5px 0;
  }
  .json-field .jsoneditor .jsoneditor-highlight {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .json-field .jsoneditor .jsoneditor-field {
    color: #fff;
  }
  .json-field .jsoneditor .jsoneditor-value {
    color: #4569c9;
  }
  .json-field .jsoneditor .jsoneditor-expandable {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.05) url(../js/../img/131748dea083a89624cd.svg) right center no-repeat;
    background-size: contain;
  }
  select option {
    background: #3A264B;
  }
  
  .select, .multi-select {
    background: rgba(255, 255, 255, 0.05) url(../js/../img/131748dea083a89624cd.svg) right center no-repeat;
    background-size: contain;
    font-size: 0.9em;
  }
  .select input, .multi-select input {
    display: none;
  }
  .select .label, .multi-select .label {
    text-align: left;
    display: inline-block;
    min-height: 25px;
  }
  .select .label .placeholder, .multi-select .label .placeholder {
    opacity: 0.1;
    font-style: italic;
    font-size: 0.8em;
  }
  .select .select-search, .multi-select .select-search {
    position: absolute;
    top: -40px;
    left: 0;
  }
  .select .select-search input, .multi-select .select-search input {
    display: block;
  }
  .select .options, .multi-select .options {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 99;
    background: #200F2F;
    border: 1px solid #fff;
    width: 100%;
    padding: 10px 0;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s;
    text-align: left;
    max-height: 215px;
    overflow-y: auto;
  }
  .select .options a, .select .options .locked, .multi-select .options a, .multi-select .options .locked {
    display: block;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .select .options a:first-child, .select .options .locked:first-child, .multi-select .options a:first-child, .multi-select .options .locked:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .select .options a:hover, .select .options .locked:hover, .multi-select .options a:hover, .multi-select .options .locked:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .select .options a.default, .select .options .locked.default, .multi-select .options a.default, .multi-select .options .locked.default {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }
  .select .options a.custom-xr:before, .select .options .locked.custom-xr:before, .multi-select .options a.custom-xr:before, .multi-select .options .locked.custom-xr:before {
    content: "xr";
    display: inline-block;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.05);
    margin-right: 10px;
    line-height: 20px;
    color: #4569c9;
  }
  .select .options a.custom-service .icon, .select .options .locked.custom-service .icon, .multi-select .options a.custom-service .icon, .multi-select .options .locked.custom-service .icon {
    background: none !important;
    width: 22px;
    margin-right: 10px;
  }
  .select .options a.int, .select .options .locked.int, .multi-select .options a.int, .multi-select .options .locked.int {
    display: none;
  }
  .select .options a.flex, .select .options .locked.flex, .multi-select .options a.flex, .multi-select .options .locked.flex {
    display: flex;
    align-items: center;
  }
  .select .options a .thumbnail, .select .options .locked .thumbnail, .multi-select .options a .thumbnail, .multi-select .options .locked .thumbnail {
    display: inline-block;
    width: 40px;
    height: auto;
    border: 4px solid rgba(255, 255, 255, 0.05);
    background: none;
    border-radius: 6px;
    margin: 5px 5px 5px 0;
  }
  .select .options.show-int .int, .multi-select .options.show-int .int {
    display: block;
  }
  .select .options .separator, .multi-select .options .separator {
    background: #3A264B;
    height: 12px;
  }
  .select .options .locked, .multi-select .options .locked {
    color: rgba(255, 255, 255, 0.05);
    position: relative;
  }
  .select .options .locked .icon, .multi-select .options .locked .icon {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(255, 255, 255, 0.05);
  }
  .select .options:before, .multi-select .options:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #200F2F;
    position: absolute;
    top: -10px;
    right: 10px;
  }
  .select.select-playstream, .multi-select.select-playstream {
    padding-left: 5px;
  }
  .select.select-playstream .options a, .multi-select.select-playstream .options a {
    padding-left: 5px;
  }
  .select.visible .options, .multi-select.visible .options {
    visibility: visible;
    opacity: 1;
  }
  .select.loading:after, .multi-select.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .multi-select {
    padding-left: 0;
  }
  .multi-select .label {
    color: rgba(255, 255, 255, 0.4);
  }
  .multi-select .label .cnt {
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    border-radius: 50%;
    margin-left: 5px;
    border: 2px solid transparent;
  }
  .multi-select .label.enabled {
    color: #fff;
  }
  .multi-select .label.enabled .cnt {
    background: rgba(69, 105, 201, 0.2);
    color: #4569c9;
    border-color: #4569c9;
  }
  .multi-select .options a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 0.8em;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: color 0.2s, border-color 0.2s;
  }
  .multi-select .options a.active:before {
    content: "✔";
    border-color: #4569c9;
    color: #4569c9;
  }
  
  .form-field-flex {
    display: flex;
  }
  .form-field-flex .form-field {
    margin-right: 40px;
  }
  .form-field-flex .form-field:last-child {
    margin: 0;
  }
  
  form .form-title, .i-content .form-title, #widget-wizard .form-title, .config-form .form-title, .form .form-title {
    margin-bottom: 10px;
  }
  form .form-flex, .i-content .form-flex, #widget-wizard .form-flex, .config-form .form-flex, .form .form-flex {
    display: flex;
  }
  form .form-flex .form-field, .i-content .form-flex .form-field, #widget-wizard .form-flex .form-field, .config-form .form-flex .form-field, .form .form-flex .form-field {
    margin-right: 20px;
  }
  form .spacer, .i-content .spacer, #widget-wizard .spacer, .config-form .spacer, .form .spacer {
    height: 40px;
  }
  form .form-field, .i-content .form-field, #widget-wizard .form-field, .config-form .form-field, .form .form-field {
    margin-bottom: 20px;
    position: relative;
    max-width: 500px;
  }
  form .form-field label, .i-content .form-field label, #widget-wizard .form-field label, .config-form .form-field label, .form .form-field label {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
    margin-bottom: 5px;
    padding-left: 14px;
  }
  form .form-field:last-child, .i-content .form-field:last-child, #widget-wizard .form-field:last-child, .config-form .form-field:last-child, .form .form-field:last-child {
    margin: 0;
  }
  form .form-field.readonly input, form .form-field.readonly textarea, form .form-field.readonly .info-field, .i-content .form-field.readonly input, .i-content .form-field.readonly textarea, .i-content .form-field.readonly .info-field, #widget-wizard .form-field.readonly input, #widget-wizard .form-field.readonly textarea, #widget-wizard .form-field.readonly .info-field, .config-form .form-field.readonly input, .config-form .form-field.readonly textarea, .config-form .form-field.readonly .info-field, .form .form-field.readonly input, .form .form-field.readonly textarea, .form .form-field.readonly .info-field {
    color: rgba(255, 255, 255, 0.4);
  }
  form .form-field.readonly:after, .i-content .form-field.readonly:after, #widget-wizard .form-field.readonly:after, .config-form .form-field.readonly:after, .form .form-field.readonly:after {
    font-family: "icomoon";
    content: "\e909";
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
    line-height: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.05);
    font-size: 1.5em;
  }
  form .form-field.loading:after, .i-content .form-field.loading:after, #widget-wizard .form-field.loading:after, .config-form .form-field.loading:after, .form .form-field.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 9px;
    right: 9px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  form .form-field.form-field-dynamic, .i-content .form-field.form-field-dynamic, #widget-wizard .form-field.form-field-dynamic, .config-form .form-field.form-field-dynamic, .form .form-field.form-field-dynamic {
    display: none;
  }
  form .form-field.range .range-val, .i-content .form-field.range .range-val, #widget-wizard .form-field.range .range-val, .config-form .form-field.range .range-val, .form .form-field.range .range-val {
    position: absolute;
    top: -5px;
    right: 0;
    background: #3A264B;
    border-radius: 10px;
    line-height: 20px;
    padding: 0 10px;
    font-size: 0.8em;
  }
  form .form-field.align-left, .i-content .form-field.align-left, #widget-wizard .form-field.align-left, .config-form .form-field.align-left, .form .form-field.align-left {
    text-align: left;
  }
  form .form-field .btn-spacer, .i-content .form-field .btn-spacer, #widget-wizard .form-field .btn-spacer, .config-form .form-field .btn-spacer, .form .form-field .btn-spacer {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    width: 1px;
    height: 50px;
    vertical-align: middle;
    margin: 0 20px;
  }
  form .form-col-2, .i-content .form-col-2, #widget-wizard .form-col-2, .config-form .form-col-2, .form .form-col-2 {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
  }
  form .form-col-2 .col, .i-content .form-col-2 .col, #widget-wizard .form-col-2 .col, .config-form .form-col-2 .col, .form .form-col-2 .col {
    width: 50%;
  }
  form .form-col-2 .col:first-child, .i-content .form-col-2 .col:first-child, #widget-wizard .form-col-2 .col:first-child, .config-form .form-col-2 .col:first-child, .form .form-col-2 .col:first-child {
    padding-right: 10px;
  }
  form .form-col-2 .col:last-child, .i-content .form-col-2 .col:last-child, #widget-wizard .form-col-2 .col:last-child, .config-form .form-col-2 .col:last-child, .form .form-col-2 .col:last-child {
    padding-left: 10px;
  }
  form .key-val, .i-content .key-val, #widget-wizard .key-val, .config-form .key-val, .form .key-val {
    display: flex;
    height: 40px;
    margin-bottom: 5px;
  }
  form .key-val label, .i-content .key-val label, #widget-wizard .key-val label, .config-form .key-val label, .form .key-val label {
    line-height: 40px;
    height: 40px;
    min-width: 100px;
    text-align: center;
    border-radius: 20px 0 0 20px;
    background: #200F2F;
    border: 1px solid #3A264B;
    padding-right: 10px;
    color: #ff9a2c;
    font-weight: bold;
    letter-spacing: 2px;
  }
  form .key-val input, .i-content .key-val input, #widget-wizard .key-val input, .config-form .key-val input, .form .key-val input {
    border-radius: 0 20px 20px 0;
    height: 100%;
    margin: 0;
  }
  form .key-val .remove, .i-content .key-val .remove, #widget-wizard .key-val .remove, .config-form .key-val .remove, .form .key-val .remove {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    margin: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  form .key-val .remove .icon, .i-content .key-val .remove .icon, #widget-wizard .key-val .remove .icon, .config-form .key-val .remove .icon, .form .key-val .remove .icon {
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
  }
  form .key-val .remove:hover, .i-content .key-val .remove:hover, #widget-wizard .key-val .remove:hover, .config-form .key-val .remove:hover, .form .key-val .remove:hover {
    background: #EF313E;
  }
  form .enum-scalar, .i-content .enum-scalar, #widget-wizard .enum-scalar, .config-form .enum-scalar, .form .enum-scalar {
    display: flex;
  }
  form .enum-scalar .enum, .i-content .enum-scalar .enum, #widget-wizard .enum-scalar .enum, .config-form .enum-scalar .enum, .form .enum-scalar .enum {
    width: 50%;
    margin-right: 20px;
  }
  form .enum-scalar .scalar, .i-content .enum-scalar .scalar, #widget-wizard .enum-scalar .scalar, .config-form .enum-scalar .scalar, .form .enum-scalar .scalar {
    width: 50%;
  }
  form .enum-scalar .scalar.loading:after, .i-content .enum-scalar .scalar.loading:after, #widget-wizard .enum-scalar .scalar.loading:after, .config-form .enum-scalar .scalar.loading:after, .form .enum-scalar .scalar.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 9px;
    right: 9px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  form .enum-scalar input, form .enum-scalar .select, .i-content .enum-scalar input, .i-content .enum-scalar .select, #widget-wizard .enum-scalar input, #widget-wizard .enum-scalar .select, .config-form .enum-scalar input, .config-form .enum-scalar .select, .form .enum-scalar input, .form .enum-scalar .select {
    width: auto;
  }
  
  .radio {
    display: flex;
  }
  .radio.release-state {
    margin-top: 40px;
  }
  .radio .path {
    width: 50px;
    height: 1px;
    margin-top: 30px;
    background: #3A264B;
  }
  .radio .option {
    width: 70px;
    height: 85px;
    position: relative;
    cursor: pointer;
  }
  .radio .option .circle {
    position: relative;
    width: 60px;
    height: 60px;
    background: #200F2F;
    border: 4px solid #3A264B;
    border-radius: 50%;
    margin: 0 auto;
    transition: all 0.2s;
  }
  .radio .option .label {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .radio .option:hover .circle {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .radio .option.active .circle {
    border-color: #4569c9;
  }
  .radio .option.active .circle:before {
    content: "✖";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #4569c9;
    font-size: 2em;
  }
  .radio .option.active .label {
    color: #fff;
  }
  .radio .option.loading:after {
    content: "";
    width: 44px;
    height: 44px;
    position: absolute;
    top: 6px;
    left: 11px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .checkbox {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    line-height: 40px;
    padding: 0 20px 0 10px;
    width: 230px;
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
  }
  .checkbox .circle {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
    border-radius: 50%;
  }
  .checkbox .label {
    display: inline-block;
    vertical-align: middle;
  }
  .checkbox:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .checkbox.active {
    filter: drop-shadow(0 0 20px rgba(69, 105, 201, 0.5));
    background: rgba(69, 105, 201, 0.2);
  }
  .checkbox.active .circle {
    position: relative;
    border-color: #4569c9;
  }
  .checkbox.active .circle:before {
    content: "✔";
    color: #4569c9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .checkbox.loading:after {
    content: "";
    width: 34px;
    height: 34px;
    position: absolute;
    top: 3px;
    left: 6px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .checkbox.sm {
    font-size: 0.7em;
    width: 125px;
    margin: 0;
  }
  .checkbox.auto {
    width: auto;
  }
  
  .toggle {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    cursor: pointer;
  }
  .toggle:after {
    content: "";
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease-in-out;
  }
  .toggle.active {
    background-color: rgba(69, 105, 201, 0.15);
    border-color: #4569c9;
  }
  .toggle.active:after {
    left: 63px;
    background: #4569c9;
  }
  
  .form-field .toggle {
    position: relative;
    bottom: 0;
    right: 0;
    margin-left: 10px;
  }
  
  .component.live.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .from-to-form {
    display: flex;
    margin: 20px 0;
  }
  .from-to-form .arrow {
    width: 100px;
    position: relative;
    margin: 0 10px;
  }
  .from-to-form .arrow:before {
    content: "";
    display: block;
    height: 1px;
    background: #FF7440;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
  }
  .from-to-form .arrow .icon {
    background: #FF7440;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .from-to-form .from, .from-to-form .to {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 50%;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  .from-to-form .from .form-field, .from-to-form .to .form-field {
    width: 100%;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .from-to-form .from .form-field input, .from-to-form .from .form-field .select, .from-to-form .to .form-field input, .from-to-form .to .form-field .select {
    width: auto;
  }
  .from-to-form .from .form-field input, .from-to-form .to .form-field input {
    text-align: center;
  }
  .from-to-form .from.locked .form-field, .from-to-form .to.locked .form-field {
    visibility: hidden;
    opacity: 0;
  }
  
  .loading .from-to-form .arrow:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .confirm {
    width: 100%;
    transition: opacity 0.5s, visibility 0.5s;
    margin-bottom: 10px;
  }
  .confirm.locked {
    visibility: hidden;
    opacity: 0;
  }
  
  .color-input, .icon-input {
    position: relative;
    line-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.05) url(../js/../img/131748dea083a89624cd.svg) right center no-repeat;
    background-size: contain;
    border-radius: 20px;
  }
  .color-input .preview, .icon-input .preview {
    display: flex;
  }
  .color-input .color, .icon-input .color {
    width: 30px;
    height: 30px;
    margin: 5px;
    background: #200F2F;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .color-input .icon, .icon-input .icon {
    width: 30px;
    height: 30px;
    margin: 5px;
  }
  .color-input .options, .icon-input .options {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background: #200F2F;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
    max-height: 200px;
    overflow-y: auto;
  }
  .color-input .options .separator, .icon-input .options .separator {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 0;
  }
  .color-input .options:before, .icon-input .options:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #200F2F;
    position: absolute;
    top: -10px;
    right: 10px;
  }
  .color-input .options > div, .icon-input .options > div {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 5px;
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
  }
  .color-input .options > div .icon, .icon-input .options > div .icon {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .color-input .options > div:hover, .icon-input .options > div:hover {
    transform: scale(1.2);
  }
  .color-input .options.visible, .icon-input .options.visible {
    opacity: 1;
    visibility: visible;
  }
  .color-input.color-input .options > div, .icon-input.color-input .options > div {
    border-radius: 50%;
    border: 1px solid #fff;
  }
  
  .time-preview {
    color: rgba(255, 255, 255, 0.4);
    text-align: left;
    font-style: italic;
    padding-left: 20px;
    font-size: 0.6em;
  }
  .time-preview:before {
    content: "( ";
  }
  .time-preview:after {
    content: " )";
  }
  
  .input-list {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .input-list:last-child {
    border-bottom: none;
  }
  .input-list .input-list-content {
    display: flex;
    height: 30px;
  }
  .input-list .input-list-content .input-list-item {
    line-height: 30px;
    padding-left: 15px;
    padding-right: 0px;
    background: #4569c9;
    border-radius: 15px;
    font-size: 0.8em;
    margin-left: 5px;
  }
  .input-list .input-list-content .input-list-item:first-child {
    margin: 0;
  }
  .input-list .input-list-content .input-list-item a {
    display: inline-block;
    vertical-align: top;
    background: #3A264B;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    margin: 3px;
  }
  .input-list .input-list-content .input-list-item a .icon {
    font-size: 0.8em;
    width: 24px;
    height: 24px;
    vertical-align: top;
  }
  .input-list .input-list-content .input-list-item a:hover {
    background: #200F2F;
  }
  
  .input-table {
    width: 100%;
    border-collapse: collapse;
  }
  .input-table th, .input-table td {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 5px;
  }
  .input-table th:last-child, .input-table td:last-child {
    border-right: none;
  }
  .input-table tr:nth-child(2) td {
    padding-top: 20px;
  }
  .input-table th {
    border-bottom: 1px solid #4569c9;
    color: #4569c9;
    border-top: none;
  }
  .input-table input {
    font-size: 0.7em;
  }
  
  .input-item .item-preview, .input-mission .item-preview, .input-currency .item-preview {
    display: flex;
    line-height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
  }
  .input-item .item-preview .item-icon, .input-item .item-preview a, .input-mission .item-preview .item-icon, .input-mission .item-preview a, .input-currency .item-preview .item-icon, .input-currency .item-preview a {
    flex-grow: 0;
  }
  .input-item .item-preview .item-name, .input-mission .item-preview .item-name, .input-currency .item-preview .item-name {
    flex-grow: 1;
  }
  .input-item .item-preview a, .input-mission .item-preview a, .input-currency .item-preview a {
    display: inline-block;
    background: #4569c9;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin: 5px;
    transition: background 0.2s;
  }
  .input-item .item-preview a .icon, .input-mission .item-preview a .icon, .input-currency .item-preview a .icon {
    width: 30px;
    height: 30px;
    vertical-align: top;
    transition: transform 0.2s ease-in-out;
  }
  .input-item .item-preview a.active, .input-mission .item-preview a.active, .input-currency .item-preview a.active {
    background: #EF313E;
  }
  .input-item .item-preview a.active .icon, .input-mission .item-preview a.active .icon, .input-currency .item-preview a.active .icon {
    transform: rotate(135deg);
  }
  .input-item .item-preview a:hover, .input-mission .item-preview a:hover, .input-currency .item-preview a:hover {
    background: #8f53d9;
  }
  .input-item .item-preview a:hover.active, .input-mission .item-preview a:hover.active, .input-currency .item-preview a:hover.active {
    background: rgba(239, 49, 62, 0.5);
  }
  
  .sku-list .btn-add {
    margin-bottom: 10px;
  }
  .sku-list .placeholder {
    background: rgba(255, 255, 255, 0.05);
    height: 46px;
    margin-bottom: 10px;
    border-radius: 23px;
    opacity: 0.2;
  }
  .sku-list .placeholder:last-child {
    margin: 0;
  }
  .sku-list .placeholder:after {
    content: "-";
    line-height: 46px;
    font-size: 0.6em;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 20px;
  }
  .sku-list .sku-item {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    line-height: 34px;
    margin-bottom: 10px;
    border-radius: 23px;
  }
  .sku-list .sku-item:last-child {
    margin: 0;
  }
  .sku-list .sku-item input, .sku-list .sku-item .select {
    vertical-align: top;
    line-height: 32px;
    border-radius: 17px;
  }
  .sku-list .sku-item .sku-market {
    width: 200px;
    margin-right: 10px;
  }
  .sku-list .sku-item .sku-market .select {
    width: 100%;
  }
  .sku-list .sku-item .sku {
    flex-grow: 1;
  }
  .sku-list .sku-item .sku-action {
    width: 34px;
    margin-left: 10px;
  }
  .sku-list .sku-item .sku-action a {
    display: block;
    width: 34px;
    height: 34px;
    background: #EF313E;
    border-radius: 50%;
  }
  .sku-list .sku-item .sku-action a .icon {
    width: 34px;
    height: 34px;
    vertical-align: top;
    font-size: 0.9em;
  }
  
  .weighted-table .btn-add {
    margin-bottom: 10px;
  }
  .weighted-table .placeholder {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    height: 46px;
    border-radius: 22px;
    margin-bottom: 10px;
    opacity: 0.2;
  }
  .weighted-table .placeholder:last-child {
    margin: 0;
  }
  .weighted-table .placeholder:before {
    content: "";
    width: 34px;
    height: 34px;
    margin: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
  .weighted-table .placeholder:after {
    content: "Empty";
    line-height: 46px;
    font-size: 0.6em;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
  }
  .weighted-table .weighted-item {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    line-height: 34px;
    margin-bottom: 10px;
    border-radius: 23px;
  }
  .weighted-table .weighted-item:last-child {
    margin: 0;
  }
  .weighted-table .weighted-item .item-name {
    flex-grow: 1;
  }
  .weighted-table .weighted-item .item-icon {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 6px;
  }
  .weighted-table .weighted-item .item-icon .icon {
    width: 34px;
    height: 34px;
    vertical-align: top;
  }
  .weighted-table .weighted-item .item-weight {
    width: 80px;
  }
  .weighted-table .weighted-item .item-weight input {
    vertical-align: top;
    line-height: 32px;
    border-radius: 17px;
    text-align: center;
  }
  .weighted-table .weighted-item .item-action {
    width: 34px;
    margin-left: 10px;
  }
  .weighted-table .weighted-item .item-action a {
    display: block;
    width: 34px;
    height: 34px;
    background: #EF313E;
    border-radius: 50%;
  }
  .weighted-table .weighted-item .item-action a .icon {
    width: 34px;
    height: 34px;
    vertical-align: top;
    font-size: 0.9em;
  }
  
  .input-item.loading, .input-mission.loading, .input-currency.loading, .weighted-item.loading {
    opacity: 0.1;
  }
  .input-item.loading .item-icon .icon, .input-mission.loading .item-icon .icon, .input-currency.loading .item-icon .icon, .weighted-item.loading .item-icon .icon {
    color: transparent;
  }
  .input-item.loading .item-icon .icon:after, .input-mission.loading .item-icon .icon:after, .input-currency.loading .item-icon .icon:after, .weighted-item.loading .item-icon .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  form.disabled {
    pointer-events: none;
  }
  form.disabled .form-field {
    opacity: 0.2;
  }
  
  .form-field-info, .quiz-form .disclaimers {
    font-size: 0.8em;
    font-style: italic;
  }
  
  .string-list-input {
    height: 38px;
    margin-bottom: 10px;
  }
  
  .string-list-output {
    display: flex;
    flex-wrap: wrap;
  }
  .string-list-output .string-list-output-item {
    line-height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 20px;
    display: inline-flex;
    margin: 0 5px 5px 0;
  }
  .string-list-output .string-list-output-item .icon {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 0.8em;
    display: block;
    margin: 5px 5px 5px 10px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .string-list-output .string-list-output-item .icon:hover {
    background: #EF313E;
  }
  
  .field-pwd {
    position: relative;
  }
  .field-pwd .reset-pwd {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 5;
    transition: background 0.2s;
  }
  .field-pwd .reset-pwd:hover {
    background: #4569c9;
  }
  .field-pwd .reset-pwd .icon {
    font-size: 1em;
  }
  .field-pwd .confirm-pwd {
    background: #4569c9;
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 30px;
    border-radius: 15px;
    padding: 0 15px;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .field-pwd .confirm-pwd:hover {
    background: #8f53d9;
  }
  .field-pwd input {
    width: 100%;
    padding-left: 45px;
  }
  .field-pwd.loading .confirm-pwd {
    display: none;
  }
  .field-pwd.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .file-drop-container {
    transition: box-shadow 0.2s;
  }
  .file-drop-container.hover {
    box-shadow: 0 0 60px -10px #4569c9 inset;
  }
  
  .config-form .config-tip {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
  }
  .config-form .config-tip .tip-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
    color: #fff;
    position: relative;
  }
  .config-form .config-tip .tip-icon:after {
    content: "!";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 18px;
    width: 22px;
    line-height: 22px;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 50%;
  }
  .config-form .config-tip.error .tip-icon {
    color: #EF313E;
  }
  .config-form .config-tip.error .tip-icon:after {
    border-color: #EF313E;
  }
  
  .upload-media-container {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    transition: opacity 0.5s;
  }
  .upload-media-container .upload-media-nav {
    width: 40px;
    background: #200F2F;
  }
  .upload-media-container .upload-media-nav .upload-media-nav-item {
    width: 40px;
    height: 40px;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.2s;
  }
  .upload-media-container .upload-media-nav .upload-media-nav-item .icon {
    transition: transform 0.2s, color 0.2s;
  }
  .upload-media-container .upload-media-nav .upload-media-nav-item:hover {
    opacity: 1;
  }
  .upload-media-container .upload-media-nav .upload-media-nav-item.active {
    opacity: 1;
  }
  .upload-media-container .upload-media-nav .upload-media-nav-item.active .icon {
    transform: scale(1.2);
    color: #E6FF3A;
  }
  .upload-media-container .upload-media-tab {
    display: none;
    height: 520px;
    animation: fadeIn 0.5s linear;
  }
  .upload-media-container .upload-media-tab.visible {
    display: block;
  }
  .upload-media-container .upload-media-tab.visible.upload-media-ai {
    display: flex;
  }
  .upload-media-container .upload-media-tab .service-warn {
    width: 100%;
  }
  .upload-media-container .upload-media-ai {
    text-align: left;
    position: relative;
  }
  .upload-media-container .upload-media-ai .title {
    margin: 0 0 20px;
    font-size: 1.4em;
  }
  .upload-media-container .upload-media-ai .data-input {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  .upload-media-container .upload-media-ai .data-preview {
    width: 380px;
    padding: 20px;
    flex-shrink: 0;
  }
  .upload-media-container .upload-media-ai .data-preview img {
    width: 100%;
  }
  .upload-media-container .upload-media-ai .data-preview .stable-diffusion-preview {
    margin: 0;
  }
  .upload-media-container .upload-media-ai .data-preview .error {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 10px;
    color: #EF313E;
  }
  .upload-media-container .upload-media-ai .data-preview .error .icon {
    color: #EF313E;
  }
  .upload-media-container .upload-media-ai .data-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: none;
  }
  .upload-media-container .upload-media-ai .data-progress .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #E6FF3A;
    transition: width 0.5s ease-in-out;
  }
  .upload-media-container .upload-media-ai .data-progress .eta {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .upload-media-container .upload-media-ai .form-field {
    margin-bottom: 20px;
  }
  .upload-media-container .upload-media-ai .btn {
    margin: 0;
  }
  .upload-media-container .upload-media-ai .upload-media-generate {
    transition: opacity 0.2s, visibility 0.2s;
  }
  .upload-media-container .upload-media-ai .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .upload-media-container .upload-media-ai .loader:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .upload-media-container .upload-media-ai.loading .upload-media-generate {
    visibility: hidden;
    opacity: 0;
  }
  .upload-media-container .upload-media-ai.loading .loader {
    opacity: 1;
    visibility: visible;
  }
  .upload-media-container .upload-media-ai .asset-fields {
    margin-bottom: 40px;
    text-align: left;
  }
  .upload-media-container .upload-media-ai .asset-fields .form-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .upload-media-container .upload-media-ai .asset-fields .form-field label {
    padding: 0;
    color: #fff;
  }
  .upload-media-container .upload-media-ai .asset-fields .form-field .toggle {
    height: 30px;
    width: 60px;
    margin: 0 10px 0 0 !important;
  }
  .upload-media-container .upload-media-ai .asset-fields .form-field .toggle:after {
    width: 22px;
    height: 22px;
  }
  .upload-media-container .upload-media-ai .asset-fields .form-field .toggle.active:after {
    left: 32px;
  }
  .upload-media-container .file-drop-container {
    flex-grow: 1;
  }
  .upload-media-container.loading {
    opacity: 0.2;
  }
  
  .media-upload-btn, .media-select-btn {
    display: none;
  }
  .media-upload-btn.visible, .media-select-btn.visible {
    display: inline-block;
  }
  
  .upload-media-drop {
    position: relative;
    height: 220px;
    padding: 20px;
  }
  .upload-media-drop .tooltip {
    position: absolute;
    top: 50%;
    left: calc(50% - 20px);
    transform: translate(-50%, -50%);
  }
  .upload-media-drop .upload-media-preview {
    position: relative;
    height: 180px;
    overflow: hidden;
    display: none;
  }
  .upload-media-drop .upload-media-preview img, .upload-media-drop .upload-media-preview video, .upload-media-drop .upload-media-preview audio {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    border: 2px dashed #4569c9;
    background: #200F2F;
    padding: 6px;
  }
  .upload-media-drop.ready .tooltip {
    display: none;
  }
  .upload-media-drop.ready .upload-media-preview {
    display: block;
  }
  
  .playstream-input {
    min-width: 400px;
  }
  .playstream-input .playstream-input-search {
    position: relative;
  }
  .playstream-input .playstream-input-search .icon {
    position: absolute;
    top: 0;
    left: 0;
    color: rgba(255, 255, 255, 0.05);
  }
  .playstream-input .playstream-input-search input {
    padding-left: 40px;
    border-radius: 6px 6px 0 0;
    width: 100% !important;
  }
  .playstream-input .options {
    max-height: 300px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    padding: 0 0 6px;
  }
  .playstream-input .options a {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
    font-size: 0.8em;
  }
  .playstream-input .options a .icon {
    background: none;
  }
  .playstream-input .options a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .form-data-model {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
  }
  .form-data-model .form-data-model-prop {
    display: flex;
    align-items: center;
  }
  .form-data-model .form-data-model-prop .form-data-model-key {
    flex-grow: 1;
  }
  .form-data-model .form-data-model-prop .form-data-model-type {
    width: 120px;
    margin: 0 10px;
  }
  .form-data-model .form-data-model-prop .form-data-model-action .btn-trash {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .form-data-model .form-data-model-prop .form-data-model-action .btn-trash .icon {
    transform: rotate(45deg);
  }
  .form-data-model .form-data-model-prop .form-data-model-action .btn-trash:hover {
    background: #EF313E;
  }
  
  .price-list {
    height: 134px;
    overflow-y: auto;
  }
  
  .service-config-file {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 20px;
    border-radius: 20px;
    transition: border-color 0.2s;
    cursor: pointer;
  }
  .service-config-file .filename {
    flex-grow: 1;
    text-align: left;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }
  .service-config-file .upload {
    background: #4569c9;
    border-radius: 50%;
    transition: background 0.2s;
    width: 36px;
    height: 36px;
    margin: 2px;
  }
  .service-config-file .upload .icon {
    width: 100%;
    height: 100%;
  }
  .service-config-file:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .service-config-file:hover .upload {
    background: #8f53d9;
  }
  
  .slider .slider-limit {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
  }
  .slider .slider-value {
    font-size: 1.4em;
    color: #4569c9;
    font-weight: bold;
  }
  
  .curation-transformations .curation-transformation-row {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(5px);
  }
  .curation-transformations .curation-transformation-row .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
  }
  .curation-transformations .curation-transformation-row .icon-rule {
    color: #FFA011;
  }
  .curation-transformations .curation-transformation-row .icon-fork {
    color: #3AFFEB;
  }
  .curation-transformations .curation-transformation-row .statement {
    flex-grow: 1;
  }
  .curation-transformations .curation-transformation-row .statement span {
    color: #FFA011;
    background: #200F2F;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
  }
  .curation-transformations .curation-transformation-row .statement.ifelse span {
    color: #3AFFEB;
  }
  .curation-transformations .curation-transformation-row .payload {
    width: 100%;
  }
  .curation-transformations .curation-transformation-row .btn-trash {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    transition: background 0.2s;
    margin-left: 10px;
    cursor: pointer;
  }
  .curation-transformations .curation-transformation-row .btn-trash .icon {
    font-size: 1em;
    width: 100%;
    height: 100%;
  }
  .curation-transformations .curation-transformation-row .btn-trash:hover {
    background: #EF313E;
  }
  
  .upload-media-library {
    position: relative;
  }
  .upload-media-library .media-library-asset-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #200F2F;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .upload-media-library .media-library-asset-info .file {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
  }
  .upload-media-library .media-library-asset-info .file .img {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .upload-media-library .media-library-asset-info .file .bg {
    position: absolute;
    max-width: none;
    max-height: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    opacity: 0.2;
    filter: blur(5px);
  }
  .upload-media-library .media-library-asset-info .meta {
    text-align: left;
    width: 300px;
    background: #1a0b27;
    padding: 20px;
  }
  .upload-media-library .media-library-asset-info .meta .media-library-asset-close {
    margin-bottom: 20px;
  }
  .upload-media-library .media-library-asset-info .meta .meta-label {
    color: #4569c9;
    font-size: 0.8em;
    margin-top: 20px;
  }
  .upload-media-library .media-library-asset-info .meta .meta-val span {
    color: rgba(255, 255, 255, 0.4);
    display: inline-block;
    margin: 0 5px;
  }
  .upload-media-library .media-library-asset-info .meta .file-name {
    word-break: break-all;
  }
  .upload-media-library .media-library-asset-info.visible {
    opacity: 1;
    visibility: visible;
  }
  .upload-media-library .media-library-asset-list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    align-content: flex-start;
  }
  .upload-media-library .media-library-asset-list .media-library-asset {
    width: 150px;
    height: 150px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    margin: 5px;
    position: relative;
    flex-grow: 0;
    border: 4px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.2s;
  }
  .upload-media-library .media-library-asset-list .media-library-asset img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    transition: transform 0.3s ease-in-out;
  }
  .upload-media-library .media-library-asset-list .media-library-asset:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .upload-media-library .media-library-asset-list .media-library-asset.active {
    border-color: #4569c9;
  }
  .upload-media-library .media-library-asset-list .media-library-asset.active img {
    transform: translate(-50%, -50%) scale(1.1);
  }
  
  .asset-generic-fields.hidden {
    display: none;
  }
  
  .compound-stat-row {
    display: flex;
    width: 100%;
    align-items: center;
    padding-left: 20px;
  }
  .compound-stat-row .separator {
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    margin: 16px 4px 0;
    position: relative;
  }
  .compound-stat-row .separator:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid #E6FF3A;
  }
  .compound-stat-row .actions {
    flex-grow: 1;
    text-align: right;
  }
  .compound-stat-row .actions .remove-compound-statistic-tier {
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .compound-stat-row .actions .remove-compound-statistic-tier .icon {
    font-size: 1em;
  }
  .compound-stat-row .actions .remove-compound-statistic-tier:hover {
    background: #EF313E;
  }
  
  .compound-stat-key-val .key {
    margin-bottom: 5px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
  }
  .compound-stat-key-val input {
    width: 100px;
    text-align: center;
  }
  
  #form-leaderboard-filter .loader {
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  #form-leaderboard-filter .loader .spinner {
    position: relative;
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }
  #form-leaderboard-filter .loader .spinner:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #form-leaderboard-filter.loading .loader {
    opacity: 1;
    visibility: visible;
  }
  
  .notification-preview {
    height: 390px;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    padding: 20px;
  }
  
  #notification-process {
    display: flex;
    margin-bottom: 40px;
    opacity: 0.1;
    transition: opacity 1s;
  }
  #notification-process > div {
    width: 33%;
    padding: 0 20px;
    font-size: 2em;
    border-left: 2px solid rgba(255, 255, 255, 0.05);
    transition: border-color 1s;
  }
  #notification-process > div .label {
    font-size: 0.4em;
    margin-left: -10px;
  }
  #notification-process > div .nb {
    transition: color 1s;
  }
  #notification-process.visible {
    opacity: 1;
  }
  #notification-process.visible > div {
    border-color: #4569c9;
  }
  #notification-process.visible > div .nb {
    color: #4569c9;
  }
  #notification-process.visible .failed {
    border-color: #EF313E;
  }
  #notification-process.visible .failed .nb {
    color: #EF313E;
  }
  
  .notification-actions {
    position: relative;
    height: 40px;
  }
  .notification-actions .ajax-loader {
    top: -20px;
    left: 60px;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .notification-actions .notification-push, .notification-actions .notification-fetch {
    display: inline-block;
  }
  .notification-actions .notification-push.hidden, .notification-actions .notification-fetch.hidden {
    display: none;
  }
  .notification-actions.loading .ajax-loader {
    opacity: 1;
  }
  
  .console #main-content {
    padding: 0;
  }
  
  #console {
    display: flex;
    height: 100%;
  }
  #console #console-nav {
    margin-right: 20px;
    background: none;
    height: 100%;
    overflow-y: auto;
    background: #200F2F;
  }
  #console #console-nav nav {
    height: 100%;
  }
  #console #console-nav a {
    background: none;
    font-size: 0.8em;
  }
  #console #console-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #console #console-nav a.active {
    background: #200F2F;
  }
  #console #console-nav a.active:after {
    right: 5px;
    opacity: 1;
    border-left-color: #E6FF3A;
  }
  #console #console-nav a.deprecated {
    text-decoration: line-through;
    opacity: 0.2;
    color: #FFA011;
  }
  #console #console-nav a.deprecated .icon {
    color: #FFA011;
  }
  #console #console-nav a.deprecated.active {
    opacity: 1;
  }
  #console #console-nav a.deprecated:after {
    border-left-color: #FFA011;
  }
  #console #console-content {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 0 0;
  }
  #console #console-content table {
    border-collapse: collapse;
  }
  #console #console-content table th {
    color: #E6FF3A;
    font-weight: normal;
  }
  #console #console-content table td, #console #console-content table th {
    text-align: left;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
  }
  #console #console-content .find {
    width: 30px;
    height: 30px;
    background: #4569c9;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: background 0.2s;
    cursor: pointer;
  }
  #console #console-content .find .icon {
    width: 30px;
    height: 30px;
    font-size: 1.2em;
  }
  #console #console-content .find .options {
    position: absolute;
    top: 38px;
    right: 0;
    background: #200F2F;
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 99;
    max-height: 300px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.2s, opacity 0.2s;
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.05);
  }
  #console #console-content .find .options .option-title {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.6em;
    color: #4569c9;
  }
  #console #console-content .find .options a {
    display: block;
    padding: 10px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
  }
  #console #console-content .find .options a:last-child {
    border: none;
  }
  #console #console-content .find .options a:hover {
    background: #4569c9;
  }
  #console #console-content .find:hover {
    background: #8f53d9;
  }
  #console #console-content .find.active .options {
    visibility: visible;
    opacity: 1;
  }
  #console #console-content .find.loading .icon {
    color: transparent;
  }
  #console #console-content .find.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #console #console-content .headers, #console #console-content .params, #console #console-content .body, #console #console-content .result {
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  #console #console-content .body label {
    display: block;
    color: #E6FF3A;
    margin-bottom: 10px;
  }
  #console #console-content .body textarea {
    width: 100%;
    height: 200px;
  }
  #console #console-content .result {
    user-select: text;
  }
  #console #console-content .result .empty {
    opacity: 0.1;
  }
  #console #console-content .result .ajax-loader {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 60px;
    height: 82px;
  }
  #console #console-content .result pre {
    white-space: pre-wrap;
    word-break: break-all;
  }
  #console #console-content .description {
    padding: 10px;
    font-style: normal;
  }
  #console #console-content .deprecated {
    padding: 10px;
    color: #FFA011;
    background: rgba(255, 160, 17, 0.1);
    display: flex;
    align-items: center;
  }
  #console #console-content .deprecated .icon {
    color: #FFA011;
  }
  #console #console-content .deprecated .label {
    margin-right: 10px;
    text-transform: uppercase;
  }
  #console #console-content .endpoint-name {
    font-size: 1.6em;
    font-weight: normal;
    color: #fff;
  }
  #console #console-content .url {
    display: inline-block;
    background: #200F2F;
    border: 1px solid #3A264B;
    border-radius: 20px;
    line-height: 40px;
    user-select: all;
    padding: 0 14px;
    padding-right: 24px;
  }
  #console #console-content .url:before {
    content: "POST";
    color: rgba(255, 255, 255, 0.4);
    border-right: 1px solid #3A264B;
    padding-right: 10px;
    margin-right: 10px;
  }
  #console #console-content .console-test-btn {
    margin: 0;
  }
  
  .graph svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .graph svg .progress {
    stroke: #fff;
  }
  .graph .metric {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #E6FF3A;
    font-size: 2em;
  }
  
  .gchart {
    text-align: center;
    /*svg > g > g:last-child{
        pointer-events: none;
    }*/
  }
  .gchart > div {
    text-align: left;
    display: inline-block;
  }
  .gchart .google-visualization-tooltip {
    background: #200F2F;
    border: 1px solid #4569c9;
    border-radius: 10px;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    pointer-events: none;
  }
  .gchart .google-visualization-tooltip .google-visualization-tooltip-item {
    line-height: 20px;
    display: flex;
    margin: 0 !important;
    padding: 5px 20px !important;
  }
  .gchart .google-visualization-tooltip .google-visualization-tooltip-item .google-visualization-tooltip-square {
    border: none;
    width: 20px;
    height: 20px;
    margin: 0;
    margin-right: 5px;
  }
  .gchart .google-visualization-tooltip .google-visualization-tooltip-item span {
    color: #fff !important;
  }
  .gchart.pie svg > g > g path {
    stroke: #3A264B;
    pointer-events: none;
  }
  .gchart.pie svg > g > g circle {
    fill: #3A264B;
    pointer-events: none;
  }
  .gchart.pie svg > g > g text {
    font-family: "Segoe UI", Arial, sans-serif;
  }
  
  .analytics-widget .widget-data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .analytics-widget .widget-data .value, .analytics-widget .widget-primary .value {
    color: #4569c9;
  }
  .analytics-widget .ajax-loader {
    width: 60px;
    height: 80px;
  }
  .analytics-widget .fail {
    animation: fadeIn 0.2s linear;
  }
  .analytics-widget .fail:before, .analytics-widget .fail:after {
    content: "";
    width: 2px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .analytics-widget .fail:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .analytics-widget.widget-single-value .circle {
    opacity: 0.2;
  }
  .analytics-widget.widget-single-value .widget-data {
    text-align: center;
  }
  .analytics-widget.widget-single-value .widget-data .value {
    font-size: 2.4em;
    padding: 0 20px 0;
    margin-top: -10px;
    font-weight: bold;
  }
  .analytics-widget.widget-single-value .widget-data .value:after {
    content: "";
    display: block;
    margin: 2px auto 5px;
    height: 2px;
    width: 30px;
    background: rgba(255, 255, 255, 0.05);
  }
  .analytics-widget.widget-single-value .widget-data .label {
    color: rgba(255, 255, 255, 0.4);
  }
  .analytics-widget.widget-single-3weeks .graph {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    height: auto;
  }
  .analytics-widget.widget-single-3weeks .widget-primary {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 0 20px 20px;
    padding: 20px;
  }
  .analytics-widget.widget-single-3weeks .widget-primary .value {
    font-size: 2.4em;
    padding: 0 20px 0;
    margin-top: -10px;
    font-weight: bold;
  }
  .analytics-widget.widget-single-3weeks .widget-primary .value:after {
    content: "";
    display: block;
    margin: 2px auto 5px;
    height: 2px;
    width: 30px;
    background: rgba(255, 255, 255, 0.05);
  }
  .analytics-widget.widget-single-3weeks .widget-primary .label {
    color: rgba(255, 255, 255, 0.4);
  }
  .analytics-widget.widget-single-3weeks .widget-secondary {
    text-align: center;
    width: 50%;
  }
  .analytics-widget.widget-single-3weeks .widget-secondary .value {
    font-weight: bold;
  }
  .analytics-widget.widget-single-3weeks .widget-secondary .label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6em;
  }
  .analytics-widget.widget-single-3weeks .widget-secondary:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  .analytics-widget.widget-single-drop .widget-data {
    text-align: center;
    margin-top: 20px;
  }
  .analytics-widget.widget-single-drop .widget-data .item {
    color: #4569c9;
  }
  .analytics-widget.widget-single-drop .widget-data .player-info {
    padding: 20px 10px;
    margin: 15px 0;
    position: relative;
  }
  .analytics-widget.widget-single-drop .widget-data .player-info:before, .analytics-widget.widget-single-drop .widget-data .player-info:after {
    content: "";
    height: 2px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(255, 255, 255, 0.05);
  }
  .analytics-widget.widget-single-drop .widget-data .player-info:after {
    top: auto;
    bottom: 0;
  }
  .analytics-widget.widget-single-drop .widget-data .display-name {
    color: #E6FF3A;
    font-size: 1.2em;
  }
  .analytics-widget.widget-single-drop .widget-data .twitch-name {
    color: #4569c9;
  }
  .analytics-widget.widget-single-drop .widget-data .timestamp, .analytics-widget.widget-single-drop .widget-data .player-id {
    font-size: 0.6em;
    opacity: 0.1;
  }
  .analytics-widget.widget-linechart-lg {
    width: 980px !important;
    max-width: none !important;
    flex-grow: 1;
  }
  .analytics-widget.widget-linechart-lg.auto {
    width: 100% !important;
  }
  .analytics-widget.widget-linechart-md {
    width: 660px !important;
    max-width: none !important;
    flex-grow: 1;
  }
  
  .widget-refresh-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
  }
  .widget-refresh-bar .widget-refresh-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4569c9;
  }
  
  #timeline-log {
    padding: 20px 0;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
  #timeline-log.lg {
    zoom: 1.9;
  }
  #timeline-log .timeline-entry {
    display: flex;
    align-items: center;
    height: 26px;
    animation: fadeIn 0.5s linear;
  }
  #timeline-log .timeline-entry.new .timeline-event {
    background: #3A264B;
    border-color: rgba(255, 255, 255, 0.4);
    animation: fadeIn 1s linear;
  }
  #timeline-log .timeline-entry .timeline-marker {
    width: 18px;
    height: 18px;
    border: 3px solid #4569c9;
    border-radius: 50%;
  }
  #timeline-log .timeline-entry .timeline-event {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-left: 10px;
    border-radius: 6px;
    font-size: 0.6em;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
  }
  #timeline-log .timeline-entry .timeline-event:hover {
    background: #200F2F;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-header {
    display: flex;
    align-items: center;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-header .timeline-event-name {
    flex-grow: 1;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-header .timeline-event-name .icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-header .timeline-event-timestamp {
    margin-left: 40px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-meta {
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-user-info {
    position: absolute;
    display: flex;
    align-items: center;
    height: 100%;
    top: 0;
    left: 100%;
    min-width: 120px;
    padding-left: 10px;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-user-info .timeline-event-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 6px;
    border: 2px solid #fff;
    background: #200F2F;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-user-info .timeline-event-user-avatar img, #timeline-log .timeline-entry .timeline-event .timeline-event-user-info .timeline-event-user-avatar .icon {
    width: 100%;
    height: 100%;
    display: block;
  }
  #timeline-log .timeline-entry .timeline-event .timeline-event-user-info .timeline-event-user-avatar .icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 2.2em;
  }
  #timeline-log .timeline-entry.timeline-entry-start .timeline-marker {
    border-color: #E6FF3A;
  }
  #timeline-log .timeline-entry.timeline-entry-start .timeline-event {
    background: #200F2F;
    color: #E6FF3A;
  }
  #timeline-log .timeline-entry-path {
    display: flex;
    margin: 5px 0;
    height: 60px;
    animation: timelinePath 0.5s ease-in-out;
  }
  #timeline-log .timeline-entry-path .path {
    width: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    height: 100%;
    margin: 0 5px;
  }
  
  #formula-editor {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    backdrop-filter: blur(5px);
  }
  #formula-editor canvas {
    position: absolute;
    top: 20px;
    left: 20px;
  }
  #formula-editor > div {
    /*flex-grow: 1;*/
  }
  #formula-editor > div > .header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 0.8em;
  }
  #formula-editor .rule {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 3px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    animation: fadeIn 1s linear;
  }
  #formula-editor .rule .label {
    position: absolute;
    display: flex;
    bottom: -40px;
    left: -20px;
    background: #200F2F;
    padding-left: 20px;
    border-radius: 20px;
    line-height: 38px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    font-size: 0.7em;
    z-index: 99;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: default;
  }
  #formula-editor .rule .label:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #200F2F;
    position: absolute;
    top: -10px;
    left: 29px;
  }
  #formula-editor .rule .label a {
    display: block;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    margin-left: 10px;
    border-radius: 0 20px 20px 0;
    transition: background 0.2s;
    padding-right: 5px;
  }
  #formula-editor .rule .label a:hover {
    background: #EF313E;
  }
  #formula-editor .rule .label .icon {
    height: 38px;
    vertical-align: top;
  }
  #formula-editor .rule.active .label {
    opacity: 1;
    visibility: visible;
  }
  #formula-editor .rule.loading {
    background: rgba(255, 255, 255, 0.05) !important;
    cursor: default;
  }
  #formula-editor .rule.loading .label {
    opacity: 0;
    visibility: hidden;
  }
  #formula-editor .rule.loading .icon {
    color: transparent;
  }
  #formula-editor .rule.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #EF313E;
    border-right-color: #EF313E;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #formula-editor .add {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
  }
  #formula-editor .add:hover {
    background: #4569c9;
  }
  #formula-editor .add.loading {
    background: rgba(255, 255, 255, 0.05);
    cursor: default;
  }
  #formula-editor .add.loading .icon {
    color: transparent;
  }
  #formula-editor .add.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #formula-editor .formula-ingredients, #formula-editor .formula-rewards {
    width: 30%;
    min-width: 300px;
  }
  #formula-editor .formula-core {
    width: 40%;
    min-width: 400px;
    position: relative;
    padding-bottom: 100px;
  }
  #formula-editor .formula-core .core-wrapper {
    width: 80%;
    max-width: 600px;
    height: 600px;
    position: relative;
    margin: 40px auto;
  }
  #formula-editor .formula-core .core-wrapper .inner {
    background: #170B22;
    border-radius: 50%;
    width: 100%;
    padding-bottom: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 0 40px #170B22;
  }
  #formula-editor .formula-core .core-wrapper .inner .title {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 5px;
  }
  #formula-editor .formula-core .core-wrapper .inner .ring {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid rgba(32, 15, 47, 0.4);
    border-radius: 50%;
  }
  #formula-editor .formula-core .core-wrapper .inner .emblem, #formula-editor .formula-core .core-wrapper .inner svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #formula-editor .formula-core .core-wrapper .inner svg {
    width: 120%;
    height: 120%;
  }
  #formula-editor .formula-core .core-wrapper .inner svg circle {
    stroke: #30243B;
  }
  #formula-editor .formula-core .core-wrapper .inner .emblem {
    width: 50%;
    height: 50%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }
  #formula-editor .formula-core .core-wrapper .inner .emblem .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8em;
    color: #E6FF3A;
    filter: drop-shadow(0 0 20px rgba(230, 255, 58, 0.5));
  }
  #formula-editor .formula-core .formula-rules {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    justify-content: center;
  }
  #formula-editor .formula-core .formula-rules .rule {
    margin: 5px;
    border: 10px solid #170B22;
    box-sizing: content-box;
  }
  #formula-editor .formula-core .formula-rules .rule:after {
    content: "";
    width: 20px;
    height: 20px;
    background: #4569c9;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #formula-editor .formula-core .anchor {
    position: absolute;
    top: 50%;
    left: 0;
    background: #4569c9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transform: translate(0, -50%);
  }
  #formula-editor .formula-core .anchor.loading:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: -7px;
    left: -7px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #formula-editor .formula-core .left, #formula-editor .formula-core .right, #formula-editor .formula-core .bottom {
    position: absolute;
    height: 40px;
  }
  #formula-editor .formula-core .left .label, #formula-editor .formula-core .right .label, #formula-editor .formula-core .bottom .label {
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #formula-editor .formula-core .left .add, #formula-editor .formula-core .right .add, #formula-editor .formula-core .bottom .add {
    position: absolute;
    top: 0;
    left: 0;
  }
  #formula-editor .formula-core .left {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 15%;
  }
  #formula-editor .formula-core .left .label {
    left: 100%;
  }
  #formula-editor .formula-core .left .anchor {
    margin-left: -25px;
  }
  #formula-editor .formula-core .left .add {
    left: auto;
    right: 0;
    transform: translate(50%, 0);
  }
  #formula-editor .formula-core .right {
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    width: 15%;
  }
  #formula-editor .formula-core .right .label {
    left: 0;
  }
  #formula-editor .formula-core .right .anchor {
    left: auto;
    right: 0;
    margin-right: -20px;
  }
  #formula-editor .formula-core .right .add {
    transform: translate(-50%, 0);
  }
  #formula-editor .formula-core .bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 40px;
    height: 15%;
  }
  #formula-editor .formula-core .bottom .label {
    top: -40px;
  }
  #formula-editor .formula-core .bottom .anchor {
    left: 50%;
    top: auto;
    bottom: 0;
    margin: 0 0 -20px;
    transform: translate(-50%, 0);
  }
  #formula-editor .formula-core .bottom .add {
    transform: translate(0, -50%);
  }
  #formula-editor .commodity {
    position: relative;
    background: #170B22;
    margin-bottom: 20px;
    animation: fadeIn 1s linear;
  }
  #formula-editor .commodity .header {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    line-height: 40px;
    padding: 10px;
  }
  #formula-editor .commodity .header .icon {
    width: 40px;
  }
  #formula-editor .commodity .header .title {
    flex-grow: 1;
    line-height: 20px;
    padding: 10px 0;
  }
  #formula-editor .commodity .header .amount {
    width: 100px;
  }
  #formula-editor .commodity .header .amount input {
    width: 100%;
    text-align: center;
  }
  #formula-editor .commodity .rules {
    display: flex;
    padding: 6px;
  }
  #formula-editor .commodity .rules .add {
    margin: 3px;
  }
  #formula-editor .commodity .anchor {
    position: absolute;
    top: 50%;
    left: 0;
    background: #4569c9;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    transform: translate(0, -50%);
    margin-left: -25px;
  }
  #formula-editor .commodity .remove-commodity {
    position: absolute;
    top: 10px;
    right: -50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    z-index: 90;
    transition: background 0.2s;
  }
  #formula-editor .commodity .remove-commodity .icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 0.9em;
  }
  #formula-editor .commodity .remove-commodity:hover {
    background: #EF313E;
  }
  #formula-editor .commodity .remove-commodity.loading {
    background: rgba(255, 255, 255, 0.05);
    cursor: default;
  }
  #formula-editor .commodity .remove-commodity.loading .icon {
    color: transparent;
  }
  #formula-editor .commodity .remove-commodity.loading .icon:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 3px;
    border: 2px solid transparent;
    border-left-color: #EF313E;
    border-right-color: #EF313E;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #formula-editor .commodity.loading .anchor:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: -7px;
    left: -7px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #formula-editor .formula-ingredients .commodity {
    border-right: 15px solid #30243B;
  }
  #formula-editor .formula-ingredients .commodity .anchor {
    left: auto;
    right: 0;
    margin-right: -25px;
  }
  #formula-editor .formula-rewards .commodity {
    border-left: 15px solid #30243B;
  }
  #formula-editor .formula-rewards .commodity .remove-commodity {
    right: auto;
    left: -50px;
  }
  
  #store-tile-editor {
    position: relative;
    width: 100%;
    display: flex;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    transition: opacity 0.5s;
    backdrop-filter: blur(5px);
  }
  #store-tile-editor.loading {
    opacity: 0.2;
    pointer-events: none;
  }
  #store-tile-editor .caption {
    width: 100%;
  }
  #store-tile-editor .caption .title {
    text-align: center;
    font-size: 0.8em;
    padding-bottom: 10px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  #store-tile-editor canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  #store-tile-editor .node {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #4569c9;
    border-radius: 50%;
    box-shadow: 0 0 20px -5px #170B22;
  }
  #store-tile-editor .node.interactable {
    cursor: pointer;
    transition: background 0.4s;
    width: 30px;
    height: 30px;
  }
  #store-tile-editor .node.interactable .icon {
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  #store-tile-editor .node.interactable:hover {
    background: #8f53d9;
  }
  #store-tile-editor .node.interactable.locked .icon {
    transform: rotate(45deg);
  }
  #store-tile-editor .node.interactable.locked:hover {
    background: #EF313E;
  }
  #store-tile-editor > div {
    margin: 20px;
  }
  #store-tile-editor .base-reward {
    position: relative;
    overflow: visible;
    width: 330px;
  }
  #store-tile-editor .base-reward .box {
    margin: 0;
    border-right: 10px solid #3A264B;
    position: relative;
    width: 330px;
    box-shadow: 2px 2px 10px #200F2F;
  }
  #store-tile-editor .base-reward .box .front {
    background: #200F2F;
    border-radius: 8px 0 0 8px;
    border: 1px solid #3A264B;
  }
  #store-tile-editor .base-reward .node {
    left: auto;
    right: -30px;
    top: 210px;
    transform: translate(-50%, 0);
  }
  #store-tile-editor .base-reward .node.new-drop-filter {
    top: 160px;
    background: #E6FF3A;
  }
  #store-tile-editor .base-reward .node.new-drop-filter .icon {
    color: #170B22;
  }
  #store-tile-editor .base-reward .node.new-drop-filter:hover {
    background: #8f53d9;
  }
  #store-tile-editor .base-reward.disabled .trash, #store-tile-editor .base-reward.disabled .inspect {
    display: none;
  }
  #store-tile-editor .base-reward .store-offer-preview {
    /*position: absolute;
    top:90px;
    left:20px;*/
    position: relative;
    margin-top: 80px;
    width: 100%;
    min-height: 300px;
    background: #170B22;
    text-align: center;
    border: 1px solid #3EFF85;
    display: none;
    animation: fadeIn 0.5s linear;
  }
  #store-tile-editor .base-reward .store-offer-preview .link {
    position: absolute;
    top: -80px;
    left: 50%;
    width: 1px;
    background: #9278a9;
    height: 80px;
  }
  #store-tile-editor .base-reward .store-offer-preview .link .node {
    background: #3EFF85;
  }
  #store-tile-editor .base-reward .store-offer-preview .link .node.before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
  }
  #store-tile-editor .base-reward .store-offer-preview .link .node.before .icon {
    color: #170B22;
  }
  #store-tile-editor .base-reward .store-offer-preview .link .node.after {
    top: calc(100% - 7px);
    left: 50%;
  }
  #store-tile-editor .base-reward .store-offer-preview .skin {
    padding: 16px 10px 10px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.6em;
    color: #3EFF85;
    text-transform: uppercase;
  }
  #store-tile-editor .base-reward .store-offer-preview .title {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8em;
  }
  #store-tile-editor .base-reward .store-offer-preview .display {
    filter: drop-shadow(0 0 20px rgba(62, 255, 133, 0.5));
  }
  #store-tile-editor .base-reward .store-offer-preview .display .icon {
    width: 100%;
    height: 160px;
    font-size: 6em;
  }
  #store-tile-editor .base-reward .store-offer-preview .price {
    font-size: 1.4em;
    color: #3EFF85;
    font-weight: bold;
    padding: 10px 10px 20px;
  }
  #store-tile-editor .base-reward .store-offer-preview .price .off {
    font-size: 0.6em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    text-decoration: line-through;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.4);
  }
  #store-tile-editor .base-reward .store-offer-preview .discount {
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-style: italic;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  #store-tile-editor .base-reward .store-offer-preview .discount span {
    font-weight: bold;
  }
  #store-tile-editor .base-reward .store-offer-preview .discount span:after {
    content: ":";
  }
  #store-tile-editor .base-reward .store-offer-preview.visible {
    display: block;
  }
  #store-tile-editor .conditions {
    width: 500px;
    flex-grow: 1;
  }
  #store-tile-editor .conditions .condition, #store-tile-editor .conditions .filter {
    text-align: center;
    position: relative;
    cursor: move;
    transition: background 0.4s;
    border-radius: 8px;
    /*border-top: 4px solid transparent;
    transition: border-color 0.2s;
    cursor: move;
    background: red;*/
  }
  #store-tile-editor .conditions .condition:hover, #store-tile-editor .conditions .filter:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #store-tile-editor .conditions .condition:before, #store-tile-editor .conditions .filter:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 100%;
    height: 6px;
    transform: translate(-50%, 0);
    border: 2px dashed transparent;
    transition: border-color 0.2s;
  }
  #store-tile-editor .conditions .condition .inner, #store-tile-editor .conditions .filter .inner {
    position: relative;
    display: inline-block;
    margin: 10px auto;
    background: #200F2F;
    border: 1px solid #3A264B;
    border-radius: 8px;
    line-height: 24px;
    transition: background 0.2s;
    text-align: left;
    min-width: 300px;
    box-shadow: 2px 2px 10px #200F2F;
  }
  #store-tile-editor .conditions .condition .inner .condition-definition, #store-tile-editor .conditions .filter .inner .condition-definition {
    background: #3A264B;
    border-radius: 8px 8px 0 0;
    line-height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.8em;
  }
  #store-tile-editor .conditions .condition .inner .condition-definition .rule, #store-tile-editor .conditions .filter .inner .condition-definition .rule {
    flex-grow: 1;
  }
  #store-tile-editor .conditions .condition .inner .condition-definition .trash, #store-tile-editor .conditions .filter .inner .condition-definition .trash {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: block;
    position: relative;
    margin-right: 5px;
    transition: background 0.2s;
  }
  #store-tile-editor .conditions .condition .inner .condition-definition .trash:hover, #store-tile-editor .conditions .filter .inner .condition-definition .trash:hover {
    background: #EF313E;
  }
  #store-tile-editor .conditions .condition .inner .condition-definition .trash .icon, #store-tile-editor .conditions .filter .inner .condition-definition .trash .icon {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 1em;
  }
  #store-tile-editor .conditions .condition .inner .condition-actions, #store-tile-editor .conditions .filter .inner .condition-actions {
    padding: 10px;
    height: 60px;
  }
  #store-tile-editor .conditions .condition .inner .condition-actions .select, #store-tile-editor .conditions .filter .inner .condition-actions .select {
    width: auto;
    min-width: 240px;
  }
  #store-tile-editor .conditions .condition .inner .cond, #store-tile-editor .conditions .filter .inner .cond {
    color: #4569c9;
    font-weight: bold;
  }
  #store-tile-editor .conditions .condition .inner .cond:after, #store-tile-editor .conditions .filter .inner .cond:after {
    content: ":";
  }
  #store-tile-editor .conditions .condition .inner .rule, #store-tile-editor .conditions .filter .inner .rule {
    display: inline-block;
  }
  #store-tile-editor .conditions .condition .inner .var, #store-tile-editor .conditions .filter .inner .var {
    color: #E6FF3A;
    font-style: italic;
  }
  #store-tile-editor .conditions .condition .inner .node, #store-tile-editor .conditions .filter .inner .node {
    top: 70px;
  }
  #store-tile-editor .conditions .condition .inner .node.after, #store-tile-editor .conditions .filter .inner .node.after {
    left: auto;
    right: -35px;
    transform: translate(0, -50%);
  }
  #store-tile-editor .conditions .condition.add .inner, #store-tile-editor .conditions .filter.add .inner {
    background: #170B22;
  }
  #store-tile-editor .conditions .condition.add .inner .icon, #store-tile-editor .conditions .filter.add .inner .icon {
    background: #FF7440;
    border-radius: 50%;
    font-size: 0.8em;
  }
  #store-tile-editor .conditions .condition.add .inner:hover, #store-tile-editor .conditions .filter.add .inner:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  #store-tile-editor .conditions .condition.add .node, #store-tile-editor .conditions .filter.add .node {
    background: #fff;
  }
  #store-tile-editor .conditions .condition.add.locked .inner, #store-tile-editor .conditions .filter.add.locked .inner {
    opacity: 0.2;
    background: #170B22;
    cursor: default;
  }
  #store-tile-editor .conditions .condition.add.locked .inner .icon, #store-tile-editor .conditions .filter.add.locked .inner .icon {
    background: rgba(255, 255, 255, 0.05);
  }
  #store-tile-editor .conditions .condition.loading .condition-actions a, #store-tile-editor .conditions .filter.loading .condition-actions a {
    opacity: 0.1;
  }
  #store-tile-editor .conditions .condition.loading .after .icon:after, #store-tile-editor .conditions .filter.loading .after .icon:after {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    top: 4px;
    left: 4px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #store-tile-editor .conditions .condition.filter, #store-tile-editor .conditions .filter.filter {
    /*&:after{
        content:"";
        display: block;
        width: 300px;
        height: 1px;
        background: $color-light-transparent;
        margin:20px auto;
    }*/
  }
  #store-tile-editor .conditions .condition.filter .node, #store-tile-editor .conditions .filter.filter .node {
    background: #E6FF3A;
  }
  #store-tile-editor .conditions .condition.filter .inner .condition-definition .cond, #store-tile-editor .conditions .filter.filter .inner .condition-definition .cond {
    color: #E6FF3A;
  }
  #store-tile-editor .conditions .condition.hover:before, #store-tile-editor .conditions .filter.hover:before {
    border-color: #4569c9;
  }
  #store-tile-editor .fallbacks {
    width: 500px;
  }
  #store-tile-editor .fallbacks .fallback {
    position: relative;
    background: #200F2F;
    border: 1px solid #3A264B;
    border-left-width: 10px;
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 2px 10px #200F2F;
    padding: 20px;
    line-height: 40px;
    margin-bottom: 10px;
  }
  #store-tile-editor .fallbacks .fallback .node {
    left: -10px;
  }
  #store-tile-editor .fallbacks .fallback .remove-fallback {
    position: absolute;
    top: 25px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  #store-tile-editor .fallbacks .fallback .remove-fallback .icon {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0.9em;
  }
  #store-tile-editor .fallbacks .fallback .remove-fallback:hover {
    background: #EF313E;
  }
  
  .box .discount {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 100px solid #170B22;
    border-left: 100px solid transparent;
  }
  .box .discount .icon {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 140px;
    width: 60px;
    color: #FF7440;
    font-size: 2em;
  }
  
  .bar .refresh-rate {
    display: inline-flex;
    line-height: 40px;
    vertical-align: top;
    color: #FF7440;
    background: #170B22;
    border-radius: 20px;
    padding: 0 20px;
  }
  .bar .refresh-rate .icon {
    width: 20px;
    height: 40px;
    font-size: 1.4em;
    color: #FF7440;
    margin-right: 10px;
  }
  
  #jsoneditor-custompayload {
    height: 420px;
  }
  
  .toggle-store-layout {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
    margin-left: 10px;
  }
  .toggle-store-layout:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .toggle-store-layout.active {
    background: #4569c9;
  }
  
  #store-tile-trace-form .store-tile-trace-options {
    display: flex;
  }
  #store-tile-trace-form .icon {
    background: #200F2F;
    color: #3EFF85;
    border-radius: 50%;
    margin-right: 10px;
  }
  #store-tile-trace-form .btn.store-tile-trace {
    position: relative;
  }
  #store-tile-trace-form.loading input {
    opacity: 0.2;
  }
  #store-tile-trace-form.loading .btn.store-tile-trace {
    background: rgba(255, 255, 255, 0.05);
    color: transparent;
  }
  #store-tile-trace-form.loading .btn.store-tile-trace:after {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: -14px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .trace-highlight {
    overflow: visible;
  }
  .trace-highlight .trace-info-box {
    position: absolute;
    top: -10px;
    left: -20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #4569c9;
    border-radius: 50%;
    font-size: 0.8em;
    box-shadow: 0 0 10px #200F2F;
    text-align: center;
  }
  .trace-highlight:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid #4569c9;
    background: rgba(69, 105, 201, 0.1);
    box-shadow: 0 0 10px rgba(69, 105, 201, 0.5);
    pointer-events: none;
    animation: fadeIn 0.2s linear;
  }
  .trace-highlight.trace-highlight-fail .trace-info-box {
    background: #EF313E;
  }
  .trace-highlight.trace-highlight-fail:before {
    border-color: #EF313E;
    background-color: rgba(239, 49, 62, 0.15);
    box-shadow: 0 0 10px rgba(239, 49, 62, 0.5);
  }
  
  .store-section-header.section-edit {
    cursor: move;
    transition: background 0.2s;
  }
  .store-section-header.section-edit:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .store-section-header.section-edit.hover:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 6px;
    background: #4569c9;
  }
  .store-section-header.section-edit:before {
    content: "\e93d";
    font-family: icomoon;
    color: rgba(255, 255, 255, 0.4);
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    vertical-align: top;
    line-height: 40px;
    text-align: center;
  }
  .store-section-header.section-edit .edit, .store-section-header.section-edit .btn-add {
    display: none;
  }
  
  .store-v2-container .store-v2-store {
    margin-bottom: 20px;
  }
  .store-v2-container .store-v2-store .store-v2-store-header {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
    border-left: 4px solid #E6FF3A;
  }
  .store-v2-container .store-v2-store .store-v2-store-header .store-info {
    flex-grow: 1;
  }
  .store-v2-container .store-v2-store .store-v2-store-header .display-name {
    font-size: 1.2em;
    margin-bottom: 5px;
  }
  .store-v2-container .store-v2-store .store-v2-store-header .description {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .store-v2-container .store-v2-store .store-v2-store-header .store-v2-actions {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 20px;
    margin-left: 20px;
  }
  .store-v2-container .store-v2-store .store-v2-store-content {
    /*background:$color-light-transparent;*/
  }
  .store-v2-container .store-v2-store .store-v2-add-offer {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    margin: 10px;
    transition: background 0.2s;
    cursor: pointer;
    flex-shrink: 0;
  }
  .store-v2-container .store-v2-store .store-v2-add-offer .icon {
    width: 100%;
    height: 100%;
  }
  .store-v2-container .store-v2-store .store-v2-add-offer:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .store-v2-container .store-v2-store .store-v2-add-store {
    color: #FF7440;
    border-left: 4px solid #FF7440;
    padding-left: 50px;
    position: relative;
    line-height: 30px;
    margin-left: 30px;
    cursor: pointer;
    display: inline-block;
  }
  .store-v2-container .store-v2-store .store-v2-add-store .label {
    opacity: 0;
    color: #fff;
    transition: opacity 0.6s;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 3px;
  }
  .store-v2-container .store-v2-store .store-v2-add-store:after {
    content: "+";
    position: absolute;
    top: 0;
    left: 15px;
    background: rgba(255, 255, 255, 0.05);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: opacity 0.3s;
  }
  .store-v2-container .store-v2-store .store-v2-add-store:before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    width: 10px;
    height: 2px;
    background: #FF7440;
    transition: width 0.3s ease-in-out;
  }
  .store-v2-container .store-v2-store .store-v2-add-store:hover .label {
    opacity: 1;
  }
  .store-v2-container .store-v2-store .store-v2-add-store:hover:before {
    width: 40px;
  }
  .store-v2-container .store-v2-store .store-v2-add-store:hover:after {
    opacity: 0;
  }
  .store-v2-container .store-v2-store .store-v2-store-children {
    padding-left: 10px;
    border-left: 4px solid #FF7440;
    margin-top: 20px;
    margin-left: 20px;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-header {
    border-left-color: #FF7440;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-header:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    width: 16px;
    height: 4px;
    background: #FF7440;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-add-store {
    color: #3AFFEB;
    border-color: #3AFFEB;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-add-store:before {
    background: #3AFFEB;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children {
    border-color: #3AFFEB;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children .store-v2-store-header {
    border-color: #3AFFEB;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children .store-v2-store-header:before {
    background: #3AFFEB;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children .store-v2-add-offer {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    margin: 10px;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children .store-v2-add-offer .icon {
    width: 100%;
    height: 100%;
  }
  .store-v2-container .store-v2-store .store-v2-store-children .store-v2-store-children .store-v2-add-store {
    display: none;
  }
  .store-v2-container .store-v2-store .store-v2-offers {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    border-left: 4px solid rgba(255, 255, 255, 0.05);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer {
    position: relative;
    width: 350px;
    height: 280px;
    background: rgba(255, 255, 255, 0.05);
    margin: 10px;
    text-align: center;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .header, .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .footer {
    padding: 10px;
    line-height: 20px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .header {
    padding-bottom: 4px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .base-content {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    height: 12px;
    line-height: 12px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .footer {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .footer .price {
    line-height: 15px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .footer .price .amount {
    color: #FFA011;
    font-weight: bold;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .max-purchase, .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .discount {
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 50px;
    line-height: 30px;
    background: rgba(255, 255, 255, 0.05);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .max-purchase:before, .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .discount:before {
    content: "Max";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    background: #4569c9;
    font-size: 0.6em;
    line-height: 15px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .discount {
    left: auto;
    right: 5px;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .discount:before {
    content: "Off";
    background: #EF313E;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .discount span {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .inner {
    height: calc(100% - 90px);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .inner .graph {
    width: 140px;
    height: 140px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .inner .graph .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .inner .graph .circle .ring {
    width: 170px;
    height: 170px;
    border: 10px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer .inner .graph .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer.ready .inner .graph .circle .ring {
    opacity: 1;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer.ready .inner .graph .icon {
    opacity: 1;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer.loading .graph:after {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .store-v2-container .store-v2-store .store-v2-offers .store-v2-offer:hover .inner .graph .circle {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .store-v2-container .store-v2-refresh-options {
    display: flex;
    align-items: center;
  }
  .store-v2-container .store-v2-refresh-options .refresh-option {
    margin-left: 20px;
    text-align: right;
    color: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 0.2s;
    cursor: pointer;
  }
  .store-v2-container .store-v2-refresh-options .refresh-option .key {
    font-size: 0.8em;
  }
  .store-v2-container .store-v2-refresh-options .refresh-option.active .key {
    color: rgba(255, 255, 255, 0.4);
  }
  .store-v2-container .store-v2-refresh-options .refresh-option.active .val {
    color: #E6FF3A;
  }
  .store-v2-container .store-v2-refresh-options .refresh-option:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .store-v2-container .store-v2-actions {
    display: flex;
    align-items: center;
  }
  .store-v2-container .store-v2-actions .store-v2-action {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
    transition: background 0.2s;
    cursor: pointer;
  }
  .store-v2-container .store-v2-actions .store-v2-action:last-child {
    margin-right: 0;
  }
  .store-v2-container .store-v2-actions .store-v2-action:hover {
    background: #4569c9;
  }
  .store-v2-container .store-v2-actions .store-v2-action.add {
    background: #4569c9;
  }
  .store-v2-container .store-v2-actions .store-v2-action.add:hover {
    background: #8f53d9;
  }
  .store-v2-container .store-v2-actions .store-v2-store-delete:hover {
    background: #EF313E;
  }
  
  #overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s;
    z-index: 999;
  }
  #overlay #overlay-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #200F2F;
    opacity: 0.8;
  }
  #overlay #overlay-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    max-height: 96vh;
    background: #3A264B;
    text-align: center;
    border-radius: 40px;
    z-index: 999;
    box-shadow: 0 0 20px 0 #200F2F;
  }
  #overlay #overlay-container .inner {
    padding: 60px;
    height: 100%;
    max-height: 96vh;
    display: flex;
    flex-direction: column;
  }
  #overlay #overlay-container .warn {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border: 4px solid #EF313E;
    margin: 0 auto 20px;
    border-radius: 50%;
  }
  #overlay #overlay-container .warn .icon {
    width: 100%;
    height: 100%;
    color: #EF313E;
    font-size: 2em;
  }
  #overlay #overlay-container .warn-options {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
    margin-top: 40px;
  }
  #overlay #overlay-container h2 {
    font-size: 2em;
    color: #4569c9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  #overlay #overlay-container h3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 0;
    margin-bottom: 10px;
    font-size: 1.4em;
  }
  #overlay #overlay-container p {
    margin: 0 0 20px;
  }
  #overlay #overlay-container .error h2 {
    color: #EF313E;
  }
  #overlay #overlay-container .error .error-code {
    font-size: 1.2em;
    margin-bottom: 20px;
    opacity: 0.2;
  }
  #overlay #overlay-container .content-list-options {
    display: flex;
  }
  #overlay #overlay-container .content-list-options .content-list-option {
    width: 50%;
    margin-right: 10px;
  }
  #overlay #overlay-container .content-list-options .content-list-option:last-child {
    margin: 0;
  }
  #overlay #overlay-container .content-list-options .content-list-option .search-field, #overlay #overlay-container .content-list-options .content-list-option .select {
    width: 100%;
    min-width: auto;
    margin: 0;
  }
  #overlay #overlay-container .content-list-options .content-list-option .search-field input, #overlay #overlay-container .content-list-options .content-list-option .select input {
    width: 100%;
  }
  #overlay #overlay-container .content-list-options .content-list-item-filter .options a {
    padding-left: 5px;
  }
  #overlay #overlay-container nav {
    display: flex;
    list-style: none;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
  }
  #overlay #overlay-container nav li {
    flex-grow: 1;
  }
  #overlay #overlay-container nav li a {
    display: block;
    padding: 10px 20px 10px 10px;
    line-height: 40px;
    transition: background 0.2s;
  }
  #overlay #overlay-container nav li a .icon {
    vertical-align: middle;
  }
  #overlay #overlay-container nav li a:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #overlay #overlay-container nav li a.active {
    background: #4569c9;
  }
  #overlay #overlay-container nav li a.locked {
    opacity: 0.1;
    cursor: default;
  }
  #overlay #overlay-container ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
  }
  #overlay #overlay-container ul li {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    display: flex;
    margin-bottom: 5px;
    line-height: 30px;
    position: relative;
  }
  #overlay #overlay-container ul li > div {
    padding: 0 10px;
  }
  #overlay #overlay-container ul li .line {
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #4569c9;
    padding: 0;
  }
  #overlay #overlay-container ul li .check {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: relative;
    margin-left: 4px;
  }
  #overlay #overlay-container ul li .id {
    font-size: 0.6em;
    opacity: 0.2;
    width: 200px;
    text-align: right;
  }
  #overlay #overlay-container ul li .name {
    flex-grow: 1;
  }
  #overlay #overlay-container ul li .icon {
    height: 30px;
    width: 30px;
    padding: 0;
    margin-left: 10px;
  }
  #overlay #overlay-container ul.content-list {
    flex: 1 1 100%;
    overflow: hidden;
    overflow-y: auto;
  }
  #overlay #overlay-container ul.content-list li {
    transition: background 0.2s;
  }
  #overlay #overlay-container ul.content-list li:hover {
    cursor: pointer;
    background: rgba(69, 105, 201, 0.2);
  }
  #overlay #overlay-container ul.content-list li.active {
    background: #4569c9;
  }
  #overlay #overlay-container ul.content-list li.active .check:before {
    content: "✔";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #overlay #overlay-container ul.content-list li.locked {
    background: rgba(255, 255, 255, 0.05);
    opacity: 0.2;
  }
  #overlay #overlay-container ul.content-list li.locked .check:before {
    content: "✖";
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #overlay #overlay-container .form-field {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  #overlay #overlay-container .form-field label {
    padding-left: 0;
  }
  #overlay #overlay-container .form-field input, #overlay #overlay-container .form-field .select, #overlay #overlay-container .form-field textarea, #overlay #overlay-container .form-field .taggable-textarea .editable {
    width: 100%;
  }
  #overlay #overlay-container .form-field .toggle {
    margin: 0 auto;
  }
  #overlay #overlay-container .form-field.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
  }
  #overlay.visible {
    opacity: 1;
    visibility: visible;
  }
  #overlay form .ajax-loader {
    width: 60px;
    height: 40px;
    opacity: 0;
  }
  #overlay form.loading .form-field {
    opacity: 0;
    visibility: hidden;
  }
  #overlay form.loading .ajax-loader {
    opacity: 1;
  }
  #overlay form .error-msg {
    color: #EF313E;
    margin-bottom: 10px;
    min-height: 30px;
    line-height: 30px;
  }
  #overlay form.content-form {
    overflow: hidden;
    overflow-y: auto;
  }
  #overlay .video-player {
    margin-bottom: 40px;
  }
  #overlay .warning-message {
    font-size: 1.3em;
  }
  
  .service-config-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .service-config-header .title {
    font-size: 1.5em;
  }
  .service-config-header .icon, .service-config-header .icon-product {
    width: 100px;
    height: 100px;
  }
  .service-config-header .icon {
    font-size: 4.5em;
  }
  
  #migration-tools {
    display: flex;
    margin-bottom: 20px;
  }
  #migration-tools .hidden {
    display: none !important;
  }
  #migration-tools .history, #migration-tools .import, #migration-tools .export {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  #migration-tools .history h3, #migration-tools .import h3, #migration-tools .export h3 {
    font-size: 1.4em;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
  }
  #migration-tools .history {
    width: 350px;
    flex-shrink: 0;
  }
  #migration-tools .history h3 {
    margin-bottom: 20px;
  }
  #migration-tools .history ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #migration-tools .history ul li {
    background: rgba(255, 255, 255, 0.05);
    padding: 5px 10px;
    margin-bottom: 5px;
  }
  #migration-tools .history ul li:last-child {
    margin: 0;
  }
  #migration-tools .history ul li .timestamp {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.5em;
    padding: 4px 6px 8px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.4);
  }
  #migration-tools .history ul li .head {
    display: flex;
    flex-wrap: wrap;
    line-height: 40px;
    padding: 5px 0;
  }
  #migration-tools .history ul li .head .icon {
    font-size: 2em;
    margin-right: 5px;
  }
  #migration-tools .history ul li .head .title {
    line-height: 20px;
    padding: 5px 0;
    font-size: 0.8em;
  }
  #migration-tools .history ul li .head .src {
    font-size: 0.8em;
    display: block;
    line-height: 10px;
  }
  #migration-tools .history ul li .stats {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    flex-wrap: wrap;
  }
  #migration-tools .history ul li .stats .stat {
    width: 30%;
    flex-grow: 1;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    margin-bottom: 20px;
  }
  #migration-tools .history ul li .stats .stat:nth-child(3n) {
    border: none;
  }
  #migration-tools .history ul li .stats .stat:last-child {
    border: none;
  }
  #migration-tools .history ul li .stats .stat .key {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6em;
    margin-bottom: 4px;
  }
  #migration-tools .history ul li.up {
    border-left: 2px solid #FF7440;
  }
  #migration-tools .history ul li.up .head .icon, #migration-tools .history ul li.up .head .src {
    color: #FF7440;
  }
  #migration-tools .history ul li.up .stats .stat {
    width: 50%;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  #migration-tools .history ul li.up .stats .stat:nth-child(2n) {
    border: none;
  }
  #migration-tools .history ul li.down {
    border-left: 2px solid #4569c9;
    background: rgba(69, 105, 201, 0.1);
  }
  #migration-tools .history ul li.down .head .icon, #migration-tools .history ul li.down .head .src {
    color: #4569c9;
  }
  #migration-tools .tools {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
  }
  #migration-tools .chart {
    width: 100%;
    margin-left: 20px;
    margin-top: 20px;
    height: 280px;
    position: relative;
  }
  #migration-tools .chart .analytics-widget {
    width: 100% !important;
  }
  #migration-tools .chart .analytics-widget .header {
    text-align: center;
    padding: 20px 0;
  }
  #migration-tools .chart .analytics-widget .inner {
    padding-top: 60px;
  }
  #migration-tools .import, #migration-tools .export {
    flex-grow: 1;
    width: 40%;
    margin-left: 20px;
  }
  #migration-tools .import .form-field, #migration-tools .export .form-field {
    width: 100%;
    max-width: none;
  }
  #migration-tools .import .options, #migration-tools .import .options-merge, #migration-tools .export .options, #migration-tools .export .options-merge {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
  }
  #migration-tools .import .options .migration-action, #migration-tools .import .options-merge .migration-action, #migration-tools .export .options .migration-action, #migration-tools .export .options-merge .migration-action {
    flex-shrink: 0;
  }
  #migration-tools .import .options .migration-action__group, #migration-tools .import .options-merge .migration-action__group, #migration-tools .export .options .migration-action__group, #migration-tools .export .options-merge .migration-action__group {
    display: flex;
    flex-direction: column;
  }
  #migration-tools .import .options .warnings, #migration-tools .import .options-merge .warnings, #migration-tools .export .options .warnings, #migration-tools .export .options-merge .warnings {
    line-height: 20px;
    font-size: 0.8em;
    padding-left: 10px;
  }
  #migration-tools .import .options .warnings .icon, #migration-tools .import .options-merge .warnings .icon, #migration-tools .export .options .warnings .icon, #migration-tools .export .options-merge .warnings .icon {
    width: 20px;
    height: 20px;
    margin: 0 10px;
  }
  #migration-tools .import .options .warnings .warning, #migration-tools .import .options-merge .warnings .warning, #migration-tools .export .options .warnings .warning, #migration-tools .export .options-merge .warnings .warning {
    animation: fadeIn 0.2s linear;
    color: #E6FF3A;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 4px;
    padding: 5px;
    border-radius: 10px;
  }
  #migration-tools .import .options .warnings .warning .icon, #migration-tools .import .options-merge .warnings .warning .icon, #migration-tools .export .options .warnings .warning .icon, #migration-tools .export .options-merge .warnings .warning .icon {
    color: #E6FF3A;
    margin-right: 15px;
  }
  #migration-tools .import .options .warnings .error, #migration-tools .import .options-merge .warnings .error, #migration-tools .export .options .warnings .error, #migration-tools .export .options-merge .warnings .error {
    animation: fadeIn 0.2s linear;
    color: #EF313E;
  }
  #migration-tools .import .options .warnings .error .icon, #migration-tools .import .options-merge .warnings .error .icon, #migration-tools .export .options .warnings .error .icon, #migration-tools .export .options-merge .warnings .error .icon {
    color: #EF313E;
  }
  #migration-tools .import .options .btn.migration-action__merge .icon, #migration-tools .import .options-merge .btn.migration-action__merge .icon, #migration-tools .export .options .btn.migration-action__merge .icon, #migration-tools .export .options-merge .btn.migration-action__merge .icon {
    color: #fff;
  }
  #migration-tools .import .options .btn.migration-action__replace .icon, #migration-tools .import .options-merge .btn.migration-action__replace .icon, #migration-tools .export .options .btn.migration-action__replace .icon, #migration-tools .export .options-merge .btn.migration-action__replace .icon {
    color: #FFA011;
  }
  #migration-tools .import .options .btn, #migration-tools .import .options-merge .btn, #migration-tools .export .options .btn, #migration-tools .export .options-merge .btn {
    margin: 0;
    padding-left: 10px;
  }
  #migration-tools .import .options .btn .icon, #migration-tools .import .options-merge .btn .icon, #migration-tools .export .options .btn .icon, #migration-tools .export .options-merge .btn .icon {
    color: #4569c9;
  }
  #migration-tools .export {
    min-width: 550px;
  }
  #migration-tools .export h3 .icon {
    color: #4569c9;
  }
  #migration-tools .import {
    position: relative;
  }
  #migration-tools .import h3 .icon {
    color: #FF7440;
  }
  #migration-tools .import .migration-progress {
    height: 40px;
    padding: 10px 0;
    opacity: 0;
  }
  #migration-tools .import .migration-progress .progress-bar {
    position: relative;
    height: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  #migration-tools .import .migration-progress .progress-bar .progress {
    height: 20px;
    width: 0%;
    background: #4569c9;
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
  }
  #migration-tools .import .options {
    margin-top: 0;
  }
  #migration-tools .import .options .btn .icon {
    color: #FF7440;
  }
  #migration-tools .import .import-drop {
    height: 430px;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    position: relative;
    transition: border-color 0.5s;
  }
  #migration-tools .import .import-drop .tooltip {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #migration-tools .import .import-drop .tooltip .btn {
    margin: 10px 0 0;
    background: #170B22;
  }
  #migration-tools .import .import-drop .tooltip .btn:hover {
    background: #200F2F;
  }
  #migration-tools .import .import-report {
    height: 400px;
    border: 2px dashed rgba(255, 255, 255, 0.05);
    position: relative;
    padding: 10px;
    display: none;
  }
  #migration-tools .import .import-report .header {
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    padding: 10px;
  }
  #migration-tools .import .import-report .header .title {
    flex-grow: 1;
    font-size: 1.6em;
    color: #4569c9;
  }
  #migration-tools .import .import-report .header .btn {
    margin: 0;
  }
  #migration-tools .import .import-report ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #migration-tools .import .import-report ul li {
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    padding: 5px 10px;
    font-size: 0.8em;
    margin-top: 2px;
    position: relative;
    cursor: pointer;
  }
  #migration-tools .import .import-report ul li .chunk {
    flex-grow: 1;
  }
  #migration-tools .import .import-report ul li .total {
    width: 100px;
  }
  #migration-tools .import .import-report ul li .status {
    width: 100px;
    text-align: right;
  }
  #migration-tools .import .import-report ul li .chunk-info {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60%;
    background: #200F2F;
    display: none;
    pointer-events: none;
  }
  #migration-tools .import .import-report ul li .chunk-info .error {
    padding: 20px;
  }
  #migration-tools .import .import-report ul li .chunk-info .result {
    padding: 10px 20px;
    display: flex;
    color: #fff;
  }
  #migration-tools .import .import-report ul li .chunk-info .result:first-child {
    margin-top: 10px;
  }
  #migration-tools .import .import-report ul li .chunk-info .result:last-child {
    margin-bottom: 10px;
  }
  #migration-tools .import .import-report ul li .chunk-info .result .label {
    flex-grow: 1;
  }
  #migration-tools .import .import-report ul li:hover {
    background: #3A264B;
    z-index: 100;
  }
  #migration-tools .import .import-report ul li:hover .chunk-info {
    display: block;
  }
  #migration-tools .import .import-report ul li.success {
    color: #65FF60;
  }
  #migration-tools .import .import-report ul li.fail {
    color: #EF313E;
  }
  #migration-tools .import .import-report ul li.loading:after {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    right: 3px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #migration-tools .import .options .btn {
    opacity: 0.2;
  }
  #migration-tools .import .locked {
    animation: fadeIn 0.2s linear;
  }
  #migration-tools .import .locked:before, #migration-tools .import .locked:after {
    content: "";
    width: 2px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    margin-top: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  #migration-tools .import .locked:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  #migration-tools .import.ready .import-drop {
    border-color: #FF7440;
    background: rgba(255, 116, 64, 0.05);
    display: none;
  }
  #migration-tools .import.ready .import-drop:after {
    content: "✔";
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #FF7440;
    border: 4px solid #FF7440;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  #migration-tools .import.ready .import-report {
    display: block;
  }
  #migration-tools .import.ready .options .btn {
    opacity: 1;
  }
  #migration-tools .import.loading:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    right: 20px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #migration-tools .import.loading .import-drop {
    display: none;
  }
  #migration-tools .import.loading .import-drop .tooltip {
    display: none;
  }
  #migration-tools .import.loading .import-report {
    display: block;
  }
  #migration-tools .import.loading .import-report .btn {
    display: none;
  }
  #migration-tools .import.loading .options .btn {
    opacity: 0.2;
  }
  #migration-tools .import.loading .migration-progress {
    opacity: 1;
  }
  
  .migration-options {
    display: flex;
    height: 430px;
  }
  .migration-options .migration-option {
    width: 50%;
  }
  .migration-options .migration-option:first-child {
    margin-right: 40px;
  }
  
  .sync-results {
    font-size: 0.7em;
    padding: 10px;
  }
  
  .cacheproxy-rules {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cacheproxy-rules li {
    position: relative;
  }
  .cacheproxy-rules li form {
    margin: 0 0 20px;
    background: rgba(255, 255, 255, 0.05);
    line-height: 40px;
    border-left: 6px solid #4569c9;
  }
  .cacheproxy-rules li form .header {
    display: flex;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  .cacheproxy-rules li form .header .btn {
    padding: 0;
    margin: 0;
  }
  .cacheproxy-rules li form .header .btn .icon {
    margin: 5px;
  }
  .cacheproxy-rules li form .header .btn-add .icon {
    font-size: 0.9em;
  }
  .cacheproxy-rules li form .header h3 {
    flex-grow: 1;
  }
  .cacheproxy-rules li form .settings, .cacheproxy-rules li form .conf {
    display: flex;
    padding: 10px 20px 20px;
  }
  .cacheproxy-rules li form .conf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .cacheproxy-rules li form .endpoint {
    margin-right: 20px;
    flex-grow: 1;
  }
  .cacheproxy-rules li form .type {
    margin-right: 20px;
  }
  .cacheproxy-rules li form .type .select {
    min-width: 0;
    width: 200px;
  }
  .cacheproxy-rules li form .expiration input {
    width: auto;
  }
  .cacheproxy-rules li form .busting {
    margin: 0 20px;
  }
  .cacheproxy-rules li .shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #170B22;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .cacheproxy-rules li.loading .shade {
    opacity: 0.5;
    visibility: visible;
  }
  .cacheproxy-rules li.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 28px;
    right: 28px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .cacheproxy-rules li.loading .btn-remove {
    opacity: 0;
  }
  
  .cacheproxy-report {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cacheproxy-report li {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    line-height: 40px;
    height: 40px;
    padding: 0 5px;
    border-radius: 20px;
    margin-bottom: 8px;
  }
  .cacheproxy-report li .status {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin: 5px 0;
  }
  .cacheproxy-report li .status .icon {
    width: 100%;
    height: 100%;
    vertical-align: top;
    font-size: 1.4em;
    color: #4569c9;
  }
  .cacheproxy-report li .endpoint {
    flex-grow: 1;
    margin-left: 5px;
    font-size: 0.8em;
  }
  .cacheproxy-report li .efficiency, .cacheproxy-report li .total {
    height: 30px;
    width: 100px;
    font-size: 0.8em;
    line-height: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    margin: 5px 0;
    margin-left: 5px;
    padding: 0 15px;
    border-radius: 15px;
  }
  .cacheproxy-report li .efficiency:after {
    content: "%";
    font-size: 0.6em;
  }
  .cacheproxy-report li.disabled {
    color: rgba(255, 255, 255, 0.4);
  }
  .cacheproxy-report li.disabled .status .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .cacheproxy-report li.empty {
    opacity: 0.2;
  }
  
  .cache-url {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    padding: 0 20px;
    line-height: 28px;
    margin: 5px;
    border-radius: 15px;
    vertical-align: top;
    display: inline-block;
    font-size: 0.9em;
    user-select: all;
  }
  
  .usage-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  .usage-list li {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 25px;
    margin-bottom: 10px;
    line-height: 40px;
    border-radius: 30px;
    display: flex;
  }
  .usage-list li .status {
    width: 40px;
  }
  .usage-list li .total {
    width: 100px;
    background: rgba(255, 255, 255, 0.05);
    text-align: center;
    border-radius: 20px;
    margin: 0 10px;
  }
  .usage-list li .endpoint {
    width: 600px;
  }
  .usage-list li .error {
    flex-grow: 1;
    color: #EF313E;
    font-style: italic;
    font-size: 0.8em;
  }
  
  .color-scheme {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 5px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .color-scheme.classic {
    background: #3A264B;
  }
  .color-scheme.light {
    background: #ccc;
  }
  .color-scheme.dark {
    background: #333;
  }
  .color-scheme.ms {
    background: #1b4a7c;
  }
  
  .color-empty.widget-inner .value {
    color: rgba(255, 255, 255, 0.05) !important;
  }
  .color-empty.widget-inner .progress-bar .progress {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .color-empty.color-input .color {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.color-input .code:after {
    content: "rgba(255, 255, 255, 0.05)";
  }
  .color-empty.color-input-preview {
    background: rgba(255, 255, 255, 0.05);
  }
  .color-empty .line {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .color-empty .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty .currency-code, .color-empty .app-version {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty svg .progress {
    stroke: rgba(255, 255, 255, 0.05);
  }
  .color-empty .metric {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty .ring {
    border-color: rgba(255, 255, 255, 0.05) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0));
  }
  .color-empty.rule .icon {
    color: #fff;
  }
  .color-empty.rule > .icon {
    background: rgba(255, 255, 255, 0.05);
  }
  .color-empty.cacheproxy .status .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.cacheproxy .efficiency {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.graph-meta .val {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty .widget-data .value, .color-empty .widget-primary .value {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.colored-text {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.colored-bg {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.box-table-col {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.col {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty.widget-table-val {
    color: rgba(255, 255, 255, 0.05);
  }
  .color-empty .config-row:before {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  .color-empty.timeline-marker {
    border-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  .color-default.widget-inner .value {
    color: #fff !important;
  }
  .color-default.widget-inner .progress-bar .progress {
    background: #fff !important;
  }
  .color-default.color-input .color {
    background-color: #fff;
  }
  .color-default.color-input .code:after {
    content: "#fff";
  }
  .color-default.color-input-preview {
    background: #fff;
  }
  .color-default .line {
    background: #fff !important;
  }
  .color-default .icon {
    color: #fff;
  }
  .color-default .currency-code, .color-default .app-version {
    color: #fff;
  }
  .color-default svg .progress {
    stroke: #fff;
  }
  .color-default .metric {
    color: #fff;
  }
  .color-default .ring {
    border-color: #fff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  }
  .color-default.rule .icon {
    color: #fff;
  }
  .color-default.rule > .icon {
    background: #fff;
  }
  .color-default.cacheproxy .status .icon {
    color: #fff;
  }
  .color-default.cacheproxy .efficiency {
    color: #fff;
  }
  .color-default.graph-meta .val {
    color: #fff;
  }
  .color-default .widget-data .value, .color-default .widget-primary .value {
    color: #fff;
  }
  .color-default.colored-text {
    color: #fff;
  }
  .color-default.colored-bg {
    background-color: #fff;
  }
  .color-default.box-table-col {
    color: #fff;
  }
  .color-default.col {
    color: #fff;
  }
  .color-default.widget-table-val {
    color: #fff;
  }
  .color-default .config-row:before {
    background: #fff !important;
  }
  .color-default.timeline-marker {
    border-color: #fff !important;
  }
  
  .color-highlight.widget-inner .value {
    color: #E6FF3A !important;
  }
  .color-highlight.widget-inner .progress-bar .progress {
    background: #E6FF3A !important;
  }
  .color-highlight.color-input .color {
    background-color: #E6FF3A;
  }
  .color-highlight.color-input .code:after {
    content: "#E6FF3A";
  }
  .color-highlight.color-input-preview {
    background: #E6FF3A;
  }
  .color-highlight .line {
    background: #E6FF3A !important;
  }
  .color-highlight .icon {
    color: #E6FF3A;
  }
  .color-highlight .currency-code, .color-highlight .app-version {
    color: #E6FF3A;
  }
  .color-highlight svg .progress {
    stroke: #E6FF3A;
  }
  .color-highlight .metric {
    color: #E6FF3A;
  }
  .color-highlight .ring {
    border-color: #E6FF3A !important;
    filter: drop-shadow(0 0 8px rgba(230, 255, 58, 0.5));
  }
  .color-highlight.rule .icon {
    color: #fff;
  }
  .color-highlight.rule > .icon {
    background: #E6FF3A;
  }
  .color-highlight.cacheproxy .status .icon {
    color: #E6FF3A;
  }
  .color-highlight.cacheproxy .efficiency {
    color: #E6FF3A;
  }
  .color-highlight.graph-meta .val {
    color: #E6FF3A;
  }
  .color-highlight .widget-data .value, .color-highlight .widget-primary .value {
    color: #E6FF3A;
  }
  .color-highlight.colored-text {
    color: #E6FF3A;
  }
  .color-highlight.colored-bg {
    background-color: #E6FF3A;
  }
  .color-highlight.box-table-col {
    color: #E6FF3A;
  }
  .color-highlight.col {
    color: #E6FF3A;
  }
  .color-highlight.widget-table-val {
    color: #E6FF3A;
  }
  .color-highlight .config-row:before {
    background: #E6FF3A !important;
  }
  .color-highlight.timeline-marker {
    border-color: #E6FF3A !important;
  }
  
  .color-app.widget-inner .value {
    color: #FF7440 !important;
  }
  .color-app.widget-inner .progress-bar .progress {
    background: #FF7440 !important;
  }
  .color-app.color-input .color {
    background-color: #FF7440;
  }
  .color-app.color-input .code:after {
    content: "#FF7440";
  }
  .color-app.color-input-preview {
    background: #FF7440;
  }
  .color-app .line {
    background: #FF7440 !important;
  }
  .color-app .icon {
    color: #FF7440;
  }
  .color-app .currency-code, .color-app .app-version {
    color: #FF7440;
  }
  .color-app svg .progress {
    stroke: #FF7440;
  }
  .color-app .metric {
    color: #FF7440;
  }
  .color-app .ring {
    border-color: #FF7440 !important;
    filter: drop-shadow(0 0 8px rgba(255, 116, 64, 0.5));
  }
  .color-app.rule .icon {
    color: #fff;
  }
  .color-app.rule > .icon {
    background: #FF7440;
  }
  .color-app.cacheproxy .status .icon {
    color: #FF7440;
  }
  .color-app.cacheproxy .efficiency {
    color: #FF7440;
  }
  .color-app.graph-meta .val {
    color: #FF7440;
  }
  .color-app .widget-data .value, .color-app .widget-primary .value {
    color: #FF7440;
  }
  .color-app.colored-text {
    color: #FF7440;
  }
  .color-app.colored-bg {
    background-color: #FF7440;
  }
  .color-app.box-table-col {
    color: #FF7440;
  }
  .color-app.col {
    color: #FF7440;
  }
  .color-app.widget-table-val {
    color: #FF7440;
  }
  .color-app .config-row:before {
    background: #FF7440 !important;
  }
  .color-app.timeline-marker {
    border-color: #FF7440 !important;
  }
  
  .color-data.widget-inner .value {
    color: #FFA011 !important;
  }
  .color-data.widget-inner .progress-bar .progress {
    background: #FFA011 !important;
  }
  .color-data.color-input .color {
    background-color: #FFA011;
  }
  .color-data.color-input .code:after {
    content: "#FFA011";
  }
  .color-data.color-input-preview {
    background: #FFA011;
  }
  .color-data .line {
    background: #FFA011 !important;
  }
  .color-data .icon {
    color: #FFA011;
  }
  .color-data .currency-code, .color-data .app-version {
    color: #FFA011;
  }
  .color-data svg .progress {
    stroke: #FFA011;
  }
  .color-data .metric {
    color: #FFA011;
  }
  .color-data .ring {
    border-color: #FFA011 !important;
    filter: drop-shadow(0 0 8px rgba(255, 160, 17, 0.5));
  }
  .color-data.rule .icon {
    color: #fff;
  }
  .color-data.rule > .icon {
    background: #FFA011;
  }
  .color-data.cacheproxy .status .icon {
    color: #FFA011;
  }
  .color-data.cacheproxy .efficiency {
    color: #FFA011;
  }
  .color-data.graph-meta .val {
    color: #FFA011;
  }
  .color-data .widget-data .value, .color-data .widget-primary .value {
    color: #FFA011;
  }
  .color-data.colored-text {
    color: #FFA011;
  }
  .color-data.colored-bg {
    background-color: #FFA011;
  }
  .color-data.box-table-col {
    color: #FFA011;
  }
  .color-data.col {
    color: #FFA011;
  }
  .color-data.widget-table-val {
    color: #FFA011;
  }
  .color-data .config-row:before {
    background: #FFA011 !important;
  }
  .color-data.timeline-marker {
    border-color: #FFA011 !important;
  }
  
  .color-objective.widget-inner .value {
    color: #9C46FF !important;
  }
  .color-objective.widget-inner .progress-bar .progress {
    background: #9C46FF !important;
  }
  .color-objective.color-input .color {
    background-color: #9C46FF;
  }
  .color-objective.color-input .code:after {
    content: "#9C46FF";
  }
  .color-objective.color-input-preview {
    background: #9C46FF;
  }
  .color-objective .line {
    background: #9C46FF !important;
  }
  .color-objective .icon {
    color: #9C46FF;
  }
  .color-objective .currency-code, .color-objective .app-version {
    color: #9C46FF;
  }
  .color-objective svg .progress {
    stroke: #9C46FF;
  }
  .color-objective .metric {
    color: #9C46FF;
  }
  .color-objective .ring {
    border-color: #9C46FF !important;
    filter: drop-shadow(0 0 8px rgba(156, 70, 255, 0.5));
  }
  .color-objective.rule .icon {
    color: #fff;
  }
  .color-objective.rule > .icon {
    background: #9C46FF;
  }
  .color-objective.cacheproxy .status .icon {
    color: #9C46FF;
  }
  .color-objective.cacheproxy .efficiency {
    color: #9C46FF;
  }
  .color-objective.graph-meta .val {
    color: #9C46FF;
  }
  .color-objective .widget-data .value, .color-objective .widget-primary .value {
    color: #9C46FF;
  }
  .color-objective.colored-text {
    color: #9C46FF;
  }
  .color-objective.colored-bg {
    background-color: #9C46FF;
  }
  .color-objective.box-table-col {
    color: #9C46FF;
  }
  .color-objective.col {
    color: #9C46FF;
  }
  .color-objective.widget-table-val {
    color: #9C46FF;
  }
  .color-objective .config-row:before {
    background: #9C46FF !important;
  }
  .color-objective.timeline-marker {
    border-color: #9C46FF !important;
  }
  
  .color-reward.widget-inner .value {
    color: #3EFF85 !important;
  }
  .color-reward.widget-inner .progress-bar .progress {
    background: #3EFF85 !important;
  }
  .color-reward.color-input .color {
    background-color: #3EFF85;
  }
  .color-reward.color-input .code:after {
    content: "#3EFF85";
  }
  .color-reward.color-input-preview {
    background: #3EFF85;
  }
  .color-reward .line {
    background: #3EFF85 !important;
  }
  .color-reward .icon {
    color: #3EFF85;
  }
  .color-reward .currency-code, .color-reward .app-version {
    color: #3EFF85;
  }
  .color-reward svg .progress {
    stroke: #3EFF85;
  }
  .color-reward .metric {
    color: #3EFF85;
  }
  .color-reward .ring {
    border-color: #3EFF85 !important;
    filter: drop-shadow(0 0 8px rgba(62, 255, 133, 0.5));
  }
  .color-reward.rule .icon {
    color: #fff;
  }
  .color-reward.rule > .icon {
    background: #3EFF85;
  }
  .color-reward.cacheproxy .status .icon {
    color: #3EFF85;
  }
  .color-reward.cacheproxy .efficiency {
    color: #3EFF85;
  }
  .color-reward.graph-meta .val {
    color: #3EFF85;
  }
  .color-reward .widget-data .value, .color-reward .widget-primary .value {
    color: #3EFF85;
  }
  .color-reward.colored-text {
    color: #3EFF85;
  }
  .color-reward.colored-bg {
    background-color: #3EFF85;
  }
  .color-reward.box-table-col {
    color: #3EFF85;
  }
  .color-reward.col {
    color: #3EFF85;
  }
  .color-reward.widget-table-val {
    color: #3EFF85;
  }
  .color-reward .config-row:before {
    background: #3EFF85 !important;
  }
  .color-reward.timeline-marker {
    border-color: #3EFF85 !important;
  }
  
  .color-mission.widget-inner .value {
    color: #3AFFEB !important;
  }
  .color-mission.widget-inner .progress-bar .progress {
    background: #3AFFEB !important;
  }
  .color-mission.color-input .color {
    background-color: #3AFFEB;
  }
  .color-mission.color-input .code:after {
    content: "#3AFFEB";
  }
  .color-mission.color-input-preview {
    background: #3AFFEB;
  }
  .color-mission .line {
    background: #3AFFEB !important;
  }
  .color-mission .icon {
    color: #3AFFEB;
  }
  .color-mission .currency-code, .color-mission .app-version {
    color: #3AFFEB;
  }
  .color-mission svg .progress {
    stroke: #3AFFEB;
  }
  .color-mission .metric {
    color: #3AFFEB;
  }
  .color-mission .ring {
    border-color: #3AFFEB !important;
    filter: drop-shadow(0 0 8px rgba(58, 255, 235, 0.5));
  }
  .color-mission.rule .icon {
    color: #fff;
  }
  .color-mission.rule > .icon {
    background: #3AFFEB;
  }
  .color-mission.cacheproxy .status .icon {
    color: #3AFFEB;
  }
  .color-mission.cacheproxy .efficiency {
    color: #3AFFEB;
  }
  .color-mission.graph-meta .val {
    color: #3AFFEB;
  }
  .color-mission .widget-data .value, .color-mission .widget-primary .value {
    color: #3AFFEB;
  }
  .color-mission.colored-text {
    color: #3AFFEB;
  }
  .color-mission.colored-bg {
    background-color: #3AFFEB;
  }
  .color-mission.box-table-col {
    color: #3AFFEB;
  }
  .color-mission.col {
    color: #3AFFEB;
  }
  .color-mission.widget-table-val {
    color: #3AFFEB;
  }
  .color-mission .config-row:before {
    background: #3AFFEB !important;
  }
  .color-mission.timeline-marker {
    border-color: #3AFFEB !important;
  }
  
  .color-stat.widget-inner .value {
    color: #FF483A !important;
  }
  .color-stat.widget-inner .progress-bar .progress {
    background: #FF483A !important;
  }
  .color-stat.color-input .color {
    background-color: #FF483A;
  }
  .color-stat.color-input .code:after {
    content: "#FF483A";
  }
  .color-stat.color-input-preview {
    background: #FF483A;
  }
  .color-stat .line {
    background: #FF483A !important;
  }
  .color-stat .icon {
    color: #FF483A;
  }
  .color-stat .currency-code, .color-stat .app-version {
    color: #FF483A;
  }
  .color-stat svg .progress {
    stroke: #FF483A;
  }
  .color-stat .metric {
    color: #FF483A;
  }
  .color-stat .ring {
    border-color: #FF483A !important;
    filter: drop-shadow(0 0 8px rgba(255, 72, 58, 0.5));
  }
  .color-stat.rule .icon {
    color: #fff;
  }
  .color-stat.rule > .icon {
    background: #FF483A;
  }
  .color-stat.cacheproxy .status .icon {
    color: #FF483A;
  }
  .color-stat.cacheproxy .efficiency {
    color: #FF483A;
  }
  .color-stat.graph-meta .val {
    color: #FF483A;
  }
  .color-stat .widget-data .value, .color-stat .widget-primary .value {
    color: #FF483A;
  }
  .color-stat.colored-text {
    color: #FF483A;
  }
  .color-stat.colored-bg {
    background-color: #FF483A;
  }
  .color-stat.box-table-col {
    color: #FF483A;
  }
  .color-stat.col {
    color: #FF483A;
  }
  .color-stat.widget-table-val {
    color: #FF483A;
  }
  .color-stat .config-row:before {
    background: #FF483A !important;
  }
  .color-stat.timeline-marker {
    border-color: #FF483A !important;
  }
  
  .color-item.widget-inner .value {
    color: #65FF60 !important;
  }
  .color-item.widget-inner .progress-bar .progress {
    background: #65FF60 !important;
  }
  .color-item.color-input .color {
    background-color: #65FF60;
  }
  .color-item.color-input .code:after {
    content: "#65FF60";
  }
  .color-item.color-input-preview {
    background: #65FF60;
  }
  .color-item .line {
    background: #65FF60 !important;
  }
  .color-item .icon {
    color: #65FF60;
  }
  .color-item .currency-code, .color-item .app-version {
    color: #65FF60;
  }
  .color-item svg .progress {
    stroke: #65FF60;
  }
  .color-item .metric {
    color: #65FF60;
  }
  .color-item .ring {
    border-color: #65FF60 !important;
    filter: drop-shadow(0 0 8px rgba(101, 255, 96, 0.5));
  }
  .color-item.rule .icon {
    color: #fff;
  }
  .color-item.rule > .icon {
    background: #65FF60;
  }
  .color-item.cacheproxy .status .icon {
    color: #65FF60;
  }
  .color-item.cacheproxy .efficiency {
    color: #65FF60;
  }
  .color-item.graph-meta .val {
    color: #65FF60;
  }
  .color-item .widget-data .value, .color-item .widget-primary .value {
    color: #65FF60;
  }
  .color-item.colored-text {
    color: #65FF60;
  }
  .color-item.colored-bg {
    background-color: #65FF60;
  }
  .color-item.box-table-col {
    color: #65FF60;
  }
  .color-item.col {
    color: #65FF60;
  }
  .color-item.widget-table-val {
    color: #65FF60;
  }
  .color-item .config-row:before {
    background: #65FF60 !important;
  }
  .color-item.timeline-marker {
    border-color: #65FF60 !important;
  }
  
  .color-currency.widget-inner .value {
    color: #ff9a2c !important;
  }
  .color-currency.widget-inner .progress-bar .progress {
    background: #ff9a2c !important;
  }
  .color-currency.color-input .color {
    background-color: #ff9a2c;
  }
  .color-currency.color-input .code:after {
    content: "#ff9a2c";
  }
  .color-currency.color-input-preview {
    background: #ff9a2c;
  }
  .color-currency .line {
    background: #ff9a2c !important;
  }
  .color-currency .icon {
    color: #ff9a2c;
  }
  .color-currency .currency-code, .color-currency .app-version {
    color: #ff9a2c;
  }
  .color-currency svg .progress {
    stroke: #ff9a2c;
  }
  .color-currency .metric {
    color: #ff9a2c;
  }
  .color-currency .ring {
    border-color: #ff9a2c !important;
    filter: drop-shadow(0 0 8px rgba(255, 154, 44, 0.5));
  }
  .color-currency.rule .icon {
    color: #fff;
  }
  .color-currency.rule > .icon {
    background: #ff9a2c;
  }
  .color-currency.cacheproxy .status .icon {
    color: #ff9a2c;
  }
  .color-currency.cacheproxy .efficiency {
    color: #ff9a2c;
  }
  .color-currency.graph-meta .val {
    color: #ff9a2c;
  }
  .color-currency .widget-data .value, .color-currency .widget-primary .value {
    color: #ff9a2c;
  }
  .color-currency.colored-text {
    color: #ff9a2c;
  }
  .color-currency.colored-bg {
    background-color: #ff9a2c;
  }
  .color-currency.box-table-col {
    color: #ff9a2c;
  }
  .color-currency.col {
    color: #ff9a2c;
  }
  .color-currency.widget-table-val {
    color: #ff9a2c;
  }
  .color-currency .config-row:before {
    background: #ff9a2c !important;
  }
  .color-currency.timeline-marker {
    border-color: #ff9a2c !important;
  }
  
  .color-playfab.widget-inner .value {
    color: #f86a30 !important;
  }
  .color-playfab.widget-inner .progress-bar .progress {
    background: #f86a30 !important;
  }
  .color-playfab.color-input .color {
    background-color: #f86a30;
  }
  .color-playfab.color-input .code:after {
    content: "#f86a30";
  }
  .color-playfab.color-input-preview {
    background: #f86a30;
  }
  .color-playfab .line {
    background: #f86a30 !important;
  }
  .color-playfab .icon {
    color: #f86a30;
  }
  .color-playfab .currency-code, .color-playfab .app-version {
    color: #f86a30;
  }
  .color-playfab svg .progress {
    stroke: #f86a30;
  }
  .color-playfab .metric {
    color: #f86a30;
  }
  .color-playfab .ring {
    border-color: #f86a30 !important;
    filter: drop-shadow(0 0 8px rgba(248, 106, 48, 0.5));
  }
  .color-playfab.rule .icon {
    color: #fff;
  }
  .color-playfab.rule > .icon {
    background: #f86a30;
  }
  .color-playfab.cacheproxy .status .icon {
    color: #f86a30;
  }
  .color-playfab.cacheproxy .efficiency {
    color: #f86a30;
  }
  .color-playfab.graph-meta .val {
    color: #f86a30;
  }
  .color-playfab .widget-data .value, .color-playfab .widget-primary .value {
    color: #f86a30;
  }
  .color-playfab.colored-text {
    color: #f86a30;
  }
  .color-playfab.colored-bg {
    background-color: #f86a30;
  }
  .color-playfab.box-table-col {
    color: #f86a30;
  }
  .color-playfab.col {
    color: #f86a30;
  }
  .color-playfab.widget-table-val {
    color: #f86a30;
  }
  .color-playfab .config-row:before {
    background: #f86a30 !important;
  }
  .color-playfab.timeline-marker {
    border-color: #f86a30 !important;
  }
  
  .color-twitch.widget-inner .value {
    color: #8e4ffa !important;
  }
  .color-twitch.widget-inner .progress-bar .progress {
    background: #8e4ffa !important;
  }
  .color-twitch.color-input .color {
    background-color: #8e4ffa;
  }
  .color-twitch.color-input .code:after {
    content: "#8e4ffa";
  }
  .color-twitch.color-input-preview {
    background: #8e4ffa;
  }
  .color-twitch .line {
    background: #8e4ffa !important;
  }
  .color-twitch .icon {
    color: #8e4ffa;
  }
  .color-twitch .currency-code, .color-twitch .app-version {
    color: #8e4ffa;
  }
  .color-twitch svg .progress {
    stroke: #8e4ffa;
  }
  .color-twitch .metric {
    color: #8e4ffa;
  }
  .color-twitch .ring {
    border-color: #8e4ffa !important;
    filter: drop-shadow(0 0 8px rgba(142, 79, 250, 0.5));
  }
  .color-twitch.rule .icon {
    color: #fff;
  }
  .color-twitch.rule > .icon {
    background: #8e4ffa;
  }
  .color-twitch.cacheproxy .status .icon {
    color: #8e4ffa;
  }
  .color-twitch.cacheproxy .efficiency {
    color: #8e4ffa;
  }
  .color-twitch.graph-meta .val {
    color: #8e4ffa;
  }
  .color-twitch .widget-data .value, .color-twitch .widget-primary .value {
    color: #8e4ffa;
  }
  .color-twitch.colored-text {
    color: #8e4ffa;
  }
  .color-twitch.colored-bg {
    background-color: #8e4ffa;
  }
  .color-twitch.box-table-col {
    color: #8e4ffa;
  }
  .color-twitch.col {
    color: #8e4ffa;
  }
  .color-twitch.widget-table-val {
    color: #8e4ffa;
  }
  .color-twitch .config-row:before {
    background: #8e4ffa !important;
  }
  .color-twitch.timeline-marker {
    border-color: #8e4ffa !important;
  }
  
  .color-mailchimp.widget-inner .value {
    color: #fdde3e !important;
  }
  .color-mailchimp.widget-inner .progress-bar .progress {
    background: #fdde3e !important;
  }
  .color-mailchimp.color-input .color {
    background-color: #fdde3e;
  }
  .color-mailchimp.color-input .code:after {
    content: "#fdde3e";
  }
  .color-mailchimp.color-input-preview {
    background: #fdde3e;
  }
  .color-mailchimp .line {
    background: #fdde3e !important;
  }
  .color-mailchimp .icon {
    color: #fdde3e;
  }
  .color-mailchimp .currency-code, .color-mailchimp .app-version {
    color: #fdde3e;
  }
  .color-mailchimp svg .progress {
    stroke: #fdde3e;
  }
  .color-mailchimp .metric {
    color: #fdde3e;
  }
  .color-mailchimp .ring {
    border-color: #fdde3e !important;
    filter: drop-shadow(0 0 8px rgba(253, 222, 62, 0.5));
  }
  .color-mailchimp.rule .icon {
    color: #fff;
  }
  .color-mailchimp.rule > .icon {
    background: #fdde3e;
  }
  .color-mailchimp.cacheproxy .status .icon {
    color: #fdde3e;
  }
  .color-mailchimp.cacheproxy .efficiency {
    color: #fdde3e;
  }
  .color-mailchimp.graph-meta .val {
    color: #fdde3e;
  }
  .color-mailchimp .widget-data .value, .color-mailchimp .widget-primary .value {
    color: #fdde3e;
  }
  .color-mailchimp.colored-text {
    color: #fdde3e;
  }
  .color-mailchimp.colored-bg {
    background-color: #fdde3e;
  }
  .color-mailchimp.box-table-col {
    color: #fdde3e;
  }
  .color-mailchimp.col {
    color: #fdde3e;
  }
  .color-mailchimp.widget-table-val {
    color: #fdde3e;
  }
  .color-mailchimp .config-row:before {
    background: #fdde3e !important;
  }
  .color-mailchimp.timeline-marker {
    border-color: #fdde3e !important;
  }
  
  .color-dialogflow.widget-inner .value {
    color: #fa9628 !important;
  }
  .color-dialogflow.widget-inner .progress-bar .progress {
    background: #fa9628 !important;
  }
  .color-dialogflow.color-input .color {
    background-color: #fa9628;
  }
  .color-dialogflow.color-input .code:after {
    content: "#fa9628";
  }
  .color-dialogflow.color-input-preview {
    background: #fa9628;
  }
  .color-dialogflow .line {
    background: #fa9628 !important;
  }
  .color-dialogflow .icon {
    color: #fa9628;
  }
  .color-dialogflow .currency-code, .color-dialogflow .app-version {
    color: #fa9628;
  }
  .color-dialogflow svg .progress {
    stroke: #fa9628;
  }
  .color-dialogflow .metric {
    color: #fa9628;
  }
  .color-dialogflow .ring {
    border-color: #fa9628 !important;
    filter: drop-shadow(0 0 8px rgba(250, 150, 40, 0.5));
  }
  .color-dialogflow.rule .icon {
    color: #fff;
  }
  .color-dialogflow.rule > .icon {
    background: #fa9628;
  }
  .color-dialogflow.cacheproxy .status .icon {
    color: #fa9628;
  }
  .color-dialogflow.cacheproxy .efficiency {
    color: #fa9628;
  }
  .color-dialogflow.graph-meta .val {
    color: #fa9628;
  }
  .color-dialogflow .widget-data .value, .color-dialogflow .widget-primary .value {
    color: #fa9628;
  }
  .color-dialogflow.colored-text {
    color: #fa9628;
  }
  .color-dialogflow.colored-bg {
    background-color: #fa9628;
  }
  .color-dialogflow.box-table-col {
    color: #fa9628;
  }
  .color-dialogflow.col {
    color: #fa9628;
  }
  .color-dialogflow.widget-table-val {
    color: #fa9628;
  }
  .color-dialogflow .config-row:before {
    background: #fa9628 !important;
  }
  .color-dialogflow.timeline-marker {
    border-color: #fa9628 !important;
  }
  
  .color-webnotifications.widget-inner .value {
    color: #3AFFEB !important;
  }
  .color-webnotifications.widget-inner .progress-bar .progress {
    background: #3AFFEB !important;
  }
  .color-webnotifications.color-input .color {
    background-color: #3AFFEB;
  }
  .color-webnotifications.color-input .code:after {
    content: "#3AFFEB";
  }
  .color-webnotifications.color-input-preview {
    background: #3AFFEB;
  }
  .color-webnotifications .line {
    background: #3AFFEB !important;
  }
  .color-webnotifications .icon {
    color: #3AFFEB;
  }
  .color-webnotifications .currency-code, .color-webnotifications .app-version {
    color: #3AFFEB;
  }
  .color-webnotifications svg .progress {
    stroke: #3AFFEB;
  }
  .color-webnotifications .metric {
    color: #3AFFEB;
  }
  .color-webnotifications .ring {
    border-color: #3AFFEB !important;
    filter: drop-shadow(0 0 8px rgba(58, 255, 235, 0.5));
  }
  .color-webnotifications.rule .icon {
    color: #fff;
  }
  .color-webnotifications.rule > .icon {
    background: #3AFFEB;
  }
  .color-webnotifications.cacheproxy .status .icon {
    color: #3AFFEB;
  }
  .color-webnotifications.cacheproxy .efficiency {
    color: #3AFFEB;
  }
  .color-webnotifications.graph-meta .val {
    color: #3AFFEB;
  }
  .color-webnotifications .widget-data .value, .color-webnotifications .widget-primary .value {
    color: #3AFFEB;
  }
  .color-webnotifications.colored-text {
    color: #3AFFEB;
  }
  .color-webnotifications.colored-bg {
    background-color: #3AFFEB;
  }
  .color-webnotifications.box-table-col {
    color: #3AFFEB;
  }
  .color-webnotifications.col {
    color: #3AFFEB;
  }
  .color-webnotifications.widget-table-val {
    color: #3AFFEB;
  }
  .color-webnotifications .config-row:before {
    background: #3AFFEB !important;
  }
  .color-webnotifications.timeline-marker {
    border-color: #3AFFEB !important;
  }
  
  .color-steam.widget-inner .value {
    color: #70c2f1 !important;
  }
  .color-steam.widget-inner .progress-bar .progress {
    background: #70c2f1 !important;
  }
  .color-steam.color-input .color {
    background-color: #70c2f1;
  }
  .color-steam.color-input .code:after {
    content: "#70c2f1";
  }
  .color-steam.color-input-preview {
    background: #70c2f1;
  }
  .color-steam .line {
    background: #70c2f1 !important;
  }
  .color-steam .icon {
    color: #70c2f1;
  }
  .color-steam .currency-code, .color-steam .app-version {
    color: #70c2f1;
  }
  .color-steam svg .progress {
    stroke: #70c2f1;
  }
  .color-steam .metric {
    color: #70c2f1;
  }
  .color-steam .ring {
    border-color: #70c2f1 !important;
    filter: drop-shadow(0 0 8px rgba(112, 194, 241, 0.5));
  }
  .color-steam.rule .icon {
    color: #fff;
  }
  .color-steam.rule > .icon {
    background: #70c2f1;
  }
  .color-steam.cacheproxy .status .icon {
    color: #70c2f1;
  }
  .color-steam.cacheproxy .efficiency {
    color: #70c2f1;
  }
  .color-steam.graph-meta .val {
    color: #70c2f1;
  }
  .color-steam .widget-data .value, .color-steam .widget-primary .value {
    color: #70c2f1;
  }
  .color-steam.colored-text {
    color: #70c2f1;
  }
  .color-steam.colored-bg {
    background-color: #70c2f1;
  }
  .color-steam.box-table-col {
    color: #70c2f1;
  }
  .color-steam.col {
    color: #70c2f1;
  }
  .color-steam.widget-table-val {
    color: #70c2f1;
  }
  .color-steam .config-row:before {
    background: #70c2f1 !important;
  }
  .color-steam.timeline-marker {
    border-color: #70c2f1 !important;
  }
  
  .color-jwt.widget-inner .value {
    color: #d63aff !important;
  }
  .color-jwt.widget-inner .progress-bar .progress {
    background: #d63aff !important;
  }
  .color-jwt.color-input .color {
    background-color: #d63aff;
  }
  .color-jwt.color-input .code:after {
    content: "#d63aff";
  }
  .color-jwt.color-input-preview {
    background: #d63aff;
  }
  .color-jwt .line {
    background: #d63aff !important;
  }
  .color-jwt .icon {
    color: #d63aff;
  }
  .color-jwt .currency-code, .color-jwt .app-version {
    color: #d63aff;
  }
  .color-jwt svg .progress {
    stroke: #d63aff;
  }
  .color-jwt .metric {
    color: #d63aff;
  }
  .color-jwt .ring {
    border-color: #d63aff !important;
    filter: drop-shadow(0 0 8px rgba(214, 58, 255, 0.5));
  }
  .color-jwt.rule .icon {
    color: #fff;
  }
  .color-jwt.rule > .icon {
    background: #d63aff;
  }
  .color-jwt.cacheproxy .status .icon {
    color: #d63aff;
  }
  .color-jwt.cacheproxy .efficiency {
    color: #d63aff;
  }
  .color-jwt.graph-meta .val {
    color: #d63aff;
  }
  .color-jwt .widget-data .value, .color-jwt .widget-primary .value {
    color: #d63aff;
  }
  .color-jwt.colored-text {
    color: #d63aff;
  }
  .color-jwt.colored-bg {
    background-color: #d63aff;
  }
  .color-jwt.box-table-col {
    color: #d63aff;
  }
  .color-jwt.col {
    color: #d63aff;
  }
  .color-jwt.widget-table-val {
    color: #d63aff;
  }
  .color-jwt .config-row:before {
    background: #d63aff !important;
  }
  .color-jwt.timeline-marker {
    border-color: #d63aff !important;
  }
  
  .color-cacheproxy.widget-inner .value {
    color: #a9ff00 !important;
  }
  .color-cacheproxy.widget-inner .progress-bar .progress {
    background: #a9ff00 !important;
  }
  .color-cacheproxy.color-input .color {
    background-color: #a9ff00;
  }
  .color-cacheproxy.color-input .code:after {
    content: "#a9ff00";
  }
  .color-cacheproxy.color-input-preview {
    background: #a9ff00;
  }
  .color-cacheproxy .line {
    background: #a9ff00 !important;
  }
  .color-cacheproxy .icon {
    color: #a9ff00;
  }
  .color-cacheproxy .currency-code, .color-cacheproxy .app-version {
    color: #a9ff00;
  }
  .color-cacheproxy svg .progress {
    stroke: #a9ff00;
  }
  .color-cacheproxy .metric {
    color: #a9ff00;
  }
  .color-cacheproxy .ring {
    border-color: #a9ff00 !important;
    filter: drop-shadow(0 0 8px rgba(169, 255, 0, 0.5));
  }
  .color-cacheproxy.rule .icon {
    color: #fff;
  }
  .color-cacheproxy.rule > .icon {
    background: #a9ff00;
  }
  .color-cacheproxy.cacheproxy .status .icon {
    color: #a9ff00;
  }
  .color-cacheproxy.cacheproxy .efficiency {
    color: #a9ff00;
  }
  .color-cacheproxy.graph-meta .val {
    color: #a9ff00;
  }
  .color-cacheproxy .widget-data .value, .color-cacheproxy .widget-primary .value {
    color: #a9ff00;
  }
  .color-cacheproxy.colored-text {
    color: #a9ff00;
  }
  .color-cacheproxy.colored-bg {
    background-color: #a9ff00;
  }
  .color-cacheproxy.box-table-col {
    color: #a9ff00;
  }
  .color-cacheproxy.col {
    color: #a9ff00;
  }
  .color-cacheproxy.widget-table-val {
    color: #a9ff00;
  }
  .color-cacheproxy .config-row:before {
    background: #a9ff00 !important;
  }
  .color-cacheproxy.timeline-marker {
    border-color: #a9ff00 !important;
  }
  
  .color-success.widget-inner .value {
    color: #65FF60 !important;
  }
  .color-success.widget-inner .progress-bar .progress {
    background: #65FF60 !important;
  }
  .color-success.color-input .color {
    background-color: #65FF60;
  }
  .color-success.color-input .code:after {
    content: "#65FF60";
  }
  .color-success.color-input-preview {
    background: #65FF60;
  }
  .color-success .line {
    background: #65FF60 !important;
  }
  .color-success .icon {
    color: #65FF60;
  }
  .color-success .currency-code, .color-success .app-version {
    color: #65FF60;
  }
  .color-success svg .progress {
    stroke: #65FF60;
  }
  .color-success .metric {
    color: #65FF60;
  }
  .color-success .ring {
    border-color: #65FF60 !important;
    filter: drop-shadow(0 0 8px rgba(101, 255, 96, 0.5));
  }
  .color-success.rule .icon {
    color: #fff;
  }
  .color-success.rule > .icon {
    background: #65FF60;
  }
  .color-success.cacheproxy .status .icon {
    color: #65FF60;
  }
  .color-success.cacheproxy .efficiency {
    color: #65FF60;
  }
  .color-success.graph-meta .val {
    color: #65FF60;
  }
  .color-success .widget-data .value, .color-success .widget-primary .value {
    color: #65FF60;
  }
  .color-success.colored-text {
    color: #65FF60;
  }
  .color-success.colored-bg {
    background-color: #65FF60;
  }
  .color-success.box-table-col {
    color: #65FF60;
  }
  .color-success.col {
    color: #65FF60;
  }
  .color-success.widget-table-val {
    color: #65FF60;
  }
  .color-success .config-row:before {
    background: #65FF60 !important;
  }
  .color-success.timeline-marker {
    border-color: #65FF60 !important;
  }
  
  .color-warning.widget-inner .value {
    color: #FFA011 !important;
  }
  .color-warning.widget-inner .progress-bar .progress {
    background: #FFA011 !important;
  }
  .color-warning.color-input .color {
    background-color: #FFA011;
  }
  .color-warning.color-input .code:after {
    content: "#FFA011";
  }
  .color-warning.color-input-preview {
    background: #FFA011;
  }
  .color-warning .line {
    background: #FFA011 !important;
  }
  .color-warning .icon {
    color: #FFA011;
  }
  .color-warning .currency-code, .color-warning .app-version {
    color: #FFA011;
  }
  .color-warning svg .progress {
    stroke: #FFA011;
  }
  .color-warning .metric {
    color: #FFA011;
  }
  .color-warning .ring {
    border-color: #FFA011 !important;
    filter: drop-shadow(0 0 8px rgba(255, 160, 17, 0.5));
  }
  .color-warning.rule .icon {
    color: #fff;
  }
  .color-warning.rule > .icon {
    background: #FFA011;
  }
  .color-warning.cacheproxy .status .icon {
    color: #FFA011;
  }
  .color-warning.cacheproxy .efficiency {
    color: #FFA011;
  }
  .color-warning.graph-meta .val {
    color: #FFA011;
  }
  .color-warning .widget-data .value, .color-warning .widget-primary .value {
    color: #FFA011;
  }
  .color-warning.colored-text {
    color: #FFA011;
  }
  .color-warning.colored-bg {
    background-color: #FFA011;
  }
  .color-warning.box-table-col {
    color: #FFA011;
  }
  .color-warning.col {
    color: #FFA011;
  }
  .color-warning.widget-table-val {
    color: #FFA011;
  }
  .color-warning .config-row:before {
    background: #FFA011 !important;
  }
  .color-warning.timeline-marker {
    border-color: #FFA011 !important;
  }
  
  .color-error.widget-inner .value {
    color: #EF313E !important;
  }
  .color-error.widget-inner .progress-bar .progress {
    background: #EF313E !important;
  }
  .color-error.color-input .color {
    background-color: #EF313E;
  }
  .color-error.color-input .code:after {
    content: "#EF313E";
  }
  .color-error.color-input-preview {
    background: #EF313E;
  }
  .color-error .line {
    background: #EF313E !important;
  }
  .color-error .icon {
    color: #EF313E;
  }
  .color-error .currency-code, .color-error .app-version {
    color: #EF313E;
  }
  .color-error svg .progress {
    stroke: #EF313E;
  }
  .color-error .metric {
    color: #EF313E;
  }
  .color-error .ring {
    border-color: #EF313E !important;
    filter: drop-shadow(0 0 8px rgba(239, 49, 62, 0.5));
  }
  .color-error.rule .icon {
    color: #fff;
  }
  .color-error.rule > .icon {
    background: #EF313E;
  }
  .color-error.cacheproxy .status .icon {
    color: #EF313E;
  }
  .color-error.cacheproxy .efficiency {
    color: #EF313E;
  }
  .color-error.graph-meta .val {
    color: #EF313E;
  }
  .color-error .widget-data .value, .color-error .widget-primary .value {
    color: #EF313E;
  }
  .color-error.colored-text {
    color: #EF313E;
  }
  .color-error.colored-bg {
    background-color: #EF313E;
  }
  .color-error.box-table-col {
    color: #EF313E;
  }
  .color-error.col {
    color: #EF313E;
  }
  .color-error.widget-table-val {
    color: #EF313E;
  }
  .color-error .config-row:before {
    background: #EF313E !important;
  }
  .color-error.timeline-marker {
    border-color: #EF313E !important;
  }
  
  .color-teamsstreaming.widget-inner .value, .color-teamsgraph.widget-inner .value {
    color: #5155aa !important;
  }
  .color-teamsstreaming.widget-inner .progress-bar .progress, .color-teamsgraph.widget-inner .progress-bar .progress {
    background: #5155aa !important;
  }
  .color-teamsstreaming.color-input .color, .color-teamsgraph.color-input .color {
    background-color: #5155aa;
  }
  .color-teamsstreaming.color-input .code:after, .color-teamsgraph.color-input .code:after {
    content: "#5155aa";
  }
  .color-teamsstreaming.color-input-preview, .color-teamsgraph.color-input-preview {
    background: #5155aa;
  }
  .color-teamsstreaming .line, .color-teamsgraph .line {
    background: #5155aa !important;
  }
  .color-teamsstreaming .icon, .color-teamsgraph .icon {
    color: #5155aa;
  }
  .color-teamsstreaming .currency-code, .color-teamsstreaming .app-version, .color-teamsgraph .currency-code, .color-teamsgraph .app-version {
    color: #5155aa;
  }
  .color-teamsstreaming svg .progress, .color-teamsgraph svg .progress {
    stroke: #5155aa;
  }
  .color-teamsstreaming .metric, .color-teamsgraph .metric {
    color: #5155aa;
  }
  .color-teamsstreaming .ring, .color-teamsgraph .ring {
    border-color: #5155aa !important;
    filter: drop-shadow(0 0 8px rgba(81, 85, 170, 0.5));
  }
  .color-teamsstreaming.rule .icon, .color-teamsgraph.rule .icon {
    color: #fff;
  }
  .color-teamsstreaming.rule > .icon, .color-teamsgraph.rule > .icon {
    background: #5155aa;
  }
  .color-teamsstreaming.cacheproxy .status .icon, .color-teamsgraph.cacheproxy .status .icon {
    color: #5155aa;
  }
  .color-teamsstreaming.cacheproxy .efficiency, .color-teamsgraph.cacheproxy .efficiency {
    color: #5155aa;
  }
  .color-teamsstreaming.graph-meta .val, .color-teamsgraph.graph-meta .val {
    color: #5155aa;
  }
  .color-teamsstreaming .widget-data .value, .color-teamsstreaming .widget-primary .value, .color-teamsgraph .widget-data .value, .color-teamsgraph .widget-primary .value {
    color: #5155aa;
  }
  .color-teamsstreaming.colored-text, .color-teamsgraph.colored-text {
    color: #5155aa;
  }
  .color-teamsstreaming.colored-bg, .color-teamsgraph.colored-bg {
    background-color: #5155aa;
  }
  .color-teamsstreaming.box-table-col, .color-teamsgraph.box-table-col {
    color: #5155aa;
  }
  .color-teamsstreaming.col, .color-teamsgraph.col {
    color: #5155aa;
  }
  .color-teamsstreaming.widget-table-val, .color-teamsgraph.widget-table-val {
    color: #5155aa;
  }
  .color-teamsstreaming .config-row:before, .color-teamsgraph .config-row:before {
    background: #5155aa !important;
  }
  .color-teamsstreaming.timeline-marker, .color-teamsgraph.timeline-marker {
    border-color: #5155aa !important;
  }
  
  .color-chatrelay.widget-inner .value {
    color: #3EFF85 !important;
  }
  .color-chatrelay.widget-inner .progress-bar .progress {
    background: #3EFF85 !important;
  }
  .color-chatrelay.color-input .color {
    background-color: #3EFF85;
  }
  .color-chatrelay.color-input .code:after {
    content: "#3EFF85";
  }
  .color-chatrelay.color-input-preview {
    background: #3EFF85;
  }
  .color-chatrelay .line {
    background: #3EFF85 !important;
  }
  .color-chatrelay .icon {
    color: #3EFF85;
  }
  .color-chatrelay .currency-code, .color-chatrelay .app-version {
    color: #3EFF85;
  }
  .color-chatrelay svg .progress {
    stroke: #3EFF85;
  }
  .color-chatrelay .metric {
    color: #3EFF85;
  }
  .color-chatrelay .ring {
    border-color: #3EFF85 !important;
    filter: drop-shadow(0 0 8px rgba(62, 255, 133, 0.5));
  }
  .color-chatrelay.rule .icon {
    color: #fff;
  }
  .color-chatrelay.rule > .icon {
    background: #3EFF85;
  }
  .color-chatrelay.cacheproxy .status .icon {
    color: #3EFF85;
  }
  .color-chatrelay.cacheproxy .efficiency {
    color: #3EFF85;
  }
  .color-chatrelay.graph-meta .val {
    color: #3EFF85;
  }
  .color-chatrelay .widget-data .value, .color-chatrelay .widget-primary .value {
    color: #3EFF85;
  }
  .color-chatrelay.colored-text {
    color: #3EFF85;
  }
  .color-chatrelay.colored-bg {
    background-color: #3EFF85;
  }
  .color-chatrelay.box-table-col {
    color: #3EFF85;
  }
  .color-chatrelay.col {
    color: #3EFF85;
  }
  .color-chatrelay.widget-table-val {
    color: #3EFF85;
  }
  .color-chatrelay .config-row:before {
    background: #3EFF85 !important;
  }
  .color-chatrelay.timeline-marker {
    border-color: #3EFF85 !important;
  }
  
  .color-jitsi.widget-inner .value {
    color: #1076bb !important;
  }
  .color-jitsi.widget-inner .progress-bar .progress {
    background: #1076bb !important;
  }
  .color-jitsi.color-input .color {
    background-color: #1076bb;
  }
  .color-jitsi.color-input .code:after {
    content: "#1076bb";
  }
  .color-jitsi.color-input-preview {
    background: #1076bb;
  }
  .color-jitsi .line {
    background: #1076bb !important;
  }
  .color-jitsi .icon {
    color: #1076bb;
  }
  .color-jitsi .currency-code, .color-jitsi .app-version {
    color: #1076bb;
  }
  .color-jitsi svg .progress {
    stroke: #1076bb;
  }
  .color-jitsi .metric {
    color: #1076bb;
  }
  .color-jitsi .ring {
    border-color: #1076bb !important;
    filter: drop-shadow(0 0 8px rgba(16, 118, 187, 0.5));
  }
  .color-jitsi.rule .icon {
    color: #fff;
  }
  .color-jitsi.rule > .icon {
    background: #1076bb;
  }
  .color-jitsi.cacheproxy .status .icon {
    color: #1076bb;
  }
  .color-jitsi.cacheproxy .efficiency {
    color: #1076bb;
  }
  .color-jitsi.graph-meta .val {
    color: #1076bb;
  }
  .color-jitsi .widget-data .value, .color-jitsi .widget-primary .value {
    color: #1076bb;
  }
  .color-jitsi.colored-text {
    color: #1076bb;
  }
  .color-jitsi.colored-bg {
    background-color: #1076bb;
  }
  .color-jitsi.box-table-col {
    color: #1076bb;
  }
  .color-jitsi.col {
    color: #1076bb;
  }
  .color-jitsi.widget-table-val {
    color: #1076bb;
  }
  .color-jitsi .config-row:before {
    background: #1076bb !important;
  }
  .color-jitsi.timeline-marker {
    border-color: #1076bb !important;
  }
  
  .color-aventri.widget-inner .value {
    color: #f75657 !important;
  }
  .color-aventri.widget-inner .progress-bar .progress {
    background: #f75657 !important;
  }
  .color-aventri.color-input .color {
    background-color: #f75657;
  }
  .color-aventri.color-input .code:after {
    content: "#f75657";
  }
  .color-aventri.color-input-preview {
    background: #f75657;
  }
  .color-aventri .line {
    background: #f75657 !important;
  }
  .color-aventri .icon {
    color: #f75657;
  }
  .color-aventri .currency-code, .color-aventri .app-version {
    color: #f75657;
  }
  .color-aventri svg .progress {
    stroke: #f75657;
  }
  .color-aventri .metric {
    color: #f75657;
  }
  .color-aventri .ring {
    border-color: #f75657 !important;
    filter: drop-shadow(0 0 8px rgba(247, 86, 87, 0.5));
  }
  .color-aventri.rule .icon {
    color: #fff;
  }
  .color-aventri.rule > .icon {
    background: #f75657;
  }
  .color-aventri.cacheproxy .status .icon {
    color: #f75657;
  }
  .color-aventri.cacheproxy .efficiency {
    color: #f75657;
  }
  .color-aventri.graph-meta .val {
    color: #f75657;
  }
  .color-aventri .widget-data .value, .color-aventri .widget-primary .value {
    color: #f75657;
  }
  .color-aventri.colored-text {
    color: #f75657;
  }
  .color-aventri.colored-bg {
    background-color: #f75657;
  }
  .color-aventri.box-table-col {
    color: #f75657;
  }
  .color-aventri.col {
    color: #f75657;
  }
  .color-aventri.widget-table-val {
    color: #f75657;
  }
  .color-aventri .config-row:before {
    background: #f75657 !important;
  }
  .color-aventri.timeline-marker {
    border-color: #f75657 !important;
  }
  
  .color-s3.widget-inner .value, .color-aws.widget-inner .value {
    color: #ff9a00 !important;
  }
  .color-s3.widget-inner .progress-bar .progress, .color-aws.widget-inner .progress-bar .progress {
    background: #ff9a00 !important;
  }
  .color-s3.color-input .color, .color-aws.color-input .color {
    background-color: #ff9a00;
  }
  .color-s3.color-input .code:after, .color-aws.color-input .code:after {
    content: "#ff9a00";
  }
  .color-s3.color-input-preview, .color-aws.color-input-preview {
    background: #ff9a00;
  }
  .color-s3 .line, .color-aws .line {
    background: #ff9a00 !important;
  }
  .color-s3 .icon, .color-aws .icon {
    color: #ff9a00;
  }
  .color-s3 .currency-code, .color-s3 .app-version, .color-aws .currency-code, .color-aws .app-version {
    color: #ff9a00;
  }
  .color-s3 svg .progress, .color-aws svg .progress {
    stroke: #ff9a00;
  }
  .color-s3 .metric, .color-aws .metric {
    color: #ff9a00;
  }
  .color-s3 .ring, .color-aws .ring {
    border-color: #ff9a00 !important;
    filter: drop-shadow(0 0 8px rgba(255, 154, 0, 0.5));
  }
  .color-s3.rule .icon, .color-aws.rule .icon {
    color: #fff;
  }
  .color-s3.rule > .icon, .color-aws.rule > .icon {
    background: #ff9a00;
  }
  .color-s3.cacheproxy .status .icon, .color-aws.cacheproxy .status .icon {
    color: #ff9a00;
  }
  .color-s3.cacheproxy .efficiency, .color-aws.cacheproxy .efficiency {
    color: #ff9a00;
  }
  .color-s3.graph-meta .val, .color-aws.graph-meta .val {
    color: #ff9a00;
  }
  .color-s3 .widget-data .value, .color-s3 .widget-primary .value, .color-aws .widget-data .value, .color-aws .widget-primary .value {
    color: #ff9a00;
  }
  .color-s3.colored-text, .color-aws.colored-text {
    color: #ff9a00;
  }
  .color-s3.colored-bg, .color-aws.colored-bg {
    background-color: #ff9a00;
  }
  .color-s3.box-table-col, .color-aws.box-table-col {
    color: #ff9a00;
  }
  .color-s3.col, .color-aws.col {
    color: #ff9a00;
  }
  .color-s3.widget-table-val, .color-aws.widget-table-val {
    color: #ff9a00;
  }
  .color-s3 .config-row:before, .color-aws .config-row:before {
    background: #ff9a00 !important;
  }
  .color-s3.timeline-marker, .color-aws.timeline-marker {
    border-color: #ff9a00 !important;
  }
  
  .color-virtualvenue.widget-inner .value, .color-metavenue.widget-inner .value {
    color: #aad037 !important;
  }
  .color-virtualvenue.widget-inner .progress-bar .progress, .color-metavenue.widget-inner .progress-bar .progress {
    background: #aad037 !important;
  }
  .color-virtualvenue.color-input .color, .color-metavenue.color-input .color {
    background-color: #aad037;
  }
  .color-virtualvenue.color-input .code:after, .color-metavenue.color-input .code:after {
    content: "#aad037";
  }
  .color-virtualvenue.color-input-preview, .color-metavenue.color-input-preview {
    background: #aad037;
  }
  .color-virtualvenue .line, .color-metavenue .line {
    background: #aad037 !important;
  }
  .color-virtualvenue .icon, .color-metavenue .icon {
    color: #aad037;
  }
  .color-virtualvenue .currency-code, .color-virtualvenue .app-version, .color-metavenue .currency-code, .color-metavenue .app-version {
    color: #aad037;
  }
  .color-virtualvenue svg .progress, .color-metavenue svg .progress {
    stroke: #aad037;
  }
  .color-virtualvenue .metric, .color-metavenue .metric {
    color: #aad037;
  }
  .color-virtualvenue .ring, .color-metavenue .ring {
    border-color: #aad037 !important;
    filter: drop-shadow(0 0 8px rgba(170, 208, 55, 0.5));
  }
  .color-virtualvenue.rule .icon, .color-metavenue.rule .icon {
    color: #fff;
  }
  .color-virtualvenue.rule > .icon, .color-metavenue.rule > .icon {
    background: #aad037;
  }
  .color-virtualvenue.cacheproxy .status .icon, .color-metavenue.cacheproxy .status .icon {
    color: #aad037;
  }
  .color-virtualvenue.cacheproxy .efficiency, .color-metavenue.cacheproxy .efficiency {
    color: #aad037;
  }
  .color-virtualvenue.graph-meta .val, .color-metavenue.graph-meta .val {
    color: #aad037;
  }
  .color-virtualvenue .widget-data .value, .color-virtualvenue .widget-primary .value, .color-metavenue .widget-data .value, .color-metavenue .widget-primary .value {
    color: #aad037;
  }
  .color-virtualvenue.colored-text, .color-metavenue.colored-text {
    color: #aad037;
  }
  .color-virtualvenue.colored-bg, .color-metavenue.colored-bg {
    background-color: #aad037;
  }
  .color-virtualvenue.box-table-col, .color-metavenue.box-table-col {
    color: #aad037;
  }
  .color-virtualvenue.col, .color-metavenue.col {
    color: #aad037;
  }
  .color-virtualvenue.widget-table-val, .color-metavenue.widget-table-val {
    color: #aad037;
  }
  .color-virtualvenue .config-row:before, .color-metavenue .config-row:before {
    background: #aad037 !important;
  }
  .color-virtualvenue.timeline-marker, .color-metavenue.timeline-marker {
    border-color: #aad037 !important;
  }
  
  .color-secondary.widget-inner .value {
    color: rgba(255, 255, 255, 0.4) !important;
  }
  .color-secondary.widget-inner .progress-bar .progress {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .color-secondary.color-input .color {
    background-color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.color-input .code:after {
    content: "rgba(255, 255, 255, 0.4)";
  }
  .color-secondary.color-input-preview {
    background: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .line {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .color-secondary .icon {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .currency-code, .color-secondary .app-version {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary svg .progress {
    stroke: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .metric {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .ring {
    border-color: rgba(255, 255, 255, 0.4) !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0));
  }
  .color-secondary.rule .icon {
    color: #fff;
  }
  .color-secondary.rule > .icon {
    background: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.cacheproxy .status .icon {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.cacheproxy .efficiency {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.graph-meta .val {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .widget-data .value, .color-secondary .widget-primary .value {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.colored-text {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.colored-bg {
    background-color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.box-table-col {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.col {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary.widget-table-val {
    color: rgba(255, 255, 255, 0.4);
  }
  .color-secondary .config-row:before {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .color-secondary.timeline-marker {
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  
  .color-tertiary.widget-inner .value {
    color: #4569c9 !important;
  }
  .color-tertiary.widget-inner .progress-bar .progress {
    background: #4569c9 !important;
  }
  .color-tertiary.color-input .color {
    background-color: #4569c9;
  }
  .color-tertiary.color-input .code:after {
    content: "#4569c9";
  }
  .color-tertiary.color-input-preview {
    background: #4569c9;
  }
  .color-tertiary .line {
    background: #4569c9 !important;
  }
  .color-tertiary .icon {
    color: #4569c9;
  }
  .color-tertiary .currency-code, .color-tertiary .app-version {
    color: #4569c9;
  }
  .color-tertiary svg .progress {
    stroke: #4569c9;
  }
  .color-tertiary .metric {
    color: #4569c9;
  }
  .color-tertiary .ring {
    border-color: #4569c9 !important;
    filter: drop-shadow(0 0 8px rgba(69, 105, 201, 0.5));
  }
  .color-tertiary.rule .icon {
    color: #fff;
  }
  .color-tertiary.rule > .icon {
    background: #4569c9;
  }
  .color-tertiary.cacheproxy .status .icon {
    color: #4569c9;
  }
  .color-tertiary.cacheproxy .efficiency {
    color: #4569c9;
  }
  .color-tertiary.graph-meta .val {
    color: #4569c9;
  }
  .color-tertiary .widget-data .value, .color-tertiary .widget-primary .value {
    color: #4569c9;
  }
  .color-tertiary.colored-text {
    color: #4569c9;
  }
  .color-tertiary.colored-bg {
    background-color: #4569c9;
  }
  .color-tertiary.box-table-col {
    color: #4569c9;
  }
  .color-tertiary.col {
    color: #4569c9;
  }
  .color-tertiary.widget-table-val {
    color: #4569c9;
  }
  .color-tertiary .config-row:before {
    background: #4569c9 !important;
  }
  .color-tertiary.timeline-marker {
    border-color: #4569c9 !important;
  }
  
  .color-photonengine.widget-inner .value {
    color: #56cbf5 !important;
  }
  .color-photonengine.widget-inner .progress-bar .progress {
    background: #56cbf5 !important;
  }
  .color-photonengine.color-input .color {
    background-color: #56cbf5;
  }
  .color-photonengine.color-input .code:after {
    content: "#56cbf5";
  }
  .color-photonengine.color-input-preview {
    background: #56cbf5;
  }
  .color-photonengine .line {
    background: #56cbf5 !important;
  }
  .color-photonengine .icon {
    color: #56cbf5;
  }
  .color-photonengine .currency-code, .color-photonengine .app-version {
    color: #56cbf5;
  }
  .color-photonengine svg .progress {
    stroke: #56cbf5;
  }
  .color-photonengine .metric {
    color: #56cbf5;
  }
  .color-photonengine .ring {
    border-color: #56cbf5 !important;
    filter: drop-shadow(0 0 8px rgba(86, 203, 245, 0.5));
  }
  .color-photonengine.rule .icon {
    color: #fff;
  }
  .color-photonengine.rule > .icon {
    background: #56cbf5;
  }
  .color-photonengine.cacheproxy .status .icon {
    color: #56cbf5;
  }
  .color-photonengine.cacheproxy .efficiency {
    color: #56cbf5;
  }
  .color-photonengine.graph-meta .val {
    color: #56cbf5;
  }
  .color-photonengine .widget-data .value, .color-photonengine .widget-primary .value {
    color: #56cbf5;
  }
  .color-photonengine.colored-text {
    color: #56cbf5;
  }
  .color-photonengine.colored-bg {
    background-color: #56cbf5;
  }
  .color-photonengine.box-table-col {
    color: #56cbf5;
  }
  .color-photonengine.col {
    color: #56cbf5;
  }
  .color-photonengine.widget-table-val {
    color: #56cbf5;
  }
  .color-photonengine .config-row:before {
    background: #56cbf5 !important;
  }
  .color-photonengine.timeline-marker {
    border-color: #56cbf5 !important;
  }
  
  .color-genvid.widget-inner .value {
    color: #f26a3f !important;
  }
  .color-genvid.widget-inner .progress-bar .progress {
    background: #f26a3f !important;
  }
  .color-genvid.color-input .color {
    background-color: #f26a3f;
  }
  .color-genvid.color-input .code:after {
    content: "#f26a3f";
  }
  .color-genvid.color-input-preview {
    background: #f26a3f;
  }
  .color-genvid .line {
    background: #f26a3f !important;
  }
  .color-genvid .icon {
    color: #f26a3f;
  }
  .color-genvid .currency-code, .color-genvid .app-version {
    color: #f26a3f;
  }
  .color-genvid svg .progress {
    stroke: #f26a3f;
  }
  .color-genvid .metric {
    color: #f26a3f;
  }
  .color-genvid .ring {
    border-color: #f26a3f !important;
    filter: drop-shadow(0 0 8px rgba(242, 106, 63, 0.5));
  }
  .color-genvid.rule .icon {
    color: #fff;
  }
  .color-genvid.rule > .icon {
    background: #f26a3f;
  }
  .color-genvid.cacheproxy .status .icon {
    color: #f26a3f;
  }
  .color-genvid.cacheproxy .efficiency {
    color: #f26a3f;
  }
  .color-genvid.graph-meta .val {
    color: #f26a3f;
  }
  .color-genvid .widget-data .value, .color-genvid .widget-primary .value {
    color: #f26a3f;
  }
  .color-genvid.colored-text {
    color: #f26a3f;
  }
  .color-genvid.colored-bg {
    background-color: #f26a3f;
  }
  .color-genvid.box-table-col {
    color: #f26a3f;
  }
  .color-genvid.col {
    color: #f26a3f;
  }
  .color-genvid.widget-table-val {
    color: #f26a3f;
  }
  .color-genvid .config-row:before {
    background: #f26a3f !important;
  }
  .color-genvid.timeline-marker {
    border-color: #f26a3f !important;
  }
  
  .color-azure.widget-inner .value, .color-azurestorage.widget-inner .value {
    color: #00a4ef !important;
  }
  .color-azure.widget-inner .progress-bar .progress, .color-azurestorage.widget-inner .progress-bar .progress {
    background: #00a4ef !important;
  }
  .color-azure.color-input .color, .color-azurestorage.color-input .color {
    background-color: #00a4ef;
  }
  .color-azure.color-input .code:after, .color-azurestorage.color-input .code:after {
    content: "#00a4ef";
  }
  .color-azure.color-input-preview, .color-azurestorage.color-input-preview {
    background: #00a4ef;
  }
  .color-azure .line, .color-azurestorage .line {
    background: #00a4ef !important;
  }
  .color-azure .icon, .color-azurestorage .icon {
    color: #00a4ef;
  }
  .color-azure .currency-code, .color-azure .app-version, .color-azurestorage .currency-code, .color-azurestorage .app-version {
    color: #00a4ef;
  }
  .color-azure svg .progress, .color-azurestorage svg .progress {
    stroke: #00a4ef;
  }
  .color-azure .metric, .color-azurestorage .metric {
    color: #00a4ef;
  }
  .color-azure .ring, .color-azurestorage .ring {
    border-color: #00a4ef !important;
    filter: drop-shadow(0 0 8px rgba(0, 164, 239, 0.5));
  }
  .color-azure.rule .icon, .color-azurestorage.rule .icon {
    color: #fff;
  }
  .color-azure.rule > .icon, .color-azurestorage.rule > .icon {
    background: #00a4ef;
  }
  .color-azure.cacheproxy .status .icon, .color-azurestorage.cacheproxy .status .icon {
    color: #00a4ef;
  }
  .color-azure.cacheproxy .efficiency, .color-azurestorage.cacheproxy .efficiency {
    color: #00a4ef;
  }
  .color-azure.graph-meta .val, .color-azurestorage.graph-meta .val {
    color: #00a4ef;
  }
  .color-azure .widget-data .value, .color-azure .widget-primary .value, .color-azurestorage .widget-data .value, .color-azurestorage .widget-primary .value {
    color: #00a4ef;
  }
  .color-azure.colored-text, .color-azurestorage.colored-text {
    color: #00a4ef;
  }
  .color-azure.colored-bg, .color-azurestorage.colored-bg {
    background-color: #00a4ef;
  }
  .color-azure.box-table-col, .color-azurestorage.box-table-col {
    color: #00a4ef;
  }
  .color-azure.col, .color-azurestorage.col {
    color: #00a4ef;
  }
  .color-azure.widget-table-val, .color-azurestorage.widget-table-val {
    color: #00a4ef;
  }
  .color-azure .config-row:before, .color-azurestorage .config-row:before {
    background: #00a4ef !important;
  }
  .color-azure.timeline-marker, .color-azurestorage.timeline-marker {
    border-color: #00a4ef !important;
  }
  
  .color-xandr.widget-inner .value {
    color: #fc5047 !important;
  }
  .color-xandr.widget-inner .progress-bar .progress {
    background: #fc5047 !important;
  }
  .color-xandr.color-input .color {
    background-color: #fc5047;
  }
  .color-xandr.color-input .code:after {
    content: "#fc5047";
  }
  .color-xandr.color-input-preview {
    background: #fc5047;
  }
  .color-xandr .line {
    background: #fc5047 !important;
  }
  .color-xandr .icon {
    color: #fc5047;
  }
  .color-xandr .currency-code, .color-xandr .app-version {
    color: #fc5047;
  }
  .color-xandr svg .progress {
    stroke: #fc5047;
  }
  .color-xandr .metric {
    color: #fc5047;
  }
  .color-xandr .ring {
    border-color: #fc5047 !important;
    filter: drop-shadow(0 0 8px rgba(252, 80, 71, 0.5));
  }
  .color-xandr.rule .icon {
    color: #fff;
  }
  .color-xandr.rule > .icon {
    background: #fc5047;
  }
  .color-xandr.cacheproxy .status .icon {
    color: #fc5047;
  }
  .color-xandr.cacheproxy .efficiency {
    color: #fc5047;
  }
  .color-xandr.graph-meta .val {
    color: #fc5047;
  }
  .color-xandr .widget-data .value, .color-xandr .widget-primary .value {
    color: #fc5047;
  }
  .color-xandr.colored-text {
    color: #fc5047;
  }
  .color-xandr.colored-bg {
    background-color: #fc5047;
  }
  .color-xandr.box-table-col {
    color: #fc5047;
  }
  .color-xandr.col {
    color: #fc5047;
  }
  .color-xandr.widget-table-val {
    color: #fc5047;
  }
  .color-xandr .config-row:before {
    background: #fc5047 !important;
  }
  .color-xandr.timeline-marker {
    border-color: #fc5047 !important;
  }
  
  #flow-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 15, 47, 0.9);
  }
  
  #flow-editor-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    background: #3A264B;
    display: flex;
  }
  #flow-editor-container .aside {
    width: 300px;
    padding: 10px;
    box-shadow: 0 0 40px #200F2F;
    overflow-y: auto;
  }
  #flow-editor-container .aside .title {
    color: #4569c9;
    text-transform: uppercase;
    font-size: 0.6em;
    margin: 20px 0 10px;
  }
  #flow-editor-container .aside .flow-editor-tool {
    display: flex;
    align-items: center;
    background: #170B22;
    margin-bottom: 5px;
    font-size: 0.7em;
    transition: background 0.2s;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  #flow-editor-container .aside .flow-editor-tool .icon {
    height: 20px;
  }
  #flow-editor-container .aside .flow-editor-tool .label {
    flex-grow: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 22px;
    padding: 8px;
  }
  #flow-editor-container .aside .flow-editor-tool .icon-add {
    color: rgba(255, 255, 255, 0.05);
  }
  #flow-editor-container .aside .flow-editor-tool:hover {
    background: #4569c9;
  }
  #flow-editor-paths {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #flow-editor-paths > div {
    cursor: pointer;
  }
  #flow-editor-paths > div:after {
    content: "►";
    line-height: 8px;
    font-size: 0.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
  #flow-editor-paths > div:hover {
    border-color: rgba(239, 49, 62, 0.2) !important;
  }
  #flow-editor-paths > div:hover:after {
    content: "🗙";
    color: #EF313E;
  }
  
  #flow-editor-canvas-container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
  }
  #flow-editor-canvas-container.processing #flow-editor-paths {
    display: none;
  }
  
  #flow-editor-canvas-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 8000px;
    height: 8000px;
    border: 1px dashed #4569c9;
    cursor: move;
    transform: translate(-50%, -50%);
  }
  
  #flow-editor-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
  }
  #flow-editor-canvas #flow-editor-entry-point {
    position: absolute;
    top: -200px;
    left: 0;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #170B22;
    border: 2px solid #E6FF3A;
    border-radius: 50%;
    box-shadow: 0 0 20px #200F2F;
    pointer-events: auto;
  }
  #flow-editor-canvas #flow-editor-entry-point .icon {
    width: 100%;
    height: 100%;
    font-size: 3em;
    color: #E6FF3A;
  }
  #flow-editor-canvas .flow-editor-script, #flow-editor-canvas .flow-editor-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #170B22;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px #200F2F;
    pointer-events: auto;
  }
  #flow-editor-canvas .flow-editor-script input, #flow-editor-canvas .flow-editor-action input {
    line-height: 20px;
    border-radius: 15px;
    width: 200px;
    padding: 0 10px;
    font-size: 0.6em;
    display: block;
  }
  #flow-editor-canvas .flow-editor-script .header, #flow-editor-canvas .flow-editor-action .header {
    display: flex;
  }
  #flow-editor-canvas .flow-editor-script .header .icon, #flow-editor-canvas .flow-editor-action .header .icon {
    height: 24px;
    font-size: 1.2em;
  }
  #flow-editor-canvas .flow-editor-script .header .label, #flow-editor-canvas .flow-editor-action .header .label {
    padding: 3px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 18px;
  }
  #flow-editor-canvas .flow-editor-script .header .label span, #flow-editor-canvas .flow-editor-action .header .label span {
    font-size: 0.6em;
    padding: 0 5px;
  }
  #flow-editor-canvas .flow-editor-script .config, #flow-editor-canvas .flow-editor-script .choices, #flow-editor-canvas .flow-editor-action .config, #flow-editor-canvas .flow-editor-action .choices {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .flow-editor-script .config .config-row, #flow-editor-canvas .flow-editor-script .choices .config-row, #flow-editor-canvas .flow-editor-action .config .config-row, #flow-editor-canvas .flow-editor-action .choices .config-row {
    display: flex;
    align-items: center;
    min-width: 300px;
    position: relative;
  }
  #flow-editor-canvas .flow-editor-script .config .config-row:before, #flow-editor-canvas .flow-editor-script .choices .config-row:before, #flow-editor-canvas .flow-editor-action .config .config-row:before, #flow-editor-canvas .flow-editor-action .choices .config-row:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #FF7440;
    border-radius: 50%;
    margin: 5px;
    margin-left: 15px;
  }
  #flow-editor-canvas .flow-editor-script .config .config-row .key, #flow-editor-canvas .flow-editor-script .choices .config-row .key, #flow-editor-canvas .flow-editor-action .config .config-row .key, #flow-editor-canvas .flow-editor-action .choices .config-row .key {
    padding: 4px 6px;
    font-size: 0.6em;
    flex-grow: 1;
  }
  #flow-editor-canvas .flow-editor-script .config .config-row .val, #flow-editor-canvas .flow-editor-script .choices .config-row .val, #flow-editor-canvas .flow-editor-action .config .config-row .val, #flow-editor-canvas .flow-editor-action .choices .config-row .val {
    padding: 4px 6px;
    flex-grow: 0;
  }
  #flow-editor-canvas .flow-editor-script .footer, #flow-editor-canvas .flow-editor-action .footer {
    height: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .handle-in, #flow-editor-canvas .handle-out, #flow-editor-canvas .handle-multi {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 20px;
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .handle-in:after, #flow-editor-canvas .handle-out:after, #flow-editor-canvas .handle-multi:after {
    content: "▼";
    color: #170B22;
    font-size: 0.4em;
    text-align: center;
    width: 100%;
    line-height: 10px;
    display: block;
  }
  #flow-editor-canvas .handle-in:before, #flow-editor-canvas .handle-out:before, #flow-editor-canvas .handle-multi:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    background: transparent;
    border-radius: 50%;
    transition: background 0.2s;
  }
  #flow-editor-canvas .handle-in {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .handle-in:after {
    padding-top: 1px;
  }
  #flow-editor-canvas .handle-in.active {
    background: #4569c9;
    box-shadow: 0 0 20px #4569c9;
  }
  #flow-editor-canvas .handle-in.ready {
    background: #E6FF3A;
    box-shadow: 0 0 20px #E6FF3A;
    cursor: pointer;
  }
  #flow-editor-canvas .handle-in.ready:hover:before {
    background: rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .handle-out {
    top: auto;
    bottom: -10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
    cursor: pointer;
  }
  #flow-editor-canvas .handle-out:hover {
    background: #E6FF3A;
    box-shadow: 0 0 20px #E6FF3A;
  }
  #flow-editor-canvas .handle-out:hover:before {
    background: rgba(255, 255, 255, 0.05);
  }
  #flow-editor-canvas .handle-out.active {
    background: #4569c9;
    box-shadow: 0 0 20px #4569c9;
  }
  #flow-editor-canvas .handle-out.ready {
    background: #E6FF3A;
    box-shadow: 0 0 20px #E6FF3A;
  }
  #flow-editor-canvas .handle-out.ready:before {
    background: rgba(230, 255, 58, 0.1);
  }
  #flow-editor-canvas .handle-multi {
    top: 50%;
    bottom: auto;
    left: 100%;
    width: 10px;
    height: 20px;
    transform: translate(0, -50%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #flow-editor-canvas .handle-multi:hover {
    background: #E6FF3A;
    box-shadow: 0 0 20px #E6FF3A;
  }
  #flow-editor-canvas .handle-multi.active {
    background: #4569c9;
    box-shadow: 0 0 20px #4569c9;
  }
  #flow-editor-canvas .handle-multi.ready {
    background: #E6FF3A;
    box-shadow: 0 0 20px #E6FF3A;
  }
  #flow-editor-canvas .remove {
    position: absolute;
    top: 8px;
    right: 100%;
    width: 22px;
    height: 24px;
    padding-left: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px 0 0 8px;
    transition: background 0.2s;
    cursor: pointer;
  }
  #flow-editor-canvas .remove:after {
    content: "🗙";
    font-size: 0.6em;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 24px;
    text-align: center;
  }
  #flow-editor-canvas .remove:hover {
    background: #EF313E;
  }
  
  .flow-editor-zoom-options {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .flow-editor-zoom-options .icon {
    background: #200F2F;
    color: #E6FF3A;
    border-radius: 10px 10px 0 0;
  }
  .flow-editor-zoom-options .flow-editor-zoom {
    background: #170B22;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
  }
  .flow-editor-zoom-options .flow-editor-zoom:hover {
    background: #4569c9;
  }
  .flow-editor-zoom-options:after {
    content: "";
    display: block;
    background: #200F2F;
    height: 10px;
    border-radius: 0 0 10px 10px;
  }
  
  #conditional-drops .drop-condition {
    display: flex;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  #conditional-drops .drop-condition h3 {
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    font-size: 0.8em;
    color: #4569c9;
    margin-bottom: 10px;
  }
  #conditional-drops .drop-condition .condition {
    margin: 10px;
  }
  #conditional-drops .drop-condition .condition .config {
    padding: 20px;
  }
  #conditional-drops .drop-condition .condition .condition-statement {
    display: flex;
  }
  #conditional-drops .drop-condition .condition .condition-statement > div {
    margin-right: 10px;
  }
  #conditional-drops .drop-condition .link {
    background: #4569c9;
    padding: 20px;
    margin: 10px;
    position: relative;
  }
  #conditional-drops .drop-condition .link .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    font-size: 3em;
  }
  #conditional-drops .drop-condition .drop {
    padding: 10px;
    flex-grow: 1;
  }
  #conditional-drops .drop-condition .drop .box-list {
    margin-bottom: -10px;
  }
  #conditional-drops .drop-condition .drop .box-list .box {
    height: 300px;
  }
  
  #condition-editor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 15, 47, 0.9);
    z-index: 100;
  }
  
  #condition-editor-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    height: calc(100% - 80px);
    background: #3A264B;
    z-index: 100;
  }
  #condition-editor-container > .header {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  #condition-editor-container .setup {
    position: relative;
    display: flex;
    height: calc(100% - 80px);
    overflow-y: auto;
  }
  
  #condition-editor-config {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 20px;
    margin-right: 0;
    height: 500px;
  }
  #condition-editor-config h3 {
    font-size: 1.2em;
    color: #4569c9;
    margin-bottom: 20px;
  }
  
  #condition-editor-drops {
    flex-grow: 1;
    margin: 10px;
  }
  
  #giveaway-keys {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #giveaway-keys li {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
  }
  #giveaway-keys li .type {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
  }
  #giveaway-keys li .type .icon {
    width: 60px;
    height: 60px;
    font-size: 2.2em;
  }
  #giveaway-keys li .title {
    font-size: 1.2em;
    flex-grow: 1;
  }
  #giveaway-keys li .claimed, #giveaway-keys li .unclaimed, #giveaway-keys li .total {
    width: 150px;
    text-align: center;
  }
  #giveaway-keys li .claimed .label, #giveaway-keys li .unclaimed .label, #giveaway-keys li .total .label {
    font-size: 0.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
  }
  #giveaway-keys li .unclaimed {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  #giveaway-import-form .fieldset {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    position: relative;
  }
  #giveaway-import-form .actions {
    margin-top: 40px;
    position: relative;
  }
  #giveaway-import-form .progress-bar {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: calc(100% - 40px);
    height: 16px;
    border-radius: 10px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.05);
    visibility: hidden;
  }
  #giveaway-import-form .progress-bar .progress {
    width: 100%;
    height: 100%;
    background: #4569c9;
    border-radius: 4px;
  }
  #giveaway-import-form.loading .form-field {
    visibility: hidden;
  }
  #giveaway-import-form.loading .progress-bar {
    visibility: visible;
  }
  #giveaway-import-form.loading .fieldset:before {
    content: "Importing...";
    position: absolute;
    top: 20px;
    left: 64px;
    line-height: 32px;
    font-style: italic;
    font-size: 0.8em;
  }
  #giveaway-import-form.loading .fieldset:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #giveaway-import-form.loading .actions {
    display: none;
  }
  
  .mixer-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 10px -10px;
  }
  
  .mixer-col {
    width: calc(33% - 20px);
    margin: 10px;
    flex-grow: 1;
    min-width: 400px;
    max-width: calc(33% - 10px);
  }
  .mixer-col .mixer-widget {
    background: rgba(255, 255, 255, 0.05);
    margin-top: 5px;
  }
  .mixer-col .mixer-widget .form-field {
    padding: 20px;
    max-width: none;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .mixer-col .mixer-widget .form-field input {
    max-width: 100%;
  }
  .mixer-col .mixer-widget .form-field:last-child {
    border: none;
  }
  
  .mixer-section-title {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #170B22;
  }
  .mixer-section-title > .icon {
    background: rgba(255, 255, 255, 0.05);
    color: #4569c9;
    margin-right: 5px;
    border-radius: 50%;
  }
  .mixer-section-title input {
    font-size: 1.4em;
    color: #4569c9;
  }
  .mixer-section-title .actions {
    flex-grow: 1;
    text-align: right;
  }
  .mixer-section-title .actions a {
    display: inline-block;
  }
  
  .mixer-col-title {
    display: flex;
    align-items: center;
    background: #170B22;
    padding: 10px;
  }
  .mixer-col-title > .icon {
    background: rgba(255, 255, 255, 0.05);
    color: #E6FF3A;
    margin-right: 5px;
    border-radius: 50%;
  }
  .mixer-col-title input {
    color: #E6FF3A;
    width: auto;
    flex-grow: 1;
  }
  
  .mixer-widget-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
  }
  .mixer-widget-title .type-icon .icon {
    background: rgba(255, 255, 255, 0.05);
    margin-right: 5px;
    font-size: 1.2em;
    border-radius: 50%;
  }
  .mixer-widget-title input {
    font-size: 0.8em;
    width: auto;
    flex-grow: 1;
  }
  
  .mixer-add-component {
    text-align: center;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.05);
    margin: 5px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  .mixer-add-component:hover {
    border-color: #4569c9;
    color: #4569c9;
  }
  
  .mixer-remove-component {
    display: block;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 0.6em;
    margin-left: 5px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .mixer-remove-component .icon {
    width: 100%;
    height: 100%;
  }
  .mixer-remove-component:hover {
    background: #EF313E;
  }
  
  .mixer-fieldset {
    display: flex;
  }
  .mixer-fieldset .form-field {
    border: none;
  }
  .mixer-fieldset .form-field input {
    width: 100%;
  }
  
  .keyval-pair {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
  .keyval-pair input {
    width: 100%;
  }
  .keyval-pair .key {
    flex-grow: 1;
  }
  .keyval-pair .val {
    width: 80px;
    margin-left: 5px;
  }
  .keyval-pair .val input {
    text-align: center;
  }
  .keyval-pair .remove-keyval-pair {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 20px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .keyval-pair .remove-keyval-pair .icon {
    transform: rotate(45deg);
    font-size: 1em;
    width: 100%;
    height: 100%;
  }
  .keyval-pair .remove-keyval-pair:hover {
    background: #EF313E;
  }
  
  .add-keyval-pair {
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    padding: 0 15px;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 30px;
    border-radius: 15px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .add-keyval-pair:hover {
    background: #4569c9;
  }
  
  .mixer-widget-choices {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }
  .mixer-widget-choices .mixer-widget-choice {
    background: rgba(255, 255, 255, 0.05);
    margin: 10px;
    padding: 20px;
    width: 200px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .mixer-widget-choices .mixer-widget-choice .icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-bottom: 10px;
  }
  .mixer-widget-choices .mixer-widget-choice .label {
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .mixer-widget-choices .mixer-widget-choice:hover {
    background: #4569c9;
  }
  
  #playstream-log {
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;
    padding-right: 5px;
  }
  #playstream-log.lg {
    zoom: 1.9;
  }
  #playstream-log .playstream-placeholder {
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 5px;
  }
  #playstream-log .playstream-placeholder:nth-child(1) {
    animation: slideLoop 4s ease-in-out infinite 0s;
  }
  #playstream-log .playstream-placeholder:nth-child(2) {
    animation: slideLoop 4s ease-in-out infinite 0.2s;
  }
  #playstream-log .playstream-placeholder:nth-child(3) {
    animation: slideLoop 4s ease-in-out infinite 0.6s;
  }
  #playstream-log.listening .playstream-placeholder {
    display: none;
  }
  #playstream-log .playstream-log-entry {
    position: relative;
    display: flex;
    align-items: top;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background 0.2s;
    animation: slideIn 0.6s ease-in-out;
  }
  #playstream-log .playstream-log-entry:hover {
    background: #3A264B;
  }
  #playstream-log .playstream-log-entry:last-child {
    margin: 0;
  }
  #playstream-log .playstream-log-entry .type .icon {
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
  }
  #playstream-log .playstream-log-entry .info {
    flex-grow: 1;
  }
  #playstream-log .playstream-log-entry .info .event-display {
    margin: 6px 0;
    font-size: 0.8em;
  }
  #playstream-log .playstream-log-entry .info .event-display .diff::after {
    content: "↦";
    display: inline-block;
    margin: 0 5px;
    color: rgba(255, 255, 255, 0.4);
  }
  #playstream-log .playstream-log-entry .info .event-name {
    font-size: 0.6em;
    text-transform: capitalize;
    margin-bottom: 4px;
  }
  #playstream-log .playstream-log-entry .info .event-player {
    font-size: 0.7em;
    margin-bottom: 4px;
  }
  #playstream-log .playstream-log-entry .info .event-timestamp {
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.4);
  }
  #playstream-log .playstream-log-entry .event-user-info {
    margin-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding-right: 20px;
    width: 100px;
    text-align: center;
    flex-shrink: 0;
  }
  #playstream-log .playstream-log-entry .event-user-info .avatar {
    width: 30px;
    height: 30px;
    margin: 0 auto 5px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #200F2F;
  }
  #playstream-log .playstream-log-entry .event-user-info .avatar img, #playstream-log .playstream-log-entry .event-user-info .avatar .icon {
    width: 100%;
    height: 100%;
  }
  #playstream-log .playstream-log-entry .event-user-info .avatar .icon {
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.4);
  }
  #playstream-log .playstream-log-entry .event-user-info .displayname {
    font-size: 0.6em;
  }
  #playstream-log .playstream-log-entry .more .icon {
    width: 30px;
    height: 30px;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 1em;
  }
  #playstream-log .playstream-log-entry .tooltip {
    display: none;
  }
  
  .playstream-locked {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
  }
  .playstream-locked .icon {
    color: #FFA011;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 1.4em;
  }
  .playstream-locked .msg {
    font-size: 0.8em;
    padding-left: 10px;
  }
  
  .pretty-json {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    font-size: 0.8em;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
    user-select: text;
  }
  
  .widget {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 10px;
    width: calc(20% - 20px);
    height: 300px;
    flex-shrink: 0;
    width: 380px;
    border: 2px dashed transparent;
    transition: border-color 0.2s;
    position: relative;
  }
  .widget .title {
    text-align: center;
    font-size: 0.8em;
  }
  .widget .widget-drop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .widget .widget-drop .before {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
  }
  .widget .widget-drop .after {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
  }
  .widget .options {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #200F2F;
    width: 60px;
    height: 60px;
    padding: 10px;
    border-radius: 50%;
  }
  .widget .widget-failed:before, .widget .widget-failed:after, .widget .widget-locked:before, .widget .widget-locked:after {
    content: "";
    width: 2px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .widget .widget-failed:after, .widget .widget-locked:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  .widget-dashboard .move {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    margin-right: 10px;
  }
  .widget-dashboard .flex-spacer {
    flex-grow: 1;
  }
  .widget-dashboard .dashboard-section.hover:before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    width: 100%;
    height: 8px;
    background: #4569c9;
  }
  .widget-dashboard .edit-visible {
    display: none;
  }
  .widget-dashboard .widget-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
    margin-bottom: 10px;
  }
  .widget-dashboard .widget-grid:last-child {
    margin-bottom: 0;
  }
  .widget-dashboard .widget-grid .new-widget {
    position: relative;
    width: 100px;
    height: 100px;
    display: none;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    border: 2px dashed transparent;
    margin: 10px;
  }
  .widget-dashboard .widget-grid .new-widget .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: color 0.2s;
  }
  .widget-dashboard .widget-grid .new-widget:hover {
    background: rgba(69, 105, 201, 0.2);
    border-color: #4569c9;
  }
  .widget-dashboard .widget-grid .new-widget:hover .icon {
    color: #4569c9;
  }
  .widget-dashboard.edit .edit-visible {
    display: block;
  }
  .widget-dashboard.edit .edit-visible.section-edit {
    display: flex;
  }
  .widget-dashboard.edit .edit-hidden {
    display: none;
  }
  .widget-dashboard.edit .widget {
    border-color: #4569c9;
    cursor: pointer;
    transition: background 0.2s;
    /*&.hover{
        &:after{
            content:"";
            position: absolute;
            top:0;
            left:-16px;
            width: 8px;
            height: 100%;
            background: $color-tertiary;
        }
    }*/
  }
  .widget-dashboard.edit .widget:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .widget-dashboard.edit .widget .widget-drop .before.hover, .widget-dashboard.edit .widget .widget-drop .after.hover {
    opacity: 1;
  }
  .widget-dashboard.edit .widget .widget-drop .before.hover:after, .widget-dashboard.edit .widget .widget-drop .after.hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: -16px;
    width: 8px;
    height: 100%;
    background: #4569c9;
  }
  .widget-dashboard.edit .widget .widget-drop .before.hover.after:after, .widget-dashboard.edit .widget .widget-drop .after.hover.after:after {
    left: auto;
    right: -16px;
  }
  .widget-dashboard.edit .new-widget {
    display: block;
    border-color: rgba(255, 255, 255, 0.05);
  }
  .widget-dashboard .edit-title {
    position: relative;
  }
  .widget-dashboard .edit-title input {
    padding-left: 40px;
  }
  .widget-dashboard .edit-title .icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
  }
  .widget-dashboard .dashboard-trash {
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .widget-dashboard .dashboard-trash:hover {
    background: #EF313E;
  }
  
  .widget-grid .widget .title, .widget-grid .widget .widget-inner, .xr-analytics-widget .title, .xr-analytics-widget .widget-inner {
    opacity: 0;
    transition: opacity 0.5s;
  }
  .widget-grid .widget.init .title, .widget-grid .widget.init .widget-inner, .xr-analytics-widget.init .title, .xr-analytics-widget.init .widget-inner {
    opacity: 1;
  }
  .widget-grid .widget.widget-single-value, .xr-analytics-widget.widget-single-value {
    position: relative;
  }
  .widget-grid .widget.widget-single-value .widget-inner, .xr-analytics-widget.widget-single-value .widget-inner {
    text-align: center;
    padding: 20px;
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .widget-grid .widget.widget-single-value .widget-inner .value, .xr-analytics-widget.widget-single-value .widget-inner .value {
    font-size: 3em;
  }
  .widget-grid .widget.widget-single-value .widget-inner .label, .xr-analytics-widget.widget-single-value .widget-inner .label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 10px;
  }
  .widget-grid .widget.widget-progress-circle, .xr-analytics-widget.widget-progress-circle {
    position: relative;
  }
  .widget-grid .widget.widget-progress-circle .widget-inner, .xr-analytics-widget.widget-progress-circle .widget-inner {
    text-align: center;
    padding: 20px;
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .widget-grid .widget.widget-progress-circle .widget-inner .graph, .xr-analytics-widget.widget-progress-circle .widget-inner .graph {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .widget-grid .widget.widget-progress-circle .widget-inner .graph .circle, .xr-analytics-widget.widget-progress-circle .widget-inner .graph .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .widget-grid .widget.widget-progress-bar, .xr-analytics-widget.widget-progress-bar {
    position: relative;
  }
  .widget-grid .widget.widget-progress-bar .widget-inner, .xr-analytics-widget.widget-progress-bar .widget-inner {
    text-align: center;
    padding: 20px;
    position: absolute;
    top: calc(50% + 10px);
    left: 0;
    transform: translate(0, -50%);
    width: 100%;
  }
  .widget-grid .widget.widget-progress-bar .widget-inner .metric, .xr-analytics-widget.widget-progress-bar .widget-inner .metric {
    font-size: 2.4em;
    margin-bottom: 10px;
  }
  .widget-grid .widget.widget-progress-bar .widget-inner .progress-bar, .xr-analytics-widget.widget-progress-bar .widget-inner .progress-bar {
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 10px;
  }
  .widget-grid .widget.widget-progress-bar .widget-inner .progress-bar .progress, .xr-analytics-widget.widget-progress-bar .widget-inner .progress-bar .progress {
    height: 10px;
    background: #fff;
    border-radius: 5px;
  }
  .widget-grid .widget.widget-line .title, .widget-grid .widget.widget-column .title, .xr-analytics-widget.widget-line .title, .xr-analytics-widget.widget-column .title {
    margin-bottom: 20px;
  }
  .widget-grid .widget.widget-single-3weeks .title, .xr-analytics-widget.widget-single-3weeks .title {
    margin-bottom: 20px;
  }
  .widget-grid .widget.widget-single-3weeks .graph, .xr-analytics-widget.widget-single-3weeks .graph {
    width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    height: auto;
  }
  .widget-grid .widget.widget-single-3weeks .widget-primary, .xr-analytics-widget.widget-single-3weeks .widget-primary {
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 0 20px 20px;
    padding: 20px;
  }
  .widget-grid .widget.widget-single-3weeks .widget-primary .value, .xr-analytics-widget.widget-single-3weeks .widget-primary .value {
    font-size: 2.4em;
    padding: 0 20px 0;
    margin-top: -10px;
    font-weight: bold;
  }
  .widget-grid .widget.widget-single-3weeks .widget-primary .value:after, .xr-analytics-widget.widget-single-3weeks .widget-primary .value:after {
    content: "";
    display: block;
    margin: 2px auto 5px;
    height: 2px;
    width: 30px;
    background: rgba(255, 255, 255, 0.05);
  }
  .widget-grid .widget.widget-single-3weeks .widget-primary .label, .xr-analytics-widget.widget-single-3weeks .widget-primary .label {
    color: rgba(255, 255, 255, 0.4);
  }
  .widget-grid .widget.widget-single-3weeks .widget-secondary, .xr-analytics-widget.widget-single-3weeks .widget-secondary {
    text-align: center;
    width: 50%;
  }
  .widget-grid .widget.widget-single-3weeks .widget-secondary .value, .xr-analytics-widget.widget-single-3weeks .widget-secondary .value {
    font-weight: bold;
  }
  .widget-grid .widget.widget-single-3weeks .widget-secondary .label, .xr-analytics-widget.widget-single-3weeks .widget-secondary .label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6em;
  }
  .widget-grid .widget.widget-single-3weeks .widget-secondary:last-child, .xr-analytics-widget.widget-single-3weeks .widget-secondary:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  .widget-grid .widget.widget-table .widget-table-list, .xr-analytics-widget.widget-table .widget-table-list {
    margin-top: 40px;
    padding: 0 20px;
  }
  .widget-grid .widget.widget-table .widget-table-list .row, .xr-analytics-widget.widget-table .widget-table-list .row {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
    line-height: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .widget-grid .widget.widget-table .widget-table-list .row:last-child, .xr-analytics-widget.widget-table .widget-table-list .row:last-child {
    border: none;
  }
  .widget-grid .widget.widget-table .widget-table-list .row.header, .xr-analytics-widget.widget-table .widget-table-list .row.header {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
  }
  .widget-grid .widget.widget-table .widget-table-list .row .widget-table-key, .xr-analytics-widget.widget-table .widget-table-list .row .widget-table-key {
    flex-grow: 1;
  }
  .widget-grid .widget.widget-table .widget-table-list .row .widget-table-val, .xr-analytics-widget.widget-table .widget-table-list .row .widget-table-val {
    width: 150px;
    text-align: right;
  }
  .widget-grid .widget.widget-ping a.full, .widget-grid .widget.widget-launcher a.full, .xr-analytics-widget.widget-ping a.full, .xr-analytics-widget.widget-launcher a.full {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    transition: background 0.2s;
  }
  .widget-grid .widget.widget-ping a.full:hover, .widget-grid .widget.widget-launcher a.full:hover, .xr-analytics-widget.widget-ping a.full:hover, .xr-analytics-widget.widget-launcher a.full:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .widget-grid .widget.widget-ping a.full:hover .circle, .widget-grid .widget.widget-launcher a.full:hover .circle, .xr-analytics-widget.widget-ping a.full:hover .circle, .xr-analytics-widget.widget-launcher a.full:hover .circle {
    transform: translate(-50%, -50%) scale(1.1);
  }
  .widget-grid .widget.widget-ping .widget-inner, .widget-grid .widget.widget-launcher .widget-inner, .xr-analytics-widget.widget-ping .widget-inner, .xr-analytics-widget.widget-launcher .widget-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .widget-grid .widget.widget-ping .widget-inner .graph, .widget-grid .widget.widget-launcher .widget-inner .graph, .xr-analytics-widget.widget-ping .widget-inner .graph, .xr-analytics-widget.widget-launcher .widget-inner .graph {
    width: 180px;
    height: 180px;
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .widget-grid .widget.widget-ping .widget-inner .graph .circle, .widget-grid .widget.widget-launcher .widget-inner .graph .circle, .xr-analytics-widget.widget-ping .widget-inner .graph .circle, .xr-analytics-widget.widget-launcher .widget-inner .graph .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .widget-grid .widget.widget-ping .widget-inner .graph .icon, .widget-grid .widget.widget-launcher .widget-inner .graph .icon, .xr-analytics-widget.widget-ping .widget-inner .graph .icon, .xr-analytics-widget.widget-launcher .widget-inner .graph .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    font-size: 4em;
  }
  .widget-grid .widget.widget-ping .widget-inner .label, .widget-grid .widget.widget-launcher .widget-inner .label, .xr-analytics-widget.widget-ping .widget-inner .label, .xr-analytics-widget.widget-launcher .widget-inner .label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .widget-grid .widget.widget-ping .widget-inner .status, .widget-grid .widget.widget-launcher .widget-inner .status, .xr-analytics-widget.widget-ping .widget-inner .status, .xr-analytics-widget.widget-launcher .widget-inner .status {
    font-size: 1.2em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  .widget-grid .widget.widget-ping .widget-inner .status.up, .widget-grid .widget.widget-launcher .widget-inner .status.up, .xr-analytics-widget.widget-ping .widget-inner .status.up, .xr-analytics-widget.widget-launcher .widget-inner .status.up {
    color: #65FF60;
  }
  .widget-grid .widget.widget-ping .widget-inner .status.down, .widget-grid .widget.widget-launcher .widget-inner .status.down, .xr-analytics-widget.widget-ping .widget-inner .status.down, .xr-analytics-widget.widget-launcher .widget-inner .status.down {
    color: #EF313E;
  }
  
  .dashboard-toggle-edit {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    line-height: 20px;
    padding: 5px 20px 5px 10px;
    transition: background 0.2s;
  }
  .dashboard-toggle-edit .icon {
    transition: color 0.2s;
  }
  .dashboard-toggle-edit:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .dashboard-toggle-edit.active {
    background: #4569c9;
  }
  
  #widget-wizard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s;
    z-index: 999;
  }
  #widget-wizard #widget-wizard-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #200F2F;
    opacity: 0.8;
  }
  #widget-wizard #widget-wizard-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    max-width: 96%;
    height: 800px;
    max-height: 96%;
    background: #3A264B;
    text-align: center;
    border-radius: 40px;
    z-index: 999;
    padding: 40px;
  }
  #widget-wizard #widget-wizard-inner .wizard-container {
    height: calc(100% - 120px);
  }
  #widget-wizard.visible {
    opacity: 1;
    visibility: visible;
  }
  
  .wizard-progress {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 40px;
  }
  .wizard-progress .wizard-progress-step {
    flex-grow: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  .wizard-progress .wizard-progress-step:last-child {
    border: none;
  }
  .wizard-progress .wizard-progress-step .node {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-bottom: 5px;
  }
  .wizard-progress .wizard-progress-step .label {
    font-size: 0.7em;
    opacity: 0.2;
  }
  .wizard-progress .wizard-progress-step.active .node {
    border-color: #4569c9;
    color: #4569c9;
  }
  .wizard-progress .wizard-progress-step.active .label {
    opacity: 1;
  }
  
  .wizard-section {
    text-align: left;
    display: none;
    height: 100%;
  }
  .wizard-section.visible {
    display: block;
  }
  .wizard-section .wizard-section-content {
    height: calc(100% - 100px);
    overflow-y: auto;
  }
  .wizard-section .wizard-section-content .form-field {
    margin-bottom: 40px;
  }
  .wizard-section .wizard-section-content .form-field:last-child {
    margin: 0;
  }
  .wizard-section .wizard-section-content .wizard-widget-collection {
    display: none;
  }
  .wizard-section .wizard-section-content .wizard-widget-collection.visible {
    display: block;
  }
  .wizard-section h2 {
    font-size: 1.4em;
    color: #4569c9;
    margin-bottom: 20px;
  }
  .wizard-section .info {
    margin-bottom: 20px;
  }
  .wizard-section .wizard-nav {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .wizard-section .wizard-nav .btn {
    margin: 0;
  }
  .wizard-section .wizard-nav .wizard-next {
    float: right;
  }
  .wizard-section .widget-selection {
    display: flex;
    flex-wrap: wrap;
  }
  .wizard-section .widget-selection .widget-choice {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin: 5px;
    text-align: center;
    width: calc(25% - 10px);
    cursor: pointer;
    transition: background 0.4s;
    display: none;
  }
  .wizard-section .widget-selection .widget-choice .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    transition: transform 0.4s;
    border: 1px solid transparent;
  }
  .wizard-section .widget-selection .widget-choice .label {
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .wizard-section .widget-selection .widget-choice:hover {
    background: rgba(69, 105, 201, 0.1);
  }
  .wizard-section .widget-selection .widget-choice:hover .icon {
    transform: scale(1.1);
  }
  .wizard-section .widget-selection .widget-choice.active {
    background: rgba(69, 105, 201, 0.3);
  }
  .wizard-section .widget-selection .widget-choice.active .icon {
    border-color: #4569c9;
    transform: scale(1.1);
  }
  .wizard-section .widget-selection .widget-choice.active .label {
    color: #4569c9;
  }
  
  .tracing-graph {
    position: relative;
    min-height: 400px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    backdrop-filter: blur(5px);
  }
  .tracing-graph .tracing-graph-container, .tracing-graph .tracing-graph-paths {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .tracing-graph .tracing-graph-paths .flow-editor-path.highlight {
    border-color: #4569c9 !important;
  }
  .tracing-graph .tracing-graph-container {
    z-index: 10;
  }
  .tracing-graph .tracing-info {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    width: 400px;
  }
  .tracing-graph .tracing-info .title {
    font-size: 1.4em;
    margin-bottom: 10px;
  }
  .tracing-graph .tracing-info .title .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    font-size: 1.2em;
  }
  .tracing-graph .tracing-info p {
    margin: 0 0 20px;
    font-size: 0.8em;
  }
  .tracing-graph .tracing-info .form-field {
    margin-bottom: 20px;
  }
  .tracing-graph .tracing-info .form-field label {
    font-size: 0.8em;
    display: block;
    margin-bottom: 5px;
    padding: 0 10px;
    color: #4569c9;
  }
  .tracing-graph .tracing-info .form-field label span {
    font-style: italic;
    font-size: 0.8em;
  }
  .tracing-graph .tracing-info .form-field input {
    width: 100%;
  }
  .tracing-graph .tracing-info .btn {
    margin: 0;
  }
  .tracing-graph .tracing-info.loading .title, .tracing-graph .tracing-info.loading p, .tracing-graph .tracing-info.loading .btn, .tracing-graph .tracing-info.loading .form-field {
    visibility: hidden;
  }
  .tracing-graph .tracing-info.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .tracing-graph .tracing-node {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .tracing-graph .tracing-node .tracing-node-inner {
    width: 50px;
    height: 50px;
    background: #200F2F;
    border-radius: 50%;
    border: 2px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
    transition: transform 0.3s ease-in-out, border-color 0.3s;
  }
  .tracing-graph .tracing-node .tracing-node-inner .icon {
    width: 100%;
    height: 100%;
  }
  .tracing-graph .tracing-node .tracing-node-label {
    font-size: 0.6em;
    width: 140px;
    text-align: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
  }
  .tracing-graph .tracing-node .tracing-node-total {
    position: absolute;
    top: 90%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    background: #3A264B;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 0.5em;
    box-shadow: 0 0 10px #200F2F;
  }
  .tracing-graph .tracing-node .tracing-node-instances {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    font-weight: bold;
    color: #E6FF3A;
    text-shadow: 0 0 5px #200F2F;
  }
  .tracing-graph .tracing-node .tracing-node-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 300px;
    transform: translate(-50%, 0);
    background: #3A264B;
    padding: 20px;
    box-shadow: 0 0 10px #200F2F;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
    display: flex;
    flex-wrap: wrap;
  }
  .tracing-graph .tracing-node .tracing-node-tooltip > div {
    width: calc(50% - 10px);
  }
  .tracing-graph .tracing-node .tracing-node-tooltip > div.full {
    width: calc(100% - 10px);
  }
  .tracing-graph .tracing-node .tracing-node-tooltip .tracing-node-info {
    margin: 5px;
  }
  .tracing-graph .tracing-node .tracing-node-tooltip .tracing-node-info .label {
    font-size: 0.6em;
  }
  .tracing-graph .tracing-node .tracing-node-tooltip .tracing-node-info .val {
    color: #E6FF3A;
  }
  .tracing-graph .tracing-node .tracing-node-tooltip .tracing-node-info .cnd {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
  }
  .tracing-graph .tracing-node .tracing-node-condition {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.6em;
  }
  .tracing-graph .tracing-node .tracing-node-condition .icon {
    color: rgba(255, 255, 255, 0.4);
  }
  .tracing-graph .tracing-node .tracing-node-condition .label {
    width: 200px;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
  }
  .tracing-graph .tracing-node.valid .tracing-node-inner {
    background: #30243B;
    border-color: #fff;
  }
  .tracing-graph .tracing-node.valid .tracing-node-condition {
    color: #E6FF3A;
  }
  .tracing-graph .tracing-node.valid .tracing-node-condition .icon {
    color: #E6FF3A;
  }
  .tracing-graph .tracing-node.highlight .tracing-node-inner {
    border-color: #4569c9;
  }
  .tracing-graph .tracing-node:hover {
    z-index: 100;
  }
  .tracing-graph .tracing-node:hover .tracing-node-inner {
    transform: scale(1.2);
    border-color: #4569c9;
    box-shadow: 0 0 40px #4569c9;
  }
  .tracing-graph .tracing-node:hover .tracing-node-tooltip {
    visibility: visible;
    opacity: 1;
  }
  .tracing-graph .tracing-node.store-tile-offer:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3A264B;
    width: 130px;
    height: 130px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    box-shadow: 0 0 10px #200F2F;
  }
  .tracing-graph .tracing-node.store-tile-offer:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -75px;
    left: 50%;
    width: 400px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.4);
    transform: translate(-50%, 0);
  }
  .tracing-graph .tracing-node.store-tile-offer .tracing-node-inner {
    transform: scale(1.2);
    border-color: #fff;
    box-shadow: 0 0 40px #200F2F;
  }
  .tracing-graph .tracing-node.store-tile-offer .tracing-node-label {
    text-transform: uppercase;
  }
  .tracing-graph .tracing-node.store-tile-offer .price, .tracing-graph .tracing-node.store-tile-offer .discount {
    position: absolute;
    top: -40px;
    right: -36px;
    width: 130px;
    text-align: right;
    color: #E6FF3A;
  }
  .tracing-graph .tracing-node.store-tile-offer .price span, .tracing-graph .tracing-node.store-tile-offer .discount span {
    font-size: 0.6em;
    font-weight: bold;
  }
  .tracing-graph .tracing-node.store-tile-offer .discount {
    top: -20px;
    font-size: 0.8em;
    color: #EF313E;
  }
  
  .blueprint-editor {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    min-height: 1000px;
    overflow: hidden;
    touch-action: none;
    backdrop-filter: blur(5px);
  }
  .blueprint-editor.loading:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 60px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .blueprint-editor .blueprint-node-list {
    position: absolute;
    top: -30px;
    left: calc(100% + 40px);
    background: #200F2F;
    border: 1px solid #3A264B;
    border-radius: 10px;
    padding: 10px 0;
    display: none;
    min-width: 400px;
    z-index: 9999;
    box-shadow: 0 0 10px 5px #1a0b27;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header {
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    padding: 10px;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header > .icon {
    background: #200F2F;
    border-radius: 50%;
    margin-right: 10px;
    color: #4569c9;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header .title {
    flex-grow: 1;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header .cancel {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header .cancel .icon {
    transform: rotate(45deg);
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-header .cancel:hover {
    background: #4569c9;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-search {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-search input {
    padding-left: 40px;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-tabs .blueprint-node-tab {
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: 0.8em;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-tabs .blueprint-node-tab .check {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    margin-right: 5px;
    border-radius: 50%;
    position: relative;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-tabs .blueprint-node-tab.active .check:after {
    content: "✔";
    color: #4569c9;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-list-container {
    max-height: 400px;
    overflow-y: auto;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-group .blueprint-node-group-title {
    font-size: 0.6em;
    background: #3A264B;
    padding: 10px;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-group .blueprint-node-add {
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
    font-size: 0.8em;
    cursor: pointer;
    transition: background 0.2s;
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-group .blueprint-node-add:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .blueprint-editor .blueprint-node-list .blueprint-node-group .blueprint-node-add:last-child {
    border: none;
  }
  .blueprint-editor .blueprint-node-list.active {
    display: block;
  }
  .blueprint-editor .blueprint-editor-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed #3A264B;
  }
  .blueprint-editor .blueprint-editor-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    cursor: pointer;
  }
  .blueprint-editor .blueprint-editor-container:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 30px;
    background: #3A264B;
    transform: translate(-50%, -50%);
  }
  .blueprint-editor .blueprint-editor-container:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 1px;
    background: #3A264B;
    transform: translate(-50%, -50%);
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    background: #200F2F;
    box-shadow: 0 0 10px #200F2F;
    font-size: 0.8em;
    border: 1px solid #3A264B;
    border-radius: 8px;
    min-width: 320px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node.primary {
    min-width: 420px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-header {
    display: flex;
    align-items: center;
    background: #3A264B;
    padding-right: 6px;
    border-radius: 8px 8px 0 0;
    cursor: move;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-header .name {
    white-space: nowrap;
    flex-grow: 1;
    padding-right: 10px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-header .blueprint-node-delete {
    display: block;
    background: rgba(255, 255, 255, 0.05);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-header .blueprint-node-delete:hover {
    background: #EF313E;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-header .blueprint-node-delete .icon {
    width: 30px;
    height: 30px;
    font-size: 1.2em;
    color: #fff;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch {
    position: relative;
    height: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translate(0, -50%);
    display: flex;
    align-items: center;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label a {
    display: inline-block;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    padding: 0 12px;
    border-radius: 12px;
    min-width: 40px;
    line-height: 24px;
    height: 24px;
    text-align: center;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label a.filled {
    color: #fff;
    border-color: #4569c9;
    background-color: rgba(69, 105, 201, 0.2);
    overflow: hidden;
    word-break: break-all;
    margin-right: 10px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label a.filled:hover {
    color: #4569c9;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label a.dynamic {
    color: #E6FF3A;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label a:hover {
    color: #fff;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label .blueprint-switch-display {
    display: inline-block;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label .blueprint-switch-display .icon {
    margin-left: -8px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label .blueprint-switch-display > div {
    display: flex;
    align-items: center;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label .blueprint-switch-display .icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-item .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-mission .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-poll .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-ad .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-emotion .blueprint-switch-val {
    display: none;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-item .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-mission .blueprint-switch-val, .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label.type-predictionDefinition .blueprint-switch-val {
    display: none;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-label .key-name {
    font-size: 0.8em;
    margin-right: 4px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .anchor {
    position: absolute;
    top: 50%;
    left: -22px;
    transform: translate(0, -50%);
    width: 15px;
    height: 15px;
    background: #3A264B;
    border-radius: 50% 0 0 50%;
    box-shadow: 0 0 5px #200F2F;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .anchor:after {
    content: "▸";
    position: absolute;
    top: 0;
    left: 1px;
    width: 100%;
    line-height: 15px;
    font-size: 18px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .anchor:hover {
    border: 1px solid #fff;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form {
    position: absolute;
    top: 0;
    left: 0px;
    background: #200F2F;
    padding: 20px;
    border-radius: 0 20px 20px 20px;
    border: 1px dashed #4569c9;
    box-shadow: 0 0 10px #200F2F;
    display: none;
    /*.icon{
        background:$color-tertiary;
        border-radius: 50%;
    }*/
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form label {
    padding: 0 10px;
    margin-bottom: 10px;
    display: block;
    font-size: 0.8em;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form input {
    width: 300px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form input.sm {
    width: 100px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input {
    display: flex;
    width: 300px;
    text-transform: capitalize;
    margin-bottom: 16px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion {
    width: 50%;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 10px;
    line-height: 30px;
    margin: 1px;
    transition: color 0.2s, background 0.2s;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion:hover {
    background: #3A264B;
    color: #fff;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion:first-child {
    border-radius: 15px 0 0 15px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion:last-child {
    border-radius: 0 15px 15px 0;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion.active {
    color: #fff;
    background: #4569c9;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion.neutral {
    width: 40px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input .emotion.neutral.active {
    background: rgba(69, 105, 201, 0.5);
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle .blueprint-handle-form .emotion-input:last-child {
    margin: 0;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.edit {
    z-index: 100;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.edit .blueprint-handle-form {
    display: block;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.blueprint-handle-out {
    left: auto;
    right: 12px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.blueprint-handle-out .anchor {
    border-radius: 0 50% 50% 0;
    left: auto;
    right: -22px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.blueprint-handle-out .anchor:after {
    left: -1px;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.active .anchor {
    background-color: #4569c9;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.ready .anchor {
    background-color: #E6FF3A;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node .blueprint-node-switch .blueprint-handle.ready .anchor:after {
    color: #1a0b27;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node.active {
    border-color: #4569c9;
    box-shadow: 0 0 30px -10px #4569c9;
    z-index: 500;
  }
  .blueprint-editor .blueprint-editor-container .blueprint-node.primary:before {
    content: "⯈";
    display: block;
    position: absolute;
    top: 8px;
    left: -30px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border: 3px solid #4569c9;
    color: #4569c9;
    border-radius: 50%;
    padding-left: 1px;
    animation: fadeIn 1s infinite alternate-reverse;
  }
  .blueprint-editor.drag {
    cursor: move;
  }
  .blueprint-editor.drag .blueprint-node {
    cursor: move;
  }
  
  .custom-events-manager {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    text-align: left;
  }
  .custom-events-manager .custom-events-header {
    background: #200F2F;
    padding: 10px;
  }
  .custom-events-manager .custom-events-list .custom-event {
    display: flex;
    align-items: center;
    margin-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
  }
  .custom-events-manager .custom-events-list .custom-event .event-name {
    flex-grow: 1;
  }
  .custom-events-manager .custom-events-list .custom-event .delete-custom-event {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .custom-events-manager .custom-events-list .custom-event .delete-custom-event:hover {
    background: #EF313E;
  }
  .custom-events-manager .custom-events-list .custom-event .delete-custom-event .icon {
    font-size: 1.2em;
  }
  
  .blueprint-toolbar .tool {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
    position: relative;
  }
  .blueprint-toolbar .tool:last-child {
    border: none;
  }
  .blueprint-toolbar .tool:hover {
    background: #3A264B;
  }
  .blueprint-toolbar .tool .icon {
    font-size: 1.4em;
  }
  .blueprint-toolbar .tool .pending {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: #200F2F;
    border: 1px solid #3A264B;
    box-shadow: 2px 2px 10px #200F2F;
    color: #FFA011;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    display: none;
  }
  .blueprint-toolbar .tool .pending.visible {
    display: block;
  }
  
  .blueprint-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #200F2F;
    border: 1px solid #3A264B;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .blueprint-controls .blueprint-control {
    border-bottom: 1px solid #3A264B;
    cursor: pointer;
  }
  .blueprint-controls .blueprint-control .icon {
    opacity: 0.2;
    transition: opacity 0.2s;
  }
  .blueprint-controls .blueprint-control:last-child {
    border: none;
  }
  .blueprint-controls .blueprint-control:hover .icon {
    opacity: 1;
  }
  
  .blueprint-node-add-switch {
    background: #3A264B;
    border-radius: 50%;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 8px 12px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .blueprint-node-add-switch .icon {
    width: 100%;
    height: 100%;
    font-size: 0.8em;
  }
  .blueprint-node-add-switch:hover {
    background: #4569c9;
  }
  
  .blueprint-switch-remove {
    width: 24px;
    height: 24px;
    background: #3A264B;
    transition: background 0.2s;
    border-radius: 0 50% 50% 0;
    margin-left: -16px;
    margin-right: 6px;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .blueprint-switch-remove .icon {
    width: 100%;
    height: 100%;
    font-size: 1em;
    transform: rotate(45deg);
  }
  .blueprint-switch-remove:hover {
    background: #EF313E;
  }
  
  .emotion-warn {
    min-width: 300px;
    display: flex;
    color: rgba(255, 255, 255, 0.4);
  }
  .emotion-warn .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: #FFA011;
    margin-right: 5px;
    flex-shrink: 0;
  }
  
  #setup-wizard .wizard-body {
    position: relative;
    overflow-y: auto;
    height: calc(100% - 140px);
    width: 100%;
    padding: 40px;
  }
  #setup-wizard .main-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }
  #setup-wizard .wizard-wrapper {
    width: 1000px;
    max-width: 90%;
  }
  #setup-wizard .wizard-wrapper > img {
    display: block;
    margin: 0 auto;
    margin-bottom: 40px;
  }
  #setup-wizard .wizard-box {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    text-align: center;
    animation: fadeIn 0.5s linear;
  }
  #setup-wizard .wizard-box .error-msg {
    color: #EF313E;
    padding: 20px;
  }
  #setup-wizard .wizard-box h1 {
    color: #4569c9;
    font-size: 1.6em;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-left: 3px;
  }
  #setup-wizard .wizard-box h1 .wizard-step {
    width: 90px;
    height: 90px;
    line-height: 75px;
    padding-top: 15px;
    background: #200F2F;
    color: #FFA011;
    border-radius: 50%;
    margin: 0 auto 20px;
    font-weight: bold;
    position: relative;
    box-shadow: 2px 2px 8px #200F2F;
    border: 1px solid #3A264B;
  }
  #setup-wizard .wizard-box h1 .wizard-step span {
    font-size: 0.5em;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
    padding-left: 4px;
  }
  #setup-wizard .wizard-box h1 .wizard-step:before {
    content: "step";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    line-height: 50px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding-left: 3px;
  }
  #setup-wizard .wizard-box h1 .wizard-step.done {
    padding-top: 0;
    height: 90px;
  }
  #setup-wizard .wizard-box h1 .wizard-step.done .icon-product {
    width: 70px;
    height: 70px;
    margin: 10px;
    font-weight: normal;
  }
  #setup-wizard .wizard-box h1 .wizard-step.done:before {
    content: "";
  }
  #setup-wizard .wizard-box h2 {
    color: #4569c9;
    font-size: 1.4em;
    margin-bottom: 20px;
  }
  #setup-wizard .wizard-box .bar {
    padding: 20px;
  }
  #setup-wizard .wizard-box h2 {
    font-size: 1.4em;
    color: #4569c9;
  }
  #setup-wizard .wizard-box p {
    font-size: 1.2em;
    margin: 0 0 20px;
    line-height: 30px;
  }
  #setup-wizard .wizard-box p.advanced-option-info {
    line-height: normal;
    font-size: 1em;
  }
  #setup-wizard .wizard-box p.tip {
    font-size: 1em;
    color: rgba(255, 255, 255, 0.4);
  }
  #setup-wizard p a {
    color: #4569c9;
    transition: color 0.2s;
  }
  #setup-wizard p a:hover {
    color: #8f53d9;
  }
  #setup-wizard .wizard-box .form-field {
    width: 100%;
    max-width: none;
  }
  #setup-wizard .advanced-options {
    display: none;
    margin-top: 2px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  #setup-wizard .advanced-options .tip {
    margin-top: 20px;
    font-size: 0.8em;
  }
  #setup-wizard .advanced-options .code {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
    color: #4569c9;
    margin-top: 5px;
  }
  #setup-wizard .advanced-options .advanced-options-grid {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 40px;
  }
  #setup-wizard .advanced-options .advanced-options-grid .advanced-options-grid-column {
    width: 50%;
    padding: 0 20px;
  }
  #setup-wizard .advanced-options.visible {
    display: block;
  }
  #setup-wizard .wizard-box .form-field input {
    text-align: center;
  }
  #setup-wizard .wizard-box .form-field .toggle {
    margin: 0 auto;
  }
  #setup-wizard .wizard-box .form-field label {
    padding-left: 0;
  }
  #setup-wizard .credentials-container {
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  #setup-wizard .credentials {
    margin-bottom: 20px;
  }
  #setup-wizard .credentials .key {
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  #setup-wizard .credentials .val input {
    text-align: center;
  }
  #setup-wizard .toggle-options {
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
    background: rgba(255, 255, 255, 0.05);
    display: block;
    padding: 10px;
    position: relative;
  }
  #setup-wizard .toggle-options:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
  }
  #setup-wizard .toggle-options:hover, #setup-wizard .toggle-options.active {
    color: #4569c9;
  }
  #setup-wizard .toggle-options.active:after {
    content: "-";
  }
  #setup-wizard .wizard-box.loading .btn {
    opacity: 0;
    pointer-events: none;
  }
  #setup-wizard .wizard-box.loading:after {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 40px;
    left: 50%;
    margin-left: -20px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  #setup-wizard .wizard-choice-container {
    display: flex;
    margin: 10px 0;
  }
  #setup-wizard .wizard-choice-container .wizard-choice {
    background: rgba(255, 255, 255, 0.05);
    flex-basis: 25%;
    flex-grow: 1;
    margin: 10px;
    padding: 20px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  #setup-wizard .wizard-choice-container .wizard-choice:first-child {
    margin-left: 0;
  }
  #setup-wizard .wizard-choice-container .wizard-choice:last-child {
    margin-right: 0;
  }
  #setup-wizard .wizard-choice-container .wizard-choice:hover {
    background: #3A264B;
  }
  #setup-wizard .wizard-choice-container .wizard-choice.active {
    background: #200F2F;
    box-shadow: 0 0 10px #200F2F;
  }
  #setup-wizard .wizard-choice-container .wizard-choice.active .icon {
    color: #FFA011;
  }
  #setup-wizard .wizard-choice-container .wizard-choice.active .title {
    color: #FFA011;
  }
  #setup-wizard .wizard-choice-container .wizard-choice .icon {
    background: rgba(255, 255, 255, 0.05);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2em;
  }
  #setup-wizard .wizard-choice-container .wizard-choice img {
    background: rgba(255, 255, 255, 0.05);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 2em;
  }
  #setup-wizard .wizard-choice-container .wizard-choice .title {
    font-size: 1.2em;
    margin: 10px 0;
  }
  #setup-wizard .wizard-choice-container .wizard-choice .desc {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  #setup-wizard .wizard-progress-bar {
    width: 100%;
    height: 5px;
    position: absolute;
    top: 100px;
    left: 0;
    background: #3A264B;
    z-index: 100;
  }
  #setup-wizard .wizard-progress-bar .progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: #FFA011;
  }
  
  .segment-definition {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .segment-definition-group .segment-definition {
    position: relative;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #4569c9;
  }
  .segment-definition-group .segment-definition > div:last-child {
    margin: 0;
  }
  .segment-definition-group .segment-definition .segment-filter {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .segment-definition-group .segment-definition .segment-filter .segment-filter-title {
    flex-grow: 1;
    font-size: 1.2em;
    color: #4569c9;
  }
  .segment-definition-group .segment-definition .segment-filter .btn {
    margin: 0;
    padding: 0;
  }
  .segment-definition-group .segment-definition .segment-filter .btn .icon {
    font-size: 1.2em;
  }
  .segment-definition-group .segment-definition .segment-fields {
    display: flex;
    align-items: top;
    flex-wrap: wrap;
  }
  .segment-definition-group .segment-definition .segment-fields .segment-comparison {
    padding: 10px;
  }
  .segment-definition-group .segment-definition .segment-fields .segment-comparison label {
    display: block;
    font-size: 0.8em;
    padding-left: 14px;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.4);
  }
  .segment-definition-group .segment-definition:before {
    content: "AND";
    font-size: 0.6em;
    display: block;
    position: absolute;
    top: -16px;
    left: -12px;
    color: #4569c9;
  }
  .segment-definition-group .segment-definition:first-child:before {
    content: "";
  }
  
  .segment-definition-actions {
    margin-top: 20px;
  }
  
  .segment-action {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    border-left: 4px solid #E6FF3A;
  }
  .segment-action .segment-action-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .segment-action .segment-action-title .title {
    flex-grow: 1;
    font-size: 1.2em;
    color: #E6FF3A;
  }
  .segment-action .segment-action-title .btn {
    padding: 0;
    margin: 0;
  }
  .segment-action .segment-action-title .btn .icon {
    font-size: 1.2em;
  }
  .segment-action .segment-action-fields {
    display: flex;
    align-items: center;
  }
  .segment-action .segment-action-fields .segment-action-field {
    margin: 10px;
  }
  .segment-action .segment-action-fields .segment-action-field label {
    display: block;
    font-size: 0.8em;
    padding-left: 14px;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.4);
  }
  
  #cloudscript-editor {
    position: relative;
    width: 100%;
    height: calc(100% - 150px);
  }
  
  .cloudscript-library {
    padding-left: 6px;
  }
  
  .cloudscript-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .cloudscript-header h3 {
    flex-grow: 1;
    margin: 0 !important;
  }
  .cloudscript-header .changes {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 10px;
  }
  .cloudscript-header .changes .published {
    width: 100%;
    height: 100%;
    background: #200F2F;
    color: #65FF60;
    border-radius: 50%;
  }
  .cloudscript-header .changes .pending {
    width: 100%;
    height: 100%;
    background: #EF313E;
    border-radius: 50%;
  }
  
  #automation-cloudscripts .box .pending-changes {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #EF313E;
    border-radius: 50%;
  }
  
  .cloudscript-bracket {
    font-style: italic;
    background: #200F2F;
    padding: 10px;
  }
  .cloudscript-bracket span {
    color: #4569c9;
  }
  .cloudscript-bracket.top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .cloudscript-bracket.bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  
  .codeflask {
    background: #200F2F;
    color: #fff;
  }
  
  .codeflask__lines {
    background: #3A264B;
    color: rgba(255, 255, 255, 0.4) !important;
  }
  
  .codeflask__textarea {
    color: rgba(255, 255, 255, 0.05) !important;
    caret-color: #fff !important;
    font-size: 13px !important;
  }
  
  .codeflask .token.punctuation {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .codeflask .token.keyword {
    color: #4569c9;
  }
  
  .codeflask .token.operator {
    color: #FF7440;
  }
  
  .codeflask .token.string {
    color: #8f53d9;
  }
  
  .codeflask .token.comment {
    color: #30243B;
  }
  
  .codeflask .token.function {
    color: #E6FF3A;
  }
  
  .codeflask .token.boolean {
    color: #FFA011;
  }
  
  .codeflask .token.number {
    color: #FFA011;
  }
  
  .codeflask .token.selector {
    color: #FFA011;
  }
  
  .codeflask .token.property {
    color: #FFA011;
  }
  
  .codeflask .token.tag {
    color: #FFA011;
  }
  
  .codeflask .token.attr-value {
    color: #FFA011;
  }
  
  .codeflask__lines {
    height: auto !important;
    min-height: 100%;
  }
  
  .cloudscript-revision {
    line-height: 40px;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 20px;
    border-radius: 20px;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 10px;
  }
  
  .cloudscript-changes {
    min-width: 40px;
    line-height: 40px;
    text-align: center;
    background: #EF313E;
    margin-left: 10px;
    border-radius: 20px;
  }
  
  .function-library {
    height: 500px;
    overflow-y: auto;
    margin-bottom: 20px;
  }
  .function-library .function-group {
    margin-bottom: 10px;
  }
  .function-library .function-group .function-group-header {
    text-align: left;
    display: flex;
    align-items: center;
    color: #4569c9;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
  }
  .function-library .function-group .function-group-header .function-group-name {
    font-size: 1.4em;
    flex-grow: 1;
  }
  .function-library .function-group .function-group-header .check {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: relative;
    color: #4569c9;
  }
  .function-library .function-group .function-group-header .check.active {
    background: #200F2F;
  }
  .function-library .function-group .function-group-header .check.active:after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .function-library .function-group .function {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-top: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .function-library .function-group .function:hover {
    background: rgba(69, 105, 201, 0.2);
  }
  .function-library .function-group .function .icon {
    border: 4px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .function-library .function-group .function .function-info {
    flex-grow: 1;
    text-align: left;
  }
  .function-library .function-group .function .function-description {
    font-size: 0.6em;
    color: rgba(255, 255, 255, 0.4);
  }
  .function-library .function-group .function .check {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: relative;
  }
  .function-library .function-group .function.active {
    background: #200F2F;
  }
  .function-library .function-group .function.active .check {
    background: #4569c9;
  }
  .function-library .function-group .function.active .check:after {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .cloudscript-function-result {
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    height: 200px;
    font-size: 0.6em;
    overflow: auto;
  }
  .cloudscript-function-result pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
  }
  
  .cloudscript-function-info {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .cloudscript-function-info .icon {
    width: 80px;
    height: 80px;
    font-size: 2.6em;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
  }
  .cloudscript-function-info .title {
    font-size: 1.2em;
  }
  .cloudscript-function-info .desc {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  
  #poll-form .poll-answers {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #poll-form .poll-answers .poll-answer {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    display: flex;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
  }
  #poll-form .poll-answers .poll-answer.active {
    position: relative;
    z-index: 10;
  }
  #poll-form .poll-answers .poll-answer:last-child {
    margin-bottom: 0;
  }
  #poll-form .poll-answers .poll-answer .stat {
    margin-right: 40px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
  }
  #poll-form .poll-answers .poll-answer .stat .circle {
    width: 136px;
    height: 136px;
    border: 16px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: relative;
  }
  #poll-form .poll-answers .poll-answer .stat .circle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  #poll-form .poll-answers .poll-answer .stat .circle svg circle {
    stroke: #E6FF3A;
  }
  #poll-form .poll-answers .poll-answer .stat .circle .metric {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    text-shadow: none;
  }
  #poll-form .poll-answers .poll-answer .label-text {
    margin-right: 40px;
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  #poll-form .poll-answers .poll-answer .label-text label {
    display: block;
    margin-bottom: 10px;
    color: #E6FF3A;
  }
  #poll-form .poll-answers .poll-answer .label-text .checkbox {
    margin-top: 20px;
    width: auto;
  }
  #poll-form .poll-answers .poll-answer .rewards {
    flex-grow: 1;
  }
  #poll-form .poll-answers .poll-answer .rewards label {
    display: block;
    margin-bottom: 10px;
    color: #E6FF3A;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-actions {
    margin-bottom: 10px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list {
    display: flex;
    flex-wrap: wrap;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward {
    background: #200F2F;
    border-radius: 10px;
    margin: 5px;
    border: 1px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #3A264B;
    border-radius: 10px 10px 0 0;
    font-size: 0.8em;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header .label {
    flex-grow: 1;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header .icon {
    width: 34px;
    height: 34px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header .delete-short-reward {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    cursor: pointer;
    transition: background 0.2s;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header .delete-short-reward .icon {
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: #fff;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .header .delete-short-reward:hover {
    background: #EF313E;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info {
    display: flex;
    padding: 10px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info > div {
    margin-right: 10px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info > div:last-child {
    margin: 0;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info .input-item, #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info .input-mission, #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info .input-currency {
    min-width: 260px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info input {
    width: 200px;
    font-size: 0.8em;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .reward .info input.sm {
    width: 100px;
    text-align: center;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .add-reward {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
    cursor: pointer;
    margin: 4px;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .add-reward .icon {
    width: 100%;
    height: 100%;
  }
  #poll-form .poll-answers .poll-answer .rewards .reward-list .add-reward:hover {
    background: #4569c9;
  }
  #poll-form .poll-answers .poll-answer .actions .btn-trash {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.2s;
  }
  #poll-form .poll-answers .poll-answer .actions .btn-trash .icon {
    font-size: 1.2em;
    transform: rotate(45deg);
  }
  #poll-form .poll-answers .poll-answer .actions .btn-trash:hover {
    background: #EF313E;
  }
  
  .player-profile-overview {
    display: flex;
    align-items: top;
    border-radius: 20px;
  }
  .player-profile-overview .player-profile-avatar {
    position: relative;
    width: 160px;
    height: 160px;
    margin-right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 10px solid transparent;
    overflow: hidden;
  }
  .player-profile-overview .player-profile-avatar img {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 20px;
  }
  .player-profile-overview .player-profile-avatar .icon {
    width: 160px;
    height: 160px;
    font-size: 4em;
    color: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .player-profile-overview .player-profile-info {
    flex-grow: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    padding-left: 20px;
  }
  .player-profile-overview .player-meta {
    font-size: 0.7em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
  }
  .player-profile-overview .player-profile-timeline {
    padding: 40px 20px;
    font-size: 0.8em;
  }
  .player-profile-overview .player-profile-timeline .player-profile-timeline-item {
    display: flex;
    align-items: center;
  }
  .player-profile-overview .player-profile-timeline .player-profile-timeline-item span {
    display: inline-block;
    margin-left: 5px;
    color: rgba(255, 255, 255, 0.4);
  }
  .player-profile-overview .player-profile-timeline .player-profile-timeline-item:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    margin-right: 10px;
  }
  .player-profile-overview .player-profile-timeline .player-profile-timeline-line:before {
    content: "";
    display: block;
    width: 6px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    margin: 4px 6px;
  }
  .player-profile-overview .player-profile-timeline .player-first-login:before {
    border-color: #4569c9;
  }
  .player-profile-overview .player-profile-timeline .player-last-login:before {
    border-color: #E6FF3A;
  }
  .player-profile-overview .player-profile-timeline .player-age:before {
    border-color: #8f53d9;
  }
  
  .profile-playstream-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .profile-playstream-nav .profile-playstream-nav-btn {
    display: block;
    flex-grow: 1;
    text-align: center;
    padding-right: 16px;
  }
  .profile-playstream-nav .profile-playstream-nav-btn:hover {
    background: #8f53d9;
  }
  .profile-playstream-nav .profile-playstream-nav-btn.active {
    background: #4569c9;
  }
  
  .event-stream-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
  }
  .event-stream-toggle .event-stream-option {
    width: 40px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
  }
  .event-stream-toggle .event-stream-option:hover {
    background: #200F2F;
  }
  .event-stream-toggle .event-stream-option.active {
    background: #4569c9;
  }
  .event-stream-toggle .event-stream-option .icon {
    width: 38px;
    height: 28px;
    font-size: 1.2em;
  }
  .event-stream-toggle .event-stream-option:first-child {
    border-radius: 15px 0 0 15px;
  }
  .event-stream-toggle .event-stream-option:last-child {
    border-radius: 0 15px 15px 0;
  }
  
  .chart-col {
    position: relative;
    width: 100%;
    height: calc(100% - 50px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  }
  .chart-col canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    filter: drop-shadow(0 0 10px #200F2F);
  }
  .chart-col.mood {
    height: 120px;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .box-grid .col.ads-widget-adjust > .widget {
    height: 320px;
  }
  
  .emotions-box .inner {
    display: flex;
    flex-direction: column;
  }
  
  .tug-of-war-stat-ctn {
    display: grid;
    gap: 10px;
    flex: 1 1 100%;
  }
  .tug-of-war-stat-ctn .tug-of-war-warning {
    text-align: center;
    padding: 60px 100px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 240px 1fr;
    align-items: center;
    gap: 20px;
    font-size: 0.8em;
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.4);
    animation: fadeIn 0.5s linear;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .left-label {
    text-align: right;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .label-active {
    color: #fff;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .tug-of-war-bar {
    position: relative;
    height: 20px;
    background: #200F2F;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    filter: drop-shadow(0 0 10px #200F2F);
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .tug-of-war-bar:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 4px;
    height: calc(100% + 20px);
    border-radius: 2px;
    background: #3A264B;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .tug-of-war-bar .tug-of-war-inner {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0%;
    height: 100%;
    background: #9C46FF;
    border-radius: 0 10px 10px 0;
  }
  .tug-of-war-stat-ctn .tug-of-war-stat .tug-of-war-bar .tug-of-war-inner.left {
    border-radius: 10px 0 0 10px;
    left: auto;
    right: 50%;
  }
  
  .ad-mood {
    height: 160px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .ad-mood .text .name {
    font-size: 1.5em;
    margin-bottom: 6px;
  }
  .ad-mood .text .id {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .ad-mood .circle {
    position: relative;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    border: 10px solid transparent;
    overflow: hidden;
  }
  .ad-mood .circle img {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 20px;
  }
  .ad-mood .circle .icon {
    width: 160px;
    height: 160px;
    font-size: 4em;
    color: rgba(255, 255, 255, 0.4);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .ad-stats .ad-stat {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 20px;
    margin-bottom: 2px;
    align-items: center;
  }
  .ad-stats .ad-stat.rewarded {
    color: #3EFF85;
  }
  .ad-stats .ad-stat.skipped {
    opacity: 0.6;
  }
  .ad-stats .ad-stat .key {
    flex-grow: 1;
  }
  .ad-stats .ad-stat .val {
    font-size: 1.4em;
    font-weight: bold;
  }
  
  #objective-triggers {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #objective-triggers .objective-trigger {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    display: flex;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
  }
  #objective-triggers .objective-trigger:last-child {
    margin-bottom: 0;
  }
  #objective-triggers .objective-trigger .stat {
    margin-right: 40px;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
  }
  #objective-triggers .objective-trigger .stat .circle {
    width: 136px;
    height: 136px;
    border: 16px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: relative;
  }
  #objective-triggers .objective-trigger .stat .circle svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  #objective-triggers .objective-trigger .stat .circle svg circle {
    stroke: #E6FF3A;
  }
  #objective-triggers .objective-trigger .stat .circle .metric {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-size: 0.8em;
    text-shadow: none;
  }
  #objective-triggers .objective-trigger .trigger-rules {
    margin-right: 40px;
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-label {
    display: block;
    margin-bottom: 10px;
  }
  #objective-triggers .objective-trigger .trigger-rules .checkbox {
    margin-top: 20px;
    width: auto;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf {
    display: flex;
    align-items: start;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-event, #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-condition {
    background: #200F2F;
    border: 1px solid #3A264B;
    border-top-width: 10px;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 10px;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-event {
    margin-right: 20px;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition {
    border-top-width: 1px;
    padding: 0;
    position: relative;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition::before {
    content: "AND";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    padding: 10px;
    background: #3A264B;
    box-shadow: 0 0 5px #200F2F;
    font-size: 0.6em;
    border-radius: 10px;
    color: #E6FF3A;
    letter-spacing: 3px;
    padding-left: 13px;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition:first-child::before {
    display: none;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition .header {
    background: #3A264B;
    height: 34px;
    padding: 5px;
    border-radius: 10px 10px 0 0;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition .header .delete-trigger-condition {
    float: right;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: background 0.2s;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition .header .delete-trigger-condition .icon {
    width: 100%;
    height: 100%;
    font-size: 1em;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition .header .delete-trigger-condition:hover {
    background: #EF313E;
  }
  #objective-triggers .objective-trigger .trigger-rules .trigger-conf .trigger-conf-conditions .trigger-conf-condition .content {
    padding: 20px;
  }
  #objective-triggers .objective-trigger .rewards {
    flex-grow: 1;
  }
  #objective-triggers .objective-trigger .rewards label {
    display: block;
    margin-bottom: 10px;
  }
  #objective-triggers .objective-trigger .rewards .reward-actions {
    margin-bottom: 10px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list {
    display: flex;
    flex-wrap: wrap;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward {
    background: #200F2F;
    border-radius: 10px;
    margin: 5px;
    border: 1px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #3A264B;
    border-radius: 10px 10px 0 0;
    font-size: 0.8em;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header .label {
    flex-grow: 1;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header .icon {
    width: 34px;
    height: 34px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header .delete-short-reward {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    cursor: pointer;
    transition: background 0.2s;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header .delete-short-reward .icon {
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: #fff;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .header .delete-short-reward:hover {
    background: #EF313E;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info {
    display: flex;
    padding: 10px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info > div {
    margin-right: 10px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info > div:last-child {
    margin: 0;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info .input-item, #objective-triggers .objective-trigger .rewards .reward-list .reward .info .input-mission, #objective-triggers .objective-trigger .rewards .reward-list .reward .info .input-currency {
    min-width: 260px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info input {
    width: 200px;
    font-size: 0.8em;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .reward .info input.sm {
    width: 100px;
    text-align: center;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .add-reward {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
    cursor: pointer;
    margin: 4px;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .add-reward .icon {
    width: 100%;
    height: 100%;
  }
  #objective-triggers .objective-trigger .rewards .reward-list .add-reward:hover {
    background: #4569c9;
  }
  #objective-triggers .objective-trigger .actions .btn-trash {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.2s;
  }
  #objective-triggers .objective-trigger .actions .btn-trash .icon {
    font-size: 1.2em;
    transform: rotate(45deg);
  }
  #objective-triggers .objective-trigger .actions .btn-trash:hover {
    background: #EF313E;
  }
  
  .playstream-full {
    display: flex;
    min-height: 500px;
    height: calc(100% - 400px);
  }
  .playstream-full > div {
    width: 50%;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  .playstream-full > div h3 {
    line-height: 60px;
  }
  .playstream-full > div:first-child {
    margin-right: 20px;
  }
  
  .playstream-header {
    height: 380px;
    margin-bottom: 20px;
    position: relative;
  }
  .playstream-header .playstream-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-size: cover;
    background-position: center center;
  }
  .playstream-header .playstream-header-content {
    position: relative;
  }
  .playstream-header .playstream-header-content h2 {
    background: none;
    padding: 40px;
    color: #fff;
    font-size: 2.4em;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: normal;
  }
  .playstream-header .playstream-header-content .playstream-live-stats {
    padding: 0 40px;
    display: flex;
  }
  .playstream-header .playstream-header-content .playstream-live-stats .playstream-live-stat {
    padding: 20px;
    text-align: center;
    width: 200px;
    margin-right: 20px;
    --blur-amount: 10px;
    background: rgba(26, 11, 39, 0.4);
    -webkit-backdrop-filter: blur(var(--blur-amount));
    -moz-backdrop-filter: blur(var(--blur-amount));
    backdrop-filter: blur(var(--blur-amount));
  }
  .playstream-header .playstream-header-content .playstream-live-stats .playstream-live-stat-value {
    font-size: 3em;
    color: #E6FF3A;
  }
  .playstream-header .playstream-header-content .playstream-live-stats .playstream-live-stat-label {
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 0.8em;
  }
  .playstream-header .box-list {
    position: absolute;
    top: 40px;
    right: 40px;
  }
  
  #ai-assistant {
    position: relative;
  }
  #ai-assistant .toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    margin-left: 10px;
  }
  #ai-assistant .toggle-btn .icon {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s, transform 0.3s ease-in-out;
  }
  #ai-assistant .toggle-btn:hover .icon {
    color: #fff;
  }
  #ai-assistant .ai-assistant-container {
    position: fixed;
    top: 100px;
    right: -800px;
    width: 800px;
    height: calc(100% - 100px);
    background: rgba(26, 11, 39, 0.9);
    transition: right 0.3s ease-in-out;
    user-select: text;
    display: flex;
    backdrop-filter: blur(5px);
  }
  #ai-assistant .ai-assistant-container .sidebar {
    width: 60px;
    background: #3A264B;
    padding: 12px 0;
  }
  #ai-assistant .ai-assistant-container .sidebar .ai-tool {
    width: 60px;
    height: 60px;
    cursor: pointer;
    opacity: 0.2;
    transition: opacity 0.2s;
  }
  #ai-assistant .ai-assistant-container .sidebar .ai-tool .icon {
    width: 100%;
    height: 100%;
  }
  #ai-assistant .ai-assistant-container .sidebar .ai-tool:hover {
    opacity: 1;
  }
  #ai-assistant .ai-assistant-container .sidebar .ai-tool.active {
    opacity: 1;
  }
  #ai-assistant .ai-assistant-container .sidebar .ai-tool.active .icon {
    color: #E6FF3A;
  }
  #ai-assistant .ai-assistant-container .chat {
    flex-grow: 1;
    padding: 20px;
  }
  #ai-assistant .ai-assistant-container .chat .head {
    line-height: 40px;
  }
  #ai-assistant .ai-assistant-container .chat .head .title {
    font-size: 1.4em;
  }
  #ai-assistant .ai-assistant-container .chat .head .beta {
    vertical-align: top;
    margin-top: 10px;
  }
  #ai-assistant .ai-assistant-container .chat .log {
    height: calc(100% - 180px);
    overflow-y: auto;
  }
  #ai-assistant .ai-assistant-container .chat .log .log-content {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    min-height: 100%;
  }
  #ai-assistant .ai-assistant-container .chat .log .log-content > div {
    font-size: 0.8em;
    line-height: normal;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.05);
    margin-right: 10px;
    width: 100%;
  }
  #ai-assistant .ai-assistant-container .chat .log .log-content > div.me {
    color: rgba(255, 255, 255, 0.4);
    margin-right: 50px;
    border-left-width: 6px;
    border-left-color: #4569c9;
  }
  #ai-assistant .ai-assistant-container .chat .log .log-content > div.me:before {
    content: "Me: ";
    color: #4569c9;
  }
  #ai-assistant .ai-assistant-container .chat .log .log-content > div.ai {
    margin-left: 50px;
    border-right-width: 6px;
    border-right-color: #E6FF3A;
  }
  #ai-assistant .ai-assistant-container .chat .log table {
    margin: 20px;
    text-align: left;
    border-collapse: collapse;
  }
  #ai-assistant .ai-assistant-container .chat .log table th, #ai-assistant .ai-assistant-container .chat .log table td {
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  #ai-assistant .ai-assistant-container .chat .log table th {
    background: rgba(255, 255, 255, 0.05);
  }
  #ai-assistant .ai-assistant-container .chat .log pre {
    white-space: pre-wrap;
  }
  #ai-assistant .input {
    position: relative;
    padding-top: 10px;
    margin-top: 10px;
  }
  #ai-assistant .input label {
    padding: 10px;
    display: block;
  }
  #ai-assistant .input input {
    width: 100%;
  }
  #ai-assistant.active .ai-assistant-container {
    right: 0;
  }
  #ai-assistant.active .toggle-btn .icon {
    color: #E6FF3A;
    transform: scale(1.2);
  }
  #ai-assistant.processing .input input {
    display: none;
  }
  #ai-assistant.processing .input:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  #creative-assistant {
    height: 100%;
  }
  
  #creative-assistant-container {
    display: flex;
    overflow: hidden;
    height: calc(100% - 80px);
  }
  #creative-assistant-container .nav {
    padding: 10px;
    width: 60px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
  }
  #creative-assistant-container .nav .nav-item {
    opacity: 0.2;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  #creative-assistant-container .nav .nav-item .icon {
    transition: transform 0.3s ease-in-out;
  }
  #creative-assistant-container .nav .nav-item:hover {
    opacity: 0.4;
  }
  #creative-assistant-container .nav .nav-item.active {
    opacity: 1;
  }
  #creative-assistant-container .nav .nav-item.active .icon {
    transform: scale(1.2);
  }
  #creative-assistant-container .nav .nav-item.active.step-1 .icon {
    color: #65FF60;
  }
  #creative-assistant-container .nav .nav-item.active.step-2 .icon {
    color: #3AFFEB;
  }
  #creative-assistant-container .nav .nav-item.active.step-3 .icon {
    color: #FF483A;
  }
  #creative-assistant-container .nav .nav-item.active.step-4 .icon {
    color: #FFA011;
  }
  #creative-assistant-container .aside {
    width: 440px;
    background: rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    flex-shrink: 0;
    margin-right: 20px;
    backdrop-filter: blur(5px);
  }
  #creative-assistant-container .aside textarea {
    width: 100%;
  }
  #creative-assistant-container .content {
    flex-grow: 1;
    padding: 20px;
    padding-left: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
  }
  #creative-assistant-container .content .header {
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
  #creative-assistant-container .content .header .icon {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin-right: 10px;
    width: 30px;
    height: 30px;
  }
  #creative-assistant-container .content .header .info {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  #creative-assistant-container .content h2 {
    font-size: 1.6em;
    line-height: 40px;
    margin-bottom: 40px;
  }
  
  .creative-assistant-output {
    position: relative;
    height: calc(100% - 60px);
    overflow-y: auto;
    padding-left: 20px;
  }
  .creative-assistant-output .error {
    color: #EF313E;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
  }
  
  .creative-assistant-form {
    padding: 20px;
    display: none;
    border-left: 4px solid rgba(255, 255, 255, 0.05);
    animation: fadeIn 0.5s linear;
  }
  .creative-assistant-form h3 {
    font-size: 1.2em;
    margin-bottom: 20px;
  }
  .creative-assistant-form .btn {
    margin-left: 0;
  }
  .creative-assistant-form .service-warn {
    align-items: flex-start;
    padding: 20px 10px;
  }
  .creative-assistant-form .service-warn .warn-icon {
    margin-right: 10px;
  }
  .creative-assistant-form .service-warn .warn-icon .icon {
    width: 40px;
    height: 40px;
    font-size: 1.6em;
  }
  .creative-assistant-form .service-warn .msg {
    font-size: 0.8em;
    line-height: 1.4em;
  }
  .creative-assistant-form.step-1 {
    border-color: #65FF60;
  }
  .creative-assistant-form.step-1 h3 {
    color: #65FF60;
  }
  .creative-assistant-form.step-2 {
    border-color: #3AFFEB;
  }
  .creative-assistant-form.step-2 h3 {
    color: #3AFFEB;
  }
  .creative-assistant-form.step-3 {
    border-color: #FF483A;
  }
  .creative-assistant-form.step-3 h3 {
    color: #FF483A;
  }
  .creative-assistant-form.step-4 {
    border-color: #FFA011;
  }
  .creative-assistant-form.step-4 h3 {
    color: #FFA011;
  }
  .creative-assistant-form.active {
    display: block;
  }
  .creative-assistant-form .custom-fields, .creative-assistant-form .asset-fields {
    margin-bottom: 40px;
  }
  .creative-assistant-form .custom-fields .form-field, .creative-assistant-form .asset-fields .form-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .creative-assistant-form .custom-fields .form-field label, .creative-assistant-form .asset-fields .form-field label {
    padding: 0;
    color: #fff;
  }
  .creative-assistant-form .custom-fields .form-field .toggle, .creative-assistant-form .asset-fields .form-field .toggle {
    height: 30px;
    width: 60px;
    margin-left: 0;
    margin-right: 10px;
  }
  .creative-assistant-form .custom-fields .form-field .toggle:after, .creative-assistant-form .asset-fields .form-field .toggle:after {
    width: 22px;
    height: 22px;
  }
  .creative-assistant-form .custom-fields .form-field .toggle.active:after, .creative-assistant-form .asset-fields .form-field .toggle.active:after {
    left: 32px;
  }
  .creative-assistant-form .separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 40px 0;
  }
  .creative-assistant-form .creative-assistant-form-actions {
    transition: opacity 0.2s, visibility 0.2s;
  }
  .creative-assistant-form .asset-generic-fields {
    margin-bottom: 20px;
  }
  .creative-assistant-form .loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .creative-assistant-form .loader:after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .creative-assistant-form.loading .creative-assistant-form-actions {
    visibility: hidden;
    opacity: 0;
  }
  .creative-assistant-form.loading .loader {
    visibility: visible;
    opacity: 1;
  }
  
  .creative-assistant-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
  }
  .creative-assistant-close:hover {
    background: #200F2F;
  }
  .creative-assistant-close .icon {
    transform: rotate(45deg);
  }
  
  .creative-assistant-item {
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 5px;
    padding: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    opacity: 0.2;
    border-radius: 0 14px 14px 0;
  }
  .creative-assistant-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .creative-assistant-item .toggle-handle {
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 100%;
    background: #200F2F;
    text-align: center;
    color: #4569c9;
    border-radius: 14px 0 0 14px;
    transition: background 0.2s;
  }
  .creative-assistant-item .toggle-handle:hover {
    background: #8f53d9 !important;
  }
  .creative-assistant-item .publish {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 11, 39, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .creative-assistant-item .publish .message {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translate(0, -50%);
    background: #200F2F;
    padding: 20px;
    display: flex;
    align-items: center;
  }
  .creative-assistant-item .publish .message:before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    position: relative;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .creative-assistant-item .status {
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #200F2F;
    display: none;
    border-radius: 0 14px 14px 0;
  }
  .creative-assistant-item .status .icon {
    width: 100%;
    height: 100%;
    opacity: 0.2;
    transition: opacity 0.2s;
  }
  .creative-assistant-item .status:hover .icon {
    opacity: 1;
  }
  .creative-assistant-item .item-basic-info {
    display: flex;
    align-items: center;
  }
  .creative-assistant-item .item-basic-info .item-icon {
    width: 120px;
    height: 120px;
    position: relative;
    margin-right: 20px;
  }
  .creative-assistant-item .item-basic-info .item-icon .circle {
    width: 100%;
    height: 100%;
    border: 10px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease-in-out;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    margin: 15px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image:before {
    content: "\e973";
    font-family: "icomoon";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.05);
    font-size: 4em;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .icon {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 1.6em;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a0b27;
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image {
    width: 100%;
    height: 100px;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image img {
    width: 100%;
    border-radius: 50%;
    animation: fadeIn 0.5s linear;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.loading {
    background: #200F2F;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.loading:after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 38px;
    left: 38px;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.loading .icon {
    opacity: 0;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.failed .icon {
    opacity: 0;
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.failed:before, .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.failed:after {
    content: "";
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .creative-assistant-item .item-basic-info .item-icon .item-icon-image .item-image.failed:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .creative-assistant-item .item-basic-info .item-icon .asset-generation-error {
    position: absolute;
    top: 0;
    left: 60%;
    background: #3A264B;
    display: flex;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
    animation: fadeIn 0.2s linear;
  }
  .creative-assistant-item .item-basic-info .item-icon .asset-generation-error .icon {
    border-radius: 50%;
    position: relative;
    color: #EF313E;
  }
  .creative-assistant-item .item-basic-info .item-icon .asset-generation-error .msg {
    white-space: nowrap;
    padding-right: 20px;
    font-size: 0.8em;
    color: #EF313E;
    line-height: 40px;
    display: none;
    animation: fadeIn 0.2s linear;
  }
  .creative-assistant-item .item-basic-info .item-icon .asset-generation-error:hover .msg {
    display: block;
  }
  .creative-assistant-item .item-basic-info .item-icon:hover .circle {
    transform: scale(1.1);
  }
  .creative-assistant-item .item-basic-info .item-icon.selected {
    border-color: #4569c9;
  }
  .creative-assistant-item .item-basic-info .item-icon.selected .circle {
    transform: scale(1);
    border-color: rgba(69, 105, 201, 0.4);
  }
  .creative-assistant-item .item-basic-info .info .displayName {
    font-size: 1.2em;
    margin-bottom: 6px;
  }
  .creative-assistant-item .item-basic-info .info .description {
    color: rgba(255, 255, 255, 0.4);
  }
  .creative-assistant-item .item-basic-info .asset-preview-progress {
    font-size: 0.8em;
  }
  .creative-assistant-item .item-custom-data {
    display: flex;
    padding-top: 20px;
    overflow: hidden;
    height: 0;
    transition: height 0.5s ease-in-out;
  }
  .creative-assistant-item.active {
    background: #3A264B;
  }
  .creative-assistant-item.active .item-custom-data {
    height: 100px;
  }
  .creative-assistant-item.selected {
    opacity: 1;
  }
  .creative-assistant-item.selected .toggle-handle {
    background-color: #4569c9;
  }
  .creative-assistant-item.selected .toggle-handle:before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
    color: #fff;
    font-size: 0.8em;
    text-align: center;
  }
  .creative-assistant-item.publishing .publish {
    visibility: visible;
    opacity: 1;
  }
  .creative-assistant-item.published .status {
    display: block;
  }
  .creative-assistant-item.published .status:after {
    content: "✓";
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    background: #200F2F;
    text-align: center;
    font-size: 0.7em;
    width: 20px;
    line-height: 20px;
    color: #65FF60;
  }
  .creative-assistant-item.warn .status:after {
    content: "!";
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    background: #200F2F;
    text-align: center;
    font-size: 0.7em;
    width: 20px;
    line-height: 20px;
    color: #FFA011;
  }
  .creative-assistant-item.failed .status:after {
    content: "X";
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    background: #200F2F;
    text-align: center;
    font-size: 0.7em;
    width: 20px;
    line-height: 20px;
    color: #EF313E;
  }
  .creative-assistant-item .col {
    flex: 1 1 0px;
    margin-right: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
  }
  .creative-assistant-item .col:last-child {
    margin: 0;
  }
  .creative-assistant-item .col .key {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 5px;
  }
  .creative-assistant-item .col .val.hidden {
    display: none;
  }
  
  .creative-assistant-loader {
    width: 400px;
    height: 200px;
    background: #200F2F;
    border-radius: 10px;
    position: absolute;
    top: 40px;
    left: 40px;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .creative-assistant-loader.visible {
    opacity: 1;
  }
  .creative-assistant-loader .dots {
    width: 70px;
    height: 70px;
    animation: loadingLoop 2s ease-in-out infinite;
    position: absolute;
    top: 30px;
    left: 160px;
  }
  .creative-assistant-loader .dots .dot {
    width: 10px;
    height: 10px;
    background: #FF7440;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 10px #4569c9;
  }
  .creative-assistant-loader .dots .dot.dot-1 {
    top: 0;
    left: 30px;
    background: #FFA011;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .creative-assistant-loader .dots .dot.dot-2 {
    top: 30px;
    left: 0;
    background: #9C46FF;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .creative-assistant-loader .dots .dot.dot-3 {
    top: 30px;
    left: 30px;
    background: #3EFF85;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .creative-assistant-loader .dots .dot.dot-4 {
    top: 30px;
    right: 0;
    background: #3AFFEB;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .creative-assistant-loader .dots .dot.dot-5 {
    bottom: 0;
    left: 30px;
    background: #FF483A;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .creative-assistant-loader .dots .dot.dot-6 {
    top: 0;
    left: 0;
  }
  .creative-assistant-loader .message {
    position: absolute;
    top: 120px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    line-height: 20px;
  }
  .creative-assistant-loader .message strong {
    font-size: 1.2em;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.4);
  }
  .creative-assistant-loader .message span {
    font-size: 1.4em;
    color: #FFA011;
    font-weight: bold;
    vertical-align: middle;
  }
  
  @keyframes itemAppearAnim {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .creative-assistant-progress {
    opacity: 0.4;
    padding-left: 20px;
    pointer-events: none;
  }
  .creative-assistant-progress .creative-assistant-item {
    animation: itemAppearAnim 0.5s;
  }
  .creative-assistant-progress .creative-assistant-item .val, .creative-assistant-progress .creative-assistant-item .key {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    color: transparent;
  }
  
  .creative-assistant-asset-info {
    position: absolute;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100%;
    background: rgba(26, 11, 39, 0.9);
    transition: right 0.4s ease-in-out;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .creative-assistant-asset-info .header {
    padding: 20px;
  }
  .creative-assistant-asset-info .stable-diffusion-preview {
    height: 500px;
    margin: 20px;
    background: rgba(255, 255, 255, 0.05);
  }
  .creative-assistant-asset-info .actions {
    padding: 20px 10px;
  }
  .creative-assistant-asset-info.active {
    right: 0;
  }
  
  .instruction {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .instruction .icon {
    margin-right: 5px;
  }
  .instruction .info {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    text-align: left;
  }
  
  .stable-diffusion {
    /*.stable-diffusion-preview{
        flex-grow: 1;
        background:$color-background-dark;
        overflow: hidden;
        padding:20px;
  
        img{
            max-width: 100%;
            max-height: 100%;
        }
    }*/
  }
  .stable-diffusion .stable-diffusion-output {
    user-select: text;
    font-size: 0.7em;
  }
  .stable-diffusion .stable-diffusion-output p {
    margin-bottom: 5px;
  }
  .stable-diffusion .stable-diffusion-render {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    position: relative;
  }
  .stable-diffusion .stable-diffusion-toolbar {
    background: #1a0b27;
    border-radius: 20px 0 0 20px;
    padding: 20px 0;
  }
  .stable-diffusion .stable-diffusion-toolbar .action {
    cursor: pointer;
  }
  .stable-diffusion .stable-diffusion-toolbar .action .icon {
    opacity: 0.2;
    transition: opacity 0.2s;
  }
  .stable-diffusion .stable-diffusion-toolbar .action:hover .icon {
    opacity: 1;
  }
  .stable-diffusion .stable-diffusion-toolbar .action.loading {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
  }
  .stable-diffusion .stable-diffusion-toolbar .action.loading .icon {
    opacity: 0;
  }
  .stable-diffusion .stable-diffusion-toolbar .action.loading:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 8px;
    left: 8px;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .stable-diffusion .stable-diffusion-upload-url {
    position: absolute;
    top: 0;
    left: 40px;
    width: calc(100% - 40px);
    background: #3A264B;
    padding: 10px;
    color: rgba(255, 255, 255, 0.4);
    user-select: all;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .stable-diffusion .stable-diffusion-upload-url.visible {
    opacity: 1;
    visibility: visible;
  }
  .stable-diffusion .stable-diffusion-loader {
    display: none;
  }
  .stable-diffusion .stable-diffusion-loader .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .stable-diffusion .stable-diffusion-loader .loader:after {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    top: -42px;
    left: -42px;
    border: 2px solid transparent;
    border-left-color: #fff;
    border-right-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  
  .stable-diffusion-eta {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .stable-diffusion-eta .val {
    font-size: 4em;
    color: rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
  }
  .stable-diffusion-eta .label {
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
  }
  
  .stable-diffusion.loading .stable-diffusion-loader {
    display: block;
  }
  .stable-diffusion.loading .stable-diffusion-eta .val {
    color: #E6FF3A;
  }
  
  #asset-generation {
    min-height: 600px;
    display: flex;
  }
  #asset-generation h3 {
    font-size: 1.5em;
  }
  #asset-generation .asset-generation-input {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    margin-right: 20px;
    backdrop-filter: blur(5px);
  }
  #asset-generation .asset-generation-input .fieldset {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 0;
  }
  #asset-generation .asset-generation-input .fieldset:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  #asset-generation .asset-generation-main {
    flex-grow: 1;
  }
  #asset-generation .asset-generation-main .asset-generation-prompt {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
  }
  #asset-generation .asset-generation-main .asset-generation-prompt h3 {
    margin-bottom: 40px;
  }
  #asset-generation .asset-generation-main .asset-generation-prompt .form-field {
    max-width: none;
  }
  #asset-generation .asset-generation-main .asset-generation-prompt .form-field textarea {
    width: 100%;
  }
  #asset-generation .asset-generation-main .asset-generation-result {
    min-height: 300px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    display: flex;
    flex-wrap: wrap;
    backdrop-filter: blur(5px);
  }
  
  .stable-diffusion-preview {
    background: rgba(255, 255, 255, 0.05);
    height: 300px;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    position: relative;
    animation: fadeIn 0.5s linear;
  }
  .stable-diffusion-preview img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    animation: fadeIn 0.5s linear;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s;
    background: linear-gradient(180deg, transparent, #1a0b27);
    border-radius: 10px;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action-bar {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.3s ease-in-out;
    transform: scale(0);
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action .icon {
    width: 100%;
    height: 100%;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action .label {
    position: absolute;
    bottom: 60px;
    left: 50%;
    width: 150px;
    transform: translate(-50%, 0);
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
    font-size: 0.8em;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action:hover {
    background: #3A264B;
    border-color: #fff;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action:hover.stable-diffusion-asset-delete {
    border-color: #EF313E;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action:hover .label {
    opacity: 1;
    visibility: visible;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.loading {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.loading .label {
    opacity: 0;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.loading .icon {
    display: none;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.loading:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 13px;
    left: 13px;
    border: 2px solid transparent;
    border-left-color: #4569c9;
    border-right-color: #4569c9;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.done {
    cursor: default;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.done .label {
    opacity: 0;
  }
  .stable-diffusion-preview .stable-diffusion-asset-actions .action.done .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .stable-diffusion-preview:hover .stable-diffusion-asset-actions {
    opacity: 1;
  }
  .stable-diffusion-preview:hover .stable-diffusion-asset-actions .action {
    transform: scale(1);
  }
  .stable-diffusion-preview .creative-assistant-loader {
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .stable-diffusion-preview .creative-assistant-loader .dots {
    top: -35px;
    left: -35px;
  }
  .stable-diffusion-preview .creative-assistant-loader .message {
    top: 60px;
    white-space: nowrap;
    width: auto;
    transform: translate(-50%, 0);
  }
  .stable-diffusion-preview.loading .creative-assistant-loader {
    opacity: 1;
  }
  .stable-diffusion-preview.loading .stable-diffusion-asset-actions {
    opacity: 0;
  }
  
  .upload-box {
    height: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: border-color 0.2s;
  }
  .upload-box .tooltip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    text-align: center;
    width: 100%;
    z-index: 10;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .upload-box .tooltip p {
    margin-bottom: 20px;
  }
  .upload-box .preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .upload-box .preview img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    padding: 10px;
    border-radius: 20px;
    animation: fadeIn 0.5s linear;
  }
  .upload-box .clear {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .upload-box .clear:hover {
    background: #EF313E;
  }
  .upload-box.hover {
    border-color: #4569c9;
  }
  .upload-box.ready .tooltip {
    visibility: hidden;
    opacity: 0;
  }
  .upload-box.ready .clear {
    visibility: visible;
    opacity: 1;
  }
  
  .asset-generation-profile {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    transition: background 0.2s;
    border-radius: 20px;
    cursor: pointer;
    position: relative;
  }
  .asset-generation-profile .model-preview {
    margin-right: 10px;
    width: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    min-height: 40px;
    padding: 4px;
  }
  .asset-generation-profile .model-preview img {
    width: 100%;
    border-radius: 4px;
    display: block;
    animation: fadeIn 0.5s linear;
  }
  .asset-generation-profile .preview {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-right: 10px;
    padding: 10px;
  }
  .asset-generation-profile .preview .icon {
    width: 60px;
    height: 60px;
  }
  .asset-generation-profile .preview img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 6px;
    animation: fadeIn 0.5s linear;
  }
  .asset-generation-profile .info .title {
    margin-bottom: 4px;
  }
  .asset-generation-profile .info .description {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .asset-generation-profile .info .description span {
    display: inline-block;
    background: rgba(32, 15, 47, 0.6);
    padding: 0 10px 0 4px;
    line-height: 20px;
    margin: 2px;
    vertical-align: middle;
    font-size: 0.9em;
    border-radius: 10px;
    transition: background 0.2s;
    color: #4569c9;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  .asset-generation-profile .info .description span:before {
    content: "@";
  }
  .asset-generation-profile .asset-generation-profile-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  .asset-generation-profile .asset-generation-profile-delete .icon {
    width: 100%;
    height: 100%;
    font-size: 1.2em;
  }
  .asset-generation-profile .asset-generation-profile-delete:hover {
    background: #EF313E;
  }
  .asset-generation-profile:hover {
    background: #200F2F;
  }
  .asset-generation-profile.empty .asset-generation-profile-delete {
    display: none;
  }
  
  .asset-generation-profile-config {
    display: flex;
    text-align: left;
  }
  .asset-generation-profile-config label {
    padding-left: 14px !important;
  }
  .asset-generation-profile-config .left {
    width: 360px;
    flex-grow: 0;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    margin-right: 20px;
  }
  .asset-generation-profile-config .right {
    flex-grow: 1;
  }
  
  .asset-generation-config {
    display: flex;
  }
  .asset-generation-config .asset-generation-config-col {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-right: 20px;
    flex-grow: 1;
    width: 50%;
    backdrop-filter: blur(5px);
  }
  .asset-generation-config .asset-generation-config-col:last-child {
    margin: 0;
  }
  .asset-generation-config .asset-generation-config-col h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
  }
  .asset-generation-config .asset-generation-config-col .subtitle {
    font-size: 1.2em;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .asset-generation-config .asset-generation-config-col .btn-add {
    margin-top: 20px;
  }
  .asset-generation-config .model {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin-bottom: 5px;
    position: relative;
  }
  .asset-generation-config .model .thumbnail {
    width: 60px;
    min-height: 60px;
    margin-right: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }
  .asset-generation-config .model .thumbnail img {
    width: 100%;
    border-radius: 10px;
    display: block;
    box-shadow: 0 0 20px rgba(26, 11, 39, 0.8);
  }
  .asset-generation-config .model .description {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .asset-generation-config .asset-generation-config-delete-model {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    width: 30px;
    height: 30px;
  }
  .asset-generation-config .asset-generation-config-delete-model .icon {
    width: 100%;
    height: 100%;
    font-size: 1.2em;
  }
  .asset-generation-config .asset-generation-config-delete-model:hover {
    background: #EF313E;
  }
  
  /* Responsive stuff */
  .mobile-visible {
    display: none !important;
  }
  
  @media screen and (max-width: 2200px) {
    .box-grid .col.col-md {
      width: 460px;
    }
    .box-grid .col.col-placeholder {
      display: none;
    }
  }
  @media screen and (max-width: 1860px) {
    html, body {
      font-size: 18px;
    }
    #main-nav, #console-nav {
      flex-basis: 300px;
    }
    .box-grid .col.col-md {
      width: 350px;
    }
    .box-grid .col.col-break {
      width: 100%;
    }
    .blueprint-editor {
      zoom: 0.8;
    }
  }
  @media screen and (max-width: 1600px) {
    html, body {
      font-size: 16px;
    }
    #main-nav, #console-nav {
      flex-basis: 260px;
    }
    #main-nav .app-info .app-thumbnail {
      width: 60px;
      height: 60px;
    }
    header .home {
      width: 250px;
    }
    .box-list:not(.list).sm .box {
      height: 260px;
    }
    .box-list:not(.list).sm .box .graph {
      width: 140px;
      height: 140px;
    }
    .box-list:not(.list).sm .box .graph .circle {
      border-width: 14px;
    }
    .box-list:not(.list).sm .box .graph svg {
      width: 142px;
      height: 142px;
    }
    .search-field input {
      width: 100%;
    }
  }
  @media screen and (max-width: 900px) {
    #breadcrumb .version {
      display: none;
    }
  }
  @media screen and (max-width: 800px) {
    .mobile-visible {
      display: block !important;
    }
    .mobile-hidden {
      display: none !important;
    }
    html, body {
      font-size: 14px;
    }
    .mobile-menu.hidden {
      display: none;
    }
    #main-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
      border-right: 40px solid transparent;
      transform: translate(-100%, 0);
      transition: border 0.5s;
    }
    #main-nav nav {
      background: #200F2F;
    }
    #main-nav .mobile-nav {
      padding: 15px;
      background: #3A264B;
    }
    #main-nav.mobile-active {
      border-right: 40px solid rgba(0, 0, 0, 0.2);
    }
    header .mobile-menu {
      display: inline-block;
      width: 60px;
      height: 60px;
      line-height: 60px;
      vertical-align: top;
      padding: 0;
    }
    header .mobile-menu .icon {
      width: 100%;
      height: 100%;
      font-size: 2.4em;
    }
    header .home {
      display: none;
    }
    #breadcrumb {
      margin: 3px 0;
      padding: 0 10px;
      line-height: 50px;
    }
    #breadcrumb .studio {
      display: none;
    }
    #breadcrumb .app-icon {
      height: 54px;
    }
    #breadcrumb .version {
      display: none;
    }
    .bar .pull-right {
      float: none;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .bar .search-field {
      width: 100%;
      margin: 10px 0;
    }
    .bar .btn-tab {
      margin-left: 5px;
    }
    .bar button {
      flex-grow: 1;
      margin: 0;
      text-align: left;
    }
    .bar.bar-bookmark {
      flex-wrap: wrap;
    }
    .bar.bar-bookmark .label {
      display: block;
      width: 100%;
    }
    .bar.bar-bookmark ul {
      padding: 0;
    }
    .bar.bar-bookmark ul li {
      margin-bottom: 10px;
    }
    #main-content {
      padding: 0;
    }
    .box-list .box {
      width: 100% !important;
      max-width: none !important;
    }
    .select {
      min-width: auto;
      width: 100%;
    }
    .box input {
      width: 100%;
    }
    .box-grid .col {
      width: 100% !important;
      min-width: auto !important;
    }
    .box-grid .row {
      flex-wrap: wrap;
      height: auto !important;
      margin-bottom: 10px;
    }
    .box-grid .row .box {
      width: 100%;
    }
    #overlay #overlay-container {
      width: 90%;
    }
    #main-content > .ajax-loader, #main-section > .ajax-loader {
      width: 80px;
      height: 80px;
    }
    .login-box {
      width: 80%;
    }
    .bar.bar-wizard {
      display: flex;
      height: auto;
    }
    .bar.bar-wizard .step {
      width: 80px;
      height: 110px;
    }
    .bar.bar-wizard .step .circle {
      width: 80px;
      height: 80px;
    }
    .bar.bar-wizard .step.active:after {
      width: 80px;
      height: 80px;
    }
  }
  .module-checkbox {
    --height: 40px;
    --spacer-width: 0px;
    --padding: 10px 15px;
    --slider-padding: 5px;
    --slider-radius: calc(var(--height) - var(--slider-padding) * 2);
    --slider-color: #fff;
    --unchecked-color: rgba(255, 255, 255, 0.1);
    --checker-color: #9C46FF;
    --checked-label-color: #fff;
    --unchecked-label-color: #fff;
  }
  .module-checkbox .fake-checkbox {
    position: relative;
    background: var(--unchecked-color);
    height: var(--height);
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    padding: var(--padding);
    min-width: calc(var(--height) * 2);
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .module-checkbox .fake-checkbox .spacer {
    width: var(--spacer-width);
  }
  .module-checkbox .fake-checkbox .unchecked {
    margin-left: auto;
    color: var(--unchecked-label-color);
  }
  .module-checkbox .fake-checkbox .checked {
    opacity: 0;
    color: var(--checked-label-color);
  }
  .module-checkbox .fake-checkbox .checked, .module-checkbox .fake-checkbox .unchecked {
    transition: opacity 0.3s ease;
  }
  .module-checkbox .fake-checkbox .slider {
    position: absolute;
    top: var(--slider-padding);
    left: var(--slider-padding);
    width: var(--slider-radius);
    height: var(--slider-radius);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: left 0.3s ease, right 0.3s ease;
  }
  .module-checkbox input {
    display: none;
  }
  .module-checkbox input:checked + .fake-checkbox {
    background: var(--checker-color);
  }
  .module-checkbox input:checked + .fake-checkbox .checked {
    opacity: 1;
  }
  .module-checkbox input:checked + .fake-checkbox .unchecked {
    opacity: 0;
  }
  .module-checkbox input:checked + .fake-checkbox .slider {
    left: calc(100% - var(--slider-radius) - var(--slider-padding));
  }
  
  [class^=button] {
    --button-background-color: #9C46FF;
    --button-background-color-alt: #7d38cc;
    --button-text-color: #fff;
    position: relative;
    align-self: center;
    cursor: pointer;
    text-align: center;
    background: var(--button-background-color);
    border: none;
    color: var(--color-text);
    font-size: 14px;
    text-decoration: none;
    height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    padding: 2px 30px 0;
    transition: background-color 0.3s ease;
  }
  [class^=button]:hover, [class^=button]:active, [class^=button]:focus {
    background: var(--button-background-color-alt);
    color: var(--button-text-color);
    text-decoration: none;
  }
  [disabled][class^=button] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .trash-button {
    background: rgba(255, 255, 255, 0.05);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .trash-button .icon {
    transition: color 0.3s;
    font-size: 1.2em;
  }
  .trash-button:hover {
    background: #EF313E;
    cursor: pointer;
  }
  .trash-button:hover .icon {
    color: #fff;
  }
  
  .module-form-field {
    margin-bottom: 1em;
  }
  .module-form-field > label {
    display: inline-block;
    margin-bottom: 0.4em;
    opacity: 0.8;
  }
  
  .react-basic-form {
    display: flex;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
  }
  .react-basic-form h2 {
    text-transform: none;
  }
  .react-basic-form + .react-basic-form {
    margin-top: 20px;
  }
  .react-basic-form .form-section {
    flex: 1 1 auto;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 30px 40px;
  }
  .react-basic-form .form-subsection {
    flex: 1 1 auto;
  }
  .react-basic-form .form-supersection {
    display: flex;
    gap: 10px;
    flex: 0 0 100%;
    background: none;
    padding: 0;
  }
  .react-basic-form select {
    width: auto;
    min-width: 250px;
  }
  .react-basic-form .editable-container {
    position: relative;
    z-index: 10;
  }
  .react-basic-form .editable-container .editable-text__highlighter .tag-highlight {
    background: #4569c9;
    border-radius: 8px;
    padding: 2px 0px;
    margin: -2px 0px;
  }
  .react-basic-form .editable-container .editable-text__suggestions {
    margin-top: 40px !important;
    background: #200F2F !important;
    border-radius: 15px;
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 150px;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  }
  .react-basic-form .editable-container .editable-text__suggestions__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .react-basic-form .editable-container .suggestion {
    color: #fff;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
  }
  .react-basic-form .editable-container .suggestion.focused {
    background: #4569c9;
  }
  .react-basic-form .editable-container .editable-text {
    color: #fff;
    line-height: 38px;
    min-height: 38px;
    background: none;
    padding: 0 20px;
    outline: none;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    transition: border-color 0.2s;
  }
  .react-basic-form .editable-container .editable-text[placeholder]:empty:before {
    content: attr(placeholder);
    color: rgba(255, 255, 255, 0.5);
  }
  .react-basic-form .editable-container .editable-text .tag {
    font-size: 11px;
    position: relative;
    top: -1px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    line-height: 1.2em;
  }
  .react-basic-form .editable-container .clear {
    display: none;
    background: #EF313E;
    width: 12px;
    height: 12px;
    font-size: 8px;
    line-height: 12px;
    border-radius: 6px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    cursor: pointer;
  }
  .react-basic-form .editable-container :hover .clear {
    display: block;
  }
  .react-basic-form .editable-container.can-drop .editable-text {
    box-shadow: 0 0 8px #65FF60;
  }
  
  .record-list_box-view {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 0;
  }
  
  .record-list {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .record-list-title {
    margin-bottom: 0 !important;
  }
  
  .record-list_list-view .record-list-headers,
  .record-list_list-view .record-list-item {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(var(--list-columns), 1fr) 100px;
    align-items: center;
  }
  .record-list_list-view .record-list-headers {
    background: #170B22;
    padding: 20px;
  }
  .record-list_list-view .record-list-item {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    cursor: pointer;
    margin: 10px 0;
    transition: background-color 0.3s, color 0.3s;
    color: rgba(255, 255, 255, 0.4);
  }
  .record-list_list-view .record-list-item .hidden-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .record-list_list-view .record-list-item:hover {
    background: #3A264B;
    color: #fff;
  }
  .record-list_list-view .record-list-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
  }
  .record-list_list-view .record-list-item-actions .btn-tab {
    margin-left: 0;
  }
  
  .react-box-component {
    position: relative;
    overflow: hidden;
    transition: border-width 0.2s;
    width: 100%;
    padding-top: 100%;
    transition: background-color 0.3s ease;
    backdrop-filter: blur(5px);
  }
  .react-box-component .front, .react-box-component .side {
    background: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
  }
  .react-box-component .side {
    transform: translate(100%, 0);
  }
  .react-box-component .trash-button {
    position: absolute;
    bottom: 6px;
    left: 6px;
  }
  .react-box-component .react-custom-algo {
    position: absolute;
    bottom: 6px;
    right: 6px;
  }
  .react-box-component .edit {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: #4569c9;
    border-radius: 50%;
    transition: background 0.2s;
  }
  .react-box-component .edit:hover {
    background: #8f53d9;
    cursor: pointer;
  }
  .react-box-component.edit .front {
    transform: translate(-100%, 0);
  }
  .react-box-component.edit .side {
    transform: translate(0, 0);
  }
  .react-box-component.top {
    z-index: 99;
  }
  .react-box-component .header {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.8em;
  }
  .react-box-component .footer {
    padding: 0 10px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.1;
    font-size: 0.8em;
  }
  .react-box-component .footer:before {
    content: "- ";
  }
  .react-box-component .footer:after {
    content: " -";
  }
  .react-box-component .inner {
    padding: 20px;
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .react-box-component p {
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
  }
  .react-box-component .padding {
    padding: 20px;
  }
  .react-box-component .thumbnail {
    float: left;
    width: 110px;
    height: 110px;
    background: #8f53d9;
    margin-right: 10px;
  }
  .react-box-component input, .react-box-component textarea, .react-box-component select, .react-box-component .info-field, .react-box-component .select {
    width: 100%;
    margin-bottom: 10px;
    font-size: 0.8em;
  }
  .react-box-component input:last-child, .react-box-component textarea:last-child, .react-box-component select:last-child, .react-box-component .info-field:last-child, .react-box-component .select:last-child {
    margin: 0;
  }
  .react-box-component textarea.single-row {
    height: 40px;
    overflow: hidden;
  }
  .react-box-component textarea.single-row:focus {
    height: 150px;
    overflow: auto;
  }
  .react-box-component .graph {
    width: 61.6666666667%;
    height: 61.6666666667%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .react-box-component .graph .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 20px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .react-box-component .graph .app-icon {
    border-radius: 50%;
    overflow: hidden;
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .react-box-component .graph .app-icon img {
    max-width: 100%;
  }
  .react-box-component .graph .icon, .react-box-component .graph .icon-product, .react-box-component .graph .currency-code, .react-box-component .graph .app-version {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    font-size: 6em;
  }
  .react-box-component .graph .currency-code, .react-box-component .graph .app-version {
    font-size: 3em;
    text-align: center;
    height: auto;
  }
  .react-box-component .graph .app-version {
    font-size: 2.2em;
  }
  .react-box-component .graph input {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
  }
  .react-box-component .graph.rule .icon {
    border-radius: 50%;
    width: 60%;
    height: 60%;
    font-size: 4em;
  }
  .react-box-component a.full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: background 0.5s;
  }
  .react-box-component a.full:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  .react-box-component a.setting {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 34px;
    height: 34px;
  }
  .react-box-component.titled .front .inner {
    padding-top: 50px;
  }
  .react-box-component.titled .front .inner .graph {
    margin-top: 10px;
  }
  .react-box-component.loading .graph:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    animation: loadingLoop 0.5s ease-in-out infinite;
  }
  .react-box-component.disabled .icon {
    color: rgba(255, 255, 255, 0.05);
  }
  .react-box-component.disabled .icon-product {
    opacity: 0.2;
    filter: grayscale(1);
  }
  .react-box-component.empty {
    opacity: 0.2;
  }
  .react-box-component:hover {
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
  }
  .react-box-component:hover .graph .circle {
    transform: translate(-50%, -50%) scale(1.1);
  }
  
  .react-custom-algo {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background 0.2s;
  }
  .react-custom-algo .icon {
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
  }
  .react-custom-algo.active .icon {
    color: #E6FF3A;
  }
  .react-custom-algo:hover {
    background: #4569c9;
  }
  .react-custom-algo:hover .icon {
    color: #fff;
  }
  
  .box .react-custom-algo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: none;
  }
  
  .react-custom-algorithm-container {
    position: fixed;
  }
  
  .react-custom-algo-enabled .react-custom-algo, .react-custom-algo-enabled .box .react-custom-algo {
    display: block;
  }
  
  .paging {
    margin: 10px 0;
  }
  .paging .page {
    display: inline-block;
    margin: 0 5px;
    padding: 5px 10px;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .paging .page:hover, .paging .page.current {
    background: #4569c9;
    color: #fff;
  }
  
  .dnd-provided-form {
    width: 100%;
  }
  .dnd-provided-form .rewards-section {
    flex: 0 0 100%;
  }
  
  .dnd-provider {
    position: fixed;
    top: var(--menu-height);
    right: 0;
    height: calc(100vh - var(--menu-height) - var(--footer-height));
    background: #200F2F;
    padding: 40px;
    width: var(--dnd-provider-width);
    z-index: 10;
    overflow: auto;
  }
  .dnd-provider section {
    margin: 0 0 30px;
  }
  .dnd-provider select {
    width: 100%;
  }
  
  .rewards-panel {
    flex: 0 0 100%;
  }
  .rewards-panel h2 {
    margin-bottom: 0 !important;
  }
  
  .quiz-app {
    /*.challenge-form {
        position: relative;
  
        .challenge-graphs {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
  
        .fixed-zone {
            padding-bottom: 20px;
        }
  
        .entities-container {
            .inner {
                width: 100%;
  
                .layout-view-list {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 10px;
                }
            }
        }
    }/**/
  }
  .quiz-app .main-wrapper {
    min-height: 100%;
  }
  .quiz-app section {
    margin: 0 0 20px 0;
  }
  .quiz-app h3 {
    margin-bottom: 20px;
    background: none;
    font-size: 1.5em;
  }
  .quiz-app .entity-schema-form {
    display: grid;
    grid-template-areas: "a a" "b c";
  }
  .quiz-app .small-edit {
    display: inline-block;
    vertical-align: top;
    background: rgba(255, 255, 255, 0.05);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    margin-top: 5px;
  }
  .quiz-app .small-edit .icon {
    width: 30px;
    height: 30px;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
  }
  .quiz-app .small-edit:hover .icon {
    opacity: 1;
    color: #4569c9;
  }
  .quiz-app .actionable-input {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  .quiz-app .actionable-input-content {
    flex: 1 1 100%;
  }
  .quiz-app .actionable-input-content textarea {
    overflow: hidden;
    min-height: 38px;
    min-width: 100px;
  }
  .quiz-app .actionable-input-content .spoofed-textarea,
  .quiz-app .actionable-input-content textarea {
    border-radius: 20px;
    min-width: 100px;
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    padding: 0 20px;
    line-height: 38px;
    min-height: 38px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.03);
  }
  .quiz-app .actionable-input.type-image .actionable-input-content .spoofed-textarea {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .quiz-app .actionable-input-functions {
    opacity: 0;
    justify-content: right;
    display: flex;
  }
  .quiz-app .actionable-input-functions-visible {
    opacity: 1;
  }
  .quiz-app .actionable-input-functions {
    min-width: 60px;
    margin-right: 10px;
  }
  .quiz-app .actionable-input:hover .actionable-input-functions {
    opacity: 1;
  }
  .quiz-app .dynamic-label-preview {
    margin: 10px;
  }
  .quiz-app .multiple-forms-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
  }
  .quiz-app .sub-form .sub-form-list {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .quiz-app .sub-form .sub-form-record {
    margin-bottom: 20px;
    display: flex;
  }
  .quiz-app .sub-form .sub-form-record .content {
    flex-grow: 1;
  }
  .quiz-app .sub-form .sub-form-record .actions {
    width: 40px;
  }
  .quiz-app .sub-form .sub-form-record .sub-form-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }
  .quiz-app .sub-form .sub-form-record .sub-form-list .sub-form-record {
    background: #200F2F;
    border: 1px #3A264B solid;
    padding: 10px;
    border-radius: 10px;
    flex: 0 1 calc(50% - 5px);
    margin: 0;
  }
  .quiz-app .question {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    margin-bottom: 20px;
  }
  .quiz-app .question:last-child {
    margin-bottom: 0;
  }
  .quiz-app .variables-form {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
  }
  .quiz-app .variables-form .label {
    margin-top: 1em;
    opacity: 0.6;
    text-align: left;
    font-size: 80%;
  }
  .quiz-app .color-chip {
    border-radius: 4px;
    padding: 2px 6px;
    display: inline-block;
    margin-right: 10px;
    background: var(--color);
  }
  .quiz-app .entity-import-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .quiz-app .entity-import-card {
    border: 1px solid #3A264B;
    border-radius: 10px;
    padding: 10px;
    background: #200F2F;
    cursor: pointer;
    transition: background 0.2s;
  }
  .quiz-app .entity-import-card:hover {
    background: #3A264B;
  }
  .quiz-app .entity-import-card.error {
    background: #EF313E;
  }
  .quiz-app .entity-import-card.warning {
    background: #FFA011;
  }
  .quiz-app .entity-schema h1, .quiz-app .entity-schema h2, .quiz-app .entity-schema h3, .quiz-app .entity-schema h4, .quiz-app .entity-schema h5, .quiz-app .entity-schema h6 {
    text-transform: none;
  }
  .quiz-app .entity-schema .field-display-name {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
    margin-bottom: 5px;
    padding-left: 14px;
  }
  .quiz-app .entity-schema .entity-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .quiz-app .entity-schema .tags-list {
    flex-direction: column;
    align-items: flex-start;
  }
  .quiz-app .entity-schema .tag.dynamic .label {
    background-color: #8f53d9;
  }
  .quiz-app .entity-schema .tag.has-uses .label {
    box-shadow: 0 0 8px white;
  }
  .quiz-app .entity-schema h4 {
    border-bottom: 1px solid #3A264B;
  }
  .quiz-app img {
    max-width: 100%;
  }
  .quiz-app .instantiate .result-message {
    margin: 20px;
  }
  .quiz-app .instantiate .result-message.error {
    color: #EF313E;
    font-weight: bold;
  }
  .quiz-app .entity-form {
    display: block;
  }
  .quiz-app .entity-form .subforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .quiz-app .schema-display {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 30px;
  }
  .quiz-app .schema-display-header, .quiz-app .schema-display-field {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 130px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    align-items: center;
  }
  .quiz-app .schema-display-header {
    background: #200f2f;
    padding: 20px;
  }
  .quiz-app .schema-display-field {
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
  }
  .quiz-app .schema-display-field:nth-child(odd) {
    background: #200f2f;
  }
  .quiz-app .schema-display-field-cell.action-cell {
    display: flex;
    gap: 10px;
  }
  .quiz-app .schema-display-field-cell.action-cell .btn {
    margin: 0;
  }
  .quiz-app .challenge-page {
    /*.question-modal {
        position: fixed;
            top: 0;
            left: 0;
  
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        padding: 100px 0 30px;
        z-index: 5;
  
        .question-modal-inner {
            background: $color-background-light;
            text-align: center;
            flex: 1 1 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 60px;
            height: calc(100% - 110px);
            overflow-x: hidden;
            overflow-y: auto;
  
            &.inner-form {
                padding: 0;
            }
  
            .templates {
                // variables replaced in question template's cards
                .tag {
                    padding:0;
                    margin: 0;
                    font-size: 11px;
                    position: relative;
                    top: -1px;
                    white-space: nowrap;
                    line-height: 1.2em;
                    font-weight: bold;
                    .label {
                        background: $color-secondary;
                    }
                }
            }	
  
        }
  
        .done {
            flex: 0 0 auto;
            padding: 30px;
            background: $color-background-dark;
            display: flex;
            justify-content: center;
            align-items: center;
  
            .button {
                background: $color-tertiary;
                padding: 15px 30px;
                border-radius: 9999px;
                cursor: pointer;
                text-align: center;
                min-width: 200px;
                transition: background 0.3s ease;
  
                &:hover {
                    background: mix($color-palette-3, #000, 90%);
                }
            }
        }
  
        .templates {
            display: grid;
            gap: 30px;
            grid-template-columns: repeat(4, 250px);
        }
  
        .title {
            font-size: 40px;
            margin-bottom: 0.25em;
        }
  
        .description {
            margin-bottom: 3em;
        }
  
        .question-template-card {
            background: $color-background-dark;
            border-radius: 30px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            cursor: pointer;
  
            .icon {
                --dim: 120px;
                color: white;
                opacity: 0.3;
                font-size: var(--dim);
                width: var(--dim);
                height: var(--dim);
            }
  
            .question-template-name {
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 1em;
            }
        }
    }/**/
  }
  .quiz-app .challenge-page .rewards-panel {
    margin-top: 30px;
  }
  .quiz-app .challenge-page .description {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  .quiz-app .entities-list .btn-import {
    margin-right: 10px;
  }
  .quiz-app .entity .entity-raw-data-col .form-field {
    width: 100%;
    max-width: 100%;
  }
  .quiz-app .entity .entity-raw-data-col .entity-raw-data {
    width: 100%;
    height: 400px;
    font-family: monospace;
  }
  .quiz-app .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .quiz-app .tag {
    display: inline-block;
    font-size: 16px;
    padding: 0 14px 0 0;
    margin: 0 8px 0 0;
    flex-grow: 0;
    cursor: grab;
    position: relative;
    --icon-size: 24px;
  }
  .quiz-app .tag .icon {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    font-size: var(--icon-size);
  }
  .quiz-app .tag .label {
    position: relative;
    background: #1a0b27;
    padding: 4px 12px 3px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
  }
  .quiz-app .tag.entity-var .label {
    background: #4569c9;
  }
  .quiz-app .tag.event-var .label {
    background: #8f53d9;
  }
  .quiz-app .tag.user-var .label {
    background: rgba(255, 255, 255, 0.4);
  }
  .quiz-app .tag[contenteditable=false] {
    --icon-size: 0px;
    margin: 0;
    padding: 0;
  }
  .quiz-app .tag[contenteditable=false] .label {
    padding: 4px 8px;
    margin: 0;
  }
  .quiz-app .tag .delete {
    display: none;
    background: #EF313E;
    width: 12px;
    height: 12px;
    font-size: 8px;
    line-height: 12px;
    border-radius: 6px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    cursor: pointer;
  }
  .quiz-app .tag:hover .delete {
    display: block;
  }
  .quiz-app .tag.tag-dragging {
    opacity: 0.5;
    cursor: grabbing;
    padding: 0 10px;
  }
  .quiz-app .tag.tag-with-icon .label {
    padding: 4px 12px 3px calc(var(--icon-size) + 8px);
    background: #1a0b27;
  }
  .quiz-app .persist-module {
    position: fixed;
    bottom: 40px;
    right: 25px;
    display: flex;
    flex-direction: column;
    z-index: 100;
  }
  .quiz-app .persist-module .persist {
    padding: 15px 20px;
    background: #100818;
    display: flex;
    gap: 0.4em;
    align-items: center;
  }
  .quiz-app .persist-module .persist .type {
    color: #4569c9;
  }
  .quiz-app .persist-module .persist:after {
    content: "";
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    filter: drop-shadow(0 0 5px #4569c9);
    animation: loadingLoop 1s ease-in-out infinite;
  }
  .quiz-app .persist-module .persist.appear, .quiz-app .persist-module .persist.enter {
    opacity: 0;
    transform: translate(0, 50%);
  }
  .quiz-app .persist-module .persist.appear-active, .quiz-app .persist-module .persist.enter-active {
    opacity: 1;
    transform: translate(0, 0%);
    transition: transform 0.6s ease, opacity 0.6s ease;
  }
  .quiz-app .persist-module .persist.exit {
    opacity: 1;
    transform: translate(0, 0%);
  }
  .quiz-app .persist-module .persist.exit-active {
    opacity: 0;
    transform: translate(0, 50%);
    transition: transform 0.6s ease, opacity 0.6s ease;
  }
  .quiz-app .predictions-dashboard {
    position: relative;
    min-height: 100%;
  }
  .quiz-app .predictions-dashboard .row {
    display: flex;
    gap: 20px;
    width: 100%;
    padding: 0 10px;
  }
  .quiz-app .predictions-dashboard .col {
    flex: 1 1 100%;
  }
  .quiz-app .predictions-dashboard .left-col,
  .quiz-app .predictions-dashboard .right-col {
    flex: 0 0 50%;
  }
  .quiz-app .predictions-dashboard .header {
    margin-bottom: 30px;
  }
  .quiz-app .predictions-dashboard .quick-links {
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
  }
  .quiz-app .predictions-dashboard .quick-links .quick-links-item {
    flex: 1 1 50%;
  }
  .quiz-app .predictions-dashboard .challenge-instantiator-section {
    display: flex;
    flex-direction: column;
  }
  .quiz-app .predictions-dashboard .challenge-instantiator-section .form {
    flex: 1 1 100%;
  }
  .quiz-app .predictions-dashboard .dummy-chart {
    color: #fff;
    margin-top: 30px;
  }
  .quiz-app .predictions-dashboard .dummy-chart .chart-container {
    height: 300px;
    position: relative;
  }
  .quiz-app .predictions-dashboard .dummy-chart .chart-container .ReactChart {
    position: absolute;
    top: 0;
    left: 0;
  }
  .quiz-app .predictions-dashboard .latest-instances-list {
    margin-top: 30px;
  }
  .quiz-app .predictions-dashboard .instance-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .quiz-app .predictions-dashboard .instance-list-header, .quiz-app .predictions-dashboard .instance-list-item {
    display: grid;
    grid-template-columns: 300px 1fr 1fr 1fr 130px;
    gap: 10px;
    align-items: center;
  }
  .quiz-app .predictions-dashboard .instance-list-header {
    background: #200F2F;
    padding: 20px;
  }
  .quiz-app .predictions-dashboard .instance-list-header .instance-list-item-name {
    padding-left: 50px;
  }
  .quiz-app .predictions-dashboard .instance-list-item {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    color: rgba(255, 255, 255, 0.4);
  }
  .quiz-app .predictions-dashboard .instance-list-item .instance-list-item-name .icon {
    margin-right: 10px;
  }
  .quiz-app .predictions-dashboard .instance-list-item .hidden-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .quiz-app .predictions-dashboard .instance-list-item:hover {
    background: #3A264B;
    color: #fff;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 400px;
    height: 100vh;
    background: #3A264B;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 10;
    box-shadow: 0 0 10px 0 rgba(26, 11, 39, 0.8);
    transform: translate(110%, 0);
    transition: transform 0.3s;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel a {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
    padding: 10px;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel a:hover {
    color: #fff;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel .btn-tab {
    margin-right: 10px;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel-header {
    font-size: 24px;
    margin: 30px 40px 40px;
  }
  .quiz-app .predictions-dashboard .advanced-config-panel.opened {
    transform: translate(0, 0);
  }
  .quiz-app .predictions-dashboard .overlay {
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: var(--content-height);
    z-index: 9;
    background: rgba(26, 11, 39, 0.8);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .quiz-app .predictions-dashboard .overlay.active {
    pointer-events: all;
    visibility: visible;
    opacity: 0.8;
  }
  .quiz-app .predictions-instance-list .instance-list-header .form-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
  }
  .quiz-app .predictions-instance-list .instance-list-header .form-field {
    margin-bottom: 0;
  }
  .quiz-app .predictions-instance-list .instance-list-header select {
    width: 100%;
  }
  
  .quiz-form .fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
  }
  .quiz-form .fields-grid .form-field {
    margin-bottom: 0;
  }
  .quiz-form .fields-grid input, .quiz-form .fields-grid select {
    width: 100%;
    max-width: 100%;
  }
  .quiz-form .disclaimers {
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.4);
  }
  .quiz-form .question-section {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.05);
  }
  .quiz-form .question-section h3 {
    flex: 0 0 100%;
  }
  .quiz-form .question-section .form-field {
    flex: 1 1 100%;
    max-width: none;
  }
  .quiz-form .choices-section {
    margin: 0 0 30px;
  }
  .quiz-form .predefined-choice-form {
    position: relative;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .quiz-form .predefined-choice-form input {
    width: 100%;
  }
  .quiz-form .predefined-choice-form .choice-actions {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .quiz-form .predefined-choice-form .choice-rules {
    margin: 20px 0;
    flex: 0 0 100%;
  }
  .quiz-form .predefined-choice-form .choice-rules select {
    width: 100%;
  }
  .quiz-form .predefined-choice-form:last-child {
    margin-bottom: 0;
  }
  .quiz-form .question-form {
    background: rgba(255, 255, 255, 0.05);
    padding: 80px 30px 40px;
    position: relative;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .quiz-form .question-form .question-form-actions {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    gap: 10px;
  }
  .quiz-form .question-form .minus {
    background: #fff;
    width: 10px;
    height: 3px;
  }
  .quiz-form .question-form .question-section {
    flex: 1 1 auto;
  }
  .quiz-form .question-form .choices-section {
    margin-top: 20px;
    flex: 0 0 100%;
  }
  .quiz-form .question-form .choices-section .predefined-choice-form {
    gap: 30px;
  }
  .quiz-form .question-form .choices-section .rewards-section {
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    flex: 0 0 60%;
  }
  .quiz-form .question-form .choices-section .rewards-panel .record-list_box-view {
    grid-template-columns: repeat(3, 1fr);
  }
  .quiz-form .question-form .toggle-question-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quiz-form .question-form .toggle-question-btn:hover {
    background: #4569c9;
  }
  .quiz-form .question-form.closed-question-form {
    padding: 20px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s;
  }
  .quiz-form .question-form.closed-question-form .question-form-actions {
    position: relative;
    top: auto;
    right: auto;
  }
  .quiz-form .question-form.closed-question-form h3 {
    margin-bottom: 0 !important;
  }
  .quiz-form .question-form.closed-question-form:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .choice-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    min-width: 300px;
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 15px;
  }
  .choice-card .btn-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0;
  }
  .choice-card .btn-remove .icon {
    margin: 5px;
  }
  .choice-card .entity-schema {
    border: none;
    margin: 0;
    padding: 0;
  }
  
  .question-custom-data .field,
  .choice-card .field {
    margin-bottom: 0.75em;
  }
  .question-custom-data h4,
  .choice-card h4 {
    font-size: 1.2em;
    margin-bottom: 0.75em;
    padding-right: 40px;
  }
  .question-custom-data h4:last-child,
  .choice-card h4:last-child {
    margin-bottom: 0;
  }
  .question-custom-data .data-img + h4,
  .choice-card .data-img + h4 {
    padding-right: 0;
  }
  .question-custom-data .field-display-name,
  .choice-card .field-display-name {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8em;
    margin-bottom: 0.5em;
  }
  .question-custom-data .data-img,
  .choice-card .data-img {
    display: block;
    max-width: 240px;
    max-height: 100px;
    margin: 0 auto;
  }
  .question-custom-data .field-display-image,
  .choice-card .field-display-image {
    margin-bottom: 1em;
  }
  .question-custom-data .entity-type,
  .choice-card .entity-type {
    margin-top: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
  }
  
  .rule {
    display: flex;
    align-items: center;
    margin: 10px 0;
    gap: 10px;
  }
  .rule .comparand, .rule .comparator {
    flex: 1 1 auto;
    min-width: 40px;
  }
  
  .choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  
  .add-custom-entity {
    width: 100px;
    height: 100px;
  }
  .add-custom-entity .editable-container,
  .add-custom-entity .editable-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
  }
  
  .resolve-form .choice-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .resolve-form .choice-card {
    cursor: pointer;
  }
  .resolve-form .choice-card.choice-selected {
    outline: 3px solid #4569c9;
    box-shadow: inset 0 0 10px #4569c9, 0 0 10px #4569c9;
  }
  .resolve-form .question-label {
    margin-bottom: 1em;
    font-size: 24px;
  }
  
  .prediction-ai-assistant-open-btn {
    background: #45966d;
    padding-left: 8px;
  }
  .prediction-ai-assistant-open-btn:hover {
    background: #357354;
  }
  
  #overlay.prediction-ai-assistant #overlay-container {
    color: #fff;
    background: #45966d;
  }
  #overlay.prediction-ai-assistant .icon {
    font-size: 72px;
    display: block;
    margin: 0 auto 20px;
  }
  #overlay.prediction-ai-assistant .title {
    color: #fff;
    border: none;
  }
  #overlay.prediction-ai-assistant .overlay-form {
    width: 100%;
    max-height: 96vh;
    overflow-y: auto;
  }
  #overlay.prediction-ai-assistant .overlay-form .content {
    width: 100%;
  }
  #overlay.prediction-ai-assistant .form-field {
    color: #fff;
    max-width: none;
  }
  #overlay.prediction-ai-assistant .form-field label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
  }
  #overlay.prediction-ai-assistant textarea {
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
    min-height: 100px;
  }
  #overlay.prediction-ai-assistant textarea::placeholder {
    color: #fff;
  }
  #overlay.prediction-ai-assistant .btn {
    background-color: #fff;
    color: #45966d;
    margin: 0;
  }
  #overlay.prediction-ai-assistant .btn.secondary {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }
  #overlay.prediction-ai-assistant .btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
  }
  #overlay.prediction-ai-assistant .btn:hover.secondary {
    background-color: rgba(255, 255, 255, 0.4);
  }
  #overlay.prediction-ai-assistant .btn-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  #overlay.prediction-ai-assistant .creative-assistant-loader {
    position: relative;
    background: transparent;
  }
  #overlay.prediction-ai-assistant .suggestion {
    margin-bottom: 40px;
  }
  #overlay.prediction-ai-assistant .choice.correct {
    color: #65FF60;
    font-weight: bold;
  }
  
  .ai-assistant-progress {
    opacity: 0;
    transition: opacity 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .ai-assistant-progress.visible {
    opacity: 1;
  }
  .ai-assistant-progress .dots {
    width: 70px;
    height: 70px;
    animation: loadingLoop 2s ease-in-out infinite;
    margin: 0 0 20px 0;
  }
  .ai-assistant-progress .dots .dot {
    width: 10px;
    height: 10px;
    background: #FF7440;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 10px #4569c9;
  }
  .ai-assistant-progress .dots .dot.dot-1 {
    top: 0;
    left: 30px;
    background: #FFA011;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .ai-assistant-progress .dots .dot.dot-2 {
    top: 30px;
    left: 0;
    background: #9C46FF;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .ai-assistant-progress .dots .dot.dot-3 {
    top: 30px;
    left: 30px;
    background: #3EFF85;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .ai-assistant-progress .dots .dot.dot-4 {
    top: 30px;
    right: 0;
    background: #3AFFEB;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .ai-assistant-progress .dots .dot.dot-5 {
    bottom: 0;
    left: 30px;
    background: #FF483A;
    animation: dotAnim 2s ease-in-out infinite;
  }
  .ai-assistant-progress .dots .dot.dot-6 {
    top: 0;
    left: 0;
  }
  .ai-assistant-progress .progress-title {
    text-align: center;
    font-size: 1.2em;
  }
  .ai-assistant-progress .progress {
    border-radius: 12px;
    padding: 10px 20px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 25px;
  }
  .ai-assistant-progress .progress div {
    flex: 1;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 0.7em;
  }
  .ai-assistant-progress .progress div div {
    text-align: center;
  }
  .ai-assistant-progress .progress div .num {
    font-size: 1.8em;
    color: #fff;
    display: block;
  }
  
  .overlay-portal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s, opacity 0.5s;
    z-index: 999;
  }
  .overlay-portal.visible {
    opacity: 1;
    visibility: visible;
  }
  .overlay-portal .overlay-portal-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #200F2F;
    opacity: 0.8;
  }
  .overlay-portal .overlay-portal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    max-height: 96%;
    background: #3A264B;
    text-align: center;
    z-index: 999;
    box-shadow: 0 0 20px 0 #200F2F;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .overlay-portal .overlay-portal-container .inner {
    padding: 60px;
    height: 100%;
  }
  
  .content-overlay .title {
    font-size: 2em;
    color: #4569c9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  
  .overlay-form {
    display: flex;
    justify-content: center;
  }
  .overlay-form .error {
    margin-top: 5px;
    font-size: 0.8em;
    color: red;
  }
  .overlay-form .content {
    text-align: left;
  }
  
  .media-library-list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .media-library-list.loading {
    pointer-events: none;
  }
  .media-library-list.loading .media-library-thumbnail {
    opacity: 0.5;
  }
  .media-library-list.loading:after {
    content: "...";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
  }
  
  .media-library-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    margin: 1em 0;
  }
  .media-library-pagination .media-library-page-link {
    cursor: pointer;
    padding: 3px;
    border-radius: 3px;
    border: 1px #4569c9 solid;
    min-width: 20px;
  }
  .media-library-pagination .media-library-page-link.active {
    border: 0px;
    background-color: #4569c9;
    color: white;
  }
  
  .media-library-functions {
    margin: 10px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  
  .media-library-thumbnail {
    margin-bottom: 10px;
  }
  .media-library-thumbnail img {
    max-width: 100%;
    max-height: 150px;
  }
  
  .media-library-value {
    display: flex;
    justify-content: center;
  }
  .media-library-value .media-library-thumbnail {
    position: relative;
  }
  .media-library-value .media-library-change {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    opacity: 0;
    transition: opacity 0.2s;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .media-library-value .media-library-change .labeled-button {
    background: rgba(255, 255, 255, 0.2);
  }
  .media-library-value:hover .media-library-change {
    opacity: 1;
  }
  
  .small-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .small-reward {
    background: #200F2F;
    border-radius: 10px;
    border: 1px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
  }
  .small-reward .header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: #3A264B;
    border-radius: 10px 10px 0 0;
    font-size: 0.8em;
  }
  .small-reward .header .label {
    flex-grow: 1;
  }
  .small-reward .header .icon {
    width: 34px;
    height: 34px;
  }
  .small-reward .header .trash-button {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .small-reward .header .trash-button .icon {
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: #fff;
  }
  .small-reward .header .trash-button:hover {
    background: #EF313E;
  }
  .small-reward .info {
    display: flex;
    padding: 10px;
  }
  .small-reward .info > div {
    margin-right: 10px;
  }
  .small-reward .info > div:last-child {
    margin: 0;
  }
  .small-reward .info .input-item, .small-reward .info .input-mission, .small-reward .info .input-currency {
    min-width: 260px;
  }
  .small-reward .info input {
    width: 200px;
    font-size: 0.8em;
  }
  .small-reward .info input.sm {
    width: 100px;
    text-align: center;
  }
  
  .labeled-button {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding-right: 20px;
    line-height: 40px;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    border: none;
    outline: none;
    color: #fff;
    padding: 0 0 0 20px;
  }
  .labeled-button .icon {
    width: 30px;
    height: 30px;
    font-size: 1em;
    background: #65FF60;
    border-radius: 50%;
    margin: 5px;
    margin-left: 10px;
  }
  .labeled-button .icon.icon-secondary {
    background: rgba(255, 255, 255, 0.4);
  }
  
  .overlay-buttons {
    margin: 20px 0;
  }
  
  .form-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  
  .dnd-list {
    margin: 20px 0;
  }
  .dnd-list:last-child {
    margin-bottom: 0;
  }
  
  .reward-track-container {
    display: flex;
    flex-direction: column;
  }
  .reward-track-container .meta-data {
    padding: 20px;
    display: flex;
    gap: 20px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 30px;
  }
  .reward-track-container .meta-data .column {
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
  }
  .reward-track-container .meta-data .chart-column {
    flex: 1 1 100%;
    position: relative;
  }
  .reward-track-container .module-form-field {
    display: flex;
    flex-direction: column;
  }
  .reward-track-container .tiers-container {
    --cols: 4;
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 80px 60px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
    align-self: flex-start;
    flex: 1 1 auto;
  }
  .reward-track-container .tiers-container .add-single-tier {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    background: #9C46FF;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    cursor: pointer;
  }
  .reward-track-container .tier-single-container {
    position: relative;
    display: flex;
  }
  .reward-track-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .reward-track-container .two-cols {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .reward-track-container .tier {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    height: var(--height, auto);
    transition: height 0.6s ease;
    text-align: center;
    align-self: stretch;
    padding: 20px;
    width: 100%;
  }
  .reward-track-container .tier .tier-index {
    position: absolute;
    bottom: 100%;
    right: 100%;
    font-size: 12px;
    background: black;
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    transform: translate(50%, 50%);
  }
  .reward-track-container .tier:hover .delete {
    opacity: 0.5;
  }
  .reward-track-container .tier:hover .delete:hover {
    opacity: 1;
  }
  .reward-track-container .tier .split {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .reward-track-container .tier .module-form-field {
    margin-bottom: 0;
  }
  .reward-track-container .tier .tier-stat-input {
    width: 100px;
    text-align: center;
  }
  .reward-track-container .tier .delete {
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }
  .reward-track-container .tier .name {
    margin-bottom: 8px;
  }
  .reward-track-container .tier .stat {
    font-size: 12px;
    opacity: 0.3;
    margin-bottom: 8px;
  }
  .reward-track-container .tier .left {
    position: absolute;
    top: 50%;
    left: 0;
  }
  .reward-track-container .tier .right {
    position: absolute;
    top: 50%;
    right: 0;
  }
  .reward-track-container .tier.appear {
    opacity: 0;
    transform: scale(0.8);
  }
  .reward-track-container .tier.appear-active {
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale(1);
  }
  .reward-track-container .options-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 10px;
    margin: 30px 0 30px;
  }
  .reward-track-container .options-container .new-reward {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px 0;
    transition: background-color 0.3s ease;
    cursor: pointer;
  }
  .reward-track-container .options-container .new-reward:hover {
    background: rgba(0, 0, 0, 0.2);
  }
  @media (max-width: 2090px) {
    .reward-track-container .tiers-container {
      --cols: 4;
    }
  }
  @media (max-width: 1710px) {
    .reward-track-container {
      flex-direction: column;
    }
    .reward-track-container .meta-data {
      flex-direction: column;
    }
    .reward-track-container .meta-data .module-form-field {
      display: grid;
      grid-template-columns: 150px 1fr;
      align-items: center;
    }
    .reward-track-container .meta-data .column {
      flex: 1 1 50%;
    }
    .reward-track-container .tiers-container {
      --cols: 3;
      margin-left: 0;
      margin-top: 20px;
      gap: 60px 40px;
    }
  }
  @media (max-width: 1160px) {
    .reward-track-container .tiers-container {
      --cols: 2;
    }
    .reward-track-container .meta-data .module-form-field {
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
  }
  @media (max-width: 840px) {
    .reward-track-container .meta-data {
      margin-left: 20px;
      margin-right: 20px;
    }
    .reward-track-container .tiers-container {
      --cols: 1;
      padding: 0 20px 20px;
    }
  }
  
  .no-reward-track {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .no-reward-track .inner {
    width: 80%;
    max-width: 800px;
    margin-top: 100px;
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 60px;
    border-radius: 10px;
  }
  .no-reward-track .title {
    font-size: 150%;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 1em;
  }
  .no-reward-track p {
    margin-bottom: 1em;
  }
  .no-reward-track .content {
    opacity: 0.8;
    margin-bottom: 2em;
  }
  
  .tier-helper {
    background: rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    gap: 20px;
  }
  .tier-helper .form-column {
    flex: 0 0 40%;
    padding-right: 30px;
  }
  .tier-helper .form-column textarea {
    width: 100%;
  }
  .tier-helper .tabs {
    display: flex;
  }
  .tier-helper .tabs .tab {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
  }
  .tier-helper .tabs .tab:not(.active) {
    cursor: pointer;
  }
  .tier-helper .tabs .tab:not(.active):hover {
    background: rgba(156, 70, 255, 0.25);
  }
  .tier-helper .tabs .tab.active {
    background: #9C46FF;
  }
  .tier-helper .tab-content {
    background: rgba(0, 0, 0, 0.2);
    padding: 20px;
  }
  .tier-helper .button.query-ai {
    margin-bottom: 20px;
    --button-background-color: #FF7440;
    --button-background-color-alt: #ff4f0d;
  }
  .tier-helper .chart-column {
    flex: 1 1 100%;
    height: 250px;
    margin-bottom: 30px;
    position: relative;
  }
  .tier-helper .chart-column p {
    margin-bottom: 1em;
  }
  
  .reward-track-tier-reward-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin-top: 10px;
  }
  .reward-track-tier-reward-container .tag {
    border-radius: 5px;
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1;
    font-weight: bold;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    flex: 0 0 100%;
    background: rgba(0, 0, 0, 0.2);
  }
  .reward-track-tier-reward-container .tag > .icon {
    width: 1em;
    height: 1em;
    margin-right: 0.25em;
  }
  .reward-track-tier-reward-container .tag .reward-content {
    display: flex;
    align-items: center;
    color: white;
    font-weight: normal;
  }
  .reward-track-tier-reward-container .tag input, .reward-track-tier-reward-container .tag select {
    background: rgba(255, 255, 255, 0.1);
    padding: 0px 6px;
    border-radius: 0;
    border: none;
    line-height: 1.5em;
    height: 1.5em;
    min-width: 1ch;
    width: 0;
    box-sizing: content-box;
    border-radius: 4px;
    margin-right: 0.5em;
    color: white;
  }
  .reward-track-tier-reward-container .tag .stat-name {
    min-width: 100px;
    color: white;
  }
  .reward-track-tier-reward-container .tag .event-name {
    min-width: 100px;
    color: white;
  }
  .reward-track-tier-reward-container .tag .event-name::placeholder {
    opacity: 1;
    font-style: normal;
  }
  .reward-track-tier-reward-container .tag .select-wrapper {
    position: relative;
    display: inline-flex;
  }
  .reward-track-tier-reward-container .tag .select-wrapper:after {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(-4px, calc(-50% - 2px)) rotate(-135deg);
    content: "";
    pointer-events: none;
    width: 6px;
    height: 6px;
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-top: 2px solid rgba(255, 255, 255, 0.8);
  }
  .reward-track-tier-reward-container .tag select {
    width: min-content;
    padding-right: 24px;
  }
  .reward-track-tier-reward-container .tag .trash,
  .reward-track-tier-reward-container .tag .edit {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .reward-track-tier-reward-container .tag .trash .icon,
  .reward-track-tier-reward-container .tag .edit .icon {
    width: 1em;
    height: 1em;
  }
  .reward-track-tier-reward-container .tag .trash > .icon {
    color: red;
  }
  .reward-track-tier-reward-container .tag .edit {
    position: static;
    display: inline-block;
    transform: none;
    opacity: 1;
  }
  .reward-track-tier-reward-container .tag:hover .trash {
    opacity: 1;
  }
  .reward-track-tier-reward-container .jsoneditor {
    margin-bottom: 20px;
  }
  
  .tiers-chart {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
  }
  .tiers-chart .tiers-chart-ctn {
    position: relative;
    display: flex;
    flex: 1 1 100%;
    justify-content: space-between;
    padding-right: 10px;
    padding-top: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-right: 2px solid rgba(255, 255, 255, 0.1);
  }
  .tiers-chart .tiers-chart-ctn:after {
    position: absolute;
    content: "";
    display: block;
    top: 100%;
    left: 100%;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    border-left: 2px solid rgba(255, 255, 255, 0.1);
  }
  .tiers-chart .tier-chart-single {
    flex: 1 1 100%;
    min-width: 2px;
    background: rgba(156, 70, 255, 0.5);
    transform-origin: bottom center;
    transform: scaleY(var(--scale));
    transition: all 0.3s;
  }
  
  #performance-monitor-dock {
    display: flex;
    width: 35px;
    justify-content: center;
    align-items: center;
  }
  #performance-monitor-dock .pm-dot {
    transition: all 1s ease-in-out;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: grey;
    opacity: 0.5;
  }
  #performance-monitor-dock .pm-dot.nominal {
    background-color: #65FF60;
  }
  #performance-monitor-dock .pm-dot.warning {
    background-color: #FFA011;
  }
  #performance-monitor-dock .pm-dot.critical {
    background-color: #EF313E;
  }
  #performance-monitor-dock .pm-dot.nominal, #performance-monitor-dock .pm-dot.warning, #performance-monitor-dock .pm-dot.critical {
    cursor: pointer;
  }
  #performance-monitor-dock .performance-monitor-widget {
    transition: all 0.2s ease-in-out;
    position: absolute;
    padding: 30px 0 10px 0;
    bottom: 45px;
    left: 10px;
    min-width: 200px;
    display: none;
    opacity: 0;
    background: #200F2F;
    border: 1px solid #3A264B;
    box-shadow: 0 0 10px #200F2F;
    font-size: 11px;
  }
  #performance-monitor-dock .performance-monitor-widget .metric-info {
    padding: 0 20px;
    margin: 0 0 12px 0;
  }
  #performance-monitor-dock .performance-monitor-widget .metric-group {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  #performance-monitor-dock .performance-monitor-widget .metric-group:first-child {
    padding-top: 0;
  }
  #performance-monitor-dock .performance-monitor-widget .metric-group:last-child {
    border: none;
  }
  #performance-monitor-dock .performance-monitor-widget .metric-group .metric-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: #fff;
  }
  #performance-monitor-dock .performance-monitor-widget .metric-group .metric-title span {
    font-weight: normal;
  }
  #performance-monitor-dock .performance-monitor-widget table {
    border-spacing: 0;
  }
  #performance-monitor-dock .performance-monitor-widget table th {
    font-weight: bold;
  }
  #performance-monitor-dock .performance-monitor-widget table th.metric-key {
    text-align: right;
  }
  #performance-monitor-dock .performance-monitor-widget table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #performance-monitor-dock .performance-monitor-widget table th, #performance-monitor-dock .performance-monitor-widget table td {
    padding: 2px 5px;
  }
  #performance-monitor-dock .performance-monitor-widget table th:first-child, #performance-monitor-dock .performance-monitor-widget table td:first-child {
    padding-left: 20px;
  }
  #performance-monitor-dock .performance-monitor-widget table th:last-child, #performance-monitor-dock .performance-monitor-widget table td:last-child {
    padding-right: 20px;
  }
  #performance-monitor-dock .performance-monitor-widget table .warning {
    color: #FFA011;
  }
  #performance-monitor-dock .performance-monitor-widget table .critical {
    color: #EF313E;
  }
  #performance-monitor-dock .performance-monitor-widget table .nominal, #performance-monitor-dock .performance-monitor-widget table .warning, #performance-monitor-dock .performance-monitor-widget table .critical {
    opacity: 0.7;
  }
  #performance-monitor-dock .performance-monitor-widget table .median .nominal, #performance-monitor-dock .performance-monitor-widget table .prc99 .nominal {
    color: #fff;
  }
  #performance-monitor-dock .performance-monitor-widget table .median .nominal, #performance-monitor-dock .performance-monitor-widget table .median .warning, #performance-monitor-dock .performance-monitor-widget table .median .critical, #performance-monitor-dock .performance-monitor-widget table .prc99 .nominal, #performance-monitor-dock .performance-monitor-widget table .prc99 .warning, #performance-monitor-dock .performance-monitor-widget table .prc99 .critical {
    opacity: 1;
  }
  #performance-monitor-dock .performance-monitor-widget .note {
    padding: 5px 20px 0 20px;
    text-align: right;
    font-style: italic;
    font-size: 0.8em;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-window-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: background 0.2s;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.disabled {
    cursor: default;
    opacity: 0.2;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.close:hover {
    background: #EF313E;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.close .icon {
    transform: rotate(45deg);
    font-size: 1.2em;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.graph-toggle:hover {
    background: rgba(255, 255, 255, 0.4);
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.graph-toggle .icon {
    font-size: 1.2em;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.char-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: #fff;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-btn.char-icon.flip {
    transform: rotate(180deg);
  }
  #performance-monitor-dock .performance-monitor-widget-open {
    display: block;
    opacity: 1;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-container {
    padding: 15px 15px 5px 15px;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph {
    width: 1200px;
    height: 400px;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-heading .numeric-input {
    width: 50px;
    margin: 0 10px;
    padding: 0 5px;
    text-align: center;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-controls .control-field label {
    margin: 0 5px;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-controls select {
    width: auto;
    line-height: 2em;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-graph-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 0 10px;
    font-size: 0.8em;
    color: #fff;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-legend {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-legend div {
    padding: 0 0 0 45px;
    position: relative;
  }
  #performance-monitor-dock .performance-monitor-widget .pm-legend div:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 40px;
    border-top: 2px solid var(--line-color);
  }
  #performance-monitor-dock ul {
    position: absolute;
    bottom: 35px;
    left: -35px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
  }
  #performance-monitor-dock ul li {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
    color: #EF313E;
  }
  #performance-monitor-dock ul li:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  #performance-monitor-dock ul li:last-child {
    border: none;
  }
  #performance-monitor-dock ul li .error {
    flex-grow: 1;
    line-height: normal;
  }
  #performance-monitor-dock ul li .error .timestamp {
    display: block;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
  }
  #performance-monitor-dock ul li .clear {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: background 0.2s;
  }
  #performance-monitor-dock ul li .clear:hover {
    background: #EF313E;
  }
  #performance-monitor-dock ul li .clear .icon {
    transform: rotate(45deg);
    font-size: 1.2em;
  }
  
  .pm-graph-tooltip {
    position: absolute;
    font-size: 10px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.9);
    color: black;
    border-radius: 3px;
    transform: translate(calc(-50% + 4px), calc(-100% - 8px));
    white-space: nowrap;
  }
  .pm-graph-tooltip .event-type {
    font-weight: bold;
  }
  .pm-graph-tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-top: 5px solid rgba(255, 255, 255, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }
  
  /*# sourceMappingURL=styles.css.map*/