/*
 *
 * Sizes in this stylesheet are optimized for mini smarphones.
 * We use the file responsive.css to build up on this and
 * make the page look good on bigger devices too
 *
 */

/**
 *
 * Main
 *
 */

img,
embeb,
object,
video {
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

body,
html {
  margin: 0 auto 0 auto;
  width: 100%;
  padding: 0;
}

header,
footer,
div,
form,
h1 {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

body {
  text-align: center;
  margin: auto;
  width: 90%;
  background-color: #e9e2d0;
  font-size: 17px;
}

h1 {
  margin: 0.5em auto auto auto;
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  height: 2em;
  border: 2px dotted #d45d79;
  background-color: #6e5773;
  font-family: 'Monoton';
  font-size: 1.5em;
  font-weight: 500;
  color: #ea9085;
}

a {
  text-decoration: none;
}

.main {
  margin: auto;
  max-width: 1400px;
}

/**
 *
 * Input fields
 *
 */

.input-label {
  margin: 0 0.5em 0 0;
  font-family: 'Bungee Inline';
  font-size: 1.1em;
  font-weight: 300;
  color: #6e5773;
}

.input-field {
  justify-content: center;
  align-items: center;
  margin: 0 0.1em 1em 0.1em;
  width: 100%;
}

.input-form-container {
  justify-content: center;
  align-items: center;
  margin: 1.5em auto 0.5em auto;
  border: 2px dotted #d45d79;
  width: 100%;
  padding: 0.5em 0 0.5em 0;
  background-color: #eadfee;
}

.size-picker-form {
  align-items: center;
  justify-content: center;
  width: 100%;
}

input[type='number'] {
  position: relative;
  display: inline-block;
  border: 1px dotted #6e5773;
  width: 3em;
  height: 1.5em;
  font-size: 1.05em;
  color: #362b39;
}

input[type='color'] {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  -webkit-appearance: none;
}

/**
 *
 * Canvas
 *
 */

.pixel-canvas-hidden {
  display: none;
}

.pixel-canvas {
  display: table;
  table-layout: fixed;
  margin: auto;
  border: 2px solid #6e5773;
  border-collapse: collapse;
  width: 100%;
  min-width: 200px;
  max-width: 90%;
  background-color: #fff;
}

.pixel-canvas td {
  border: 0.5px solid #ffdde2;
}

.pixel-canvas-export {
  position: absolute;
  top: 0;
  left: 0;
  display: table;
  table-layout: fixed;
  margin: auto;
  border: 2px solid #6e5773;
  border-collapse: collapse;
  width: 100%;
  min-width: 200px;
  max-width: 90%;
  background-color: #ffe;
}

.pixel-canvas-export td,
.pixel-canvas-export tr {
  border: 0.5px solid #fff;
}

/**
 *
 * Buttons
 *
 */

.tool-box {
  justify-content: center;
  margin: 2em 0 1em 0;
  width: 100%;
}

.tool-box-hidden {
  display: none;
}

.btn {
  margin: 0 0.3em 0 0.3em;
  outline: 0;
  border: 2px solid #6e5773;
  border-radius: 5px;
  width: 43px;
  height: 43px;
  padding: 0;
  background-color: #fff;
  cursor: pointer;
  color: #6e5773;
}

.btn:active {
  transform: translateY(1px);
  filter: saturate(200%);
  border-color: #ea9085;
  color: #ea9085;
}

.btn:hover,
.btn:focus {
  border-color: #ea9085;
  background-color: #fff;
  color: #ea9085;
}

#btn-tool-brush.btn-pressed,
#btn-tool-eraser.btn-pressed {
  border: 2px dotted #d45d79;
  transform: translateY(1px);
  color: #d45d79;
}

.action-box {
  justify-content: center;
  margin: 1.5em 0 1em 0;
  width: 100%;
}

.action-box-hidden {
  display: none;
}

#btn-load-canvas-input {
  display: none;
}

.btn-color-picker {
  border: 2px solid #6e5773 !important;
  border-radius: 5px;
  background-color: #fff !important;
}

.btn-color-picker:active {
  border-color: #ea9085 !important;
  transform: translateY(1px);
  color: #ea9085 !important;
}

.sp-container {
  background-color: #fff !important;
}

.sp-container button {
  border-radius: 5px !important;
  border: 1px solid #c5c5c5 !important;
  background-image: none !important;
  background-color: #f6f6f6 !important;
  color: #454545 !important;
}

.sp-container button:active {
  border-color: #ea9085 !important;
  transform: translateY(1px) !important;
  filter: saturate(200%) !important;
}

.sp-container button:hover,
.sp-container button:focus {
  outline: 0 !important;
  border-color: #ea9085 !important;
  background-color: #ea9085 !important;
  color: #fff !important;
}

/**
*
* Help
*
*/

.btn-help-visible {
  display: block;
  opacity: 0.5;
  transition: opacity 1s linear;
}

.btn-help-hidden {
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

#btn-help:active {
  transform: scale(1.1);
}

#btn-help:focus {
  color: #6e5773;
}

#btn-help {
  position: fixed;
  top: 10px;
  right: 5px;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  -moz-box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  border: none;
  width: 40px;
  height: 40px;
}

/**
*
* Back to top
*
*/

#btn-back-to-top {
  position: fixed;
  bottom: 10px;
  right: 5px;
  -webkit-box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  -moz-box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  box-shadow: 0px 0px 11px 0px rgba(205, 171, 219, 1);
  border: none;
  width: 40px;
  height: 40px;
}

#btn-back-to-top:focus {
  color: #6e5773;
}

.btn-back-to-top-visible {
  display: block;
  opacity: 0.75;
  transition: opacity 1s linear;
}

.btn-back-to-top-hidden {
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.btn-back-to-top:active {
  transform: scale(1.1);
}

/**
 *
 * Hacks
 *
 */

/*
 	Hack needed for compensating the fact that Firefox
 	does not compute the height (width)=height (width) property + padding
*/
@-moz-document url-prefix() {
  .btn-color-picker {
    width: 43px !important;
    height: 43px !important;
  }
}

/*
 	Hack needed since for some reason the icon on this button was not centered.
 	Weirdly enough, a padding 0 solves the issue
*/
@-moz-document url-prefix() {
  .btn-reset-canvas {
    padding: 0 !important;
  }
}

/*
	Hack for Chrome so that up/down arrows for input number
	are always shown
*/
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  opacity: 1;
}

/**
 *
 * Footer
 *
 */

footer {
  margin: 1em 0 0 0;
  border-top: 1px dotted #d45d79;
  width: 100%;
  padding: 0.4em 0.4em 0.4em 0.4em;
}

footer ul {
  margin: 0;
  width: 100%;
  padding: 0 0 10px 0;
}

footer li {
  text-align: center;
  display: inline;
  margin: 0 0.5em;
}

footer a {
  text-decoration: none;
  color: #56445a;
}

footer a:hover {
  font-size: 1.05em;
  color: #ea9085;
}

.footer-credits,
.footer-samples {
  align-content: center;
  margin: 5px 0 0 0;
  width: 100%;
  padding: 0 0 10px 0;
  font-size: 0.8em;
}

.footer-credits-title,
.footer-samples-title {
  font-weight: 600;
}

/**
 *
 * Dialog
 *
 */

/*
 	Some of these changes can be done by using jQuery UI dialog classes option.
 	Somehow, I couldn't replace the CSS values by using this method.
 	I decided to change the original CSS classes directly for consistency and readability
*/

#dialog {
  display: none;
}

.ui-widget {
  font-size: 0.65em;
}

.dialog-list {
  margin: 0 0 0 2em;
  padding: 0;
  text-align: left;
}

.dialog-list-element {
  margin: 0 0 0.5em 0;
}

.dialog-text-intro {
  margin: 0 0 1em 0;
  width: 100%;
  text-align: left;
}

.dialog-text {
  margin: 0 0 1em 0;
  width: 100%;
  text-align: center;
}

.dialog-list-text-below {
  margin: 0;
}

.ui-dialog {
  width: 100% !important;
  min-width: 240px;
  max-width: 600px;
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane {
  width: 100%;
}

.ui-dialog-title {
  width: 100% !important;
}

.ui-widget-header {
  background-color: #6e5773;
  color: #f98c84;
}

.ui-dialog .ui-dialog-buttonpane {
  display: inline-block;
  border-top: 1px dotted #d45d79;
  padding: 0.3em 0.4em 0.5em 0.4em;
  text-align: center;
}

.ui-dialog .ui-dialog-buttonset {
  float: none !important;
  display: inline-block;
  text-align: center;
}

.ui-button:active {
  transform: translateY(1px);
  filter: saturate(200%);
  border-color: #ea9085;
}

.ui-button:hover,
.ui-button:focus {
  outline: 0;
  border-color: #ea9085;
  background-color: #ea9085;
  color: #fff;
}

.ui-widget.ui-widget-content {
  border: 1px dotted #d45d79;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-dialog .ui-dialog-content {
  justify-content: center;
  width: 100% !important;
}

/**
 *
 * Spinner
 *
 */

.spinner-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 0.3em dotted #d45d79;
  background-color: #6e5773;
}

.spinner-container-hidden {
  display: none;
  text-align: center;
}

.spinner {
  position: relative;
  margin: 0;
  width: 100%;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  font-family: 'Monoton';
  font-size: 6.5em;
  font-weight: 500;
  color: #ea9085;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}