@-webkit-keyframes spinAround { from { -webkit-transform: rotate(0); transform:rotate(0) } to { -webkit-transform: rotate(359deg); transform:rotate(359deg) } } @keyframes spinAround { from { -webkit-transform: rotate(0); transform:rotate(0) } to { -webkit-transform: rotate(359deg); transform:rotate(359deg) } } input[type=range].slider { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 1rem 0; background: 0 0; touch-action:none } input[type=range].slider.is-fullwidth { display: block; width:100% } input[type=range].slider:focus { outline:0 } input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track { width:100% } input[type=range].slider:not([orient=vertical])::-moz-range-track { width:100% } input[type=range].slider:not([orient=vertical])::-ms-track { width:100% } input[type=range].slider:not([orient=vertical]).has-output + output, input[type=range].slider:not([orient=vertical]).has-output-tooltip + output { width: 3rem; background: #4a4a4a; border-radius: 4px; padding: .4rem .8rem; font-size: .75rem; line-height: .75rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #fff; overflow: hidden; pointer-events: none; z-index:200 } input[type=range].slider:not([orient=vertical]).has-output-tooltip:disabled + output, input[type=range].slider:not([orient=vertical]).has-output:disabled + output { opacity:.5 } input[type=range].slider:not([orient=vertical]).has-output { display: inline-block; vertical-align: middle; width:calc(100% -(4.2rem)) } input[type=range].slider:not([orient=vertical]).has-output + output { display: inline-block; margin-left: .75rem; vertical-align:middle } input[type=range].slider:not([orient=vertical]).has-output-tooltip { display:block } input[type=range].slider:not([orient=vertical]).has-output-tooltip + output { position: absolute; left: 0; top:-.1rem } input[type=range].slider[orient=vertical] { -webkit-appearance: slider-vertical; -moz-appearance: slider-vertical; appearance: slider-vertical; -webkit-writing-mode: bt-lr; -ms-writing-mode: bt-lr; writing-mode:bt-lr } input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track { height:100% } input[type=range].slider[orient=vertical]::-moz-range-track { height:100% } input[type=range].slider[orient=vertical]::-ms-track { height:100% } input[type=range].slider::-webkit-slider-runnable-track { cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 0 #7a7a7a; background: #dbdbdb; border-radius: 4px; border:0 solid #7a7a7a } input[type=range].slider::-moz-range-track { cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 0 #7a7a7a; background: #dbdbdb; border-radius: 4px; border:0 solid #7a7a7a } input[type=range].slider::-ms-track { cursor: pointer; transition: all 0.2s ease; box-shadow: 0 0 0 #7a7a7a; background: #dbdbdb; border-radius: 4px; border:0 solid #7a7a7a } input[type=range].slider::-ms-fill-lower { background: #dbdbdb; border-radius:4px } input[type=range].slider::-ms-fill-upper { background: #dbdbdb; border-radius:4px } input[type=range].slider::-webkit-slider-thumb { box-shadow: none; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; cursor:pointer } input[type=range].slider::-moz-range-thumb { box-shadow: none; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; cursor:pointer } input[type=range].slider::-ms-thumb { box-shadow: none; border: 1px solid #b5b5b5; border-radius: 4px; background: #fff; cursor:pointer } input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance:none } input[type=range].slider.is-circle::-webkit-slider-thumb { border-radius:290486px } input[type=range].slider.is-circle::-moz-range-thumb { border-radius:290486px } input[type=range].slider.is-circle::-ms-thumb { border-radius:290486px } input[type=range].slider:active::-webkit-slider-thumb { -webkit-transform: scale(1.25); transform:scale(1.25) } input[type=range].slider:active::-moz-range-thumb { transform:scale(1.25) } input[type=range].slider:active::-ms-thumb { transform:scale(1.25) } input[type=range].slider:disabled { opacity: .5; cursor:not-allowed } input[type=range].slider:disabled::-webkit-slider-thumb { cursor: not-allowed; -webkit-transform: scale(1); transform:scale(1) } input[type=range].slider:disabled::-moz-range-thumb { cursor: not-allowed; transform:scale(1) } input[type=range].slider:disabled::-ms-thumb { cursor: not-allowed; transform:scale(1) } input[type=range].slider:not([orient=vertical]) { min-height:calc((1rem + 2px) * 1.25) } input[type=range].slider:not([orient=vertical])::-webkit-slider-runnable-track { height:.5rem } input[type=range].slider:not([orient=vertical])::-moz-range-track { height:.5rem } input[type=range].slider:not([orient=vertical])::-ms-track { height:.5rem } input[type=range].slider[orient=vertical]::-webkit-slider-runnable-track { width:.5rem } input[type=range].slider[orient=vertical]::-moz-range-track { width:.5rem } input[type=range].slider[orient=vertical]::-ms-track { width:.5rem } input[type=range].slider::-webkit-slider-thumb { height: 1rem; width:1rem } input[type=range].slider::-moz-range-thumb { height: 1rem; width:1rem } input[type=range].slider::-ms-thumb { height: 1rem; width:1rem } input[type=range].slider::-ms-thumb { margin-top:0 } input[type=range].slider::-webkit-slider-thumb { margin-top:-.25rem } input[type=range].slider[orient=vertical]::-webkit-slider-thumb { margin-top: auto; margin-left:-.25rem } input[type=range].slider.is-small:not([orient=vertical]) { min-height:calc((.75rem + 2px) * 1.25) } input[type=range].slider.is-small:not([orient=vertical])::-webkit-slider-runnable-track { height:.375rem } input[type=range].slider.is-small:not([orient=vertical])::-moz-range-track { height:.375rem } input[type=range].slider.is-small:not([orient=vertical])::-ms-track { height:.375rem } input[type=range].slider.is-small[orient=vertical]::-webkit-slider-runnable-track { width:.375rem } input[type=range].slider.is-small[orient=vertical]::-moz-range-track { width:.375rem } input[type=range].slider.is-small[orient=vertical]::-ms-track { width:.375rem } input[type=range].slider.is-small::-webkit-slider-thumb { height: .75rem; width:.75rem } input[type=range].slider.is-small::-moz-range-thumb { height: .75rem; width:.75rem } input[type=range].slider.is-small::-ms-thumb { height: .75rem; width:.75rem } input[type=range].slider.is-small::-ms-thumb { margin-top:0 } input[type=range].slider.is-small::-webkit-slider-thumb { margin-top:-.1875rem } input[type=range].slider.is-small[orient=vertical]::-webkit-slider-thumb { margin-top: auto; margin-left:-.1875rem } input[type=range].slider.is-medium:not([orient=vertical]) { min-height:calc((1.25rem + 2px) * 1.25) } input[type=range].slider.is-medium:not([orient=vertical])::-webkit-slider-runnable-track { height:.625rem } input[type=range].slider.is-medium:not([orient=vertical])::-moz-range-track { height:.625rem } input[type=range].slider.is-medium:not([orient=vertical])::-ms-track { height:.625rem } input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-runnable-track { width:.625rem } input[type=range].slider.is-medium[orient=vertical]::-moz-range-track { width:.625rem } input[type=range].slider.is-medium[orient=vertical]::-ms-track { width:.625rem } input[type=range].slider.is-medium::-webkit-slider-thumb { height: 1.25rem; width:1.25rem } input[type=range].slider.is-medium::-moz-range-thumb { height: 1.25rem; width:1.25rem } input[type=range].slider.is-medium::-ms-thumb { height: 1.25rem; width:1.25rem } input[type=range].slider.is-medium::-ms-thumb { margin-top:0 } input[type=range].slider.is-medium::-webkit-slider-thumb { margin-top:-.3125rem } input[type=range].slider.is-medium[orient=vertical]::-webkit-slider-thumb { margin-top: auto; margin-left:-.3125rem } input[type=range].slider.is-large:not([orient=vertical]) { min-height:calc((1.5rem + 2px) * 1.25) } input[type=range].slider.is-large:not([orient=vertical])::-webkit-slider-runnable-track { height:.75rem } input[type=range].slider.is-large:not([orient=vertical])::-moz-range-track { height:.75rem } input[type=range].slider.is-large:not([orient=vertical])::-ms-track { height:.75rem } input[type=range].slider.is-large[orient=vertical]::-webkit-slider-runnable-track { width:.75rem } input[type=range].slider.is-large[orient=vertical]::-moz-range-track { width:.75rem } input[type=range].slider.is-large[orient=vertical]::-ms-track { width:.75rem } input[type=range].slider.is-large::-webkit-slider-thumb { height: 1.5rem; width:1.5rem } input[type=range].slider.is-large::-moz-range-thumb { height: 1.5rem; width:1.5rem } input[type=range].slider.is-large::-ms-thumb { height: 1.5rem; width:1.5rem } input[type=range].slider.is-large::-ms-thumb { margin-top:0 } input[type=range].slider.is-large::-webkit-slider-thumb { margin-top:-.375rem } input[type=range].slider.is-large[orient=vertical]::-webkit-slider-thumb { margin-top: auto; margin-left:-.375rem } input[type=range].slider.is-white::-moz-range-track { background:#fff !important } input[type=range].slider.is-white::-webkit-slider-runnable-track { background:#fff !important } input[type=range].slider.is-white::-ms-track { background:#fff !important } input[type=range].slider.is-white::-ms-fill-lower { background:#fff } input[type=range].slider.is-white::-ms-fill-upper { background:#fff } input[type=range].slider.is-white .has-output-tooltip + output, input[type=range].slider.is-white.has-output + output { background-color: #fff; color:#0a0a0a } input[type=range].slider.is-black::-moz-range-track { background:#0a0a0a !important } input[type=range].slider.is-black::-webkit-slider-runnable-track { background:#0a0a0a !important } input[type=range].slider.is-black::-ms-track { background:#0a0a0a !important } input[type=range].slider.is-black::-ms-fill-lower { background:#0a0a0a } input[type=range].slider.is-black::-ms-fill-upper { background:#0a0a0a } input[type=range].slider.is-black .has-output-tooltip + output, input[type=range].slider.is-black.has-output + output { background-color: #0a0a0a; color:#fff } input[type=range].slider.is-light::-moz-range-track { background:#f5f5f5 !important } input[type=range].slider.is-light::-webkit-slider-runnable-track { background:#f5f5f5 !important } input[type=range].slider.is-light::-ms-track { background:#f5f5f5 !important } input[type=range].slider.is-light::-ms-fill-lower { background:#f5f5f5 } input[type=range].slider.is-light::-ms-fill-upper { background:#f5f5f5 } input[type=range].slider.is-light .has-output-tooltip + output, input[type=range].slider.is-light.has-output + output { background-color: #f5f5f5; color:#363636 } input[type=range].slider.is-dark::-moz-range-track { background:#363636 !important } input[type=range].slider.is-dark::-webkit-slider-runnable-track { background:#363636 !important } input[type=range].slider.is-dark::-ms-track { background:#363636 !important } input[type=range].slider.is-dark::-ms-fill-lower { background:#363636 } input[type=range].slider.is-dark::-ms-fill-upper { background:#363636 } input[type=range].slider.is-dark .has-output-tooltip + output, input[type=range].slider.is-dark.has-output + output { background-color: #363636; color:#f5f5f5 } input[type=range].slider.is-primary::-moz-range-track { background:#00d1b2 !important } input[type=range].slider.is-primary::-webkit-slider-runnable-track { background:#00d1b2 !important } input[type=range].slider.is-primary::-ms-track { background:#00d1b2 !important } input[type=range].slider.is-primary::-ms-fill-lower { background:#00d1b2 } input[type=range].slider.is-primary::-ms-fill-upper { background:#00d1b2 } input[type=range].slider.is-primary .has-output-tooltip + output, input[type=range].slider.is-primary.has-output + output { background-color: #00d1b2; color:#fff } input[type=range].slider.is-link::-moz-range-track { background:#3273dc !important } input[type=range].slider.is-link::-webkit-slider-runnable-track { background:#3273dc !important } input[type=range].slider.is-link::-ms-track { background:#3273dc !important } input[type=range].slider.is-link::-ms-fill-lower { background:#3273dc } input[type=range].slider.is-link::-ms-fill-upper { background:#3273dc } input[type=range].slider.is-link .has-output-tooltip + output, input[type=range].slider.is-link.has-output + output { background-color: #3273dc; color:#fff } input[type=range].slider.is-info::-moz-range-track { background:#209cee !important } input[type=range].slider.is-info::-webkit-slider-runnable-track { background:#209cee !important } input[type=range].slider.is-info::-ms-track { background:#209cee !important } input[type=range].slider.is-info::-ms-fill-lower { background:#209cee } input[type=range].slider.is-info::-ms-fill-upper { background:#209cee } input[type=range].slider.is-info .has-output-tooltip + output, input[type=range].slider.is-info.has-output + output { background-color: #209cee; color:#fff } input[type=range].slider.is-success::-moz-range-track { background:#23d160 !important } input[type=range].slider.is-success::-webkit-slider-runnable-track { background:#23d160 !important } input[type=range].slider.is-success::-ms-track { background:#23d160 !important } input[type=range].slider.is-success::-ms-fill-lower { background:#23d160 } input[type=range].slider.is-success::-ms-fill-upper { background:#23d160 } input[type=range].slider.is-success .has-output-tooltip + output, input[type=range].slider.is-success.has-output + output { background-color: #23d160; color:#fff } input[type=range].slider.is-warning::-moz-range-track { background:#ffdd57 !important } input[type=range].slider.is-warning::-webkit-slider-runnable-track { background:#ffdd57 !important } input[type=range].slider.is-warning::-ms-track { background:#ffdd57 !important } input[type=range].slider.is-warning::-ms-fill-lower { background:#ffdd57 } input[type=range].slider.is-warning::-ms-fill-upper { background:#ffdd57 } input[type=range].slider.is-warning .has-output-tooltip + output, input[type=range].slider.is-warning.has-output + output { background-color: #ffdd57; color:rgba(0, 0, 0, .7) } input[type=range].slider.is-danger::-moz-range-track { background:#ff3860 !important } input[type=range].slider.is-danger::-webkit-slider-runnable-track { background:#ff3860 !important } input[type=range].slider.is-danger::-ms-track { background:#ff3860 !important } input[type=range].slider.is-danger::-ms-fill-lower { background:#ff3860 } input[type=range].slider.is-danger::-ms-fill-upper { background:#ff3860 } input[type=range].slider.is-danger .has-output-tooltip + output, input[type=range].slider.is-danger.has-output + output { background-color: #ff3860; color: #fff }