/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* You can add global styles to this file, and also import other style files */
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./motes-sdk/motes-styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --motes-dark: #222;
  --motes-dark-blue: #222428;
  --motes-gold: #e8c15f;
  --motes-orange:#ffb056;
  --motes-green: #3cba54;
  --motes-green-dark: #2fa745;
  --motes-red: #a52a2a;
  --motes-blue: #00539b;
  --motes-blue-link: #5F86E8;
  --motes-white: #eeeeee;
  --motes-light-gray: rgb(245, 245, 245);
  --motes-gray: #b3b3b3;
  --m-tabs-height: 62px;
  --m-header-height: 55px;
  --motes-black: #222222;
  --motes-light-black: #333333;
  --motes-yellow: #e8c15f;
  --motes-bright-yellow: #f7c552;
  --motes-dark-yellow: #DF9E3C;
  --motes-light-blue: #5f86e8;
  --motes-dark-gray: #3b3b3b;
  --motes-darker-gray: #454545;
  --motes-light-red: #E85F5F;
  --motes-dark-red: #C9544D;
  --motes-light-green: #62B154;
  --motes-lighter-gray: #C9C9C9;
  --motes-light-orange: #ff8f51;
  --shadow-color: 34, 34, 34;
  --shadow-elevation-low:
      0.3px 0.5px 0.7px rgba(var(--shadow-color), 0.34),
      0.6px 1.2px 1.5px -1px rgba(var(--shadow-color), 0.34),
      1.5px 3px 3.5px -2px rgba(var(--shadow-color), 0.34);
  --shadow-elevation-medium:
      0.3px 0.5px 0.7px rgba(var(--shadow-color), 0.36),
      0.8px 1.6px 2px -0.8px rgba(var(--shadow-color), 0.36),
      2.1px 4.1px 5.2px -1.7px rgba(var(--shadow-color), 0.36),
      5px 10px 12.6px -2.5px rgba(var(--shadow-color), 0.36);
  --shadow-elevation-high:
      0.3px 0.5px 0.7px rgba(var(--shadow-color), 0.34),
      1.5px 2.9px 3.7px -0.4px rgba(var(--shadow-color), 0.34),
      2.7px 5.4px 6.8px -0.7px rgba(var(--shadow-color), 0.34),
      4.5px 8.9px 11.2px -1.1px rgba(var(--shadow-color), 0.34),
      7.1px 14.3px 18px -1.4px rgba(var(--shadow-color), 0.34),
      11.2px 22.3px 28.1px -1.8px rgba(var(--shadow-color), 0.34),
      17px 33.9px 42.7px -2.1px rgba(var(--shadow-color), 0.34),
      25px 50px 62.9px -2.5px rgba(var(--shadow-color), 0.34);
}

.dark-green-theme {
  --motes-button-background: var(--motes-green);
  --motes-button-border: var(--motes-white);
  --motes-highlight-color: var(--motes-gold);
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-button-color: white;
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-highlight-color-dark-hover: #55a7ff;
}
.dark-green-theme img {
  width: 100%;
}

.golden-theme {
  --motes-button-background: var(--motes-gold);
  --motes-button-border: var(--motes-gold);
  --motes-highlight-color: var(--motes-gold);
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-button-color: #222;
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-highlight-color-dark-hover: #55a7ff;
  --motes-off-white: #eeeeee;
  --primary-color: var(--motes-bright-yellow);
  --secondary-color: var(--motes-button-color);
  --tertiary-color: rgb(114, 114, 114);
  --light-bg-color: var(--motes-white);
  --dark-bg-color: var(--motes-black);
  --darker-bg-color: #111;
}
.golden-theme img {
  width: 100%;
}
.golden-theme .motes-input {
  margin: var(--motes-padding) 0;
}

.dark-blue-theme {
  --motes-button-background: var(--motes-blue);
  --motes-button-border: var(--motes-white);
  --motes-highlight-color: var(--motes-gold);
  --motes-highlight-color-hover: #e8c15f;
  --motes-button-color: white;
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-highlight-color-dark-hover: #55a7ff;
  --primary-color: var(--motes-highlight-color-dark);
  --secondary-color: var(--motes-button-color);
  --tertiary-color: var(--motes-highlight-color-dark-hover);
  --light-bg-color: var(--motes-white);
  --dark-bg-color: var(--motes-black);
  --darker-bg-color: #111;
  --text-font: "Roboto Regular", sans-serif;
  font-family: Roboto;
  color: #ccc;
}
.dark-blue-theme .button-circled:hover {
  background-color: var(--motes-highlight-color-dark-hover);
}
.dark-blue-theme img {
  width: 100%;
}
.dark-blue-theme a {
  color: var(--motes-highlight-color);
  text-decoration: none;
}
.dark-blue-theme a:hover {
  color: var(--motes-highlight-color-hover);
}
.dark-blue-theme p {
  padding-top: 10px;
  padding-bottom: 10px;
}
.dark-blue-theme .motes-list .motes-card a, .dark-blue-theme .motes-list .motes-card-transparent a {
  color: #3b5998;
}
.dark-blue-theme .row {
  margin-right: 0px;
  margin-left: 0px;
}
.dark-blue-theme .input-container input, .dark-blue-theme .input-container textarea, .dark-blue-theme .input-container select {
  background-color: rgba(255, 255, 255, 0.658);
  font-family: "Open Sans", sans-serif;
}
.dark-blue-theme #login-container input {
  color: black;
}
.dark-blue-theme #login-overlay-container {
  overflow: auto;
}

.dark-golden-theme {
  --motes-button-background: var(--motes-red);
  --motes-button-border: var(--motes-gold);
  --motes-highlight-color: var(--motes-gold);
  --motes-highlight-color-dark: var(--motes-blue);
}
.dark-golden-theme img {
  width: 100%;
}

.light-golden-theme {
  --motes-button-background: var(--motes-red);
  --motes-button-border: var(--motes-gold);
  --motes-highlight-color: var(--motes-gold);
  --motes-highlight-color-dark: var(--motes-blue);
  --motes-white: #ffffff;
  --motes-off-white: #eeeeee;
  --primary-color: var(--motes-bright-yellow);
  --secondary-color: var(--motes-black);
  --tertiary-color: var(--motes-light-blue);
  --light-bg-color: var(--motes-white);
  --dark-bg-color: var(--motes-light-black);
  --header-font: "Century Gothic", Gothic, sans-serif;
  --text-font: "Roboto Regular", sans-serif;
}
.light-golden-theme h1 {
  font-size: 70px;
  line-height: 85px;
}
.light-golden-theme h2 {
  font-size: 55px;
  line-height: 67px;
}
.light-golden-theme h1,
.light-golden-theme h2,
.light-golden-theme h3 {
  margin-top: 10px;
  margin-bottom: 20px;
}
.light-golden-theme h4 {
  margin: 0;
}
.light-golden-theme h4.required::after {
  content: "*";
  color: #E85F5F;
}
.light-golden-theme .pre-title {
  font-size: 35px;
  line-height: 43px;
}
.light-golden-theme h3 {
  font-size: 35px;
  line-height: 43px;
}
.light-golden-theme p,
.light-golden-theme ol,
.light-golden-theme ul,
.light-golden-theme h4 {
  font-size: 20px;
  line-height: 30px;
}
.light-golden-theme p {
  margin-top: 0;
  margin-bottom: 20px;
}
.light-golden-theme p.small-body {
  font-size: 13px;
  line-height: 20px;
}
@media only screen and (max-width: 1024px) {
  .light-golden-theme h1 {
    font-size: 55px;
    line-height: 67px;
  }
  .light-golden-theme h2 {
    font-size: 35px;
    line-height: 43px;
  }
}
@media only screen and (max-width: 600px) {
  .light-golden-theme h1 {
    font-size: 40px;
    line-height: 49px;
  }
  .light-golden-theme h2 {
    font-size: 30px;
    line-height: 37px;
  }
  .light-golden-theme .pre-title {
    font-size: 24px;
    line-height: 29px;
  }
  .light-golden-theme h3 {
    font-size: 25px;
    line-height: 30px;
  }
  .light-golden-theme p,
  .light-golden-theme ol,
  .light-golden-theme ul,
  .light-golden-theme h4 {
    font-size: 16px;
    line-height: 23px;
  }
}
.light-golden-theme h1,
.light-golden-theme h2,
.light-golden-theme h3,
.light-golden-theme .pre-title {
  font-family: var(--header-font);
  font-weight: bold;
  word-break: break-word;
}
.light-golden-theme p,
.light-golden-theme ol,
.light-golden-theme ul,
.light-golden-theme h4 {
  font-family: var(--text-font);
  white-space: normal;
  font-weight: normal;
}
.light-golden-theme h4 {
  font-weight: bold;
}
.light-golden-theme ul {
  padding-left: 1em;
}
.light-golden-theme h1::after,
.light-golden-theme h2::after {
  content: "";
  /* This is necessary for the pseudo element to work. */
  display: block;
  /* This will put the pseudo element on its own line. */
  width: 100px;
  /* Change this to whatever width you want. */
  padding-top: var(--motes-padding);
  /* This creates some space between the element and the border. */
  border-bottom: 2px solid var(--primary-color);
}
.light-golden-theme h1.center,
.light-golden-theme h2.center {
  text-align: center;
}
.light-golden-theme h1.center::after,
.light-golden-theme h2.center::after {
  margin: 0 auto;
}
.light-golden-theme h1.left,
.light-golden-theme h2.left {
  text-align: left;
}
.light-golden-theme h1.left::after,
.light-golden-theme h2.left::after {
  margin: 0;
}
.light-golden-theme button {
  font-family: var(--header-font);
}
@media (hover: hover) {
  .light-golden-theme a:hover > p,
  .light-golden-theme p a:hover {
    text-decoration: underline;
  }
}
.light-golden-theme .motes-input,
.light-golden-theme .motes-select {
  border: 2px solid white;
  font-family: var(--text-font);
  margin: var(--motes-padding) 0;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  font-size: 16px;
  padding: var(--motes-padding);
  min-height: 43px;
}
.light-golden-theme .motes-input[type=search]::-webkit-search-decoration, .light-golden-theme .motes-input[type=search]::-webkit-search-cancel-button, .light-golden-theme .motes-input[type=search]::-webkit-search-results-button, .light-golden-theme .motes-input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.light-golden-theme .right-svg {
  position: relative;
}
.light-golden-theme .right-svg select {
  appearance: none;
}
.light-golden-theme .right-svg svg-icon {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--secondary-color);
  right: var(--motes-padding);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s;
}
.light-golden-theme .right-svg svg-icon span {
  display: flex;
}
.light-golden-theme .right-svg svg-icon:hover {
  transform: scale(1.2);
}
.light-golden-theme .motes-select {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px top 18px, right 11px top 18px;
  background-size: 5px 5px, 5px 5px;
}
.light-golden-theme .scroll-y {
  overflow-y: auto;
}
.light-golden-theme .scroll-x {
  overflow-x: auto;
}
.light-golden-theme .scroll-y,
.light-golden-theme .scroll-x {
  scrollbar-width: thin;
  scrollbar-color: var(--motes-lighter-gray) transparent;
}
.light-golden-theme .scroll-y::-webkit-scrollbar,
.light-golden-theme .scroll-x::-webkit-scrollbar {
  width: 10px;
  background-color: transparent;
}
.light-golden-theme .scroll-y::-webkit-scrollbar-thumb,
.light-golden-theme .scroll-x::-webkit-scrollbar-thumb {
  background: var(--motes-lighter-gray);
  background-clip: content-box;
  border: solid 2px transparent;
}
.light-golden-theme .creator-card {
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px;
  border-radius: var(--border-radius);
  background-color: var(--motes-dark-gray);
  transition: 0.2s background-color;
}
.light-golden-theme .creator-card:hover {
  background-color: var(--motes-darker-gray);
}
.light-golden-theme select.creator-select {
  display: inline-block;
  font-family: var(--header-font);
  text-decoration: none;
  font-size: 16px;
  color: var(--primary-color);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100px;
  min-height: 43px;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  padding: var(--motes-padding);
  margin: var(--motes-padding) 0;
  cursor: pointer;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px top 18px, right 11px top 18px;
  background-size: 5px 5px, 5px 5px;
}
.light-golden-theme select.creator-select.short {
  min-height: 32px;
  padding: 5px 25px 5px 10px;
  background-position: right 16px top 13px, right 11px top 13px;
}
.light-golden-theme select.creator-select.full-width {
  width: 100%;
}
.light-golden-theme select.creator-select.white {
  border: solid 1px var(--motes-gray);
  background-color: var(--motes-white);
  color: initial;
  font-weight: initial;
  font-family: var(--text-font);
}

@font-face {
  font-family: Gothic;
  src: url('CenturyGothic.ttf');
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url('Roboto-Regular.ttf');
  font-display: swap;
}
:root {
  --border-radius: 10px;
  --mini-spacing: 5px;
  --small-spacing: 10px;
  --medium-spacing: 15px;
  --large-spacing: 20px;
  --mega-spacing: 40px;
  --motes-padding: var(--small-spacing);
  --upload-background-gradient: transparent linear-gradient(180deg, #FFDC8B 0%, #EFBE61 100%) 0% 0% no-repeat padding-box;
}

:root {
  --box-shadow: 0 0 15px rgba(50,50,50,.2), 0 0 1px rgba(20,20,20,.4);
}

:root {
  --max-page-width: 550px;
}

* {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: transparent; /* prevent tap highlight color / shadow */
}

*:focus {
  outline: 0 solid !important;
  outline-offset: 0 !important;
}

html, body {
  overscroll-behavior: none; /* Disable Android Chrome pull to refresh 'feature'/disaster */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  font-family: "Roboto Regular", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: "Century Gothic", Gothic, sans-serif;
}

p, ol, ul {
  font-family: "Roboto Regular", sans-serif;
  white-space: normal;
}

a {
  cursor: pointer;
  text-decoration: none;
}

.dark-bg, .motes-card-dark {
  background-color: var(--dark-bg-color);
  color: var(--motes-white);
}
.dark-bg a, .motes-card-dark a {
  color: var(--primary-color);
}
.dark-bg a:hover, .motes-card-dark a:hover {
  color: var(--motes-highlight-color);
}
.dark-bg .button-outline, .motes-card-dark .button-outline {
  color: var(--primary-color);
}

.light-bg, .motes-chip, .motes-card, .motes-card-transparent {
  background-color: var(--light-bg-color);
  color: var(--motes-black);
}
.light-bg a, .motes-chip a, .motes-card a, .motes-card-transparent a {
  color: var(--tertiary-color);
}
.light-bg a:hover, .motes-chip a:hover, .motes-card a:hover, .motes-card-transparent a:hover {
  color: var(--secondary-color);
}
.light-bg .button-outline, .motes-chip .button-outline, .motes-card .button-outline, .motes-card-transparent .button-outline {
  color: initial;
}

.motes-p {
  margin: 10px !important;
  font-family: "Roboto Regular", sans-serif !important;
  line-height: initial !important;
  font-size: 15px !important;
}

.motes-button, .motes-button-gold, .motes-button-red, .motes-button-green, .motes-button-blue, .motes-action-button, .motes-button-full-width, .motes-button-icon-big, .motes-button-icon, .motes-button-icon-right, .motes-button-outline, .motes-button-outline-on-white {
  border: 2px solid var(--motes-button-border);
  background: var(--motes-button-background);
  color: var(--motes-button-color);
  font-size: 15px;
  border-radius: 10px;
  margin: 10px 0;
  font-family: "Century Gothic", Gothic, sans-serif;
  text-transform: uppercase;
  padding: var(--small-spacing);
  box-sizing: 0 0 15px rgba(50, 50, 50, 0.2), 0 0 1px rgba(20, 20, 20, 0.4);
  transition: 0.2s;
  min-height: 43px;
}

.motes-button-outline, .motes-button-outline-on-white {
  background: transparent;
  border-color: var(--motes-button-border);
  color: var(--motes-button-background);
}

.motes-button-outline-on-white {
  color: var(--motes-dark);
}

.motes-button-icon svg-icon, .motes-button-icon-right svg-icon {
  float: left;
  transform: scale(1.1) translateY(10%);
  margin-right: 5px;
}

.motes-button-icon-big svg-icon {
  float: left;
  transform: scale(1.5) translateY(5%);
  margin-right: 5px;
  line-height: 20px;
}

.motes-button-icon-right svg-icon {
  float: right;
  margin-left: 5px;
  margin-right: 0px;
}

.motes-button-full-width {
  width: 100%;
}

.center-button {
  display: block;
  margin: auto;
  width: 100%;
  margin-top: 12px;
}

/** Motes button like href link **/
a.motes-button, a.motes-button-gold, a.motes-button-red, a.motes-button-green, a.motes-button-blue, a.motes-action-button, a.motes-button-outline, a.motes-button-outline-on-white, a.motes-button-icon, a.motes-button-icon-big, a.motes-button-icon-right, a.motes-button-full-width {
  display: flex;
  justify-content: center;
}

a.motes-button:hover, a.motes-button-gold:hover, a.motes-button-red:hover, a.motes-button-green:hover, a.motes-button-blue:hover, a.motes-action-button:hover, a.motes-button-outline:hover, a.motes-button-outline-on-white:hover, a.motes-button-icon:hover, a.motes-button-icon-big:hover, a.motes-button-icon-right:hover, a.motes-button-full-width:hover {
  color: var(--motes-button-color);
}

.motes-action-button {
  position: relative;
  overflow: hidden;
}

.motes-action-button:disabled {
  opacity: 0.7;
  background: grey !important;
  border-color: grey;
  transition: 0.2s;
}

.motes-action-button:enabled:hover {
  text-shadow: 0 0 3px black;
  transition: 0.2s;
}

.motes-action-button:enabled::after {
  content: "";
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: button-animation-after 10s infinite alternate;
  transform: rotate(90deg);
}

.motes-button-blue {
  background: var(--motes-light-blue);
  color: white;
  border: none;
}

.motes-button-green {
  background: var(--motes-green);
  color: white;
  border: none;
}

.motes-button-red {
  background: var(--motes-red);
  color: white;
  border: none;
}

.motes-button-gold {
  background: var(--motes-gold);
  color: white;
}

.motes-button:disabled, .motes-button-outline:disabled, .motes-button-outline-on-white:disabled, .motes-button-icon:disabled, .motes-button-icon-big:disabled, .motes-button-icon-right:disabled, .motes-button-full-width:disabled, .motes-action-button:disabled, .motes-button-blue:disabled, .motes-button-green:disabled, .motes-button-red:disabled, .motes-button-gold:disabled {
  opacity: 0.8;
  pointer-events: none;
}

@media (hover: hover) {
  .motes-button:hover, .motes-button-outline:hover, .motes-button-outline-on-white:hover, .motes-button-icon:hover, .motes-button-icon-big:hover, .motes-button-icon-right:hover, .motes-button-full-width:hover, .motes-action-button:hover, .motes-button-blue:hover, .motes-button-green:hover, .motes-button-red:hover, .motes-button-gold:hover {
    cursor: pointer;
    transform: scale(1.04);
  }
}
.motes-button:not(:active), .motes-button-outline:not(:active), .motes-button-outline-on-white:not(:active), .motes-button-icon:not(:active), .motes-button-icon-big:not(:active), .motes-button-icon-right:not(:active), .motes-button-full-width:not(:active), .motes-action-button:not(:active), .motes-button-blue:not(:active), .motes-button-green:not(:active), .motes-button-red:not(:active), .motes-button-gold:not(:active) {
  animation-name: hoverAnimation;
  animation-duration: 2s;
}

@keyframes hoverAnimation {
  0% {
    transform: scale(1.03);
  }
}
.motes-button:disabled, .motes-button-outline:disabled, .motes-button-outline-on-white:disabled, .motes-button-icon:disabled, .motes-button-icon-big:disabled, .motes-button-icon-right:disabled, .motes-button-full-width:disabled, .motes-action-button:disabled, .motes-button-blue:disabled, .motes-button-green:disabled, .motes-button-red:disabled, .motes-button-gold:disabled {
  opacity: 0.4;
}

a.motes-link {
  color: var(--motes-highlight-color-dark) !important;
}

a.motes-link:hover {
  color: var(--motes-highlight-color-dark-hover) !important;
}

.motes-card, .motes-card-transparent {
  border: 2px solid var(--motes-white);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px auto;
  box-shadow: var(--shadow-elevation-low);
}
.motes-card .motes-card-header, .motes-card-transparent .motes-card-header {
  font-size: 17px;
  text-transform: uppercase;
  font-family: "Century Gothic", Gothic, sans-serif;
  background: inherit;
  box-shadow: 0 0 3px rgba(50, 50, 50, 0.1);
  padding: var(--small-spacing);
  margin: 20px 0 10px 0;
}
.motes-card .motes-input, .motes-card-transparent .motes-input {
  background: #ece8e8;
  border-color: #ece8e8;
}

.motes-card-dark {
  border: 2px solid var(--motes-white);
  border-radius: 10px;
  overflow: hidden;
  margin: 10px auto;
  box-shadow: var(--shadow-elevation-low);
  background: var(--motes-dark-gray);
  border: none;
  text-align: center;
  padding: var(--small-spacing);
}
.motes-card-dark .motes-card-header {
  font-size: 17px;
  text-transform: uppercase;
  font-family: "Century Gothic", Gothic, sans-serif;
  background: inherit;
  box-shadow: 0 0 3px rgba(50, 50, 50, 0.1);
  padding: var(--small-spacing);
  margin: 20px 0 10px 0;
}
.motes-card-dark .motes-input {
  background: #ece8e8;
  border-color: #ece8e8;
}
.motes-card-dark .motes-card-header {
  background: inherit;
}
.motes-card-dark .motes-input {
  background: var(--motes-white);
}

.motes-card-transparent {
  padding: 20px;
  transition: 0.2s;
  background: rgba(255, 255, 255, 0.6);
  color: #333;
  text-shadow: none !important;
  height: 100%;
}

.motes-active-card {
  cursor: pointer;
}
.motes-active-card a {
  color: inherit;
}

.motes-active-card:hover {
  background: rgba(255, 255, 255, 0.3);
  color: var(--motes-gold);
  transition: 0.2s;
}
.motes-active-card:hover a {
  text-decoration: none;
}

ul.motes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.motes-input {
  padding: 5px;
  margin: 5px 0;
  background: rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: block;
  width: 100%;
}

.motes-chip {
  padding: 5px 10px;
  border-radius: 20px;
  margin: 0 5px 5px 0;
  display: inline-block;
}
.motes-chip .motes-chip-close {
  margin-left: 3px;
  transition: 0.2s;
  display: inline-block;
}
.motes-chip .motes-chip-close:hover {
  transform: scale(1.2);
  transition: 0.2s;
  cursor: pointer;
}

.motes-rainbow-bg {
  background: rgba(20, 20, 25, 0.9);
  background: linear-gradient(310deg, rgba(50, 20, 20, 0.9), rgba(20, 50, 20, 0.9), rgba(20, 20, 50, 0.9));
}

.motes-margin {
  margin: 10px;
}

.motes-padding {
  padding: var(--small-spacing);
}

.motes-margin-right {
  margin-right: 10px;
}

.motes-margin-left {
  margin-left: 10px;
}

.motes-max-width {
  max-width: 550px;
}

.motes-box-shadow {
  box-shadow: 0 0 15px rgba(50, 50, 50, 0.2), 0 0 1px rgba(20, 20, 20, 0.4);
}

.motes-header-font {
  font-family: "Century Gothic", Gothic, sans-serif;
}

.motes-red-bg {
  background: var(--motes-red);
}

.motes-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-upload-background {
  background: var(--upload-background-gradient);
}

@media all and (max-width: 500px) {
  .motes-hide-on-mobile {
    display: none;
  }
}
@media all and (min-width: 501px) {
  .motes-hide-on-desktop {
    display: none;
  }
}
::-webkit-scrollbar {
  z-index: 1;
  background: #111;
  position: relative;
}

::-webkit-scrollbar-thumb {
  background-color: #444;
  border: 3px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
}

@keyframes button-animation-after {
  10% {
    transform: translate(-150%, -150%) rotate(90deg);
  }
  50% {
    transform: translate(90%, 90%) rotate(120deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(120deg);
  }
}
@keyframes button-animation {
  from {
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
  }
  to {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0.3);
  }
}
button:hover.button-filled, button:active.button-filled {
  border-color: var(--motes-dark-yellow);
  background-color: var(--motes-dark-yellow);
}
button:hover.button-filled.red, button:active.button-filled.red {
  border-color: var(--motes-dark-red);
  background-color: var(--motes-dark-red);
}
button:hover.button-filled.black, button:active.button-filled.black {
  border-color: var(--motes-darker-gray);
  background-color: var(--motes-darker-gray);
}
button:hover.button-filled.gray, button:active.button-filled.gray {
  border-color: #323232;
  background-color: #323232;
}
button:hover.button-outline, button:active.button-outline {
  background-color: rgba(247, 197, 82, 0.15);
}
button:hover.button-outline.red, button:active.button-outline.red {
  background-color: rgba(232, 95, 95, 0.15);
}
button:hover.button-outline.black, button:active.button-outline.black {
  background-color: rgba(34, 34, 34, 0.15);
}
button:hover.button-outline.gray, button:active.button-outline.gray {
  background-color: rgba(45, 45, 45, 0.15);
}
button.button-basic, button.button-filled, button.button-outline {
  font-family: "Century Gothic", Gothic, sans-serif;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--small-spacing) 0;
  border-radius: var(--border-radius);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100px;
  min-height: 43px;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  padding: var(--small-spacing);
  cursor: pointer;
  color: var(--motes-dark);
  transition: 0.2s;
}
button.button-basic label, button.button-filled label, button.button-outline label {
  cursor: pointer;
}
button.button-basic.inline, button.button-filled.inline, button.button-outline.inline {
  display: inline-flex;
  margin-right: var(--medium-spacing);
}
button.button-basic svg-icon:not(:only-child):first-child, button.button-filled svg-icon:not(:only-child):first-child, button.button-outline svg-icon:not(:only-child):first-child {
  padding-right: var(--small-spacing);
}
button.button-basic svg-icon:not(:only-child):last-child, button.button-filled svg-icon:not(:only-child):last-child, button.button-outline svg-icon:not(:only-child):last-child {
  padding-left: var(--small-spacing);
}
button.button-basic svg-icon, button.button-filled svg-icon, button.button-outline svg-icon {
  font-size: 18px;
}
button.button-basic svg-icon span, button.button-filled svg-icon span, button.button-outline svg-icon span {
  display: flex;
}
button.button-basic .svg-text, button.button-filled .svg-text, button.button-outline .svg-text {
  flex: 1;
}
button.button-outline {
  color: var(--primary-color);
}
button.button-outline.red {
  border-color: var(--motes-light-red);
  color: var(--motes-light-red);
}
button.button-outline.black {
  border-color: var(--motes-black);
  color: var(--motes-black);
}
button.button-outline.gray {
  border-color: var(--motes-darker-gray);
  color: var(--motes-darker-gray);
}
button.button-outline.ghost {
  border-color: transparent;
}
button.button-filled {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}
button.button-filled.red {
  background-color: var(--motes-light-red);
  border-color: var(--motes-light-red);
  color: var(--motes-white);
}
button.button-filled.black {
  background-color: var(--motes-black);
  border-color: var(--motes-black);
  color: var(--motes-white);
}
button.button-filled.gray {
  background-color: var(--motes-darker-gray);
  border-color: var(--motes-darker-gray);
  color: var(--motes-white);
}
button.short {
  min-height: 32px;
  padding: 5px 10px;
}
button.short svg-icon {
  font-size: 16px;
}
button.full-width {
  width: 100%;
  position: relative;
}
button.full-width svg-icon:not(:only-child) {
  position: absolute;
}
button.full-width svg-icon:not(:only-child):first-child {
  left: var(--small-spacing);
}
button.full-width svg-icon:not(:only-child):last-child {
  right: var(--small-spacing);
}
button.full-width .svg-text {
  padding: 0 30px;
}
button.center {
  margin-left: auto;
  margin-right: auto;
}
button.button-circled {
  background-color: var(--primary-color);
  border: none;
  box-shadow: none;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 5px;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  transition: 0.2s;
}
button.button-circled .svg-icon svg, button.button-circled label {
  color: var(--secondary-color);
}
button.button-circled svg-icon > span {
  display: flex;
}
button.button-circled:hover, button.button-circled:active {
  background-color: var(--motes-dark-yellow);
}
button.button-circled:hover.red, button.button-circled:active.red {
  background-color: var(--motes-dark-red);
}
button.button-circled:hover.black, button.button-circled:active.black {
  background-color: var(--motes-darker-gray);
}
button.button-circled:hover.gray, button.button-circled:active.gray {
  background-color: #323232;
}
button.button-circled.red {
  background-color: var(--motes-light-red);
}
button.button-circled.red .svg-icon svg, button.button-circled.red label {
  color: var(--motes-white);
}
button.button-circled.black {
  background-color: var(--motes-black);
}
button.button-circled.black .svg-icon svg, button.button-circled.black label {
  color: var(--motes-white);
}
button.button-circled.gray {
  background-color: var(--motes-darker-gray);
}
button.button-circled.gray .svg-icon svg, button.button-circled.gray label {
  color: var(--motes-white);
}
button.button-circled.outline {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}
button.button-circled.outline:hover, button.button-circled.outline:active {
  background-color: rgba(247, 197, 82, 0.15);
}
button.button-circled.outline .svg-icon svg, button.button-circled.outline label {
  color: var(--primary-color);
}
button.button-circled.outline svg-icon > span {
  display: flex;
}

button.button-filled, button.button-outline, .button-circled {
  opacity: 1;
}
button.button-filled:disabled, button.button-filled.hide, button.button-outline:disabled, button.button-outline.hide, .button-circled:disabled, .button-circled.hide {
  transform: none;
  pointer-events: none;
  cursor: initial;
}
button.button-filled:disabled, button.button-outline:disabled, .button-circled:disabled {
  opacity: 0.5;
}
button.button-filled.hide, button.button-outline.hide, .button-circled.hide {
  opacity: 0;
}

@media (hover: none) {
  button.button-circled:not(:active):hover {
    background-color: var(--primary-color);
  }
  button.button-circled:not(:active):hover.red {
    background-color: var(--motes-light-red);
  }
  button.button-circled:not(:active):hover.black {
    background-color: var(--motes-black);
  }
  button.button-circled:not(:active):hover.gray {
    background-color: var(--motes-darker-gray);
  }
  button.button-outline:not(:active):hover {
    background-color: transparent;
  }
  button.button-filled:not(:active):hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  button.button-filled:not(:active):hover.red {
    background-color: var(--motes-light-red);
    border-color: var(--motes-light-red);
  }
  button.button-filled:not(:active):hover.black {
    background-color: var(--motes-black);
    border-color: var(--motes-black);
  }
  button.button-filled:not(:active):hover.gray {
    background-color: var(--motes-darker-gray);
    border-color: var(--motes-darker-gray);
  }
}
/** Global CSS Variables **/
:root {
  --max-width: 550px;
}

@supports (padding-top: constant(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
  }
}
@supports (padding-top: env(safe-area-inset-bottom)) {
  :root {
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
  }
}
:root {
  --ios-bottom-padding: 16px;
  /**
   * If we are on iOS and safe-area is set to something non 0, add  bottom padding to tab-bar to avoid the iOS menu overlapping the tab bar text/icons.
   * Unfortunately we need a bit of a CSS hacking to achieve this, as safe-area-inset-bottom is indeed supported and set on other platforms (android / desktop is 0px) -
   * which is fine (here we want 0px padding) - but --safe-area-inset-bottom is more padding than we want on iOS.
   * So workaround - if safe area is bigger than 10px use 6px padding, otherwise use 0 (as the inner min() will return negative number)
   * 
   * For reference safe-area-inset on iPhone X in portrait is - top:44pt, bottom:34pt, left/right: 0pt
   * In landscape - top:0pt, bottom: 21pt, left/right: 44pt
   *
  **/
  --safe-area-bottom: max(min(calc(-14px + (var(--safe-area-inset-bottom))), var(--ios-bottom-padding)), 0px);
  /**
   * Adjust top vertical placement of page content on iOS, where front camera is present on some models - here user is not allowed to press.
   * In order to achieve this on Android (in a webview) we need to use the --native-safe-area-top that we inject through our native app.
   * Obs, the native variables is not currently updated on rotation
  */
  --safe-area-top: max(max(env(safe-area-inset-top, 0px), var(--native-safe-area-top, 0px)), var(--large-spacing));
  --safe-area-left: max(max(env(safe-area-inset-left, 0px), var(--native-safe-area-left, 0px)), var(--large-spacing));
  --safe-area-right: max(max(env(safe-area-inset-right, 0px), var(--native-safe-area-right, 0px)), var(--large-spacing));
}

:root {
  --motes-grid-breakpoint: 500px;
}

.motes-grid {
  margin: 0 auto;
  box-sizing: border-box;
}

.motes-row, .motes-row-3, .motes-row-2 {
  display: flex;
  box-sizing: border-box;
}

.motes-col {
  flex: 1;
  box-sizing: border-box;
  padding: 0 5px;
}

.motes-row-2 .motes-col {
  width: 50%;
}

.motes-row-3 .motes-col {
  width: 33%;
}

@media (max-width: 500px) {
  .motes-grid, .motes-row-2, .motes-row-3 {
    display: block;
  }
  .motes-grid .motes-col, .motes-row-2 .motes-col, .motes-row-3 .motes-col {
    width: 100%;
  }
}

/*# sourceMappingURL=styles.css.map*/