gdx-ui 2.4.1 → 2.5.0

package/base.css

@@ -1 +1 @@
-body{background:var(--body-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;font-size:14px;font-weight:300;line-height:1.5em}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px 0;padding:0}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px;font-weight:500}small{font-size:12px}b,strong{font-weight:500}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}button{font-size:14px}p{margin:0 0 15px}code,pre{font-family:monospace;font-size:14px;color:#777}pre{background:var(--body-bg);border-radius:15px;border:solid 1px var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}hr{border:none;border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.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.66666667px}.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;--warning-color:#ffd500;--active-color:#64FA00;--color-gray:#777}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#777;background:#fff;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-footer .row,.box .box-toolbar .row{margin-bottom:0}.box .box-toolbar .form-element{margin-bottom:0}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:solid 1px var(--border-color)}button:focus-visible{outline:1px auto #1D9EFC}.btn-circle:active,.btn:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:focus-visible,.btn:focus-visible{outline:2px solid #038df2;outline-offset:2px}.btn{border:none;border-radius:7.5px;box-sizing:border-box;display:inline-block;font-size:14px;margin:0;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;padding:12px 20px;transition:background .2s cubic-bezier(.4, 0, .2, 1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn.active{box-shadow:inset 0 3px 5px rgba(0,0,0,.125);background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:solid 1px transparent;background:0 0;color:#1d9efc;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-outline-default{border:solid 1px #919191;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:solid 1px #1d9efc;color:#fff}.btn-outline-primary{border:solid 1px #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:solid 1px #ea0835;color:#fff}.btn-outline-alert{border:solid 1px #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:solid 1px #38c153;color:#fff}.btn-outline-success{border:solid 1px #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:solid 1px #ffd500}.btn-outline-warning{border:solid 1px #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;box-sizing:border-box;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;background:rgba(0,0,0,.05)}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:hover{background:rgba(0,0,0,.1)}.btn-circle:active{background:rgba(0,0,0,.3)}.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{height:48px;width:48px;min-height:48px;min-width:48px;max-height:48px;max-width:48px;font-size:20px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:3px solid rgba(234,8,53,.7)!important}.btn-alert:focus-visible{outline:2px solid #c7072d;outline-offset:2px}.btn-success:active{outline:3px solid rgba(56,193,83,.7)!important}.btn-success:focus-visible{outline:2px solid #30a547;outline-offset:2px}.btn-warning:active{outline:3px solid rgba(255,213,0,.7)!important}.btn-warning:focus-visible{outline:2px solid #dbb700;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;background:var(--el-bg);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;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.drawer{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:fixed;z-index:10001;display:flex;flex-direction:column;box-shadow:0 5px 30px rgba(0,0,0,.35);max-width:100vw;max-height:100vh}.drawer-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.drawer-content{flex:1;overflow-y:auto;padding:15px}.drawer-close{position:absolute;top:10px;right:15px;z-index:2}.drawer-right{right:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-right .2s ease-out}.drawer-left{left:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-left .2s ease-out}.drawer-top{left:0;top:0;width:100vw;height:min(360px,92vh);border-radius:0 0 15px 15px;animation:drawer-slide-in-top .2s ease-out}.drawer-bottom{left:0;bottom:0;width:100vw;height:min(360px,92vh);border-radius:15px 15px 0 0;animation:drawer-slide-in-bottom .2s ease-out}.drawer-closing.drawer-right{animation:drawer-slide-out-right .2s ease-in forwards}.drawer-closing.drawer-left{animation:drawer-slide-out-left .2s ease-in forwards}.drawer-closing.drawer-top{animation:drawer-slide-out-top .2s ease-in forwards}.drawer-closing.drawer-bottom{animation:drawer-slide-out-bottom .2s ease-in forwards}.drawer-overlay{pointer-events:auto;z-index:10000}@keyframes drawer-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes drawer-slide-out-right{to{transform:translateX(100%)}}@keyframes drawer-slide-out-left{to{transform:translateX(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.dialog{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;max-width:90vw;max-height:calc(100vh - 32px);width:auto;margin:0;z-index:10001;display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.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-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:2px solid #038df2;outline-offset:2px}.dialog .box{box-shadow:none;border:solid 1px var(--border-color)!important}.dialog:focus{outline:0}.dialog-overlay{pointer-events:auto;z-index:10000}.dropdown{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;position:absolute;z-index:99;min-width:400px;max-width:600px;left:0;cursor:pointer;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}.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-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}.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:3px solid rgba(29,158,252,.7);border-color:#1d9efc;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.input-inside,input,select,textarea{display:inline-block;padding:10px;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px 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{display:inline-block;width:100%;min-height:1.4em;padding:2px 0;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0;margin-bottom:0!important}.editable:focus{background:var(--input-bg);outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#777;pointer-events:none}.editable:focus::before{content:''}.inline-elements .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:3px solid rgba(234,8,53,.7)!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;height:auto;position:relative}.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-inside :first-child{border-radius:7.5px 0 0 7.5px}.input-inside :last-child{border-radius:0 7.5px 7.5px 0}.input-inside:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside{position:relative}.input-inside .btn-circle{height:24px;width:24px}.input-focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-btns{position:absolute;right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#777;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;content:"";line-height:0}.input-inside:after{clear:both}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside input:focus,.input-inside select:focus{outline:0!important;border-color:transparent}.input-inside select{border:none;box-shadow:none;margin:0;padding:10px;color:#777;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-inside select:focus{background:#e2f1fb}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;height:auto}label{display:block}label input,label select,label textarea{margin-bottom:0}fieldset{border:solid 1px var(--border-color);margin-bottom:15px;border-radius:7.5px}legend{color:#777;padding:0 5px}fieldset label{margin-bottom:15px}td label{margin-bottom:0}.form-inline:after,.form-inline:before{display:table;content:"";line-height:0}.form-inline:after{clear:both}.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;content:"";line-height:0}.toolbar-group:after{clear:both}.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:7.5px 0 0 7.5px}.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 7.5px 7.5px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#777;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;cursor:pointer;left:0;position:absolute;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;content:"";height:15px;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:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#777}.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{content:"";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}.code-editor{color:#777;font-family:monospace;font-size:12px;border:0;padding:0;width:100%}.code-editor:focus{outline:0!important}.information{border-radius:15px;padding:15px;margin-bottom: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;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;align-items:center;justify-content:center}.badge:empty{display:none}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#777}.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:30px;box-shadow:inset 0 1px 4px rgba(0,0,0,.1)}.badge-content{width:100%;display:flex;align-items:center;justify-content:center;padding:7px 18px}.badge-closable .badge-content{padding-right:0!important}.badge-small .badge-content{padding:2px 10px;font-size:12px;min-height:20px}.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 0}.clear-list.default li{margin:0 0 15px 0}.clear-list.plenty li{margin:0 0 22.5px 0}.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:first-child{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%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}100%{transform:scale(1);background-color:#1895ff}}.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 0;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;margin-bottom: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}.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%)}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#aaa 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;border-radius:15px;padding:15px;margin-bottom:15px;position:relative;overflow:hidden}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#fff;border-radius:15px;margin:auto;margin-bottom:15px;box-sizing:border-box;position:relative;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;left:50%;transform:translateX(-50%);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;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);border-bottom:solid 1px var(--border-color);color:#777;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:#777!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:#5e5e5e}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 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}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table td .btn,.table td .row,.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}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table textarea{margin-bottom:0}.html-editor .table{table-layout:fixed;width:100%;border-collapse:collapse;border:1px dashed rgba(119,119,119,.4)}.html-editor .table td,.html-editor .table th{border:1px dashed rgba(119,119,119,.4);min-width:40px}.tabs{display:flex;border-bottom:solid 1px var(--border-color)}.tabs .tab{padding:15px;margin:0;border:none;cursor:pointer;border:solid 1px transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:solid 1px 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:#919191;pointer-events:none}.tab-content{padding:15px;border:solid 1px 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;overflow:hidden;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:solid 1px var(--border-color)}.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}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{overflow:hidden;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);border-radius:15px;color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;transform:translateX(-50%);display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;border-radius:15px;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 0}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;height:1.6em;width:15px;color:#fff;border-bottom:1px solid #646464;content:"";display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;height:1.6em;width:15px;color:#fff;content:"";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:#777!important}.bg-primary{background-color:#1d9efc!important;color:#fff}.bg-success{background-color:#38c153!important;color:#fff}.bg-alert{background-color:#ea0835!important;color:#fff}.bg-warning{background-color:#ffd500!important;color:#272729}.bg-default,.bg-gray{background-color:#777!important;color:#fff}.bg-active{background-color:#64fa00!important}.bg-alert .btn-circle svg,.bg-default .btn-circle svg,.bg-primary .btn-circle svg,.bg-success .btn-circle svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#777;font-size:12px;font-weight:400}.note a{color:#777;text-decoration:underline}.note a:hover{color:#1d9efc}.relative{position:relative}.absolute{position:absolute}.corner-btn{position:absolute;right:15px;top:15px}.center{text-align:center}.right{text-align:right}.left{text-align:left}.content{padding:15px}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.rounded{border-radius:15px}.bordered{border:solid 1px 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{background:var(--overlay-color);height:100%;left:0;position:fixed;top:0;transition:.2s;width:100%;z-index:99}.component-locker{background:var(--overlay-color);border-radius:15px;height:100%;left:0;position:absolute;top:0;transition:.2s;width:100%;z-index:9}.outline-primary{outline:1px dashed #1D9EFC}.outline-success{outline:1px dashed #38c153}.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{position:relative;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{width:820px}.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.66666667px}.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{width:100%}.snackbar{width:100%}.expanded-phone{width:100%}.dialog{width:95%!important}.hide-phone{display:none!important}.show-phone{display:block!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}}
+body{background:var(--body-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;font-size:14px;font-weight:300;line-height:1.5em}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px 0;padding:0}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px;font-weight:500}small{font-size:12px}b,strong{font-weight:500}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}button{font-size:14px}p{margin:0 0 15px}code,pre{font-family:monospace;font-size:14px;color:#777}pre{background:var(--body-bg);border-radius:15px;border:solid 1px var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}hr{border:none;border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{box-sizing:border-box;min-height:100%;display:flex;flex-direction:column}.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.66666667px}.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;--warning-color:#ffd500;--active-color:#64FA00;--color-gray:#777}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#777;background:#fff;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-footer .row,.box .box-toolbar .row{margin-bottom:0}.box .box-toolbar .form-element{margin-bottom:0}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:solid 1px var(--border-color)}button:focus-visible{outline:1px auto #1D9EFC}.btn-circle:active,.btn:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:focus-visible,.btn:focus-visible{outline:2px solid #038df2;outline-offset:2px}.btn{border:none;border-radius:7.5px;box-sizing:border-box;display:inline-block;font-size:14px;margin:0;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;padding:12px 20px;transition:background .2s cubic-bezier(.4, 0, .2, 1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn.active{box-shadow:inset 0 3px 5px rgba(0,0,0,.125);background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:solid 1px transparent;background:0 0;color:#1d9efc;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:solid 1px var(--btn-bg);color:var(--color)}.btn-outline-default{border:solid 1px #919191;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:solid 1px #1d9efc;color:#fff}.btn-outline-primary{border:solid 1px #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:solid 1px #ea0835;color:#fff}.btn-outline-alert{border:solid 1px #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:solid 1px #38c153;color:#fff}.btn-outline-success{border:solid 1px #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:solid 1px #ffd500}.btn-outline-warning{border:solid 1px #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;box-sizing:border-box;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;background:rgba(0,0,0,.05)}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:3px solid rgba(29,158,252,.7)!important}.btn-circle:hover{background:rgba(0,0,0,.1)}.btn-circle:active{background:rgba(0,0,0,.3)}.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{height:48px;width:48px;min-height:48px;min-width:48px;max-height:48px;max-width:48px;font-size:20px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:3px solid rgba(234,8,53,.7)!important}.btn-alert:focus-visible{outline:2px solid #c7072d;outline-offset:2px}.btn-success:active{outline:3px solid rgba(56,193,83,.7)!important}.btn-success:focus-visible{outline:2px solid #30a547;outline-offset:2px}.btn-warning:active{outline:3px solid rgba(255,213,0,.7)!important}.btn-warning:focus-visible{outline:2px solid #dbb700;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;background:var(--el-bg);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;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.drawer{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:fixed;z-index:10001;display:flex;flex-direction:column;box-shadow:0 5px 30px rgba(0,0,0,.35);max-width:100vw;max-height:100vh}.drawer-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.drawer-content{flex:1;overflow-y:auto;padding:15px}.drawer-close{position:absolute;top:10px;right:15px;z-index:2}.drawer-right{right:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-right .2s ease-out}.drawer-left{left:0;top:0;width:min(420px,92vw);height:100vh;border-radius:0;animation:drawer-slide-in-left .2s ease-out}.drawer-top{left:0;top:0;width:100vw;height:min(360px,92vh);border-radius:0 0 15px 15px;animation:drawer-slide-in-top .2s ease-out}.drawer-bottom{left:0;bottom:0;width:100vw;height:min(360px,92vh);border-radius:15px 15px 0 0;animation:drawer-slide-in-bottom .2s ease-out}.drawer-closing.drawer-right{animation:drawer-slide-out-right .2s ease-in forwards}.drawer-closing.drawer-left{animation:drawer-slide-out-left .2s ease-in forwards}.drawer-closing.drawer-top{animation:drawer-slide-out-top .2s ease-in forwards}.drawer-closing.drawer-bottom{animation:drawer-slide-out-bottom .2s ease-in forwards}.drawer-overlay{pointer-events:auto;z-index:10000}@keyframes drawer-slide-in-right{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes drawer-slide-out-right{to{transform:translateX(100%)}}@keyframes drawer-slide-out-left{to{transform:translateX(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.dialog{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);min-width:320px;max-width:90vw;max-height:calc(100vh - 32px);width:auto;margin:0;z-index:10001;display:flex;flex-direction:column;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.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;overflow-y:auto}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:2px solid #038df2;outline-offset:2px}.dialog .box{box-shadow:none;border:solid 1px var(--border-color)!important}.dialog:focus{outline:0}.dialog-overlay{pointer-events:auto;z-index:10000}.dropdown{background:var(--el-bg);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:transform .25s ease,box-shadow .25s ease;transition-delay:0s;border:1px solid var(--border-color);padding:15px 0;position:absolute;z-index:99;min-width:400px;max-width:600px;left:0;cursor:pointer;margin:0;overflow:hidden}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.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-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}.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:3px solid rgba(29,158,252,.7);border-color:#1d9efc;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.input-inside,input,select,textarea{display:inline-block;padding:10px;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px 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{display:inline-block;width:100%;min-height:1.4em;padding:2px 0;box-sizing:border-box;font-size:14px;line-height:1.5em;border-radius:7.5px;vertical-align:middle;border:solid 1px transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0;margin-bottom:0!important}.editable:focus{background:var(--input-bg);outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#777;pointer-events:none}.editable:focus::before{content:''}.inline-elements .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:3px solid rgba(234,8,53,.7)!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;height:auto;position:relative}.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-inside :first-child{border-radius:7.5px 0 0 7.5px}.input-inside :last-child{border-radius:0 7.5px 7.5px 0}.input-inside:focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside{position:relative}.input-inside .btn-circle{height:24px;width:24px}.input-focus{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-btns{position:absolute;right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#777;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;content:"";line-height:0}.input-inside:after{clear:both}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc}.input-inside input:focus,.input-inside select:focus{outline:0!important;border-color:transparent}.input-inside select{border:none;box-shadow:none;margin:0;padding:10px;color:#777;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.input-inside select:focus{background:#e2f1fb}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;height:auto}label{display:block}label input,label select,label textarea{margin-bottom:0}fieldset{border:solid 1px var(--border-color);margin-bottom:15px;border-radius:7.5px}legend{color:#777;padding:0 5px}fieldset label{margin-bottom:15px}td label{margin-bottom:0}.form-inline:after,.form-inline:before{display:table;content:"";line-height:0}.form-inline:after{clear:both}.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;content:"";line-height:0}.toolbar-group:after{clear:both}.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:7.5px 0 0 7.5px}.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 7.5px 7.5px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#777;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;cursor:pointer;left:0;position:absolute;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;content:"";height:15px;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:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:3px solid rgba(29,158,252,.7);border-color:#1d9efc;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#777}.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.disabled{color:#777;cursor:not-allowed}.cust-radio.disabled .checkmark{opacity:.5}.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{content:"";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}.code-editor{color:#777;font-family:monospace;font-size:12px;border:0;padding:0;width:100%}.code-editor:focus{outline:0!important}.information{border-radius:15px;padding:15px;margin-bottom: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;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;align-items:center;justify-content:center}.badge:empty{display:none}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#777}.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:30px;box-shadow:inset 0 1px 4px rgba(0,0,0,.1)}.badge-content{width:100%;display:flex;align-items:center;justify-content:center;padding:7px 18px}.badge-closable .badge-content{padding-right:0!important}.badge-small .badge-content{padding:2px 10px;font-size:12px;min-height:20px}.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 0}.clear-list.default li{margin:0 0 15px 0}.clear-list.plenty li{margin:0 0 22.5px 0}.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:first-child{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%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}100%{transform:scale(1);background-color:#1895ff}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.box .loader-lock,.dialog .loader-lock,.widget .loader-lock{border-radius:15px}.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 0;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;margin-bottom: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}.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%)}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#aaa 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;border-radius:15px;padding:15px;margin-bottom:15px;position:relative;overflow:hidden}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#fff;border-radius:15px;margin:auto;margin-bottom:15px;box-sizing:border-box;position:relative;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;left:50%;transform:translateX(-50%);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;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);border-bottom:solid 1px var(--border-color);color:#777;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:#777!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:#5e5e5e}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 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}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table td .btn,.table td .row,.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}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table textarea{margin-bottom:0}.html-editor .table{table-layout:fixed;width:100%;border-collapse:collapse;border:1px dashed rgba(119,119,119,.4)}.html-editor .table td,.html-editor .table th{border:1px dashed rgba(119,119,119,.4);min-width:40px}.tabs{display:flex;border-bottom:solid 1px var(--border-color)}.tabs .tab{padding:15px;margin:0;border:none;cursor:pointer;border:solid 1px transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:solid 1px 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:#919191;pointer-events:none}.tab-content{padding:15px;border:solid 1px 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;overflow:hidden;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:solid 1px var(--border-color)}.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}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{overflow:hidden;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);border-radius:15px;color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;transform:translateX(-50%);display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(calc(-50% + var(--tooltip-horizontal-offset,0)));background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;border-radius:15px;box-sizing:border-box;max-width:calc(100vw - 16px);overflow-wrap:anywhere;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}.tooltip-bottom{bottom:auto;top:calc(100% + 6px)}ul.tree{list-style:none;padding:0;margin:0 0 15px 0}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;height:1.6em;width:15px;color:#fff;border-bottom:1px solid #646464;content:"";display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;height:1.6em;width:15px;color:#fff;content:"";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:#777!important}.bg-primary{background-color:#1d9efc!important;color:#fff}.bg-success{background-color:#38c153!important;color:#fff}.bg-alert{background-color:#ea0835!important;color:#fff}.bg-warning{background-color:#ffd500!important;color:#272729}.bg-default,.bg-gray{background-color:#777!important;color:#fff}.bg-active{background-color:#64fa00!important}.bg-alert .btn-circle svg,.bg-default .btn-circle svg,.bg-primary .btn-circle svg,.bg-success .btn-circle svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#777;font-size:12px;font-weight:400}.note a{color:#777;text-decoration:underline}.note a:hover{color:#1d9efc}.relative{position:relative}.absolute{position:absolute}.corner-btn{position:absolute;right:15px;top:15px}.center{text-align:center}.right{text-align:right}.left{text-align:left}.content{padding:15px}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.rounded{border-radius:15px}.bordered{border:solid 1px 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{background:var(--overlay-color);height:100%;left:0;position:fixed;top:0;transition:.2s;width:100%;z-index:99}.component-locker{background:var(--overlay-color);border-radius:15px;height:100%;left:0;position:absolute;top:0;transition:.2s;width:100%;z-index:9}.outline-primary{outline:1px dashed #1D9EFC}.outline-success{outline:1px dashed #38c153}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.margin-none{margin-bottom:0}.margin-compact{margin-bottom:7.5px}.margin-default,.margin-normal{margin-bottom:15px}.margin-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}.text-wrap{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-bold{font-weight:700}.text-italic{font-style:italic}.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{position:relative;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{width:820px}.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.66666667px}.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{width:100%}.snackbar{width:100%}.expanded-phone{width:100%}.dialog{width:95%!important}.hide-phone{display:none!important}.show-phone{display:block!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/box/Box.js

@@ -29,11 +29,13 @@ var BoxContext = /*#__PURE__*/(0, _react.createContext)(null);
  */
 var Box = exports.Box = function Box(_ref) {
   var children = _ref.children,
+    color = _ref.color,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? true : _ref$open,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
     _ref$collapsible = _ref.collapsible,
     collapsible = _ref$collapsible === void 0 ? true : _ref$collapsible,
-    color = _ref.color,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _useState = (0, _react.useState)(open),
@@ -57,8 +59,8 @@ var Box = exports.Box = function Box(_ref) {
       toggleOpen: toggleOpen
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "box"
-  }, isLoading && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Locker.Locker, null), /*#__PURE__*/_react["default"].createElement(_Loader.Loader, null)), children));
+    className: "box ".concat(bordered ? 'bordered' : '')
+  }, isLoading && /*#__PURE__*/_react["default"].createElement(_Loader.Loader, null), children));
 };
 var BoxHeader = exports.BoxHeader = function BoxHeader(_ref2) {
   var children = _ref2.children;

package/components/button/Button.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.Button = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["children", "collapsed", "type", "decoration", "color", "size", "disabled", "expanded", "className"];
+var _excluded = ["children", "margin", "type", "decoration", "color", "size", "disabled", "expanded", "className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var Button = exports.Button = function Button(_ref) {
   var children = _ref.children,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 'normal' : _ref$margin,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     _ref$decoration = _ref.decoration,
@@ -33,7 +33,7 @@ var Button = exports.Button = function Button(_ref) {
   return /*#__PURE__*/_react["default"].createElement("button", _extends({
     type: type,
     disabled: disabled,
-    className: "btn \n        btn-".concat(color, " \n        btn-").concat(decoration, " \n        btn-").concat(decoration, "-").concat(color, " \n        btn-size-").concat(size, " ").concat(collapsed ? 'collapesed-bottom' : '', "\n        ").concat(className, "\n        ").concat(expanded ? 'expanded' : '')
+    className: "btn \n        btn-".concat(color, " \n        btn-").concat(decoration, " \n        btn-").concat(decoration, "-").concat(color, " \n        btn-size-").concat(size, " ").concat(margin ? "margin-".concat(margin) : '', "\n        ").concat(className, "\n        ").concat(expanded ? 'expanded' : '')
   }, props), children);
 };
 Button.propTypes = {
@@ -42,7 +42,7 @@ Button.propTypes = {
   color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success', 'warning']),
   decoration: _propTypes["default"].oneOf(['normal', 'outline', 'link']),
   disabled: _propTypes["default"].bool,
-  collapsed: _propTypes["default"].bool,
+  margin: _propTypes["default"].oneOf(['none', 'compact', 'normal', 'plenty']),
   expanded: _propTypes["default"].bool,
   size: _propTypes["default"].oneOf(['small', 'default', 'large']),
   onClick: _propTypes["default"].func

package/components/dialog/AlertDialog.js

@@ -20,10 +20,14 @@ var AlertDialog = exports.AlertDialog = function AlertDialog(_ref) {
     color = _ref.color,
     onClose = _ref.onClose,
     _ref$textClose = _ref.textClose,
-    textClose = _ref$textClose === void 0 ? 'Cerrar' : _ref$textClose;
+    textClose = _ref$textClose === void 0 ? 'Cerrar' : _ref$textClose,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, {
     color: color,
-    onClose: onClose
+    onClose: onClose,
+    isLoading: isLoading,
+    closable: !isLoading
   }, /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, _fontawesomeSvgCore.icon && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _fontawesomeSvgCore.icon
   }), title), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_flex.Flex, {
@@ -31,8 +35,9 @@ var AlertDialog = exports.AlertDialog = function AlertDialog(_ref) {
     justify: "end"
   }, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     color: color,
-    onClick: onClose
-  }, textClose)))));
+    onClick: onClose,
+    disabled: isLoading
+  }, isLoading ? 'Loading...' : textClose)))));
 };
 AlertDialog.propTypes = {
   children: _propTypes["default"].any,
@@ -42,5 +47,6 @@ AlertDialog.propTypes = {
   color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success', 'warning']),
   closable: _propTypes["default"].bool,
   width: _propTypes["default"].string,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  isLoading: _propTypes["default"].bool
 };

package/components/dialog/ConfirmationDialog.js

@@ -25,25 +25,33 @@ var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialo
     _ref$textConfirm = _ref.textConfirm,
     textConfirm = _ref$textConfirm === void 0 ? 'Aceptar' : _ref$textConfirm,
     _ref$textCancel = _ref.textCancel,
-    textCancel = _ref$textCancel === void 0 ? 'Cancelar' : _ref$textCancel;
+    textCancel = _ref$textCancel === void 0 ? 'Cancelar' : _ref$textCancel,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? true : _ref$closable;
   return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, {
     open: open,
     width: width,
     height: height,
     color: color,
-    onClose: onClose
+    onClose: onClose,
+    isLoading: isLoading,
+    closable: !isLoading && closable
   }, /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, icon && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: icon
   }), " ", title), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_flex.Flex, {
     alignItems: "center",
     justify: "end"
   }, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
-    onClick: onClose
+    onClick: onClose,
+    disabled: isLoading
   }, textCancel)), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     type: "submit",
     onClick: onConfirm,
-    color: color ? color : 'primary'
-  }, textConfirm)))));
+    color: color ? color : 'primary',
+    disabled: isLoading
+  }, isLoading ? 'Loading...' : textConfirm)))));
 };
 ConfirmationDialog.propTypes = {
   children: _propTypes["default"].any,
@@ -57,5 +65,6 @@ ConfirmationDialog.propTypes = {
   width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   onClose: _propTypes["default"].func,
-  onConfirm: _propTypes["default"].func
+  onConfirm: _propTypes["default"].func,
+  isLoading: _propTypes["default"].bool
 };

package/components/dialog/Dialog.js

@@ -98,8 +98,9 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
       zIndex: zIndex + 1
     },
     role: "dialog",
-    "aria-modal": "true"
-  }, isLoading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_util.Locker, null), /*#__PURE__*/_react["default"].createElement(_util.Loader, null)), locked && /*#__PURE__*/_react["default"].createElement(_util.Locker, null), closable && /*#__PURE__*/_react["default"].createElement("div", {
+    "aria-modal": "true",
+    "aria-busy": isLoading
+  }, isLoading && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_util.Loader, null)), locked && /*#__PURE__*/_react["default"].createElement(_util.Locker, null), closable && /*#__PURE__*/_react["default"].createElement("div", {
     className: "dialog-close ".concat(color !== 'default' ? "bg-".concat(color) : '')
   }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     icon: _freeSolidSvgIcons.faTimes,

package/components/flex/Flex.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FlexItem = exports.Flex = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["children", "justify", "alignItems", "gap", "wrap", "expand", "columns", "phone", "tablet", "style", "className", "spacing"],
+var _excluded = ["children", "justify", "alignItems", "gap", "wrap", "expand", "columns", "phone", "tablet", "style", "className", "spacing", "margin"],
   _excluded2 = ["children", "className", "style", "grow", "align"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -40,8 +40,10 @@ var Flex = exports.Flex = function Flex(_ref) {
     className = _ref.className,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    margin = _ref.margin,
     props = _objectWithoutProperties(_ref, _excluded);
   var isGrid = columns != null;
+  var resolvedMargin = margin !== null && margin !== void 0 ? margin : spacing;
 
   // if expand is true, we pass grow=1 to children that don't have it
   var childrenWithGrow = _react["default"].Children.map(children, function (child) {
@@ -51,7 +53,7 @@ var Flex = exports.Flex = function Flex(_ref) {
     }) : child;
   });
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "flex \n        flex-justify-".concat(justify, " \n        flex-align-").concat(alignItems, " \n        spacing-").concat(spacing, "\n        ").concat(className || '', "\n      "),
+    className: "flex \n        flex-justify-".concat(justify, " \n        flex-align-").concat(alignItems, " \n        margin-").concat(resolvedMargin, "\n        ").concat(className || '', "\n      "),
     "data-cols": isGrid ? '' : undefined,
     style: _objectSpread({
       flexWrap: wrap ? 'wrap' : 'nowrap',
@@ -109,10 +111,12 @@ Flex.propTypes = {
   tablet: _propTypes["default"].number,
   style: _propTypes["default"].object,
   className: _propTypes["default"].string,
+  /** @deprecated Use margin instead. */
+  spacing: _propTypes["default"].oneOf(['default', 'none', 'compact', 'plenty']),
   /**
-   * Spacing between items. Options: 'default', 'none', 'compact', 'plenty'
+   * Bottom margin. Options: 'default', 'none', 'compact', 'plenty'
    */
-  spacing: _propTypes["default"].oneOf(['default', 'none', 'compact', 'plenty'])
+  margin: _propTypes["default"].oneOf(['default', 'none', 'compact', 'plenty'])
 };
 FlexItem.propTypes = {
   children: _propTypes["default"].node,

package/components/forms/Radio.js

@@ -32,7 +32,7 @@ var Radio = exports.Radio = /*#__PURE__*/_react["default"].forwardRef(function (
     className: 'input-wrapper'
   }, options && options.map(function (option) {
     return /*#__PURE__*/_react["default"].createElement("label", {
-      className: "cust-radio ".concat(inline ? 'inline' : ''),
+      className: "cust-radio ".concat(inline ? 'inline' : '', " ").concat(option.disabled ? 'disabled' : ''),
       key: option.value
     }, /*#__PURE__*/_react["default"].createElement("input", _extends({
       type: "radio",
@@ -52,6 +52,11 @@ Radio.propTypes = {
   required: _propTypes["default"].bool,
   inline: _propTypes["default"].bool,
   error: _propTypes["default"].string,
-  options: _propTypes["default"].any,
+  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].string.isRequired,
+    text: _propTypes["default"].string,
+    disabled: _propTypes["default"].bool
+  })),
+  value: _propTypes["default"].string,
   spacing: _propTypes["default"].oneOf(['none', 'compact', 'normal', 'plenty'])
 };

package/components/information/Information.js

@@ -14,10 +14,10 @@ var Information = exports.Information = function Information(_ref) {
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? false : _ref$icon,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 'default' : _ref$margin;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "information information-".concat(color, " spacing-").concat(spacing)
+    className: "information information-".concat(color, " margin-").concat(margin)
   }, icon && /*#__PURE__*/_react["default"].createElement("div", {
     className: "information-icon"
   }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
@@ -30,5 +30,5 @@ Information.propTypes = {
   children: _propTypes["default"].any,
   color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'warning', 'success']),
   icon: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object]),
-  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
+  margin: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
 };

package/components/util/Text.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Text = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["children", "html", "className", "size", "as", "inline", "bold", "textWrap", "spacing", "style"];
+var _excluded = ["children", "html", "className", "size", "as", "inline", "bold", "italic", "textWrap", "margin", "style"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -29,26 +29,22 @@ var Text = exports.Text = function Text(_ref) {
     inline = _ref$inline === void 0 ? false : _ref$inline,
     _ref$bold = _ref.bold,
     bold = _ref$bold === void 0 ? false : _ref$bold,
+    _ref$italic = _ref.italic,
+    italic = _ref$italic === void 0 ? false : _ref$italic,
     _ref$textWrap = _ref.textWrap,
     textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 'default' : _ref$margin,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var Tag = as || (inline ? 'span' : 'div');
   // const isInlineTag = Tag === 'span';
   var isHeadingTag = /^h[1-6]$/.test(Tag);
   // const addBottomMargin = !isInlineTag && Tag !== 'p' && !isHeadingTag;
-  var mergedStyle = _objectSpread({
-    whiteSpace: textWrap ? 'nowrap' : 'normal',
-    overflow: textWrap ? 'hidden' : undefined,
-    textOverflow: textWrap ? 'ellipsis' : undefined,
-    width: textWrap && !inline ? '100%' : undefined,
-    display: textWrap && inline ? 'inline-block' : undefined
-  }, style);
+  var mergedStyle = _objectSpread({}, style);
   if (html !== undefined && html !== null) {
     return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
-      className: "\n        ".concat(isHeadingTag ? '' : "text-size-".concat(size), "\n        spacing-").concat(inline ? 'inline' : spacing, "\n        ").concat(bold ? 'strong' : '', "\n        ").concat(className),
+      className: "\n        ".concat(isHeadingTag ? '' : "text-size-".concat(size), "\n        ").concat(textWrap ? 'text-wrap' : 'text-normal', "\n        margin-").concat(inline ? 'inline' : margin, "\n        ").concat(bold ? 'text-bold' : '', "\n        ").concat(italic ? 'text-italic' : '', "\n        ").concat(className),
       style: mergedStyle
     }, props, {
       dangerouslySetInnerHTML: {
@@ -57,7 +53,7 @@ var Text = exports.Text = function Text(_ref) {
     }));
   }
   return /*#__PURE__*/_react["default"].createElement(Tag, _extends({
-    className: "\n      text-content\n      ".concat(isHeadingTag ? '' : "text-size-".concat(size), "\n      spacing-").concat(spacing, "\n      ").concat(bold ? 'strong' : '', "\n      ").concat(className),
+    className: "\n      text-content\n      ".concat(isHeadingTag ? '' : "text-size-".concat(size), "\n      ").concat(textWrap ? 'text-wrap' : 'text-normal', "\n      margin-").concat(margin, "\n      ").concat(bold ? 'text-bold' : '', "\n      ").concat(italic ? 'text-italic' : '', "\n      ").concat(className),
     style: mergedStyle
   }, props), children);
 };
@@ -71,5 +67,5 @@ Text.propTypes = {
   html: _propTypes["default"].string,
   textWrap: _propTypes["default"].bool,
   style: _propTypes["default"].object,
-  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
+  margin: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
 };

package/components/util/Title.js

@@ -8,7 +8,7 @@ exports.Title = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Text = require("./Text");
-var _excluded = ["children", "className", "as", "fullWidth", "textWrap", "spacing", "style"];
+var _excluded = ["children", "className", "as", "fullWidth", "textWrap", "margin", "style"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -28,8 +28,8 @@ var Title = exports.Title = function Title(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
     _ref$textWrap = _ref.textWrap,
     textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 'default' : _ref$margin,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var mergedStyle = _objectSpread({
@@ -37,7 +37,7 @@ var Title = exports.Title = function Title(_ref) {
   }, style);
   return /*#__PURE__*/_react["default"].createElement(_Text.Text, _extends({
     as: as,
-    spacing: spacing,
+    margin: margin,
     className: className,
     textWrap: textWrap,
     style: mergedStyle
@@ -50,5 +50,5 @@ Title.propTypes = {
   fullWidth: _propTypes["default"].bool,
   textWrap: _propTypes["default"].bool,
   style: _propTypes["default"].object,
-  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
+  margin: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
 };

package/components/util/Tooltip.js

@@ -20,8 +20,55 @@ var Tooltip = function Tooltip(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      placement: 'top',
+      horizontalOffset: 0
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    position = _useState4[0],
+    setPosition = _useState4[1];
+  var wrapperRef = (0, _react.useRef)(null);
+  var tooltipRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (!visible) return undefined;
+    var updatePosition = function updatePosition() {
+      var wrapper = wrapperRef.current;
+      var tooltip = tooltipRef.current;
+      if (!wrapper || !tooltip) return;
+      var wrapperRect = wrapper.getBoundingClientRect();
+      var tooltipRect = tooltip.getBoundingClientRect();
+      var viewportWidth = document.documentElement.clientWidth;
+      var viewportHeight = document.documentElement.clientHeight;
+      var viewportMargin = 8;
+      var tooltipGap = 6;
+      var centeredLeft = wrapperRect.left + (wrapperRect.width - tooltipRect.width) / 2;
+      var horizontalOffset = 0;
+      if (centeredLeft < viewportMargin) {
+        horizontalOffset = viewportMargin - centeredLeft;
+      } else if (centeredLeft + tooltipRect.width > viewportWidth - viewportMargin) {
+        horizontalOffset = viewportWidth - viewportMargin - centeredLeft - tooltipRect.width;
+      }
+      var spaceAbove = wrapperRect.top - viewportMargin;
+      var spaceBelow = viewportHeight - wrapperRect.bottom - viewportMargin;
+      var placement = spaceAbove < tooltipRect.height + tooltipGap && spaceBelow > spaceAbove ? 'bottom' : 'top';
+      setPosition(function (current) {
+        return current.placement === placement && current.horizontalOffset === horizontalOffset ? current : {
+          placement: placement,
+          horizontalOffset: horizontalOffset
+        };
+      });
+    };
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+    return function () {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [visible, text]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "tooltip-wrapper",
+    ref: wrapperRef,
     onMouseEnter: function onMouseEnter() {
       return setVisible(true);
     },
@@ -29,7 +76,11 @@ var Tooltip = function Tooltip(_ref) {
       return setVisible(false);
     }
   }, children, visible && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "tooltip"
+    className: "tooltip tooltip-".concat(position.placement),
+    ref: tooltipRef,
+    style: {
+      '--tooltip-horizontal-offset': "".concat(position.horizontalOffset, "px")
+    }
   }, text));
 };
 var _default = exports["default"] = Tooltip;

package/components/widget/Widget.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WidgetContent = exports.Widget = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["children", "className", "bordered", "spacing", "padding", "hover"],
+var _excluded = ["children", "className", "bordered", "margin", "hover"],
   _excluded2 = ["children", "className", "borderTop", "borderBottom"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -17,15 +17,13 @@ var Widget = exports.Widget = function Widget(_ref) {
     className = _ref.className,
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
-    _ref$padding = _ref.padding,
-    padding = _ref$padding === void 0 ? false : _ref$padding,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? 'default' : _ref$margin,
     _ref$hover = _ref.hover,
     hover = _ref$hover === void 0 ? false : _ref$hover,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "widget ".concat(bordered ? 'bordered' : '', " \n      spacing-").concat(spacing, " \n      ").concat(padding ? 'content' : '', "\n      ").concat(hover ? 'widget-hover' : '', " \n      ").concat(className ? className : '')
+    className: "widget ".concat(bordered ? 'bordered' : '', " \n      margin-").concat(margin, "\n      ").concat(hover ? 'widget-hover' : '', " \n      ").concat(className ? className : '')
   }, props), children);
 };
 var WidgetContent = exports.WidgetContent = function WidgetContent(_ref2) {
@@ -44,6 +42,9 @@ Widget.propTypes = {
   children: _propTypes["default"].any,
   className: _propTypes["default"].string,
   bordered: _propTypes["default"].bool,
-  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty']),
+  /**
+   * Bottom margin. Options: 'default', 'none', 'compact', 'plenty'
+   */
+  margin: _propTypes["default"].oneOf(['default', 'none', 'compact', 'plenty']),
   hover: _propTypes["default"].bool
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gdx-ui",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "UI gdx",
   "main": "index.js",
   "module": "index.js",

package/stories/box/Box.stories.js

@@ -20,7 +20,8 @@ var BoxDefault = exports.BoxDefault = {
     color: 'primary',
     open: true,
     collapsible: true,
-    isLoading: false
+    isLoading: false,
+    bordered: false
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement("div", {

package/stories/buttons/Button.stories.js

@@ -19,14 +19,13 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = {
   args: {
-    children: 'Nombre',
-    expanded: true
+    children: 'Nombre'
   }
 };
 var WithIcon = exports.WithIcon = {
   args: {
-    expanded: true,
-    color: 'primary'
+    color: 'primary',
+    disabled: false
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement(_Button.Button, args, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {

package/stories/dialogs/Dialog.stories.js

@@ -57,10 +57,12 @@ var ConfirmationDialogStory = exports.ConfirmationDialogStory = {
     open: true,
     closable: true,
     isLoading: false,
-    locked: false,
+    // locked: false,
     color: 'primary',
     title: 'Confirmation dialog title',
-    textConfirm: 'Yes',
+    textConfirm: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
+      icon: _freeSolidSvgIcons.faCircleCheck
+    }), " Yes"),
     textCancel: 'No'
   },
   render: function render(args) {
@@ -75,7 +77,6 @@ var AlertDialogStory = exports.AlertDialogStory = {
     open: true,
     closable: true,
     isLoading: false,
-    locked: false,
     color: 'warning',
     title: 'Alert dialog title',
     textClose: 'Close it'

package/stories/forms/Radio.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Radio = require("../../components/forms/Radio");
+var _Element = require("../utils/Element");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Forms/Radio',
+  component: _Radio.Radio,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    spacing: {
+      control: 'select',
+      options: ['none', 'compact', 'normal', 'plenty']
+    }
+  }
+};
+var Default = exports.Default = {
+  args: {
+    label: 'Requiere aprobación',
+    spacing: 'normal',
+    required: false,
+    inline: true,
+    name: 'radio-group',
+    options: [{
+      value: 'option1',
+      text: 'Option 1'
+    }, {
+      value: 'option2',
+      text: 'Option 2'
+    }, {
+      value: 'option3',
+      text: 'Disabled',
+      disabled: true
+    }],
+    value: 'option1'
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Element.Element, null), /*#__PURE__*/_react["default"].createElement(_Radio.Radio, args), /*#__PURE__*/_react["default"].createElement(_Element.Element, null));
+  }
+};

package/stories/forms/Switch.stories.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Switch = require("../../components/forms/Switch");
-var _Element = _interopRequireDefault(require("../utils/Element"));
+var _Element = require("../utils/Element");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = {
   title: 'Forms/Switch',
@@ -28,6 +28,6 @@ var Default = exports.Default = {
     spacing: 'normal'
   },
   render: function render(args) {
-    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Element["default"], null), /*#__PURE__*/_react["default"].createElement(_Switch.Switch, args), /*#__PURE__*/_react["default"].createElement(_Element["default"], null));
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Element.Element, null), /*#__PURE__*/_react["default"].createElement(_Switch.Switch, args), /*#__PURE__*/_react["default"].createElement(_Element.Element, null));
   }
 };

package/stories/layout/FlexAlign.stories.js

@@ -27,7 +27,7 @@ var FlexAlign = exports.FlexAlign = {
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Information, null, "Todos los elementos tienen un mismo grow, por lo que se distribuyen equitativamente el espacio disponible. ", /*#__PURE__*/_react["default"].createElement("br", null), "Si grow de un elemento es 0, no crecer\xE1 y se mantendr\xE1 con su tama\xF1o m\xEDnimo. ", /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "bordered"
     }, /*#__PURE__*/_react["default"].createElement(_components.Flex, {
-      spacing: "none",
+      margin: "none",
       justify: justify,
       alignItems: alignItems
     }, /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {

package/stories/utils/Text.stories.js

@@ -18,9 +18,10 @@ var _default = exports["default"] = {
 var Default = exports.Default = {
   args: {
     inline: false,
-    bold: true,
+    bold: false,
+    italic: false,
     size: 'medium',
-    spacing: 'default'
+    margin: 'default'
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."), /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Another example of Text component with the same props to show how it can be used for multiple lines of text."));
@@ -29,12 +30,14 @@ var Default = exports.Default = {
 var Truncated = exports.Truncated = {
   args: {
     inline: false,
-    textWrap: true
+    textWrap: false
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
-        width: '280px'
+        width: '280px',
+        border: '1px solid #ccc',
+        padding: '10px'
       }
     }, /*#__PURE__*/_react["default"].createElement(_components.Text, args, "Text is a component used to display important information in various sizes and styles. It can be used for headings, paragraphs, labels, and more. The Text component provides flexibility in terms of typography and can be customized to fit the design needs of the application."));
   }

package/stories/utils/Title.stories.js

@@ -18,7 +18,7 @@ var _default = exports["default"] = {
 var Default = exports.Default = {
   args: {
     as: 'h1',
-    spacing: 'default'
+    margin: 'default'
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_components.Title, args, "This title is using h1"), /*#__PURE__*/_react["default"].createElement(_components.Text, null, "This is a paragraph of text that provides additional information about the title above. It can be used to give context, explain the title, or provide any other relevant details that complement the title."));

package/stories/widget/Widget.stories.js

@@ -26,7 +26,7 @@ var _default = exports["default"] = {
 };
 var WidgetDefault = exports.WidgetDefault = {
   args: {
-    spacing: 'default',
+    margin: 'default',
     hover: false,
     bordered: false
   },