/* These keyboards have been built independently of Desmos Studio PBC, but I credit Desmos Studio PBC with the original layout. I have carefully mimicked the layout of the keybad included in the Desmos Graphing Calculator because I expect my users to be already familiar with that keypad and I'd like to make it as easy as possible for them to use my virtual keyboards. Quickly Core Tutoring is responsible for the functionality and accessibility of the virtual keyboards included below. */

:root {
  --color_case: #CED0D2; /* containter color silver=cacfd0 pink=E75AA4  #fcf5e5 #CED0D2 */ 
  --color_shift: #006db0; /* blue button 2nd or shift 668fb4 */
  --color_alpha: #15a44a; /* green button alpha 93be88 */
  --color_func: #3b464b; /* Dark button */
  --color_op: #b7b7b8; /* Grey button */
  --color_123abc: #eaeaea; /* Light button */
  --color_fade: #999999; /* Secondary option for abc keys */
	
  --color_dtxt: #000000; /* Almost black text 0c0a00 */
  --color_ltxt: #ffffff; /* Chalk White fbf7f5 */
}

@font-face {
  font-family: Symbola;
  src: url(/resources/font/Symbola.ttf);
}

/*---------------------------------Math Keyboard CSS---------------------------------*/	  
	  
    .key sup { vertical-align: top; position: relative; top: -0.5em; font-size: 0.6em; }
	.key sub { vertical-align: bottom; position: relative; bottom: -0.5em; font-size: 0.6em; }
	.keyboard-whole {
	  position: fixed;
      bottom: 0;
	  left: 50%;
      transform: translate(-50%); 
	  max-width: 640px;
      width: 100%;
      background: var(--color_case);
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); 
	  border-top: 2px solid black; 
	  border-left: 2px solid black; 
	  border-right: 2px solid black; 
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  justify-content: space-evenly;
	  flex-wrap: nowrap;
	  z-index: 11;
	}
	.keyboard-menu-open {
	cursor: default;
	width: 100%;
	z-index: 1000;
	}
	
	.key-select, .key-select-off {
		cursor: default;
		color: var(--color_fade);
		padding: 0;
		margin: 0;
		background: var(--color_case);
		z-index: 100;
		font-family: Symbola, Arial, Helvetica, sans-serif;
		font-weight: bold;
	}
	.key-select {display: inline-block;}
	.key-select-off {display: none;}
    .keyboard-container {
	  width: 100%;	
      display: flex;
	  align-items: center;
      flex-direction: row;
      justify-content: space-evenly;
      z-index: 100;
      flex-wrap: nowrap;
	  background: var(--color_case);	
    }

    .pad {
      display: grid;
      gap: 6px;
      padding: 10px;
		
    }

    .left-pad {
      grid-template-columns: repeat(4, 1fr);
	  width: 37%;	
    }

    .middle-pad {
      grid-template-columns: repeat(4, 1fr);
	  width: 37%;	
    }

    .right-pad {
      grid-template-columns: repeat(3, 1fr);
	  width: 26%;	
    }

    .key {
      padding: 6px 3px 6px 3px;
      font-size: 1rem;
      background: var(--color_123abc);
	  color: var(--color_dtxt);
	  font-family: Symbola, Arial, Helvetica, sans-serif;
	  font-weight: bold;
      border: 0px solid black;
      border-radius: 3px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      text-align: center;
      user-select: none;
	  line-height: 18px;
    }
	.key b { 
		color: var(--color_fade); 
		font-weight: normal;
		/* font-size: 0.8rem; */
	}

/* bac4d0 */
    .key.shift { background: var(--color_shift); color: var(--color_ltxt); }
	.key.alpha { background: var(--color_alpha); color: var(--color_ltxt); }
    .key.symbol   { background: var(--color_op); color: var(--color_ltxt); }
    .key.ctrl  { background: var(--color_func); color: var(--color_ltxt); }
	.key.disabled { background: #dddddd; color: #aaaaaa;}
    .key:active   { background: #000000; }
	.key:hover	  { background: var(--color4); }
	.key.disabled:hover { background: #dddddd; }
	.key.hidden { background: transparent; color: transparent; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); }
	.key-select:hover	  { color: var(--color_dtxt) !important;
}

div.keyboard-spacer {
	display: block;
	height: 179.6px;
	width: 100%;
	border: 0px;
	background-color: transparent;
}

    @media (max-width: 640px) {
	  .keyboard-container {
	  border-left: 0px solid black; 
	  border-right: 0px solid black; 
	  }
	  .pad {
	  gap: 2px;
      padding: 10px 4px 10px 4px; 
	  }
      .key {
        font-size: 1.1rem;
        padding: 6px 1px 6px 1px;
		line-height: 24px;
      }
	  .keyboard-container {
		left: 0;
		transform: translate(0);   
	  }
	  div.keyboard-spacer {
		  height: 191.6px;
	  }
    }
	  
/*---------------------------------abc Keyboard CSS---------------------------------*/		
	  
	.arow {
      display: flex;
      gap: 5px;
      padding: 10px;
	  width: 100%;
    }

    .abc-pad {
	  grid-template-columns: repeat(10, 1fr);
	  width: 100%;		
	}