gdx-ui 2.1.3 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/base.css +1 -1
  2. package/components/badge/Badge.js +9 -3
  3. package/components/dialog/ConfirmationDialog.js +1 -1
  4. package/components/expandable/Expandable.js +12 -5
  5. package/components/flex/Flex.js +2 -2
  6. package/components/images/ZoomImage.js +3 -4
  7. package/package.json +1 -1
  8. package/stories/images/ZoomImage.stories.js +1 -0
  9. package/stories/utils/Expanded.stories.js +4 -1
package/base.css CHANGED
@@ -1 +1 @@
1
- .clearfix:after,.form-inline:after,.input-inside:after,.toolbar-group:after{clear:both}.input-inside,body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.box,.dialog{transform:translateY(0)}.app-layout,.btn,.btn-circle,body,html{box-sizing:border-box}.btn,.center,.pagination-input{text-align:center}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0}.widget-hover{box-shadow:0 6px 10px rgba(0,0,0,.2)}body{background:var(--body-bg);color:var(--color);font-size:14px;font-weight:300;line-height:1.5em}.code-editor,code,pre{font-family:monospace}body,html{height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px;padding:0}b,h4,h5,h6,strong{font-weight:500}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px}small{font-size:12px}.btn,button,code,pre{font-size:14px}a,button.anchor{color:#1D9EFC;text-decoration:none;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{transition:color .2s ease;color:#0390f7}.box,.dialog,.dropdown{transition:transform .25s ease,box-shadow .25s ease}p{margin:0 0 15px}code,pre{color:#6f6f6f}pre{background:var(--body-bg);border-radius:15px;border:1px solid var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}.btn,hr{border:none}hr{border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{min-height:100%;display:flex;flex-direction:column}.btn,.editable,.input-inside,input,select,textarea{display:inline-block;vertical-align:middle}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.67px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--border-radius:15px;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF;--primary-color:#1D9EFC;--success-color:#38c153;--alert-color:#ea0835;--color-gray:#6f6f6f}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transition-delay:0s;position:relative;margin-bottom:15px}.box .box-footer .row,.box .box-toolbar .form-element,.box .box-toolbar .row,.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#6f6f6f;background:#FFF;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-top-btn{position:absolute;right:10px;top:10px}.carousel,.carousel-img-wrapper,.input-wrapper{position:relative}.carousel-btn,.input-reset-btn{top:50%;transform:translateY(-50%)}.box .box{box-shadow:none;border:1px solid var(--border-color)}button:focus-visible{outline:#1D9EFC auto 1px}.btn-circle:active,.btn:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle:focus-visible,.btn:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.btn{border-radius:999px;margin:0;text-decoration:none;cursor:pointer;padding:12px 20px;transition:background .2s cubic-bezier(.4,0,.2,1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:1px solid transparent;background:0 0;color:#1D9EFC;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:1px solid var(--btn-bg);color:var(--color)}.btn-outline-default{border:1px solid #898989;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ECEDEF}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1D9EFC;border:1px solid #1D9EFC;color:#FFF}.btn-outline-primary{border:1px solid #1D9EFC;color:#1D9EFC}.btn-link-primary{color:#1D9EFC}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#FFF;background:#038aed}.btn-normal-alert{background:#ea0835;border:1px solid #ea0835;color:#FFF}.btn-outline-alert{border:1px solid #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#FCC5C5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#FFF;background:#c3072c}.btn-normal-success{background:#38c153;border:1px solid #38c153;color:#FFF}.btn-outline-success{border:1px solid #38c153;color:#38c153}.btn-link-success{color:#38c153}.btn-link-success:hover{background:#DDFFD4}.btn-normal-success:hover,.btn-outline-success:hover{color:#FFF;background:#2fa145}.btn-normal-warning{background:#ffd500;border:1px solid #ffd500}.btn-outline-warning{border:1px solid #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;height:35px;width:35px;min-height:35px;min-width:35px;max-height:35px;max-width:35px;aspect-ratio:1/1;margin:0;padding:0;overflow:hidden}.carousel,.dialog{border-radius:15px}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle-bg-clear{background:rgba(0,0,0,.1)}.btn-circle-bg-solid{background:var(--btn-bg)}.btn-circle:hover{background:#1D9EFC}.carousel,.table{background:var(--el-bg)}.btn-circle:hover svg{color:#fff!important}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{width:18px;height:18px;padding-top:0;font-size:10px}.btn-circle-size-small svg{margin-left:-2px;margin-top:3px}.btn-circle-size-large{width:48px;height:48px;padding-top:0;font-size:15px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:rgba(234,8,53,.7) solid 3px!important}.btn-alert:focus-visible{outline:#c7072d solid 2px;outline-offset:2px}.btn-success:active{outline:rgba(56,193,83,.7) solid 3px!important}.btn-success:focus-visible{outline:#30a547 solid 2px;outline-offset:2px}.btn-warning:active{outline:rgba(255,213,0,.7) solid 3px!important}.btn-warning:focus-visible{outline:#dbb700 solid 2px;outline-offset:2px}.carousel{width:100%;overflow:hidden;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;overflow:hidden}.carousel-btn,.carousel-dots,.carousel-title,.dialog,.dialog-close,.dropdown{position:absolute}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.carousel-dot-btn,.checkmark,.slider:before{height:15px;border-radius:50%}.carousel-title{left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 15px 15px}.carousel-btn{z-index:9}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{left:0;right:0;bottom:15px;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.dialog-title,.table .underlined td,.table .underlined th,.table thead td,.table thead th,.tabs{border-bottom:solid 1px var(--border-color)}.dialog{background:#FFF;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;margin:0;z-index:999;display:flex;flex-direction:column}.dropdown,.slider{left:0;cursor:pointer}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-close{top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.dialog .box{box-shadow:none;border:1px solid var(--border-color)!important}.dialog:focus{outline:0}.dropdown{box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;z-index:99;min-width:400px;max-width:600px;margin:0}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.editable,.input-inside,input,select,textarea{margin-bottom:0!important;line-height:1.5em;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1D9EFC!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px}.flex-justify-start{justify-content:flex-start}.flex-justify-end{justify-content:flex-end}.flex-justify-center,.loader-squares,.navbar-icon-area-content{justify-content:center}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.flex-align-end{align-items:flex-end}.flex-align-center{align-items:center}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:rgba(29,158,252,.7) solid 3px;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color)}.input-inside,input,select,textarea{padding:10px;font-size:14px;border-radius:15px;border:1px solid var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{width:100%;min-height:1.4em;padding:2px 0;font-size:14px;border-radius:15px;border:1px solid transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0}.editable:focus{background:var(--input-bg);outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#6f6f6f;pointer-events:none}.editable:focus::before{content:''}.checkmark:after,.form-inline:after,.form-inline:before,.input-inside:after,.input-inside:before,.slider:before,.toolbar-group:after,.toolbar-group:before{content:""}.inline-elements .form-element,.toolbar .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-alert:focus{outline:rgba(234,8,53,.7) solid 3px!important}.code-editor:focus,.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-reset-btn{position:absolute;right:8px;z-index:2}.input-inside{padding:0 4px 0 0;position:relative}.input-inside select{border:none;box-shadow:none;margin:0;padding:0 0 0 4px;color:#6f6f6f;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-focus,.input-inside:focus{border-color:#1D9EFC;outline:rgba(29,158,252,.7) solid 3px}.input-inside select:focus{background:#e2f1fb}.input-inside :first-child{border-radius:15px 0 0 15px}.input-inside :last-child{border-radius:0 15px 15px 0}.input-inside .btn-circle{height:24px;width:24px}.input-inside,textarea{height:auto}.input-btns{position:absolute;right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#6f6f6f;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside:after,.input-inside:before{display:table;line-height:0}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}fieldset,fieldset label{margin-bottom:15px}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.input-inside input:focus,.input-inside select:focus{border-color:transparent}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{box-shadow:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none}label{display:block}label input,label select,label textarea,td label{margin-bottom:0}fieldset{border:1px solid var(--border-color);border-radius:15px}legend{color:#6f6f6f;padding:0 5px}.form-inline:after,.form-inline:before{display:table;line-height:0}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;line-height:0}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #FFF;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:15px 0 0 15px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 15px 15px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#6f6f6f;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.swith-label{margin-left:5px}.slider{box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;position:absolute;right:1px;top:1px;transition:background-color .1s}.slider:before{left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;position:absolute;transition:.1s}input:checked+.slider{background-color:#38c153}input:focus+.slider{box-shadow:0 0 1px #38c153}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#6f6f6f}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;width:15px;background-color:var(--border-color);box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important}.cust-radio input:checked~.checkmark{background-color:#1D9EFC}.checkmark:after{position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.information,.row{margin-bottom:15px}.code-editor{color:#6f6f6f;font-size:12px;border:0;padding:0;width:100%}.information,.label{border-radius:15px}.information{padding:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1D9EFC}.information-primary hr{border-bottom:solid 1px #1D9EFC}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#DDFFD4;color:#31a949}.information-success hr{border-bottom:solid 1px #38c153}.information-alert{background:#FCC5C5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge,.label{cursor:default;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge:empty,.label:empty{display:none}.badge .btn-circle,.label .btn-circle{margin-left:5px}.badge-default,.label-default{background-color:var(--btn-bg);color:#6f6f6f}.badge.badge-primary,.badge.label-primary,.label.badge-primary,.label.label-primary{background-color:#1D9EFC}.badge.badge-warning,.badge.label-warning,.label.badge-warning,.label.label-warning{color:var(--color);background-color:#ffd500}.badge.badge-success,.badge.label-success,.label.badge-success,.label.label-success{background-color:#38c153}.badge.badge-alert,.badge.label-alert,.label.badge-alert,.label.label-alert{background-color:#ea0835}.badge{border-radius:20px;padding:2px 10px}.badge-small{padding:0 10px;font-size:12px}.badge-closable{padding-right:0}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px}.clear-list.default li{margin:0 0 15px}.clear-list.plenty li{margin:0 0 22.5px}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;list-style:none}.loader-squares{display:flex;gap:8px;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:nth-child(1){animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%,100%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.navbar-header{background:#000;border-bottom:solid 3px #1D9EFC;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:#fff!important;padding:7.5px 0 15px;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 15px 15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:#fff;padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:rgba(255,255,255,.12);color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-menu-item.active,.navbar-submenu-item.active{background:rgba(255,255,255,.1)}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-wrapper{position:relative}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-icons .navbar-icon-btn.active{color:#1D9EFC;opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:99;width:1100px;max-width:calc(100vw - (15px * 2));box-sizing:border-box;background:rgba(0,0,0,.8);border-radius:0 0 15px 15px;padding:15px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-icon-area.open{display:block}.navbar-icon-area-content{display:flex;width:100%}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.image-zoom,.skeleton,.thumb{overflow:hidden}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#CCC;top:50%;transform:translateY(-50%)}.skeleton,.snackbar{border-radius:15px;position:relative}.list-scroller-btn-left{left:-15px}.image-zoom-caption,.snackbar-stack,.tooltip{left:50%;transform:translateX(-50%)}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#a2a2a2 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;padding:15px;margin-bottom:15px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#FFF;margin:auto auto 15px;box-sizing:border-box;min-width:500px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate}.table thead td,.table thead th{background-color:var(--el-bg);color:#6f6f6f;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#6f6f6f!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#565656}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.content,.tab-content,.tabs .tab{padding:15px}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table td .btn,.table td .row,.table textarea,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#FCC5C5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#DDFFD4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.tabs{display:flex}.tabs .tab{margin:0;cursor:pointer;border:1px solid transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:1px solid var(--border-color);border-bottom:solid 1px #FFF;color:#1D9EFC;position:relative;z-index:9;background:#FFF;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#898989;pointer-events:none}.tab-content{border:1px solid var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;position:relative;z-index:1;background:#FFF}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#FFF!important;border-radius:15px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.thumb.thumb-bordered{border:1px solid var(--border-color)}.image-zoom-caption,.rounded,.tooltip{border-radius:15px}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}ul.tree li:after,ul.tree li:before{height:1.6em;color:#fff;content:""}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);color:#fff;padding:5px 15px;font-size:12px;z-index:9;display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px}ul.tree ul.tree{margin-left:-16px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:0 7px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 40px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;width:15px;border-bottom:1px solid #646464;display:inline-block;left:0}.relative,.wrapper,ul.tree li:after{position:relative}ul.tree li:after{top:-.3em;width:15px;display:inline-block;left:-7px}.text-content{line-height:1.5}.text-size-small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-both{margin:15px 0}.collapesed{margin:0}.separated{margin:15px 0}.color-default{color:var(--color)!important}.color-primary{color:#1D9EFC!important}.color-success{color:#38c153!important}.color-alert{color:#ea0835!important}.color-warning{color:#ffd500!important}.color-active{color:#64FA00!important}.color-gray{color:#6f6f6f!important}.bg-primary{background-color:#1D9EFC;color:#fff}.bg-success{background-color:#38c153;color:#fff}.bg-alert{background-color:#ea0835;color:#fff}.bg-warning{background-color:#ffd500;color:#272729}.bg-default,.bg-gray{background-color:#6f6f6f;color:#fff}.bg-active{background-color:#64FA00}.bg-alert .btn-circle-bg-clear svg,.bg-default .btn-circle-bg-clear svg,.bg-primary .btn-circle-bg-clear svg,.bg-success .btn-circle-bg-clear svg{color:#fff!important}.note,.note a{color:#6f6f6f}.inline{display:inline-block;vertical-align:middle}.note{font-size:12px;font-weight:400}.note a{text-decoration:underline}.note a:hover{color:#1D9EFC}.absolute,.corner-btn{position:absolute}.corner-btn{right:15px;top:15px}.component-locker,.overlay{background:var(--overlay-color);height:100%;left:0;top:0;transition:.2s;width:100%}.right{text-align:right}.left{text-align:left}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.bordered{border:1px solid var(--border-color);border-radius:15px}.bordered-primary{border-color:#1D9EFC}.border-top{border-top:solid 1px var(--border-color)}.border-bottom{border-bottom:solid 1px var(--border-color)}.overlay{position:fixed;z-index:99}.component-locker{border-radius:15px;position:absolute;z-index:9}.outline-primary{outline:#1D9EFC dashed 1px}.outline-success{outline:#38c153 dashed 1px}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.container-align-left .container-item{display:flex;justify-content:flex-start}.container-align-center .container-item{display:flex;justify-content:center}.container-align-right .container-item{display:flex;justify-content:flex-end}.container .container-item .container-align-left{display:flex;justify-content:flex-start}.container .container-item .container-align-center{display:flex;justify-content:center}.container .container-item .container-align-right{display:flex;justify-content:flex-end}.container-none .container-item{margin-bottom:0}.container-compact .container-item{margin-bottom:7.5px}.container-default .container-item,.container-normal .container-item{margin-bottom:15px}.container-plenty .container-item{margin-bottom:22.5px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside,.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.67px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn,.expanded-phone,.snackbar{width:100%}.dialog{width:95%!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:rgba(0,0,0,.88);position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.24);color:#fff}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-menu-item>a{color:#fff;padding:16px 20px}.navbar-menu-item:hover>.navbar-submenu{display:none}.navbar-menu-item.open>.navbar-submenu{display:block}.navbar-submenu{position:static!important;min-width:100%!important;border:none!important;border-radius:0!important}.navbar-submenu a{color:#fff!important;padding:12px 20px 12px 38px!important}.navbar-submenu-item{color:#fff}.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-icons{margin-left:auto}}
1
+ .clearfix:after,.form-inline:after,.input-inside:after,.toolbar-group:after{clear:both}.input-inside,body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.app-layout,body,html{box-sizing:border-box}.app-layout,.dialog{flex-direction:column}.box,.dialog{transform:translateY(0)}.btn,a,button.anchor{text-decoration:none;cursor:pointer}.carousel-dots,.flex{gap:15px;display:flex}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0}.widget-hover{box-shadow:0 6px 10px rgba(0,0,0,.2)}body{background:var(--body-bg);color:var(--color);font-size:14px;font-weight:300;line-height:1.5em}.code-editor,code,pre{font-family:monospace}body,html{height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px;padding:0}b,h4,h5,h6,strong{font-weight:500}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px}small{font-size:12px}.btn,button,code,pre{font-size:14px}a,button.anchor{color:#1D9EFC;background:0 0;border:none;padding:0}a:hover,button.anchor:hover{transition:color .2s ease;color:#0390f7}p{margin:0 0 15px}code,pre{color:#6f6f6f}pre{background:var(--body-bg);border-radius:15px;border:1px solid var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}.btn,hr{border:none}hr{border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{min-height:100%;display:flex}.btn,.editable,.input-inside,input,select,textarea{display:inline-block;vertical-align:middle}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.67px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--border-radius:15px;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF;--primary-color:#1D9EFC;--success-color:#38c153;--alert-color:#ea0835;--color-gray:#6f6f6f}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box .box-footer .row,.box .box-toolbar .form-element,.box .box-toolbar .row,.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.btn,.btn-circle{box-sizing:border-box;margin:0}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#6f6f6f;background:#FFF;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:1px solid var(--border-color)}button:focus-visible{outline:#1D9EFC auto 1px}.btn-circle:active,.btn:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle:focus-visible,.btn:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.btn{border-radius:999px;text-align:center;padding:12px 20px;transition:background .2s cubic-bezier(.4,0,.2,1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:1px solid transparent;background:0 0;color:#1D9EFC;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:1px solid var(--btn-bg);color:var(--color)}.btn-outline-default{border:1px solid #898989;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ECEDEF}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1D9EFC;border:1px solid #1D9EFC;color:#FFF}.btn-outline-primary{border:1px solid #1D9EFC;color:#1D9EFC}.btn-link-primary{color:#1D9EFC}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#FFF;background:#038aed}.btn-normal-alert{background:#ea0835;border:1px solid #ea0835;color:#FFF}.btn-outline-alert{border:1px solid #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#FCC5C5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#FFF;background:#c3072c}.btn-normal-success{background:#38c153;border:1px solid #38c153;color:#FFF}.btn-outline-success{border:1px solid #38c153;color:#38c153}.btn-link-success{color:#38c153}.btn-link-success:hover{background:#DDFFD4}.btn-normal-success:hover,.btn-outline-success:hover{color:#FFF;background:#2fa145}.btn-normal-warning{background:#ffd500;border:1px solid #ffd500}.btn-outline-warning{border:1px solid #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;height:35px;width:35px;min-height:35px;min-width:35px;max-height:35px;max-width:35px;aspect-ratio:1/1;padding:0;overflow:hidden}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle-bg-clear{background:rgba(0,0,0,.1)}.btn-circle-bg-solid{background:var(--btn-bg)}.btn-circle:hover{background:#1D9EFC}.carousel,.table{background:var(--el-bg)}.btn-circle:hover svg{color:#fff!important}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{height:25px;width:25px;min-height:25px;min-width:25px;max-height:25px;max-width:25px;font-size:12px}.btn-circle-size-large{width:48px;height:48px;padding-top:0;font-size:15px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:rgba(234,8,53,.7) solid 3px!important}.btn-alert:focus-visible{outline:#c7072d solid 2px;outline-offset:2px}.btn-success:active{outline:rgba(56,193,83,.7) solid 3px!important}.btn-success:focus-visible{outline:#30a547 solid 2px;outline-offset:2px}.btn-warning:active{outline:rgba(255,213,0,.7) solid 3px!important}.btn-warning:focus-visible{outline:#dbb700 solid 2px;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;border-radius:15px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;position:relative;overflow:hidden}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.carousel-title{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 15px 15px}.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:9}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{position:absolute;left:0;right:0;bottom:15px;justify-content:center;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.dialog,.dropdown{transition:transform .25s ease,box-shadow .25s ease;position:absolute;margin:0;background:#FFF}.dialog{border-radius:15px;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;z-index:999;display:flex}.dropdown,.slider{left:0;cursor:pointer}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{border-bottom:solid 1px var(--border-color);padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.dialog .box{box-shadow:none;border:1px solid var(--border-color)!important}.dialog:focus{outline:0}.dropdown{box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);border-radius:15px;transform:translateY(0);transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;z-index:99;min-width:400px;max-width:600px}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.editable,.input-inside,input,select,textarea{margin-bottom:0!important;line-height:1.5em;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1D9EFC!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex-justify-start{justify-content:flex-start}.flex-justify-center{justify-content:center}.flex-justify-end{justify-content:flex-end}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.badge-content,.flex-align-center{align-items:center}.flex-align-end{align-items:flex-end}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:rgba(29,158,252,.7) solid 3px;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color)}.input-inside,input,select,textarea{padding:10px;font-size:14px;border-radius:15px;border:1px solid var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{width:100%;min-height:1.4em;padding:2px 0;font-size:14px;border-radius:15px;border:1px solid transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0}.editable:focus{background:var(--input-bg);outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#6f6f6f;pointer-events:none}.editable:focus::before{content:''}.checkmark:after,.form-inline:after,.form-inline:before,.input-inside:after,.input-inside:before,.slider:before,.toolbar-group:after,.toolbar-group:before{content:""}.inline-elements .form-element,.toolbar .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-alert:focus{outline:rgba(234,8,53,.7) solid 3px!important}.code-editor:focus,.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-wrapper{position:relative}.input-reset-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.input-inside{padding:0 4px 0 0;position:relative}.input-btns,.slider,.slider:before{position:absolute}.input-inside select{border:none;box-shadow:none;margin:0;padding:0 0 0 4px;color:#6f6f6f;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-focus,.input-inside:focus{border-color:#1D9EFC;outline:rgba(29,158,252,.7) solid 3px}.input-inside select:focus{background:#e2f1fb}.input-inside :first-child{border-radius:15px 0 0 15px}.input-inside :last-child{border-radius:0 15px 15px 0}.input-inside .btn-circle{height:24px;width:24px}.input-inside,textarea{height:auto}.input-btns{right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#6f6f6f;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-label,legend{color:#6f6f6f}.input-inside:after,.input-inside:before{display:table;line-height:0}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}fieldset,fieldset label{margin-bottom:15px}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.input-inside input:focus,.input-inside select:focus{border-color:transparent}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{box-shadow:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none}label{display:block}label input,label select,label textarea,td label{margin-bottom:0}fieldset{border:1px solid var(--border-color);border-radius:15px}legend{padding:0 5px}.form-inline:after,.form-inline:before{display:table;line-height:0}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;line-height:0}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #FFF;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:15px 0 0 15px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 15px 15px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#6f6f6f;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.swith-label{margin-left:5px}.slider{box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;right:1px;top:1px;transition:background-color .1s}.slider:before{border-radius:50%;left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;height:15px;transition:.1s}input:checked+.slider{background-color:#38c153}input:focus+.slider{box-shadow:0 0 1px #38c153}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;height:15px;width:15px;background-color:var(--border-color);box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;border-radius:50%}.cust-radio input:checked~.checkmark{background-color:#1D9EFC}.checkmark:after{position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.information,.row{margin-bottom:15px}.code-editor{color:#6f6f6f;font-size:12px;border:0;padding:0;width:100%}.information{border-radius:15px;padding:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1D9EFC}.information-primary hr{border-bottom:solid 1px #1D9EFC}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#DDFFD4;color:#31a949}.information-success hr{border-bottom:solid 1px #38c153}.information-alert{background:#FCC5C5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge{cursor:default;line-height:1.5em;color:#fff;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;justify-content:center}.badge:empty{display:none}.badge,.badge-small{display:inline-flex;align-items:center}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#6f6f6f}.badge.badge-primary{background-color:#1D9EFC}.badge.badge-warning{color:var(--color);background-color:#ffd500}.badge.badge-success{background-color:#38c153}.badge.badge-alert{background-color:#ea0835}.badge{border-radius:20px;padding:2px 18px;justify-content:center;vertical-align:middle}.badge-small{padding:0 10px;font-size:12px;min-height:20px;justify-content:center}.badge-closable{padding-right:0}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px}.clear-list.default li{margin:0 0 15px}.clear-list.plenty li{margin:0 0 22.5px}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;list-style:none}.loader-squares{display:flex;gap:8px;justify-content:center;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:nth-child(1){animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%,100%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.navbar-header{background:#000;border-bottom:solid 3px #1D9EFC;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:#fff!important;padding:7.5px 0 15px;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 15px 15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:#fff;padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:rgba(255,255,255,.12);color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-menu-item.active,.navbar-submenu-item.active{background:rgba(255,255,255,.1)}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-wrapper{position:relative}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-icons .navbar-icon-btn.active{color:#1D9EFC;opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:99;width:1100px;max-width:calc(100vw - (15px * 2));box-sizing:border-box;background:rgba(0,0,0,.8);border-radius:0 0 15px 15px;padding:15px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-icon-area.open{display:block}.navbar-icon-area-content{display:flex;justify-content:center;width:100%}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;text-align:center;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.image-zoom,.skeleton,.thumb{overflow:hidden}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#CCC;top:50%;transform:translateY(-50%)}.skeleton,.snackbar{border-radius:15px;position:relative}.list-scroller-btn-left{left:-15px}.image-zoom-caption,.snackbar-stack,.tooltip{left:50%;transform:translateX(-50%)}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#a2a2a2 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;padding:15px;margin-bottom:15px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#FFF;margin:auto auto 15px;box-sizing:border-box;min-width:500px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate}.table thead td,.table thead th{background-color:var(--el-bg);border-bottom:solid 1px var(--border-color);color:#6f6f6f;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#6f6f6f!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#565656}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.content,.tab-content,.tabs .tab{padding:15px}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table td .btn,.table td .row,.table textarea,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table .underlined td,.table .underlined th{border-bottom:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#FCC5C5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#DDFFD4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.tabs{display:flex;border-bottom:solid 1px var(--border-color)}.tabs .tab{margin:0;cursor:pointer;border:1px solid transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:1px solid var(--border-color);border-bottom:solid 1px #FFF;color:#1D9EFC;position:relative;z-index:9;background:#FFF;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#898989;pointer-events:none}.tab-content{border:1px solid var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;position:relative;z-index:1;background:#FFF}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#FFF!important;border-radius:15px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.thumb.thumb-bordered{border:1px solid var(--border-color)}.image-zoom-caption,.rounded,.tooltip{border-radius:15px}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}ul.tree li:after,ul.tree li:before{height:1.6em;color:#fff;content:""}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);color:#fff;padding:5px 15px;font-size:12px;z-index:9;display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px}ul.tree ul.tree{margin-left:-23px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:3px 10px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 45px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;width:15px;border-bottom:1px solid #646464;display:inline-block;left:0}.relative,.wrapper,ul.tree li:after{position:relative}ul.tree li:after{top:-.3em;width:15px;display:inline-block;left:-7px}.text-content{line-height:1.5}.text-size-small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-both{margin:15px 0}.collapesed{margin:0}.separated{margin:15px 0}.color-default{color:var(--color)!important}.color-primary{color:#1D9EFC!important}.color-success{color:#38c153!important}.color-alert{color:#ea0835!important}.color-warning{color:#ffd500!important}.color-active{color:#64FA00!important}.color-gray{color:#6f6f6f!important}.bg-primary{background-color:#1D9EFC;color:#fff}.bg-success{background-color:#38c153;color:#fff}.bg-alert{background-color:#ea0835;color:#fff}.bg-warning{background-color:#ffd500;color:#272729}.bg-default,.bg-gray{background-color:#6f6f6f;color:#fff}.bg-active{background-color:#64FA00}.bg-alert .btn-circle-bg-clear svg,.bg-default .btn-circle-bg-clear svg,.bg-primary .btn-circle-bg-clear svg,.bg-success .btn-circle-bg-clear svg{color:#fff!important}.note,.note a{color:#6f6f6f}.inline{display:inline-block;vertical-align:middle}.note{font-size:12px;font-weight:400}.note a{text-decoration:underline}.note a:hover{color:#1D9EFC}.absolute,.corner-btn{position:absolute}.corner-btn{right:15px;top:15px}.component-locker,.overlay{background:var(--overlay-color);height:100%;left:0;top:0;transition:.2s;width:100%}.center{text-align:center}.right{text-align:right}.left{text-align:left}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.bordered{border:1px solid var(--border-color);border-radius:15px}.bordered-primary{border-color:#1D9EFC}.border-top{border-top:solid 1px var(--border-color)}.border-bottom{border-bottom:solid 1px var(--border-color)}.overlay{position:fixed;z-index:99}.component-locker{border-radius:15px;position:absolute;z-index:9}.outline-primary{outline:#1D9EFC dashed 1px}.outline-success{outline:#38c153 dashed 1px}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.container-align-left .container-item{display:flex;justify-content:flex-start}.container-align-center .container-item{display:flex;justify-content:center}.container-align-right .container-item{display:flex;justify-content:flex-end}.container .container-item .container-align-left{display:flex;justify-content:flex-start}.container .container-item .container-align-center{display:flex;justify-content:center}.container .container-item .container-align-right{display:flex;justify-content:flex-end}.container-none .container-item{margin-bottom:0}.container-compact .container-item{margin-bottom:7.5px}.container-default .container-item,.container-normal .container-item{margin-bottom:15px}.container-plenty .container-item{margin-bottom:22.5px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside,.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.67px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn,.expanded-phone,.snackbar{width:100%}.dialog{width:95%!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:rgba(0,0,0,.88);position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.24);color:#fff}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-menu-item>a{color:#fff;padding:16px 20px}.navbar-menu-item:hover>.navbar-submenu{display:none}.navbar-menu-item.open>.navbar-submenu{display:block}.navbar-submenu{position:static!important;min-width:100%!important;border:none!important;border-radius:0!important}.navbar-submenu a{color:#fff!important;padding:12px 20px 12px 38px!important}.navbar-submenu-item{color:#fff}.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-icons{margin-left:auto}}
package/components/badge/Badge.js CHANGED
@@ -16,9 +16,15 @@ var Badge = exports.Badge = function Badge(_ref) {
16
16
  size = _ref.size,
17
17
  onClose = _ref.onClose;
18
18
  return /*#__PURE__*/_react["default"].createElement("span", {
19
- className: "badge badge-".concat(color, " \n ").concat(size ? "badge-".concat(size) : '', " \n ").concat(onClose && 'badge-closable')
20
- }, children, onClose && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
21
- background: color === 'default' ? 'black' : 'white',
19
+ className: "badge bg-".concat(color, " ").concat(size ? "badge-".concat(size) : '', " ").concat(onClose ? 'badge-closable' : ''),
20
+ style: {
21
+ display: 'inline-flex',
22
+ alignItems: 'center',
23
+ justifyContent: 'center'
24
+ }
25
+ }, /*#__PURE__*/_react["default"].createElement("span", {
26
+ className: "badge-content"
27
+ }, children), onClose && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
22
28
  onClick: onClose,
23
29
  size: size,
24
30
  icon: _freeSolidSvgIcons.faTimes
package/components/dialog/ConfirmationDialog.js CHANGED
@@ -32,7 +32,7 @@ var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialo
32
32
  }, /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, icon && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
33
33
  icon: icon
34
34
  }), " ", title), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_flex.Flex, {
35
- align: "right"
35
+ alignItems: "end"
36
36
  }, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
37
37
  onClick: onClose
38
38
  }, textCancel)), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
package/components/expandable/Expandable.js CHANGED
@@ -26,9 +26,12 @@ var ExpandableContext = /*#__PURE__*/(0, _react.createContext)(null);
26
26
  var Expandable = exports.Expandable = function Expandable(_ref) {
27
27
  var children = _ref.children,
28
28
  _ref$open = _ref.open,
29
- open = _ref$open === void 0 ? false : _ref$open;
29
+ open = _ref$open === void 0 ? false : _ref$open,
30
+ _ref$icon = _ref.icon,
31
+ icon = _ref$icon === void 0 ? _freeSolidSvgIcons.faPlus : _ref$icon;
30
32
  var _useState = (0, _react.useState)({
31
- open: open
33
+ open: open,
34
+ icon: icon
32
35
  }),
33
36
  _useState2 = _slicedToArray(_useState, 2),
34
37
  settings = _useState2[0],
@@ -41,11 +44,14 @@ var Expandable = exports.Expandable = function Expandable(_ref) {
41
44
  }, children);
42
45
  };
43
46
  var ExpandableButton = exports.ExpandableButton = function ExpandableButton(_ref2) {
44
- var onClick = _ref2.onClick;
47
+ var onClick = _ref2.onClick,
48
+ icon = _ref2.icon;
45
49
  var _useContext = (0, _react.useContext)(ExpandableContext),
46
50
  settings = _useContext.settings,
47
51
  setSettings = _useContext.setSettings;
48
52
  var open = settings.open;
53
+ // Si está abierto, siempre mostrar faPlus girado; si está cerrado, mostrar icono configurable
54
+ var iconToUse = open ? _freeSolidSvgIcons.faPlus : icon || settings.icon || _freeSolidSvgIcons.faPlus;
49
55
  var handleClick = function handleClick(e) {
50
56
  setSettings(_objectSpread(_objectSpread({}, settings), {}, {
51
57
  open: !open
@@ -54,7 +60,7 @@ var ExpandableButton = exports.ExpandableButton = function ExpandableButton(_ref
54
60
  };
55
61
  return /*#__PURE__*/_react["default"].createElement(_IconButton.IconButton, {
56
62
  onClick: handleClick,
57
- icon: _freeSolidSvgIcons.faPlus,
63
+ icon: iconToUse,
58
64
  style: {
59
65
  transition: 'transform 0.2s ease',
60
66
  transform: open ? 'rotate(45deg)' : 'rotate(0deg)'
@@ -83,7 +89,8 @@ Expandable.propTypes = {
83
89
  };
84
90
  ExpandableButton.propTypes = {
85
91
  children: _propTypes["default"].any,
86
- onClick: _propTypes["default"].func
92
+ onClick: _propTypes["default"].func,
93
+ icon: _propTypes["default"].any
87
94
  };
88
95
  ExpandableArea.propTypes = {
89
96
  children: _propTypes["default"].any,
package/components/flex/Flex.js CHANGED
@@ -82,9 +82,9 @@ var FlexItem = exports.FlexItem = function FlexItem(_ref2) {
82
82
  Flex.propTypes = {
83
83
  children: _propTypes["default"].node,
84
84
  /**
85
- * justify the content horizontally. Options: 'center', 'right', 'left', 'between'
85
+ * justify the content horizontally. Options: 'start', 'center', 'end', 'between'
86
86
  */
87
- justify: _propTypes["default"].oneOf(['left', 'center', 'right', 'between']),
87
+ justify: _propTypes["default"].oneOf(['start', 'center', 'end', 'between']),
88
88
  /**
89
89
  * align the items vertically. Options: 'start', 'center', 'end', 'stretch', 'baseline'
90
90
  */
package/components/images/ZoomImage.js CHANGED
@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.ZoomImage = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _util = require("../util");
11
10
  var _useImageLoader3 = require("./useImageLoader");
12
11
  var _noImage = _interopRequireDefault(require("../../assets/no-image.jpg"));
12
+ var _util = require("../util");
13
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
14
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
15
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -276,9 +276,8 @@ var ZoomImage = exports.ZoomImage = function ZoomImage(_ref) {
276
276
  },
277
277
  onMouseDown: zoom > minZoom ? onMouseDown : undefined,
278
278
  onTouchStart: shouldCaptureTouchGestures ? onTouchStart : undefined
279
- }) : /*#__PURE__*/_react["default"].createElement(_util.Skeleton, {
280
- width: "100%",
281
- height: height
279
+ }) : /*#__PURE__*/_react["default"].createElement(_util.Loader, {
280
+ inline: true
282
281
  }));
283
282
  };
284
283
  ZoomImage.propTypes = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "gdx-ui",
3
- "version": "2.1.3",
3
+ "version": "2.1.5",
4
4
  "description": "UI gdx",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
package/stories/images/ZoomImage.stories.js CHANGED
@@ -17,6 +17,7 @@ var Default = exports.Default = {
17
17
  src: 'https://www.gadxe.com/files/imgs/i2507/b/32594000244835-847_purple_1.webp',
18
18
  alt: 'Example Image',
19
19
  width: '50%',
20
+ height: 500,
20
21
  bordered: true,
21
22
  maxZoom: 2,
22
23
  showHelper: true
package/stories/utils/Expanded.stories.js CHANGED
@@ -10,6 +10,7 @@ var _Expandable = require("../../components/expandable/Expandable");
10
10
  var _Separator = require("../../components/util/Separator");
11
11
  var _components = require("../../components");
12
12
  var _Tooltip = _interopRequireDefault(require("../../components/util/Tooltip"));
13
+ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
13
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
15
  var _default = exports["default"] = {
15
16
  title: 'Utils/Expandable',
@@ -20,7 +21,9 @@ var Default = exports.Default = {
20
21
  render: function render() {
21
22
  return /*#__PURE__*/_react["default"].createElement(_Expandable.Expandable, {
22
23
  open: false
23
- }, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, null), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Information, {
24
+ }, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, {
25
+ icon: _freeSolidSvgIcons.faSliders
26
+ }), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Information, {
24
27
  color: "primary"
25
28
  }, "More information shown when expanded.")));
26
29
  }