/* Font face for dialogue text */
@font-face {
  font-family: 'dragalialost_en';
  src: url('fonts/dragalialosten.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'dragalialost_ja';
  src: url('fonts/dragalialostjp.otf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'dragalialost_zh_tw';
  src: url('fonts/dragalialostzh_tw.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'dragalialost_zh_cn';
  src: url('fonts/dragalialostzh_cn.ttf');
  font-weight: 400;
  font-style: normal;
}

html {
  scroll-behavior: smooth;
}

#toTop {
  display: none;
  position: fixed;
  width: 40px;
  height: 40px;
  background-color: #212529;
  border-radius: 50%;
  right: 20px;
  bottom: 15px;
  text-align: center;
  color: transparent;
  text-decoration: none;
  font-weight: bold;
  font-size: 25px;
  line-height: 38px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 9l3 -3 3 3'/%3e%3c/svg%3e");
}

body {
  background-color: #eee;
  color: #434343;
  padding: 0 60px;
  margin: 10px;
  border: 4px solid #434343;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "黑體-繁", "Heiti TC",
    "蘋果儷中黑", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  overflow-x: hidden;
  min-height: 680px;
}

#preview {
  position: fixed;
  z-index: 99;
}

h1 {
  font-size: 1.75em;
  padding: 20px 0;
  text-transform: uppercase;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "黑體-繁", "Heiti TC",
    "蘋果儷中黑", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

section {
  margin-left: 325px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.hidden {
  display: none !important;
}

footer {
  margin: 20px 0;
  text-align: center;
}

canvas  {
  background-image: url("images/loading.gif");
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 25%;
  background-color: black;
  margin: 15px 0;
}

/* Input settings */

section > div {
  margin: 0 10px;
}

label {
  display: block;
  margin: 10px 0;
}

.input-group {
  display: flex;
  align-items: center;
}

input {
  font-family: 'Lato', Arial, sans-serif;
}

input ~ label {
  display: inline;
  margin-right: 1rem;
  cursor: pointer;
}

input[type=number], input[type=text], textarea, input[type=file] {
  display: block;
  width: 100%;
  padding: .375rem;
  font-size: 1rem;
  line-height: 1.2;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "黑體-繁", "Heiti TC", "蘋果儷中黑", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-sizing: border-box;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

input[type=range]:hover {
  opacity: 1;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: rgb(100, 100, 100);
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: rgb(100, 100, 100);
  cursor: pointer; /* Cursor on hover */
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

.tab input[type=range]::-webkit-slider-thumb {
  background: #eee;
}

.tab input[type=range]::-moz-range-thumb {
  background: #eee;
}

input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px rgb(0, 78, 88),0 0 0 .25rem rgba(13, 237, 253, 0.647);
}

input[type=number] {
  width: 4em;
  padding: 0.25rem;
  margin-right: 0.5rem;
}

input[type=number]:focus, input[type=text]:focus, textarea:focus, select:focus, .button:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 1px rgb(0, 78, 88),0 0 0 .25rem rgba(13, 237, 253, 0.647);
}

input[type=file]::file-selector-button {
  padding: .375rem .75rem;
  margin: -.375rem -.75rem;
  -webkit-margin-end: .75rem;
  margin-inline-end: .75rem;
  color: #212529;
  background-color: #e9ecef;
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-inline-end-width: 1px;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

::file-selector-button {
  font: inherit;
}

input[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}

input[type=file]:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: #dde0e3;
}

input[type=file] {
  overflow: hidden;
  padding: .25rem .5rem;
  font-size: .875rem;
}

input[type=checkbox], input[type=radio] {
  width: 18px;
  height: 18px;
  margin: 5px 0.25rem 0 0;
  cursor: pointer;
}

select {
  display: block;
  width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .5rem;
  -moz-padding-start: calc(0.75rem - 3px);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.2;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  word-wrap: normal;
}

select.language-select {
  width: 150px;
  margin: 15px 10px 0 10px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-globe2' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539a8.372 8.372 0 0 1-1.198-.49 7.01 7.01 0 0 1 2.276-1.52 6.7 6.7 0 0 0-.597.932 8.854 8.854 0 0 0-.48 1.079zM3.509 7.5H1.017A6.964 6.964 0 0 1 2.38 3.825c.47.258.995.482 1.565.667A13.4 13.4 0 0 0 3.508 7.5zm1.4-2.741c.808.187 1.681.301 2.591.332V7.5H4.51c.035-.987.176-1.914.399-2.741zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5H7.5v2.409c-.91.03-1.783.145-2.591.332a12.343 12.343 0 0 1-.4-2.741zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696A12.63 12.63 0 0 1 7.5 11.91v3.014c-.67-.204-1.335-.82-1.887-1.855a7.776 7.776 0 0 1-.395-.872zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964a9.083 9.083 0 0 0-1.565.667A6.963 6.963 0 0 1 1.018 8.5h2.49a13.36 13.36 0 0 0 .437 3.008zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909c.81.03 1.577.13 2.282.287-.12.312-.252.604-.395.872-.552 1.035-1.218 1.65-1.887 1.855V11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5h-2.49a13.361 13.361 0 0 0-.437-3.008 9.123 9.123 0 0 0 1.565-.667A6.963 6.963 0 0 1 14.982 7.5zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343c-.705.157-1.473.257-2.282.287V1.077c.67.204 1.335.82 1.887 1.855.143.268.276.56.395.872z'%3E%3C/path%3E%3C/svg%3E");
}

textarea {
  resize: vertical;
}

.button {
  display: inline-block;
  margin: .75rem 0;
  font-size: 1em;
  padding: 0.5em;
  background-color: rgb(27, 79, 121);
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "黑體-繁", "Heiti TC", "蘋果儷中黑", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

.button:hover {
  background-color: rgb(118, 89, 245);
}

.button.selected {
  background-color: rgb(147, 184, 255);
}

.button.selected:hover {
  background-color: rgb(168, 198, 255);
}

.button.delete {
  background-color: rgb(233, 64, 64);
}

.button.delete:hover {
  background-color: rgb(255, 42, 35);
}
.tab h2 {
  font-size: 1.2em;
  margin: 0;
  color: white;
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-bar li {
  padding: 0.5rem 0.75rem;
  margin: 0 4px 0 0;
  font-size: 0.95rem;
  border: none;
  border-radius: 5px 5px 0 0;
  background-color: rgb(115, 88, 63);
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, "PingFang TC", "黑體-繁", "Heiti TC",
    "蘋果儷中黑", "Apple LiGothic Medium", "微軟正黑體", "Microsoft JhengHei", sans-serif;
  color: white;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  width: 80px;
  height: 1rem;
  text-align: center;
  overflow: hidden;
}

#addLayer {
  width: initial;
}

.tab-bar li:hover {
  background-color: rgb(255, 133, 62);
}

.tab-bar li.active {
  background-color: #f19544;
}

.tab-bar li.dragging {
  border-radius: 5px;
  background-color: rgb(84, 104, 98);
  box-shadow: 5px 5px rgba(128, 128, 128, 0.25);
  cursor: grab;
  z-index: 100;
}

.tab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding: 20px 0px;
  background-color: #f19544;
  display: none;
}

.tab.active {
  display: flex;
}

.tab label {
  color: white;
}

.tab img {
  max-height: 250px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.tab > div {
  margin: 0 1em;
}

@media (max-width: 768px) {
  #preview {
    position: initial;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }

  section {
    margin-left: 0;
  }

  body {
    padding: 0 5px;
  }

  h1 {
    text-align: center;
  }

  #toTop {
    display: block;
  }

  input[type=radio] ~ label {
    margin-right: 10px;
  }

  .tab-bar li {
    box-sizing: border-box;
    padding: 7px 16px;
    margin: 0 2px 0 0;
    font-size: 14px;
    width: calc((100% / 3) - 4px);
    height: 32px;
  }
}