/*
███████  ██████  ███    ██
██      ██    ██ ████   ██
█████   ██    ██ ██ ██  ██
██      ██    ██ ██  ██ ██
██       ██████  ██   ████
*/





@font-face { font-family: "alumni";
  src: url("../fon/Alumni.ttf");
  font-weight: 400;
}

@font-face { font-family: "ubuntu";
  src: url("../fon/Ubuntu.ttf");
  font-weight: 400;
}

@font-face { font-family: "mono";
  src: url("../fon/UbuntuSansMono.ttf");
  /* font-weight: 400; */
}


/*////////////////////////////////////////*/


html,
body,
#slash p,
#percent > p { font-family: 'alumni'; }


h4,
#col_ui,
#col_ui_p,
.subColor { font-family:'ubuntu'; }

p,
h6,
button,
#pal_txt,
#snap_txt,
#pairing,
#clearArrowsSplash,
#clearLabelsSplash,
#lbl_txt,
#botomAlert,
#pal_chose,
#col_root,
#console,
#legend,
.h7,
.choiceSnap,
.knob32 span,
.knob48 span,
.list-item,
.sub-item { font-family:'mono'; }


canvas {
  border-radius: 3px;
}





/*
███████      ██ ███    ██ ██████  ███████ ██   ██
   ███       ██ ████   ██ ██   ██ ██       ██ ██
  ███  █████ ██ ██ ██  ██ ██   ██ █████     ███
 ███         ██ ██  ██ ██ ██   ██ ██       ██ ██
███████      ██ ██   ████ ██████  ███████ ██   ██
*/





h1 { z-index: 111; }
h2 { z-index: 111; }

#snap_bu   { z-index: 333; }
#snap_txt  { z-index: 333; }
#snap_list { z-index: 48; }
#col_root { z-index: 12; }
#viewer canvas  { z-index: 0; }





/*
████████  █████   ██████  ███████
   ██    ██   ██ ██       ██
   ██    ███████ ██   ███ ███████
   ██    ██   ██ ██    ██      ██
   ██    ██   ██  ██████  ███████
*/





html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* prevents scrollbars */
  height: 100%;
  width: 100%;
  background-color: #000 !important;
}

canvas {
  display: block; /* remove inline-block gaps */
}

h1 {
  color: var(--tt);
  font-weight: 100;
  font-size: 7em;
  position: absolute;
  top: -25px;
  right: 5px;
  margin: 0;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

h2 {
  color: var(--tt);
  font-weight: 400;
  font-size: 2.2em;
  position: absolute;
  top: 85px;
  right: 10px;
  margin: 0;
  text-align:right;
  line-height: .8;
  letter-spacing:.02em;
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

h4 {
  color: var(--tt);
  font-weight: 400;
  font-size: 2em;
  margin:15px;
}

h5 {
  color: var(--tt);
  font-weight: 400;
  font-size: 4em;
}

h6 {
  margin:0;
  position: absolute;
  bottom:-3px;
  right:2px;
  font-size:18px;
  color: var(--onTx);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.h7 {
  color: var(--dim);
  font-weight: 600;
  font-size: 1.5em;
  text-align:left;
  margin:0 0 26px 10px;
}

p {
  color: var(--tt);
  text-align: center;
  font-size: 1.1em;
  margin:3px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

button {
  background-color: var(--ofBg);
  color: var(--ofTx);
  width: 55px;
  height: 23px;
  margin: 2px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
  border: 0;
  letter-spacing: 1px;
  font-size: 14px;
}
button:hover {
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  color: var(--hv);
}
button:active {
  background: var(--onBg);
}
button.active,
button.activ {
  background: var(--onBg);
  color: var(--onTx);
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  /* cursor:default; */
}
button.active:hover {
  color: var(--hv);
  background: var(--dim);
}
.hid,
.hiid,
.hiiid {
  display:none!important;
}





/*
██    ██ ██ ███████ ██     ██ ███████ ██████
██    ██ ██ ██      ██     ██ ██      ██   ██
██    ██ ██ █████   ██  █  ██ █████   ██████
 ██  ██  ██ ██      ██ ███ ██ ██      ██   ██
  ████   ██ ███████  ███ ███  ███████ ██   ██
*/





#viewer {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: block; /* ensures full width */
}

#viewer canvas {
  opacity: 0;
  transition: opacity 1s ease;
  position: relative;
}





/*
██████  ███████ ██████   ██████ ███████ ███    ██ ████████
██   ██ ██      ██   ██ ██      ██      ████   ██    ██
██████  █████   ██████  ██      █████   ██ ██  ██    ██
██      ██      ██   ██ ██      ██      ██  ██ ██    ██
██      ███████ ██   ██  ██████ ███████ ██   ████    ██
*/





#percent {
  font-size: 7em;
  color:  #4af;
  display: flex;
  justify-content: center;
  background-color: #000;
  height: 100%;
  align-items: center;
  opacity: 1;
  z-index:88;
}

#percent > p {
  margin: 0;
  background-color: #000;
}





/*
 ██████  ██████  ███    ██ ███████  ██████  ██      ███████
██      ██    ██ ████   ██ ██      ██    ██ ██      ██
██      ██    ██ ██ ██  ██ ███████ ██    ██ ██      █████
██      ██    ██ ██  ██ ██      ██ ██    ██ ██      ██
 ██████  ██████  ██   ████ ███████  ██████  ███████ ███████
*/





#console {
  font-size: 1.5em;
  color: var(--tt);
  position: absolute;
  left:0px;
  top:-10px;
  margin:15px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  z-index: 11;
}





/*
██      ███████  ██████  ███████ ███    ██ ██████
██      ██      ██       ██      ████   ██ ██   ██
██      █████   ██   ███ █████   ██ ██  ██ ██   ██
██      ██      ██    ██ ██      ██  ██ ██ ██   ██
███████ ███████  ██████  ███████ ██   ████ ██████
*/





#legend {
  font-size: 1em;
  color: var(--ttt);
  position: absolute;
  left:0px;
  top:22px;
  margin:15px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  border-bottom: 1px solid var(--tt);
  z-index: 11;
}

.tt {
  color: var(--tt);
}




/*
██████  ██    ██ ████████  ██████  ███    ██ ███████
██   ██ ██    ██    ██    ██    ██ ████   ██    ███
██████  ██    ██    ██    ██    ██ ██ ██  ██   ███
██   ██ ██    ██    ██    ██    ██ ██  ██ ██  ███
██████   ██████     ██     ██████  ██   ████ ███████
*/




#showAll {
  display:flex;
  align-items: flex-end;
}

#cloneAll {
  display:flex;
  align-items: flex-end;
}

#butonz {
  position: fixed;
  left:10px;
  bottom:10px;
  display: flex;
  flex-direction: row;
  z-index:111;
  /* width: 540px; */
}

#col_alfa {
  display:flex;
  flex-direction: column;
  align-items: center;
  margin-bottom:2px;
}

#spin,
#subLink,
#aro_thisLink,
#thisLink,
#allLabel,
#thisLabel,
#blow {
  width:61px;
}

#spin{
  /* display:flex; */
  display:none;
  /* flex-direction: column;
  justify-content: flex-end; */
}

#blow{
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}

#pairing {
text-align:left;
position: absolute;
bottom:155px;
left:22px;
font-weight:900;
font-size:.8em;
margin:0;
color: var(--ttt);
}

#aro_now,
#lbl_now{
  height:52px;
}

.ei.activ {
  cursor:default;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.do {
  background-color: var(--onBg);
  color: var(--onTx);
  cursor:pointer;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.do:hover {
  color: var(--ofBg);
}
.do:disabled {
  background-color: var(--ofBg);
  color: var(--ofTx);
  cursor:default;
}

.vtBu {
  writing-mode: vertical-rl;
  text-orientation: upright;
  height:105px;
  width:28px;
}
#group.active {
  cursor:pointer;
}
#subGroup {
  display:flex;
}
#subGroup button{
  width:24px;
}

#xyz {
  width: 115px;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
}

#xyz_defo,
#xyz_null {
  height:32px;
  width:50px;
  margin-bottom:0;
}
/* #resetXYZ {
  margin-bottom:3px;
} */





/*
██      ██ ███████ ████████
██      ██ ██         ██
██      ██ ███████    ██
██      ██      ██    ██
███████ ██ ███████    ██
*/





#list {
  position:fixed;
  top:50px;
  left:15px;
  z-index:44444;
}
#sublist {
  position:fixed;
  top:-10px;
  left:15px;
  z-index:33333;
  padding-left:45px;
  border-top: 1px solid var(--tt);
}


.list-item,
.sub-item {
  cursor:pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

.list-item {
  color:  var(--tt);
  font-size:90%;
  margin-bottom:-2px;
}
.list-item:hover,
.list-item.active {
  color:  var(--hv);
}
.list-item.dim {
  color:  var(--dim);
}
.list-item.dim.active {
  color:  var(--hv)!important;
  opacity:.7;
}

.sub-item {
  color:  var(--tt);
  font-size:80%;
}
.sub-item:hover,
.sub-item.active {
  color:  var(--hv);
}
.sub-item.dim {
  color: var(--dim);
}
.sub-item.dim.active {
  color: var(--hv)!important;
  opacity:.7;
}






/*
 ██████  ██████  ██       ██████  ██████
██      ██    ██ ██      ██    ██ ██   ██
██      ██    ██ ██      ██    ██ ██████
██      ██    ██ ██      ██    ██ ██   ██
 ██████  ██████  ███████  ██████  ██   ██
*/







#col_root {
    font-size: 1.1em;
    position: absolute;
    bottom:10px;
    right:10px;
    /* width:114px; */
    text-align: center;
    font-weight: 900;
    display:flex;
    align-items: center;
    flex-direction: column;
}
#col_knobz {
  width: 70px;
}
#col_subKnobz {
  right:0;
  z-index:8888888;
  width:70px;
  height:74px;
  margin-top:2px;
  margin-left:-2px;
}

.knub,
.knyb,
.knab,
.kneb,
.knib {
  display: inline-block;
  image-rendering: pixelated; /* For crisp pixel art */
  border-radius:5px;
  position:relative;
}
.knob {
  border-radius:5px;
  border:solid 2px var(--bg);
}

.knob.active {
  border:solid 2px var(--clik);
}
.knob32 {
  width:32px;
  height:32px;
}
.knob48 {
  width:48px;
  height:48px;
}
.knob32 span,
.knob48 span {
  color:#fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  z-index: 22;
}
.knob32 span {
  font-size: 13px;
  position: absolute;
  right: 4px;
  top: 0px;
}
.knob48 span {
  font-size: 19px;
  position: absolute;
  right: 5px;
  top: 0px;
}

.bg0 {
  background-color: var(--tt);
}

#col_copy,
#col_paste,
#pal_gen,
#pal_new,
#pal_defo,
#pal_expo,
#pal_impo,
#pal_kil,
#pal_save,
#pal_togl {
  width:70px;
  height:20px;
  border:0;
  border-radius:3px;
}


#activeColor { display:none; }

#col_copy,
#col_paste {
  color:var(--bg);
  display:flex;
  flex-direction: column;
  justify-content: center;
  font-size:14px;
  cursor: pointer;
}
#col_copy {
  margin-bottom:6px;
}
#col_copy:hover,
#col_paste:hover{
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

#pal_gen.activ {
  background: var(--onBg);
  color:  var(--onTx);
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  cursor: pointer;
}
#pal_gen.activ:hover {
  color:  var(--bg);
}

#pal_input {
  display: flex;
  flex-direction: column;
  margin-top:5px;
  position: absolute;
  bottom:0px;
  right:83px;
  z-index:111;
}

#pal_txt{
  width:200px;
  background-color: rgba(0,0,0,0);
  border: 0;
  color: var(--ttt);
  resize:none;
  text-align:right;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  position: absolute;
  bottom:38px;
  right:3px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#pal_txt:focus-visible{
  outline:none;
}

#pal_chose {
  display: none;
  align-items:flex-start;
  flex-direction: column;
  border-radius: 3px;
  padding:5px;
  background-color: var(--ofBg);
  position: absolute;
  bottom:58px;
  right:78px;
  z-index:111;
}
#pal_chose.active {
  display: flex;
}

.choicePalet {
  cursor: pointer;
  font-size:12px;
  text-decoration:none;
  color:var(--ofTx);
}
.choicePalet:hover,
.choicePalet.activ {
  color: var(--hv);
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}

#col_main {
  width:76px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#litz {
  width:76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:20px;
}

#deleteSplash button {
  width: 88px;
}
#deleteSplash h2 {
  position:relative;
}




#col_ui {
  position:absolute;
  top:222px;
  left:43%;
  display:flex;
  flex-direction:column;
  background-color: #666;
  border-radius:3px;
  box-shadow: 0px 0px 24px rgba(0,0,0,.5);
  z-index: 111111;
  padding:15px;
}
#col_ui_p {
  margin-bottom:15px;
  color:#fff;
  font-size:20px;
}

#total_snap,
#col_ui_bu {
  font-size:2em;
  color: var(--ttt);
  margin-bottom: 15px;
  font-weight: 100;
  cursor:pointer;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#total_snap{
  margin-bottom: 0;
}
#col_ui_bu {
  margin-bottom: 15px;
}
#col_ui_bu:hover,
#total_snap:hover {
  color: var(--hv);
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#col_ui_bu:active,
#total_snap:active {
  color: var(--ofBg);
}

#col_ui_x {
  position:absolute;
  top:-3px;
  right:4px;
  color: #444;
  font-size: 1.3em;
  cursor:pointer;
}
#col_ui_x:hover {
  color: #fff;
}
#col_ui_x:active {
  color: #444;
}

#col_ui_HSL{
  display: flex;
  justify-content:flex-start;
}

#col_ui_list {
  display:flex;
  flex-direction:column;
  margin-left:10px;
}

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

#col_ui_copy,
#col_ui_paste {
  width:70px;
  height:20px;
  border:0;
  border-radius:3px;
  color:#000;
  display:flex;
  flex-direction: column;
  justify-content: center;
  font-size:14px;
  cursor: pointer;
  text-align:center;
  font-weight:900;
}

#col_ui_paste {
  margin-top:5px;
}
#col_ui_copy {
  margin-top:10px;
}

#col_ui_copy:hover,
#col_ui_paste:hover{
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}


.choiceUi {
  text-decoration:none;
  color: #333;
  line-height:1.44;
}
.choiceUi:hover {
  color: #fff;
}
.choiceUi.activ {
  color: #fff;
}

.knyb .knob {
  border: solid 2px #666;
}
.knyb .knob.active {
  border: solid 2px var(--clik);
}

#swatlist {
  display:flex;
  margin-bottom:10px;
}

#col_ui_swat {
  margin-top:1px;
}
.choiceUiSwat {
  display:block;
  width:50px;
  height:20px;
  margin-bottom:3px;
  border-radius:3px;
  cursor:pointer;
  box-shadow: 1px 1px 1px #000;
}





/*
 ██████  ██████   ██████  ██    ██ ██████
██       ██   ██ ██    ██ ██    ██ ██   ██
██   ███ ██████  ██    ██ ██    ██ ██████
██    ██ ██   ██ ██    ██ ██    ██ ██
 ██████  ██   ██  ██████   ██████  ██
*/





#history {
  display: flex;
  align-items:flex-end;
  width:34px;
}




/*
 █████  ██████   ██████  ██     ██
██   ██ ██   ██ ██    ██ ██     ██
███████ ██████  ██    ██ ██  █  ██
██   ██ ██   ██ ██    ██ ██ ███ ██
██   ██ ██   ██  ██████   ███ ███
*/




#arowz {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

#arow {
  display: flex;
  /* widh:65px; */
  justify-content: flex-end;
  align-items:flex-end;
}

#tweak {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.subTweak {
  display: flex;
  flex-direction: row;
}
.subTweakNul{
  margin-bottom: 2px;
}





/*
 █████  ██      ███████ ██████  ████████
██   ██ ██      ██      ██   ██    ██
███████ ██      █████   ██████     ██
██   ██ ██      ██      ██   ██    ██
██   ██ ███████ ███████ ██   ██    ██
*/





#botomAlert {
  position:absolute;
  left:10px;
  bottom:10px;
  text-align: left;
  display:none;
}
#topAlert {
  position:absolute;
  left:10px;
  top:10px;
  text-align: left;
  margin:0;
  line-height: .8;
}





/*
██       █████  ██████  ███████ ██
██      ██   ██ ██   ██ ██      ██
██      ███████ ██████  █████   ██
██      ██   ██ ██   ██ ██      ██
███████ ██   ██ ██████  ███████ ███████
*/





#label{
  display: flex;
  align-items: flex-end;
}
#lbl_txt{
  width:95px;
  height:95px;
  background-color: var(--ofBg);
  border: 0px solid var(--ofBg);
  border-radius:3px;
  color: var(--ofTx);
  margin: 0 5px 1px 5px;
  font-size:13px;
  font-weight:500;
  /* resize:none; */
  /* text-shadow: 1px 1px 1px rgba(0,0,0,.5); */
  padding:5px;
}
#lbl_txt:focus-visible{
  outline:none;
}
#lbl_txt.big{
  width:177px;
  height:177px;
  font-size:11px;
}
#textArea {
  display:flex;
  flex-direction: column;
}
#lbl_txt_togl {
  cursor: pointer;
}
#lbl_txt_togl:hover {
  cursor: pointer;
  color: var(--hv);
}





/*
███████ ███    ██  █████  ██████
██      ████   ██ ██   ██ ██   ██
███████ ██ ██  ██ ███████ ██████
     ██ ██  ██ ██ ██   ██ ██
███████ ██   ████ ██   ██ ██
*/






#snap_area {
  display:flex;
}
#snap_txt{
  position:absolute;
  top:146px;
  right:6px;
  height:15px;
  width:366px;
  background-color: rgba(0,0,0,0);
  border: 0;
  border-radius:3px;
  color: var(--ttt);
  margin: 0 0 8px 0;
  font-size:17px;
  resize:none;
  padding:3px 5px;
  text-align:right;
  letter-spacing: 1px;
  overflow: hidden;
  font-weight:500;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}
#snap_txt:focus-visible{
  outline:none;
}

#snap_bu {
  display: flex;
  justify-content: flex-end;
  position:absolute;
  top:119px;
  right:8px;
}
#snap_bu button {
  height:20px;
  width: 49px;
  font-size: 13px;
}


#snap_list{
  display:flex;
  flex-direction:column;
  position:absolute;
  right:9px;
  top:170px;
  border-radius: 3px;
  padding:5px;
  background-color: var(--ofBg);
  /* box-shadow: -4px 4px 8px rgba(0, 0, 0, .3); */
}

.choiceSnap {
  font-size:13px;
  color: var(--ofTx);
  text-decoration: none;
  font-weight:500;
}
.choiceSnap:hover,
.choiceSnap.activ {
  color: var(--hv);
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
}




/*
 ██████   ██████ ████████ ███████ ████████
██    ██ ██         ██    ██         ██
██    ██ ██         ██    █████      ██
██    ██ ██         ██    ██         ██
 ██████   ██████    ██    ███████    ██
*/





#octet {
  display:flex;
}
.qatet {
  display: flex;
  width:36px;
  flex-wrap:wrap;
}

.bit {
  width:16px;
  height:16px;
  background-color: var(--ofBg);
  margin:1px;
  border-radius:3px;
  cursor: pointer;
}
.bit:hover {
  background-color: var(--hv);
  opacity:.7;
}
.bit.actv {
  background-color: var(--onBg);
}
.bit.actv:hover {
  background-color: var(--hv);
  opacity:1;
}





/*
███████ ██████  ██       █████  ███████ ██   ██
██      ██   ██ ██      ██   ██ ██      ██   ██
███████ ██████  ██      ███████ ███████ ███████
     ██ ██      ██      ██   ██      ██ ██   ██
███████ ██      ███████ ██   ██ ███████ ██   ██
*/






#clearArrowsSplash button,
#clearLabelsSplash button {
  width:77px;
}





/*
███████  ██████   █████
     ██ ██       ██   ██
    ██  ███████   █████
   ██   ██    ██ ██   ██
   ██    ██████   █████
*/







@media screen and (max-width: 768px) {

#snap_bu button {
  height: 24px;
  width: 56px;
}


#snap_new{ visibility: hidden; }
#snap_save{ visibility: hidden; }
#snap_kil{ visibility: hidden; }
#snap_expo{ visibility: hidden; }

#snap_bu { top:90px; }
#snap_txt { top:118px; }
#snap_list { top:142px; }

.choiceSnap {
  margin:3px;
}

h1{
  font-size:5em;
  top:-15px;
}
h2{
  font-size:1.6em;
  top:65px;
}

#blow {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

#arowz{ display:none; }
#col_root{ display:none; }
#history{ display:none; }
#xyz{ display:none!important; }
#butonz {
  right:10px;
  left:auto;
  width:121px
}
#botomAlert {
  display:block;
}

}