* {
  font-family: Din Condensed;
  margin: 0px;
  padding: 0px;
  font-size: 25px; }

h1#main_title:before {
  content: attr(data_title); }

h2#sharing_header:after {
  content: attr(data_title); }

main {
  margin: 0px auto;
  width: 80%;
  padding: 20px 0px; }

h1 {
  font-size: 40px;
  margin-bottom: 30px; }

h2 {
  font-size: 35px; }

h3 {
  font-size: 30px; }

p {
  font-size: 25px; }

b {
  font-size: 25px;
  font-weight: bold; }

form {
  display: flex;
  flex-direction: column;
  width: 100%; }

label {
  margin-bottom: 10px;
  font-weight: bold; }

.hidden {
  display: none; }

form > input, form > textarea {
  margin-bottom: 30px; }

input[type="text"], input[type="email"], textarea {
  padding: 5px;
  width: calc(100% - 2 * 5px); }

textarea {
  max-width: 100%; }

a.button {
  margin-bottom: 20px; }

button, input[type="submit"], input[type="button"], .button {
  background-color: #ffcc00;
  color: #ffffff;
  padding: 10px 20px 5px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 60px;
  border: solid;
  border-color: #ffcc00;
  transition: 0.2s;
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
  -webkit-box-shadow: 0px 1px 0.3px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 1px 0.3px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 1px 0.3px 0px rgba(0, 0, 0, 0.16);
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important; }

input {
  margin: 10px 0px;
  margin-bottom: 25px;
  width: 100%; }

textarea {
  margin: 10px 0px;
  margin-bottom: 25px; }

input[type=range] {
  -webkit-appearance: none;
  padding: 10px 0px; }

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px; }

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ffcc00;
  margin-top: -7px; }

input[type=range]:focus {
  outline: none; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc; }

label.label_file_upload {
  background: #eeeeee;
  color: #444444;
  padding: 5px 10px 0px 10px;
  border: 1px solid #444444;
  border-radius: 8px;
  cursor: pointer;
  cursor: hand;
  font-size: 19px; }

label.label_file_upload:hover {
  cursor: pointer;
  cursor: hand; }

button:hover, input[type="submit"]:hover, .button:hover {
  transform: scale(1.02);
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  cursor: pointer; }

button[disabled="true"]:hover {
  transform: scale(1);
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  box-shadow: unset;
  cursor: not-allowed; }

main {
  max-width: 1200px; }

#image_preview_wrapper_canvas, #final_image_preview_wrapper {
  overflow: hidden;
  max-height: 500px;
  max-width: 500px;
  width: 100%; }

#image_editor_preview {
  width: 80vw;
  height: 80vw;
  max-width: 500px;
  position: relative;
  overflow: hidden; }

#final_image_preview {
  max-width: 500px;
  position: relative;
  overflow: hidden; }

#sharing_buttons {
  margin-top: 20px; }

div.right {
  width: 95%;
  padding: 0px; }

#image_preview_wrapper {
  max-width: 600px;
  width: 100%;
  overflow: hidden; }
  #image_preview_wrapper img#image_preview {
    width: 100%; }

#image_preview img {
  width: 80vw;
  height: auto;
  max-width: 500px; }

#image_preview_canvas {
  position: absolute;
  height: auto;
  width: 100%; }

label {
  position: relative;
  display: inline; }

label:hover .tool_tip {
  visibility: visible;
  opacity: 1; }

label:hover .superscript {
  visibility: hidden;
  opacity: 0; }

.tool_tip:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -8px;
  width: 0;
  height: 0;
  border-right: 8px solid #ffcc00;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent; }

.tool_tip {
  font-style: italic;
  visibility: hidden;
  opacity: 0;
  transition: 0.1s ease-in-out;
  margin-left: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  width: auto;
  height: 30px;
  line-height: 30px;
  margin-top: -3px;
  color: #FFFFFF;
  background: #ffcc00;
  text-align: center;
  visibility: hidden;
  border-radius: 6px;
  font-weight: normal; }

fieldset {
  border: none;
  display: flex;
  flex-direction: column;
  margin-bottom: 25px; }

legend {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px; }

.not_shown {
  visibility: hidden; }

.superscript {
  font-size: 10px;
  opacity: 0.5;
  vertical-align: super;
  line-height: 0;
  margin-left: 5px; }

#loading {
  position: fixed;
  margin-top: auto;
  margin-bottom: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin-left: auto;
  margin-right: auto;
  z-index: 1000; }

#image_editor_preview_index {
  width: auto;
  max-width: 500px;
  position: relative;
  background-color: #cccccc;
  overflow: hidden;
  margin-bottom: 20px; }

#image_editor_preview_index img {
  width: 100%;
  height: auto;
  margin-bottom: -7px; }

.element_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px; }

:root {
  --share_padding: 10px 15px 10px 35px; }

section#sharing_buttons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; }

button.share_button {
  border-radius: 8px;
  padding: var(--share_padding);
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-size: cover;
  position: relative;
  margin: 0px 10px 10px 0px;
  line-height: 18px;
  font-weight: unset;
  border: none;
  border-color: unset; }

button.share_button:before {
  position: absolute;
  height: 20px;
  width: 20px;
  padding: 0px 0px 0px 0px;
  left: 10px;
  top: 10px;
  content: "";
  background-repeat: no-repeat;
  background-size: 20px; }

button.icon_button {
  border-radius: 30px;
  padding: var(--share_padding);
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat !important;
  background-size: cover;
  position: relative;
  margin: 0px 10px 10px 0px;
  line-height: 18px;
  font-weight: unset;
  border: none;
  border-color: unset; }

button.icon_button:before {
  position: absolute;
  height: 20px;
  width: 20px;
  padding: 0px 0px 0px 0px;
  left: 10px;
  top: 10px;
  content: "";
  background-repeat: no-repeat;
  background-size: 20px; }

button.share_button:hover {
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transform: unset; }

button:after {
  content: attr(data_text); }

button[data_color="general"] {
  background-color: #ffcc00; }

button[data_color="default"] {
  background-color: #ffcc00; }

button[data_icon="download"]:before {
  background-image: url(ressources/assets/download.svg); }

button[data_icon="reload"]:before {
  background-image: url(ressources/assets/reload.svg); }

button[data_icon="upload"]:before {
  background-image: url(ressources/assets/upload.svg); }

button[data_color="whatsapp"] {
  background-color: #25d366; }

button[data_icon="whatsapp"]:before {
  background-image: url(ressources/assets/whatsapp.svg); }

button[data_icon="checkmark"] {
  background-color: #28a745; }

button[data_icon="checkmark"]:before {
  background-image: url(ressources/assets/checkmark.svg); }

button[data_color="instagram"] {
  background: radial-gradient(circle at 30% 170%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

button[data_icon="instagram"]:before {
  background-image: url(ressources/assets/instagram-share.svg); }

button[data_color="twitter"] {
  background: #55acee; }

button[data_icon="twitter"]:before {
  background-image: url(ressources/assets/twitter-share.svg); }

button[data_color="facebook"] {
  background: #2d3283; }

button[data_icon="facebook"]:before {
  background-image: url(ressources/assets/facebook-share.svg); }

button[data_color="email"] {
  background: #444444; }

button[data_icon="email"]:before {
  background-image: url(ressources/assets/email-share.svg); }

textarea#sharing_text {
  max-width: calc(600px - 10px);
  width: calc(100% - 10px);
  clear: both; }

@media (min-width: 800px) {
  .element_wrapper {
    grid-template-columns: 500px 1fr; }
  fieldset:first-of-type {
    margin-bottom: 0px; } }

.rotation_settings {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  margin-bottom: 10px; }

.rotation {
  width: 90px !important;
  margin-right: 10px; }

#rotate_left {
  background-image: url(/ressources/assets/rotate_left.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  height: 40px; }

#rotate_right {
  background-image: url(/ressources/assets/rotate_right.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  height: 40px; }

iframe#twitter-widget-0.twitter-share-button.twitter-share-button-rendered.twitter-tweet-button {
  margin-bottom: -7px; }

section#floating_panel {
  padding: 20px;
  background-color: #f8f8f8;
  position: fixed;
  width: 75%;
  max-width: 800px;
  min-height: 100px;
  max-height: calc(100vh - 200px);
  overflow-x: scroll;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
  margin: auto;
  -webkit-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.16);
  z-index: 100; }

#darken_background {
  position: fixed;
  background-color: #000000;
  opacity: 0.7;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99; }

#progress_bar[data_percentage="1"] {
  width: 1% !important; }

#progress_bar[data_percentage="2"] {
  width: 2% !important; }

#progress_bar[data_percentage="3"] {
  width: 3% !important; }

#progress_bar[data_percentage="4"] {
  width: 4% !important; }

#progress_bar[data_percentage="5"] {
  width: 5% !important; }

#progress_bar[data_percentage="6"] {
  width: 6% !important; }

#progress_bar[data_percentage="7"] {
  width: 7% !important; }

#progress_bar[data_percentage="8"] {
  width: 8% !important; }

#progress_bar[data_percentage="9"] {
  width: 9% !important; }

#progress_bar[data_percentage="10"] {
  width: 10% !important; }

#progress_bar[data_percentage="11"] {
  width: 11% !important; }

#progress_bar[data_percentage="12"] {
  width: 12% !important; }

#progress_bar[data_percentage="13"] {
  width: 13% !important; }

#progress_bar[data_percentage="14"] {
  width: 14% !important; }

#progress_bar[data_percentage="15"] {
  width: 15% !important; }

#progress_bar[data_percentage="16"] {
  width: 16% !important; }

#progress_bar[data_percentage="17"] {
  width: 17% !important; }

#progress_bar[data_percentage="18"] {
  width: 18% !important; }

#progress_bar[data_percentage="19"] {
  width: 19% !important; }

#progress_bar[data_percentage="20"] {
  width: 20% !important; }

#progress_bar[data_percentage="21"] {
  width: 21% !important; }

#progress_bar[data_percentage="22"] {
  width: 22% !important; }

#progress_bar[data_percentage="23"] {
  width: 23% !important; }

#progress_bar[data_percentage="24"] {
  width: 24% !important; }

#progress_bar[data_percentage="25"] {
  width: 25% !important; }

#progress_bar[data_percentage="26"] {
  width: 26% !important; }

#progress_bar[data_percentage="27"] {
  width: 27% !important; }

#progress_bar[data_percentage="28"] {
  width: 28% !important; }

#progress_bar[data_percentage="29"] {
  width: 29% !important; }

#progress_bar[data_percentage="30"] {
  width: 30% !important; }

#progress_bar[data_percentage="31"] {
  width: 31% !important; }

#progress_bar[data_percentage="32"] {
  width: 32% !important; }

#progress_bar[data_percentage="33"] {
  width: 33% !important; }

#progress_bar[data_percentage="34"] {
  width: 34% !important; }

#progress_bar[data_percentage="35"] {
  width: 35% !important; }

#progress_bar[data_percentage="36"] {
  width: 36% !important; }

#progress_bar[data_percentage="37"] {
  width: 37% !important; }

#progress_bar[data_percentage="38"] {
  width: 38% !important; }

#progress_bar[data_percentage="39"] {
  width: 39% !important; }

#progress_bar[data_percentage="40"] {
  width: 40% !important; }

#progress_bar[data_percentage="41"] {
  width: 41% !important; }

#progress_bar[data_percentage="42"] {
  width: 42% !important; }

#progress_bar[data_percentage="43"] {
  width: 43% !important; }

#progress_bar[data_percentage="44"] {
  width: 44% !important; }

#progress_bar[data_percentage="45"] {
  width: 45% !important; }

#progress_bar[data_percentage="46"] {
  width: 46% !important; }

#progress_bar[data_percentage="47"] {
  width: 47% !important; }

#progress_bar[data_percentage="48"] {
  width: 48% !important; }

#progress_bar[data_percentage="49"] {
  width: 49% !important; }

#progress_bar[data_percentage="50"] {
  width: 50% !important; }

#progress_bar[data_percentage="51"] {
  width: 51% !important; }

#progress_bar[data_percentage="52"] {
  width: 52% !important; }

#progress_bar[data_percentage="53"] {
  width: 53% !important; }

#progress_bar[data_percentage="54"] {
  width: 54% !important; }

#progress_bar[data_percentage="55"] {
  width: 55% !important; }

#progress_bar[data_percentage="56"] {
  width: 56% !important; }

#progress_bar[data_percentage="57"] {
  width: 57% !important; }

#progress_bar[data_percentage="58"] {
  width: 58% !important; }

#progress_bar[data_percentage="59"] {
  width: 59% !important; }

#progress_bar[data_percentage="60"] {
  width: 60% !important; }

#progress_bar[data_percentage="61"] {
  width: 61% !important; }

#progress_bar[data_percentage="62"] {
  width: 62% !important; }

#progress_bar[data_percentage="63"] {
  width: 63% !important; }

#progress_bar[data_percentage="64"] {
  width: 64% !important; }

#progress_bar[data_percentage="65"] {
  width: 65% !important; }

#progress_bar[data_percentage="66"] {
  width: 66% !important; }

#progress_bar[data_percentage="67"] {
  width: 67% !important; }

#progress_bar[data_percentage="68"] {
  width: 68% !important; }

#progress_bar[data_percentage="69"] {
  width: 69% !important; }

#progress_bar[data_percentage="70"] {
  width: 70% !important; }

#progress_bar[data_percentage="71"] {
  width: 71% !important; }

#progress_bar[data_percentage="72"] {
  width: 72% !important; }

#progress_bar[data_percentage="73"] {
  width: 73% !important; }

#progress_bar[data_percentage="74"] {
  width: 74% !important; }

#progress_bar[data_percentage="75"] {
  width: 75% !important; }

#progress_bar[data_percentage="76"] {
  width: 76% !important; }

#progress_bar[data_percentage="77"] {
  width: 77% !important; }

#progress_bar[data_percentage="78"] {
  width: 78% !important; }

#progress_bar[data_percentage="79"] {
  width: 79% !important; }

#progress_bar[data_percentage="80"] {
  width: 80% !important; }

#progress_bar[data_percentage="81"] {
  width: 81% !important; }

#progress_bar[data_percentage="82"] {
  width: 82% !important; }

#progress_bar[data_percentage="83"] {
  width: 83% !important; }

#progress_bar[data_percentage="84"] {
  width: 84% !important; }

#progress_bar[data_percentage="85"] {
  width: 85% !important; }

#progress_bar[data_percentage="86"] {
  width: 86% !important; }

#progress_bar[data_percentage="87"] {
  width: 87% !important; }

#progress_bar[data_percentage="88"] {
  width: 88% !important; }

#progress_bar[data_percentage="89"] {
  width: 89% !important; }

#progress_bar[data_percentage="90"] {
  width: 90% !important; }

#progress_bar[data_percentage="91"] {
  width: 91% !important; }

#progress_bar[data_percentage="92"] {
  width: 92% !important; }

#progress_bar[data_percentage="93"] {
  width: 93% !important; }

#progress_bar[data_percentage="94"] {
  width: 94% !important; }

#progress_bar[data_percentage="95"] {
  width: 95% !important; }

#progress_bar[data_percentage="96"] {
  width: 96% !important; }

#progress_bar[data_percentage="97"] {
  width: 97% !important; }

#progress_bar[data_percentage="98"] {
  width: 98% !important; }

#progress_bar[data_percentage="99"] {
  width: 99% !important; }

#progress_bar[data_percentage="100"] {
  width: 100% !important; }

figure#progress {
  height: 30px;
  display: inline-block;
  width: 100% !important;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden; }
  figure#progress #progress_bar {
    background-color: #ffcc00;
    height: 30px;
    width: 0px; }