:root {
  /* Color */
  --color-white: #fff;
  --color-primary: #1B1B1B;
  --color-secondary: #848C97;
  --color-tertiary: #DEE8ED;
  --color-brand: #ff3c00;
  --color-error: #b50303;
  --color-link: #2F63D4;
  --color-success: #00C43E;

  --color-background: #EBF1F4;
  --color-warning: #c78c15;

  /* Font */
  --font-family-base: "Inter", sans-serif;
  --font-weight-base: 400;
  --font-family-heading: "Rubik", sans-serif;
  --font-weight-heading: 700;

  /* Progress */
  --size: 250;
}

body {
  color: var(--color-primary);
  background: var(--color-background);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


.result-header,
.result-list,
.result-sidebar {
  display: none;
}

.result-shown .result-header,
.result-shown .result-list,
.result-shown .result-sidebar {
  display: block;
}

.result-shown .hint,
.result-shown .headline,
.loading .main-form {
  display: none;
}

.result-shown .search-box {
  margin: 0;
  background: var(--color-white);
  padding: 0px 20px 20px 20px;

}
.result-shown .search-box .inner {
  margin: 0;
  border-radius: 0;
  width: auto;
}
.result-shown .search-box .inner .copy {
  display: none;
}
.result-shown .search-box .inner .main-form .inner {
  margin-top: 0;
}

.result-shown .search-box .inner .main-form .inner {
  display: grid;
  grid-template-columns: auto max-content;
  gap: 10px;
}

.result-shown .search-box .inner .main-form .inner button {
  margin-top: 0;
}


@media (min-width: 1000px) {
  .result-shown .search-box {
    padding: 0 calc(50vw - 400px) 20px calc(50vw - 400px);
  }
}




.container h1, .container h1 a {
  font-size: 22px;
  line-height: 20px;
  color: var(--color-primary);
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.container h1 .light {
  font-weight: 400;
}

.container h2 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  font-size: 30px;
  line-height: 36px;
  margin: 30px 0 0 0;
}

.container .copy {
  margin-top: 10px;
}

.container ul, .container ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.container li {
  list-style: none;
  background-color: var(--color-white);
  padding: 20px;
  margin-bottom: 1px;
}

.container li:first-child {
  border-radius: 5px 5px 0 0;
}

.container li:last-child {
  border-radius: 0 0 5px 5px;
}

.container-legal {
  padding: 20px 20px 0 20px;
}

.container {
  min-height: calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  display: grid;
  grid-template-rows: max-content auto auto max-content max-content;
}

.loading .container {
  grid-template-rows: max-content auto max-content max-content;
}

.loading .result-box {
  display: grid;
  align-items: center;
}

.search-box,
.result-box,
.promo-box,
footer {
  margin: 20px;
}



@media (min-width: 600px) {
  .container-legal {
    padding: 20px calc(50vw - 250px) 0;
  }

  body:not(.result-shown) .search-box .inner {
    width: 460px;
    margin: 0 auto;
    background-color: var(--color-white);
    border-radius: 5px;
    padding: 20px;
    margin-top: 90px;
  }

  .search-box .inner h2 {
    text-transform: uppercase;
    margin-top: 0;
  }

  .search-box .inner .main-form .inner {
    padding: 0;
    display: grid;
    grid-template-columns: auto max-content;
    gap: 10px;
    margin-top: 20px;
  }

  .search-box .inner .main-form .inner button {
    margin-top: 0;
  }

  .result-box {
    max-width: 500px;
    margin: 50px auto;
  }
}

@media (min-width: 1000px) {
  .promo-box {
    margin: 20px calc(50vw - 400px);
  }
  footer {
    margin: 20px calc(50vw - 400px);
  }
}


/* Header */
.header {
  padding: 30px 10px 30px 20px;
  background-color: var(--color-white);
}

@media (min-width: 1000px) {
  .header {
    padding: 30px calc(50vw - 400px);
  }
}

.header .columns-container {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
}

.header .icon-link-rules {
  display: none;
}
@media (min-width: 480px) {
  .header .icon-link-rules {
    display: inline-block;
  }
}

.header .icon-link {
  background-position: right 10px center;
  padding: 5px 40px 5px 10px;
  margin: -5px 0;
}


/* Result */
.result-item {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-primary);
  padding: 15px;
}

.result-item .inner {
  position: relative;
  padding-left: 30px;
}

.result-item .inner:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_188)"><path d="M16.364 16.3639C19.8788 12.8492 19.8788 7.1507 16.364 3.63598C12.8493 0.12126 7.15084 0.121259 3.63612 3.63598C0.121398 7.1507 0.121398 12.8492 3.63612 16.3639C7.15084 19.8786 12.8493 19.8786 16.364 16.3639Z" fill="%2300C43E"/><path d="M8 13L6 11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.00003 13L14 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1_188"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.result-item.fail .inner:after {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_224)"><path d="M16.364 16.3639C19.8788 12.8492 19.8788 7.1507 16.364 3.63598C12.8493 0.12126 7.15084 0.121259 3.63612 3.63598C0.121398 7.1507 0.121398 12.8492 3.63612 16.3639C7.15084 19.8786 12.8493 19.8786 16.364 16.3639Z" fill="%23F52D00"/><path d="M12.8286 12.8283L7.17175 7.17145" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17176 12.8283L12.8286 7.17145" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1_224"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
}

.result-item .topic {
  font-weight: bold;
}

.result-item .reason {
  margin-top: 10px;
  color: var(--color-primary);
}
.result-item .recommendation {
  margin-top: 10px;
  font-weight: bold;
}

.result-item.pass .recommendation {
  display: none;
}

.main-form .inner {
  margin-top: 10px;
}

.main-form button {
  margin-top: 10px;
  display: block;
  width: -webkit-fill-available;
}

.main-form .error {
  display: none;
  color: var(--color-error);
  margin-top: 10px;
}

.input-settings-icon-container {
  position: relative;
}


.input-settings-icon-container .settings-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  width: 50px;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 6L9.5 6" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M5.5 6L3 6.00001" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M10.5 14L3 14" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><path d="M14.5 14L17 14" stroke="%23ABA69E" stroke-width="1.5" stroke-linecap="round"/><circle cx="7.5" cy="6" r="1.75" transform="rotate(90 7.5 6)" stroke="%23ABA69E" stroke-width="1.5"/><circle cx="12.5" cy="14" r="1.75" transform="rotate(90 12.5 14)" stroke="%23ABA69E" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.input-settings-icon-container .settings-button:hover {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 6L9.5 6" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M5.5 6L3 6.00001" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M10.5 14L3 14" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><path d="M14.5 14L17 14" stroke="%231B1B1B" stroke-width="1.5" stroke-linecap="round"/><circle cx="7.5" cy="6" r="1.75" transform="rotate(90 7.5 6)" stroke="%231B1B1B" stroke-width="1.5"/><circle cx="12.5" cy="14" r="1.75" transform="rotate(90 12.5 14)" stroke="%231B1B1B" stroke-width="1.5"/></svg>');
}

input, textarea {
  font-size: 14px;
  line-height: 20px;
  width: -webkit-fill-available;
  padding: 15px 0px 15px 15px;
  border: none;
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--color-tertiary);
  transition: box-shadow 0.1s ease;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
}

.result-shown input {
  color: var(--color-secondary);
}

.result-shown input:focus {
  color: var(--color-primary);
}

@media (hover: none) {
  input, textarea {
    font-size: 16px;
  }
}

input::placeholder,
input::placeholder {
  color: var(--color-secondary);
}

input:focus, textarea:focus {
  box-shadow: 0 0 0 5px var(--color-tertiary);
}

button {
  font-size: 12px;
  line-height: 20px;
  padding: 15px 20px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 5px;
  background-color: var(--color-brand);
  color: var(--color-white);
  display: block;
  cursor: pointer;
  box-shadow: 0 0 0 0px var(--color-tertiary);
  transition: box-shadow 0.1s ease;
}

button:hover {
  box-shadow: 0 0 0 3px var(--color-tertiary);
}

.hint {
  color: var(--color-secondary);
  margin-top: 20px;
}

.hint.hint-error {
  color: var(--color-error);
}

.button-container {
  display: flex;
  gap: 10px;
}

.refinement-item {
  text-align: center;
  cursor: default;
  font-size: 12px;
  color: var(--color-secondary);
}

.loader {
  text-align: center;
  padding: 20px;
  display: none;
}

.loading .loader {
  display: block;
}

.loading .search-box {
  display: none;
}

.loader svg {
  display: inline;
}

.loading h2 {
  display: none;
}

.loading .loader {
  display: block;
}

/* Footer box */

.promo-box {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0px;
  background-color: var(--color-tertiary);
  border-radius: 5px;
  align-items: end;
}

.promo-box .content {
  padding: 20px;
}

.promo-box .content .text {
  display: inline;
}


.promo-box .image {
  line-height: 0;
}

.result-shown .promo-box .button {
  margin-top: 10px;
}

.promo-box a {
  color: var(--color-secondary);
  text-decoration: none;
}

.promo-box a:hover {
  color: var(--color-primary);
}

.promo-box img {
  width: 50px;
  height: 50px;
}

.promo-box .bold {
  font-weight: bold;
}

body:not(.result-shown) .promo-box .text {
}

body:not(.result-shown) .promo-box .title {
  display: none;
}

/* Promo box on result page */

.result-shown .promo-box {
  grid-template-columns: 1fr;
}

.result-shown .promo-box .image {
  text-align: right;
  pointer-events: none;
}


@media (min-width: 600px) {
  .result-shown .promo-box {
    grid-template-columns: 2fr 1fr;
  }
}

.result-shown .promo-box .title {
  display: block;
  font-size: 30px;
  line-height: 36px;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-primary);
  margin-bottom: 10px;
}

.result-shown .promo-box .button {
  background-color: var(--color-white);
  color: var(--color-primary);
  font-size: 12px;
  font-family: var(--font-family-heading);
  font-weight: 500;
  padding: 15px 20px;
  border-radius: 2px;
  display: block;
  width: fit-content;
  margin-top: 20px;
  text-transform: uppercase;
  box-shadow: 0 0 0 0px var(--color-secondary);
  transition: box-shadow 0.1s ease;
}

.result-shown .promo-box .button:hover {
  box-shadow: 0 0 0 3px var(--color-secondary);
}

.result-shown .promo-box img {
width: 200px;
height: 200px;
margin-top: -50px;
}


footer {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  color: var(--color-secondary);
  font-size: 12px;
  line-height: 20px;
  margin-top: 0px;
}

footer .links a {
  color: var(--color-primary);
  text-decoration: none;
  margin: 0 0px 10px 10px;
}

footer .copyright {
  color: var(--color-secondary);
  text-align: right;
}


/* Score */

.score {
  position: relative;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0;
  background-color: var(--color-tertiary);
  border-radius: 5px;
}

.score-main {
  position: absolute;
  top: 60px;
  right: 0;
  left: 0;
  font-size: 70px;
  line-height: 100px;
  color: var(--color-primary);
}

.score-subtitle {
  position: absolute;
  top: 150px;
  right: 0;
  left: 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-secondary);
  font-weight: 400;
}

.progress-wrap { 
  position: relative; 
  width: calc(var(--size) * 1px); 
  height: calc(var(--size) * 1px); 
  margin: 0 auto;
}

/* SVG sized via viewBox, rotated so 0% starts at 12 o'clock */
svg.progress {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: inline-block;
}

.track { fill: none; stroke: var(--color-white); stroke-width: 125; }
.bar   { fill: none; stroke: var(--color-white); stroke-width: 15; stroke-linecap: round; }

.loader {
  position: relative;
}

.loader-wrap {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}


.loader-svg .bar {
  stroke: var(--color-background);
  stroke-width: 10;
  animation: loader-stroke-animation 10s infinite ease-in-out;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.loader-svg {
  animation: rotate-animation 2s infinite linear;
}

/* Animation that moves a gradiant from left to right */
@keyframes loader-stroke-animation {
  0% {
    stroke-dashoffset: 20;
  }
  50% {
    stroke-dashoffset: 90;
  }
  100% {
    stroke-dashoffset: 20;
  }
}

@keyframes rotate-animation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-secondary);
  max-width: 180px;
  margin: 0 auto;
  vertical-align: middle;
  display: flex;
  align-self: center;
  justify-self: center;
}

.result-header .super-title {
  display: grid;
  grid-template-columns: 16px auto;
  gap: 7px;
}

.result-header .job-title {
  overflow-wrap: anywhere;
  margin-top: 10px;
}

.result-header .summary {
  margin-top: 10px;
}

.result-header .super-title img {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.result-sidebar-box {
  padding: 20px;
  background-color: var(--color-tertiary);
  border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 20px;
}

@media (min-width: 1000px) {
  .result-sidebar-box {
    margin-top: 0;
  }
}


.result-sidebar-box.no-background {
  background-color: transparent;
  display: flex;
  gap: 10px;
}

.result-sidebar-item .label {
  margin: 0;
  color: var(--color-secondary);
}

.result-sidebar-item .content {
  margin: 0 0 20px 0;
  font-weight: bold;
}

.result-sidebar-item a.content {
  text-decoration: none;
  color: var(--color-primary);
}

.result-sidebar-item a.content:hover {
  color: var(--color-secondary);
}

.result-sidebar-item.button-primary {
  margin-top: 20px;
}

.result-sidebar-box a.button {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  line-height: 20px;
  padding: 10px;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 0 0px var(--color-white);
  transition: box-shadow 0.1s ease;
}

.result-sidebar-box a.button:hover {
  box-shadow: 0 0 0 3px var(--color-white);
}

.result-sidebar-box a.button.button-secondary {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.result-sidebar-box.no-background {
  display: grid;
  grid-template-columns: auto;
  gap: 0;
  padding: 10px;
}

.icon-link {
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-size: 12px;
  line-height: 20px;
  padding: 10px 10px 10px 40px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 20px 20px;
  border-radius: 2px;
}

.icon-link:hover {
  background-color: var(--color-tertiary);
}
  
.icon-link-rules {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_10_416)"><path d="M6.25 10H13.75V11.25H6.25V10Z" fill="black"/><path d="M6.25 6.25H13.75V7.5H6.25V6.25Z" fill="black"/><path d="M10 18.75L6.14013 16.6919C5.03966 16.1065 4.11938 15.2325 3.47807 14.1637C2.83677 13.0948 2.49865 11.8715 2.5 10.625V2.5C2.50037 2.16859 2.63218 1.85086 2.86652 1.61652C3.10086 1.38218 3.4186 1.25036 3.75 1.25H16.25C16.5814 1.25036 16.8991 1.38218 17.1335 1.61652C17.3678 1.85086 17.4996 2.16859 17.5 2.5V10.625C17.5013 11.8715 17.1632 13.0948 16.5219 14.1636C15.8806 15.2324 14.9603 16.1064 13.8599 16.6918L10 18.75ZM3.75 2.5V10.625C3.74892 11.6449 4.0256 12.6458 4.55034 13.5203C5.07509 14.3949 5.82808 15.11 6.7285 15.5889L10 17.3333L13.2715 15.5889C14.1719 15.11 14.9249 14.3949 15.4497 13.5203C15.9744 12.6458 16.2511 11.6449 16.25 10.625V2.5H3.75Z" fill="black"/></g><defs><clipPath id="clip0_10_416"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
}

.icon-link-contact {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_10_286)"><path d="M17.5 3.75H2.5C2.16848 3.75 1.85054 3.8817 1.61612 4.11612C1.3817 4.35054 1.25 4.66848 1.25 5V15C1.25 15.3315 1.3817 15.6495 1.61612 15.8839C1.85054 16.1183 2.16848 16.25 2.5 16.25H17.5C17.8315 16.25 18.1495 16.1183 18.3839 15.8839C18.6183 15.6495 18.75 15.3315 18.75 15V5C18.75 4.66848 18.6183 4.35054 18.3839 4.11612C18.1495 3.8817 17.8315 3.75 17.5 3.75ZM16.125 5L10 9.2375L3.875 5H16.125ZM2.5 15V5.56875L9.64375 10.5125C9.74837 10.5851 9.87267 10.624 10 10.624C10.1273 10.624 10.2516 10.5851 10.3562 10.5125L17.5 5.56875V15H2.5Z" fill="black"/></g><defs><clipPath id="clip0_10_286"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>');
}


.firebase-emulator-warning {
  display: none;
}

@media (min-width: 1000px) {
  .result-shown .result-box {
    max-width: 800px;
    margin: 50px auto;
  }

  .result-shown .result-header {
    display: grid;
    grid-template-columns: 520px 260px;
    gap: 20px;
  }

  .result-shown .result-header .score {
    background-color: transparent;
    margin: 0;
  }

  .result-shown .super-title {
    margin-top: 30px;
  }

  .result-shown .result-list-and-sidebar {
    display: grid;
    grid-template-columns: 520px 260px;
    gap: 20px;
    margin-top: 20px;
  }

}

@media print {
  .header .columns-container .col-2,
  .main-form button {
    display: none;
  }
  body {
    font-size: 8px;
  }
}

/* Flyout */

.flyout {
  position: fixed;
  inset: 0;
  display: none;
}

.flyout .background {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.flyout .outer {
  width: 400px;
  background-color: var(--color-white);
  border-radius: 5px;
  padding: 20px;
  margin: auto;
  margin-top: 30px;
  position: relative;
}

.flyout .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_12_30)"><path d="M16.3639 16.364C19.8786 12.8492 19.8786 7.15076 16.3639 3.63604C12.8491 0.121321 7.15065 0.12132 3.63593 3.63604C0.121215 7.15076 0.121215 12.8492 3.63593 16.364C7.15065 19.8787 12.8491 19.8787 16.3639 16.364Z" fill="%23848C97"/><path d="M12.8287 12.8282L7.17188 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.17176 12.8282L12.8286 7.17139" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_12_30"><rect width="20" height="20" fill="white" transform="matrix(-1 0 0 -1 20 20)"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
}

.flyout .title {
  font-size: 16px;
  margin-bottom: 10px;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  text-transform: uppercase;
}

.flyout input, .flyout textarea {
  margin-bottom: 20px;
}

.flyout label {
  padding: 0 0 10px 0;
  display: block;
}

.flyout .content {
  margin-bottom: 20px;
}

.flyout .button {
  text-align: center;
  font-size: 12px;
  line-height: 20px;
  padding: 10px 15px;
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 2px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  box-shadow: 0 0 0 0px var(--color-tertiary);
  transition: box-shadow 0.1s ease;
  display: inline-block;

}

.flyout .button:hover {
  box-shadow: 0 0 0 3px var(--color-tertiary);
}