html,body {
  overflow: hidden;
  background-color: black;
  font-family: Cairo;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}



/* Make sure error messages appear on top of everything else
** so that they can both be seen and be dismissed
*/
#tmserrormessage {
  z-index: 9999999 !important;
}



/* Dunno why Bootstrap only declares 1-5? */
.order-6  {order:  6; }
.order-7  {order:  7; }
.order-8  {order:  8; }
.order-9  {order:  9; }
.order-10 {order: 10; }



/* Customize Simplebar scrollbars */
.simplebar-wrapper {
  height: 100%;
}
.simplebar-track {
  cursor: ns-resize !important;
  background: radial-gradient(maroon,yellow);
  opacity: 0.5;
  width: 32px !important;
  clip-path: polygon(0px 30px, 16px 1.8px, calc(100% - 16px) 1.8px, 100% 30px, 100% calc(100% - 30px), calc(100% - 16px) calc(100% - 1.8px), 16px calc(100% - 1.8px), 0% calc(100% - 30px));
}
.simplebar-scrollbar::before {
  background: radial-gradient(black,maroon);
  width: 22px !important;
  left: 5px !important;
  margin: 9px 0px !important;
  clip-path: polygon(0px 20px, 10px 2px, calc(100% - 10px) 2px, 100% 20px, 100% calc(100% - 20px), calc(100% - 10px) calc(100% - 2px), 10px calc(100% - 2px), 0% calc(100% - 20px));
}
.simplebar-scrollbar {
  min-height: 60px;
}

#pageName .simplebar-track { background: radial-gradient(maroon,yellow); }
#pageName .simplebar-scrollbar::before { background: radial-gradient(black, maroon); }
#pageBackground .simplebar-track { background: radial-gradient(darkblue,blue); }
#pageBackground .simplebar-scrollbar::before { background: radial-gradient(black, darkblue); }
#pageImage .simplebar-track { background: radial-gradient(maroon,orange); }
#pageImage .simplebar-scrollbar::before { background: radial-gradient(black, maroon); }
#pageAudio .simplebar-track { background: radial-gradient(purple,violet); }
#pageAudio .simplebar-scrollbar::before { background: radial-gradient(black, purple); }
#pageSettings .simplebar-track { background: radial-gradient(darkgray,gray); }
#pageSettings .simplebar-scrollbar::before { background: radial-gradient(black, gray); }

/* BACKGROUND */

#divBackground {
  z-index: 2;
}

.Hexagon {
  background: radial-gradient(#000000, #101010);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  z-index: 3;
  color: white;
}
.Invalid {
  background: radial-gradient(#000000, #0A0A0A);
}
.Valid {
  cursor: pointer;
}
.Valid::before {
  z-index: 2;
  position: absolute;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(#000000, #303030);
  transition: opacity 1000ms;
  opacity: 0;
}
.Valid:hover::before {
  opacity: 1.0;
}



/* ANIMATION */

.Animation {
  /*clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); */
  /* clip-path: circle(closest-side at 25%); */
  clip-path: circle();
  z-index: 1;
}
/* Just different colors - pastels preferably! */
#divAnimation0  { opacity: 0; background: #FF000080; }
#divAnimation1  { opacity: 0; background: #00FF0080; }
#divAnimation2  { opacity: 0; background: #0000FF80; }

#divAnimation3  { opacity: 0; background: #FFFF0080; }
#divAnimation4  { opacity: 0; background: #FF00FF80; }
#divAnimation5  { opacity: 0; background: #00FFFF80; }
#divAnimation6  { opacity: 0; background: #FFFFFF80; }

#divAnimation7  { opacity: 0; background: #C0C0C080; }
#divAnimation8  { opacity: 0; background: #A0C0F080; }
#divAnimation9  { opacity: 0; background: #A0F0C080; }
#divAnimation8  { opacity: 0; background: #C0A0F080; }
#divAnimation10 { opacity: 0; background: #C0F0A080; }
#divAnimation11 { opacity: 0; background: #C0F0A080; }
#divAnimation12 { opacity: 0; background: #F0A0C080; }
#divAnimation13 { opacity: 0; background: #F0C0A080; }

#divAnimation14 { opacity: 0; background: #FFFFFF80; }
#divAnimation15 { opacity: 0; background: #BFBFBF80; }
#divAnimation16 { opacity: 0; background: #7F7F7F80; }
#divAnimation17 { opacity: 0; background: #3F3F3F80; }


@keyframes jiggle {
  0%   { transform: rotate( 0deg); }
  25%  { transform: rotate( 2deg); }
  50%  { transform: rotate( 0deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate( 0deg); }
}



/* BUTTONS */

.MainButton {
  display: flex;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background: none;
  border: none;
  opacity: 0.2;
  z-index: 5;
  color: white !important;
  visiblity: hidden;
  font-family: Cairo;
}
.MainButton:hover {
  opacity: 1;
}
.MainButton.Selected {
  opacity: 1;
  color: yellow !important;
}

.Button {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background: none;
  border: none;
  opacity: 0;
  visiblitiy: hidden;
  z-index: 5;
}
.Button:hover {
  opacity: 1 !important;
}
.BtnReset {
  position: absolute;
  background: none;
  color: silver !important;
  font-weight: bold;
  text-decoration: none;
  border: none;
  width: 60px !important;
  height: 36px !important;
  top: 1px;
  right: 0px;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}

.CursorButton {
  display: flex;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background: radial-gradient(#000000, #FFFF00); /* yellow but mostly transparent */
  border: none;
  opacity: 0.4;
  transition: opacity 1000ms;
}
.CursorButton:hover {
  opacity: 0.8;
}

label,
.MainButton > i,
.Button > i,
.GongContent {
pointer-events: none;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}



/* GONGS */

.Gong {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.Gong > svg,
.Gong > img {
  pointer-events: none;
}



/* OPTIONS  BACKGROUND */

#divShade {
  z-index: 15;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  transition: opacity 500ms;
  background: black;
  opacity: 0;
  visibility: hidden;
}

#divOptions {
  position: absolute;
  width: 50%;
  height: 85%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  min-width: 400px;
  min-height: 400px;
  z-index: 20;
  opacity: 0;
  transition: opacity 500ms;
  visibility: hidden;
}
#divOptionsBG {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: black;
  opacity: 0.8;
  z-index: -1;
}
#divOptionsBGBorder {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: white;
  opacity: 0.15;
  z-index: -2;
  width:100% !important;
}



/* OPTIONS LIST */

#divOptionsList {
  position: absolute;
  top: 20px;
  left: 15px;
  width: 80px;
  bottom: 20px;
}

.OptionsButton {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  border: none;
  width: 64px !important;
  height: 64px !important;
  color: silver;
  transition: color 300ms;
}
.OptionsSmallButton {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  border: none;
  width: 40px !important;
  height: 40px !important;
  color: silver;
}
.OptionsSmallButton > i,
.OptionsButton > i {
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}
.OptionsButton:hover,
.OptionsButton:hover {
  color: white;
}
#divOptionsCursor {
  clip-path: polygon(50% 5%, 75% 5%, 100% 50%, 75% 95%, 50% 95%, 75% 50%);
  position: absolute;
  border: 1px;
}




/* OPTIONS PAGES */

#pageControl {
  position: absolute;
  top: 4px !important;
  left: 120px !important;
  right: 7px;
  bottom: 4px;
  background: transparent;
}
.Page {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: transparent;
  overflow: auto !important;
  overflow-x: hidden !important;
  opacity: 0;
  transition: opacity 200ms;
}


/* OPTOINS CONTROLS */


.HexHolder {
  width: calc(100% - 42px) !important;
  height: auto !important;
}
.HexOuter {
  width: calc(100% - 42px) !important;
  clip-path: polygon(0px 20px, 10px 2px, calc(100% - 10px) 2px, 100% 20px, 100% calc(100% - 20px), calc(100% - 10px) calc(100% - 2px), 10px calc(100% - 2px), 0% calc(100% - 20px));
}
.HexInner {
  top: 2px !important;
  left: 10px !important;
  width: calc(100% - 20px) !important;
  clip-path: polygon(0px 18px, 8px 1.8px, calc(100% - 8px) 1.8px, 100% 18px, 100% calc(100% - 18px), calc(100% - 8px) calc(100% - 1.8px), 8px calc(100% - 1.8px), 0% calc(100% - 18px));
}
.HexTallInner {
  top: 2px !important;
  left: 2px !important;
  width: calc(100% - 4px) !important;
  height: calc(100% - 4px) !important;
  clip-path: polygon(0px 30px, 16px 1.8px, calc(100% - 16px) 1.8px, 100% 30px, 100% calc(100% - 30px), calc(100% - 16px) calc(100% - 1.8px), 16px calc(100% - 1.8px), 0% calc(100% - 30px));
}

.Title > span,
.Title > label {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  color: white;
  font-weight: bold;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
  display: block !important;
  margin-top: 1px;
}
.EditText {
  color: white;
  border: none;
}
.EditMemoHolder {
  position: relative;
  min-height: 62px;
  height: 62px;
}
.EditMemo {
  color: white;
  position: relative !important;
  border: none;
  min-height: 58px;
  height: 58px;
  top: 2px;
  bottom: 2px;
}
.EditCancel {
  position: absolute;
  background: none;
  color: silver;
  text-decoration: none;
  border: none;
  width: 36px !important;
  height: 36px !important;
  top: 2px;
  right: 8px;
}
.EditCancel:hover {
  color: white;
}

.HexBtnOuter {
  clip-path: polygon(0px 20px, 10px 2px, calc(100% - 10px) 2px, 100% 20px, 100% calc(100% - 20px), calc(100% - 10px) calc(100% - 2px), 10px calc(100% - 2px), 0% calc(100% - 20px));
}

/* Options - Name */

/* Options - Background */

/* Options - Image */
#divImageSource {
  min-width: 200px;
}

/* Options - Audio */
#divAudioSource {
  min-width: 200px;
}

/* Options - Settings */
#divProxy {
  min-width: 200px;
}


/* HexaGon Color Picker */
#divColorPicker1 {
  position: relative;
  width: 440px !important;
  transform-origin: top left;
}
.ColorHexagon {
  position: absolute;
  width: 29px;
  height: 29px;
  margin-left: 25px;
  margin-top: 2px;
  cursor: pointer;
  clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);
}
.Picked {
  width: 29px;
  height: 29px;
  color: white;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black)  drop-shadow(0px 0px 1px black);
}
.ColorTooltip {
  --bs-tooltip-bg: #202020;
}
#divColorPicker2 {
}

/* RGB Color Picker */
.HexSliderH {
  top: 4px !important;
  left: 10px !important;
  width: calc(100% - 62px) !important;
  position: relative;
  z-index: 2;
  clip-path: polygon(0px 18px, 8px 1.8px, calc(100% - 8px) 1.8px, 100% 18px, 100% calc(100% - 18px), calc(100% - 8px) calc(100% - 1.8px), 8px calc(100% - 1.8px), 0% calc(100% - 18px));
}
.RGB::part(input) {
  cursor: pointer;
  --track-active-offset: 0%;
  --sl-color-primary-100: transparent;
  --sl-color-primary-200: transparent;
  --sl-color-primary-300: transparent;
  --sl-color-primary-400: transparent;
  --sl-color-primary-500: transparent;
  --sl-color-primary-600: transparent;
  --sl-color-primary-700: transparent;
  --sl-color-primary-800: transparent;
  --sl-color-primary-900: transparent;
  background-image: linear-gradient(to right,
      var(--track-color-inactive) 0%,
      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
      var(--track-color-inactive) 100%
    );
}
.HexSliderThumb {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0px;
  clip-path: polygon(0% 25%, 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%);
  z-index: 3;
}
.ThumbLabel {
  pointer-events: none;
  color: white;
  font-weight: bold;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}
.ThumbLabelR {
  pointer-events: none;
  transform: rotate(-90deg);
  color: white;
  font-weight: bold;
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}

/* Search Icons */
#divResultsOuter {
  height: auto !important;
  padding-bottom: 1px;

}
#divResultsInner {
  height: auto !important;
  margin-bottom: 3px !important;
  min-height: 100px;
}
.SearchIcon {
  border-radius: 0.375rem;
  cursor: pointer;
  max-width: 125px;
  max-height: 125px;
  display: flex;
  gap: 3px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.SearchIcon > div {
  color: silver;
}
.SearchIcon:hover {
  color: orange;
}
.SearchIcon:hover > div {
  color: white;
}
.SearchIcon.Selected > div,
.SearchIcon.Selected {
   color: lime;
}
.SearchIcon.Selected:hover > div,
.SearchIcon.Selected:hover {
   color: orange;
}

/* Image Adjustments */
.Gong > svg,
#divImage > svg {
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 3px black);
}
#divImageBG {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
#divImageFG {
  background: orange;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%, 25% 5%,
                      calc( 25% + 3px) calc(5% + 3px),
                      calc(  0% + 4px) 50%,
                      calc( 25% + 3px) calc(95% - 3px),
                      calc( 75% - 3px) calc(95% - 3px),
                      calc(100% - 4px) 50%,
                      calc( 75% - 3px) calc(5% + 3px),
                      calc( 25% + 3px) calc(5% + 3px));
  z-index: 1;
}
#divImagePreview {
  z-index: -1;
}
#divImageEditor {
  transform-origin: top left;
}


/* Audio Clip (Tabulator) Table */
#divAudioSetsTableHolder,
#divAudioClipTableHolder {
  min-height: 62px;
  overflow: hidden !important;
  padding-bottom: 4px;
  padding-top: 1px;
}
#divAudioSetsTable,
#divAudioClipTable {
  background-color: black !important;
  padding-bottom: 0px;
  padding-top: 4px;
  min-height: 54px;
}

.PlayClip > div {
  background: violet;
  color: white;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}
.PlayClip > div:hover {
  background: purple;
  color: silver;
}
.PlayClip.Playing > div {
  background: violet;
  color: white;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  filter: drop-shadow(0px 0px 1px black) drop-shadow(0px 0px 1px black);
}
.PlayClip.Playing > div:hover {
  color: silver;
}

.tabulator-table {
  background-color: black !important;
  overflow: hidden !important;
}
.tabulator-tableholder,
.tabulator-holder,
.tabulator-row,
.tabulator-row-even,
.tabulator {
  background-color: black !important;
  color: silver;
  overflow: hidden !important;
}
.tabulator-cell {
  border: none !important;
}
.tabulator-selected {
  background-color: deeppink !important;
  color: white !important;
}

/* COLORS */

.Black        { background: black;     }
.White        { background: white;     }
.Gray         { background: gray;      }
.Red          { background: red;       }
.Orange       { background: orange;    }
.Yellow       { background: yellow;    }
.Green        { background: green;     }
.Blue         { background: blue;      }
.RoyalBlue    { background: royalblue  }
.Indigo       { background: indigo;    }
.Violet       { background: violet;    }

.WhiteR       { background: radial-gradient(#00000000,white)         !important;}
.GrayR        { background: radial-gradient(#00000000,gray)          !important;}
.RedR         { background: radial-gradient(#00000000,red)           !important;}
.OrangeR      { background: radial-gradient(#00000000,orange)        !important;}
.YellowR      { background: radial-gradient(#00000000,yellow)        !important;}
.GreenR       { background: radial-gradient(#00000000,green)         !important;}
.BlueR        { background: radial-gradient(#00000000,blue)          !important;}
.RoyalBlueR   { background: radial-gradient(#00000000,royalblue)     !important;}
.IndigoR      { background: radial-gradient(#00000000,indigo)        !important;}
.VioletR      { background: radial-gradient(#00000000,violet)        !important;}

.WhiteRS      { background: radial-gradient(#00000000,white     70%) !important;}
.GrayRS       { background: radial-gradient(#00000000,gray      70%) !important;}
.RedRS        { background: radial-gradient(#00000000,red       70%) !important;}
.OrangeRS     { background: radial-gradient(#00000000,orange    70%) !important;}
.YellowRS     { background: radial-gradient(#00000000,yellow    70%) !important;}
.GreenRS      { background: radial-gradient(#00000000,green     70%) !important;}
.BlueRS       { background: radial-gradient(#00000000,blue      70%) !important;}
.RoyalBlueRS  { background: radial-gradient(#00000000,royalblue 70%) !important;}
.IndigoRS     { background: radial-gradient(#00000000,indigo    70%) !important;}
.VioletRS     { background: radial-gradient(#00000000,violet    70%) !important;}

.WhiteL       { background: linear-gradient(90deg,#000000,white);       }
.GrayL        { background: linear-gradient(90deg,#000000,gray);        }
.RedL         { background: linear-gradient(90deg,#000000,red);         }
.OrangeL      { background: linear-gradient(90deg,#000000,orange);      }
.YellowL      { background: linear-gradient(90deg,#000000,yellow);      }
.GreenL       { background: linear-gradient(90deg,#000000,green);       }
.BlueL        { background: linear-gradient(90deg,#000000,blue);        }
.RoyalBlueL   { background: linear-gradient(90deg,#000000,royalblue);   }
.IndigoL      { background: linear-gradient(90deg,#000000,indigo);      }
.VioletL      { background: linear-gradient(90deg,#000000,violet);      }

.RedW         { background: linear-gradient(60deg,#000000,red,       #000000); }
.OrangeW      { background: linear-gradient(60deg,#000000,orange,    #000000); }
.GreenW       { background: linear-gradient(60deg,#000000,darkgreen, #000000); }
.BlueW        { background: linear-gradient(60deg,#000000,blue,      #000000); }
.RoaylBlueW   { background: linear-gradient(60deg,#000000,royalblue, #000000); }
.IndigoW      { background: linear-gradient(60deg,#000000,indigo,    #000000); }
.VioletW      { background: linear-gradient(60deg,#000000,violet,    #000000); }