#replayButtons {
  flex-direction: column;
  min-width: 20rem;
  justify-content: center;
}
#layersButton {
  min-width: 6rem;
  min-height: 6rem;

}
#layersButton img {
  width: 190%; 
  height: 5rem; 
  object-fit: contain;
}
#gallery {
  align-items: center;
  gap:1rem;
  padding:3rem;
  max-width: 100rem;
}
#toolsInventoryHeader {
  width:100%;
}
#toolsInventoryHeaderClose {
  position:absolute;
  top:0;
  right:0;
  width:3rem;
  height:3rem;
  padding:.4rem;
  margin:.4rem;
  cursor: pointer;

}
#ui {
  /* width:73rem; */
  left:0;
  padding:2rem;
  padding-top:1rem;
  max-height:60%;
  overflow-y:auto;
  /* filter: url(#grainy); */
  /* background:red; */
}

#exportUI {
  flex-direction: column;
  /* background:red; */
  /* max-width: 90rem; */
  /* pointer-events:none; */
}

#fileDropdown {
  position:absolute;
  /* height: max-content; */
  min-height:max-content;
  pointer-events: all;
  padding:1.5rem;

}

#resize {
  position:relative;
  flex-direction:column;
}

#colorDisplay {
  /* transition: box-shadow 100ms;  */
  display:flex;
  flex-direction: row;
  pointer-events: none; 
  border-radius:1rem;
  overflow: hidden;
  width:100%;
  min-height: 8rem;
  /* height:100%; */
  position:relative;
}

#confirmMessage {
  font-size: 2.5rem;
  line-height:4rem;
  color:rgba(255, 255, 255, 0.786);
  /* background:red; */
  /* text-transform: none; */
  width:max-content;
  max-width:100%;
  font-family: sans-serif;
}
#colorDisplayLabels {
  position:absolute;
  width:100%;
  height:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
  pointer-events:none;
  flex-direction: row;
}

#colorDisplayLabels div {
  font-size:2rem;
  /* opacity:.7; */
  /* border: .2rem solid rgba(255, 255, 255, 0.203); */
  /* border-radius: 1rem; */
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
  box-sizing: border-box;
  text-align: center; 
  font-weight:600;
  color:rgba(255, 255, 255, 0.482);     
  box-shadow:none !important;
  pointer-events: all;
  cursor: pointer;
}



#colorDisplayLabels div:hover,
#colorDisplayLabels div:focus,
#colorDisplayLabels div:active {
  color:rgba(255, 255, 255, 0.616) !important;
  opacity:1;
}
#valueHueDragger {
  flex: 1;
  /* background:var(--cssCol); */
}
#satDragger {
  /* background:var(--cssCol); */
  flex:1;
}
#colorDisplayHelpers {
  position:relative;
  width:100%;
  height:100%;
}

#memoryUI {
  left:0;
  opacity:.4;
  background: var(--darker);
  border-radius: .5rem;
  
  pointer-events: none;
  /* background:red; */
  /* position:relative; */
  /* z-index: -1; */
}
#memoryUIText {
  font-size:1.5rem;
  text-align: start;
  line-height:1.5rem;

  position:relative;
  /* background:orange; */
  padding:0;
}
#saveIndicator {
  position:absolute;
  top:1.2rem;
  /* top:2.6rem; */
  /* left:12rem; */
  width:1rem;
  height:1rem;
  left: .5rem;
  /* background: red; */
  border-radius: 50%;
  /* text-align: start; */
  pointer-events: none;
  /* font-size:1.5rem; */
  z-index: 1;

}


#colorDisplayHelperValue {
  position:absolute;
  border-radius:.8rem;
  right:-5rem;
  height:100%;
  width:3rem;
  overflow:visible;
}
#colorDisplayGrabberValue {
  position:absolute;
  top:50%;
  width:100%;
  height:.5rem;
  background-color:rgb(194, 194, 194);
  border-radius: .1rem;
}
#colorDisplayHelperHue {
  position:absolute;
  border-radius:.8rem;
  top:-5rem;
  width:100%;
  height:3rem;
  overflow:visible;
}
#colorDisplayGrabberHue {
  position:relative;
  left:50%;
  height:100%;
  width:.5rem;
  background-color:rgb(194, 194, 194);
  border-radius: .1rem;
}

#uiMenuBG {
  position:absolute;
  top: 0rem;
  pointer-events: all;
  width:100%;
  height:100%;
  visibility:hidden; 
  overflow-y: auto;
  touch-action: auto;
  backdrop-filter: blur(10rem);
  -webkit-backdrop-filter: blur(10rem);
  justify-content: center;
  align-items: center;
  /* background:orange; */
}

#popupsBG {
  /* z-index:1; */
  position:fixed;

  /* background:rgba(0, 0, 0, .2); */
  width:100vw;
  height:100vh;
  top:0;
  left:0;
}
#uiContainer {
  position:relative;
  pointer-events: none;
  /* background:red; */
  width:100%;
  height:100%;
}
.moveableUI {
  /* background-color:#338f8f46; */
  /* z-index: 5; */
  box-sizing: border-box;
  display:flex;
  align-items:center;
  flex-direction:column;
  backdrop-filter: blur(7.5rem);
  -webkit-backdrop-filter: blur(7.5rem);
  pointer-events:all;
  height: min-content;
  overflow:hidden;
  position:absolute;
  /* max-width: 100rem; */
  width:min-content;
  border-radius: 1rem;
  padding:2rem;
  padding-bottom:.5rem;
  padding-top:.5rem;
  /* padding-top:3rem; */

}
#toolsUI {
  /* overflow-y: auto; */
  /* height: 100%; */
  position:relative;
  width:100%;
  /* height:70rem; */
  border-radius: 1rem;
}
#sideBar {
  /* z-index: 2; */
  position:fixed;
  right:0%;
  /* top:50%; */
  margin-top:auto;
  margin-bottom:auto;
  /* width:min-content; */
  width:7rem;
  height:calc(max(50%, 40rem));
  display:flex;
  justify-content:center;
  align-items:center;
  transition: opacity 1s ease-in-out, backdrop-filter 1s, -webkit-backdrop-filter 1s ;
  /* transform: translateY(-50%); */
  border-radius: 1rem;

}
#mainSlidersVertical {
  box-sizing: border-box;
  position:relative;
  flex-direction:column;
  /* padding:1rem; */
  /* background:var(--uiColTint); */
  /* border-radius: .5rem; */
  /* margin:2rem; */
  gap:1rem;
  height:100%;
}
.mainSlider {
  position:relative;
  width:100%;
  height:100%;
  /* background:var(--uiColTint); */
  border-radius: .5rem;
  /* margin:2rem; */
  /* gap:1rem; */
  /* height:100%; */
  background:orange !important;
}
#canvasVideo {
  background:transparent;
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  top:0;
}
#eyedropperUIFrame {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1rem;
  z-index: 5;
  background: var(--cssCol);
  border-radius: 50%;
  outline:1px solid white;
}

#toolSettings {
  overflow:visible;
}

#toolSettingsLabel {
  position:relative;
  background:var(--dark);

  font-size:2rem;
  font-weight:300;
  border-radius: 1rem;
  pointer-events:all;
  padding:1rem;
  margin-bottom:-1.3rem;
  box-sizing: border-box;
  z-index:1;
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
}
#toolSettingsLabel:hover {
  cursor: pointer;
  background: var(--hover);
}
#eyedropperUI {
  cursor:none;
  position:absolute;
  top:50%;
  left:50%;
  width:24rem;
  height:24rem;
  border-radius:50%;
  outline-offset: -1px;
  border: 4rem solid;
  outline: 2rem solid;
  transform: translate(-50%, -50%) ;
}
.resizeControl {
  pointer-events: all;
  position:absolute;
  bottom:0%;
  left:100%;
  margin-left:1rem;
  width:3rem;
  height:4rem;
  border-radius:.5rem;
  background:rgba(0, 0, 0, 0.237);
}
.resizeControl:hover {
  background:var(--hover);
}
.resizeControl:active {
  background:var(--accent);
}

#canvasBounds {
  position:absolute;
  transform-origin: center;
  /* background:red; */
  /* min-width:120rem; */
}

#replay {
  /* margin:2rem; */
  flex-direction: column;
  /* background: rgba(0, 0, 0, 0.2); */
  /* border-radius: 1.5rem; */
  width:54rem;
}

circle {
  width:5rem;
  stroke-width: 1.5rem;
  stroke:rgba(255, 149, 0, 0.757);
  stroke-dasharray: 407;
  stroke-dashoffset:0;
  fill:none;
}

.outerShadow{
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
              -6px -6px 10px -1px rgba(255, 255, 255, 0.144),
}
.innerShadow{
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
              inset -4px -4px 6px -1px rgba(255, 255, 255, 0.152),
              0.5px 0.5px 0px rgba(0,0,0,0.15),
              0px 12px 10px -10px rgba(0,0,0,0.05);

}
#replayCoverButton:hover {
  color:white;
  opacity:1;
  /* background:transparent; */
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
  inset -4px -4px 6px -1px rgba(255, 255, 255, 0.152),
  0.5px 0.5px 0px rgba(0,0,0,0.15),
  0px 12px 10px -10px rgba(0,0,0,0.05);

}
#replayCoverButton {
  position:absolute;
  opacity:.9;
  top:50%;
  left:50%;
  font-size: 3rem;
  /* background-image: url('./assets/toolIcons/play.svg'); */
  background-size:30%;
  background-repeat: no-repeat;
  background-position: center;
  transform:translate(-50%,-50.5%);
  border-radius: 50%;
  width:21rem;
  min-height:21rem;
  /* background:rgba(0, 0, 0, 0.187); */
}
#layersUI {
  /* padding-top:3rem; */
  top:30%;
}
#layersUI > *{
  width:3rem;
}
#pricingInfoButton {
  font-size: 1.5rem;
  background:rgba(209, 209, 209, 0.244);
  border-radius: 2rem;
  width:3rem;
  height:3rem;
  align-self:center;
  align-items: center;
  justify-content:center;

}

#dragOverlay{
  /* background:rgba(255, 0, 0, 0.126); */
  width:100%;
  height:100%;
  position:absolute;
}

#tooltipUI {
  pointer-events: none;
  touch-action: none;
  position:absolute;
  top:50%;
  left:50%;
  background:rgba(151, 151, 151, 0.617);
  font-size: 2.3rem;
  font-weight: 400;
  color:rgba(255, 255, 255, 0.76);
  opacity:0;
  transition: opacity 300ms ease-in-out;
  padding:2rem;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
  border-radius: 1rem;
  width:max-content;
}
#share{
  position:relative;
  gap:1rem;
  /* padding:4rem; */
  /* width:calc(max(30rem, 80%)); */
  max-width: 56.5rem;
  height:max-content;
  flex-direction: column;
  pointer-events: none;
  /* background:rgba(0, 0, 0, 0.199); */
}
.qrContainer{
  position:relative;
  width:20rem;
  height:20rem;
  background:rgba(255, 255, 255, 0.484);
  border-radius:1rem;
}
.qrContainer > *  {
  max-width:100%;
}
#share > *  {
  max-width:100%;
  font-size:2rem;
}
#seatsQuantitySelecter{
  position:absolute;
  flex-direction: column;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  border-radius: 1rem;
  width:40rem;
  height:max-content;
  gap:1rem;
  padding:5rem;
  max-width:30rem;
  background: var(--uiCol);
  border: var(--border);
  box-shadow: var(--dropShadow);
}
#seatsQuantitySelecter .hbox * {
  /* margin:3rem; */
  flex:1;
  width:10rem;
  /* justify-content: space-between; */
  /* align-items: center; */
}
#toolCursor {
  position:absolute;
  pointer-events: none;
  top:0;
  left:0;
}

#drawHereLabel {
  position:absolute;
  font-size:3rem;
  font-weight:300;
  width:30rem;
  height:30rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius:30rem;
  opacity:.5;
  outline: .5rem solid rgba(255, 255, 255, 0.169);
}
#toolCursorCircle {
  mix-blend-mode: difference;
  position:absolute;
  pointer-events: none;
  border: .5px solid rgba(255, 255, 255, 0.788);
  outline: 1px solid rgba(0, 0, 0, 0.5);
  transform:  translate(-50%, -50%);
  border-radius:100%;
  /* opacity:0.5; */

}
#toolCursorLine {
  mix-blend-mode: difference;
  position:absolute;
  pointer-events: none;
  border: .5px solid rgba(255, 255, 255, 0.788);
  outline: 1px solid rgba(0, 0, 0, 0.5);
  transform:  translate(-50%, -50%);
  /* background: var(--cssCol); */
  width:50rem;
  height:0rem;
  opacity:0.5;

}
#toolCursorCenter {
  position: absolute;
  left:50%;
  transform: translate(-50%, -50%);
  width: .5rem;
  height: .5rem;
  /* background: var(--cssCol); */
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.802);
  isolation: isolate;
}

#toolCursorCenter.highContrast {
  border-radius: 100%;
  outline: 2px solid rgba(255, 255, 255, .9);
  border: 2px solid rgba(0, 0, 0, .75);
  isolation: isolate;
}

/* #toolCursorCenter.precisionTriangle {
  transform: translate(0%, 0%);
  outline: 1px solid rgba(255, 255, 255, .9);
  border: 1px solid rgba(0, 0, 0, .75);
} */
#toolCursorCenter.precision {
  background-image: url('./assets/toolIcons/cursorTriangle.svg');
  background-size: cover;
  background-color:transparent !important;
  border-radius:0;
  height:3rem;
  width:3rem;
  transform: translate(-50%, -100%);
}


#wglCanvas {
  position:absolute;
  background:rgb(100, 100, 100);
  height:30rem;
  width:30rem;
  right:0;
  bottom:0;
  border-radius:1.5rem;
}

#colorBoxGap {
  min-height:.2rem;
  background:rgba(255, 255, 255, 0.09);
  width:100%;
}
#usernameHBox {
  gap:1rem;
  align-items: center;
}
#avatar {
  position:relative;
  cursor: pointer;
  min-width: 10rem;
  max-width: 10rem;
  max-height: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: var(--dark);
  background-size: contain; /* Updated property */
  border: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1);
  font-size: 4rem;
  font-weight: 300;
  align-items: center;
  justify-content: center;
  color: var(--font);
  /* background:red; */
}
.outlineHover:hover {
  outline:1.2px solid rgba(255, 255, 255, 0.5);
}
#conflictResolverUI {
  padding:5rem;
}
#canvasConflictsContainer > * {
  height:auto;
  padding:5rem;
}
.conflictsThumbnail {
  min-width:auto;
  max-width:40rem;
  max-height:40rem;
  min-height:auto;
  border-radius:1rem;
  object-fit: contain;
}

#usernameLabel {
  text-transform: none;
  padding:2rem;
  font-weight:300;
  font-size:3rem;
}

#upgradeToProButton {
  align-self:center;
  background:var(--accent3);
}
#upgradeToProButton:hover {
  background:var(--accent3Hover);
}

#profileButton {
  background-image: var(--avatarImage);
  font-size:2rem;
  min-width: 6rem;
  max-width: 6rem;
  max-height:6rem;
  background-size: cover;

}
#profileButton.icon {
  background-image:url('./assets/toolIcons/settings.svg');
  background-size: 85%;
  

}
.hoverOutline:hover {
  outline:1px solid var(--ghost-stronger);

}
#prefsMenu {
  /* position:absolute; */
  margin-top:8rem;
  flex-direction: column;
  margin-left:auto;
  gap:2rem;
  padding:2rem;
  width:40rem;
  max-width:80rem;
  height:min-content;
  border-radius: 1rem;
}
#colorPrefs {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  width:min-content;
}
.column {
  display:flex;
  flex-direction: column;
  gap:.1rem;
  
}
.grid3{
  grid-template-columns: 1fr 1fr 1fr;
  display:grid;
}

#windowQR {
  position:absolute;
  bottom:1rem;
  right:1rem;
  width:10rem;
  height:10rem;
  background:rgb(255, 255, 255);
  border-radius: .4rem;
  padding:.7rem;
  mix-blend-mode: normal;
  opacity: .3;
}
#curveEditorPanel {
  position:absolute;
  padding:5rem;
  border-radius: 1rem;
  top:40%;
  width:50rem;
  height:50rem;
  overflow:visible;
}
#curveEditorContainer {
  position:relative;
  /* background:orange; */
}
#curveEditor {
  background:#00000032;
  border-radius: 5px;
  overflow:visible;
}
.controlPoint {
  position:'absolute';
  width:'10px';
  height:'10px';
  background:orange;
}

#canvasQR {
  position:absolute;
  bottom:1rem;
  right:1rem;
  width:20rem;
  height:20rem;
  background:rgb(255, 255, 255);
  border-radius: .4rem;
  padding:.7rem;
  opacity: .8;
}
#versionLabel {
  pointer-events: none;
  position:absolute;
  transform:translateX(-50%); 
  left:50%;
  top:-.5rem;
  flex:1; 
  display:flex; 
  flex-grow: 1;
  justify-content:center;
  font-weight:100;
  font-size:1.6rem;
  opacity:.5
}

#webbypaintLogo {
  /* position:relative; */
  pointer-events: none;
  align-self:center;
  margin-left: auto;
  margin-right: auto;
  font-size:5rem;
}
#webbypaintLogoContainer{
  pointer-events: none;
  display:flex;
  width:100%;
  position:relative;
}
#hotkeysUI {
  box-sizing: border-box;
  max-width:150rem;
  padding:5rem;
}
.hotkey {
  width:100%;
  height:6rem;
}

.hotkeyContainer {
  justify-content: space-between;
  padding:.5rem;
}

#hotkeyRecorder {
  /* background:rgba(255, 0, 0, 0.164); */
  width:100%;
  height:100%;
  z-index: 1;
}
#confirmControls {
  top:100%;
  position:absolute;
  background: var(--uiCol);
  width:100%;
  padding:.5rem;
  display: flex;
  justify-content:center;
  align-items: center; /* Added to center children vertically */
  box-sizing: border-box;
  border-radius:1rem;
}
#confirmControls > *{
  min-width: 8rem;
  min-height: 8rem;
  margin: 0.5rem; /* Added margin to separate children */
}
#layerMenu {
  width:25rem;
  background:var(--uiCol);
  border-radius:1rem;
  box-shadow: var(--dropShadow);
}
#layerMenuLabel {
  font-size:small;
  /* background:red; */
  align-self: center;
  padding: 1rem;
}
#replayExport {
  top:0;
  padding:2rem;
}
#statusUI {
  pointer-events: none;
  flex-direction:row;
  transition: opacity 0.5s ease-in-out;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
  font-size:2.5rem;
  position:relative;
  color: var(--font);
  width:100%;
  height:100%;
}
#warningUI {
  pointer-events: none;
  touch-action: none;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background:rgb(175, 76, 76);
  font-size: 2.3rem;
  font-weight: 400;
  color:rgba(255, 255, 255, 0.76);
  opacity:1;
  transition: opacity 300ms ease-in-out;
  padding:2rem;
  padding-top:1.5rem;
  padding-bottom:1.5rem;
  border-radius: 1rem;
  width:max-content;
}

.slider{
  background:red;
}
.sliderLabel {
  pointer-events: all;
  position:absolute;
  color:var(--font);
  left:-3rem;
  font-size:small;
}
.sliderLabelAbove {
  pointer-events: none;
  position:absolute;
  color:var(--font);
  left:0rem;
  top:-.3rem;
  font-size:1.75rem;
}

.label {
  justify-content: center;
  width:max-content;
  padding-left:2rem;
  padding-right:2rem;
  padding-top:1rem;
  padding-bottom:1rem;
  font-size:2rem;
}
.labelSmall {
  font-size: 1rem;
  background:red;
}
#uiModalsContainer {
  pointer-events:all;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  /* z-index:99; */
  /* background:rgba(255, 166, 0, 0.351); */
}
#autosavesGrid {
  background:rgba(0, 0, 0, 0.199);
  border-radius:1rem;
  box-sizing: border-box;
  /* margin:5rem; */
  margin-left:auto;
  margin-right:auto;
  box-sizing: border-box;
  width:90%;
  height:auto;
  display: grid;
	grid-auto-flow: column;
	grid-gap: .5rem;
  grid-column-gap:4rem;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(5, 1fr);   
  align-items: start;
}

#autosavesUI {
  width:100%;
  height:50rem;
  position:absolute;
  top:0;
  gap:0rem;
  transform:translate(-50%);
  /* background:red; */
}

#transformControls {
  pointer-events:none;
  border-radius:1rem;
  position:absolute;
  bottom:10rem;
  left:50%;
  transform:translate(-50%,0);
  backdrop-filter: blur(5rem);
  gap:0;
} 
#layerMenuSliders {
  /* background:red; */
  left:10rem;
  margin:1rem;
  margin-left:4.5rem;
  width:18.5rem;
}
#colorBoxY  {
  position:absolute;
  width: 100%;
  height: 100%;
  pointer-events:none;
  background: linear-gradient(to top,
  hsla(0, 0%, 0%, var(--saturationInverted)) 0%,
  hsla(0, 0%, 50%, var(--saturationInverted)),
  hsla(0, 0%, 100%,var(--saturationInverted)) 100%
  );
}

#signInWithGoogle {
  margin-top:2rem;
  gap:3rem; 
  background:#ffffffe7;
  color:rgb(0, 0, 0); 
  flex-direction:row;
  width:100%;
  padding:3.5rem;
  font-weight:500;
}

#signInWithGoogle:hover {
  background:rgb(219, 219, 219);
}
#signInWithGoogle:active {
  background:rgb(185, 185, 185);
  box-shadow: var(--dropShadow);
}
#monthlyYearly {
  /* background:red; */
  margin:2rem;
  padding:1rem;
}
#colorBoxGrabber {
  position:relative;
  pointer-events: none;
  width: 5rem;
  height: 5rem;
  min-width: 5rem;
  min-height: 5rem;
  border-radius: 50rem;
  left:var(--huePercent);
  top:var(--lightnessPercent);
  transform:translate(-50%,-57%);
  box-shadow: none;
  transform-origin: center;
  border: 1px solid rgba(255, 255, 255, 0);
  outline-offset: -1px;
  background:var(--cssCol);
}
#colorBoxGrabberWidget {
  pointer-events:none;
  position:absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  box-shadow: none;
  transform-origin: center;
  border: 1px solid #ffffff5d;
  background: var(--cssCol);
}
#colorBoxGrabber.absoluteMode {
  min-width:20rem;
  min-height:20rem;
  width: 20rem;
  height: 20rem;
  transition: min-heigtht .2s , min-width .2s ,border-radius .1s ease-in-out, outline-offset .1s ease-in-out;  
}
#colorBoxGrabber.relativeMode {
  height:0rem;
  width:0rem;
  min-width:250rem;
  min-height:250rem;
  transform:translate(-50%,-50%);
  transform-origin: center;
  transition: min-height .3s , min-width .3s ,border-radius .1s ease-in-out, outline-offset .1s ease-in-out;  
  z-index:1;
}


.square {
  width: 100%;
  height: 100%;
  /* background: var(--cssCol); */
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}
.colorBoxSlider {
  max-width:7rem;
  margin:0px;
  padding:0px;
}

#hotkeyInputContainer {
  margin-top:3rem;
  position:relative;
  /* background:red; */
  height:15rem;
  width:50rem;
}
#hotkeyInput {
  cursor: default;
  position:absolute;
  width:41rem;
  padding:4.3rem;
  padding-bottom:2.4rem;
  pointer-events: all;
  /* background:var(--dark); */
  color: transparent;
  background-color:transparent;
  /* background:red; */
}
#hotkeyInputText {
  /* padding:4.3rem; */
  position:absolute;
  width:100%;
  height:12.5rem;
  text-align: center;
  justify-content: center;
  align-items: center;
  background:var(--dark);
  border-radius:.5rem;

}
#colorBoxContainer {
  position:relative;
  flex-direction: row;
  width:100%;
  height:100%;
  min-height:20rem;
  /* background:red; */
}
#colorBox {
  pointer-events: all;
  position:relative;
  /* min-height:25rem; */

  background: url('./assets/toolIcons/okhsl.webp');
  background-size: 100% 100%;
  background-repeat: repeat-x;
  width:100%;
  height:100%;
  overflow:hidden;
  border-top-left-radius: .75rem;
  border-bottom-left-radius: .75rem;
}
#syncStatusContainer {
  width:100%;
  opacity:.8;
  font-size:2.2rem;
}
#syncStatus {
  align-self: flex-start;
  text-align: center;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
#upgradeSyncButton {
  font-size:2rem;
  background:var(--accent3);
  /* max-width:min-content; */
  /* margin-left: auto; */
  min-width:13rem;
  /* padding-left:6rem;
  padding-right:6rem; */
}
#upgradeSyncButton:hover {
  background:var(--accent3Hover);
}
#experiments {
  width:40rem;
  height:40rem;
  border:1px solid white;
  /* background:red; */
}
.info {
  min-width:3.5rem;
  height:3.5rem;
  pointer-events:all;
  background:rgba(255, 255, 255, 0.101);
  border-radius: 5rem;
  align-self:center;
  font-size:1.5rem;
  font-weight:400;
  color:white;
  background-size:cover;
  background-position: center;
  background-image: url('./assets/toolIcons/help.svg');
}
.info:hover {
  background-color:rgba(255, 255, 255, 0.498);
}
.sliderGrabberTall {
  border-radius: .25rem;
  position:absolute;
  border: .3rem solid rgb(255, 255, 255);
  pointer-events:none;
  /* z-index:1; */
  background-color:#4f4f4fa4;
  mix-blend-mode: invert;
}
.sliderGrabberHighVis {
  border: '3px white solid';
}
#hueSat {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
#splashScreen {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background: #000000a3;
  backdrop-filter: blur(5rem);
  -webkit-backdrop-filter: blur(5rem);
  z-index: 100;
  display:flex;
  justify-content:center;
  align-items:center;
  transition: opacity 1s ease-in-out, backdrop-filter 1s, -webkit-backdrop-filter 1s ;
}
#cross {
  pointer-events: none;
  position:absolute;
  width:0rem;
  height:0rem;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
#cross.relativeMode {
  width:200rem;
  height:200rem;
  transition:width .17s ease-in-out, height .17s ease-in-out !important;

}
#horizontalLine {
  height:.2rem;
  width:100%;
  background: linear-gradient(to right, var(--ghost), var(--ghost-stronger), var(--ghost));  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

}
#verticalLine {
  width:.2rem;
  height:100%;
  background: linear-gradient(to top, var(--ghost), var(--ghost-stronger), var(--ghost));  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.thumbTextContainer {

  top:50% !important;
  gap:1rem;
  left:50%;
  transform:translate(-50%,-50%) !important;
  width:100%;
  pointer-events:none;

}

#cornerMessage {
  pointer-events:all;
  position:absolute;
  flex-direction: row;
  bottom:-6.5rem;
  right:0;
  background:rgb(115, 44, 248);
  max-height:2rem;
  padding:2rem;
  padding-right:5rem;
  border-radius:.5rem;
  justify-content:center;
  align-items:center;
  font-size:2rem;
  font-weight:600;
  color:var(--font);
  transition: opacity 3s ease-in-out, background .1s ease-in-out, bottom 1s;
}
#cornerMessage:hover {
  background:rgb(159, 95, 255);
  cursor: pointer;
}
#cornerMessageText {
  pointer-events: none;
}
#cornerMessage .closeButton {
  top:16%;
  cursor: pointer;
  position:absolute;
}

.transformIcon {
  pointer-events: none;
  width:5rem;
  height:5rem;
  /* background:red; */
}