* {
  box-sizing: border-box;
}
body,
html,
.grid {
  margin: 0;
  padding: 0;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
.grid > * {
  flex: 1;
}
.grid--columns {
  flex-direction: column;
}
.grid--top {
  align-items: flex-start;
}
.grid--bottom {
  align-items: flex-end;
}
.grid--center {
  align-items: center;
}
.grid--shrink > * {
  flex: 0 1 auto;
}
.grid--full > * {
  flex: 0 0 100%;
}
.grid--half > * {
  flex: 0 0 50%;
}
.grid--third > * {
  flex: 0 0 33.3333%;
}
.grid--quarter > * {
  flex: 0 0 25%;
}
@media (min-width: 24em) {
  .grid-small--fit > * {
    flex: 1;
  }
  .grid-small--full > * {
    flex: 0 0 100%;
  }
  .grid-small--half > * {
    flex: 0 0 50%;
  }
  .grid-small--third > * {
    flex: 0 0 33.3333%;
  }
}
@media (min-width: 48em) {
  .grid-large--fit > * {
    flex: 1;
  }
  .grid-large--full > * {
    flex: 0 0 100%;
  }
  .grid-large--half > * {
    flex: 0 0 50%;
  }
  .grid-large--third > * {
    flex: 0 0 33.3333%;
  }
}
.cell--top {
  align-self: flex-start;
}
.cell--bottom {
  align-self: flex-end;
}
.cell--center {
  align-self: center;
}
.cell--scroll-x {
  height: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cell--scroll-y {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cell--fit {
  flex: 1;
}
.cell--shrink {
  flex: 0 1 auto;
}
.cell--full {
  flex: 0 0 100%;
}
.cell--half {
  flex: 0 0 50%;
}
.cell--third {
  flex: 0 0 33.3333%;
}
.cell--quarter {
  flex: 0 0 25%;
}
.cell--empty {
  flex: 0 0 0px;
}
.metoceanview-selector {
  width: 100%;
}
.metoceanview-selector input {
  width: 100%;
  display: inline-block;
}
.metoceanview-selector .list-container {
  position: relative;
}
.metoceanview-selector ul {
  z-index: 1;
  width: 100%;
  margin-top: 0;
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  position: absolute;
}
.metoceanview-selector li {
  padding-left: 5px;
  padding-right: 5px;
  list-style-type: none;
  text-align: left;
  cursor: pointer;
}
.metoceanview-selector .selected {
  background-color: #9cf;
}
.metoceanview-selector .selector-arrow {
  display: inline-block;
  margin-left: -17px;
  border-style: solid;
  border-width: 5px 5px 2.5px;
  border-color: #999 transparent transparent;
  pointer-events: none;
}
.Select,.Select-control{position:relative}.Select,.Select div,.Select input,.Select span{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.Select.is-disabled>.Select-control{background-color:#f6f6f6}.Select.is-disabled .Select-arrow-zone{cursor:default;pointer-events:none}.Select-control{background-color:#fff;border-radius:4px;border:1px solid #ccc;color:#333;cursor:default;display:table;height:36px;outline:0;overflow:hidden;width:100%}.is-searchable.is-focused:not(.is-open)>.Select-control,.is-searchable.is-open>.Select-control{cursor:text}.Select-placeholder,.Select-value{left:0;position:absolute;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-control:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.is-open>.Select-control{border-bottom-right-radius:0;border-bottom-left-radius:0;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.is-open>.Select-control>.Select-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.is-focused:not(.is-open)>.Select-control{border-color:#08c #0099e6 #0099e6;box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 0 5px -1px rgba(0,136,204,.5)}.Select-placeholder{bottom:0;color:#aaa;line-height:34px;padding-left:10px;padding-right:10px;right:0}.has-value>.Select-control>.Select-placeholder{color:#333}.Select-value{color:#aaa;padding:8px 52px 8px 10px;right:-15px}.Select-arrow-zone,.Select-clear-zone,.Select-loading,.Select-loading-zone{position:relative;vertical-align:middle}.has-value>.Select-control>.Select-value{color:#333}.Select-input{height:34px;padding-left:10px;padding-right:10px;vertical-align:middle}.Select-input>input{background:none;border:0;box-shadow:none;cursor:default;display:inline-block;font-family:inherit;font-size:inherit;height:34px;margin:0;outline:0;padding:0;-webkit-appearance:none}.is-focused .Select-input>input{cursor:text}.Select-control:not(.is-searchable)>.Select-input{outline:0}.Select-loading-zone{cursor:pointer;display:table-cell;text-align:center;width:16px}.Select-loading{-webkit-animation:Select-animation-spin .4s infinite linear;-o-animation:Select-animation-spin .4s infinite linear;animation:Select-animation-spin .4s infinite linear;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #ccc;border-right-color:#333;display:inline-block}.Select-clear-zone{-webkit-animation:Select-animation-fadeIn .2s;-o-animation:Select-animation-fadeIn .2s;animation:Select-animation-fadeIn .2s;color:#999;cursor:pointer;display:table-cell;text-align:center;width:17px}.Select-clear-zone:hover{color:#D0021B}.Select-clear{display:inline-block;font-size:18px;line-height:1}.Select--multi .Select-clear-zone{width:17px}.Select-arrow-zone{cursor:pointer;display:table-cell;text-align:center;width:25px;padding-right:5px}.Select-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px;display:inline-block;height:0;width:0}.Select-arrow-zone:hover>.Select-arrow,.is-open .Select-arrow{border-top-color:#666}@-webkit-keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}@keyframes Select-animation-fadeIn{from{opacity:0}to{opacity:1}}.Select-menu-outer{border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-color:#fff;border:1px solid #ccc;border-top-color:#e6e6e6;box-shadow:0 1px 0 rgba(0,0,0,.06);box-sizing:border-box;margin-top:-1px;max-height:200px;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.Select-menu{max-height:198px;overflow-y:auto}.Select-option{box-sizing:border-box;color:#666;cursor:pointer;display:block;padding:8px 10px}.Select-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.Select-option.is-focused{background-color:#f2f9fc;color:#333}.Select-option.is-disabled{color:#ccc;cursor:not-allowed}.Select-noresults,.Select-search-prompt,.Select-searching{box-sizing:border-box;color:#999;cursor:default;display:block;padding:8px 10px}.Select--multi .Select-input{vertical-align:middle;margin-left:10px;padding:0}.Select--multi.has-value .Select-input,.Select-item{margin-left:5px}.Select-item{background-color:#f2f9fc;border-radius:2px;border:1px solid #c9e6f2;color:#08c;display:inline-block;font-size:.9em;margin-top:5px;vertical-align:top}.Select-item-icon,.Select-item-label{display:inline-block;vertical-align:middle}.Select-item-label{border-bottom-right-radius:2px;border-top-right-radius:2px;cursor:default;padding:2px 5px}.Select-item-label .Select-item-label__a{color:#08c;cursor:pointer}.Select-item-icon{cursor:pointer;border-bottom-left-radius:2px;border-top-left-radius:2px;border-right:1px solid #c9e6f2;padding:1px 5px 3px}.Select-item-icon:focus,.Select-item-icon:hover{background-color:#ddeff7;color:#0077b3}.Select-item-icon:active{background-color:#c9e6f2}.Select--multi.is-disabled .Select-item{background-color:#f2f2f2;border:1px solid #d9d9d9;color:#888}.Select--multi.is-disabled .Select-item-icon{cursor:not-allowed;border-right:1px solid #d9d9d9}.Select--multi.is-disabled .Select-item-icon:active,.Select--multi.is-disabled .Select-item-icon:focus,.Select--multi.is-disabled .Select-item-icon:hover{background-color:#f2f2f2}@keyframes Select-animation-spin{to{transform:rotate(1turn)}}@-webkit-keyframes Select-animation-spin{to{-webkit-transform:rotate(1turn)}}
.metoceanview-creatives-page .example {
  padding: 20px;
  border: 2px solid #000;
}