gdx-ui 2.1.8 → 2.1.9

package/base.css

@@ -1 +1 @@
-.clearfix:after,.form-inline:after,.input-inside:after,.toolbar-group:after{clear:both}body,pre{background:var(--body-bg)}.input-inside,body,button,input,select,textarea{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif}.app-layout,body,html{box-sizing:border-box}.box,.dialog{transform:translateY(0)}.clearfix:after,.clearfix:before{display:table;content:"";line-height:0}.widget-hover{box-shadow:0 6px 10px rgba(0,0,0,.2)}.box,.dropdown{box-shadow:0 4px 18px rgba(0,0,0,.1)}body{color:var(--color);font-size:14px;font-weight:300;line-height:1.5em}body,html{height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.5em;margin:0 0 15px;padding:0}b,h4,h5,h6,strong{font-weight:500}h1{font-size:25px}h2{font-size:20px}h3{font-size:16px}h4,h5,h6{font-size:14px}small{font-size:12px}.btn,button,code,pre{font-size:14px}a,button.anchor{color:#1D9EFC;text-decoration:none;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{transition:color .2s ease;color:#0390f7}p{margin:0 0 15px}code,pre{font-family:monospace;color:#6f6f6f}pre{border-radius:15px;border:1px solid var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}.btn,hr{border:none}hr{border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{min-height:100%;display:flex;flex-direction:column}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.67px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--border-radius:15px;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF;--primary-color:#1D9EFC;--success-color:#38c153;--alert-color:#ea0835;--warning-color:#ffd500;--active-color:#64FA00;--color-gray:#6f6f6f}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;position:relative;margin-bottom:15px}.box .box-footer .row,.box .box-toolbar .form-element,.box .box-toolbar .row,.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.btn,.btn-circle{box-sizing:border-box;margin:0}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#6f6f6f;background:#FFF;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-top-btn{position:absolute;right:10px;top:10px}.box .box{box-shadow:none;border:1px solid var(--border-color)}button:focus-visible{outline:#1D9EFC auto 1px}.btn-circle:active,.btn:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle:focus-visible,.btn:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.btn{border-radius:7.5px;display:inline-block;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-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:1px solid transparent;background:0 0;color:#1D9EFC;font-weight:700}.btn-normal-default{background:var(--btn-bg);border:1px solid var(--btn-bg);color:var(--color)}.btn-outline-default{border:1px solid #898989;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ECEDEF}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1D9EFC;border:1px solid #1D9EFC;color:#FFF}.btn-outline-primary{border:1px solid #1D9EFC;color:#1D9EFC}.btn-link-primary{color:#1D9EFC}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#FFF;background:#038aed}.btn-normal-alert{background:#ea0835;border:1px solid #ea0835;color:#FFF}.btn-outline-alert{border:1px solid #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#FCC5C5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#FFF;background:#c3072c}.btn-normal-success{background:#38c153;border:1px solid #38c153;color:#FFF}.btn-outline-success{border:1px solid #38c153;color:#38c153}.btn-link-success{color:#38c153}.btn-link-success:hover{background:#DDFFD4}.btn-normal-success:hover,.btn-outline-success:hover{color:#FFF;background:#2fa145}.btn-normal-warning{background:#ffd500;border:1px solid #ffd500}.btn-outline-warning{border:1px solid #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;height:35px;width:35px;min-height:35px;min-width:35px;max-height:35px;max-width:35px;aspect-ratio:1/1;padding:0;overflow:hidden;background:rgba(0,0,0,.1)}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:hover{background:rgba(0,0,0,.2)}.btn-circle:active{outline:rgba(29,158,252,.7) solid 3px!important;background:rgba(0,0,0,.4)}.carousel,.table{background:var(--el-bg)}.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:rgba(234,8,53,.7) solid 3px!important}.btn-alert:focus-visible{outline:#c7072d solid 2px;outline-offset:2px}.btn-success:active{outline:rgba(56,193,83,.7) solid 3px!important}.btn-success:focus-visible{outline:#30a547 solid 2px;outline-offset:2px}.btn-warning:active{outline:rgba(255,213,0,.7) solid 3px!important}.btn-warning:focus-visible{outline:#dbb700 solid 2px;outline-offset:2px}.carousel{width:100%;position:relative;overflow:hidden;border-radius:15px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img,label{display:block}.carousel-img-wrapper{min-width:100%;height:100%;position:relative;overflow:hidden}.carousel-img{width:100%;height:100%;object-fit:cover}.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}.dialog-title,.table .underlined td,.table .underlined th,.table thead td,.table thead th,.tabs{border-bottom:solid 1px var(--border-color)}.dialog,.dropdown{transition:transform .25s ease,box-shadow .25s ease;position:absolute;margin:0;background:#FFF}.dialog{border-radius:15px;transition-delay:0s;box-shadow:0 5px 30px rgba(0,0,0,.5);left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;z-index:999;display:flex;flex-direction:column}.dropdown,.slider{left:0;cursor:pointer}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.dialog .box{box-shadow:none;border:1px solid var(--border-color)!important}.dialog:focus{outline:0}.dropdown{box-shadow:2px 4px 12px rgba(0,0,0,.1);border-radius:15px;transform:translateY(0);transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;z-index:99;min-width:400px;max-width:600px}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.editable,.input-inside,input,select,textarea{margin-bottom:0!important;line-height:1.5em;vertical-align:middle;box-sizing:border-box}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1D9EFC!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px}.flex-justify-start{justify-content:flex-start}.flex-justify-center{justify-content:center}.flex-justify-end{justify-content:flex-end}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.badge-content,.flex-align-center{align-items:center}.flex-align-end{align-items:flex-end}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:rgba(29,158,252,.7) solid 3px;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color)}.input-inside,input,select,textarea{display:inline-block;padding:10px;font-size:14px;border-radius:7.5px;border:1px solid var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{display:inline-block;width:100%;min-height:1.4em;padding:2px 0;font-size:14px;border-radius:7.5px;border:1px solid transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0}.editable:focus{background:var(--input-bg);outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#6f6f6f;pointer-events:none}.editable:focus::before{content:''}.checkmark:after,.form-inline:after,.form-inline:before,.input-inside:after,.input-inside:before,.slider:before,.toolbar-group:after,.toolbar-group:before{content:""}.inline-elements .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-focus,.input-inside:focus{border-color:#1D9EFC}.input-alert:focus{outline:rgba(234,8,53,.7) solid 3px!important}.code-editor:focus,.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-wrapper{position:relative}.input-reset-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.input-inside{padding:0 4px 0 0;position:relative}.input-btns,.slider,.slider:before{position:absolute}.input-focus,.input-inside:focus,.input-inside:focus-within{outline:rgba(29,158,252,.7) solid 3px}.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 .btn-circle{height:24px;width:24px}.input-btns{right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#6f6f6f;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside select,.input-label,legend{color:#6f6f6f}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;line-height:0}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;box-shadow:none}.input-inside:focus-within{border-color:#1D9EFC}.input-inside input:focus,.input-inside select:focus{border-color:transparent}.input-inside select{border:none;box-shadow:none;margin:0;padding:10px;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}fieldset,fieldset label{margin-bottom:15px}.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 input,label select,label textarea,td label{margin-bottom:0}fieldset{border:1px solid var(--border-color);border-radius:7.5px}legend{padding:0 5px}.form-inline:after,.form-inline:before{display:table;line-height:0}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;line-height:0}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #FFF;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius: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:#6f6f6f;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.swith-label{margin-left:5px}.slider{box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;right:1px;top:1px;transition:background-color .1s}.slider:before{border-radius:50%;left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;height:15px;transition:.1s}input:checked+.slider{background-color:#38c153}input:focus+.slider{box-shadow:0 0 1px #38c153}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;height:15px;width:15px;background-color:var(--border-color);box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;border-radius:50%}.cust-radio input:checked~.checkmark{background-color:#1D9EFC}.checkmark:after{position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.information,.row{margin-bottom:15px}.code-editor{color:#6f6f6f;font-family:monospace;font-size:12px;border:0;padding:0;width:100%}.information{border-radius:15px;padding:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1D9EFC}.information-primary hr{border-bottom:solid 1px #1D9EFC}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#DDFFD4;color:#31a949}.information-success hr{border-bottom:solid 1px #38c153}.information-alert{background:#FCC5C5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge{cursor:default;line-height:1.5em;color:#fff;white-space:nowrap;position:relative}.badge-content{width:100%;display:flex;justify-content:center}.badge:empty{display:none}.badge,.badge-small{display:inline-flex;align-items:center}.badge .btn-circle{margin-left:5px}.badge-default{background-color:var(--btn-bg);color:#6f6f6f}.badge.badge-primary{background-color:#1D9EFC}.badge.badge-warning{color:var(--color);background-color:#ffd500}.badge.badge-success{background-color:#38c153}.badge.badge-alert{background-color:#ea0835}.badge{border-radius:20px;padding:2px 18px;justify-content:center;vertical-align:middle}.badge-small{padding:0 10px;font-size:12px;min-height:20px;justify-content:center}.badge-closable{padding-right:0}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px}.clear-list.default li{margin:0 0 15px}.clear-list.plenty li{margin:0 0 22.5px}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;list-style:none}.loader-squares{display:flex;gap:8px;justify-content:center;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:nth-child(1){animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%,100%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.navbar-header{background:#000;border-bottom:solid 3px #1D9EFC;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:#fff!important;padding:7.5px 0 15px;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0 0 15px 15px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:#fff;padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:rgba(255,255,255,.12);color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-menu-item.active,.navbar-submenu-item.active{background:rgba(255,255,255,.1)}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-wrapper{position:relative}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-icons .navbar-icon-btn.active{color:#1D9EFC;opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{display:none;position:absolute;left:50%;transform:translateX(-50%);top:100%;z-index:99;width:1100px;max-width:calc(100vw - (15px * 2));box-sizing:border-box;background:rgba(0,0,0,.8);border-radius:0 0 15px 15px;padding:15px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-icon-area.open{display:block}.navbar-icon-area-content{display:flex;justify-content:center;width:100%}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;text-align:center;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.image-zoom,.skeleton,.thumb{overflow:hidden}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#CCC;top:50%;transform:translateY(-50%)}.skeleton,.snackbar{border-radius:15px;position:relative}.list-scroller-btn-left{left:-15px}.image-zoom-caption,.snackbar-stack,.tooltip{left:50%;transform:translateX(-50%)}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#a2a2a2 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;padding:15px;margin-bottom:15px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#FFF;margin:auto auto 15px;box-sizing:border-box;min-width:500px;box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate}.table thead td,.table thead th{background-color:var(--el-bg);color:#6f6f6f;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#6f6f6f!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#565656}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.content,.tab-content,.tabs .tab{padding:15px}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table td .btn,.table td .row,.table textarea,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#FCC5C5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#DDFFD4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.tabs{display:flex}.tabs .tab{margin:0;cursor:pointer;border:1px solid transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:1px solid var(--border-color);border-bottom:solid 1px #FFF;color:#1D9EFC;position:relative;z-index:9;background:#FFF;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#898989;pointer-events:none}.tab-content{border:1px solid var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;position:relative;z-index:1;background:#FFF}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#FFF!important;border-radius:15px;box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:100%}.thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block}.thumb.thumb-bordered{border:1px solid var(--border-color)}.image-zoom-caption,.rounded,.tooltip{border-radius:15px}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}ul.tree li:after,ul.tree li:before{height:1.6em;color:#fff;content:""}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);color:#fff;padding:5px 15px;font-size:12px;z-index:9;display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px}ul.tree ul.tree{margin-left:-23px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:3px 10px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 45px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;width:15px;border-bottom:1px solid #646464;display:inline-block;left:0}.relative,.wrapper,ul.tree li:after{position:relative}ul.tree li:after{top:-.3em;width:15px;display:inline-block;left:-7px}.text-content{line-height:1.5}.text-size-small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.margin-both{margin:15px 0}.collapesed{margin:0}.separated{margin:15px 0}.color-default{color:var(--color)!important}.color-primary{color:#1D9EFC!important}.color-success{color:#38c153!important}.color-alert{color:#ea0835!important}.color-warning{color:#ffd500!important}.color-active{color:#64FA00!important}.color-gray{color:#6f6f6f!important}.bg-primary{background-color:#1D9EFC;color:#fff}.bg-success{background-color:#38c153;color:#fff}.bg-alert{background-color:#ea0835;color:#fff}.bg-warning{background-color:#ffd500;color:#272729}.bg-default,.bg-gray{background-color:#6f6f6f;color:#fff}.bg-active{background-color:#64FA00}.bg-alert .btn-circle svg,.bg-default .btn-circle svg,.bg-primary .btn-circle svg,.bg-success .btn-circle svg{color:#fff!important}.note,.note a{color:#6f6f6f}.inline{display:inline-block;vertical-align:middle}.note{font-size:12px;font-weight:400}.note a{text-decoration:underline}.note a:hover{color:#1D9EFC}.absolute,.corner-btn{position:absolute}.corner-btn{right:15px;top:15px}.component-locker,.overlay{background:var(--overlay-color);height:100%;left:0;top:0;transition:.2s;width:100%}.center{text-align:center}.right{text-align:right}.left{text-align:left}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.bordered{border:1px solid var(--border-color);border-radius:15px}.bordered-primary{border-color:#1D9EFC}.border-top{border-top:solid 1px var(--border-color)}.border-bottom{border-bottom:solid 1px var(--border-color)}.overlay{position:fixed;z-index:99}.component-locker{border-radius:15px;position:absolute;z-index:9}.outline-primary{outline:#1D9EFC dashed 1px}.outline-success{outline:#38c153 dashed 1px}.spacing-none{margin-bottom:0}.spacing-compact{margin-bottom:7.5px}.spacing-default,.spacing-normal{margin-bottom:15px}.spacing-plenty{margin-bottom:22.5px}.container-align-left .container-item{display:flex;justify-content:flex-start}.container-align-center .container-item{display:flex;justify-content:center}.container-align-right .container-item{display:flex;justify-content:flex-end}.container .container-item .container-align-left{display:flex;justify-content:flex-start}.container .container-item .container-align-center{display:flex;justify-content:center}.container .container-item .container-align-right{display:flex;justify-content:flex-end}.container-none .container-item{margin-bottom:0}.container-compact .container-item{margin-bottom:7.5px}.container-default .container-item,.container-normal .container-item{margin-bottom:15px}.container-plenty .container-item{margin-bottom:22.5px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside,.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.67px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn,.expanded-phone,.snackbar{width:100%}.dialog{width:95%!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.navbar-icon-area{width:96%;max-width:96%}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:rgba(0,0,0,.88);position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.24);color:#fff}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-menu-item>a{color:#fff;padding:16px 20px}.navbar-menu-item:hover>.navbar-submenu{display:none}.navbar-menu-item.open>.navbar-submenu{display:block}.navbar-submenu{position:static!important;min-width:100%!important;border:none!important;border-radius:0!important}.navbar-submenu a{color:#fff!important;padding:12px 20px 12px 38px!important}.navbar-submenu-item{color:#fff}.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-icons{margin-left:auto}}
+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-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}.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:absolute;left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;margin:0;z-index:999;display:flex;flex-direction:column}.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:none}.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:20px;padding:2px 18px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.badge-small{padding:0 10px;font-size:12px;min-height:20px;display:inline-flex;align-items:center;justify-content:center}.badge-closable{padding-right:0}.clear-list ul{margin:0;padding:0}.clear-list ul li{padding:0;list-style:none;line-height:1.5em}.clear-list.none li{margin:0}.clear-list.compact li{margin:0 0 7.5px 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}.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;color:#fff}.bg-success{background-color:#38c153;color:#fff}.bg-alert{background-color:#ea0835;color:#fff}.bg-warning{background-color:#ffd500;color:#272729}.bg-default,.bg-gray{background-color:#777;color:#fff}.bg-active{background-color:#64fa00}.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}}@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/dialog/Dialog.js

@@ -33,6 +33,32 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
     _ref$closeOnEscape = _ref.closeOnEscape,
     closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape;
   var dialogRef = (0, _react.useRef)(null);
+  var initialBodyMinHeightRef = (0, _react.useRef)('');
+  var updateDialogPosition = (0, _react.useCallback)(function () {
+    if (!open || !dialogRef.current) return;
+    var dialogHeight = dialogRef.current.offsetHeight;
+    var viewportHeight = window.innerHeight;
+    var scrollY = window.scrollY;
+    var margin = 16;
+    var top;
+    if (dialogHeight + margin * 2 < viewportHeight) {
+      // Keep the dialog centered in the current viewport when it fits.
+      top = scrollY + (viewportHeight - dialogHeight) / 2;
+    } else {
+      // For tall dialogs, pin near the top and let the page scroll naturally.
+      top = scrollY + margin;
+    }
+    dialogRef.current.style.top = "".concat(top, "px");
+    dialogRef.current.style.left = '50%';
+    dialogRef.current.style.transform = 'translateX(-50%)';
+    dialogRef.current.style.position = 'absolute';
+
+    // Ensure document can scroll down to the bottom of very tall dialogs.
+    var requiredBodyHeight = Math.ceil(top + dialogHeight + margin);
+    if (document.body.scrollHeight < requiredBodyHeight) {
+      document.body.style.minHeight = "".concat(requiredBodyHeight, "px");
+    }
+  }, [open]);
   (0, _react.useEffect)(function () {
     var handleKeyDown = function handleKeyDown(event) {
       if (event.key === 'Escape') {
@@ -78,31 +104,35 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
     });
   }, [open]);
   (0, _react.useEffect)(function () {
-    if (open && dialogRef.current) {
-      var dialogHeight = dialogRef.current.offsetHeight;
-      var viewportHeight = window.innerHeight;
-      var scrollY = window.scrollY;
-      var top;
-      if (dialogHeight < viewportHeight) {
-        // Center vertically relative to the current viewport
-        top = scrollY + (viewportHeight - dialogHeight) / 2;
-      } else {
-        // If the dialog is larger, start at the current position
-        top = scrollY;
-      }
-      dialogRef.current.style.top = "".concat(top, "px");
-      dialogRef.current.style.left = '50%';
-      dialogRef.current.style.transform = 'translateX(-50%)';
-      dialogRef.current.style.position = 'absolute';
+    if (!open) return undefined;
+    if (!initialBodyMinHeightRef.current) {
+      initialBodyMinHeightRef.current = document.body.style.minHeight || '';
     }
-  }, [open]);
+    updateDialogPosition();
+    var onResize = function onResize() {
+      return updateDialogPosition();
+    };
+    window.addEventListener('resize', onResize);
+    var resizeObserver = new ResizeObserver(function () {
+      updateDialogPosition();
+    });
+    if (dialogRef.current) {
+      resizeObserver.observe(dialogRef.current);
+    }
+    return function () {
+      window.removeEventListener('resize', onResize);
+      resizeObserver.disconnect();
+      document.body.style.minHeight = initialBodyMinHeightRef.current;
+      initialBodyMinHeightRef.current = '';
+    };
+  }, [open, updateDialogPosition]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, open && /*#__PURE__*/_react["default"].createElement(DialogContext.Provider, {
     value: {
       color: color,
       isLoading: isLoading
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "overlay"
+    className: "overlay dialog-overlay"
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "dialog",
     tabIndex: -1,

package/components/util/Note.js

@@ -12,13 +12,17 @@ var Note = exports.Note = function Note(_ref) {
   var children = _ref.children,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
-    as = _ref.as,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'div' : _ref$as,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? false : _ref$inline,
     _ref$textWrap = _ref.textWrap,
     textWrap = _ref$textWrap === void 0 ? false : _ref$textWrap;
   return /*#__PURE__*/_react["default"].createElement(_Text.Text, {
     as: as,
+    spacing: spacing,
     inline: inline,
     size: "small",
     className: "note ".concat(className),
@@ -30,5 +34,6 @@ Note.propTypes = {
   className: _propTypes["default"].string,
   as: _propTypes["default"].oneOf(['div', 'span', 'p']),
   inline: _propTypes["default"].bool,
-  textWrap: _propTypes["default"].bool
+  textWrap: _propTypes["default"].bool,
+  spacing: _propTypes["default"].oneOf(['none', 'compact', 'default', 'plenty'])
 };

package/package.json

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

package/stories/forms/Switch.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Switch = require("../../components/forms/Switch");
+var _Element = _interopRequireDefault(require("../utils/Element"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Forms/Switch',
+  component: _Switch.Switch,
+  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'
+  },
+  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));
+  }
+};

package/stories/utils/Element.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+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); }
+var Element = function Element(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "bg-default content rounded margin-bottom ".concat(props.className || '')
+  }, props), "Any Element");
+};
+var _default = exports["default"] = Element;

package/stories/utils/Expanded.stories.js

@@ -36,6 +36,6 @@ var ExpandedInAnotherPlace = exports.ExpandedInAnotherPlace = {
       valign: "center"
     }, /*#__PURE__*/_react["default"].createElement(_components.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableButton, null)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, null, "Click the button to expand the content below.")), /*#__PURE__*/_react["default"].createElement(_Separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_components.Information, {
       color: "primary"
-    }, "You can put the expanded content anywhere, not necessarily right after the button. ", /*#__PURE__*/_react["default"].createElement("br", null), "Click the button to see the content below."), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Widget, null, "Use different components inside the expanded area. ", /*#__PURE__*/_react["default"].createElement("br", null), "The content can be as complex as you need."))));
+    }, "You can put the expanded content anywhere, not necessarily right after the button. ", /*#__PURE__*/_react["default"].createElement("br", null), "Click the button to see the content below."), /*#__PURE__*/_react["default"].createElement(_Expandable.ExpandableArea, null, /*#__PURE__*/_react["default"].createElement(_components.Widget, null, /*#__PURE__*/_react["default"].createElement(_components.WidgetContent, null, "Use different components inside the expanded area. ", /*#__PURE__*/_react["default"].createElement("br", null), "The content can be as complex as you need.")))));
   }
 };

package/stories/utils/TokensMargins.stories.js

@@ -41,11 +41,11 @@ var Margins = exports.Margins = {
         padding: '15px',
         backgroundColor: '#ccffc1'
       }
-    }, "This element will change its margin based on the selected option."), /*#__PURE__*/_react["default"].createElement("div", {
+    }, "This element will change its margin based on the selected option. ", /*#__PURE__*/_react["default"].createElement("br", null), "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", margin), " to apply this margin."), /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         padding: '15px',
         backgroundColor: '#F5F5F5'
       }
-    }, "Some content here"), /*#__PURE__*/_react["default"].createElement("div", null, "Use the class ", /*#__PURE__*/_react["default"].createElement("code", null, ".", margin), " to apply this margin."));
+    }, "Some content here"));
   }
 };

package/stories/widget/Widget.stories.js

@@ -8,7 +8,6 @@ var _react = _interopRequireDefault(require("react"));
 var _Widget = require("../../components/widget/Widget");
 var _Img = require("../../components/images/Img");
 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); }
 var item = {
   'ID': '993440',
   'title': 'Puma Playera Con Logo Negro',
@@ -27,15 +26,16 @@ var _default = exports["default"] = {
 };
 var WidgetDefault = exports.WidgetDefault = {
   args: {
-    spacing: true,
-    hover: false
+    spacing: 'default',
+    hover: false,
+    bordered: false
   },
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         width: '400px'
       }
-    }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, args, "This is a container for any content, with some padding and a border. It can be used to group related content together and make it stand out from the rest of the page."));
+    }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, args, "This is a container for any content, with some padding and a border. It can be used to group related content together and make it stand out from the rest of the page."), /*#__PURE__*/_react["default"].createElement(_Widget.Widget, args, /*#__PURE__*/_react["default"].createElement(_Widget.WidgetContent, null, "Using WidgetContent you add a pdding to the widget")));
   }
 };
 var WidgetWithContent = exports.WidgetWithContent = {
@@ -48,12 +48,10 @@ var WidgetWithContent = exports.WidgetWithContent = {
       style: {
         width: '400px'
       }
-    }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, _extends({}, args, {
-      spacing: true
-    }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Img.Img, {
+    }, /*#__PURE__*/_react["default"].createElement(_Widget.Widget, args, /*#__PURE__*/_react["default"].createElement(_Widget.WidgetContent, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Img.Img, {
       src: item.image,
       alt: item.title,
       expanded: true
-    })), /*#__PURE__*/_react["default"].createElement("h3", null, item.title), /*#__PURE__*/_react["default"].createElement("div", null, item.price)));
+    })), /*#__PURE__*/_react["default"].createElement("h3", null, item.title), /*#__PURE__*/_react["default"].createElement("div", null, item.price))));
   }
 };