demo.css

.ui-form-field{margin-top:0.5rem;margin-bottom:0.5rem}.ui-form-field label,.ui-form-field p{margin-top:0.5rem;margin-bottom:0.5rem;display:inline-block}.ui-form-field .inline-field{display:inline-block}.ui-form-field .error small{color:#c00}.ui-form-field .success small{color:green}.ui-form-feedback{padding:1rem;box-sixing:border-box}.ui-form-feedback.success{border:1px solid green;color:green}.ui-form-feedback.error{border:1px solid #c00;color:#c00}[class*="g-"],[class^="g-"]{float:left;display:inline;box-sixing:border-box}.row{width:100%;float:left;clear:both}.full-width{width:100%;box-sixing:border-box}.no-margin-left-right{margin-left:0;margin-right:0}.no-margin-left{margin-left:0}.no-margin-right{margin-right:0}.ui-btn{padding:0.65rem 1.2rem;border-radius:0;font-size:1rem;line-height:1rem;display:inline-block;position:relative;outline:none;background:transparent;border:none;white-space:nowrap;text-align:center;cursor:pointer;text-decoration:none !important}.ui-btn.hoverable.primary:hover{background:#009ad5;color:#fff}.ui-btn.hoverable.secundary:hover{background:#b3b3b3;color:#fff}.ui-btn.hoverable.shadow:hover{box-shadow:1px 2px 8px 2px rgba(0,0,0,0.4)}.ui-btn.shadow{transition:box-shadow 0.2s ease-in;box-shadow:1px 2px 4px 1px rgba(0,0,0,0.4)}.ui-btn.bordered{border:1px solid #000}.ui-btn.primary{background:#0075a2;color:#fff}.ui-btn.secundary{background:#999;color:#fff}.ui-btn.round-corners{border-radius:5px}.ui-btn.white{color:black;background:white;box-shadow:1px 2px 4px 1px rgba(0,0,0,0.4),inset 1px 1px 1px -1px rgba(0,0,0,0.6)}.ui-btn.black{color:white;background:black}.ui-btn.circle{padding:0 !important;width:2rem;height:2rem;border-radius:100%}.ui-btn.circle.small{width:1.2rem;height:1.2rem}.ui-btn.circle.large{width:3rem;height:3rem}.ui-btn.circle.huge{width:5rem;height:5rem}.ui-btn.uppercase{text-transform:uppercase}.ui-btn.small{font-size:0.8rem;line-height:0.8rem;padding:0.3rem 0.8rem}.ui-btn.large{font-size:1.5rem;line-height:1.5rem;padding:1.15rem 3.5rem}.ui-btn.huge{font-size:2.5rem;line-height:2.5rem;padding:1.65rem 4rem}.ui-btn.disabled{cursor:default !important;opacity:0.4}.ui-btn.margin-right{margin-right:1rem}.ui-btn.margin-left{margin-left:1rem}.ui-btn.left-icon{padding-left:calc( 38px + 0.65rem )}.ui-btn.left-icon i{left:0.65rem}.ui-btn.right-icon{padding-right:calc( 38px + 0.65rem )}.ui-btn.right-icon i{right:0.65rem}.ui-btn.center-icon i{left:50%;top:50%;position:absolute;transform:translate(-50%, -50%)}.ui-btn.right-icon i,.ui-btn.left-icon i{position:absolute;top:50%;transform:translateY(-50%)}.ui-checkbox{position:relative;z-index:1}.ui-checkbox label{position:relative;display:inline-block}.ui-checkbox input[type=checkbox]{visibility:hidden;position:absolute}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker{border-color:#0075a2;background:#0075a2}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker:before{border-color:#fff;opacity:1;animation:marker-checked 0.2s ease-out}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker:after{border-radius:0px;top:0;left:0;width:20px;height:20px}.ui-checkbox span{display:inline-block;vertical-align:middle;cursor:pointer}.ui-checkbox:hover .ui-checkbox-marker{background:#cfcfbe}.ui-checkbox:hover .ui-checkbox-marker:before{opacity:20}.ui-checkbox .ui-checkbox-marker{top:0;left:0;position:relative;background:#fff;width:20px;height:20px;border:1px solid #cfcfbe;transition:all 0.15s ease-in-out}.ui-checkbox .ui-checkbox-marker:after,.ui-checkbox .ui-checkbox-marker:before{content:'';position:absolute;display:block}.ui-checkbox .ui-checkbox-marker:before{background:transparent;top:50%;left:50%;margin-top:-6px;margin-left:-6px;height:5px;width:10px;border:2px solid #fff;border-top:none;border-right:none;z-index:1;opacity:0;transition:border 0.1s ease-in-out 0.3s;transform:rotate(-45deg)}.ui-checkbox .ui-checkbox-marker:after{width:20px;height:20px;background:#fff;top:0;left:0;z-index:-1;transition:background 0.1s ease-in-out}.ui-checkbox .ui-checkbox-label{margin-left:5px}.ui-checkbox.error .ui-checkbox-marker{border-color:#c00}.ui-checkbox.success .ui-checkbox-marker{border-color:green}@keyframes marker-checked{0%{transform:rotate(-45deg) scale(1)}50%{transform:rotate(-45deg) scale(1.5)}100%{transform:rotate(-45deg) scale(1)}}.ui-radio{position:relative;z-index:1}.ui-radio label{position:relative;display:inline-block}.ui-radio input[type=radio]{visibility:hidden;position:absolute}.ui-radio input[type=radio]:checked+.ui-radio-marker{border-color:#0075a2;background:#0075a2}.ui-radio input[type=radio]:checked+.ui-radio-marker:before{border-color:#fff;opacity:1;transform:scale(1.4)}.ui-radio input[type=radio]:checked+.ui-radio-marker:after{border-radius:0px;top:0;left:0;width:20px;height:20px}.ui-radio span{display:inline-block;vertical-align:middle;cursor:pointer}.ui-radio.disabled .ui-radio-marker{background:#ddd !important}.ui-radio.disabled .ui-radio-marker:before{display:none}.ui-radio.disabled .ui-radio-label{opacity:0.5}.ui-radio:hover .ui-radio-marker{background:#cfcfbe}.ui-radio:hover .ui-radio-marker:before{opacity:0.2}.ui-radio .ui-radio-marker{top:0;left:0;position:relative;background:#fff;width:20px;height:20px;border:1px solid #cfcfbe;border-radius:100%;transition:all 0.15s ease-in-out}.ui-radio .ui-radio-marker:after,.ui-radio .ui-radio-marker:before{content:'';position:absolute;display:block}.ui-radio .ui-radio-marker:before{background:#fff;top:50%;left:50%;margin-top:-5px;margin-left:-5px;height:10px;width:10px;z-index:1;border-radius:100%;opacity:0;transition:all 0.1s ease-in-out}.ui-radio .ui-radio-marker:after{width:20px;height:20px;top:0;left:0;z-index:-1;transition:background 0.3s ease-in-out}.ui-radio .ui-radio-label{margin-left:5px}.ui-radio.error .ui-radio-marker{border-color:#c00}.ui-radio.success .ui-radio-marker{border-color:green}.ui-toggle{position:relative}.ui-toggle span,.ui-toggle label{display:inline-block;vertical-align:middle;cursor:pointer}.ui-toggle .ui-toggle-label{margin-left:5px}.ui-toggle.round .ui-toggle-handle{border-radius:100%}.ui-toggle.round .ui-toggle-handle:before{border-radius:18px}.ui-toggle.round .ui-toggle-handle:after{border-radius:100%}.ui-toggle input{position:absolute;margin-left:-9999px;visibility:hidden}.ui-toggle input+.ui-toggle-handle{top:0;left:0;position:relative;background:gray;width:40px;height:18px;border:transparent}.ui-toggle input+.ui-toggle-handle:before,.ui-toggle input+.ui-toggle-handle:after{display:block;position:absolute;top:0;left:0;bottom:0;content:""}.ui-toggle input+.ui-toggle-handle:before{right:1px;background-color:#f1f1f1;transition:background 0.4s;width:40px;background-color:#999;box-shadow:0px 0px 2px rgba(0,0,0,0.9)}.ui-toggle input+.ui-toggle-handle:after{width:20px;height:20px;top:-1px;left:-1px;background-color:white;box-shadow:0 1px 3px rgba(0,0,0,0.5);transition:box-shadow 0.2s, transform 0.3s,margin 0.3s ease-in-out}.ui-toggle input+.ui-toggle-handle:hover:after,.ui-toggle input+.ui-toggle-handle:focus:after,.ui-toggle input+.ui-toggle-handle:active:after{box-shadow:0 1px 3px rgba(0,0,0,0.5),0 0 0 10px rgba(0,0,0,0.06)}.ui-toggle input:checked+.ui-toggle-handle:before{background:#0075a2}.ui-toggle input:checked+.ui-toggle-handle:after{margin-left:22px}.ui-textfield label,.ui-textfield input,.ui-textfield textarea{display:inline-block;width:100%;font-size:1rem;color:#333}.ui-textfield label{margin-top:0.5rem;margin-bottom:0.5rem}.ui-textfield input,.ui-textfield textarea{padding:0.5rem;border:1px solid #cfcfcc;-webkit-appearance:none;box-sizing:border-box}.ui-textfield input:focus,.ui-textfield input:active,.ui-textfield input:hover:focus,.ui-textfield input:active:focus,.ui-textfield textarea:focus,.ui-textfield textarea:active,.ui-textfield textarea:hover:focus,.ui-textfield textarea:active:focus{color:#333 !important;border:1px solid #333}.ui-textfield input:invalid,.ui-textfield textarea:invalid{border-color:#ffc2c2;background:#fff5f5;box-shadow:none}.ui-textfield input:hover,.ui-textfield textarea:hover{border:1px solid #999}.ui-textfield.error label,.ui-textfield.error input,.ui-textfield.error textarea,.ui-textfield input.error{color:#c00;border-color:#c00}.ui-textfield.success label,.ui-textfield.success input,.ui-textfield.success textarea,.ui-textfield input.success{color:green;border-color:green}.ui-slider.noUi-horizontal{height:3px}.ui-slider.noUi-target{border-radius:0;border:none;box-shadow:none;background:#b2b2b2}.ui-slider .noUi-handle{width:20px;height:20px;left:-10px;top:-10px;position:relative;border:none;cursor:pointer;box-shadow:1px 1px 2px rgba(0,0,0,0.2);border-radius:100%;transition:box-shadow 0.2s, transform 0.3s}.ui-slider .noUi-handle:hover,.ui-slider .noUi-handle:focus,.ui-slider .noUi-handle:active,.ui-slider .noUi-handle.noUi-active{box-shadow:1px 1px 2px rgba(0,0,0,0.2),0 0 0 10px rgba(0,0,0,0.06)}@media only screen and (max-width: 320px){.ui-slider .noUi-handle{width:35px;height:35px;left:-17.5px;top:-17.5px}}.ui-slider .noUi-handle:before,.ui-slider .noUi-handle:after{display:none}.ui-slider .noUi-origin{border-radius:0}.ui-slider .noUi-connect{box-shadow:none;background:#000}.ui-slider .noUi-background{box-shadow:none;background:#b2b2b2}.ui-slider .value{font-size:0.688rem;color:#000;position:absolute;top:27px;width:4em;left:50%;margin-left:-2em;text-align:center}@media only screen and (max-width: 320px){.ui-slider .value{top:-22px}}.ui-slider.tooltip .value{background:#000;color:#fff;padding:0.3em 0.5em;top:-35px;box-shadow:2px 3px 6px rgba(0,0,0,0.2)}.ui-slider.tooltip .value:after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;width:0;height:0;border-right:8px solid transparent;border-left:8px solid transparent;border-top:8px solid #000}.selectricWrapper{position:relative;margin:0;cursor:pointer}.selectricResponsive{width:100%}.selectric{border:1px solid #c7c5c1;background:#fff;position:relative;border-radius:0}.selectric .label{display:block;white-space:nowrap;overflow:hidden;margin:0 30px 0 0;padding:9px 9px;font-size:0.813rem;line-height:18px;color:#000;min-height:18px}.selectric .button{color:#fff;display:block;position:absolute;right:0;top:0;width:30px;height:30px;padding:7px 0 0 0}.selectric .button:before{content:"";position:absolute;width:0;height:0;right:15px;top:14px;border-style:solid;border-width:10px 10px 0 10px;border-color:#060606 transparent transparent transparent}.selectric .button:after{content:"";position:absolute;right:15px;width:0;height:0;top:11px;border-style:solid;border-width:10px 10px 0 10px;border-color:#fff transparent transparent transparent}.selectricOpen .selectric .button:after{border-color:#efefef transparent transparent transparent}.selectricHover .selectric{border-color:#CCC}.selectricHover .selectric .button{color:#888}.selectricOpen{z-index:9999}.selectricOpen .selectric{border-color:#CCC;background:#efefef}.selectricDisabled{filter:alpha(opacity=50);opacity:0.5;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.selectricHideSelect{position:relative;overflow:hidden;width:0;height:0}.selectricHideSelect select{position:absolute;left:-100%;display:none}.selectricInput{position:absolute !important;top:0 !important;left:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;outline:none !important;border:none !important;*font:0/0 a !important;background:none !important}.selectricTempShow{position:absolute !important;visibility:hidden !important;display:block !important}.selectricItems{display:none;position:absolute;top:100%;left:0;background:#F9F9F9;border:1px solid #c7c5c1;z-index:1;border-top:none}.selectricItems .selectricScroll{height:100%;overflow:auto}.selectricAbove .selectricItems{top:auto;bottom:100%}.selectricItems ul,.selectricItems li{list-style:none;padding:0;margin:0;font-size:12px;line-height:20px;min-height:20px}.selectricItems li{display:block;padding:9px 9px;border-top:1px solid #FFF;border-top:1px solid #c7c5c1;color:#000;cursor:pointer;background:#fff}.selectricItems li:first-child{border-top:none}.selectricItems li.selected{background:#EFEFEF;color:#444;border-top-color:#E0E0E0}.selectricItems li:hover{background:#F0F0F0;color:#444}.selectricItems li.disabled{background:#F5F5F5;color:#BBB;border-top-color:#FAFAFA;cursor:default}.g-1{float:left;width:60px;margin-left:10px;margin-right:10px}.g-1-inner{width:50px}.push-1{margin-left:90px !important}.pull-1{margin-right:90px !important}.g-2{float:left;width:140px;margin-left:10px;margin-right:10px}.g-2-inner{width:130px}.push-2{margin-left:170px !important}.pull-2{margin-right:170px !important}.g-3{float:left;width:220px;margin-left:10px;margin-right:10px}.g-3-inner{width:210px}.push-3{margin-left:250px !important}.pull-3{margin-right:250px !important}.g-4{float:left;width:300px;margin-left:10px;margin-right:10px}.g-4-inner{width:290px}.push-4{margin-left:330px !important}.pull-4{margin-right:330px !important}.g-5{float:left;width:380px;margin-left:10px;margin-right:10px}.g-5-inner{width:370px}.push-5{margin-left:410px !important}.pull-5{margin-right:410px !important}.g-6{float:left;width:460px;margin-left:10px;margin-right:10px}.g-6-inner{width:450px}.push-6{margin-left:490px !important}.pull-6{margin-right:490px !important}.g-7{float:left;width:540px;margin-left:10px;margin-right:10px}.g-7-inner{width:530px}.push-7{margin-left:570px !important}.pull-7{margin-right:570px !important}.g-8{float:left;width:620px;margin-left:10px;margin-right:10px}.g-8-inner{width:610px}.push-8{margin-left:650px !important}.pull-8{margin-right:650px !important}.g-9{float:left;width:700px;margin-left:10px;margin-right:10px}.g-9-inner{width:690px}.push-9{margin-left:730px !important}.pull-9{margin-right:730px !important}.g-10{float:left;width:780px;margin-left:10px;margin-right:10px}.g-10-inner{width:770px}.push-10{margin-left:810px !important}.pull-10{margin-right:810px !important}.g-11{float:left;width:860px;margin-left:10px;margin-right:10px}.g-11-inner{width:850px}.push-11{margin-left:890px !important}.pull-11{margin-right:890px !important}.g-12{float:left;width:940px;margin-left:10px;margin-right:10px}.g-12-inner{width:930px}.push-12{margin-left:970px !important}.pull-12{margin-right:970px !important}@media only screen and (max-width: 1024px){.g-mobile-1{float:left;width:7.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-1-inner{width:6.25%}.push-mobile-1{margin-left:11.25% !important}.pull-mobile-1{margin-right:11.25% !important}.g-mobile-2{float:left;width:17.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-2-inner{width:16.25%}.push-mobile-2{margin-left:21.25% !important}.pull-mobile-2{margin-right:21.25% !important}.g-mobile-3{float:left;width:27.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-3-inner{width:26.25%}.push-mobile-3{margin-left:31.25% !important}.pull-mobile-3{margin-right:31.25% !important}.g-mobile-4{float:left;width:37.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-4-inner{width:36.25%}.push-mobile-4{margin-left:41.25% !important}.pull-mobile-4{margin-right:41.25% !important}.g-mobile-5{float:left;width:47.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-5-inner{width:46.25%}.push-mobile-5{margin-left:51.25% !important}.pull-mobile-5{margin-right:51.25% !important}.g-mobile-6{float:left;width:57.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-6-inner{width:56.25%}.push-mobile-6{margin-left:61.25% !important}.pull-mobile-6{margin-right:61.25% !important}.g-mobile-7{float:left;width:67.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-7-inner{width:66.25%}.push-mobile-7{margin-left:71.25% !important}.pull-mobile-7{margin-right:71.25% !important}.g-mobile-8{float:left;width:77.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-8-inner{width:76.25%}.push-mobile-8{margin-left:81.25% !important}.pull-mobile-8{margin-right:81.25% !important}.g-mobile-9{float:left;width:87.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-9-inner{width:86.25%}.push-mobile-9{margin-left:91.25% !important}.pull-mobile-9{margin-right:91.25% !important}.g-mobile-10{float:left;width:97.5%;margin-left:1.25%;margin-right:1.25%}.g-mobile-10-inner{width:96.25%}.push-mobile-10{margin-left:101.25% !important}.pull-mobile-10{margin-right:101.25% !important}}.container{width:960px;margin:0 auto}@media only screen and (max-width: 1024px){.container{width:100%}}i{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAATVJREFUWIXtlj1Ow0AQRr9d0/oK3IG1rxG31CjiOsABInECmtBR2X12fIcoF6CgQTAfTSwRS4l3/UPDPsmF5ZnZ59XaM0AikUgk/hcmJKgsy4qkm2NBklsRkaG4q5BiqloZY9bTtQAABwDziHV474N2+BxFUTA0NkoscPFrknfGmN8vUXvv65g6s4t57/fOuXcADzg9w3VMHTunVIeIPKnqWlW/x9ZYRAwA2rZ9zrLsFsDnmPzFxABgt9u9kFyR/IjNXVQMAETkLc/zx9i8xcUAoGmar9icPxEbQxKLJeoHG9NSphIkZq3dkjyce66qlbX25nj7istNerCBA4FjzxDOuU03fZC8F5HN1JqjxPrz2aUdC52/+oxq4v35zNqTb2h1vDqC5q9ZxIbOXI9oqUQikUgsyA+n1HIzLAkSHwAAAABJRU5ErkJggg==");background-repeat:no-repeat;width:38px;height:38px}.text-right{text-align:right}