/* RESET */
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* MAIN */
html, body {font-family: Raleway, sans-serif;width: 100%;height: 100%}
body.locked .page-cap {opacity: 1!important;visibility: visible!important;background-color: rgba(255,255,255,0.3);backdrop-filter: blur(2px)}
.editor-container {width: 100%;height: 100%;overflow: hidden}

.page-cap {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: transparent;backdrop-filter: blur(0px);z-index: 9;display: flex;align-items: center;opacity: 0;visibility: hidden;transition: background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out, opacity 0.5s ease-in-out, visibility 0.5s ease-in-out}
.page-cap > div {max-width: 300px;margin: 0 auto;text-align: center}
.page-cap > div > img {margin: 0 auto;height: 60px}

.wizard-container {
  color: #484848;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
}

.wizard-step {
  margin-bottom: 40px;
}

.wizard-step > h2, .wizard-step > h3 {
  margin: 0;
  line-height: 1;
  font-size: 18px;
  padding: 20px 0 10px;
}

.wizard-step > h3 {
  font-size: 16px;
}

.wizard-step > button {
  border: none;
  background: #484848;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.wizard-step > button:hover {
  background: #464646;
}

.wizard-step > button:active {
  transform: scale(0.95);
}

.wizard-step .choiser-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.wizard-step .typo-block {
  margin-bottom: 20px;
}

.wizard-step .typo-block p {
  margin-bottom: 10px;
}

.wizard-step .typo-block img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.wizard-step .flex {
  display: flex;
}

.wizard-step .flex p > img {

}

.choiser-choise {
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.choiser-choise > img {
  width: 140px;
  border-radius: 8px;
  border: 4px solid #fff;
}

.choiser-choise > span {
  display: block;
  text-align: center;
  margin-top: 10px;
}

.choiser-choise input {
  position: absolute;
  top: 0;
  opacity: 0;
  visibility: hidden;
}

.choiser-choise input:checked + img {
  border-color: #484848;
}

.float-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9;
}

.float-button {
  width: 60px;
  height: 60px;
  font-size: 36px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background: #F29A44;
  border-radius: 50%;
  padding: 10px;
  line-height: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.float-button:hover {
  color: #fff;
}

.float-button:active {
  transform: scale(0.95);
}

ol.contents {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol.contents li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.4em;
}

ol.contents li::before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;
}

ol.contents li a {
  color: #2c2c2c;
}

ol.contents li ol {
  counter-reset: subitem;
  padding-left: 0;
}

ol.contents li ol li {
  counter-increment: subitem;
  margin: 0;
}

ol.contents li ol li::before {
  content: counters(item, "") "." counters(subitem, "") ".";
}

.floating-contents {
  position: fixed;
  top: 40px;
  left: 0;
}

.floating-contents > a, .floating-contents > ol.contents {
  background: rgba(44, 44, 44, 0.9);
}

.floating-contents a, .floating-contents li {
  font-size: 13px;
  color: #fff;
  margin: 0;
}

.floating-contents a, .floating-contents > ol.contents a {
  color: #fff;
}

.contents-trigger {
  display: block;
  padding: 5px 5px 5px 0;
  width: 40px;
  height: 44px;
  margin: 0;
  line-height: 1;
  text-decoration: none;
  position: relative;
  border-radius: 0 4px 4px 0;
}

.contents-trigger::before, .contents-trigger::after {
  content: '';
  width: 60%;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 17px;
  left: 20%;
}

.contents-trigger::after {
  top: 27px;
}

.floating-contents > ol.contents {
  padding: 10px;
  border-radius: 0 8px 8px 0;
  display: none;
}

.floating-contents.opened > ol.contents {
  display: block;
}

.floating-contents.opened .contents-trigger::before {
  transform: rotate(45deg) translate(2px, 4px);
}

.floating-contents.opened .contents-trigger::after {
  transform: rotate(-45deg) translate(3px, -5px);
}