/* https://www.storyboom.co/ */



/*GLOBAL============================================================================*/

.disabled {cursor: default; opacity: 0.3; pointer-events: none;}
.hidden {display: none !important;}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
}



/*STRUCTURE============================================================================*/

html {
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: rgb(242, 242, 242);
  color: rgb(52, 52, 52);
  font-family: arial, sans-serif;
  font-size: 1em;
  font-style: normal;
  min-width: 300px;
  padding: 0;
  overflow-x: hidden;
  text-align: left;
  width: 100%
}

@media screen and (max-width: 750px) {
  body {
    font-size: 0.8125em;
  }
}

header {
  color: white;
  background: rgb(72, 72, 72);
  border-radius: 10px;
  /*box-shadow: inset 0 0 10px rgba(0,0,0,0.3);*/
  line-height: 50px;
  height: 50px;
  padding: 0 20px;
  width: 100%;
}

header a {color: inherit;}

footer {
  padding: 100px 0;
  margin: 50px 0 0;
  width: 100%;
  text-align: center;
}

footer a {color: grey; font-size: 0.8em; margin: 0 20px;}

section {
  margin: 100px 0 0;
}

section:first-child {margin: 0;}



/*TEXT============================================================================*/

a {
  color: rgb(0, 153, 255);
  cursor: pointer;
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  a:hover {text-decoration: none;}
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  line-height: 1.2em;
  margin: 50px 0 0;
  text-align: left;
}

h1 {margin: 100px 0 0;}

p {
  margin: 20px 0 0;
  line-height: 1.6em;
  overflow-wrap: break-word;
}

p:first-child {margin: 0;}

ol, ul {
  line-height: 1.6em;
  list-style-position: outside;
  margin: 20px 0 0;
  padding: 0 0 0 20px;
}

ol li, ul li {
  padding: 0 0 0 20px;
}


/*ELEMENTS============================================================================*/

button, input, select, textarea {
  appearance: none;
  color: inherit;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

label {
  color: inherit;
  font-size: 0.8125em;
  font-weight: bold;
}

img {
  opacity: 1;
  transition: opacity 3s;
}

img[data-src] {
  opacity: 0;
}

input, select {
  background: white;
  border: 2px solid lightgrey;
  border-radius: 6px;
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  line-height: 40px;
  height: 40px;
  padding: 0 0 0 10px;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

select, select option {cursor: pointer;}

input:focus, select:focus {
  border-color: rgb(0, 153, 255);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.1);
}

input.grey, select.grey {
  background: rgb(242, 242, 242);
}

input::placeholder {
  color: rgb(186, 186, 186);
}

input.readonly, input:disabled, select.readonly, select:disabled {
  background: rgb(242, 242, 242);
  color: rgb(128, 128, 128);
  cursor: not-allowed;
}

button, .button {
  position: relative;
  display: inline-flex;
  background: rgb(0, 153, 255);
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 1em;
  font-weight: 600;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.2s ease;
}

button:hover, .button:hover {background: rgb(0, 86, 179);}
button.grey, .button.grey {background: rgb(116, 116, 116);}
button.grey:hover, .button.grey:hover {background: rgb(84, 84, 84);}


/*BREADCRUMB============================================================================*/

.breadcrumb {
  margin: 50px 0 0;
  color: rgb(186, 186, 186);
  overflow: hidden;
  user-select: none;
}

.breadcrumb a, .breadcrumb span {
  margin-right: 10px;
}



/*FLEX============================================================================*/

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
}



/*GRID============================================================================*/

.grid-1 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  justify-items: stretch;
  margin: 20px 0 0;
}

.grid-2 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(2, 1fr);
  justify-items: stretch;
  margin: 20px 0 0;
}

.grid-3 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
  margin: 20px 0 0;
}

.grid-4 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, 1fr);
  justify-items: stretch;
  margin: 20px 0 0;
}

.grid-5 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(5, 1fr);
  justify-items: stretch;
  margin: 20px 0 0;
}

.grid-6 {
  align-items: stretch;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(6, 1fr);
  justify-items: stretch;
  margin: 20px 0 0;
}

@media (max-width: 1000px) {
  .grid-4 {grid-template-columns: repeat(3, 1fr);}
  .grid-5, .grid-6 {grid-template-columns: repeat(5, 1fr);}
}

@media (max-width: 800px) {
  .grid-3, .grid-4 {grid-template-columns: repeat(2, 1fr);}
  .grid-5, .grid-6 {grid-template-columns: repeat(4, 1fr);}
}

@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 {grid-template-columns: 1fr;}
  .grid-5, .grid-6 {grid-template-columns: repeat(3, 1fr);}
}

@media (max-width: 400px) {
  .grid-5, .grid-6 {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 300px) {
  .grid-5, .grid-6 {grid-template-columns: 1fr;}
}



/*GROUP============================================================================*/

.group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 20px 0 0;
}

.group:first-child {margin: 0;}



/*MARGIN============================================================================*/

.margin {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 20px;
}

.margin.nopad {padding: 0;}
.margin.grey {background-color: var(--color_smoke); padding: 0;}
.margin.narrow  {max-width: 375px;}
.margin.article {max-width: 750px;}
.margin.normal  {max-width: 1000px;}
.margin.wide    {max-width: 1500px;}
.margin.full    {max-width: 100%;}

.margin-0 {margin: 0;}


/*PILL============================================================================*/

.pill {
  position: relative;
  display: inline-flex;
  background: rgb(0, 153, 255);
  border: none;
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-size: 0.8125em;
  font-weight: 600;
  padding: 8px 16px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pill:hover {background: rgb(0, 86, 179);}
.pill.grey {background: rgb(116, 116, 116);}
.pill.grey:hover {background: rgb(84, 84, 84);}


/*SEARCH============================================================================*/

.search {
  background: white;
  border: 1px solid white;
  border-radius: 26px;
  display: flex;
  height: 52px;
  margin: 20px 0 0;
  max-width: 500px;
  width: 100%;
}

.search_input {
  background: transparent;
  border: none;
  flex-grow: 1;
  font-size: 1em;
  height: 50px;
  line-height: 50px;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0 10px;
  width: 100%;
}

.search_input:focus {border: none; box-shadow: none; outline: none;}
.search_input::placeholder {color: inherit;}
.search_input:focus::placeholder {color: rgb(0, 153, 255);}

.search_hr {
  background-color: lightgrey;
  flex: 0 0 1px;
  height: 30px;
  margin: 10px 0;
  width: 1px;
}

.search_button {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
  cursor: pointer;
  flex: 0 0 50px;
  height: 50px;
  opacity: 0.80;
  width: 50px;
}

.search_button:hover {opacity: 0.80;}

.search_button.find {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" style="display:block;"><path fill="black" d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z"></path></svg>');
}

.search_button.reset {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" style="display:block;"><path fill="black" d="m12.45 37.65-2.1-2.1L21.9 24 10.35 12.45l2.1-2.1L24 21.9l11.55-11.55 2.1 2.1L26.1 24l11.55 11.55-2.1 2.1L24 26.1Z"></path></svg>');
}



/*TOAST============================================================================*/
.toast {
  background-color: black;
  border-radius: 50px;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  color: white;
  bottom: 20px;
  font-size: 1em;
  font-weight: bold;
  left: 50%;
  line-height: 1.3em;
  max-width: calc(100% - 40px);
  opacity: 1;
  padding: 16px 30px;
  position: fixed;
  text-align: center;
  transform: translate(-50%, calc(100% + 20px));
  transition: all 250ms cubic-bezier(0.4, 0, 0.4, 1);
  user-select: none;
  z-index: 999999999;
}

.toast.butter {
  transform: translate(-50%, 0%);
}

.toast.icon {
  background-repeat: no-repeat;
  background-position: 20px 50%;
  background-size: 25px;
  padding-left: 60px;
}

.toast.success {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path fill="none"/><path d="M21.2 33.2l14.1 -14.1l-2.8 -2.8l-11.3 11.3l-5.7 -5.7l-2.8 2.8l8.5 8.5zm2.8 10.8q-4.15 0 -7.8 -1.575t-6.35 -4.275q-2.7 -2.7 -4.275 -6.35t-1.575 -7.8q0 -4.15 1.575 -7.8t4.275 -6.35q2.7 -2.7 6.35 -4.275t7.8 -1.575q4.15 0 7.8 1.575t6.35 4.275q2.7 2.7 4.275 6.35t1.575 7.8q0 4.15 -1.575 7.8t-4.275 6.35q-2.7 2.7 -6.35 4.275t-7.8 1.575z"/></svg>');
}

.toast.cancel {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path fill="none"/><path d="M16.8 34l7.2 -7.2l7.2 7.2l2.8 -2.8l-7.2 -7.2l7.2 -7.2l-2.8 -2.8l-7.2 7.2l-7.2 -7.2l-2.8 2.8l7.2 7.2l-7.2 7.2l2.8 2.8zm7.2 10q-4.15 0 -7.8 -1.575t-6.35 -4.275q-2.7 -2.7 -4.275 -6.35t-1.575 -7.8q0 -4.15 1.575 -7.8t4.275 -6.35q2.7 -2.7 6.35 -4.275t7.8 -1.575q4.15 0 7.8 1.575t6.35 4.275q2.7 2.7 4.275 6.35t1.575 7.8q0 4.15 -1.575 7.8t-4.275 6.35q-2.7 2.7 -6.35 4.275t-7.8 1.575z"/></svg>');
}

.toast.error {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><path fill="none"/><path d="M24 34q0.85 0 1.425 -0.575t0.575 -1.425q0 -0.85 -0.575 -1.425t-1.425 -0.575q-0.85 0 -1.425 0.575t-0.575 1.425q0 0.85 0.575 1.425t1.425 0.575zm-2 -8l4 0l0 -12l-4 0l0 12zm2 18q-4.15 0 -7.8 -1.575t-6.35 -4.275q-2.7 -2.7 -4.275 -6.35t-1.575 -7.8q0 -4.15 1.575 -7.8t4.275 -6.35q2.7 -2.7 6.35 -4.275t7.8 -1.575q4.15 0 7.8 1.575t6.35 4.275q2.7 2.7 4.275 6.35t1.575 7.8q0 4.15 -1.575 7.8t-4.275 6.35q-2.7 2.7 -6.35 4.275t-7.8 1.575z"/></svg>');
}