commit 5384d1531f4787466da57d0035452566fd0fdd75 Author: jgthms Date: Sun Jan 24 00:03:43 2016 +0000 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..4b114324 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.sass-cache +.DS_Store diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..4290a29d --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 Jeremy Thomas + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 00000000..f64477c7 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# [Bulma](http://bulma.io) + +Bulma is a modern CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). + +## Copyright and license + +Code copyright 2016 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE). diff --git a/bulma.sass b/bulma.sass new file mode 100644 index 00000000..45a7e672 --- /dev/null +++ b/bulma.sass @@ -0,0 +1,9 @@ +@charset "utf-8" + +@import bulma/utilities/utilities +@import bulma/config/variables +@import bulma/config/generated-variables +@import bulma/base/base +@import bulma/elements/elements +@import bulma/components/components +@import bulma/layout/layout diff --git a/bulma/base/base.sass b/bulma/base/base.sass new file mode 100644 index 00000000..2f28f89d --- /dev/null +++ b/bulma/base/base.sass @@ -0,0 +1,6 @@ +@charset "utf-8" + +@import generic +@import content +@import highlight +@import helpers diff --git a/bulma/base/content.sass b/bulma/base/content.sass new file mode 100644 index 00000000..05ab72e0 --- /dev/null +++ b/bulma/base/content.sass @@ -0,0 +1,51 @@ +.content + &:not(:last-child) + margin-bottom: 20px + h1, + h2, + h3, + h4, + h5, + h6 + color: $text-strong + font-weight: 300 + line-height: 1.125 + margin-bottom: 20px + h1, + h2, + h3 + &:not(:first-child) + margin-top: 40px + h1 + font-size: 2em + h2 + font-size: 1.75em + h3 + font-size: 1.5em + h4 + font-size: 1.25em + h5 + font-size: 1.125em + h6 + font-size: 1em + p:not(:last-child) + margin-bottom: 1em + li + li + margin-top: 0.25em + ol + list-style: decimal outside + margin: 1em 2em + ul + list-style: disc outside + margin: 1em 2em + ul + list-style-type: circle + margin-top: 0.5em + ul + list-style-type: square + blockquote + background: $background + border-left: 5px solid $border + padding: 1.5em + &:not(:last-child) + margin-bottom: 1em diff --git a/bulma/base/generic.sass b/bulma/base/generic.sass new file mode 100644 index 00000000..b2c7e36f --- /dev/null +++ b/bulma/base/generic.sass @@ -0,0 +1,101 @@ +html + background: $body-background + font-size: $size-normal + -moz-osx-font-smoothing: grayscale + -webkit-font-smoothing: antialiased + min-width: 300px + overflow-x: hidden + overflow-y: scroll + text-rendering: optimizeLegibility + +body, +button, +input, +select, +textarea + font-family: $family-primary + +code, +pre + -moz-osx-font-smoothing: auto + -webkit-font-smoothing: auto + font-family: monospace + line-height: 1.25 + +body + color: $text + font-size: 1rem + line-height: 1.428571428571429 + +a + color: $link + cursor: pointer + text-decoration: none + transition: none $speed $easing + &:hover + color: $link-hover + +code + background: $code-background + color: $code + font-size: 12px + font-weight: normal + padding: 1px 2px 2px + +hr + border-top-color: $border + margin: 20px 0 + +img + max-height: 100% + max-width: 100% + +input[type="checkbox"], +input[type="radio"] + vertical-align: baseline + +small + font-size: $size-small + +strong + color: $text-strong + +article, +aside, +figure, +footer, +header, +hgroup, +section + display: block + +pre + background: $pre-background + color: $pre + white-space: pre + word-wrap: normal + code + background: $pre-background + color: $pre + display: block + overflow-x: auto + padding: 16px 20px + +table + width: 100% + th, + td + text-align: left + vertical-align: top + th + color: $text-strong + +.container + margin: 0 auto + max-width: 960px + position: relative + +.fa + font-size: 21px + text-align: center + vertical-align: top diff --git a/bulma/base/helpers.sass b/bulma/base/helpers.sass new file mode 100644 index 00000000..1cc0b704 --- /dev/null +++ b/bulma/base/helpers.sass @@ -0,0 +1,27 @@ +.is-centered + text-align: center + +.is-left + text-align: left + +.is-right + text-align: right + +.is-block + display: block + +.is-disabled + pointer-events: none + +.is-inline + display: inline + +.is-marginless + margin: 0 !important + +.is-unselectable + -webkit-touch-callout: none + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none diff --git a/bulma/base/highlight.sass b/bulma/base/highlight.sass new file mode 100644 index 00000000..710c6ba4 --- /dev/null +++ b/bulma/base/highlight.sass @@ -0,0 +1,123 @@ +.highlight + background-color: #fdf6e3 + color: #586e75 + .c + color: #93a1a1 + .err, + .g + color: #586e75 + .k + color: #859900 + .l, + .n + color: #586e75 + .o + color: #859900 + .x + color: #cb4b16 + .p + color: #586e75 + .cm + color: #93a1a1 + .cp + color: #859900 + .c1 + color: #93a1a1 + .cs + color: #859900 + .gd + color: #2aa198 + .ge + color: #586e75 + font-style: italic + .gr + color: #dc322f + .gh + color: #cb4b16 + .gi + color: #859900 + .go, + .gp + color: #586e75 + .gs + color: #586e75 + font-weight: bold + .gu + color: #cb4b16 + .gt + color: #586e75 + .kc + color: #cb4b16 + .kd + color: #268bd2 + .kn, + .kp + color: #859900 + .kr + color: #268bd2 + .kt + color: #dc322f + .ld + color: #586e75 + .m, + .s + color: #2aa198 + .na + color: #B58900 + .nb + color: #586e75 + .nc + color: #268bd2 + .no + color: #cb4b16 + .nd + color: #268bd2 + .ni, + .ne + color: #cb4b16 + .nf + color: #268bd2 + .nl, + .nn, + .nx, + .py + color: #586e75 + .nt, + .nv + color: #268bd2 + .ow + color: #859900 + .w + color: #586e75 + .mf, + .mh, + .mi, + .mo + color: #2aa198 + .sb + color: #93a1a1 + .sc + color: #2aa198 + .sd + color: #586e75 + .s2 + color: #2aa198 + .se + color: #cb4b16 + .sh + color: #586e75 + .si, + .sx + color: #2aa198 + .sr + color: #dc322f + .s1, + .ss + color: #2aa198 + .bp, + .vc, + .vg, + .vi + color: #268bd2 + .il + color: #2aa198 diff --git a/bulma/components/card.sass b/bulma/components/card.sass new file mode 100644 index 00000000..b58e3a41 --- /dev/null +++ b/bulma/components/card.sass @@ -0,0 +1,36 @@ +.card + background: white + box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1) + max-width: 300px + position: relative + .media:not(:last-child) + margin-bottom: 10px + +.card-image + display: block + position: relative + img + display: block + &.is-square, + &.is-4x3, + &.is-3x2 + img + +overlay + height: 100% + width: 100% + &.is-square + padding-top: 100% + &.is-4x3 + padding-top: 75% + &.is-3x2 + padding-top: 66.6666% + +.card-content + padding: 20px + .title + .subtitle + margin-top: -20px + +.card-footer + background: $background + display: block + padding: 10px diff --git a/bulma/components/components.sass b/bulma/components/components.sass new file mode 100644 index 00000000..b8b181d3 --- /dev/null +++ b/bulma/components/components.sass @@ -0,0 +1,11 @@ +@charset "utf-8" + +@import grid +@import navbar +@import card +@import table +@import tabs +@import media + +.block:not(:last-child) + margin-bottom: 20px diff --git a/bulma/components/grid.sass b/bulma/components/grid.sass new file mode 100644 index 00000000..72a2d1ff --- /dev/null +++ b/bulma/components/grid.sass @@ -0,0 +1,48 @@ +.column + +mobile + & + .column + margin-top: 20px + +tablet + flex: 1 + & + .column + margin-left: 20px + &.is-double + flex: 2 + &.is-triple + flex: 3 + &.is-quadruple + flex: 4 + &.is-half + flex: none + width: 50% + &.is-third + flex: none + width: 33.3333% + &.is-quarter + flex: none + width: 25% + @for $i from 1 through 11 + &.is-#{$i} + flex: none + width: ($i / 12) * 100% + +.columns + &:not(:last-child) + margin-bottom: 20px + +tablet + display: flex + &.is-gapless + & > .column + .column + margin-left: 0 + &.is-vcentered + align-items: center + &.is-grid + +tablet + flex-wrap: wrap + & > .column + flex-basis: 33.3333% + max-width: 33.3333% + padding: 10px + width: 33.3333% + & + .column + margin-left: 0 diff --git a/bulma/components/media.sass b/bulma/components/media.sass new file mode 100644 index 00000000..9249f307 --- /dev/null +++ b/bulma/components/media.sass @@ -0,0 +1,69 @@ +.media-image + &.is-32 + width: 32px + &.is-40 + width: 40px + +mobile + margin-bottom: 10px + +tablet + margin-right: 10px + width: 60px + +.media-number + background: $background + border-radius: 290486px + display: inline-block + font-size: $size-medium + height: 32px + line-height: 24px + min-width: 32px + padding: 4px 8px + text-align: center + vertical-align: top + +mobile + margin-bottom: 10px + +tablet + margin-right: 10px + +.media-content + flex: 1 + .textarea + min-height: 60px + +.media + align-items: flex-start + .content:not(:last-child) + margin-bottom: 10px + .media + border-top: 1px solid rgba($border, 0.5) + display: flex + padding-top: 10px + .media-image + margin-bottom: 0 + margin-right: 10px + width: 40px + .textarea + +control-small + .button + +button-small + .content:not(:last-child), + .control:not(:last-child) + margin-bottom: 5px + .media + font-size: 12px + padding-top: 5px + & + .media + margin-top: 5px + & + .media + border-top: 1px solid rgba($border, 0.5) + margin-top: 10px + padding-top: 10px + &.is-large + & + .media + margin-top: 20px + padding-top: 20px + +tablet + display: flex + &.is-large + .media-number + margin-right: 20px diff --git a/bulma/components/menu.sass b/bulma/components/menu.sass new file mode 100644 index 00000000..7f1a1cc9 --- /dev/null +++ b/bulma/components/menu.sass @@ -0,0 +1,25 @@ +.menu + border: 1px solid $border + +.menu-heading + @extend .heading + color: $text-strong + +.menu-list + a + color: $text + &:hover + color: $link + +.menu-block + .checkbox + border: 1px solid transparent + border-radius: $radius + display: block + padding: 8px + padding-left: 32px + input + left: 9px + top: 9px + &:hover + border-color: $link diff --git a/bulma/components/navbar.sass b/bulma/components/navbar.sass new file mode 100644 index 00000000..153f93c8 --- /dev/null +++ b/bulma/components/navbar.sass @@ -0,0 +1,45 @@ +.navbar-item + .title, + .subtitle + margin-bottom: 0 + +mobile + &:not(:last-child) + margin-bottom: 10px + +.navbar + &:not(:last-child) + margin-bottom: 20px + code + border-radius: $radius + img + display: inline-block + vertical-align: top + +tablet + align-items: center + display: flex + justify-content: space-between + & > .navbar-item + &:not(.is-narrow) + flex: 1 + +.navbar-left, +.navbar-right + .navbar-item + &.is-flexible + flex: 1 + &:not(:last-child) + margin-right: 10px + +.navbar-left + +mobile + & + .navbar-right + margin-top: 20px + +tablet + align-items: center + display: flex + +.navbar-right + +tablet + align-items: center + display: flex + justify-content: flex-end diff --git a/bulma/components/table.sass b/bulma/components/table.sass new file mode 100644 index 00000000..bc831b0e --- /dev/null +++ b/bulma/components/table.sass @@ -0,0 +1,73 @@ +.table + background: white + margin-bottom: 20px + width: 100% + th, + td + border: 1px solid $border + border-width: 0 0 1px + padding: 8px 10px + vertical-align: top + &.table-link + padding: 0 + & > a + display: block + padding: 8px 10px + &:hover + background: $link + color: $link-invert + &.table-icon + padding: 5px + text-align: center + white-space: nowrap + width: 1% + .fa + +fa(21px, 24px) + &.table-link + padding: 0 + & > a + padding: 5px + th + color: $text-strong + text-align: left + tr + &:hover + background: rgba($background, 0.5) + color: $text-strong + &:last-child td + border-bottom-width: 0 + thead + th, + td + border-width: 0 0 2px + tfoot + th, + td + border-width: 2px 0 0 + &.is-bordered + th, + td + border-width: 1px + tr + &:last-child td + border-bottom-width: 1px + &.is-narrow + th, + td + padding: 5px 10px + &.table-link + padding: 0 + & > a + padding: 5px 10px + &.table-icon + padding: 2px + &.table-link + padding: 0 + & > a + padding: 2px + &.is-striped + tbody + tr:nth-child(2n) + background: rgba($background, 0.5) + &:hover + background: $background diff --git a/bulma/components/tabs.sass b/bulma/components/tabs.sass new file mode 100644 index 00000000..8cf6b023 --- /dev/null +++ b/bulma/components/tabs.sass @@ -0,0 +1,84 @@ +.tabs + line-height: 24px + overflow: hidden + overflow-x: auto + white-space: nowrap + &:not(:last-child) + margin-bottom: 20px + .fa + line-height: 24px + margin: 0 -2px + width: 24px + a + border-bottom: 1px solid $border + color: $text + display: block + margin-bottom: -1px + padding: 5px 0 + vertical-align: top + &:hover + border-bottom-color: $text-strong + color: $text-strong + li + display: inline-block + vertical-align: top + & + li + margin-left: 20px + &.is-active + a + border-bottom-color: $link + color: $link + ul + border-bottom: 1px solid $border + &.is-boxed + a + border: 1px solid transparent + border-radius: $radius $radius 0 0 + padding: 5px 15px + &:hover + background: $background + border-bottom-color: $border + li + & + li + margin-left: 5px + &.is-active + a + background: white + border-color: $border + border-bottom-color: transparent + &.is-toggle + ul + border-bottom: none + display: flex + a + border: 1px solid $border + margin-bottom: 0 + padding: 5px 10px + position: relative + &:hover + background: $background + border-color: $border-hover + z-index: 2 + li + & + li + margin-left: -1px + &:first-child a + border-radius: $radius 0 0 $radius + &:last-child a + border-radius: 0 $radius $radius 0 + &.is-active + a + background: $primary + border-color: $primary + color: $primary-invert + z-index: 1 + &.is-fullwidth + +tablet + ul + display: flex + justify-content: center + text-align: center + li + flex: 1 + & + li + margin-left: 0 diff --git a/bulma/config/generated-variables.sass b/bulma/config/generated-variables.sass new file mode 100644 index 00000000..bd773513 --- /dev/null +++ b/bulma/config/generated-variables.sass @@ -0,0 +1,74 @@ +// Colors + +$primary-invert: findColorInvert($primary) +$info: $blue +$info-invert: findColorInvert($info) +$success: $green +$success-invert: findColorInvert($success) +$warning: $yellow +$warning-invert: findColorInvert($warning) +$danger: $red +$danger-invert: findColorInvert($danger) + +$colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) + +$body-background: $grey-lighter + +$background: $grey-lighter + +$border: $grey-light +$border-hover: $grey + +// Text + +$text: $grey-dark +$text-invert: findColorInvert($text) +$text-light: $grey +$text-strong: $grey-darker + +// Code + +$code: $info +$code-background: $background + +$pre: $text +$pre-background: $background + +// Links + +$link: $primary +$link-invert: $primary-invert +$link-visited: $purple + +$link-hover: $grey-darker +$link-hover-background: $grey-lighter +$link-hover-border: $grey-darker + +$link-active: $grey-darker +$link-active-border: $grey-darker + +// Controls + +$control: $text-strong +$control-background: $text-invert +$control-border: $border + +$control-hover: $link-hover +$control-hover-border: $border-hover + +$control-active: $link +$control-active-background: $link +$control-active-background-invert: $link-invert +$control-active-border: $link + +// Typography + +$family-primary: $family-sans-serif + +$size-small: $size-7 +$size-normal: $size-6 +$size-medium: $size-5 +$size-large: $size-3 +$size-huge: $size-1 + +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 diff --git a/bulma/config/variables.sass b/bulma/config/variables.sass new file mode 100644 index 00000000..1c06bdff --- /dev/null +++ b/bulma/config/variables.sass @@ -0,0 +1,41 @@ +// Colors + +$grey-darker: #222324 +$grey-dark: #69707a +$grey: #aeb1b5 +$grey-light: #d3d6db +$grey-lighter: #ebeff5 +$grey-lighter: #f5f7fa + +$blue: #42afe3 +$green: #97cd76 +$orange: #f68b39 +$purple: #847bb9 +$red: #ed6c63 +$turquoise: #1fc8db +$yellow: #fce473 + +$primary: $turquoise + +// Typography + +$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif + +$size-1: 48px +$size-2: 40px +$size-3: 28px +$size-4: 24px +$size-5: 18px +$size-6: 14px + +$size-7: 11px + +// Dimensions + +$header-height: 50px + +// Miscellaneous + +$easing: ease-out +$radius: 3px +$speed: 86ms diff --git a/bulma/elements/buttons.sass b/bulma/elements/buttons.sass new file mode 100644 index 00000000..52ad9743 --- /dev/null +++ b/bulma/elements/buttons.sass @@ -0,0 +1,96 @@ +=button-small + border-radius: 2px + font-size: 11px + height: 24px + line-height: 16px + padding: 3px 6px +=button-medium + font-size: 18px + height: 40px + padding: 7px 14px +=button-large + font-size: 22px + height: 48px + padding: 11px 20px + +.button + +control + padding: 3px 10px + strong + color: inherit + small + display: block + font-size: $size-small + line-height: 1 + margin-top: 5px + .fa + line-height: 24px + margin: 0 -2px + width: 24px + &:hover + color: $control-hover + &:active + box-shadow: inset 0 1px 2px rgba(black, 0.2) + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background: $color + border-color: transparent + color: $color-invert + &:hover, + &:focus + background: darken($color, 10%) + border-color: transparent + color: $color-invert + &:active + border-color: transparent + &.is-outlined + background: transparent + border-color: $color + color: $color + &:hover, + &:focus + border-color: darken($color, 10%) + color: darken($color, 10%) + &.is-inverted + background: $color-invert + color: $color + &:hover + background: darken($color-invert, 5%) + &.is-outlined + background-color: transparent + border-color: $color-invert + color: $color-invert + &:hover + background: rgba(black, 0.05) + &.is-loading:after + border-color: transparent transparent $color-invert $color-invert !important + &.is-small + +button-small + &.is-medium + +button-medium + &.is-large + +button-large + &.is-flexible + height: auto + &.is-loading + color: transparent + pointer-events: none + &:after + @extend .loader + +center(16px) + position: absolute !important + &.is-disabled, + &[disabled] + opacity: 0.5 + pointer-events: none + +tablet + small + color: $text + left: 0 + margin-top: 10px + position: absolute + top: 100% + width: 100% + diff --git a/bulma/elements/controls.sass b/bulma/elements/controls.sass new file mode 100644 index 00000000..3178d943 --- /dev/null +++ b/bulma/elements/controls.sass @@ -0,0 +1,213 @@ +=control + -moz-appearance: none + -webkit-appearance: none + background: $control-background + border: 1px solid $control-border + border-radius: $radius + color: $control + display: inline-block + font-size: $size-normal + height: 32px + line-height: 24px + padding: 3px 8px + position: relative + vertical-align: top + &:hover + border-color: $control-hover-border + &:active, + &:focus + border-color: $control-active-border + outline: none + &[disabled] + &, + &:hover + background: $background + border-color: $control-border + +placeholder + color: rgba($control, 0.3) + +=control-small + border-radius: 2px + font-size: 11px + height: 24px + line-height: 16px + padding: 3px 6px +=control-medium + font-size: 18px + height: 40px + line-height: 32px + padding: 3px 10px +=control-large + font-size: 24px + height: 48px + line-height: 40px + padding: 3px 12px + +.input + +control + box-shadow: inset 0 1px 2px rgba(black, 0.1) + display: block + max-width: 100% + width: 100% + &[type="search"] + border-radius: 290486px + &.is-small + +control-small + &.is-medium + +control-medium + &.is-large + +control-large + &.is-fullwidth + display: block + width: 100% + &.is-inline + display: inline + width: auto + +.textarea + @extend .input + line-height: 1.2 + max-height: 600px + max-width: 100% + min-height: 120px + min-width: 100% + padding: 10px + resize: vertical + +%control-with-element + cursor: pointer + display: inline-block + line-height: 16px + padding-left: 18px + position: relative + vertical-align: top + input + +control + border-radius: 1px + box-shadow: inset 0 1px 1px rgba(black, 0.1) + cursor: pointer + float: left + height: 14px + left: 0 + outline: none + padding: 0 + position: absolute + top: 1px + width: 14px + &:after + +arrow($control-active-background-invert) + height: 4px + left: 3px + opacity: 0 + position: absolute + top: 3px + transform: rotate(-45deg) scale(1) + &:checked + background: $control-active-background + border-color: $control-active-background + box-shadow: none + &:after + opacity: 1 + &:hover + color: $control-hover + input + border-color: $control-hover-border + &:checked + border-color: $control-active-border + &.is-disabled + &, + &:hover + color: $text-light + +.checkbox + @extend %control-with-element + +.radio + @extend %control-with-element + & + .radio + margin-left: 10px + input + border-radius: 8px + &:after + background: $link-invert + border: 0 + border-radius: 2px + left: 4px + top: 4px + transform: none + width: 4px + +.select + display: inline-block + height: 32px + position: relative + vertical-align: top + select + +control + cursor: pointer + display: block + outline: none + padding-right: 36px + &:hover + border-color: $control-hover-border + &:after + +arrow($link) + margin-top: -6px + right: 16px + top: 50% + &:hover + &:after + border-color: $link-hover + +.control + position: relative + &.is-loading + &:after + @extend .loader + position: absolute !important + right: 8px + top: 8px + &:not(:last-child) + margin-bottom: 10px + &.is-withicon + .fa + +fa(14px, 20px) + color: $text-light + left: 6px + pointer-events: none + position: absolute + top: 6px + z-index: 1 + .input + padding-left: 32px + &:focus + .fa + color: $control-active + &.is-horizontal + display: flex + & > .button, + & > .input, + & > .select + &:not(:last-child) + margin-right: 10px + & > .input + flex: 1 + &.is-grouped + display: flex + .input, + .button, + .select + border-radius: 0 + margin-right: -1px + &:hover + z-index: 2 + &:active, + &:focus + z-index: 3 + &:first-child + border-radius: $radius 0 0 $radius + select + border-radius: $radius 0 0 $radius + &:last-child + border-radius: 0 $radius $radius 0 + &.is-centered + justify-content: center diff --git a/bulma/elements/elements.sass b/bulma/elements/elements.sass new file mode 100644 index 00000000..4011195c --- /dev/null +++ b/bulma/elements/elements.sass @@ -0,0 +1,172 @@ +@charset "utf-8" + +@import controls +@import buttons +@import titles +@import messages +@import notifications + +.highlight + font-size: 12px + font-weight: normal + max-width: 100% + overflow: hidden + padding: 0 + &:not(:last-child) + margin-bottom: 20px + pre + overflow: auto + max-width: 100% + +.delete + background: rgba(black, 0.2) + border-radius: 290486px + cursor: pointer + display: inline-block + height: 24px + position: relative + vertical-align: top + width: 24px + &:before, + &:after + background: white + content: "" + display: block + height: 2px + left: 6px + position: absolute + top: 11px + width: 12px + &:before + transform: rotate(45deg) + &:after + transform: rotate(-45deg) + &:hover + background: rgba(black, 0.5) + &.is-small + height: 16px + width: 16px + &:before, + &:after + left: 4px + top: 7px + width: 8px + +.icon + +fa(21px, 24px) + .fa + font-size: inherit + line-height: inherit + &.is-small + +fa(14px, 20px) + &.is-medium + +fa(28px, 32px) + &.is-large + +fa(42px, 48px) + +.hamburger + cursor: pointer + display: block + height: $header-height + padding: 19px 17px + position: relative + width: $header-height + span + background: $text + display: block + height: 1px + left: 17px + position: absolute + transition: none $speed $easing + transition-property: background, left, opacity, transform + width: 15px + &:nth-child(1) + top: 19px + &:nth-child(2) + top: 24px + &:nth-child(3) + bottom: 20px + &:hover + background: $background + &.is-active + span + background: $link + &:nth-child(1) + left: 20px + transform: rotate(45deg) + transform-origin: left top + &:nth-child(2) + opacity: 0 + &:nth-child(3) + left: 20px + transform: rotate(-45deg) + transform-origin: left bottom + +.heading + display: block + font-size: 11px + letter-spacing: 1px + margin-bottom: 5px + text-transform: uppercase + +.loader + animation: spin-around 500ms infinite linear + border: 2px solid $border + border-radius: 290486px + border-right-color: transparent + border-top-color: transparent + content: "" + display: block + height: 16px + position: relative + width: 16px + +.number + background: $background + border-radius: 290486px + display: inline-block + font-size: $size-medium + vertical-align: top + +.tag + background: $background + border-radius: $radius + box-shadow: inset 0 -1px 0 rgba(black, 0.1) + color: $text + display: inline-block + font-size: 12px + height: 24px + line-height: 16px + padding: 4px 10px + vertical-align: top + white-space: nowrap + &.is-dark + background: $text + color: $text-invert + &.is-rounded + border-radius: 290486px + &.is-medium + box-shadow: inset 0 -2px 0 rgba(black, 0.1) + font-size: $size-normal + height: 32px + padding: 7px 14px 9px + &:not(.is-large) + .delete + @extend .delete.is-small + margin-left: 4px + margin-right: -6px + &.is-large + box-shadow: inset 0 -2px 0 rgba(black, 0.1) + font-size: $size-5 + height: 40px + line-height: 24px + padding: 7px 18px 9px + .delete + margin-left: 4px + margin-right: -8px + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background: $color + color: $color-invert diff --git a/bulma/elements/messages.sass b/bulma/elements/messages.sass new file mode 100644 index 00000000..0d239db6 --- /dev/null +++ b/bulma/elements/messages.sass @@ -0,0 +1,41 @@ +.message-body + border: 1px solid $border + border-radius: $radius + padding: 12px 15px + strong + color: inherit + +.message-header + background: $text + border-radius: $radius $radius 0 0 + color: $text-invert + font-size: 10px + font-weight: bold + letter-spacing: 1px + padding: 3px 8px + text-transform: uppercase + & + .message-body + border-radius: 0 0 $radius $radius + border-top: none + +.message + background: $background + border-radius: $radius + &:not(:last-child) + margin-bottom: 20px + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + $lightning: (100% - lightness($color)) - 4% + $darkness: max(lightness($color) - 10%, lightness($color)) + &.is-#{$name} + background: lighten($color, $lightning) + .message-header + background: $color + color: $color-invert + .message-body + border-color: $color + @if (colorLuminance($color) > 0.8) + color: desaturate(lighten(darken($color, 100%), 40%), 40%) + @else + color: desaturate(lighten(darken($color, 100%), 50%), 30%) diff --git a/bulma/elements/notifications.sass b/bulma/elements/notifications.sass new file mode 100644 index 00000000..28bdf3b6 --- /dev/null +++ b/bulma/elements/notifications.sass @@ -0,0 +1,20 @@ +.notification + +clearfix + background: $background + border-radius: $radius + padding: 16px 20px + position: relative + &:not(:last-child) + margin-bottom: 20px + .title + color: inherit + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background: $color + color: $color-invert + .delete + border-radius: 0 $radius + float: right + margin: -16px -20px 0 20px diff --git a/bulma/elements/titles.sass b/bulma/elements/titles.sass new file mode 100644 index 00000000..81d17e9a --- /dev/null +++ b/bulma/elements/titles.sass @@ -0,0 +1,57 @@ +.title, +.subtitle + font-weight: 300 + &:not(:last-child) + margin-bottom: 20px + +.title + color: $text-strong + font-size: $size-large + line-height: 1 + strong + color: inherit + code + display: inline-block + font-size: $size-large + & + .subtitle + margin-top: -10px + & + .highlight + margin-top: -10px + &.is-normal + font-weight: 400 + strong + font-weight: 700 + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size + code + font-size: nth($sizes, min($i + 1, 6)) + +tablet + & + .subtitle + margin-top: -15px + +.subtitle + font-size: $size-medium + line-height: 1.125 + strong + color: $text-strong + font-weight: 400 + code + border-radius: $radius + display: inline-block + font-size: $size-normal + padding: 2px 3px + vertical-align: top + & + .text + margin-top: 20px + &.is-normal + font-weight: 400 + strong + font-weight: 700 + @each $size in $sizes + $i: index($sizes, $size) + &.is-#{$i} + font-size: $size + code + font-size: nth($sizes, min($i + 1, 6)) diff --git a/bulma/layout/footer.sass b/bulma/layout/footer.sass new file mode 100644 index 00000000..dfc51905 --- /dev/null +++ b/bulma/layout/footer.sass @@ -0,0 +1,11 @@ +.footer + background: $background + padding: 40px 20px 80px + a + color: $text + &:hover + color: $text-strong + &:not(.icon) + border-bottom: 1px solid $border + &:hover + border-bottom-color: $link diff --git a/bulma/layout/header.sass b/bulma/layout/header.sass new file mode 100644 index 00000000..9dbbb5a7 --- /dev/null +++ b/bulma/layout/header.sass @@ -0,0 +1,149 @@ +.header + +clearfix + background: white + box-shadow: 0 1px 2px rgba(black, 0.1) + height: $header-height + line-height: 24px + position: relative + text-align: center + z-index: 2 + .container + align-items: center + box-shadow: 0 1px 0 rgba($border, 0.3) + display: flex + height: $header-height + +.header-toggle + @extend .hamburger + +tablet + display: none + +// Elements + +.header-item + display: block + padding: 0 10px + a + color: $text + &:hover + color: $link-hover + &.is-active + color: $link-active + .fa + font-size: 21px + line-height: 24px + +.header-icon + +fa(14px, 24px) + color: $text + margin: 0 5px + &:hover + color: $link-hover + +.header-tab + border-bottom: 1px solid transparent + color: $text + display: block + height: $header-height + line-height: 24px + padding: 13px 15px + &:hover + border-bottom: 1px solid $link + &.is-active + border-bottom: 3px solid $link + color: $link + +.header-logo + align-items: center + display: flex + img + max-height: 24px + +touch + padding: 0 10px + +tablet + padding-right: 10px + +// Containers + +.header-left + align-items: center + display: flex + flex: 1 + overflow: hidden + overflow-x: auto + white-space: nowrap + +.header-center + align-items: center + display: flex + height: $header-height + left: 50% + position: absolute + transform: translateX(-50%) + +.header-right + align-items: center + +tablet + display: flex + +desktop + .header-item:last-child + padding-right: 0 + +.header-full + align-items: stretch + display: flex + height: $header-height + justify-content: center + text-align: center + width: 100% + & > .header-item + align-items: stretch + display: flex + flex: 1 + justify-content: center + padding: 0 + & > a + align-items: center + display: flex + justify-content: center + width: 100% + +.header-menu + +mobile + background: white + box-shadow: 0 4px 7px rgba(black, 0.1) + display: none + position: absolute + right: 0 + top: $header-height + z-index: 100 + .header-item + border-top: 1px solid rgba($border, 0.5) + padding: 10px + &.is-active + display: block + +// States + +.header.is-centered + justify-content: center + .header-left, + .header-center, + .header-right + justify-content: center + +.header.is-small + background: $background + box-shadow: none + height: 40px + z-index: 1 + .container + height: 40px + .header-tab + font-size: 13px + height: 40px + padding: 8px 10px + &:hover, + &.is-active + border-bottom-width: 2px + diff --git a/bulma/layout/hero.sass b/bulma/layout/hero.sass new file mode 100644 index 00000000..40a9a75e --- /dev/null +++ b/bulma/layout/hero.sass @@ -0,0 +1,143 @@ +.hero + background: white + text-align: center + & > .container + padding: 40px 20px + a + color: inherit + .header + background: none + box-shadow: none + .tabs + ul + border-bottom: none + a + border: none + margin-bottom: 0 + padding: 0 0 10px + &.is-boxed + a + border: none + padding: 6px 12px + +desktop + & > .container + padding: 40px 0 + &.is-alt + background: $background + color: $text-light + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background: $color + color: $color-invert + .title + color: $color-invert + strong + color: inherit + .subtitle + color: rgba($color-invert, 0.7) + strong + color: $color-invert + .header .container + box-shadow: 0 1px 0 rgba($color-invert, 0.2) + .header-icon, + .header-item > a:not(.button) + color: $color-invert + opacity: 0.5 + &:hover, + &.is-active + opacity: 1 + .tabs + a + color: $color-invert + opacity: 0.5 + &:hover + opacity: 1 + li.is-active a + opacity: 1 + &.is-boxed + a + color: $color-invert + &:hover + background: rgba(black, 0.1) + li.is-active a + &, + &:hover + background: $color-invert + color: $color + &.is-bold + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%) + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%) + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%) + +mobile + .header-toggle + span + background: $color-invert + &:hover + background: rgba(black, 0.1) + &.is-active + span + background: $color-invert + .header-menu + background: $color + .header-item + border-top-color: rgba($color-invert, 0.2) + &.is-fullheight, + &.is-medium, + &.is-large + +tablet + .title + font-size: $size-huge + .subtitle + font-size: $size-large + .tabs + font-size: $size-medium + a + padding-bottom: 15px + &.is-boxed + a + padding: 12px 16px + &.is-fullheight + align-items: center + display: flex + height: 100vh + .tabs + white-space: normal + &.is-medium + +tablet + & > .container + padding: 120px 20px + .title + font-size: 40px + .subtitle + font-size: 24px + .tabs + font-size: 16px + +desktop + & > .container + padding: 120px 0 + &.is-large + +tablet + & > .container + padding: 240px 20px + +desktop + & > .container + padding: 240px 0 + &.is-left + text-align: left + &.is-right + text-align: right + +.hero-buttons + margin-top: 20px + +mobile + .button + display: block + &:not(:last-child) + margin-bottom: 10px + +tablet + display: flex + justify-content: center + .button:not(:last-child) + margin-right: 20px diff --git a/bulma/layout/layout.sass b/bulma/layout/layout.sass new file mode 100644 index 00000000..81038f42 --- /dev/null +++ b/bulma/layout/layout.sass @@ -0,0 +1,6 @@ +@charset "utf-8" + +@import header +@import hero +@import section +@import footer diff --git a/bulma/layout/section.sass b/bulma/layout/section.sass new file mode 100644 index 00000000..86bbe85f --- /dev/null +++ b/bulma/layout/section.sass @@ -0,0 +1,11 @@ +.section + background: white + padding: 40px 20px + & + .section + border-top: 1px solid rgba($border, 0.5) + +desktop + padding: 40px 0 + &.is-medium + padding: 120px 0 + &.is-large + padding: 240px 0 diff --git a/bulma/utilities/animations.sass b/bulma/utilities/animations.sass new file mode 100644 index 00000000..fd0ea4d1 --- /dev/null +++ b/bulma/utilities/animations.sass @@ -0,0 +1,5 @@ +@keyframes spin-around + from + transform: rotate(0deg) + to + transform: rotate(359deg) diff --git a/bulma/utilities/functions.sass b/bulma/utilities/functions.sass new file mode 100644 index 00000000..8acbb7d5 --- /dev/null +++ b/bulma/utilities/functions.sass @@ -0,0 +1,34 @@ +@function powerNumber($number, $exp) + $value: 1 + @if $exp > 0 + @for $i from 1 through $exp + $value: $value * $number + @else if $exp < 0 + @for $i from 1 through -$exp + $value: $value / $number + @return $value + +@function colorLuminance($color) + $colors: ('red': red($color),'green': green($color),'blue': blue($color)) + @each $name, $value in $colors + $adjusted: 0 + $value: $value / 255 + @if $value < 0.03928 + $value: $value / 12.92 + @else + $value: ($value + .055) / 1.055 + $value: powerNumber($value, 2) + $colors: map-merge($colors, ($name: $value)) + @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722) + +@function closestEvenNumber($number) + @if ($number % 2 == 0px) + @return $number + @else + @return ($number + 1px) + +@function findColorInvert($color) + @if (colorLuminance($color) > 0.8) + @return rgba(black, 0.5) + @else + @return white diff --git a/bulma/utilities/mixins.sass b/bulma/utilities/mixins.sass new file mode 100644 index 00000000..8782b076 --- /dev/null +++ b/bulma/utilities/mixins.sass @@ -0,0 +1,83 @@ +=arrow($color) + border: 1px solid $color + border-right: 0 + border-top: 0 + content: " " + display: block + height: 7px + pointer-events: none + position: absolute + transform: rotate(-45deg) + width: 7px + +=clearfix + &:after + clear: both + content: " " + display: table + +=center($size) + left: 50% + margin-left: -($size / 2) + margin-top: -($size / 2) + position: absolute + top: 50% + +=fa($size, $dimensions) + display: inline-block + font-size: $size + height: $dimensions + line-height: $dimensions + text-align: center + vertical-align: top + width: $dimensions + +=overlay($offset: 0) + bottom: $offset + left: $offset + position: absolute + right: $offset + top: $offset + +=placeholder + $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input' + @each $placeholder in $placeholders + &:#{$placeholder}-placeholder + @content + +=replace($background, $width, $height) + background: $background center center no-repeat + background-size: $width $height + display: block + height: $height + outline: none + overflow: hidden + text-indent: -290486px + width: $width + +$tablet: 769px +$desktop: 980px + +=from($device) + @media screen and (min-width: $device) + @content + +=until($device) + @media screen and (max-width: $device - 1px) + @content + +=mobile + @media screen and (max-width: $tablet - 1px) + @content + +=tablet + @media screen and (min-width: $tablet) + @content + +=touch + @media screen and (max-width: $desktop - 1px) + @content + +=desktop + @media screen and (min-width: $desktop) + @content diff --git a/bulma/utilities/reset.sass b/bulma/utilities/reset.sass new file mode 100644 index 00000000..26bf2864 --- /dev/null +++ b/bulma/utilities/reset.sass @@ -0,0 +1,174 @@ +// +// HTML5 Reset :: style.css +// ---------------------------------------------------------- +// We have learned much from/been inspired by/taken code where offered from: +// +// Eric Meyer :: http://meyerweb.com +// HTML5 Doctor :: http://html5doctor.com +// and the HTML5 Boilerplate :: http://html5boilerplate.com +// +//------------------------------------------------------------------------------- + +// Let's default this puppy out + +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary + margin: 0 + padding: 0 + border: 0 + font-size: 100% + font-weight: normal + vertical-align: baseline + background: transparent + +article, aside, figure, footer, header, nav, section, details, summary + display: block + +// Handle box-sizing while better addressing child elements: +// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +html + box-sizing: border-box + +*, +*:before, +*:after + box-sizing: inherit + +// consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 + +// Responsive images and other embedded objects +img, +object, +embed + max-width: 100% + +// +// Note: keeping IMG here will cause problems if you're using foreground images as sprites. +// In fact, it *will* cause problems with Google Maps' controls at small size. +// If this is the case for you, try uncommenting the following: +// +//#map img { +// max-width: none; +//} + +// force a vertical scrollbar to prevent a jumpy page +html + overflow-y: scroll + +// we use a lot of ULs that aren't bulleted. +// don't forget to restore the bullets within content. +ul + list-style: none + +blockquote, q + quotes: none + +blockquote:before, +blockquote:after, +q:before, +q:after + content: '' + content: none + +a + margin: 0 + padding: 0 + font-size: 100% + vertical-align: baseline + background: transparent + +del + text-decoration: line-through + +abbr[title], dfn[title] + border-bottom: 1px dotted #000 + cursor: help + +// tables still need cellspacing="0" in the markup +table + border-collapse: collapse + border-spacing: 0 + +th + font-weight: bold + vertical-align: bottom + +td + font-weight: normal + vertical-align: top + +hr + display: block + height: 1px + border: 0 + border-top: 1px solid #ccc + margin: 1em 0 + padding: 0 + +input, select + vertical-align: middle + +pre + white-space: pre + // CSS2 + white-space: pre-wrap + // CSS 2.1 + white-space: pre-line + // CSS 3 (and 2.1 as well, actually) + word-wrap: break-word + // IE + +input[type="radio"] + vertical-align: text-bottom + +input[type="checkbox"] + vertical-align: bottom + +select, input, textarea + font: 99% sans-serif + +table + font-size: inherit + font: 100% + +small + font-size: 85% + +strong + font-weight: bold + +td, td img + vertical-align: top + +// Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 +sub, sup + font-size: 75% + line-height: 0 + position: relative + +sup + top: -0.5em + +sub + bottom: -0.25em + +// standardize any monospaced elements +pre, code, kbd, samp + font-family: monospace, sans-serif + +// hand cursor on clickable elements +label, +input[type=button], +input[type=submit], +input[type=file], +button + cursor: pointer + +// Webkit browsers add a 2px margin outside the chrome of form elements +button, input, select, textarea + margin: 0 + +// make buttons play nice in IE +button, +input[type=button] + width: auto + overflow: visible diff --git a/bulma/utilities/utilities.sass b/bulma/utilities/utilities.sass new file mode 100644 index 00000000..189141ef --- /dev/null +++ b/bulma/utilities/utilities.sass @@ -0,0 +1,6 @@ +@charset "utf-8" + +@import reset +@import functions +@import mixins +@import animations diff --git a/css/bulma.css b/css/bulma.css new file mode 100644 index 00000000..2ac19dbb --- /dev/null +++ b/css/bulma.css @@ -0,0 +1,2954 @@ +html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-weight: normal; + vertical-align: baseline; + background: transparent; +} + +article, aside, figure, footer, header, nav, section, details, summary { + display: block; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +img, +object, +embed { + max-width: 100%; +} + +html { + overflow-y: scroll; +} + +ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} + +a { + margin: 0; + padding: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; +} + +del { + text-decoration: line-through; +} + +abbr[title], dfn[title] { + border-bottom: 1px dotted #000; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +th { + font-weight: bold; + vertical-align: bottom; +} + +td { + font-weight: normal; + vertical-align: top; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +input, select { + vertical-align: middle; +} + +pre { + white-space: pre; + white-space: pre-wrap; + white-space: pre-line; + word-wrap: break-word; +} + +input[type="radio"] { + vertical-align: text-bottom; +} + +input[type="checkbox"] { + vertical-align: bottom; +} + +select, input, textarea { + font: 99% sans-serif; +} + +table { + font-size: inherit; + font: 100%; +} + +small { + font-size: 85%; +} + +strong { + font-weight: bold; +} + +td, td img { + vertical-align: top; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +pre, code, kbd, samp { + font-family: monospace, sans-serif; +} + +label, +input[type=button], +input[type=submit], +input[type=file], +button { + cursor: pointer; +} + +button, input, select, textarea { + margin: 0; +} + +button, +input[type=button] { + width: auto; + overflow: visible; +} + +@keyframes spin-around { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} +html { + background: #f5f7fa; + font-size: 14px; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: 300px; + overflow-x: hidden; + overflow-y: scroll; + text-rendering: optimizeLegibility; +} + +body, +button, +input, +select, +textarea { + font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: monospace; + line-height: 1.25; +} + +body { + color: #69707a; + font-size: 1rem; + line-height: 1.42857; +} + +a { + color: #1fc8db; + cursor: pointer; + text-decoration: none; + transition: none 86ms ease-out; +} +a:hover { + color: #222324; +} + +code { + background: #f5f7fa; + color: #42afe3; + font-size: 12px; + font-weight: normal; + padding: 1px 2px 2px; +} + +hr { + border-top-color: #d3d6db; + margin: 20px 0; +} + +img { + max-height: 100%; + max-width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; +} + +small { + font-size: 11px; +} + +strong { + color: #222324; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +pre { + background: #f5f7fa; + color: #69707a; + white-space: pre; + word-wrap: normal; +} +pre code { + background: #f5f7fa; + color: #69707a; + display: block; + overflow-x: auto; + padding: 16px 20px; +} + +table { + width: 100%; +} +table th, +table td { + text-align: left; + vertical-align: top; +} +table th { + color: #222324; +} + +.container { + margin: 0 auto; + max-width: 960px; + position: relative; +} + +.fa { + font-size: 21px; + text-align: center; + vertical-align: top; +} + +.content:not(:last-child) { + margin-bottom: 20px; +} +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + color: #222324; + font-weight: 300; + line-height: 1.125; + margin-bottom: 20px; +} +.content h1:not(:first-child), +.content h2:not(:first-child), +.content h3:not(:first-child) { + margin-top: 40px; +} +.content h1 { + font-size: 2em; +} +.content h2 { + font-size: 1.75em; +} +.content h3 { + font-size: 1.5em; +} +.content h4 { + font-size: 1.25em; +} +.content h5 { + font-size: 1.125em; +} +.content h6 { + font-size: 1em; +} +.content p:not(:last-child) { + margin-bottom: 1em; +} +.content li + li { + margin-top: .25em; +} +.content ol { + list-style: decimal outside; + margin: 1em 2em; +} +.content ul { + list-style: disc outside; + margin: 1em 2em; +} +.content ul ul { + list-style-type: circle; + margin-top: .5em; +} +.content ul ul ul { + list-style-type: square; +} +.content blockquote { + background: #f5f7fa; + border-left: 5px solid #d3d6db; + padding: 1.5em; +} +.content blockquote:not(:last-child) { + margin-bottom: 1em; +} + +.highlight { + background-color: #fdf6e3; + color: #586e75; +} +.highlight .c { + color: #93a1a1; +} +.highlight .err, +.highlight .g { + color: #586e75; +} +.highlight .k { + color: #859900; +} +.highlight .l, +.highlight .n { + color: #586e75; +} +.highlight .o { + color: #859900; +} +.highlight .x { + color: #cb4b16; +} +.highlight .p { + color: #586e75; +} +.highlight .cm { + color: #93a1a1; +} +.highlight .cp { + color: #859900; +} +.highlight .c1 { + color: #93a1a1; +} +.highlight .cs { + color: #859900; +} +.highlight .gd { + color: #2aa198; +} +.highlight .ge { + color: #586e75; + font-style: italic; +} +.highlight .gr { + color: #dc322f; +} +.highlight .gh { + color: #cb4b16; +} +.highlight .gi { + color: #859900; +} +.highlight .go, +.highlight .gp { + color: #586e75; +} +.highlight .gs { + color: #586e75; + font-weight: bold; +} +.highlight .gu { + color: #cb4b16; +} +.highlight .gt { + color: #586e75; +} +.highlight .kc { + color: #cb4b16; +} +.highlight .kd { + color: #268bd2; +} +.highlight .kn, +.highlight .kp { + color: #859900; +} +.highlight .kr { + color: #268bd2; +} +.highlight .kt { + color: #dc322f; +} +.highlight .ld { + color: #586e75; +} +.highlight .m, +.highlight .s { + color: #2aa198; +} +.highlight .na { + color: #B58900; +} +.highlight .nb { + color: #586e75; +} +.highlight .nc { + color: #268bd2; +} +.highlight .no { + color: #cb4b16; +} +.highlight .nd { + color: #268bd2; +} +.highlight .ni, +.highlight .ne { + color: #cb4b16; +} +.highlight .nf { + color: #268bd2; +} +.highlight .nl, +.highlight .nn, +.highlight .nx, +.highlight .py { + color: #586e75; +} +.highlight .nt, +.highlight .nv { + color: #268bd2; +} +.highlight .ow { + color: #859900; +} +.highlight .w { + color: #586e75; +} +.highlight .mf, +.highlight .mh, +.highlight .mi, +.highlight .mo { + color: #2aa198; +} +.highlight .sb { + color: #93a1a1; +} +.highlight .sc { + color: #2aa198; +} +.highlight .sd { + color: #586e75; +} +.highlight .s2 { + color: #2aa198; +} +.highlight .se { + color: #cb4b16; +} +.highlight .sh { + color: #586e75; +} +.highlight .si, +.highlight .sx { + color: #2aa198; +} +.highlight .sr { + color: #dc322f; +} +.highlight .s1, +.highlight .ss { + color: #2aa198; +} +.highlight .bp, +.highlight .vc, +.highlight .vg, +.highlight .vi { + color: #268bd2; +} +.highlight .il { + color: #2aa198; +} + +.is-centered { + text-align: center; +} + +.is-left { + text-align: left; +} + +.is-right { + text-align: right; +} + +.is-block { + display: block; +} + +.is-disabled { + pointer-events: none; +} + +.is-inline { + display: inline; +} + +.is-marginless { + margin: 0 !important; +} + +.is-unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.input, .textarea { + -moz-appearance: none; + -webkit-appearance: none; + background: white; + border: 1px solid #d3d6db; + border-radius: 3px; + color: #222324; + display: inline-block; + font-size: 14px; + height: 32px; + line-height: 24px; + padding: 3px 8px; + position: relative; + vertical-align: top; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + display: block; + max-width: 100%; + width: 100%; +} +.input:hover, .textarea:hover { + border-color: #aeb1b5; +} +.input:active, .textarea:active, .input:focus, .textarea:focus { + border-color: #1fc8db; + outline: none; +} +.input[disabled], [disabled].textarea, .input[disabled]:hover, [disabled].textarea:hover { + background: #f5f7fa; + border-color: #d3d6db; +} +.input[disabled]::-moz-placeholder, [disabled].textarea::-moz-placeholder, .input[disabled]:hover::-moz-placeholder, [disabled].textarea:hover::-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.input[disabled]::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, .input[disabled]:hover::-webkit-input-placeholder, [disabled].textarea:hover::-webkit-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.input[disabled]:-moz-placeholder, [disabled].textarea:-moz-placeholder, .input[disabled]:hover:-moz-placeholder, [disabled].textarea:hover:-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.input[disabled]:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, .input[disabled]:hover:-ms-input-placeholder, [disabled].textarea:hover:-ms-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.input[type="search"], [type="search"].textarea { + border-radius: 290486px; +} +.input.is-small, .is-small.textarea { + border-radius: 2px; + font-size: 11px; + height: 24px; + line-height: 16px; + padding: 3px 6px; +} +.input.is-medium, .is-medium.textarea { + font-size: 18px; + height: 40px; + line-height: 32px; + padding: 3px 10px; +} +.input.is-large, .is-large.textarea { + font-size: 24px; + height: 48px; + line-height: 40px; + padding: 3px 12px; +} +.input.is-fullwidth, .is-fullwidth.textarea { + display: block; + width: 100%; +} +.input.is-inline, .is-inline.textarea { + display: inline; + width: auto; +} + +.textarea { + line-height: 1.2; + max-height: 600px; + max-width: 100%; + min-height: 120px; + min-width: 100%; + padding: 10px; + resize: vertical; +} + +.checkbox, .radio { + cursor: pointer; + display: inline-block; + line-height: 16px; + padding-left: 18px; + position: relative; + vertical-align: top; +} +.checkbox input, .radio input { + -moz-appearance: none; + -webkit-appearance: none; + background: white; + border: 1px solid #d3d6db; + border-radius: 3px; + color: #222324; + display: inline-block; + font-size: 14px; + height: 32px; + line-height: 24px; + padding: 3px 8px; + position: relative; + vertical-align: top; + border-radius: 1px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); + cursor: pointer; + float: left; + height: 14px; + left: 0; + outline: none; + padding: 0; + position: absolute; + top: 1px; + width: 14px; +} +.checkbox input:hover, .radio input:hover { + border-color: #aeb1b5; +} +.checkbox input:active, .radio input:active, .checkbox input:focus, .radio input:focus { + border-color: #1fc8db; + outline: none; +} +.checkbox input[disabled], .radio input[disabled], .checkbox input[disabled]:hover, .radio input[disabled]:hover { + background: #f5f7fa; + border-color: #d3d6db; +} +.checkbox input[disabled]::-moz-placeholder, .radio input[disabled]::-moz-placeholder, .checkbox input[disabled]:hover::-moz-placeholder, .radio input[disabled]:hover::-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.checkbox input[disabled]::-webkit-input-placeholder, .radio input[disabled]::-webkit-input-placeholder, .checkbox input[disabled]:hover::-webkit-input-placeholder, .radio input[disabled]:hover::-webkit-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.checkbox input[disabled]:-moz-placeholder, .radio input[disabled]:-moz-placeholder, .checkbox input[disabled]:hover:-moz-placeholder, .radio input[disabled]:hover:-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.checkbox input[disabled]:-ms-input-placeholder, .radio input[disabled]:-ms-input-placeholder, .checkbox input[disabled]:hover:-ms-input-placeholder, .radio input[disabled]:hover:-ms-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.checkbox input:after, .radio input:after { + border: 1px solid white; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 7px; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + width: 7px; + height: 4px; + left: 3px; + opacity: 0; + position: absolute; + top: 3px; + transform: rotate(-45deg) scale(1); +} +.checkbox input:checked, .radio input:checked { + background: #1fc8db; + border-color: #1fc8db; + box-shadow: none; +} +.checkbox input:checked:after, .radio input:checked:after { + opacity: 1; +} +.checkbox:hover, .radio:hover { + color: #222324; +} +.checkbox:hover input, .radio:hover input { + border-color: #aeb1b5; +} +.checkbox:hover input:checked, .radio:hover input:checked { + border-color: #1fc8db; +} +.is-disabled.checkbox, .is-disabled.radio, .is-disabled.checkbox:hover, .is-disabled.radio:hover { + color: #aeb1b5; +} + +.radio + .radio { + margin-left: 10px; +} +.radio input { + border-radius: 8px; +} +.radio input:after { + background: white; + border: 0; + border-radius: 2px; + left: 4px; + top: 4px; + transform: none; + width: 4px; +} + +.select { + display: inline-block; + height: 32px; + position: relative; + vertical-align: top; +} +.select select { + -moz-appearance: none; + -webkit-appearance: none; + background: white; + border: 1px solid #d3d6db; + border-radius: 3px; + color: #222324; + display: inline-block; + font-size: 14px; + height: 32px; + line-height: 24px; + padding: 3px 8px; + position: relative; + vertical-align: top; + cursor: pointer; + display: block; + outline: none; + padding-right: 36px; +} +.select select:hover { + border-color: #aeb1b5; +} +.select select:active, .select select:focus { + border-color: #1fc8db; + outline: none; +} +.select select[disabled], .select select[disabled]:hover { + background: #f5f7fa; + border-color: #d3d6db; +} +.select select[disabled]::-moz-placeholder, .select select[disabled]:hover::-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.select select[disabled]::-webkit-input-placeholder, .select select[disabled]:hover::-webkit-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.select select[disabled]:-moz-placeholder, .select select[disabled]:hover:-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.select select[disabled]:-ms-input-placeholder, .select select[disabled]:hover:-ms-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.select select:hover { + border-color: #aeb1b5; +} +.select:after { + border: 1px solid #1fc8db; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 7px; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + width: 7px; + margin-top: -6px; + right: 16px; + top: 50%; +} +.select:hover:after { + border-color: #222324; +} + +.control { + position: relative; +} +.control.is-loading:after { + position: absolute !important; + right: 8px; + top: 8px; +} +.control:not(:last-child) { + margin-bottom: 10px; +} +.control.is-withicon .fa { + display: inline-block; + font-size: 14px; + height: 20px; + line-height: 20px; + text-align: center; + vertical-align: top; + width: 20px; + color: #aeb1b5; + left: 6px; + pointer-events: none; + position: absolute; + top: 6px; + z-index: 1; +} +.control.is-withicon .input, .control.is-withicon .textarea { + padding-left: 32px; +} +.control.is-withicon .input:focus + .fa, .control.is-withicon .textarea:focus + .fa { + color: #1fc8db; +} +.control.is-horizontal { + display: flex; +} +.control.is-horizontal > .button:not(:last-child), .control.is-horizontal > .input:not(:last-child), .control.is-horizontal > .textarea:not(:last-child), .control.is-horizontal > .select:not(:last-child) { + margin-right: 10px; +} +.control.is-horizontal > .input, .control.is-horizontal > .textarea { + flex: 1; +} +.control.is-grouped { + display: flex; +} +.control.is-grouped .input, .control.is-grouped .textarea, +.control.is-grouped .button, +.control.is-grouped .select { + border-radius: 0; + margin-right: -1px; +} +.control.is-grouped .input:hover, .control.is-grouped .textarea:hover, +.control.is-grouped .button:hover, +.control.is-grouped .select:hover { + z-index: 2; +} +.control.is-grouped .input:active, .control.is-grouped .textarea:active, .control.is-grouped .input:focus, .control.is-grouped .textarea:focus, +.control.is-grouped .button:active, +.control.is-grouped .button:focus, +.control.is-grouped .select:active, +.control.is-grouped .select:focus { + z-index: 3; +} +.control.is-grouped .input:first-child, .control.is-grouped .textarea:first-child, +.control.is-grouped .button:first-child, +.control.is-grouped .select:first-child { + border-radius: 3px 0 0 3px; +} +.control.is-grouped .input:first-child select, .control.is-grouped .textarea:first-child select, +.control.is-grouped .button:first-child select, +.control.is-grouped .select:first-child select { + border-radius: 3px 0 0 3px; +} +.control.is-grouped .input:last-child, .control.is-grouped .textarea:last-child, +.control.is-grouped .button:last-child, +.control.is-grouped .select:last-child { + border-radius: 0 3px 3px 0; +} +.control.is-grouped.is-centered { + justify-content: center; +} + +.button { + -moz-appearance: none; + -webkit-appearance: none; + background: white; + border: 1px solid #d3d6db; + border-radius: 3px; + color: #222324; + display: inline-block; + font-size: 14px; + height: 32px; + line-height: 24px; + padding: 3px 8px; + position: relative; + vertical-align: top; + padding: 3px 10px; +} +.button:hover { + border-color: #aeb1b5; +} +.button:active, .button:focus { + border-color: #1fc8db; + outline: none; +} +.button[disabled], .button[disabled]:hover { + background: #f5f7fa; + border-color: #d3d6db; +} +.button[disabled]::-moz-placeholder, .button[disabled]:hover::-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.button[disabled]::-webkit-input-placeholder, .button[disabled]:hover::-webkit-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.button[disabled]:-moz-placeholder, .button[disabled]:hover:-moz-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.button[disabled]:-ms-input-placeholder, .button[disabled]:hover:-ms-input-placeholder { + color: rgba(34, 35, 36, 0.3); +} +.button strong { + color: inherit; +} +.button small { + display: block; + font-size: 11px; + line-height: 1; + margin-top: 5px; +} +.button .fa { + line-height: 24px; + margin: 0 -2px; + width: 24px; +} +.button:hover { + color: #222324; +} +.button:active { + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); +} +.button.is-primary { + background: #1fc8db; + border-color: transparent; + color: white; +} +.button.is-primary:hover, .button.is-primary:focus { + background: #199fae; + border-color: transparent; + color: white; +} +.button.is-primary:active { + border-color: transparent; +} +.button.is-primary.is-outlined { + background: transparent; + border-color: #1fc8db; + color: #1fc8db; +} +.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { + border-color: #199fae; + color: #199fae; +} +.button.is-primary.is-inverted { + background: white; + color: #1fc8db; +} +.button.is-primary.is-inverted:hover { + background: #f2f2f2; +} +.button.is-primary.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} +.button.is-primary.is-inverted.is-outlined:hover { + background: rgba(0, 0, 0, 0.05); +} +.button.is-primary.is-loading:after { + border-color: transparent transparent white white !important; +} +.button.is-info { + background: #42afe3; + border-color: transparent; + color: white; +} +.button.is-info:hover, .button.is-info:focus { + background: #1f99d3; + border-color: transparent; + color: white; +} +.button.is-info:active { + border-color: transparent; +} +.button.is-info.is-outlined { + background: transparent; + border-color: #42afe3; + color: #42afe3; +} +.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { + border-color: #1f99d3; + color: #1f99d3; +} +.button.is-info.is-inverted { + background: white; + color: #42afe3; +} +.button.is-info.is-inverted:hover { + background: #f2f2f2; +} +.button.is-info.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} +.button.is-info.is-inverted.is-outlined:hover { + background: rgba(0, 0, 0, 0.05); +} +.button.is-info.is-loading:after { + border-color: transparent transparent white white !important; +} +.button.is-success { + background: #97cd76; + border-color: transparent; + color: white; +} +.button.is-success:hover, .button.is-success:focus { + background: #7bbf51; + border-color: transparent; + color: white; +} +.button.is-success:active { + border-color: transparent; +} +.button.is-success.is-outlined { + background: transparent; + border-color: #97cd76; + color: #97cd76; +} +.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { + border-color: #7bbf51; + color: #7bbf51; +} +.button.is-success.is-inverted { + background: white; + color: #97cd76; +} +.button.is-success.is-inverted:hover { + background: #f2f2f2; +} +.button.is-success.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} +.button.is-success.is-inverted.is-outlined:hover { + background: rgba(0, 0, 0, 0.05); +} +.button.is-success.is-loading:after { + border-color: transparent transparent white white !important; +} +.button.is-warning { + background: #fce473; + border-color: transparent; + color: rgba(0, 0, 0, 0.5); +} +.button.is-warning:hover, .button.is-warning:focus { + background: #fbda41; + border-color: transparent; + color: rgba(0, 0, 0, 0.5); +} +.button.is-warning:active { + border-color: transparent; +} +.button.is-warning.is-outlined { + background: transparent; + border-color: #fce473; + color: #fce473; +} +.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { + border-color: #fbda41; + color: #fbda41; +} +.button.is-warning.is-inverted { + background: rgba(0, 0, 0, 0.5); + color: #fce473; +} +.button.is-warning.is-inverted:hover { + background: rgba(0, 0, 0, 0.5); +} +.button.is-warning.is-inverted.is-outlined { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.5); + color: rgba(0, 0, 0, 0.5); +} +.button.is-warning.is-inverted.is-outlined:hover { + background: rgba(0, 0, 0, 0.05); +} +.button.is-warning.is-loading:after { + border-color: transparent transparent rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.5) !important; +} +.button.is-danger { + background: #ed6c63; + border-color: transparent; + color: white; +} +.button.is-danger:hover, .button.is-danger:focus { + background: #e84135; + border-color: transparent; + color: white; +} +.button.is-danger:active { + border-color: transparent; +} +.button.is-danger.is-outlined { + background: transparent; + border-color: #ed6c63; + color: #ed6c63; +} +.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { + border-color: #e84135; + color: #e84135; +} +.button.is-danger.is-inverted { + background: white; + color: #ed6c63; +} +.button.is-danger.is-inverted:hover { + background: #f2f2f2; +} +.button.is-danger.is-inverted.is-outlined { + background-color: transparent; + border-color: white; + color: white; +} +.button.is-danger.is-inverted.is-outlined:hover { + background: rgba(0, 0, 0, 0.05); +} +.button.is-danger.is-loading:after { + border-color: transparent transparent white white !important; +} +.button.is-small { + border-radius: 2px; + font-size: 11px; + height: 24px; + line-height: 16px; + padding: 3px 6px; +} +.button.is-medium { + font-size: 18px; + height: 40px; + padding: 7px 14px; +} +.button.is-large { + font-size: 22px; + height: 48px; + padding: 11px 20px; +} +.button.is-flexible { + height: auto; +} +.button.is-loading { + color: transparent; + pointer-events: none; +} +.button.is-loading:after { + left: 50%; + margin-left: -8px; + margin-top: -8px; + position: absolute; + top: 50%; + position: absolute !important; +} +.button.is-disabled, .button[disabled] { + opacity: .5; + pointer-events: none; +} +@media screen and (min-width: 769px) { + .button small { + color: #69707a; + left: 0; + margin-top: 10px; + position: absolute; + top: 100%; + width: 100%; + } +} + +.title, +.subtitle { + font-weight: 300; +} +.title:not(:last-child), +.subtitle:not(:last-child) { + margin-bottom: 20px; +} + +.title { + color: #222324; + font-size: 28px; + line-height: 1; +} +.title strong { + color: inherit; +} +.title code { + display: inline-block; + font-size: 28px; +} +.title + .subtitle { + margin-top: -10px; +} +.title + .highlight { + margin-top: -10px; +} +.title.is-normal { + font-weight: 400; +} +.title.is-normal strong { + font-weight: 700; +} +.title.is-1 { + font-size: 48px; +} +.title.is-1 code { + font-size: 40px; +} +.title.is-2 { + font-size: 40px; +} +.title.is-2 code { + font-size: 28px; +} +.title.is-3 { + font-size: 28px; +} +.title.is-3 code { + font-size: 24px; +} +.title.is-4 { + font-size: 24px; +} +.title.is-4 code { + font-size: 18px; +} +.title.is-5 { + font-size: 18px; +} +.title.is-5 code { + font-size: 14px; +} +.title.is-6 { + font-size: 14px; +} +.title.is-6 code { + font-size: 14px; +} +@media screen and (min-width: 769px) { + .title + .subtitle { + margin-top: -15px; + } +} + +.subtitle { + font-size: 18px; + line-height: 1.125; +} +.subtitle strong { + color: #222324; + font-weight: 400; +} +.subtitle code { + border-radius: 3px; + display: inline-block; + font-size: 14px; + padding: 2px 3px; + vertical-align: top; +} +.subtitle + .text { + margin-top: 20px; +} +.subtitle.is-normal { + font-weight: 400; +} +.subtitle.is-normal strong { + font-weight: 700; +} +.subtitle.is-1 { + font-size: 48px; +} +.subtitle.is-1 code { + font-size: 40px; +} +.subtitle.is-2 { + font-size: 40px; +} +.subtitle.is-2 code { + font-size: 28px; +} +.subtitle.is-3 { + font-size: 28px; +} +.subtitle.is-3 code { + font-size: 24px; +} +.subtitle.is-4 { + font-size: 24px; +} +.subtitle.is-4 code { + font-size: 18px; +} +.subtitle.is-5 { + font-size: 18px; +} +.subtitle.is-5 code { + font-size: 14px; +} +.subtitle.is-6 { + font-size: 14px; +} +.subtitle.is-6 code { + font-size: 14px; +} + +.message-body { + border: 1px solid #d3d6db; + border-radius: 3px; + padding: 12px 15px; +} +.message-body strong { + color: inherit; +} + +.message-header { + background: #69707a; + border-radius: 3px 3px 0 0; + color: white; + font-size: 10px; + font-weight: bold; + letter-spacing: 1px; + padding: 3px 8px; + text-transform: uppercase; +} +.message-header + .message-body { + border-radius: 0 0 3px 3px; + border-top: none; +} + +.message { + background: #f5f7fa; + border-radius: 3px; +} +.message:not(:last-child) { + margin-bottom: 20px; +} +.message.is-primary { + background: #edfbfc; +} +.message.is-primary .message-header { + background: #1fc8db; + color: white; +} +.message.is-primary .message-body { + border-color: #1fc8db; + color: #46adb9; +} +.message.is-info { + background: #edf7fc; +} +.message.is-info .message-header { + background: #42afe3; + color: white; +} +.message.is-info .message-body { + border-color: #42afe3; + color: #4793b8; +} +.message.is-success { + background: #f4faf0; +} +.message.is-success .message-header { + background: #97cd76; + color: white; +} +.message.is-success .message-body { + border-color: #97cd76; + color: #7a956a; +} +.message.is-warning { + background: #fffbeb; +} +.message.is-warning .message-header { + background: #fce473; + color: rgba(0, 0, 0, 0.5); +} +.message.is-warning .message-body { + border-color: #fce473; + color: #9f8b2d; +} +.message.is-danger { + background: #fdeeed; +} +.message.is-danger .message-header { + background: #ed6c63; + color: white; +} +.message.is-danger .message-body { + border-color: #ed6c63; + color: #be4941; +} + +.notification { + background: #f5f7fa; + border-radius: 3px; + padding: 16px 20px; + position: relative; +} +.notification:after { + clear: both; + content: " "; + display: table; +} +.notification:not(:last-child) { + margin-bottom: 20px; +} +.notification .title { + color: inherit; +} +.notification.is-primary { + background: #1fc8db; + color: white; +} +.notification.is-info { + background: #42afe3; + color: white; +} +.notification.is-success { + background: #97cd76; + color: white; +} +.notification.is-warning { + background: #fce473; + color: rgba(0, 0, 0, 0.5); +} +.notification.is-danger { + background: #ed6c63; + color: white; +} +.notification .delete { + border-radius: 0 3px; + float: right; + margin: -16px -20px 0 20px; +} + +.highlight { + font-size: 12px; + font-weight: normal; + max-width: 100%; + overflow: hidden; + padding: 0; +} +.highlight:not(:last-child) { + margin-bottom: 20px; +} +.highlight pre { + overflow: auto; + max-width: 100%; +} + +.delete { + background: rgba(0, 0, 0, 0.2); + border-radius: 290486px; + cursor: pointer; + display: inline-block; + height: 24px; + position: relative; + vertical-align: top; + width: 24px; +} +.delete:before, .delete:after { + background: white; + content: ""; + display: block; + height: 2px; + left: 6px; + position: absolute; + top: 11px; + width: 12px; +} +.delete:before { + transform: rotate(45deg); +} +.delete:after { + transform: rotate(-45deg); +} +.delete:hover { + background: rgba(0, 0, 0, 0.5); +} +.delete.is-small, .tag:not(.is-large) .delete { + height: 16px; + width: 16px; +} +.delete.is-small:before, .tag:not(.is-large) .delete:before, .delete.is-small:after, .tag:not(.is-large) .delete:after { + left: 4px; + top: 7px; + width: 8px; +} + +.icon { + display: inline-block; + font-size: 21px; + height: 24px; + line-height: 24px; + text-align: center; + vertical-align: top; + width: 24px; +} +.icon .fa { + font-size: inherit; + line-height: inherit; +} +.icon.is-small { + display: inline-block; + font-size: 14px; + height: 20px; + line-height: 20px; + text-align: center; + vertical-align: top; + width: 20px; +} +.icon.is-medium { + display: inline-block; + font-size: 28px; + height: 32px; + line-height: 32px; + text-align: center; + vertical-align: top; + width: 32px; +} +.icon.is-large { + display: inline-block; + font-size: 42px; + height: 48px; + line-height: 48px; + text-align: center; + vertical-align: top; + width: 48px; +} + +.hamburger, .header-toggle { + cursor: pointer; + display: block; + height: 50px; + padding: 19px 17px; + position: relative; + width: 50px; +} +.hamburger span, .header-toggle span { + background: #69707a; + display: block; + height: 1px; + left: 17px; + position: absolute; + transition: none 86ms ease-out; + transition-property: background, left, opacity, transform; + width: 15px; +} +.hamburger span:nth-child(1), .header-toggle span:nth-child(1) { + top: 19px; +} +.hamburger span:nth-child(2), .header-toggle span:nth-child(2) { + top: 24px; +} +.hamburger span:nth-child(3), .header-toggle span:nth-child(3) { + bottom: 20px; +} +.hamburger:hover, .header-toggle:hover { + background: #f5f7fa; +} +.hamburger.is-active span, .is-active.header-toggle span { + background: #1fc8db; +} +.hamburger.is-active span:nth-child(1), .is-active.header-toggle span:nth-child(1) { + left: 20px; + transform: rotate(45deg); + transform-origin: left top; +} +.hamburger.is-active span:nth-child(2), .is-active.header-toggle span:nth-child(2) { + opacity: 0; +} +.hamburger.is-active span:nth-child(3), .is-active.header-toggle span:nth-child(3) { + left: 20px; + transform: rotate(-45deg); + transform-origin: left bottom; +} + +.heading { + display: block; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.loader, .control.is-loading:after, .button.is-loading:after { + animation: spin-around 500ms infinite linear; + border: 2px solid #d3d6db; + border-radius: 290486px; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 16px; + position: relative; + width: 16px; +} + +.number { + background: #f5f7fa; + border-radius: 290486px; + display: inline-block; + font-size: 18px; + vertical-align: top; +} + +.tag { + background: #f5f7fa; + border-radius: 3px; + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + color: #69707a; + display: inline-block; + font-size: 12px; + height: 24px; + line-height: 16px; + padding: 4px 10px; + vertical-align: top; + white-space: nowrap; +} +.tag.is-dark { + background: #69707a; + color: white; +} +.tag.is-rounded { + border-radius: 290486px; +} +.tag.is-medium { + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); + font-size: 14px; + height: 32px; + padding: 7px 14px 9px; +} +.tag:not(.is-large) .delete { + margin-left: 4px; + margin-right: -6px; +} +.tag.is-large { + box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.1); + font-size: 18px; + height: 40px; + line-height: 24px; + padding: 7px 18px 9px; +} +.tag.is-large .delete { + margin-left: 4px; + margin-right: -8px; +} +.tag.is-primary { + background: #1fc8db; + color: white; +} +.tag.is-info { + background: #42afe3; + color: white; +} +.tag.is-success { + background: #97cd76; + color: white; +} +.tag.is-warning { + background: #fce473; + color: rgba(0, 0, 0, 0.5); +} +.tag.is-danger { + background: #ed6c63; + color: white; +} + +@media screen and (max-width: 768px) { + .column + .column { + margin-top: 20px; + } +} +@media screen and (min-width: 769px) { + .column { + flex: 1; + } + .column + .column { + margin-left: 20px; + } + .column.is-double { + flex: 2; + } + .column.is-triple { + flex: 3; + } + .column.is-quadruple { + flex: 4; + } + .column.is-half { + flex: none; + width: 50%; + } + .column.is-third { + flex: none; + width: 33.3333%; + } + .column.is-quarter { + flex: none; + width: 25%; + } + .column.is-1 { + flex: none; + width: 8.33333%; + } + .column.is-2 { + flex: none; + width: 16.66667%; + } + .column.is-3 { + flex: none; + width: 25%; + } + .column.is-4 { + flex: none; + width: 33.33333%; + } + .column.is-5 { + flex: none; + width: 41.66667%; + } + .column.is-6 { + flex: none; + width: 50%; + } + .column.is-7 { + flex: none; + width: 58.33333%; + } + .column.is-8 { + flex: none; + width: 66.66667%; + } + .column.is-9 { + flex: none; + width: 75%; + } + .column.is-10 { + flex: none; + width: 83.33333%; + } + .column.is-11 { + flex: none; + width: 91.66667%; + } +} + +.columns:not(:last-child) { + margin-bottom: 20px; +} +@media screen and (min-width: 769px) { + .columns { + display: flex; + } +} +.columns.is-gapless > .column + .column { + margin-left: 0; +} +.columns.is-vcentered { + align-items: center; +} +@media screen and (min-width: 769px) { + .columns.is-grid { + flex-wrap: wrap; + } + .columns.is-grid > .column { + flex-basis: 33.3333%; + max-width: 33.3333%; + padding: 10px; + width: 33.3333%; + } + .columns.is-grid > .column + .column { + margin-left: 0; + } +} + +.navbar-item .title, +.navbar-item .subtitle { + margin-bottom: 0; +} +@media screen and (max-width: 768px) { + .navbar-item:not(:last-child) { + margin-bottom: 10px; + } +} + +.navbar:not(:last-child) { + margin-bottom: 20px; +} +.navbar code { + border-radius: 3px; +} +.navbar img { + display: inline-block; + vertical-align: top; +} +@media screen and (min-width: 769px) { + .navbar { + align-items: center; + display: flex; + justify-content: space-between; + } + .navbar > .navbar-item:not(.is-narrow) { + flex: 1; + } +} + +.navbar-left .navbar-item.is-flexible, +.navbar-right .navbar-item.is-flexible { + flex: 1; +} +.navbar-left .navbar-item:not(:last-child), +.navbar-right .navbar-item:not(:last-child) { + margin-right: 10px; +} + +@media screen and (max-width: 768px) { + .navbar-left + .navbar-right { + margin-top: 20px; + } +} +@media screen and (min-width: 769px) { + .navbar-left { + align-items: center; + display: flex; + } +} + +@media screen and (min-width: 769px) { + .navbar-right { + align-items: center; + display: flex; + justify-content: flex-end; + } +} + +.card { + background: white; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1); + max-width: 300px; + position: relative; +} +.card .media:not(:last-child) { + margin-bottom: 10px; +} + +.card-image { + display: block; + position: relative; +} +.card-image img { + display: block; +} +.card-image.is-square img, .card-image.is-4x3 img, .card-image.is-3x2 img { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.card-image.is-square { + padding-top: 100%; +} +.card-image.is-4x3 { + padding-top: 75%; +} +.card-image.is-3x2 { + padding-top: 66.6666%; +} + +.card-content { + padding: 20px; +} +.card-content .title + .subtitle { + margin-top: -20px; +} + +.card-footer { + background: #f5f7fa; + display: block; + padding: 10px; +} + +.table { + background: white; + margin-bottom: 20px; + width: 100%; +} +.table th, +.table td { + border: 1px solid #d3d6db; + border-width: 0 0 1px; + padding: 8px 10px; + vertical-align: top; +} +.table th.table-link, +.table td.table-link { + padding: 0; +} +.table th.table-link > a, +.table td.table-link > a { + display: block; + padding: 8px 10px; +} +.table th.table-link > a:hover, +.table td.table-link > a:hover { + background: #1fc8db; + color: white; +} +.table th.table-icon, +.table td.table-icon { + padding: 5px; + text-align: center; + white-space: nowrap; + width: 1%; +} +.table th.table-icon .fa, +.table td.table-icon .fa { + display: inline-block; + font-size: 21px; + height: 24px; + line-height: 24px; + text-align: center; + vertical-align: top; + width: 24px; +} +.table th.table-icon.table-link, +.table td.table-icon.table-link { + padding: 0; +} +.table th.table-icon.table-link > a, +.table td.table-icon.table-link > a { + padding: 5px; +} +.table th { + color: #222324; + text-align: left; +} +.table tr:hover { + background: rgba(245, 247, 250, 0.5); + color: #222324; +} +.table tr:last-child td { + border-bottom-width: 0; +} +.table thead th, +.table thead td { + border-width: 0 0 2px; +} +.table tfoot th, +.table tfoot td { + border-width: 2px 0 0; +} +.table.is-bordered th, +.table.is-bordered td { + border-width: 1px; +} +.table.is-bordered tr:last-child td { + border-bottom-width: 1px; +} +.table.is-narrow th, +.table.is-narrow td { + padding: 5px 10px; +} +.table.is-narrow th.table-link, +.table.is-narrow td.table-link { + padding: 0; +} +.table.is-narrow th.table-link > a, +.table.is-narrow td.table-link > a { + padding: 5px 10px; +} +.table.is-narrow th.table-icon, +.table.is-narrow td.table-icon { + padding: 2px; +} +.table.is-narrow th.table-icon.table-link, +.table.is-narrow td.table-icon.table-link { + padding: 0; +} +.table.is-narrow th.table-icon.table-link > a, +.table.is-narrow td.table-icon.table-link > a { + padding: 2px; +} +.table.is-striped tbody tr:nth-child(2n) { + background: rgba(245, 247, 250, 0.5); +} +.table.is-striped tbody tr:nth-child(2n):hover { + background: #f5f7fa; +} + +.tabs { + line-height: 24px; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; +} +.tabs:not(:last-child) { + margin-bottom: 20px; +} +.tabs .fa { + line-height: 24px; + margin: 0 -2px; + width: 24px; +} +.tabs a { + border-bottom: 1px solid #d3d6db; + color: #69707a; + display: block; + margin-bottom: -1px; + padding: 5px 0; + vertical-align: top; +} +.tabs a:hover { + border-bottom-color: #222324; + color: #222324; +} +.tabs li { + display: inline-block; + vertical-align: top; +} +.tabs li + li { + margin-left: 20px; +} +.tabs li.is-active a { + border-bottom-color: #1fc8db; + color: #1fc8db; +} +.tabs ul { + border-bottom: 1px solid #d3d6db; +} +.tabs.is-boxed a { + border: 1px solid transparent; + border-radius: 3px 3px 0 0; + padding: 5px 15px; +} +.tabs.is-boxed a:hover { + background: #f5f7fa; + border-bottom-color: #d3d6db; +} +.tabs.is-boxed li + li { + margin-left: 5px; +} +.tabs.is-boxed li.is-active a { + background: white; + border-color: #d3d6db; + border-bottom-color: transparent; +} +.tabs.is-toggle ul { + border-bottom: none; + display: flex; +} +.tabs.is-toggle a { + border: 1px solid #d3d6db; + margin-bottom: 0; + padding: 5px 10px; + position: relative; +} +.tabs.is-toggle a:hover { + background: #f5f7fa; + border-color: #aeb1b5; + z-index: 2; +} +.tabs.is-toggle li + li { + margin-left: -1px; +} +.tabs.is-toggle li:first-child a { + border-radius: 3px 0 0 3px; +} +.tabs.is-toggle li:last-child a { + border-radius: 0 3px 3px 0; +} +.tabs.is-toggle li.is-active a { + background: #1fc8db; + border-color: #1fc8db; + color: white; + z-index: 1; +} +@media screen and (min-width: 769px) { + .tabs.is-fullwidth ul { + display: flex; + justify-content: center; + text-align: center; + } + .tabs.is-fullwidth li { + flex: 1; + } + .tabs.is-fullwidth li + li { + margin-left: 0; + } +} + +.media-image.is-32 { + width: 32px; +} +.media-image.is-40 { + width: 40px; +} +@media screen and (max-width: 768px) { + .media-image { + margin-bottom: 10px; + } +} +@media screen and (min-width: 769px) { + .media-image { + margin-right: 10px; + width: 60px; + } +} + +.media-number { + background: #f5f7fa; + border-radius: 290486px; + display: inline-block; + font-size: 18px; + height: 32px; + line-height: 24px; + min-width: 32px; + padding: 4px 8px; + text-align: center; + vertical-align: top; +} +@media screen and (max-width: 768px) { + .media-number { + margin-bottom: 10px; + } +} +@media screen and (min-width: 769px) { + .media-number { + margin-right: 10px; + } +} + +.media-content { + flex: 1; +} +.media-content .textarea { + min-height: 60px; +} + +.media { + align-items: flex-start; +} +.media .content:not(:last-child) { + margin-bottom: 10px; +} +.media .media { + border-top: 1px solid rgba(211, 214, 219, 0.5); + display: flex; + padding-top: 10px; +} +.media .media .media-image { + margin-bottom: 0; + margin-right: 10px; + width: 40px; +} +.media .media .textarea { + border-radius: 2px; + font-size: 11px; + height: 24px; + line-height: 16px; + padding: 3px 6px; +} +.media .media .button { + border-radius: 2px; + font-size: 11px; + height: 24px; + line-height: 16px; + padding: 3px 6px; +} +.media .media .content:not(:last-child), +.media .media .control:not(:last-child) { + margin-bottom: 5px; +} +.media .media .media { + font-size: 12px; + padding-top: 5px; +} +.media .media .media + .media { + margin-top: 5px; +} +.media + .media { + border-top: 1px solid rgba(211, 214, 219, 0.5); + margin-top: 10px; + padding-top: 10px; +} +.media.is-large + .media { + margin-top: 20px; + padding-top: 20px; +} +@media screen and (min-width: 769px) { + .media { + display: flex; + } + .media.is-large .media-number { + margin-right: 20px; + } +} + +.block:not(:last-child) { + margin-bottom: 20px; +} + +.header { + background: white; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + height: 50px; + line-height: 24px; + position: relative; + text-align: center; + z-index: 2; +} +.header:after { + clear: both; + content: " "; + display: table; +} +.header .container { + align-items: center; + box-shadow: 0 1px 0 rgba(211, 214, 219, 0.3); + display: flex; + height: 50px; +} + +@media screen and (min-width: 769px) { + .header-toggle { + display: none; + } +} + +.header-item { + display: block; + padding: 0 10px; +} +.header-item a { + color: #69707a; +} +.header-item a:hover { + color: #222324; +} +.header-item a.is-active { + color: #222324; +} +.header-item .fa { + font-size: 21px; + line-height: 24px; +} + +.header-icon { + display: inline-block; + font-size: 14px; + height: 24px; + line-height: 24px; + text-align: center; + vertical-align: top; + width: 24px; + color: #69707a; + margin: 0 5px; +} +.header-icon:hover { + color: #222324; +} + +.header-tab { + border-bottom: 1px solid transparent; + color: #69707a; + display: block; + height: 50px; + line-height: 24px; + padding: 13px 15px; +} +.header-tab:hover { + border-bottom: 1px solid #1fc8db; +} +.header-tab.is-active { + border-bottom: 3px solid #1fc8db; + color: #1fc8db; +} + +.header-logo { + align-items: center; + display: flex; +} +.header-logo img { + max-height: 24px; +} +@media screen and (max-width: 979px) { + .header-logo { + padding: 0 10px; + } +} +@media screen and (min-width: 769px) { + .header-logo { + padding-right: 10px; + } +} + +.header-left { + align-items: center; + display: flex; + flex: 1; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; +} + +.header-center { + align-items: center; + display: flex; + height: 50px; + left: 50%; + position: absolute; + transform: translateX(-50%); +} + +.header-right { + align-items: center; +} +@media screen and (min-width: 769px) { + .header-right { + display: flex; + } +} +@media screen and (min-width: 980px) { + .header-right .header-item:last-child { + padding-right: 0; + } +} + +.header-full { + align-items: stretch; + display: flex; + height: 50px; + justify-content: center; + text-align: center; + width: 100%; +} +.header-full > .header-item { + align-items: stretch; + display: flex; + flex: 1; + justify-content: center; + padding: 0; +} +.header-full > .header-item > a { + align-items: center; + display: flex; + justify-content: center; + width: 100%; +} + +@media screen and (max-width: 768px) { + .header-menu { + background: white; + box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1); + display: none; + position: absolute; + right: 0; + top: 50px; + z-index: 100; + } + .header-menu .header-item { + border-top: 1px solid rgba(211, 214, 219, 0.5); + padding: 10px; + } + .header-menu.is-active { + display: block; + } +} + +.header.is-centered { + justify-content: center; +} +.header.is-centered .header-left, +.header.is-centered .header-center, +.header.is-centered .header-right { + justify-content: center; +} + +.header.is-small { + background: #f5f7fa; + box-shadow: none; + height: 40px; + z-index: 1; +} +.header.is-small .container { + height: 40px; +} +.header.is-small .header-tab { + font-size: 13px; + height: 40px; + padding: 8px 10px; +} +.header.is-small .header-tab:hover, .header.is-small .header-tab.is-active { + border-bottom-width: 2px; +} + +.hero { + background: white; + text-align: center; +} +.hero > .container { + padding: 40px 20px; +} +.hero a { + color: inherit; +} +.hero .header { + background: none; + box-shadow: none; +} +.hero .tabs ul { + border-bottom: none; +} +.hero .tabs a { + border: none; + margin-bottom: 0; + padding: 0 0 10px; +} +.hero .tabs.is-boxed a { + border: none; + padding: 6px 12px; +} +@media screen and (min-width: 980px) { + .hero > .container { + padding: 40px 0; + } +} +.hero.is-alt { + background: #f5f7fa; + color: #aeb1b5; +} +.hero.is-primary { + background: #1fc8db; + color: white; +} +.hero.is-primary .title { + color: white; +} +.hero.is-primary .title strong { + color: inherit; +} +.hero.is-primary .subtitle { + color: rgba(255, 255, 255, 0.7); +} +.hero.is-primary .subtitle strong { + color: white; +} +.hero.is-primary .header .container { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} +.hero.is-primary .header-icon, +.hero.is-primary .header-item > a:not(.button) { + color: white; + opacity: .5; +} +.hero.is-primary .header-icon:hover, .hero.is-primary .header-icon.is-active, +.hero.is-primary .header-item > a:not(.button):hover, +.hero.is-primary .header-item > a:not(.button).is-active { + opacity: 1; +} +.hero.is-primary .tabs a { + color: white; + opacity: .5; +} +.hero.is-primary .tabs a:hover { + opacity: 1; +} +.hero.is-primary .tabs li.is-active a { + opacity: 1; +} +.hero.is-primary .tabs.is-boxed a { + color: white; +} +.hero.is-primary .tabs.is-boxed a:hover { + background: rgba(0, 0, 0, 0.1); +} +.hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover { + background: white; + color: #1fc8db; +} +.hero.is-primary.is-bold { + background-image: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 71%, #2cb5e8 100%); +} +@media screen and (max-width: 768px) { + .hero.is-primary .header-toggle span { + background: white; + } + .hero.is-primary .header-toggle:hover { + background: rgba(0, 0, 0, 0.1); + } + .hero.is-primary .header-toggle.is-active span { + background: white; + } + .hero.is-primary .header-menu { + background: #1fc8db; + } + .hero.is-primary .header-menu .header-item { + border-top-color: rgba(255, 255, 255, 0.2); + } +} +.hero.is-info { + background: #42afe3; + color: white; +} +.hero.is-info .title { + color: white; +} +.hero.is-info .title strong { + color: inherit; +} +.hero.is-info .subtitle { + color: rgba(255, 255, 255, 0.7); +} +.hero.is-info .subtitle strong { + color: white; +} +.hero.is-info .header .container { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} +.hero.is-info .header-icon, +.hero.is-info .header-item > a:not(.button) { + color: white; + opacity: .5; +} +.hero.is-info .header-icon:hover, .hero.is-info .header-icon.is-active, +.hero.is-info .header-item > a:not(.button):hover, +.hero.is-info .header-item > a:not(.button).is-active { + opacity: 1; +} +.hero.is-info .tabs a { + color: white; + opacity: .5; +} +.hero.is-info .tabs a:hover { + opacity: 1; +} +.hero.is-info .tabs li.is-active a { + opacity: 1; +} +.hero.is-info .tabs.is-boxed a { + color: white; +} +.hero.is-info .tabs.is-boxed a:hover { + background: rgba(0, 0, 0, 0.1); +} +.hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover { + background: white; + color: #42afe3; +} +.hero.is-info.is-bold { + background-image: linear-gradient(141deg, #13bfdf 0%, #42afe3 71%, #53a1eb 100%); +} +@media screen and (max-width: 768px) { + .hero.is-info .header-toggle span { + background: white; + } + .hero.is-info .header-toggle:hover { + background: rgba(0, 0, 0, 0.1); + } + .hero.is-info .header-toggle.is-active span { + background: white; + } + .hero.is-info .header-menu { + background: #42afe3; + } + .hero.is-info .header-menu .header-item { + border-top-color: rgba(255, 255, 255, 0.2); + } +} +.hero.is-success { + background: #97cd76; + color: white; +} +.hero.is-success .title { + color: white; +} +.hero.is-success .title strong { + color: inherit; +} +.hero.is-success .subtitle { + color: rgba(255, 255, 255, 0.7); +} +.hero.is-success .subtitle strong { + color: white; +} +.hero.is-success .header .container { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} +.hero.is-success .header-icon, +.hero.is-success .header-item > a:not(.button) { + color: white; + opacity: .5; +} +.hero.is-success .header-icon:hover, .hero.is-success .header-icon.is-active, +.hero.is-success .header-item > a:not(.button):hover, +.hero.is-success .header-item > a:not(.button).is-active { + opacity: 1; +} +.hero.is-success .tabs a { + color: white; + opacity: .5; +} +.hero.is-success .tabs a:hover { + opacity: 1; +} +.hero.is-success .tabs li.is-active a { + opacity: 1; +} +.hero.is-success .tabs.is-boxed a { + color: white; +} +.hero.is-success .tabs.is-boxed a:hover { + background: rgba(0, 0, 0, 0.1); +} +.hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover { + background: white; + color: #97cd76; +} +.hero.is-success.is-bold { + background-image: linear-gradient(141deg, #8ecb45 0%, #97cd76 71%, #96d885 100%); +} +@media screen and (max-width: 768px) { + .hero.is-success .header-toggle span { + background: white; + } + .hero.is-success .header-toggle:hover { + background: rgba(0, 0, 0, 0.1); + } + .hero.is-success .header-toggle.is-active span { + background: white; + } + .hero.is-success .header-menu { + background: #97cd76; + } + .hero.is-success .header-menu .header-item { + border-top-color: rgba(255, 255, 255, 0.2); + } +} +.hero.is-warning { + background: #fce473; + color: rgba(0, 0, 0, 0.5); +} +.hero.is-warning .title { + color: rgba(0, 0, 0, 0.5); +} +.hero.is-warning .title strong { + color: inherit; +} +.hero.is-warning .subtitle { + color: rgba(0, 0, 0, 0.7); +} +.hero.is-warning .subtitle strong { + color: rgba(0, 0, 0, 0.5); +} +.hero.is-warning .header .container { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} +.hero.is-warning .header-icon, +.hero.is-warning .header-item > a:not(.button) { + color: rgba(0, 0, 0, 0.5); + opacity: .5; +} +.hero.is-warning .header-icon:hover, .hero.is-warning .header-icon.is-active, +.hero.is-warning .header-item > a:not(.button):hover, +.hero.is-warning .header-item > a:not(.button).is-active { + opacity: 1; +} +.hero.is-warning .tabs a { + color: rgba(0, 0, 0, 0.5); + opacity: .5; +} +.hero.is-warning .tabs a:hover { + opacity: 1; +} +.hero.is-warning .tabs li.is-active a { + opacity: 1; +} +.hero.is-warning .tabs.is-boxed a { + color: rgba(0, 0, 0, 0.5); +} +.hero.is-warning .tabs.is-boxed a:hover { + background: rgba(0, 0, 0, 0.1); +} +.hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover { + background: rgba(0, 0, 0, 0.5); + color: #fce473; +} +.hero.is-warning.is-bold { + background-image: linear-gradient(141deg, #ffbd3d 0%, #fce473 71%, #fffe8a 100%); +} +@media screen and (max-width: 768px) { + .hero.is-warning .header-toggle span { + background: rgba(0, 0, 0, 0.5); + } + .hero.is-warning .header-toggle:hover { + background: rgba(0, 0, 0, 0.1); + } + .hero.is-warning .header-toggle.is-active span { + background: rgba(0, 0, 0, 0.5); + } + .hero.is-warning .header-menu { + background: #fce473; + } + .hero.is-warning .header-menu .header-item { + border-top-color: rgba(0, 0, 0, 0.2); + } +} +.hero.is-danger { + background: #ed6c63; + color: white; +} +.hero.is-danger .title { + color: white; +} +.hero.is-danger .title strong { + color: inherit; +} +.hero.is-danger .subtitle { + color: rgba(255, 255, 255, 0.7); +} +.hero.is-danger .subtitle strong { + color: white; +} +.hero.is-danger .header .container { + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} +.hero.is-danger .header-icon, +.hero.is-danger .header-item > a:not(.button) { + color: white; + opacity: .5; +} +.hero.is-danger .header-icon:hover, .hero.is-danger .header-icon.is-active, +.hero.is-danger .header-item > a:not(.button):hover, +.hero.is-danger .header-item > a:not(.button).is-active { + opacity: 1; +} +.hero.is-danger .tabs a { + color: white; + opacity: .5; +} +.hero.is-danger .tabs a:hover { + opacity: 1; +} +.hero.is-danger .tabs li.is-active a { + opacity: 1; +} +.hero.is-danger .tabs.is-boxed a { + color: white; +} +.hero.is-danger .tabs.is-boxed a:hover { + background: rgba(0, 0, 0, 0.1); +} +.hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover { + background: white; + color: #ed6c63; +} +.hero.is-danger.is-bold { + background-image: linear-gradient(141deg, #f32a3e 0%, #ed6c63 71%, #f39376 100%); +} +@media screen and (max-width: 768px) { + .hero.is-danger .header-toggle span { + background: white; + } + .hero.is-danger .header-toggle:hover { + background: rgba(0, 0, 0, 0.1); + } + .hero.is-danger .header-toggle.is-active span { + background: white; + } + .hero.is-danger .header-menu { + background: #ed6c63; + } + .hero.is-danger .header-menu .header-item { + border-top-color: rgba(255, 255, 255, 0.2); + } +} +@media screen and (min-width: 769px) { + .hero.is-fullheight .title, .hero.is-medium .title, .hero.is-large .title { + font-size: 48px; + } + .hero.is-fullheight .subtitle, .hero.is-medium .subtitle, .hero.is-large .subtitle { + font-size: 28px; + } + .hero.is-fullheight .tabs, .hero.is-medium .tabs, .hero.is-large .tabs { + font-size: 18px; + } + .hero.is-fullheight .tabs a, .hero.is-medium .tabs a, .hero.is-large .tabs a { + padding-bottom: 15px; + } + .hero.is-fullheight .tabs.is-boxed a, .hero.is-medium .tabs.is-boxed a, .hero.is-large .tabs.is-boxed a { + padding: 12px 16px; + } +} +.hero.is-fullheight { + align-items: center; + display: flex; + height: 100vh; +} +.hero.is-fullheight .tabs { + white-space: normal; +} +@media screen and (min-width: 769px) { + .hero.is-medium > .container { + padding: 120px 20px; + } + .hero.is-medium .title { + font-size: 40px; + } + .hero.is-medium .subtitle { + font-size: 24px; + } + .hero.is-medium .tabs { + font-size: 16px; + } +} +@media screen and (min-width: 980px) { + .hero.is-medium > .container { + padding: 120px 0; + } +} +@media screen and (min-width: 769px) { + .hero.is-large > .container { + padding: 240px 20px; + } +} +@media screen and (min-width: 980px) { + .hero.is-large > .container { + padding: 240px 0; + } +} +.hero.is-left { + text-align: left; +} +.hero.is-right { + text-align: right; +} + +.hero-buttons { + margin-top: 20px; +} +@media screen and (max-width: 768px) { + .hero-buttons .button { + display: block; + } + .hero-buttons .button:not(:last-child) { + margin-bottom: 10px; + } +} +@media screen and (min-width: 769px) { + .hero-buttons { + display: flex; + justify-content: center; + } + .hero-buttons .button:not(:last-child) { + margin-right: 20px; + } +} + +.section { + background: white; + padding: 40px 20px; +} +.section + .section { + border-top: 1px solid rgba(211, 214, 219, 0.5); +} +@media screen and (min-width: 980px) { + .section { + padding: 40px 0; + } + .section.is-medium { + padding: 120px 0; + } + .section.is-large { + padding: 240px 0; + } +} + +.footer { + background: #f5f7fa; + padding: 40px 20px 80px; +} +.footer a { + color: #69707a; +} +.footer a:hover { + color: #222324; +} +.footer a:not(.icon) { + border-bottom: 1px solid #d3d6db; +} +.footer a:not(.icon):hover { + border-bottom-color: #1fc8db; +} diff --git a/css/bulma.min.css b/css/bulma.min.css new file mode 100644 index 00000000..df4533a7 --- /dev/null +++ b/css/bulma.min.css @@ -0,0 +1 @@ +html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,menu,nav,section,time,mark,audio,video,details,summary{margin:0;padding:0;border:0;font-size:100%;font-weight:normal;vertical-align:baseline;background:transparent}article,aside,figure,footer,header,nav,section,details,summary{display:block}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,object,embed{max-width:100%}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;vertical-align:bottom}td{font-weight:normal;vertical-align:top}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}select,input,textarea{font:99% sans-serif}table{font-size:inherit;font:100%}small{font-size:85%}strong{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre,code,kbd,samp{font-family:monospace,sans-serif}label,input[type=button],input[type=submit],input[type=file],button{cursor:pointer}button,input,select,textarea{margin:0}button,input[type=button]{width:auto;overflow:visible}@keyframes spin-around{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}html{background:#f5f7fa;font-size:14px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;min-width:300px;overflow-x:hidden;overflow-y:scroll;text-rendering:optimizeLegibility}body,button,input,select,textarea{font-family:"Helvetica Neue","Helvetica","Arial",sans-serif}code,pre{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;font-family:monospace;line-height:1.25}body{color:#69707a;font-size:1rem;line-height:1.42857}a{color:#1fc8db;cursor:pointer;text-decoration:none;transition:none 86ms ease-out}a:hover{color:#222324}code{background:#f5f7fa;color:#42afe3;font-size:12px;font-weight:normal;padding:1px 2px 2px}hr{border-top-color:#d3d6db;margin:20px 0}img{max-height:100%;max-width:100%}input[type="checkbox"],input[type="radio"]{vertical-align:baseline}small{font-size:11px}strong{color:#222324}article,aside,figure,footer,header,hgroup,section{display:block}pre{background:#f5f7fa;color:#69707a;white-space:pre;word-wrap:normal}pre code{background:#f5f7fa;color:#69707a;display:block;overflow-x:auto;padding:16px 20px}table{width:100%}table th,table td{text-align:left;vertical-align:top}table th{color:#222324}.container{margin:0 auto;max-width:960px;position:relative}.fa{font-size:21px;text-align:center;vertical-align:top}.content:not(:last-child){margin-bottom:20px}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{color:#222324;font-weight:300;line-height:1.125;margin-bottom:20px}.content h1:not(:first-child),.content h2:not(:first-child),.content h3:not(:first-child){margin-top:40px}.content h1{font-size:2em}.content h2{font-size:1.75em}.content h3{font-size:1.5em}.content h4{font-size:1.25em}.content h5{font-size:1.125em}.content h6{font-size:1em}.content p:not(:last-child){margin-bottom:1em}.content li+li{margin-top:.25em}.content ol{list-style:decimal outside;margin:1em 2em}.content ul{list-style:disc outside;margin:1em 2em}.content ul ul{list-style-type:circle;margin-top:.5em}.content ul ul ul{list-style-type:square}.content blockquote{background:#f5f7fa;border-left:5px solid #d3d6db;padding:1.5em}.content blockquote:not(:last-child){margin-bottom:1em}.highlight{background-color:#fdf6e3;color:#586e75}.highlight .c{color:#93a1a1}.highlight .err,.highlight .g{color:#586e75}.highlight .k{color:#859900}.highlight .l,.highlight .n{color:#586e75}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#586e75}.highlight .cm{color:#93a1a1}.highlight .cp{color:#859900}.highlight .c1{color:#93a1a1}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#586e75;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go,.highlight .gp{color:#586e75}.highlight .gs{color:#586e75;font-weight:bold}.highlight .gu{color:#cb4b16}.highlight .gt{color:#586e75}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn,.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#586e75}.highlight .m,.highlight .s{color:#2aa198}.highlight .na{color:#B58900}.highlight .nb{color:#586e75}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ni,.highlight .ne{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#586e75}.highlight .nt,.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#586e75}.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#2aa198}.highlight .sb{color:#93a1a1}.highlight .sc{color:#2aa198}.highlight .sd{color:#586e75}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#586e75}.highlight .si,.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1,.highlight .ss{color:#2aa198}.highlight .bp,.highlight .vc,.highlight .vg,.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}.is-centered{text-align:center}.is-left{text-align:left}.is-right{text-align:right}.is-block{display:block}.is-disabled{pointer-events:none}.is-inline{display:inline}.is-marginless{margin:0 !important}.is-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input,.textarea{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #d3d6db;border-radius:3px;color:#222324;display:inline-block;font-size:14px;height:32px;line-height:24px;padding:3px 8px;position:relative;vertical-align:top;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);display:block;max-width:100%;width:100%}.input:hover,.textarea:hover{border-color:#aeb1b5}.input:active,.textarea:active,.input:focus,.textarea:focus{border-color:#1fc8db;outline:none}.input[disabled],[disabled].textarea,.input[disabled]:hover,[disabled].textarea:hover{background:#f5f7fa;border-color:#d3d6db}.input[disabled]::-moz-placeholder,[disabled].textarea::-moz-placeholder,.input[disabled]:hover::-moz-placeholder,[disabled].textarea:hover::-moz-placeholder{color:rgba(34,35,36,0.3)}.input[disabled]::-webkit-input-placeholder,[disabled].textarea::-webkit-input-placeholder,.input[disabled]:hover::-webkit-input-placeholder,[disabled].textarea:hover::-webkit-input-placeholder{color:rgba(34,35,36,0.3)}.input[disabled]:-moz-placeholder,[disabled].textarea:-moz-placeholder,.input[disabled]:hover:-moz-placeholder,[disabled].textarea:hover:-moz-placeholder{color:rgba(34,35,36,0.3)}.input[disabled]:-ms-input-placeholder,[disabled].textarea:-ms-input-placeholder,.input[disabled]:hover:-ms-input-placeholder,[disabled].textarea:hover:-ms-input-placeholder{color:rgba(34,35,36,0.3)}.input[type="search"],[type="search"].textarea{border-radius:290486px}.input.is-small,.is-small.textarea{border-radius:2px;font-size:11px;height:24px;line-height:16px;padding:3px 6px}.input.is-medium,.is-medium.textarea{font-size:18px;height:40px;line-height:32px;padding:3px 10px}.input.is-large,.is-large.textarea{font-size:24px;height:48px;line-height:40px;padding:3px 12px}.input.is-fullwidth,.is-fullwidth.textarea{display:block;width:100%}.input.is-inline,.is-inline.textarea{display:inline;width:auto}.textarea{line-height:1.2;max-height:600px;max-width:100%;min-height:120px;min-width:100%;padding:10px;resize:vertical}.checkbox,.radio{cursor:pointer;display:inline-block;line-height:16px;padding-left:18px;position:relative;vertical-align:top}.checkbox input,.radio input{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #d3d6db;border-radius:3px;color:#222324;display:inline-block;font-size:14px;height:32px;line-height:24px;padding:3px 8px;position:relative;vertical-align:top;border-radius:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);cursor:pointer;float:left;height:14px;left:0;outline:none;padding:0;position:absolute;top:1px;width:14px}.checkbox input:hover,.radio input:hover{border-color:#aeb1b5}.checkbox input:active,.radio input:active,.checkbox input:focus,.radio input:focus{border-color:#1fc8db;outline:none}.checkbox input[disabled],.radio input[disabled],.checkbox input[disabled]:hover,.radio input[disabled]:hover{background:#f5f7fa;border-color:#d3d6db}.checkbox input[disabled]::-moz-placeholder,.radio input[disabled]::-moz-placeholder,.checkbox input[disabled]:hover::-moz-placeholder,.radio input[disabled]:hover::-moz-placeholder{color:rgba(34,35,36,0.3)}.checkbox input[disabled]::-webkit-input-placeholder,.radio input[disabled]::-webkit-input-placeholder,.checkbox input[disabled]:hover::-webkit-input-placeholder,.radio input[disabled]:hover::-webkit-input-placeholder{color:rgba(34,35,36,0.3)}.checkbox input[disabled]:-moz-placeholder,.radio input[disabled]:-moz-placeholder,.checkbox input[disabled]:hover:-moz-placeholder,.radio input[disabled]:hover:-moz-placeholder{color:rgba(34,35,36,0.3)}.checkbox input[disabled]:-ms-input-placeholder,.radio input[disabled]:-ms-input-placeholder,.checkbox input[disabled]:hover:-ms-input-placeholder,.radio input[disabled]:hover:-ms-input-placeholder{color:rgba(34,35,36,0.3)}.checkbox input:after,.radio input:after{border:1px solid #fff;border-right:0;border-top:0;content:" ";display:block;height:7px;pointer-events:none;position:absolute;transform:rotate(-45deg);width:7px;height:4px;left:3px;opacity:0;position:absolute;top:3px;transform:rotate(-45deg) scale(1)}.checkbox input:checked,.radio input:checked{background:#1fc8db;border-color:#1fc8db;box-shadow:none}.checkbox input:checked:after,.radio input:checked:after{opacity:1}.checkbox:hover,.radio:hover{color:#222324}.checkbox:hover input,.radio:hover input{border-color:#aeb1b5}.checkbox:hover input:checked,.radio:hover input:checked{border-color:#1fc8db}.is-disabled.checkbox,.is-disabled.radio,.is-disabled.checkbox:hover,.is-disabled.radio:hover{color:#aeb1b5}.radio+.radio{margin-left:10px}.radio input{border-radius:8px}.radio input:after{background:#fff;border:0;border-radius:2px;left:4px;top:4px;transform:none;width:4px}.select{display:inline-block;height:32px;position:relative;vertical-align:top}.select select{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #d3d6db;border-radius:3px;color:#222324;display:inline-block;font-size:14px;height:32px;line-height:24px;padding:3px 8px;position:relative;vertical-align:top;cursor:pointer;display:block;outline:none;padding-right:36px}.select select:hover{border-color:#aeb1b5}.select select:active,.select select:focus{border-color:#1fc8db;outline:none}.select select[disabled],.select select[disabled]:hover{background:#f5f7fa;border-color:#d3d6db}.select select[disabled]::-moz-placeholder,.select select[disabled]:hover::-moz-placeholder{color:rgba(34,35,36,0.3)}.select select[disabled]::-webkit-input-placeholder,.select select[disabled]:hover::-webkit-input-placeholder{color:rgba(34,35,36,0.3)}.select select[disabled]:-moz-placeholder,.select select[disabled]:hover:-moz-placeholder{color:rgba(34,35,36,0.3)}.select select[disabled]:-ms-input-placeholder,.select select[disabled]:hover:-ms-input-placeholder{color:rgba(34,35,36,0.3)}.select select:hover{border-color:#aeb1b5}.select:after{border:1px solid #1fc8db;border-right:0;border-top:0;content:" ";display:block;height:7px;pointer-events:none;position:absolute;transform:rotate(-45deg);width:7px;margin-top:-6px;right:16px;top:50%}.select:hover:after{border-color:#222324}.control{position:relative}.control.is-loading:after{position:absolute !important;right:8px;top:8px}.control:not(:last-child){margin-bottom:10px}.control.is-withicon .fa{display:inline-block;font-size:14px;height:20px;line-height:20px;text-align:center;vertical-align:top;width:20px;color:#aeb1b5;left:6px;pointer-events:none;position:absolute;top:6px;z-index:1}.control.is-withicon .input,.control.is-withicon .textarea{padding-left:32px}.control.is-withicon .input:focus+.fa,.control.is-withicon .textarea:focus+.fa{color:#1fc8db}.control.is-horizontal{display:flex}.control.is-horizontal>.button:not(:last-child),.control.is-horizontal>.input:not(:last-child),.control.is-horizontal>.textarea:not(:last-child),.control.is-horizontal>.select:not(:last-child){margin-right:10px}.control.is-horizontal>.input,.control.is-horizontal>.textarea{flex:1}.control.is-grouped{display:flex}.control.is-grouped .input,.control.is-grouped .textarea,.control.is-grouped .button,.control.is-grouped .select{border-radius:0;margin-right:-1px}.control.is-grouped .input:hover,.control.is-grouped .textarea:hover,.control.is-grouped .button:hover,.control.is-grouped .select:hover{z-index:2}.control.is-grouped .input:active,.control.is-grouped .textarea:active,.control.is-grouped .input:focus,.control.is-grouped .textarea:focus,.control.is-grouped .button:active,.control.is-grouped .button:focus,.control.is-grouped .select:active,.control.is-grouped .select:focus{z-index:3}.control.is-grouped .input:first-child,.control.is-grouped .textarea:first-child,.control.is-grouped .button:first-child,.control.is-grouped .select:first-child{border-radius:3px 0 0 3px}.control.is-grouped .input:first-child select,.control.is-grouped .textarea:first-child select,.control.is-grouped .button:first-child select,.control.is-grouped .select:first-child select{border-radius:3px 0 0 3px}.control.is-grouped .input:last-child,.control.is-grouped .textarea:last-child,.control.is-grouped .button:last-child,.control.is-grouped .select:last-child{border-radius:0 3px 3px 0}.control.is-grouped.is-centered{justify-content:center}.button{-moz-appearance:none;-webkit-appearance:none;background:#fff;border:1px solid #d3d6db;border-radius:3px;color:#222324;display:inline-block;font-size:14px;height:32px;line-height:24px;padding:3px 8px;position:relative;vertical-align:top;padding:3px 10px}.button:hover{border-color:#aeb1b5}.button:active,.button:focus{border-color:#1fc8db;outline:none}.button[disabled],.button[disabled]:hover{background:#f5f7fa;border-color:#d3d6db}.button[disabled]::-moz-placeholder,.button[disabled]:hover::-moz-placeholder{color:rgba(34,35,36,0.3)}.button[disabled]::-webkit-input-placeholder,.button[disabled]:hover::-webkit-input-placeholder{color:rgba(34,35,36,0.3)}.button[disabled]:-moz-placeholder,.button[disabled]:hover:-moz-placeholder{color:rgba(34,35,36,0.3)}.button[disabled]:-ms-input-placeholder,.button[disabled]:hover:-ms-input-placeholder{color:rgba(34,35,36,0.3)}.button strong{color:inherit}.button small{display:block;font-size:11px;line-height:1;margin-top:5px}.button .fa{line-height:24px;margin:0 -2px;width:24px}.button:hover{color:#222324}.button:active{box-shadow:inset 0 1px 2px rgba(0,0,0,0.2)}.button.is-primary{background:#1fc8db;border-color:transparent;color:#fff}.button.is-primary:hover,.button.is-primary:focus{background:#199fae;border-color:transparent;color:#fff}.button.is-primary:active{border-color:transparent}.button.is-primary.is-outlined{background:transparent;border-color:#1fc8db;color:#1fc8db}.button.is-primary.is-outlined:hover,.button.is-primary.is-outlined:focus{border-color:#199fae;color:#199fae}.button.is-primary.is-inverted{background:#fff;color:#1fc8db}.button.is-primary.is-inverted:hover{background:#f2f2f2}.button.is-primary.is-inverted.is-outlined{background-color:transparent;border-color:#fff;color:#fff}.button.is-primary.is-inverted.is-outlined:hover{background:rgba(0,0,0,0.05)}.button.is-primary.is-loading:after{border-color:transparent transparent #fff #fff !important}.button.is-info{background:#42afe3;border-color:transparent;color:#fff}.button.is-info:hover,.button.is-info:focus{background:#1f99d3;border-color:transparent;color:#fff}.button.is-info:active{border-color:transparent}.button.is-info.is-outlined{background:transparent;border-color:#42afe3;color:#42afe3}.button.is-info.is-outlined:hover,.button.is-info.is-outlined:focus{border-color:#1f99d3;color:#1f99d3}.button.is-info.is-inverted{background:#fff;color:#42afe3}.button.is-info.is-inverted:hover{background:#f2f2f2}.button.is-info.is-inverted.is-outlined{background-color:transparent;border-color:#fff;color:#fff}.button.is-info.is-inverted.is-outlined:hover{background:rgba(0,0,0,0.05)}.button.is-info.is-loading:after{border-color:transparent transparent #fff #fff !important}.button.is-success{background:#97cd76;border-color:transparent;color:#fff}.button.is-success:hover,.button.is-success:focus{background:#7bbf51;border-color:transparent;color:#fff}.button.is-success:active{border-color:transparent}.button.is-success.is-outlined{background:transparent;border-color:#97cd76;color:#97cd76}.button.is-success.is-outlined:hover,.button.is-success.is-outlined:focus{border-color:#7bbf51;color:#7bbf51}.button.is-success.is-inverted{background:#fff;color:#97cd76}.button.is-success.is-inverted:hover{background:#f2f2f2}.button.is-success.is-inverted.is-outlined{background-color:transparent;border-color:#fff;color:#fff}.button.is-success.is-inverted.is-outlined:hover{background:rgba(0,0,0,0.05)}.button.is-success.is-loading:after{border-color:transparent transparent #fff #fff !important}.button.is-warning{background:#fce473;border-color:transparent;color:rgba(0,0,0,0.5)}.button.is-warning:hover,.button.is-warning:focus{background:#fbda41;border-color:transparent;color:rgba(0,0,0,0.5)}.button.is-warning:active{border-color:transparent}.button.is-warning.is-outlined{background:transparent;border-color:#fce473;color:#fce473}.button.is-warning.is-outlined:hover,.button.is-warning.is-outlined:focus{border-color:#fbda41;color:#fbda41}.button.is-warning.is-inverted{background:rgba(0,0,0,0.5);color:#fce473}.button.is-warning.is-inverted:hover{background:rgba(0,0,0,0.5)}.button.is-warning.is-inverted.is-outlined{background-color:transparent;border-color:rgba(0,0,0,0.5);color:rgba(0,0,0,0.5)}.button.is-warning.is-inverted.is-outlined:hover{background:rgba(0,0,0,0.05)}.button.is-warning.is-loading:after{border-color:transparent transparent rgba(0,0,0,0.5) rgba(0,0,0,0.5) !important}.button.is-danger{background:#ed6c63;border-color:transparent;color:#fff}.button.is-danger:hover,.button.is-danger:focus{background:#e84135;border-color:transparent;color:#fff}.button.is-danger:active{border-color:transparent}.button.is-danger.is-outlined{background:transparent;border-color:#ed6c63;color:#ed6c63}.button.is-danger.is-outlined:hover,.button.is-danger.is-outlined:focus{border-color:#e84135;color:#e84135}.button.is-danger.is-inverted{background:#fff;color:#ed6c63}.button.is-danger.is-inverted:hover{background:#f2f2f2}.button.is-danger.is-inverted.is-outlined{background-color:transparent;border-color:#fff;color:#fff}.button.is-danger.is-inverted.is-outlined:hover{background:rgba(0,0,0,0.05)}.button.is-danger.is-loading:after{border-color:transparent transparent #fff #fff !important}.button.is-small{border-radius:2px;font-size:11px;height:24px;line-height:16px;padding:3px 6px}.button.is-medium{font-size:18px;height:40px;padding:7px 14px}.button.is-large{font-size:22px;height:48px;padding:11px 20px}.button.is-flexible{height:auto}.button.is-loading{color:transparent;pointer-events:none}.button.is-loading:after{left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;position:absolute !important}.button.is-disabled,.button[disabled]{opacity:.5;pointer-events:none}@media screen and (min-width: 769px){.button small{color:#69707a;left:0;margin-top:10px;position:absolute;top:100%;width:100%}}.title,.subtitle{font-weight:300}.title:not(:last-child),.subtitle:not(:last-child){margin-bottom:20px}.title{color:#222324;font-size:28px;line-height:1}.title strong{color:inherit}.title code{display:inline-block;font-size:28px}.title+.subtitle{margin-top:-10px}.title+.highlight{margin-top:-10px}.title.is-normal{font-weight:400}.title.is-normal strong{font-weight:700}.title.is-1{font-size:48px}.title.is-1 code{font-size:40px}.title.is-2{font-size:40px}.title.is-2 code{font-size:28px}.title.is-3{font-size:28px}.title.is-3 code{font-size:24px}.title.is-4{font-size:24px}.title.is-4 code{font-size:18px}.title.is-5{font-size:18px}.title.is-5 code{font-size:14px}.title.is-6{font-size:14px}.title.is-6 code{font-size:14px}@media screen and (min-width: 769px){.title+.subtitle{margin-top:-15px}}.subtitle{font-size:18px;line-height:1.125}.subtitle strong{color:#222324;font-weight:400}.subtitle code{border-radius:3px;display:inline-block;font-size:14px;padding:2px 3px;vertical-align:top}.subtitle+.text{margin-top:20px}.subtitle.is-normal{font-weight:400}.subtitle.is-normal strong{font-weight:700}.subtitle.is-1{font-size:48px}.subtitle.is-1 code{font-size:40px}.subtitle.is-2{font-size:40px}.subtitle.is-2 code{font-size:28px}.subtitle.is-3{font-size:28px}.subtitle.is-3 code{font-size:24px}.subtitle.is-4{font-size:24px}.subtitle.is-4 code{font-size:18px}.subtitle.is-5{font-size:18px}.subtitle.is-5 code{font-size:14px}.subtitle.is-6{font-size:14px}.subtitle.is-6 code{font-size:14px}.message-body{border:1px solid #d3d6db;border-radius:3px;padding:12px 15px}.message-body strong{color:inherit}.message-header{background:#69707a;border-radius:3px 3px 0 0;color:#fff;font-size:10px;font-weight:bold;letter-spacing:1px;padding:3px 8px;text-transform:uppercase}.message-header+.message-body{border-radius:0 0 3px 3px;border-top:none}.message{background:#f5f7fa;border-radius:3px}.message:not(:last-child){margin-bottom:20px}.message.is-primary{background:#edfbfc}.message.is-primary .message-header{background:#1fc8db;color:#fff}.message.is-primary .message-body{border-color:#1fc8db;color:#46adb9}.message.is-info{background:#edf7fc}.message.is-info .message-header{background:#42afe3;color:#fff}.message.is-info .message-body{border-color:#42afe3;color:#4793b8}.message.is-success{background:#f4faf0}.message.is-success .message-header{background:#97cd76;color:#fff}.message.is-success .message-body{border-color:#97cd76;color:#7a956a}.message.is-warning{background:#fffbeb}.message.is-warning .message-header{background:#fce473;color:rgba(0,0,0,0.5)}.message.is-warning .message-body{border-color:#fce473;color:#9f8b2d}.message.is-danger{background:#fdeeed}.message.is-danger .message-header{background:#ed6c63;color:#fff}.message.is-danger .message-body{border-color:#ed6c63;color:#be4941}.notification{background:#f5f7fa;border-radius:3px;padding:16px 20px;position:relative}.notification:after{clear:both;content:" ";display:table}.notification:not(:last-child){margin-bottom:20px}.notification .title{color:inherit}.notification.is-primary{background:#1fc8db;color:#fff}.notification.is-info{background:#42afe3;color:#fff}.notification.is-success{background:#97cd76;color:#fff}.notification.is-warning{background:#fce473;color:rgba(0,0,0,0.5)}.notification.is-danger{background:#ed6c63;color:#fff}.notification .delete{border-radius:0 3px;float:right;margin:-16px -20px 0 20px}.highlight{font-size:12px;font-weight:normal;max-width:100%;overflow:hidden;padding:0}.highlight:not(:last-child){margin-bottom:20px}.highlight pre{overflow:auto;max-width:100%}.delete{background:rgba(0,0,0,0.2);border-radius:290486px;cursor:pointer;display:inline-block;height:24px;position:relative;vertical-align:top;width:24px}.delete:before,.delete:after{background:#fff;content:"";display:block;height:2px;left:6px;position:absolute;top:11px;width:12px}.delete:before{transform:rotate(45deg)}.delete:after{transform:rotate(-45deg)}.delete:hover{background:rgba(0,0,0,0.5)}.delete.is-small,.tag:not(.is-large) .delete{height:16px;width:16px}.delete.is-small:before,.tag:not(.is-large) .delete:before,.delete.is-small:after,.tag:not(.is-large) .delete:after{left:4px;top:7px;width:8px}.icon{display:inline-block;font-size:21px;height:24px;line-height:24px;text-align:center;vertical-align:top;width:24px}.icon .fa{font-size:inherit;line-height:inherit}.icon.is-small{display:inline-block;font-size:14px;height:20px;line-height:20px;text-align:center;vertical-align:top;width:20px}.icon.is-medium{display:inline-block;font-size:28px;height:32px;line-height:32px;text-align:center;vertical-align:top;width:32px}.icon.is-large{display:inline-block;font-size:42px;height:48px;line-height:48px;text-align:center;vertical-align:top;width:48px}.hamburger,.header-toggle{cursor:pointer;display:block;height:50px;padding:19px 17px;position:relative;width:50px}.hamburger span,.header-toggle span{background:#69707a;display:block;height:1px;left:17px;position:absolute;transition:none 86ms ease-out;transition-property:background,left,opacity,transform;width:15px}.hamburger span:nth-child(1),.header-toggle span:nth-child(1){top:19px}.hamburger span:nth-child(2),.header-toggle span:nth-child(2){top:24px}.hamburger span:nth-child(3),.header-toggle span:nth-child(3){bottom:20px}.hamburger:hover,.header-toggle:hover{background:#f5f7fa}.hamburger.is-active span,.is-active.header-toggle span{background:#1fc8db}.hamburger.is-active span:nth-child(1),.is-active.header-toggle span:nth-child(1){left:20px;transform:rotate(45deg);transform-origin:left top}.hamburger.is-active span:nth-child(2),.is-active.header-toggle span:nth-child(2){opacity:0}.hamburger.is-active span:nth-child(3),.is-active.header-toggle span:nth-child(3){left:20px;transform:rotate(-45deg);transform-origin:left bottom}.heading{display:block;font-size:11px;letter-spacing:1px;margin-bottom:5px;text-transform:uppercase}.loader,.control.is-loading:after,.button.is-loading:after{animation:spin-around 500ms infinite linear;border:2px solid #d3d6db;border-radius:290486px;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:16px;position:relative;width:16px}.number{background:#f5f7fa;border-radius:290486px;display:inline-block;font-size:18px;vertical-align:top}.tag{background:#f5f7fa;border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.1);color:#69707a;display:inline-block;font-size:12px;height:24px;line-height:16px;padding:4px 10px;vertical-align:top;white-space:nowrap}.tag.is-dark{background:#69707a;color:#fff}.tag.is-rounded{border-radius:290486px}.tag.is-medium{box-shadow:inset 0 -2px 0 rgba(0,0,0,0.1);font-size:14px;height:32px;padding:7px 14px 9px}.tag:not(.is-large) .delete{margin-left:4px;margin-right:-6px}.tag.is-large{box-shadow:inset 0 -2px 0 rgba(0,0,0,0.1);font-size:18px;height:40px;line-height:24px;padding:7px 18px 9px}.tag.is-large .delete{margin-left:4px;margin-right:-8px}.tag.is-primary{background:#1fc8db;color:#fff}.tag.is-info{background:#42afe3;color:#fff}.tag.is-success{background:#97cd76;color:#fff}.tag.is-warning{background:#fce473;color:rgba(0,0,0,0.5)}.tag.is-danger{background:#ed6c63;color:#fff}@media screen and (max-width: 768px){.column+.column{margin-top:20px}}@media screen and (min-width: 769px){.column{flex:1}.column+.column{margin-left:20px}.column.is-double{flex:2}.column.is-triple{flex:3}.column.is-quadruple{flex:4}.column.is-half{flex:none;width:50%}.column.is-third{flex:none;width:33.3333%}.column.is-quarter{flex:none;width:25%}.column.is-1{flex:none;width:8.33333%}.column.is-2{flex:none;width:16.66667%}.column.is-3{flex:none;width:25%}.column.is-4{flex:none;width:33.33333%}.column.is-5{flex:none;width:41.66667%}.column.is-6{flex:none;width:50%}.column.is-7{flex:none;width:58.33333%}.column.is-8{flex:none;width:66.66667%}.column.is-9{flex:none;width:75%}.column.is-10{flex:none;width:83.33333%}.column.is-11{flex:none;width:91.66667%}}.columns:not(:last-child){margin-bottom:20px}@media screen and (min-width: 769px){.columns{display:flex}}.columns.is-gapless>.column+.column{margin-left:0}.columns.is-vcentered{align-items:center}@media screen and (min-width: 769px){.columns.is-grid{flex-wrap:wrap}.columns.is-grid>.column{flex-basis:33.3333%;max-width:33.3333%;padding:10px;width:33.3333%}.columns.is-grid>.column+.column{margin-left:0}}.navbar-item .title,.navbar-item .subtitle{margin-bottom:0}@media screen and (max-width: 768px){.navbar-item:not(:last-child){margin-bottom:10px}}.navbar:not(:last-child){margin-bottom:20px}.navbar code{border-radius:3px}.navbar img{display:inline-block;vertical-align:top}@media screen and (min-width: 769px){.navbar{align-items:center;display:flex;justify-content:space-between}.navbar>.navbar-item:not(.is-narrow){flex:1}}.navbar-left .navbar-item.is-flexible,.navbar-right .navbar-item.is-flexible{flex:1}.navbar-left .navbar-item:not(:last-child),.navbar-right .navbar-item:not(:last-child){margin-right:10px}@media screen and (max-width: 768px){.navbar-left+.navbar-right{margin-top:20px}}@media screen and (min-width: 769px){.navbar-left{align-items:center;display:flex}}@media screen and (min-width: 769px){.navbar-right{align-items:center;display:flex;justify-content:flex-end}}.card{background:#fff;box-shadow:0 2px 3px rgba(0,0,0,0.1),0 0 0 1px rgba(0,0,0,0.1);max-width:300px;position:relative}.card .media:not(:last-child){margin-bottom:10px}.card-image{display:block;position:relative}.card-image img{display:block}.card-image.is-square img,.card-image.is-4x3 img,.card-image.is-3x2 img{bottom:0;left:0;position:absolute;right:0;top:0;height:100%;width:100%}.card-image.is-square{padding-top:100%}.card-image.is-4x3{padding-top:75%}.card-image.is-3x2{padding-top:66.6666%}.card-content{padding:20px}.card-content .title+.subtitle{margin-top:-20px}.card-footer{background:#f5f7fa;display:block;padding:10px}.table{background:#fff;margin-bottom:20px;width:100%}.table th,.table td{border:1px solid #d3d6db;border-width:0 0 1px;padding:8px 10px;vertical-align:top}.table th.table-link,.table td.table-link{padding:0}.table th.table-link>a,.table td.table-link>a{display:block;padding:8px 10px}.table th.table-link>a:hover,.table td.table-link>a:hover{background:#1fc8db;color:#fff}.table th.table-icon,.table td.table-icon{padding:5px;text-align:center;white-space:nowrap;width:1%}.table th.table-icon .fa,.table td.table-icon .fa{display:inline-block;font-size:21px;height:24px;line-height:24px;text-align:center;vertical-align:top;width:24px}.table th.table-icon.table-link,.table td.table-icon.table-link{padding:0}.table th.table-icon.table-link>a,.table td.table-icon.table-link>a{padding:5px}.table th{color:#222324;text-align:left}.table tr:hover{background:rgba(245,247,250,0.5);color:#222324}.table tr:last-child td{border-bottom-width:0}.table thead th,.table thead td{border-width:0 0 2px}.table tfoot th,.table tfoot td{border-width:2px 0 0}.table.is-bordered th,.table.is-bordered td{border-width:1px}.table.is-bordered tr:last-child td{border-bottom-width:1px}.table.is-narrow th,.table.is-narrow td{padding:5px 10px}.table.is-narrow th.table-link,.table.is-narrow td.table-link{padding:0}.table.is-narrow th.table-link>a,.table.is-narrow td.table-link>a{padding:5px 10px}.table.is-narrow th.table-icon,.table.is-narrow td.table-icon{padding:2px}.table.is-narrow th.table-icon.table-link,.table.is-narrow td.table-icon.table-link{padding:0}.table.is-narrow th.table-icon.table-link>a,.table.is-narrow td.table-icon.table-link>a{padding:2px}.table.is-striped tbody tr:nth-child(2n){background:rgba(245,247,250,0.5)}.table.is-striped tbody tr:nth-child(2n):hover{background:#f5f7fa}.tabs{line-height:24px;overflow:hidden;overflow-x:auto;white-space:nowrap}.tabs:not(:last-child){margin-bottom:20px}.tabs .fa{line-height:24px;margin:0 -2px;width:24px}.tabs a{border-bottom:1px solid #d3d6db;color:#69707a;display:block;margin-bottom:-1px;padding:5px 0;vertical-align:top}.tabs a:hover{border-bottom-color:#222324;color:#222324}.tabs li{display:inline-block;vertical-align:top}.tabs li+li{margin-left:20px}.tabs li.is-active a{border-bottom-color:#1fc8db;color:#1fc8db}.tabs ul{border-bottom:1px solid #d3d6db}.tabs.is-boxed a{border:1px solid transparent;border-radius:3px 3px 0 0;padding:5px 15px}.tabs.is-boxed a:hover{background:#f5f7fa;border-bottom-color:#d3d6db}.tabs.is-boxed li+li{margin-left:5px}.tabs.is-boxed li.is-active a{background:#fff;border-color:#d3d6db;border-bottom-color:transparent}.tabs.is-toggle ul{border-bottom:none;display:flex}.tabs.is-toggle a{border:1px solid #d3d6db;margin-bottom:0;padding:5px 10px;position:relative}.tabs.is-toggle a:hover{background:#f5f7fa;border-color:#aeb1b5;z-index:2}.tabs.is-toggle li+li{margin-left:-1px}.tabs.is-toggle li:first-child a{border-radius:3px 0 0 3px}.tabs.is-toggle li:last-child a{border-radius:0 3px 3px 0}.tabs.is-toggle li.is-active a{background:#1fc8db;border-color:#1fc8db;color:#fff;z-index:1}@media screen and (min-width: 769px){.tabs.is-fullwidth ul{display:flex;justify-content:center;text-align:center}.tabs.is-fullwidth li{flex:1}.tabs.is-fullwidth li+li{margin-left:0}}.media-image.is-32{width:32px}.media-image.is-40{width:40px}@media screen and (max-width: 768px){.media-image{margin-bottom:10px}}@media screen and (min-width: 769px){.media-image{margin-right:10px;width:60px}}.media-number{background:#f5f7fa;border-radius:290486px;display:inline-block;font-size:18px;height:32px;line-height:24px;min-width:32px;padding:4px 8px;text-align:center;vertical-align:top}@media screen and (max-width: 768px){.media-number{margin-bottom:10px}}@media screen and (min-width: 769px){.media-number{margin-right:10px}}.media-content{flex:1}.media-content .textarea{min-height:60px}.media{align-items:flex-start}.media .content:not(:last-child){margin-bottom:10px}.media .media{border-top:1px solid rgba(211,214,219,0.5);display:flex;padding-top:10px}.media .media .media-image{margin-bottom:0;margin-right:10px;width:40px}.media .media .textarea{border-radius:2px;font-size:11px;height:24px;line-height:16px;padding:3px 6px}.media .media .button{border-radius:2px;font-size:11px;height:24px;line-height:16px;padding:3px 6px}.media .media .content:not(:last-child),.media .media .control:not(:last-child){margin-bottom:5px}.media .media .media{font-size:12px;padding-top:5px}.media .media .media+.media{margin-top:5px}.media+.media{border-top:1px solid rgba(211,214,219,0.5);margin-top:10px;padding-top:10px}.media.is-large+.media{margin-top:20px;padding-top:20px}@media screen and (min-width: 769px){.media{display:flex}.media.is-large .media-number{margin-right:20px}}.block:not(:last-child){margin-bottom:20px}.header{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1);height:50px;line-height:24px;position:relative;text-align:center;z-index:2}.header:after{clear:both;content:" ";display:table}.header .container{align-items:center;box-shadow:0 1px 0 rgba(211,214,219,0.3);display:flex;height:50px}@media screen and (min-width: 769px){.header-toggle{display:none}}.header-item{display:block;padding:0 10px}.header-item a{color:#69707a}.header-item a:hover{color:#222324}.header-item a.is-active{color:#222324}.header-item .fa{font-size:21px;line-height:24px}.header-icon{display:inline-block;font-size:14px;height:24px;line-height:24px;text-align:center;vertical-align:top;width:24px;color:#69707a;margin:0 5px}.header-icon:hover{color:#222324}.header-tab{border-bottom:1px solid transparent;color:#69707a;display:block;height:50px;line-height:24px;padding:13px 15px}.header-tab:hover{border-bottom:1px solid #1fc8db}.header-tab.is-active{border-bottom:3px solid #1fc8db;color:#1fc8db}.header-logo{align-items:center;display:flex}.header-logo img{max-height:24px}@media screen and (max-width: 979px){.header-logo{padding:0 10px}}@media screen and (min-width: 769px){.header-logo{padding-right:10px}}.header-left{align-items:center;display:flex;flex:1;overflow:hidden;overflow-x:auto;white-space:nowrap}.header-center{align-items:center;display:flex;height:50px;left:50%;position:absolute;transform:translateX(-50%)}.header-right{align-items:center}@media screen and (min-width: 769px){.header-right{display:flex}}@media screen and (min-width: 980px){.header-right .header-item:last-child{padding-right:0}}.header-full{align-items:stretch;display:flex;height:50px;justify-content:center;text-align:center;width:100%}.header-full>.header-item{align-items:stretch;display:flex;flex:1;justify-content:center;padding:0}.header-full>.header-item>a{align-items:center;display:flex;justify-content:center;width:100%}@media screen and (max-width: 768px){.header-menu{background:#fff;box-shadow:0 4px 7px rgba(0,0,0,0.1);display:none;position:absolute;right:0;top:50px;z-index:100}.header-menu .header-item{border-top:1px solid rgba(211,214,219,0.5);padding:10px}.header-menu.is-active{display:block}}.header.is-centered{justify-content:center}.header.is-centered .header-left,.header.is-centered .header-center,.header.is-centered .header-right{justify-content:center}.header.is-small{background:#f5f7fa;box-shadow:none;height:40px;z-index:1}.header.is-small .container{height:40px}.header.is-small .header-tab{font-size:13px;height:40px;padding:8px 10px}.header.is-small .header-tab:hover,.header.is-small .header-tab.is-active{border-bottom-width:2px}.hero{background:#fff;text-align:center}.hero>.container{padding:40px 20px}.hero a{color:inherit}.hero .header{background:none;box-shadow:none}.hero .tabs ul{border-bottom:none}.hero .tabs a{border:none;margin-bottom:0;padding:0 0 10px}.hero .tabs.is-boxed a{border:none;padding:6px 12px}@media screen and (min-width: 980px){.hero>.container{padding:40px 0}}.hero.is-alt{background:#f5f7fa;color:#aeb1b5}.hero.is-primary{background:#1fc8db;color:#fff}.hero.is-primary .title{color:#fff}.hero.is-primary .title strong{color:inherit}.hero.is-primary .subtitle{color:rgba(255,255,255,0.7)}.hero.is-primary .subtitle strong{color:#fff}.hero.is-primary .header .container{box-shadow:0 1px 0 rgba(255,255,255,0.2)}.hero.is-primary .header-icon,.hero.is-primary .header-item>a:not(.button){color:#fff;opacity:.5}.hero.is-primary .header-icon:hover,.hero.is-primary .header-icon.is-active,.hero.is-primary .header-item>a:not(.button):hover,.hero.is-primary .header-item>a:not(.button).is-active{opacity:1}.hero.is-primary .tabs a{color:#fff;opacity:.5}.hero.is-primary .tabs a:hover{opacity:1}.hero.is-primary .tabs li.is-active a{opacity:1}.hero.is-primary .tabs.is-boxed a{color:#fff}.hero.is-primary .tabs.is-boxed a:hover{background:rgba(0,0,0,0.1)}.hero.is-primary .tabs.is-boxed li.is-active a,.hero.is-primary .tabs.is-boxed li.is-active a:hover{background:#fff;color:#1fc8db}.hero.is-primary.is-bold{background-image:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 71%, #2cb5e8 100%)}@media screen and (max-width: 768px){.hero.is-primary .header-toggle span{background:#fff}.hero.is-primary .header-toggle:hover{background:rgba(0,0,0,0.1)}.hero.is-primary .header-toggle.is-active span{background:#fff}.hero.is-primary .header-menu{background:#1fc8db}.hero.is-primary .header-menu .header-item{border-top-color:rgba(255,255,255,0.2)}}.hero.is-info{background:#42afe3;color:#fff}.hero.is-info .title{color:#fff}.hero.is-info .title strong{color:inherit}.hero.is-info .subtitle{color:rgba(255,255,255,0.7)}.hero.is-info .subtitle strong{color:#fff}.hero.is-info .header .container{box-shadow:0 1px 0 rgba(255,255,255,0.2)}.hero.is-info .header-icon,.hero.is-info .header-item>a:not(.button){color:#fff;opacity:.5}.hero.is-info .header-icon:hover,.hero.is-info .header-icon.is-active,.hero.is-info .header-item>a:not(.button):hover,.hero.is-info .header-item>a:not(.button).is-active{opacity:1}.hero.is-info .tabs a{color:#fff;opacity:.5}.hero.is-info .tabs a:hover{opacity:1}.hero.is-info .tabs li.is-active a{opacity:1}.hero.is-info .tabs.is-boxed a{color:#fff}.hero.is-info .tabs.is-boxed a:hover{background:rgba(0,0,0,0.1)}.hero.is-info .tabs.is-boxed li.is-active a,.hero.is-info .tabs.is-boxed li.is-active a:hover{background:#fff;color:#42afe3}.hero.is-info.is-bold{background-image:linear-gradient(141deg, #13bfdf 0%, #42afe3 71%, #53a1eb 100%)}@media screen and (max-width: 768px){.hero.is-info .header-toggle span{background:#fff}.hero.is-info .header-toggle:hover{background:rgba(0,0,0,0.1)}.hero.is-info .header-toggle.is-active span{background:#fff}.hero.is-info .header-menu{background:#42afe3}.hero.is-info .header-menu .header-item{border-top-color:rgba(255,255,255,0.2)}}.hero.is-success{background:#97cd76;color:#fff}.hero.is-success .title{color:#fff}.hero.is-success .title strong{color:inherit}.hero.is-success .subtitle{color:rgba(255,255,255,0.7)}.hero.is-success .subtitle strong{color:#fff}.hero.is-success .header .container{box-shadow:0 1px 0 rgba(255,255,255,0.2)}.hero.is-success .header-icon,.hero.is-success .header-item>a:not(.button){color:#fff;opacity:.5}.hero.is-success .header-icon:hover,.hero.is-success .header-icon.is-active,.hero.is-success .header-item>a:not(.button):hover,.hero.is-success .header-item>a:not(.button).is-active{opacity:1}.hero.is-success .tabs a{color:#fff;opacity:.5}.hero.is-success .tabs a:hover{opacity:1}.hero.is-success .tabs li.is-active a{opacity:1}.hero.is-success .tabs.is-boxed a{color:#fff}.hero.is-success .tabs.is-boxed a:hover{background:rgba(0,0,0,0.1)}.hero.is-success .tabs.is-boxed li.is-active a,.hero.is-success .tabs.is-boxed li.is-active a:hover{background:#fff;color:#97cd76}.hero.is-success.is-bold{background-image:linear-gradient(141deg, #8ecb45 0%, #97cd76 71%, #96d885 100%)}@media screen and (max-width: 768px){.hero.is-success .header-toggle span{background:#fff}.hero.is-success .header-toggle:hover{background:rgba(0,0,0,0.1)}.hero.is-success .header-toggle.is-active span{background:#fff}.hero.is-success .header-menu{background:#97cd76}.hero.is-success .header-menu .header-item{border-top-color:rgba(255,255,255,0.2)}}.hero.is-warning{background:#fce473;color:rgba(0,0,0,0.5)}.hero.is-warning .title{color:rgba(0,0,0,0.5)}.hero.is-warning .title strong{color:inherit}.hero.is-warning .subtitle{color:rgba(0,0,0,0.7)}.hero.is-warning .subtitle strong{color:rgba(0,0,0,0.5)}.hero.is-warning .header .container{box-shadow:0 1px 0 rgba(0,0,0,0.2)}.hero.is-warning .header-icon,.hero.is-warning .header-item>a:not(.button){color:rgba(0,0,0,0.5);opacity:.5}.hero.is-warning .header-icon:hover,.hero.is-warning .header-icon.is-active,.hero.is-warning .header-item>a:not(.button):hover,.hero.is-warning .header-item>a:not(.button).is-active{opacity:1}.hero.is-warning .tabs a{color:rgba(0,0,0,0.5);opacity:.5}.hero.is-warning .tabs a:hover{opacity:1}.hero.is-warning .tabs li.is-active a{opacity:1}.hero.is-warning .tabs.is-boxed a{color:rgba(0,0,0,0.5)}.hero.is-warning .tabs.is-boxed a:hover{background:rgba(0,0,0,0.1)}.hero.is-warning .tabs.is-boxed li.is-active a,.hero.is-warning .tabs.is-boxed li.is-active a:hover{background:rgba(0,0,0,0.5);color:#fce473}.hero.is-warning.is-bold{background-image:linear-gradient(141deg, #ffbd3d 0%, #fce473 71%, #fffe8a 100%)}@media screen and (max-width: 768px){.hero.is-warning .header-toggle span{background:rgba(0,0,0,0.5)}.hero.is-warning .header-toggle:hover{background:rgba(0,0,0,0.1)}.hero.is-warning .header-toggle.is-active span{background:rgba(0,0,0,0.5)}.hero.is-warning .header-menu{background:#fce473}.hero.is-warning .header-menu .header-item{border-top-color:rgba(0,0,0,0.2)}}.hero.is-danger{background:#ed6c63;color:#fff}.hero.is-danger .title{color:#fff}.hero.is-danger .title strong{color:inherit}.hero.is-danger .subtitle{color:rgba(255,255,255,0.7)}.hero.is-danger .subtitle strong{color:#fff}.hero.is-danger .header .container{box-shadow:0 1px 0 rgba(255,255,255,0.2)}.hero.is-danger .header-icon,.hero.is-danger .header-item>a:not(.button){color:#fff;opacity:.5}.hero.is-danger .header-icon:hover,.hero.is-danger .header-icon.is-active,.hero.is-danger .header-item>a:not(.button):hover,.hero.is-danger .header-item>a:not(.button).is-active{opacity:1}.hero.is-danger .tabs a{color:#fff;opacity:.5}.hero.is-danger .tabs a:hover{opacity:1}.hero.is-danger .tabs li.is-active a{opacity:1}.hero.is-danger .tabs.is-boxed a{color:#fff}.hero.is-danger .tabs.is-boxed a:hover{background:rgba(0,0,0,0.1)}.hero.is-danger .tabs.is-boxed li.is-active a,.hero.is-danger .tabs.is-boxed li.is-active a:hover{background:#fff;color:#ed6c63}.hero.is-danger.is-bold{background-image:linear-gradient(141deg, #f32a3e 0%, #ed6c63 71%, #f39376 100%)}@media screen and (max-width: 768px){.hero.is-danger .header-toggle span{background:#fff}.hero.is-danger .header-toggle:hover{background:rgba(0,0,0,0.1)}.hero.is-danger .header-toggle.is-active span{background:#fff}.hero.is-danger .header-menu{background:#ed6c63}.hero.is-danger .header-menu .header-item{border-top-color:rgba(255,255,255,0.2)}}@media screen and (min-width: 769px){.hero.is-fullheight .title,.hero.is-medium .title,.hero.is-large .title{font-size:48px}.hero.is-fullheight .subtitle,.hero.is-medium .subtitle,.hero.is-large .subtitle{font-size:28px}.hero.is-fullheight .tabs,.hero.is-medium .tabs,.hero.is-large .tabs{font-size:18px}.hero.is-fullheight .tabs a,.hero.is-medium .tabs a,.hero.is-large .tabs a{padding-bottom:15px}.hero.is-fullheight .tabs.is-boxed a,.hero.is-medium .tabs.is-boxed a,.hero.is-large .tabs.is-boxed a{padding:12px 16px}}.hero.is-fullheight{align-items:center;display:flex;height:100vh}.hero.is-fullheight .tabs{white-space:normal}@media screen and (min-width: 769px){.hero.is-medium>.container{padding:120px 20px}.hero.is-medium .title{font-size:40px}.hero.is-medium .subtitle{font-size:24px}.hero.is-medium .tabs{font-size:16px}}@media screen and (min-width: 980px){.hero.is-medium>.container{padding:120px 0}}@media screen and (min-width: 769px){.hero.is-large>.container{padding:240px 20px}}@media screen and (min-width: 980px){.hero.is-large>.container{padding:240px 0}}.hero.is-left{text-align:left}.hero.is-right{text-align:right}.hero-buttons{margin-top:20px}@media screen and (max-width: 768px){.hero-buttons .button{display:block}.hero-buttons .button:not(:last-child){margin-bottom:10px}}@media screen and (min-width: 769px){.hero-buttons{display:flex;justify-content:center}.hero-buttons .button:not(:last-child){margin-right:20px}}.section{background:#fff;padding:40px 20px}.section+.section{border-top:1px solid rgba(211,214,219,0.5)}@media screen and (min-width: 980px){.section{padding:40px 0}.section.is-medium{padding:120px 0}.section.is-large{padding:240px 0}}.footer{background:#f5f7fa;padding:40px 20px 80px}.footer a{color:#69707a}.footer a:hover{color:#222324}.footer a:not(.icon){border-bottom:1px solid #d3d6db}.footer a:not(.icon):hover{border-bottom-color:#1fc8db}