/* MIT License

// Copyright (c) 2022 Andrei Speridião

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

//
// for more information, please visit https://github.com/andreisperid/E-TKT
*/

@font-face {
  font-family: "Impact Label Reversed";
  src: url("/fontwhite.ttf");
  color: #000000;
}
* {
  font-family: "Impact Label Reversed", sans-serif;
  font-size: 22px;
  color: #e7dac9;
  text-decoration: none;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Likely future */
}
body {
  background-color: rgb(32, 32, 32);
  margin: 0px;
  padding: 0px;
}
h1,
h2,
h3 {
  color: #e7dac9;
  font-weight: 100;
}
h1 {
  font-size: 55px;
  margin: 0px;
  color: #e7dac9;
  opacity: 1;
  filter: drop-shadow(-2px -2px 2px rgba(181, 214, 255, 0.4));
}
h2 {
  font-size: 23px;
  margin: 0px;
  opacity: 0.25;
}
h3 {
  text-align: center;
  margin-top: 10px;
}
a {
  font-size: 18px;
  color: rgba(231, 218, 201, 0.75);
  opacity: 0.6;
  filter: drop-shadow(0px 0px 15px #fff);
}
a:hover {
  opacity: 1;
}
#hint {
  font-size: 20px;
  color: #e7dac960;
}
input {
  color: #e7dac9;
  background: none;
  border-color: #131a3466;
  border-width: 2px;
  border-radius: 20px;
  padding: 3px 0 4px 0;
  margin: 0px;
  /* width: 100%; */
}
button {
  color: #e7dac9;
  background: none;
  border-color: #131a3466;
  border-width: 2px;
  border-radius: 3px;
  padding: 3px 0 4px 0;
  margin: 0px;
  width: 100%;
}

#text-input {
  margin: auto;
  grid-row-start: 1;
  grid-column-start: 1;
  height: 29px;
  outline: none;
  padding: 0px;
  color: rgb(231, 218, 201);
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  border-style: solid dashed;
  border-color: rgba(255, 166, 0, 0.5) rgba(0, 102, 255, 0.7);
  border-radius: 0px;
  text-align: center;
  font-size: 25px;
  /* filter: drop-shadow(0px 0px 40px rgba(174, 219, 255, 255)); */
  caret-color: "white";
  -webkit-user-select: text; /* Chrome all / Safari all */
  -moz-user-select: text; /* Firefox all */
  -ms-user-select: text; /* IE 10+ */
  user-select: text; /* Likely future */
}

#text-input:disabled {
  border-color: rgba(173, 113, 0, 0.5) rgba(0, 65, 163, 0.7);
}

#text-input:disabled {
  pointer-events: none;
}

#text-form-scroll {
  margin: 2px;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scrolling #text-form-scroll {
  overflow-x: scroll;
}

/* Hide the scrollbar and prevent manual scrolling while printing */
[data-printing="true"] .scrolling #text-form-scroll {
  overflow-x: hidden;
}

/*
 * Browsers like Firefox on Windows 11 render scrollbars differently, 
 * as an inline overlay.  To make it more useable this element reserves
 * space under the text input for the track to pop in to.
 */
.overlay-gutter {
  width: 100%;
  display: none;
  position: sticky;
  left: 0;
}

#text-form-border.scrolling {
  margin-bottom: 0px;
}

[data-printing="true"] #text-form-border.scrolling {
  margin-bottom: 12.5px;
}


/*
 * Firefox specific rules to style the scrollbar.
 */
@supports (-moz-appearance:none) {
  .scrolling #text-form-scroll { 
    scrollbar-color: #808080 transparent;
  }
}

.overlay-scroll-enabled .scrolling .overlay-gutter {
  background: rgb(37, 42, 50);
  height: 14px;
  display: block;
  z-index: 10;
}

.overlay-scroll-enabled #text-form-border{
  margin-bottom: 14px;
}

.overlay-scroll-enabled #text-form-border.scrolling {
  margin-bottom: 0px;
}

[data-printing="true"].overlay-scroll-enabled #text-form-border.scrolling {
  margin-bottom: 14px;
}

[data-printing="true"].overlay-scroll-enabled .scrolling .overlay-gutter {
  height: 0px;
}
/*
  * Overlay scrollbars on mobile devices tend to be smaller and not selectable,
  * so style the elements appropriately.
  */
@media screen and (max-width: 760px) {
    .overlay-scroll-enabled #text-form-border{
      margin-bottom: 8px;
    }
    
    .overlay-scroll-enabled #text-form-border.scrolling {
      margin-bottom: 0px;
    }
    
    [data-printing="true"].overlay-scroll-enabled #text-form-border.scrolling {
      margin-bottom: 8px;
    }
    
    [data-printing="true"].overlay-scroll-enabled .scrolling .overlay-gutter {
      height: 0px;
    }

    .overlay-scroll-enabled .scrolling .overlay-gutter {
      height: 8px;
    }

    .overlay-scroll-enabled #text-form-border {
      margin-bottom: 8px;
    }
    
    #text-form-scroll { 
      scrollbar-color: transparent #252A32;
    }

    [data-printing="true"].overlay-scroll-enabled .scrolling .overlay-gutter {
      height: 0px;
    }
}

/**
  * Rules are to prevent the scrollbar overlay gutter from being rendered
  * on iOS Safari.
  */
@supports (-webkit-touch-callout: none) {
  .overlay-gutter {
    display: none !important;
  }

  #text-form-border {
    margin-bottom: 0px !important;
  }

  .overlay-scroll-enabled #text-form-border {
    margin-bottom: 0px;
  }
}

/* width */
::-webkit-scrollbar {
  height: 12.5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #80808080;
}
::-webkit-scrollbar-thumb:hover {
  background: #808080ff;
}
::-webkit-scrollbar-track {
  background: #d6d6d620;
}

#tips {
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 116.5%;
  margin: 1px 0 0 -8%;
  pointer-events: none;
}

.tip-child {
  /* filter: drop-shadow(-1px -1px 1px rgb(255, 255, 255)); */
  background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.05),rgba(255,255,255,0.05),rgba(255,255,255,0));
  /* border-radius: 5px; */
  padding: 11px 8px 14px 8px;
  font-size: 9px;
  visibility: hidden;
  pointer-events: all;
  cursor: pointer;
}

.tip-child.visible {
  visibility: visible;
}

.tip-child:hover {
  font-weight: bold;
  background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,0.07),rgba(255,255,255,0.07),rgba(255,255,255,0));
}

[data-printing="true"] .tip-child.visible {
  visibility: hidden;
}

#text-form-border {
  width: 100%;
  outline: 3px solid rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-width: 0 1px 1px 0;
  border-radius: 2px;
  box-shadow: 0px 5px 10px rgba(255, 255, 255, 0.25);
  margin-bottom: 12.5px;
}

#progress-bar-container {
  display: grid;
  width: fit-content;
  margin: auto;
}

[data-printing="true"] #progress-bar-container {
  border-width: 0px;
  background-color: rgb(21, 15, 6);
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
}

[data-printing="true"] #text-input {
  display: none;
}

#printing-label {
  margin: auto;
  grid-row-start: 1;
  grid-column-start: 1;
  height: 29px;
  padding: 0px;
  color: rgb(231, 218, 201);
  box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 25px;
  border: solid transparent 2px;
  background: transparent;
  display: none;
  justify-content: center;
  align-items: center;
  white-space: pre;
}

[data-printing="true"] #printing-label {
  display: flex;
}

#progress-bar {
  grid-row-start: 1;
  grid-column-start: 1;
  outline: none;
  display: none;
  filter: drop-shadow(0px 0px 25px rgb(174, 219, 255));
  mix-blend-mode: difference;
}

[data-printing="true"] #progress-bar {
  display: block;
  background: rgba(212, 206, 197, 1);
  height: 100%;
  width: 0%;
}

#mode-dropdown {
  outline: none;
  border-color: rgb(0, 102, 255);
  border-width: 0 2px 0 2px;
  border-style: dashed;
  font-size: 21px;
  background: rgb(7, 15, 22);
  height: 40px;
  width: 100%;
  text-align: center;
  border-radius: 5px;
}
#mode-dropdown:disabled {
  color: rgba(231, 218, 201, 0.25);
  border-color: rgba(0, 102, 255, 0.5);
}

#single-column {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin: auto;
  padding-bottom: 15px;
}

input[type="button"] {
  width: 100%;
  height: 40px;
}

input[type="button"]:disabled {
  color: #333333;
}

button:disabled {
  color: #333333;
  pointer-events: none;
}

#emoji-button {
  filter: drop-shadow(-3px -3px 3.5px rgba(255, 255, 255, 0.25));
  background-color: rgb(11, 17, 26);
  color: rgba(231, 218, 201, 0.75);
  font-size: 18px;
  width: 40px;
  height: 40px;
  border-width: 0.5px 0 0 0.5px;
  border-color: rgba(255, 255, 255, 0.32);
}
#emoji-button:disabled {
  color: rgba(231, 218, 201, 0.25);
  pointer-events: none;
}
#emoji-button:active {
  filter: drop-shadow(3px 3px 3.5px rgba(255, 255, 255, 0.1));
  color: rgba(231, 218, 201, 1);
  background-color: rgb(18, 25, 37);
  border-width: 0 0.5px 0.5px 0;
  border-color: rgba(255, 255, 255, 0.2);
}

#clear-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.15));
  background-color: rgb(11, 17, 26);
  color: rgb(255, 0, 0);
  border-color: rgba(255, 0, 0, 0.55);
  border-style: solid;
}
#clear-button:disabled {
  color: rgba(255, 0, 0, 0.25);
  border-color: rgba(255, 0, 0, 0.15);
  pointer-events: none;
}
#clear-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(255, 68, 68, 0.5));
  background-color: rgb(18, 25, 37);
  border-color: rgba(255, 0, 0, 1);
  padding: 0 0 2px 0;
}

#reel-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.15));
  background-color: rgb(11, 17, 26);
  color: rgb(0, 189, 35);
  border-color: rgba(0, 189, 35, 0.4);
  border-style: solid;
}
#reel-button:disabled {
  color: rgba(0, 151, 81, 0.25);
  border-color: rgba(0, 151, 81, 0.25);
  pointer-events: none;
}
#reel-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(134, 255, 156, 0.4));
  background-color: rgb(18, 25, 37);
  border-color: rgb(0, 255, 47);
  padding: 0 0 2px 0;
}

#feed-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.15));
  background-color: rgb(11, 17, 26);
  color: rgba(255, 166, 0, 1);
  border-color: rgba(255, 166, 0, 0.25);
  border-style: solid;
}
#feed-button:disabled {
  color: rgba(255, 166, 0, 0.25);
  border-color: rgba(255, 166, 0, 0.25);
  pointer-events: none;
}
#feed-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(255, 183, 49, 0.4));
  background-color: rgb(18, 25, 37);
  border-color: rgba(255, 166, 0, 1);
  padding: 0 0 2px 0;
}

#cut-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.15));
  background-color: rgb(11, 17, 26);
  color: rgba(0, 102, 255, 1);
  border-color: rgba(0, 102, 255, 0.25);
  border-style: dashed;
}
#cut-button:disabled {
  color: rgba(0, 102, 255, 0.25);
  border-color: rgba(0, 102, 255, 0.25);
  pointer-events: none;
}
#cut-button:active {
  filter: drop-shadow(4px 4px 4px rgba(45, 129, 255, 0.4));
  background-color: rgb(18, 25, 37);
  border-color: rgba(0, 102, 255, 1);
  padding: 0 0 2px 0;
}

#submit-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.15));
  background-color: rgb(11, 17, 26);
  color: rgba(231, 218, 201, 0.75);
  border-color: rgba(231, 218, 201, 0.75);
  border-style: solid;
}
#submit-button:disabled {
  /* color: rgba(231, 218, 201, .25); */
  border-color: rgba(231, 218, 201, 0.25);
  pointer-events: none;
}
#submit-button:active {
  filter: drop-shadow(3px 3px 6px rgba(255, 255, 255, 0.6));
  background-color: rgb(18, 25, 37);
  color: white;
  border-color: white;
  padding: 0 0 2px 0;
}

#test-align-button {
  filter: drop-shadow(-2px -2px 2.5px rgba(255, 255, 255, 0.25));
  background-color: rgb(11, 17, 26);
  color: rgba(231, 218, 201, 0.75);
  border-width: 0px;
  border-width: 0.5px 0 0 0.5px;
  border-color: rgba(255, 255, 255, 0.2);
}
#test-align-button:disabled {
  color: rgba(231, 218, 201, 0.25);
  pointer-events: none;
}
#test-align-button:active {
  filter: drop-shadow(2px 2px 2.5px rgba(255, 255, 255, 0.5));
  color: rgba(231, 218, 201, 1);
  background-color: rgb(18, 25, 37);
  border-width: 0px;
  border-width: 0 0.5px 0.5px 0;
  border-color: rgba(255, 255, 255, 0.2);
}

#setup-button,
#test-full-button,
#cancel-button,
#save-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.25));
  background-color: rgb(11, 17, 26);
  color: rgba(231, 218, 201, 0.75);
  border-width: 0px;
  border-width: 0.5px 0 0 0.5px;
  border-color: rgba(255, 255, 255, 0.2);
}
#setup-button:disabled,
#test-full-button:disabled,
#cancel-button:disabled,
#save-button:disabled {
  color: rgba(231, 218, 201, 0.25);
  pointer-events: none;
}
#setup-button:active,
#test-full-button:active,
#cancel-button:active,
#save-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(255, 255, 255, 0.1));
  color: rgba(231, 218, 201, 1);
  background-color: rgb(18, 25, 37);
  border-width: 0px;
  border-width: 0 0.5px 0.5px 0;
  border-color: rgba(255, 255, 255, 0.2);
}

.align {
  color: rgb(220, 100, 255);
  border-color: rgba(220, 100, 255, 0.5);
}
.align:disabled {
  color: rgba(220, 100, 255, 0.25);
  border-color: rgba(220, 100, 255, 0.5);
  pointer-events: none;
}

#remove-align-button,
#add-align-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.25));
  background-color: rgb(11, 17, 26);
  border-style: solid;
  /* border-width: 1px; */
}
#remove-align-button:active,
#add-align-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(255, 157, 248, 0.4));
  background-color: rgb(18, 25, 37);
  border-color: rgba(220, 100, 255, 1);
  padding: 0 0 2px 0;
}

.force {
  color: rgb(80, 255, 255);
  border-color: rgba(80, 255, 255, 0.25);
}
.force:disabled {
  color: rgba(80, 255, 255, 0.25);
  border-color: rgba(80, 255, 255, 0.25);
  pointer-events: none;
}

#remove-force-button,
#add-force-button {
  filter: drop-shadow(-4px -4px 4.5px rgba(255, 255, 255, 0.25));
  background-color: rgb(11, 17, 26);
  border-style: solid;
  /* border-width: 1px; */
}
#remove-force-button:active,
#add-force-button:active {
  filter: drop-shadow(4px 4px 4.5px rgba(147, 235, 255, 0.4));
  background-color: rgb(16, 22, 33);
  border-color: rgba(80, 255, 255, 1);
  padding: 0 0 2px 0;
}

#background {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  padding: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  /* background: rgb(11, 17, 26); */
  background: linear-gradient(rgb(11, 17, 26) 500px, rgb(3, 5, 8) 100%);
}

#frame {
  border-radius: 40px;
  /* filter: drop-shadow(-4px -4px 3px rgb(35, 42, 56)); */
  background: rgb(11, 17, 26);
}

#splash {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  padding: 0px;
  margin: 0px;

  background: linear-gradient(rgb(11, 17, 26) 500px, rgb(3, 5, 8) 100%);
  /* background: rgb(11, 17, 26); */
  margin: auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  -webkit-animation: fade 2.5s;
  animation: fade 2.5s;
  opacity: 0;
  z-index: -1;
}

#splashlogo {
  width: 220px;
  height: 150px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-start;

  -webkit-animation: fade 2s;
  animation: fade 2s;

  opacity: 0;
  z-index: -1;
}

#splashbar {
  background-image: url("splash.png");
  background-repeat: no-repeat;
  background-position: left;

  height: 150px;
  -webkit-animation: move 2s;
  animation: move 2s;
}
@keyframes move {
  0% {
    width: 0%;
  }
  6% {
    width: 0%;
  }
  7% {
    width: 20%;
  }
  13% {
    width: 20%;
  }
  14% {
    width: 40%;
  }
  20% {
    width: 40%;
  }
  21% {
    width: 60%;
  }
  27% {
    width: 60%;
  }
  28% {
    width: 80%;
  }
  34% {
    width: 80%;
  }
  35% {
    width: 100%;
  }
}

@keyframes fade {
  0% {
    z-index: 999;
    opacity: 1;
  }
  75% {
    z-index: 999;
    opacity: 1;
  }
  100% {
    z-index: -1;
    opacity: 0;
  }
}

@keyframes fade-modal {
  0% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
