* {
	font-family: Hack, monospace;
}

div.parent {
  display: flex;
  justify-content: left; 
  align-items: start;   
}

div.calculator_body {
	width: 320px;
	border: 1px solid black;
	background-color: rgba(255,255,255,1.0);
	padding: 0;
	padding-bottom:10px;
	position: absolute;
	left:-100%;
	z-index:-99;
	opacity: 0;
}

div.calculator_body.spotlight {
	left:50% !important;
	transform: translateX(-50%) !important;
	z-index:10000 !important;
	opacity: 1 !important;
}

select {
	background-color: white;
	width: 300px;
	font-size: 24px;
	
}
/*
div.calculator_body.notlight {
	left:-100%;
	z-index:-99;
	opacity: 0;
}
*/

div.calculator_body, div.calculator_body input, button, h1 {
	font-size: 24px;
}

div.calculator_body input {
	border: none;
}

div.calculator_body table {
	width: 100%;
  }

div.calculator_body table * {
	width: 90%;
	height: 50px;
  }

div.calculator_body .my_label {
	/*border: 1px solid black;*/
  }

button  {
	width: 50px !important;
	height: 40px !important;
	padding: 0;
  }
  
button {
  background-color: #ff0000;
  color: #ffffff;           
  border: 1px solid #000000;
  border-radius: 10px;
}

button:not(:disabled) {
  box-shadow: 0 4px 0 0 #882020;
}

button:hover:not(:disabled) {
  background-color: #ff0000;
  box-shadow: 0 6px 0 0 #882020;
  transform: translateY(-2px);
}

button:active:not(:disabled) {
  background-color: #ff0000;
  box-shadow: 0 -2px 0 0 #882020;
  transform: translateY(6px);
}
  
/* Target all buttons when they have the disabled attribute */
button:disabled {
  background-color: #51ff01;; /* Light gray background */
  color: #000000;            /* Darker gray text */
  border: 1px solid #000000; /* Gray border */
  cursor: not-allowed;       /* Changes cursor to a warning circle */
}


div.calculator_body td, div.calculator_body th {
    text-align: center; /* Horizontally centers text */
    vertical-align: middle; /* Vertically centers text (optional) */
    /*border: 1px solid black;*/
  }
  
  /* Chrome, Safari, Edge, and Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input {
	text-align: right;
	padding: 0;
}

.glass-background {
  background-color: #ffffff;
}

span.glass-background {
	display: inline-block;
	border-radius: 5px;
}

span.glass-background input {
	width: 99% !important;
}

.glass-foreground {
  /*===== Configurable Variables =====*/
  /*======= Only these change! =======*/
  --color: #ffffff;
  --radius: 5px;
  --elevation: 2px;
  --bevel: 1px;
  --opacity: 42%;
  --blurriness: 0px;
  --angle: 286deg;
  --intensity: 50;
  --diffusion: 0;

  /*======= Computed Variables =======*/
  --sin: calc(sin(var(--angle)));
  --cos: calc(cos(var(--angle)));
  --x-displacement: calc(-1 * var(--cos) * (var(--elevation) + 1px));
  --y-displacement: calc(-1 * var(--sin) * (var(--elevation) + 1px));
  --edge-opacity: calc(var(--intensity) * 0.006 - var(--diffusion) * 0.002);
  --edge-blur: calc(var(--bevel) * 1.5);
  --surface-contrast: calc(var(--intensity) * 0.01 - var(--diffusion) * 0.005);

  /*======= Computed Properties =======*/
  border-radius: var(--radius);
  box-shadow: var(--x-displacement) var(--y-displacement) calc(var(--diffusion) * 0.3px + (var(--elevation))) calc(var(--elevation) / 2) rgba(0, 0, 0, calc(var(--intensity) * 0.006)),
    0px 0px calc(var(--diffusion) * 1.4px) rgba(255, 255, 255, calc(var(--intensity) * 0.004)),
    inset calc(var(--bevel) * -1) 0 var(--edge-blur) hsla(100, 0%, calc((var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 var(--bevel) var(--edge-blur) hsla(100, 0%, calc((-1 * var(--sin) + 1) * 50%), var(--edge-opacity)),
    inset var(--bevel) 0 var(--edge-blur) hsla(100, 0%, calc((-1 * var(--cos) + 1) * 50%), var(--edge-opacity)),
    inset 0 calc(var(--bevel) * -1) var(--edge-blur) hsla(100, 0%, calc((var(--sin) + 1) * 50%), var(--edge-opacity));
  background-color: color-mix(in srgb, var(--color) var(--opacity), transparent calc(100% - var(--opacity)));
  backdrop-filter: blur(var(--blurriness));
      
  /*======== Static Properties ========*/
  background-blend-mode: soft-light;
  position: relative;

  /*====== Nested Pseudo-Element ======*/
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius);
    background: linear-gradient(calc(var(--angle) + 90deg), hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, var(--surface-contrast)));
  }
}

/*==== Made using xmorphic.dev ====*/


input {
	/*color: #36ba01;*/
}