bea-ui/styleguide/css/core.css

React component library

body, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, dl, dd, ol, ul, form, fieldset, legend,
figure, table, th, td, caption, hr {
  margin: 0;
  padding: 0; }

h1, h2, h3 {
  font-weight: inherit; }

body {
  font-weight: normal; }

@keyframes spinAround {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }

.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  box-shadow: none;
  display: inline-flex;
  font-size: 1rem;
  height: 2.25em;
  justify-content: flex-start;
  line-height: 1.5;
  padding-bottom: calc(0.375em - 1px);
  padding-left: calc(0.625em - 1px);
  padding-right: calc(0.625em - 1px);
  padding-top: calc(0.375em - 1px);
  position: relative;
  vertical-align: top;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: white;
  border-color: #dbdbdb;
  color: #363636;
  cursor: pointer;
  justify-content: center;
  padding-left: 0.75em;
  padding-right: 0.75em;
  text-align: center;
  white-space: nowrap; }

.button:focus, .button.is-focused, .button:active, .button.is-active {
  outline: none; }

.button[disabled] {
  cursor: not-allowed; }

.button strong {
  color: inherit; }

.button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large {
  height: 1.5em;
  width: 1.5em; }

.button .icon:first-child:not(:last-child) {
  margin-left: calc(-0.375em - 1px);
  margin-right: 0.1875em; }

.button .icon:last-child:not(:first-child) {
  margin-left: 0.1875em;
  margin-right: calc(-0.375em - 1px); }

.button .icon:first-child:last-child {
  margin-left: calc(-0.375em - 1px);
  margin-right: calc(-0.375em - 1px); }

.button:hover, .button.is-hovered {
  border-color: #b5b5b5;
  color: #363636; }

.button:focus, .button.is-focused {
  border-color: #3273dc;
  color: #363636; }

.button:focus:not(:active), .button.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }

.button:active, .button.is-active {
  border-color: #4a4a4a;
  color: #363636; }

.button.is-text {
  background-color: transparent;
  border-color: transparent;
  color: #4a4a4a;
  text-decoration: underline; }

.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
  background-color: whitesmoke;
  color: #363636; }

.button.is-text:active, .button.is-text.is-active {
  background-color: #e8e8e8;
  color: #363636; }

.button.is-text[disabled] {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none; }

.button.is-white {
  background-color: white;
  border-color: transparent;
  color: #0a0a0a; }

.button.is-white:hover, .button.is-white.is-hovered {
  background-color: #f9f9f9;
  border-color: transparent;
  color: #0a0a0a; }

.button.is-white:focus, .button.is-white.is-focused {
  border-color: transparent;
  color: #0a0a0a; }

.button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25); }

.button.is-white:active, .button.is-white.is-active {
  background-color: #f2f2f2;
  border-color: transparent;
  color: #0a0a0a; }

.button.is-white[disabled] {
  background-color: white;
  border-color: transparent;
  box-shadow: none; }

.button.is-white.is-inverted {
  background-color: #0a0a0a;
  color: white; }

.button.is-white.is-inverted:hover {
  background-color: black; }

.button.is-white.is-inverted[disabled] {
  background-color: #0a0a0a;
  border-color: transparent;
  box-shadow: none;
  color: white; }

.button.is-white.is-loading:after {
  border-color: transparent transparent #0a0a0a #0a0a0a !important; }

.button.is-white.is-outlined {
  background-color: transparent;
  border-color: white;
  color: white; }

.button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus {
  background-color: white;
  border-color: white;
  color: #0a0a0a; }

.button.is-white.is-outlined.is-loading:after {
  border-color: transparent transparent white white !important; }

.button.is-white.is-outlined[disabled] {
  background-color: transparent;
  border-color: white;
  box-shadow: none;
  color: white; }

.button.is-white.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #0a0a0a;
  color: #0a0a0a; }

.button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined:focus {
  background-color: #0a0a0a;
  color: white; }

.button.is-white.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #0a0a0a;
  box-shadow: none;
  color: #0a0a0a; }

.button.is-black {
  background-color: #0a0a0a;
  border-color: transparent;
  color: white; }

.button.is-black:hover, .button.is-black.is-hovered {
  background-color: #040404;
  border-color: transparent;
  color: white; }

.button.is-black:focus, .button.is-black.is-focused {
  border-color: transparent;
  color: white; }

.button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(10, 10, 10, 0.25); }

.button.is-black:active, .button.is-black.is-active {
  background-color: black;
  border-color: transparent;
  color: white; }

.button.is-black[disabled] {
  background-color: #0a0a0a;
  border-color: transparent;
  box-shadow: none; }

.button.is-black.is-inverted {
  background-color: white;
  color: #0a0a0a; }

.button.is-black.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-black.is-inverted[disabled] {
  background-color: white;
  border-color: transparent;
  box-shadow: none;
  color: #0a0a0a; }

.button.is-black.is-loading:after {
  border-color: transparent transparent white white !important; }

.button.is-black.is-outlined {
  background-color: transparent;
  border-color: #0a0a0a;
  color: #0a0a0a; }

.button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus {
  background-color: #0a0a0a;
  border-color: #0a0a0a;
  color: white; }

.button.is-black.is-outlined.is-loading:after {
  border-color: transparent transparent #0a0a0a #0a0a0a !important; }

.button.is-black.is-outlined[disabled] {
  background-color: transparent;
  border-color: #0a0a0a;
  box-shadow: none;
  color: #0a0a0a; }

.button.is-black.is-inverted.is-outlined {
  background-color: transparent;
  border-color: white;
  color: white; }

.button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined:focus {
  background-color: white;
  color: #0a0a0a; }

.button.is-black.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: white;
  box-shadow: none;
  color: white; }

.button.is-light {
  background-color: whitesmoke;
  border-color: transparent;
  color: #363636; }

.button.is-light:hover, .button.is-light.is-hovered {
  background-color: #eeeeee;
  border-color: transparent;
  color: #363636; }

.button.is-light:focus, .button.is-light.is-focused {
  border-color: transparent;
  color: #363636; }

.button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(245, 245, 245, 0.25); }

.button.is-light:active, .button.is-light.is-active {
  background-color: #e8e8e8;
  border-color: transparent;
  color: #363636; }

.button.is-light[disabled] {
  background-color: whitesmoke;
  border-color: transparent;
  box-shadow: none; }

.button.is-light.is-inverted {
  background-color: #363636;
  color: whitesmoke; }

.button.is-light.is-inverted:hover {
  background-color: #292929; }

.button.is-light.is-inverted[disabled] {
  background-color: #363636;
  border-color: transparent;
  box-shadow: none;
  color: whitesmoke; }

.button.is-light.is-loading:after {
  border-color: transparent transparent #363636 #363636 !important; }

.button.is-light.is-outlined {
  background-color: transparent;
  border-color: whitesmoke;
  color: whitesmoke; }

.button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus {
  background-color: whitesmoke;
  border-color: whitesmoke;
  color: #363636; }

.button.is-light.is-outlined.is-loading:after {
  border-color: transparent transparent whitesmoke whitesmoke !important; }

.button.is-light.is-outlined[disabled] {
  background-color: transparent;
  border-color: whitesmoke;
  box-shadow: none;
  color: whitesmoke; }

.button.is-light.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #363636;
  color: #363636; }

.button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined:focus {
  background-color: #363636;
  color: whitesmoke; }

.button.is-light.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #363636;
  box-shadow: none;
  color: #363636; }

.button.is-dark {
  background-color: #363636;
  border-color: transparent;
  color: whitesmoke; }

.button.is-dark:hover, .button.is-dark.is-hovered {
  background-color: #2f2f2f;
  border-color: transparent;
  color: whitesmoke; }

.button.is-dark:focus, .button.is-dark.is-focused {
  border-color: transparent;
  color: whitesmoke; }

.button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); }

.button.is-dark:active, .button.is-dark.is-active {
  background-color: #292929;
  border-color: transparent;
  color: whitesmoke; }

.button.is-dark[disabled] {
  background-color: #363636;
  border-color: transparent;
  box-shadow: none; }

.button.is-dark.is-inverted {
  background-color: whitesmoke;
  color: #363636; }

.button.is-dark.is-inverted:hover {
  background-color: #e8e8e8; }

.button.is-dark.is-inverted[disabled] {
  background-color: whitesmoke;
  border-color: transparent;
  box-shadow: none;
  color: #363636; }

.button.is-dark.is-loading:after {
  border-color: transparent transparent whitesmoke whitesmoke !important; }

.button.is-dark.is-outlined {
  background-color: transparent;
  border-color: #363636;
  color: #363636; }

.button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus {
  background-color: #363636;
  border-color: #363636;
  color: whitesmoke; }

.button.is-dark.is-outlined.is-loading:after {
  border-color: transparent transparent #363636 #363636 !important; }

.button.is-dark.is-outlined[disabled] {
  background-color: transparent;
  border-color: #363636;
  box-shadow: none;
  color: #363636; }

.button.is-dark.is-inverted.is-outlined {
  background-color: transparent;
  border-color: whitesmoke;
  color: whitesmoke; }

.button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined:focus {
  background-color: whitesmoke;
  color: #363636; }

.button.is-dark.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: whitesmoke;
  box-shadow: none;
  color: whitesmoke; }

.button.is-primary {
  background-color: #00d1b2;
  border-color: transparent;
  color: #fff; }

.button.is-primary:hover, .button.is-primary.is-hovered {
  background-color: #00c4a7;
  border-color: transparent;
  color: #fff; }

.button.is-primary:focus, .button.is-primary.is-focused {
  border-color: transparent;
  color: #fff; }

.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); }

.button.is-primary:active, .button.is-primary.is-active {
  background-color: #00b89c;
  border-color: transparent;
  color: #fff; }

.button.is-primary[disabled] {
  background-color: #00d1b2;
  border-color: transparent;
  box-shadow: none; }

.button.is-primary.is-inverted {
  background-color: #fff;
  color: #00d1b2; }

.button.is-primary.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-primary.is-inverted[disabled] {
  background-color: #fff;
  border-color: transparent;
  box-shadow: none;
  color: #00d1b2; }

.button.is-primary.is-loading:after {
  border-color: transparent transparent #fff #fff !important; }

.button.is-primary.is-outlined {
  background-color: transparent;
  border-color: #00d1b2;
  color: #00d1b2; }

.button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus {
  background-color: #00d1b2;
  border-color: #00d1b2;
  color: #fff; }

.button.is-primary.is-outlined.is-loading:after {
  border-color: transparent transparent #00d1b2 #00d1b2 !important; }

.button.is-primary.is-outlined[disabled] {
  background-color: transparent;
  border-color: #00d1b2;
  box-shadow: none;
  color: #00d1b2; }

.button.is-primary.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus {
  background-color: #fff;
  color: #00d1b2; }

.button.is-primary.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff; }

.button.is-link {
  background-color: #3273dc;
  border-color: transparent;
  color: #fff; }

.button.is-link:hover, .button.is-link.is-hovered {
  background-color: #276cda;
  border-color: transparent;
  color: #fff; }

.button.is-link:focus, .button.is-link.is-focused {
  border-color: transparent;
  color: #fff; }

.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); }

.button.is-link:active, .button.is-link.is-active {
  background-color: #2366d1;
  border-color: transparent;
  color: #fff; }

.button.is-link[disabled] {
  background-color: #3273dc;
  border-color: transparent;
  box-shadow: none; }

.button.is-link.is-inverted {
  background-color: #fff;
  color: #3273dc; }

.button.is-link.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-link.is-inverted[disabled] {
  background-color: #fff;
  border-color: transparent;
  box-shadow: none;
  color: #3273dc; }

.button.is-link.is-loading:after {
  border-color: transparent transparent #fff #fff !important; }

.button.is-link.is-outlined {
  background-color: transparent;
  border-color: #3273dc;
  color: #3273dc; }

.button.is-link.is-outlined:hover, .button.is-link.is-outlined:focus {
  background-color: #3273dc;
  border-color: #3273dc;
  color: #fff; }

.button.is-link.is-outlined.is-loading:after {
  border-color: transparent transparent #3273dc #3273dc !important; }

.button.is-link.is-outlined[disabled] {
  background-color: transparent;
  border-color: #3273dc;
  box-shadow: none;
  color: #3273dc; }

.button.is-link.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined:focus {
  background-color: #fff;
  color: #3273dc; }

.button.is-link.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff; }

.button.is-info {
  background-color: #209cee;
  border-color: transparent;
  color: #fff; }

.button.is-info:hover, .button.is-info.is-hovered {
  background-color: #1496ed;
  border-color: transparent;
  color: #fff; }

.button.is-info:focus, .button.is-info.is-focused {
  border-color: transparent;
  color: #fff; }

.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25); }

.button.is-info:active, .button.is-info.is-active {
  background-color: #118fe4;
  border-color: transparent;
  color: #fff; }

.button.is-info[disabled] {
  background-color: #209cee;
  border-color: transparent;
  box-shadow: none; }

.button.is-info.is-inverted {
  background-color: #fff;
  color: #209cee; }

.button.is-info.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-info.is-inverted[disabled] {
  background-color: #fff;
  border-color: transparent;
  box-shadow: none;
  color: #209cee; }

.button.is-info.is-loading:after {
  border-color: transparent transparent #fff #fff !important; }

.button.is-info.is-outlined {
  background-color: transparent;
  border-color: #209cee;
  color: #209cee; }

.button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus {
  background-color: #209cee;
  border-color: #209cee;
  color: #fff; }

.button.is-info.is-outlined.is-loading:after {
  border-color: transparent transparent #209cee #209cee !important; }

.button.is-info.is-outlined[disabled] {
  background-color: transparent;
  border-color: #209cee;
  box-shadow: none;
  color: #209cee; }

.button.is-info.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus {
  background-color: #fff;
  color: #209cee; }

.button.is-info.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff; }

.button.is-success {
  background-color: #23d160;
  border-color: transparent;
  color: #fff; }

.button.is-success:hover, .button.is-success.is-hovered {
  background-color: #22c65b;
  border-color: transparent;
  color: #fff; }

.button.is-success:focus, .button.is-success.is-focused {
  border-color: transparent;
  color: #fff; }

.button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25); }

.button.is-success:active, .button.is-success.is-active {
  background-color: #20bc56;
  border-color: transparent;
  color: #fff; }

.button.is-success[disabled] {
  background-color: #23d160;
  border-color: transparent;
  box-shadow: none; }

.button.is-success.is-inverted {
  background-color: #fff;
  color: #23d160; }

.button.is-success.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-success.is-inverted[disabled] {
  background-color: #fff;
  border-color: transparent;
  box-shadow: none;
  color: #23d160; }

.button.is-success.is-loading:after {
  border-color: transparent transparent #fff #fff !important; }

.button.is-success.is-outlined {
  background-color: transparent;
  border-color: #23d160;
  color: #23d160; }

.button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus {
  background-color: #23d160;
  border-color: #23d160;
  color: #fff; }

.button.is-success.is-outlined.is-loading:after {
  border-color: transparent transparent #23d160 #23d160 !important; }

.button.is-success.is-outlined[disabled] {
  background-color: transparent;
  border-color: #23d160;
  box-shadow: none;
  color: #23d160; }

.button.is-success.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined:focus {
  background-color: #fff;
  color: #23d160; }

.button.is-success.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff; }

.button.is-warning {
  background-color: #ffdd57;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning:hover, .button.is-warning.is-hovered {
  background-color: #ffdb4a;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning:focus, .button.is-warning.is-focused {
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); }

.button.is-warning:active, .button.is-warning.is-active {
  background-color: #ffd83d;
  border-color: transparent;
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning[disabled] {
  background-color: #ffdd57;
  border-color: transparent;
  box-shadow: none; }

.button.is-warning.is-inverted {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffdd57; }

.button.is-warning.is-inverted:hover {
  background-color: rgba(0, 0, 0, 0.7); }

.button.is-warning.is-inverted[disabled] {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: transparent;
  box-shadow: none;
  color: #ffdd57; }

.button.is-warning.is-loading:after {
  border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; }

.button.is-warning.is-outlined {
  background-color: transparent;
  border-color: #ffdd57;
  color: #ffdd57; }

.button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus {
  background-color: #ffdd57;
  border-color: #ffdd57;
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning.is-outlined.is-loading:after {
  border-color: transparent transparent #ffdd57 #ffdd57 !important; }

.button.is-warning.is-outlined[disabled] {
  background-color: transparent;
  border-color: #ffdd57;
  box-shadow: none;
  color: #ffdd57; }

.button.is-warning.is-inverted.is-outlined {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.7);
  color: rgba(0, 0, 0, 0.7); }

.button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined:focus {
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffdd57; }

.button.is-warning.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.7);
  box-shadow: none;
  color: rgba(0, 0, 0, 0.7); }

.button.is-danger {
  background-color: #ff3860;
  border-color: transparent;
  color: #fff; }

.button.is-danger:hover, .button.is-danger.is-hovered {
  background-color: #ff2b56;
  border-color: transparent;
  color: #fff; }

.button.is-danger:focus, .button.is-danger.is-focused {
  border-color: transparent;
  color: #fff; }

.button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
  box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }

.button.is-danger:active, .button.is-danger.is-active {
  background-color: #ff1f4b;
  border-color: transparent;
  color: #fff; }

.button.is-danger[disabled] {
  background-color: #ff3860;
  border-color: transparent;
  box-shadow: none; }

.button.is-danger.is-inverted {
  background-color: #fff;
  color: #ff3860; }

.button.is-danger.is-inverted:hover {
  background-color: #f2f2f2; }

.button.is-danger.is-inverted[disabled] {
  background-color: #fff;
  border-color: transparent;
  box-shadow: none;
  color: #ff3860; }

.button.is-danger.is-loading:after {
  border-color: transparent transparent #fff #fff !important; }

.button.is-danger.is-outlined {
  background-color: transparent;
  border-color: #ff3860;
  color: #ff3860; }

.button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus {
  background-color: #ff3860;
  border-color: #ff3860;
  color: #fff; }

.button.is-danger.is-outlined.is-loading:after {
  border-color: transparent transparent #ff3860 #ff3860 !important; }

.button.is-danger.is-outlined[disabled] {
  background-color: transparent;
  border-color: #ff3860;
  box-shadow: none;
  color: #ff3860; }

.button.is-danger.is-inverted.is-outlined {
  background-color: transparent;
  border-color: #fff;
  color: #fff; }

.button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus {
  background-color: #fff;
  color: #ff3860; }

.button.is-danger.is-inverted.is-outlined[disabled] {
  background-color: transparent;
  border-color: #fff;
  box-shadow: none;
  color: #fff; }

.button.is-small {
  border-radius: 2px;
  font-size: 0.75rem; }

.button.is-medium {
  font-size: 1.25rem; }

.button.is-large {
  font-size: 1.5rem; }

.button[disabled] {
  background-color: white;
  border-color: #dbdbdb;
  box-shadow: none;
  opacity: 0.5; }

.button.is-fullwidth {
  display: flex;
  width: 100%; }

.button.is-loading {
  color: transparent !important;
  pointer-events: none; }

.button.is-loading:after {
  animation: spinAround 500ms infinite linear;
  border: 2px solid #dbdbdb;
  border-radius: 290486px;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
  position: absolute;
  left: calc(50% - (1em / 2));
  top: calc(50% - (1em / 2));
  position: absolute !important; }

.button.is-static {
  background-color: whitesmoke;
  border-color: #dbdbdb;
  color: #7a7a7a;
  box-shadow: none;
  pointer-events: none; }

.button.is-rounded {
  border-radius: 290486px;
  padding-left: 1em;
  padding-right: 1em; }

.buttons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; }

.buttons .button {
  margin-bottom: 0.5rem; }

.buttons .button:not(:last-child) {
  margin-right: 0.5rem; }

.buttons:last-child {
  margin-bottom: -0.5rem; }

.buttons:not(:last-child) {
  margin-bottom: 1rem; }

.buttons.has-addons .button:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0; }

.buttons.has-addons .button:not(:last-child) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: -1px; }

.buttons.has-addons .button:last-child {
  margin-right: 0; }

.buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered {
  z-index: 2; }

.buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected {
  z-index: 3; }

.buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover {
  z-index: 4; }

.buttons.is-centered {
  justify-content: center; }

.buttons.is-right {
  justify-content: flex-end; }

.title,
.subtitle {
  word-break: break-word; }

.title:not(:last-child),
.subtitle:not(:last-child) {
  margin-bottom: 1.5rem; }

.title em,
.title span,
.subtitle em,
.subtitle span {
  font-weight: inherit; }

.title sub,
.subtitle sub {
  font-size: 0.75em; }

.title sup,
.subtitle sup {
  font-size: 0.75em; }

.title .tag,
.subtitle .tag {
  vertical-align: middle; }

.title {
  color: #363636;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125; }

.title strong {
  color: inherit;
  font-weight: inherit; }

.title + .highlight {
  margin-top: -0.75rem; }

.title:not(.is-spaced) + .subtitle {
  margin-top: -1.5rem; }

.title.is-1 {
  font-size: 3rem; }

.title.is-2 {
  font-size: 2.5rem; }

.title.is-3 {
  font-size: 2rem; }

.title.is-4 {
  font-size: 1.5rem; }

.title.is-5 {
  font-size: 1.25rem; }

.title.is-6 {
  font-size: 1rem; }

.title.is-7 {
  font-size: 0.75rem; }

.subtitle {
  color: #4a4a4a;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25; }

.subtitle strong {
  color: #363636;
  font-weight: 600; }

.subtitle:not(.is-spaced) + .title {
  margin-top: -1.5rem; }

.subtitle.is-1 {
  font-size: 3rem; }

.subtitle.is-2 {
  font-size: 2.5rem; }

.subtitle.is-3 {
  font-size: 2rem; }

.subtitle.is-4 {
  font-size: 1.5rem; }

.subtitle.is-5 {
  font-size: 1.25rem; }

.subtitle.is-6 {
  font-size: 1rem; }

.subtitle.is-7 {
  font-size: 0.75rem; }

/*------------------------------------*  # COLOUR PALETTE
\*------------------------------------*/
/*------------------------------------*  1. COLOUR DEFINITIONS
 \*------------------------------------*/
/*------------------------------------*  2. COLOUR IMPLEMENTATIONS
 \*------------------------------------*/
/*------------------------------------*  # DEPRECATED - DO NOT ADD TO THIS LIST!
 \*------------------------------------*/
.cap-u-circle {
  border-radius: 50%; }

.cap-u-reith-light {
  font-weight: 300 !important; }

.cap-u-antialiased {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important; }

.cap-u-truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; }

@media (min-width: 56.25em) {
  .cap-u-truncate--expand\@l {
    white-space: normal !important; } }

.bea-sg-nav .button {
  margin: 0 8px 8px 0; }

.cap-u-flex-nowrap {
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important; }

/*------------------------------------*    # ISLAND
\*------------------------------------*/
/**
 * The island will isolate items to be positioned absolutely
 * and can be positioned to any corner using the modifiers.
 *
 *  <div class="cap-o-island">
 *      <div class="cap-o-island__point">
 *          [this is absolute positioned to the top left]
 *      </div>
 *  </div>
 *
 */
.cap-o-island {
  position: relative; }

.cap-o-island__point {
  position: absolute; }

.cap-o-island__point--br {
  bottom: 0;
  right: 0; }

.cap-o-island__point--tr {
  top: 0;
  right: 0; }

.cap-o-island__point--center {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0; }

/*------------------------------------*    # LINK
\*------------------------------------*/
/*
All links should use both classes below. How you use them depends
on the use case as described below.

[1] 'cap-o-link'
Used on all links to remove the text underline decoration.

[2] 'cap-o-link__text'
Applied to text within a link to apply color and transitions.

When using a single link item, apply both styles to the same element. E.g.

<a class="cap-o-link cap-o-link__text">
    Index Also title
</a>

When using a block link item, apply .cap-o-link to the anchor tag,
and the .cap-o-link__text to text items within the link block. E.g.

<a class="cap-o-link">
    <h3 class="cap-o-link__text">
        Heading
    </h3>
</a>
*/
/*
  - Primary link
  A primary link is used to signify an action that DOES
  affect or control "play". For example, listen to a programme.
*/
/*[1]*/
.cap-o-link {
  text-decoration: none; }

/*[2]*/
.cap-o-link__text {
  -moz-transition-property: color 0.5s ease;
  -o-transition-property: color 0.5s ease;
  -webkit-transition-property: color 0.5s ease;
  transition: color 0.5s ease;
  color: #ffffff; }

/*
  cap-o-link active and hover states
  Built to support same-level nesting as per
  the first use case
*/
.cap-o-link:visited.cap-o-link__text,
.cap-o-link:visited .cap-o-link__text {
  color: #ffffff; }

.cap-o-link:hover.cap-o-link__text,
.cap-o-link:hover .cap-o-link__text,
.cap-o-link:focus.cap-o-link__text,
.cap-o-link:focus .cap-o-link__text {
  color: #f54997;
  text-decoration: none; }

/*
  - Secondary link
  A secondary link is used to signify an action that DOESN'T
  affect or control "play". For example, an external link.
*/
.cap-o-link--secondary:hover.cap-o-link__text,
.cap-o-link--secondary:hover .cap-o-link__text,
.cap-o-link--secondary:focus.cap-o-link__text,
.cap-o-link--secondary:focus .cap-o-link__text {
  color: #E0E1E2;
  text-decoration: underline; }

/*------------------------------------*    # PIPED
|*------------------------------------*/
/*
* The `piped` pattern adds a pipe (small line) in between list items
* (e.g. item | item ) with the appropriate spacing.
* It will not add a pipe or spacing to the last item / a single item.
*
* Note: We are using a last-child/border right pattern as pipes should always
* couple with content to their left when wrapping.
*
* EXAMPLE IMPLEMENTATION
* <ul className="cap-o-piped">
*   <li className="gs-u-display-inline">text</li>
*   <li className="gs-u-display-inline">text</li>
* </ul>
*/
.cap-o-piped li:last-child {
  border-right: 0;
  padding-right: 0;
  margin-right: 0; }

.cap-o-piped li {
  border-right: 1px solid #ffffff;
  padding-right: 8px;
  margin-right: 8px; }

/*------------------------------------*    # RESPONSIVE IMAGE
\*------------------------------------*/
/** From Grandstand: https://github.com/bbc/grandstand/blob/master/lib/objects/_responsive-image.scss
 *
 * We are not using the Grandstand supplied responsive image as we have a specific placeholder
 * image that we need to use and Grandstand does not offer this extensibility.
 * Additionally, we have some modifiers which are not available in Grandstand.
 *
**/
/**
 * The responsive image pattern automatically reserves the space
 * needed for an image to be inserted, additionally you can add some modifiers
 * or an image overlay if needed.
 *
    <div class="cap-o-responsive-image [ cap-o-responsive-image--1by1 | cap-o-responsive-image--16by9 ]">
        <img src="..." class="cap-o-responsive-image__img" />
        <div class="cap-o-responsive-image__overlay">...</div>
    </div>
 *
 * 1. Setting the height to zero collapses the div so we don't
 *    need to absolutly position the image
 * 2. Stop images 1px difference between the reserved space
 *    and the actual image from showing
 */
.cap-o-responsive-image {
  position: relative;
  height: 0;
  /* [1] */
  overflow: hidden;
  /* [2] */
  background-color: #2E3542;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjcgNzU2Ij4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTM4My42MTQgMTcxLjQwM3YtMzUuMmMxMzUuODggMCAyNDYuNDEyIDExMC41MzIgMjQ2LjQxMiAyNDYuNDFoLTM1LjIwMmMwLTExNi40NjQtOTQuNzQ1LTIxMS4yMS0yMTEuMjEtMjExLjIxem0xNDAuODA3IDIxMS4yMWMwLTc3LjYzNi02My4xNy0xNDAuODA2LTE0MC44MDYtMTQwLjgwNnYtMzUuMjAyYzk3LjA1IDAgMTc2LjAxIDc4Ljk1OCAxNzYuMDEgMTc2LjAxSDUyNC40MnpNMzgzLjYxNSA0ODguMjJjLTU4LjMzIDAtMTA1LjYwNS00Ny4yNzctMTA1LjYwNS0xMDUuNjA2IDAtNTguMzMgNDcuMjc1LTEwNS42MDUgMTA1LjYwNC0xMDUuNjA1IDU4LjMzIDAgMTA1LjYwNSA0Ny4yNzUgMTA1LjYwNSAxMDUuNjA0IDAgNTguMzMtNDcuMjc3IDEwNS42MDUtMTA1LjYwNiAxMDUuNjA1em0wLTM4Ny4yMkMyMjguMDc0IDEwMSAxMDIgMjI3LjA3NSAxMDIgMzgyLjYxNGMwIDE1NS41NCAxMjYuMDc1IDI4MS42MTQgMjgxLjYxNCAyODEuNjE0IDE1NS41NCAwIDI4MS42MTQtMTI2LjA3NSAyODEuNjE0LTI4MS42MTRDNjY1LjIyOCAyMjcuMDc0IDUzOS4xNTMgMTAxIDM4My42MTQgMTAxeiIgZmlsbD0iI0ZGRiIgb3BhY2l0eT0iLjIiLz4gICAgICAgICAgICA8L3N2Zz4=");
  background-repeat: no-repeat;
  /**
     * 1. Force the image to sit on top of the placeholder
     * 2. Force the image to fill the available space
     *
     * The exact combination of [1] and [2] is needed to stop the
     * image from being 1px too short, the root cause of which is
     * down to the browser's rendering of sub-pixels
     */ }

.cap-o-responsive-image img {
  position: absolute;
  /* [1] */
  width: 100%;
  /* [2] */
  height: 100%;
  /* [2] */ }

/**
 * A full overlay that covers the image,
 * mostly used for hover effects
 */
.cap-o-responsive-image__overlay {
  height: 100%;
  position: absolute;
  width: 100%;
  -moz-transition-property: background 0.5s ease;
  -o-transition-property: background 0.5s ease;
  -webkit-transition-property: background 0.5s ease;
  transition: background 0.5s ease; }

/**
 * A SVG that sits within the overlay above
 */
.cap-o-responsive-image__svg {
  -moz-transition-property: opacity 0.5s ease;
  -o-transition-property: opacity 0.5s ease;
  -webkit-transition-property: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  bottom: 0;
  left: 0;
  margin: auto;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0; }

/**
 * Removes the default placeholder styles
 * for background-color and background-image
 */
.cap-o-responsive-image--no-placeholder {
  background-color: transparent;
  background-image: none; }

/**
* Image shape modifiers
*/
.cap-o-responsive-image--round .cap-o-responsive-image__img,
.cap-o-responsive-image--round .cap-o-responsive-image__overlay {
  border-radius: 50%; }

/**
 * Aspect radio modifiers
 */
.cap-o-responsive-image--1by1 {
  padding-bottom: 100%; }

.cap-o-responsive-image--16by9 {
  padding-bottom: 56.25%; }

/*------------------------------------*    # SCROLLABLE
|*------------------------------------*/
/*
* The `scrollable` pattern allows you to make a slice horizontally scrollable.
* The <li> MUST carry a CSS width property or it will collapse.
*
* EXAMPLE IMPLEMENTATION
*   <div className="cap-o-scrollable">
*       <ul className="cap-o-scrollable__list">
*           <li>Item</li>
*/
.cap-o-scrollable {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }

.cap-o-scrollable__list {
  white-space: nowrap; }

.cap-o-scrollable__list li {
  display: inline-block;
  white-space: normal; }