:root {
  --color-bg: #15345e;
  --color-dk: #62c2d0;
  --color-de: #adcd60;
  --color-to: #eae2d1;

  --transition-speed: 0.3s;
  --animate-duration: 200ms;
  --bulma-help-size: 14px;
}

body {
  width: 100%;
  min-height: 100dvh;
  background: linear-gradient(white, lightgray);
  color: white;
}

.bob-header {
  padding-left: 16px;
  padding-bottom: 32px;
  background-color: var(--color-bg);
}

/* title bar */

.bob-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 112px;
}

.bob-logo,
.bob-logo img {
  max-width: 200px;
}

.bob-slogan {
  color: #B5EFA0;
  font-size: x-large;
  text-align: center;
  padding: 0 48px;
  margin: auto;
}

.bob-slogan.inline {
  border: solid 2px #E2352F;
  border-top: none;
  border-bottom: none;
}

.interreg-logo {
  max-width: 368px;
}

@media (max-width: 900px) {
  .bob-logo {
    max-width: 30%;
  }

  .bob-slogan.inline {
    display: none;
  }

  .interreg-logo {
    max-width: 50%;
  }
}

/* nav bar */

.bob-header .navbar,
.bob-header .navbar-menu {
  background: transparent;
  box-shadow: none;
}

.bob-header .navbar-end {
  justify-content: flex-end;
  margin-inline-start: auto;
  /* delete this if navbar-end is used for login button */
  width: 75;
}

.bob-header .navbar-menu,
.bob-header .navbar-start {
  align-items: center;
  display: flex;
}

.bob-header .navbar-start {
  margin: auto;
  overflow-x: auto;
}

.lang-selector {
  display: flex;
  align-items: center;
  margin: 0 32px 0 8px;
}

.lang-selector .sep {
  margin: 0 4px;
}

.lang-selector a {
  color: white;
}

.bob-header .navbar-item,
.bob-header .navbar-link {
  color: white;
  margin-left: 4px;
}

.bob-header .navbar-item:hover,
.bob-header .navbar-link:hover {
  color: black;
}

.navbar-item.selected {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.25);
}

.bob-header .minbar {
  display: none;
  justify-content: space-between;
  padding-left: 6px;
}

.bob-slogan.block {
  display: none;
  margin: 32px;
  font-size: xx-large;
}

@media (max-width: 900px) {
  .bob-header .navbar {
    display: none;
  }

  .bob-header .minbar {
    display: flex;
  }

  .bob-slogan.block {
    display: block;
  }
}

.bob-header .navbar-burger {
  --bulma-burger-item-width: 28px;
  --bulma-burger-item-height: 2px;
}

/* become bob */

.bob-become {
  margin: 32px;
  flex-direction: row-reverse;
}

.bob-scores,
.bob-login,
.bob-reg-h {
  margin: 16px;
  align-items: center;
  flex-direction: row-reverse;
}

.bob-become-img {
  text-align: center;
}

.bob-become-img img {
  max-width: 280px;
}

.bob-text p {
  margin: 12px 0;
}

.bob-become-h {
  font-weight: bold;
  font-size: large;
  margin: 32px 0 24px 0;
}

.bob-text-h {
  font-weight: bold;
  font-size: large;
}

.bob-become-p {
  display: flex;
  justify-content: center;
}

.bob-become-reg {
  display: flex;
  justify-content: center;
  margin: 32px;
}

.green.button {
  color: #0F46F2;
  background-color: #81C15F;
  border: none;
  min-width: 124px;
}

.green.button:hover {
  background-color: #81A75F;
}

/* bob find */

.bob-find {
  background-color: var(--color-dk);
  color: black;
  margin: 4px 0 4px 0 !important;
  padding: 32px;
}

.bob-find-img {
  text-align: center;
}

.bob-find-t {
  font-size: large;
  font-weight: bold;
  text-align: right;
  margin-bottom: 32px;
}

.bob-find-list li {
  list-style: square;
}

.bob-find-list-item {
  display: flex;
  justify-content: flex-end;
}

/* bob about */

.bob-home-about {
  background-color: var(--color-de);
  color: black;
  margin: 0 !important;
  flex-direction: row-reverse;
}

.bob-about {
  background-color: var(--color-dk);
  color: black;
  margin: 4px 0 4px 0 !important;
  flex-direction: row-reverse;
}

.about-h {
  margin-top: 24px;
  font-weight: bold;
  font-size: large;
}

.bob-about-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bob-about-buttons .button {
  margin-bottom: 48px;
  min-width: 200px;
}

.bob-about-info {
  margin-left: 32px;
}

.bob-about-info p {
  margin: 16px 0;
}

.bob-about-img {
  text-align: center;
  margin: 48px 0;
}

.bob-about-img img {
  max-width: 200px;
}

/* bob gallery */

.bob-gallery {
  background-color: var(--color-to);
  margin: 4px 0;
  padding: 20px 4px;
}

.bob-gallery img {
  height: 180px;
  margin-right: 16px;
  border-radius: 8px;
}

/* bob footer */

.bob-footer {
  background-color: var(--color-bg);
  align-items: center;
  flex-direction: row-reverse;
  padding: 0 8px;
  margin: 0;
  user-select: none;
}

.bob-footer ul {
  display: flex;
  justify-content: flex-end;
}

.bob-footer li {
  margin-left: 16px;
}

.bob-footer-logo img {
  max-width: 200px;
}

@media (max-width: 768px) {
  .bob-footer-logo {
    text-align: right;
  }
}

/* card swipper */

.card-wrapper {
  margin: 0 60px 35px;
  padding: 20px 10px;
  overflow: hidden;
}

.card-list .card-item {
  list-style: none;
}

.card-list .card-item .card-link {
  user-select: none;
  display: block;
  background: #fff;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  transition: 0.2s ease;
}

.card-list .card-item .card-link.thin-border {
  padding: 0px;
}

.card-list .card-item .card-link:active {
  cursor: grabbing;
}

.card-list .card-item .card-link:hover {
  border-color: #5372f0;
}

.card-list .card-link .card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.card-list .card-link .badge {
  color: blue;
  margin: 16px 0 18px;
  padding: 8px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  background: #dde4ff;
  width: fit-content;
  border-radius: 50px;
}

.card-list .card-link .card-title {
  font-size: 16px;
  color: #000;
  font-weight: 100;
}

.card-list .card-link .card-button {
  height: 35px;
  width: 35px;
  color: #5372f0;
  border-radius: 50%;
  margin: 30px 0 5px;
  background: none;
  cursor: pointer;
  transform: rotate(45deg);
  border: 2px solid #5382f0;
  transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
  color: #fff;
  background: #5372f0;
}

.card-wrapper .swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  opacity: 0.5;
  background: #5372f0;
}

.card-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.card-wrapper .swiper-slide-button {
  color: #5372f0;
  margin-top: -35px;
}

@media screen and (max-width: 768px) {
  .card-wrapper {
    margin: 0 10px 25px;
  }

  .card-wrapper .swiper-slide-button {
    display: none;
  }
}

/* glass menu */

.glass.menu {
  --bulma-menu-item-radius: 0;
  position: absolute;
  margin-top: 48px;

  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 0 0 20px 20px;

  animation: fadeInLeft;
  animation-duration: var(--animate-duration);
}

.glass.menu .menu-list {
  padding: 16px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(20px);
  transition: width var(--transition-speed) ease;
  border-radius: 0 0 20px 20px;
}

.glass.menu a {
  padding: 8px 24px;
  background-color: transparent;
  color: ghostwhite;
  border-radius: 8px;
}

.glass.menu a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.glass.menu a.active {
  background: rgba(255, 255, 255, 0.25);
}

.bob-score-info,
.bob-reg-f {
  background-color: var(--color-dk);
  margin: 4px 0 4px 0 !important;
  padding: 32px;
  flex-direction: row-reverse;
}

.bob-reg-success {
  background-color: var(--color-dk);
  margin: 4px 0 4px 0 !important;
  padding: 32px;
  display: none;
}

.bob-reg-success .button {
  margin-top: 24px;
}

.bob-reg-l .field {
  margin-bottom: 24px;
}

.bob-reg-f input {
  max-width: 380px;
}

.bob-reg-a {
  background-color: var(--color-de);
  color: black;
  margin: 0 !important;
  flex-direction: row-reverse;
  align-items: center;
}

.flex-rtip {
  display: flex;
  align-items: center;
}

.flex-rtip .rtip {
  margin-left: 4px;
  font-size: 14px;
  color: black;
}

.terms-box {
  display: flex;
  align-items: center;
  color: black;
  font-size: large;
}

.terms-box input {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.terms-box a {
  text-decoration: underline;
  color: black;
  margin-left: 6px;
}

.bob-radio {
  display: flex;
  align-items: center;
  font-size: 20px;
}

.bob-radio input {
  width: 24px;
  height: 24px;
  margin-right: 24px;
}

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

.big.button {
  min-width: 248px;
}

.h2-title {
  font-size: large;
  font-weight: bold;
}

.bob-login .field {
  margin-top: 24px;
}

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

.center-flex.is-danger {
  border: solid 1px rgb(255, 102, 133);
}

.bob-scores-h {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: 8px;
  margin: 32px 0;
}

.bob-score-img {
  text-align: center;
  margin: 48px 0;
}

.bob-score-img img {
  max-width: 320px;
}

img.shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 8px;
}

.bob-score-info {
  color: black;
}

.bob-score-content {
  color: black;
}

.score-cat {
  display: grid;
  grid-template-columns: 1fr 90px 90px 2fr 24px [end];
  grid-column-gap: 32px;
  grid-row-gap: 20px;
  align-items: center;
  margin-bottom: 4px;
  padding: 24px;
}

.score-info-2 {
  display: none;
}

@media (max-width: 900px) {
  .score-cat {
    grid-template-columns: 1fr 90px 90px 24px [end];
  }
  .score-info-2 {
    display: block;
    grid-column: 1 / end;
  }
  .score-info {
    display: none;
  }
  .score-step-link,
  .score-step-desc {
    grid-column: 1 / end;
  }
}

.score-cat:nth-child(3n+1) {
  background-color: var(--color-de);
}

.score-cat:nth-child(3n+2) {
  background-color: var(--color-to);
}

.score-cat:nth-child(3n) {
  background-color: var(--color-dk);
}

.score-title {
  display: flex;
  align-items: center;
  grid-column: 1 / end;
}

.score-icon {
  font-size: 48px;
  color: crimson;
}

.score-icon:hover {
  font-size: 52px;
}

.score-title h2 {
  font-size: 32px;
  margin-left: 16px;
}

.score-step-name {
  grid-column-start: 1;
}

.score-step-desc {
  grid-column: 1 / 4;
}

.score-value {
  width: 90px;
  height: 45px;

  border: 3px solid;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  color: black;

  display: flex;
  align-items: center;
  justify-content: center;
}

.score-value select {
  appearance: auto;
  text-align: center;
  width: 48px;
  height: 24px;
  border: none;
  background: transparent;
  font-family: "Fira Mono", monospace;
  font-size: 18px;
  cursor: pointer;
}

.score-value select:active,
.score-value select:focus {
  outline: none;
}

.score-value select[disabled] {
  color: gray;
}

.score-cat.collapsed>div {
  display: none;
}

.score-cat.collapsed>div.score-title {
  display: flex;
}

.collapsed .score-title .icon {
  transform: rotate(-90deg);
}

/* slide-box */

.slide-box {
  --size: 90px;
}

.slide-box input[type="checkbox"] {
  display: none;
  visibility: hidden;
}

.slide-box .block {
  position: relative;
  clear: both;
  float: left;
}

.slide-box label {
  width: var(--size);
  height: calc(var(--size) / 2);
  box-sizing: border-box;
  border: 3px solid;
  float: left;
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: .3s ease;
  color: black;
}

.slide-box input[type=checkbox]:checked+label {
  background: #55e868;
}

.slide-box input[type=checkbox]:checked+label:before {
  left: calc(var(--size) / 2);
}

.slide-box label:before {
  transition: .3s ease;
  content: '';
  width: calc((var(--size) / 2) - 10px);
  height: calc((var(--size) / 2) - 10px);
  position: absolute;
  background: white;
  left: 2px;
  top: 2px;
  box-sizing: border-box;
  border: 3px solid;
  color: black;
  border-radius: 100px;
}

.rot90 {
  transform: rotate(90deg);
}

.collapse {
  cursor: pointer;
  user-select: none;
}

.event-region {
  margin: 4px 0 4px 0 !important;
  padding: 32px;
  color: black;
}

.event-region h2 {
  font-weight: bold;
}

.event-item {
  margin: 24px;
}

.event-region:nth-child(3n+1) {
  background-color: var(--color-to);
}

.event-region:nth-child(3n+2) {
  background-color: var(--color-dk);
}

.event-region:nth-child(3n) {
  background-color: var(--color-de);
}

.events-info {
  background-color: var(--color-dk);
  margin: 4px 0 4px 0 !important;
  padding: 32px;
  color: black;
}