@import url('https://fonts.googleapis.com/css?family=Roboto');
@font-face {font-family: Pusab; src: url('../../assets/Pusab.ttf')}

html {
  --mainFont: aller, helvetica, arial;

  --btn_grey: #9A9A9A;
  --btn_darkgrey: #737D97;
  --btn_green: #7ADE2D;
  --btn_pink: #FF94FF;
  --btn_red: #DE2D30;
  --btn_purple: #5C4EA2;

  --boxWidth: 800px;

  --baseHeight: 350px;
  --expandedHeight: 590px;
  --ultraExpandedHeight: 780px;
  
  touch-action: manipulation;
}

.gdButton {
  cursor: pointer;
  z-index: 1;
  user-select: none;
  transition-duration: 0.07s;
  transition-timing-function: ease-in-out;
}

.gdButton:active {
  animation: bounceButton 0.25s ease-in-out forwards;
}

body {
  background: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100)) no-repeat center center fixed;
}

p {
  font-family: var(--mainFont);
  font-size: 18px;
}

h1 {
  font-weight: normal;
  margin: 0 0;
  font-size: 60px;
  font-family: Pusab;
  color: white;
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
  -webkit-text-stroke-width: 2.2px;
  -webkit-text-stroke-color: black;
  text-shadow: 3px 3px 0.5px rgba(0, 0, 0, 0.3);
}

h2, .animationSelector select, .gdSelect, input[type=number] {
  font-weight: normal;
  margin: 0 0;
  font-size: 35px;
  font-family: Pusab;
  width: fit-content;
  color: white;
  letter-spacing: -0.01em;
  -webkit-text-stroke-width: 1.6px;
  -webkit-text-stroke-color: black;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}

.hidden {
  display: none;
}

.inline, .help {
  display: inline-block;
}

.help {
  cursor: help;
}

.small {
  font-size: 16px
}

.smaller {
  font-size: 14px;
}

.bigger {
  font-size: 25px;
}

.noMargin {
  margin-bottom: 0px;
}

.blankButton {
  padding: 0px 0px;
  margin: 0px 0px;
  background: none;
  cursor: pointer;
  border: none;
}

.centerFlex {
  display: flex;
  justify-content: center;
}

input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
 }

 input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  box-shadow: 0 0 0px 1000px #764F1A inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #764F1A inset !important;
  -webkit-text-fill-color: white !important;
}

 textarea {
  border-radius: 5px;
  padding: 7px 7px;
  width: 600px;
  height: 10%;
  max-width: 80%;
  min-width: 30%;
  min-height: 5%;
  max-height: 30%;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto";
}

#iconKitLogo {
  object-fit: contain;
}

.iconbox {
  display: flex;
  max-height: 175px;
  justify-content: center;
  align-items: flex-start;
}

.iconbox canvas {
  object-fit: contain;
  z-index: -1;
}

br {
  user-select: none;
}

.menuButtons {
  display: flex;
  justify-content: center;
  height: 65px;
  margin: 0px 0px 8px 0px;
}

#textbox {
  text-transform: uppercase;
  font-size: 22px;
}

.oxygene {
  font-family: Oxygene2;
}

.buttonLink {
  border: none;
  outline: none;
  background: none;
  font-family: "Roboto";
  cursor: pointer;
  color: rgb(85, 26, 139);
}

.center {
  text-align: center;
}

.supercenter {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
}

.iconimage {
  height: 60px;
}

.generate {
  width: 75vw;
  display: block;
  padding: 5px 0 30px 0;
  margin: 10px auto 30px auto;
  background-color: rgb(235, 235, 235);
  border-radius: 8px;
}

.configbox {
  width: 250px;
  display: inline-block;
}

.configbox input {
  width: 95%;
}

.configbox select {
  width: 95%;
  text-transform: capitalize;
}

#url {
  width: 500px;
  max-width: 90%;
}

#resize {
  width: 250px;
  max-width: 90%;
}

#symbols, .subdiv {
  background-color: rgb(219, 219, 219);
  margin: 10px auto 10px auto;
  width: 65%;
  padding: 10px 10px;
  overflow: auto;
  white-space: nowrap;
  border-radius: 8px; 
}

#symbols p {
  font-size: 230%;
  font-family: Oxygene2;
  margin: 0px 0px;
  padding: 0px 0px;
}

#accountInfo {
  width: 50%;
}

#accountInfo p {
  text-align: left;
  line-height: 23px;
  margin-left: 10px;
  font-size: 18px;
}

.char {
  border: 1px solid black;
  background-color: white;
  border-radius: 2px;
  color: black;
  width: 55px;
  height: 55px;
  margin: 3px 10px 3px 10px;
  cursor: pointer;
}

.char:hover {
  background-color: rgb(223, 223, 223);
  transition: background-color 0.15s;
}

.char:active {
  background-color: rgb(200, 200, 200);
}

#generate {
  font-family: "Roboto";
  border: rgba(0, 0, 0, 0);
  background-color: #88FF33;
  box-shadow: 2px 2px 3px #66AA22;
  border-radius: 10px;
  color: black;
  padding: 10px 15px 10px 15px;
  cursor: pointer;
  font-size: 18px;
}

#generate:hover {
  background-color: rgb(133, 230, 65);
  transition: background-color 0.15s;
}

#generate:active {
  background-color: rgb(117, 211, 50);
}

.miniButton {
  font-family: "Roboto";
  border: rgba(0, 0, 0, 0);
  background-color: #88FF33;
  box-shadow: 1.5px 1.5px 2px #66AA22;
  border-radius: 10px;
  color: black;
  padding: 7px 9px 7px 9px;
  cursor: pointer;
  font-size: 14px;
}

.miniButton:hover {
  background-color: rgb(133, 230, 65);
  transition: background-color 0.15s;
}

.miniButton:active {
  background-color: rgb(117, 211, 50);
}

.iconKit {
  width: var(--boxWidth);
  min-width: var(--boxWidth);
  overflow-x: hidden;
  display: block;
  padding-bottom: 10px;
  margin: 0px 0px 20px 0px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.iconContainer, .extraItemSection {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0px 25px;
}

.iconContainer button {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconContainer button img {
  width: 50px;
}

.iconContainer button img[data-src] {
  opacity: 0;
}

.extraItemSection {
  padding: 0px 0px;
}

.extraItemHR {
  border: none;
  width: 80%;
  height: 2px;
  width: 80%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}

.iconKit button, .colTypes button {
  margin: 0px 0px;
  padding: 0px 0px;
  border: 5px solid rgba(0, 0, 0, 0); /* need this for border image to work */
  user-select: none;
}

.iconSelected, .selectedColor, .selectedColorType {
  border-image: url('../../assets/iconkitbuttons/select.png') 10 stretch !important;
}

.selectedColorPartial {
  border-image: url('../../assets/iconkitbuttons/select_dark.png') 10 stretch !important;
}

#iconTabs, .menuButtons {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

#iconTabs button, .glowToggle, .copyForm, .miscFormButton {
  margin: 0px 5px 0px 5px;
  transition: transform .1s ease-in-out;
  user-select: none;
}

#iconTabs button:focus-visible, .glowToggle:focus-visible, .copyForm:focus-visible, .menuButton:focus-visible, .postButton:focus-visible, .miscFormButton:focus-visible {
  transform: scale(1.1);
}

#colorParent {
  width: 1200px;
  max-width: 90%;
  margin: 0px auto;
  position: relative;
  right: 42px;
  display: flex;
  flex-direction: row;
}

.colorPicker {
  width: 0.01px !important;
  height: 0.01px !important;
  padding: 0px 0px !important;
  visibility: hidden;
  position: absolute;
}

#colorLabels {
  display: flex;
  margin-bottom: 8px;
  justify-content: center;
}

.colorLabel {
  margin: 0px 7px !important;
  transition-duration: 0.05s;
  transition-timing-function: ease-in-out;
}

.colorLabel:hover {
  transform: scale(1.08)
}

.colorLabel img {
  width: 45px;
  border: 2.5px solid black;
  border-radius: 420px;
  transition-duration: 0.25s;
}

.customMode {
  border: 2.5px solid white;
}

.copyForm {
  margin: 18px 10px 0px 10px !important;
}

.glowToggle:active, .copyForm:active, .miscFormButton:active, #iconTabs button:active {
  transform:scale(1.05)
}

#iconLayer {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: center;
}

.sideButtons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90px;
  margin: 30px 8px 0px 8px;
}

.sideButtons button {
  margin-bottom: 15px;
}

.sideButtons button img {
  width: 55px;
}

#colors {
  width: 1000px;
  max-width: 90%;
  overflow-x: auto;
  padding: 10px 10px;
  background-color: rgba(0, 0, 0, 0.7);
}

#colors::-webkit-scrollbar, #iconKitParent::-webkit-scrollbar {
  width: 9px;
  height: 10px;
  background: rgba(0, 0, 0, 0.5); 
}

#colors::-webkit-scrollbar-thumb, #iconKitParent::-webkit-scrollbar-thumb {
  background: rgb(185, 185, 185); 
}

#iconKitParent {
  height: var(--baseHeight);
  min-height: 90px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

#iconKitParent.expanded {
  height: var(--expandedHeight);
}

#colors div {
  display: flex;
}

.iconColor {
  border-width: 3px !important;
}

.iconColor div {
  width: 35px;
  height: 35px;
  border: 2px solid black;
  border-radius: 5px; 
}

#colorList {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 10px;
}

#gdfloor {
  margin-bottom: 15px;
  margin-top: 1px;
  border: none;
  height: 3px;
  width: 80%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  position: relative;
  z-index: -10;
}

.menuButton {
  margin: 0px 5px 0px 5px;
  transition: transform .15s ease-in-out;
  user-select: none;
}

.menuButton:hover {
  transform:scale(1.07)
}

.menuButton:active {
  transform:scale(1.15)
}

.menuButton img {
  width: 60px
}

#iconprogressbar {
  background: rgba(0, 0, 0, 0.5); 
  height: 7px;
  margin-bottom: 12px;
}

#iconloading, .fakeloading {
  background: rgba(255, 255, 255, 0.5); 
  height: 7px;
  width: 0%;
}

.fakeloading {
  width: 100%;
}

body::-webkit-scrollbar  {
  display: none;
  width: 0;
  background: rgba(0, 0, 0, 0);
}

.iconHover, .iconButton:focus-visible, .iconColor:focus-visible {
  transform: scale(1.075);
  background-color: rgb(255, 255, 255, 0.2);
  border-radius: 10px;
}

.iconButton.hasNoUnlock {
  filter: brightness(0.6);
  opacity: 70%;
}

.iconButton.filteredOut, #iconTabs .blankButton[form].filteredOut {
  filter: brightness(0.5);
  opacity: 50%;
}

body.filterHide .iconButton.filteredOut, body.filterHide #iconTabs .blankButton[form].filteredOut {
  display: none !important;
  pointer-events: none;
}

.iconColor.filteredOut {
  opacity: 25%;
  filter: brightness(0.5);
  scale: 0.8;
}

.popup {
  position: fixed; 
  display: none; 
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 2;
}

.brownbox {
  border: 17px solid rgba(0, 0, 0, 0);
  border-radius: 25px;
  background-color: #995533;
  border-image: url('../../assets/brownbox.png') 10% round;
}

.fancybox {
  border: 17px solid rgba(0, 0, 0, 0);
  border-radius: 25px;
  background-color: #001931;
  border-image: url('../../assets/fancybox.png') 10% stretch;
}

.xButton {
  position: absolute;
  top: -35px;
  left: -40px;
  text-align: left;
}

input[type=text] {
  font-weight: normal;
  margin: 0 0;
  font-size: 45px;
  font-family: Pusab;
  color: white;
  letter-spacing: 0.02em;
  text-shadow: -0.2vh -0.2vh 0vh #000, 0.2vh -0.2vh 0vh #000, -0.2vh 0.2vh 0vh #000, 0.2vh 0.2vh 0vh #000;
  border: none;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

input[type=text]::placeholder {
  color: #6F98D8;
  font-size: 40px;
  text-shadow: -0.15vh -0.15vh 0vh #000, 0.15vh -0.15vh 0vh #000, -0.15vh 0.15vh 0vh #000, 0.15vh 0.15vh 0vh #000;
}

input[type=number] {
  border: none;
  border-radius: 7px;
  height: 50px;
  width: 100px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=checkbox] {
  display: none;
}

.gdcheckbox {
  vertical-align: middle;
  display: inline-block;
  background-image: url(../../assets/check-off.png);
  background-repeat: no-repeat;
  background-size: contain;
  padding-right: 40px;
  height: 42px;
  text-align: left;
  margin: 0px 15px 0px 35px;
}

input[type=checkbox]:checked + label.gdcheckbox {
  background-image: url(../../assets/check-on.png);
}

.settingList {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 25px;
}

.settingList div {
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settingList .gdcheckbox {
  margin: 0px 0px 5px 0px !important;
}

.specialIconSetting {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animationSelector {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animationSelector select, .gdSelect {
  border-radius: 7px;
  border: none;
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);
  width: 300px;
  height: 45px;
  font-size: 32px;
  padding-left: 7px;
  cursor: pointer;
}

.animationSelector option, .fancySelect option, .gdSelect option {
  color: black;
  font-size: 20px;
  font-family: var(--mainFont);
  letter-spacing: unset;
  -webkit-text-stroke-width: unset;
  -webkit-text-stroke-color: unset;
  text-shadow: unset;
}

.animationSelector h2 {
  width: unset
}

.fancySelect {
  color: white;
  font-size: 20px;
  text-align: center;
}

input[type="range"] {
  background-color: rgba(0, 0, 0, 0);
  appearance: none !important;
  height: 20px;
  min-height: 20px;
  border: 1px solid;
  cursor: pointer;
  border-image: url(../../assets/slider_track.png);
  border-image-slice: 21 22 22 21;
  border-image-width: 30px 30px 30px 30px;
  margin-right: 20px;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none !important;
  height: 45px;
  width: 45px;
  background-image: url("../../assets/slider_thumb.png");
  background-repeat: no-repeat;
  background-size: 100%;
}

input[type="range"]::-webkit-slider-thumb:active { background-image: url("../../assets/slider_thumb_active.png"); }

#extraInfo {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 220px;
}

#extraInfo div {
  display: flex;
  flex-direction: row;
  justify-content: left;
  margin-bottom: 8px;
  align-items: center;
}

#extraInfo p {
  color: white;
  font-size: 24px;
  margin: 0px 0px 0px 0px;
}

#extraInfoPopup p {
  color: white;
  font-size: 26px;
  margin: 12px 0px 0px 0px;
}

#extraInfoPopup span[colinfo] {
  cursor: pointer;
  text-decoration: underline 2px;
}

.extraUnlockContainer {
  margin: 24px auto 0px auto;
  width: 90%;
}

.extraUnlockMethod {
  color: yellow !important;
  margin-top: 6px !important;
}

.extraUnlockName {
  color: rgb(255, 200, 0) !important;
  font-weight: bold;
  margin-top: 32px !important;
}

.miniColPrev {
  display: inline-block;
  vertical-align: sub;
  border-radius: 420px;
  border: 1px solid black;
  margin-left: 12px;
  width: 1em;
  height: 1em;
}

.filterOption {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 15px;
}

.filterOption h2 {
  text-align: left;
}

.filterOption select {
  width: 200px;
}

.filterCheckboxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0px 60px;
}

.filterCheckbox {
  margin-bottom: 20px;
}

.filterCheckbox h2, .smallCheckboxLabel {
  font-size: 30px;
  white-space: nowrap;
}

.cornerCheckbox, .filterCheckbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.cornerCheckbox .gdcheckbox, .filterCheckbox .gdcheckbox {
  margin-left: 0px;
}

button.longButton {
  width: 220px;
  padding: 2px 8px;
  border-radius: 17px;
  border: 10px solid transparent;
  border-image: url(/assets/buttons/grey.png) 18% round;
  background-color: var(--btn_grey)
}

#devTools {
  display: flex;
  width: 1000px;
  height: 520px;
  padding: 15px 15px;
}

#devTools h2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

#devTools > div {
  border-radius: 8px;
  width: 313px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  margin: 0px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#devIconLayers {
  padding-top: 10px;
  display: flex;
  flex-direction: column; 
  align-items: center;
  width: 100%;
}

button.devLayerBtn {
  margin-bottom: 8px;
  font-family: var(--mainFont);
  font-size: 15px;
}

button.devLayerBtn:disabled {
  opacity: 50%;
  pointer-events: none;
}

button.devLayerBtn[layertype="group"], #backOneLayer {
  border-image: url(/assets/buttons/darkgrey.png) 18% round;
  background-color: var(--btn_darkgrey)
}

button.devLayerBtn.selectedLayer, #devLoadIcon {
  border-image: url(/assets/buttons/green.png) 18% round;
  background-color: var(--btn_green)
}

#devLayersSection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#devIconSettings {
  width: 100%;
}

#devIconSettings div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#devIconSettings p {
  color: white;
  font-size: 20px;
}

#devIconSettings #devSpriteOffset {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#devIconSettings #devSpriteOffset input {
  font-size: 30px;
  height: 45px;
  width: 120px;
} 

#devIconSettings #devSpriteOffset p {
  width: 55px;
  font-size: 20px;
  margin-bottom: 0px;
  margin-top: 0px;
}

#devCustomIcon {
  display: flex;
  flex-direction: column;
  padding-left: 40px;
  align-items: flex-start;
  width: 100%;
}

#devCustomIcon p {
  color: white;
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 22px;
}

#devCustomIcon .fileBox, #devCustomIcon .fancySelect {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 0, 0, 0);
  border-radius: 7px;
  width: 270px;
  height: 40px;
  margin-bottom: 20px;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

#devCustomIcon .fileBox p {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  width: 270px;
  text-overflow: ellipsis;
}

#devCustomIcon .fileBox p:empty::before {
  content: "(no file)";
  color: #aaaaaa;
}

.droppable {
  transition-duration: 0.1s;
}

.droppable.dragOver {
  outline: 4px dotted white;
  background-color: rgba(0, 0, 0, 0.4);
}

.bounce {
  animation: boxAnimator 0.25s;
}

.greyedOut {
  filter: grayscale(100%) brightness(0.7);
  pointer-events: none;
}

.lime {
  color: cyan;
}

.faded {
  opacity: 75%;
}

.gold {
  color: rgb(255, 200, 0);
}

.blue {
  color: blue;
 }

 .white {
  color: white;
 }

.inline {
  display: inline-block;
}

.showIfSmall { display: none !important; }

@media screen and (max-width: 1200px) {
  .hideIfSmall { display: none !important; }
  .showIfSmall { display: unset !important; }
  #iconKitLogo { width: 75%; }
  #iconKitParent { height: var(--expandedHeight); }
  #iconKitParent.expanded { height: var(--ultraExpandedHeight); }
}

@media screen and (max-width: 950px) {
  #colorParent { right: unset }
  #iconLayer { flex-direction: column; align-items: center; justify-content: flex-start; }
  .sideButtons { flex-direction: row; margin: 0px 0px 5px 0px; width: 100%; justify-content: center; }
  .sideButtons button { margin: 0px 10px }
}

.spin {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   mix-blend-mode: luminosity;
}

@keyframes boxAnimator {
  0% {
      transform: scale(0) translate(-50%, -50%);
      transform-origin:left top
  }
  75% {
      transform: scale(1.075) translate(-50%, -50%);
      transform-origin:left top
  }
  100% {
      transform: scale(1) translate(-50%, -50%);
      transform-origin:left top
  }
}

@keyframes bounceButton {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.12);
  }
  75% {
      transform: scale(1.06);
  }
  100% {
      transform: scale(1.1);
  }
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }