From 5384d1531f4787466da57d0035452566fd0fdd75 Mon Sep 17 00:00:00 2001 From: jgthms Date: Sun, 24 Jan 2016 00:03:43 +0000 Subject: [PATCH] Init --- .gitignore | 2 + LICENSE | 21 + README.md | 7 + bulma.sass | 9 + bulma/base/base.sass | 6 + bulma/base/content.sass | 51 + bulma/base/generic.sass | 101 + bulma/base/helpers.sass | 27 + bulma/base/highlight.sass | 123 + bulma/components/card.sass | 36 + bulma/components/components.sass | 11 + bulma/components/grid.sass | 48 + bulma/components/media.sass | 69 + bulma/components/menu.sass | 25 + bulma/components/navbar.sass | 45 + bulma/components/table.sass | 73 + bulma/components/tabs.sass | 84 + bulma/config/generated-variables.sass | 74 + bulma/config/variables.sass | 41 + bulma/elements/buttons.sass | 96 + bulma/elements/controls.sass | 213 ++ bulma/elements/elements.sass | 172 ++ bulma/elements/messages.sass | 41 + bulma/elements/notifications.sass | 20 + bulma/elements/titles.sass | 57 + bulma/layout/footer.sass | 11 + bulma/layout/header.sass | 149 ++ bulma/layout/hero.sass | 143 ++ bulma/layout/layout.sass | 6 + bulma/layout/section.sass | 11 + bulma/utilities/animations.sass | 5 + bulma/utilities/functions.sass | 34 + bulma/utilities/mixins.sass | 83 + bulma/utilities/reset.sass | 174 ++ bulma/utilities/utilities.sass | 6 + css/bulma.css | 2954 +++++++++++++++++++++++++ css/bulma.min.css | 1 + 37 files changed, 5029 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 bulma.sass create mode 100644 bulma/base/base.sass create mode 100644 bulma/base/content.sass create mode 100644 bulma/base/generic.sass create mode 100644 bulma/base/helpers.sass create mode 100644 bulma/base/highlight.sass create mode 100644 bulma/components/card.sass create mode 100644 bulma/components/components.sass create mode 100644 bulma/components/grid.sass create mode 100644 bulma/components/media.sass create mode 100644 bulma/components/menu.sass create mode 100644 bulma/components/navbar.sass create mode 100644 bulma/components/table.sass create mode 100644 bulma/components/tabs.sass create mode 100644 bulma/config/generated-variables.sass create mode 100644 bulma/config/variables.sass create mode 100644 bulma/elements/buttons.sass create mode 100644 bulma/elements/controls.sass create mode 100644 bulma/elements/elements.sass create mode 100644 bulma/elements/messages.sass create mode 100644 bulma/elements/notifications.sass create mode 100644 bulma/elements/titles.sass create mode 100644 bulma/layout/footer.sass create mode 100644 bulma/layout/header.sass create mode 100644 bulma/layout/hero.sass create mode 100644 bulma/layout/layout.sass create mode 100644 bulma/layout/section.sass create mode 100644 bulma/utilities/animations.sass create mode 100644 bulma/utilities/functions.sass create mode 100644 bulma/utilities/mixins.sass create mode 100644 bulma/utilities/reset.sass create mode 100644 bulma/utilities/utilities.sass create mode 100644 css/bulma.css create mode 100644 css/bulma.min.css 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}