/* *{outline:1px solid #0000FF}  */


/*** A container including a bloch sphere and two sliders.*/
.qbit-container {
  border: 2px solid #000000;
}

/*** A container including a bloch sphere.*/
.bloch-container {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

/*** A container including two sliders each of which is an indicator of a value of a bloch sphere. */
.meters-container {
  width: 200px;
  margin-left: auto;
  margin-right: auto;	
}

/*** A container including the slider of the theta. */
.bloch-theta-container {
	text-align: left;
	width: 200px;
}

/*** A container including the slider of the theta. */
.bloch-theta {
	width: 60%;
}

/*** A container including the slider amd the numbers of the theta. */
.bloch-phi-container {
	text-align: left;
	width: 200px;
}

/*** A container including the slider of the phi. */
.bloch-phi {
	width: 60%;
}

/* .bloch-gate > .bloch-gate-select-library { */
/*
.bloch-gate-select-library {
	font-size:12pt;
	text-align: center;
	color: black;
	margin-left: auto;
	margin-right: auto;
}
*/

/*** A table including bloch spheres, a program code area, and a chart. */
.bloch-table {
	width: 400px;
	/*
	height: 600px;
	*/
	border-spacing: 0;
	
	/*table-layout: fixed;*/
}

/*** For <td>.  The container of a monitor.   It includes the pulldown of the monitor. */
.monitor-gate {
  width: 50px;
  text-align: center;
  border: 2px solid #000000;
}


/*** For <select>.  The pulldown of a monitor. */
/* .monitor-gate > select { */
.monitor-gate-select {
	/*width: 50px;*/
	font-size:16pt;
	text-align: center;
	color: black;
}

/*** The option in the pulldown menu in a gate (operator) in the quantum program area, */
.monitor-gate-select-option {
}

/*** for <td>.    A gate (operator) in the quantum code area.*/
.bloch-gate {
  width: 120px;
  text-align: center;
  border: 2px solid #000000;
  display: flex;
  /*
  	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
	*/
}

/* For showing a area of program codes to be saved.*/
.bloch-gate.bloch-gate-selected {
  border: 2px solid #ff0000;
}

/**
 * The module mode of .bloch-gate (<td>).
 */
.bloch-gate.bloch-gate-as-library {
	background: blue;
}

.bloch-gate.bloch-gate-as-library.gateID_0 {
	background: blue;
}
.bloch-gate.bloch-gate-as-library.gateID_1 {
	background: blueviolet;
}
.bloch-gate.bloch-gate-as-library.gateID_2 {
	background: powderblue;
}
.bloch-gate.bloch-gate-as-library.gateID_3 {
	background: cadetblue;
}


/*** for <select> of gate.  The pulldown menu in a gate (operator) in the quantum program area. */
/* .bloch-gate > select { */
.bloch-gate-select {
	width: 116px;
	height: 30px;
	font-size:10pt;
	text-align: center;
	vertical-align: middle;
	color: black;
	margin-left: auto;
	margin-right: auto;
}


/* It is used when library with a bit is choosed. */
.bloch-gate-select.bloch-gate-select-library {
	width: 80px;
	font-size:10pt;
}

/*** The option in the pulldown menu in a gate (operator) in the quantum program area,  */
/* .bloch-gate-select-option { */
.bloch-gate-option {
	font-size:10pt;
}

/* for <option> of gate */
/*.bloch-gate > select > .option-special-gate {*/
.bloch-gate-option.option-special-gate {
	color: blue;
	font-weight: bold;
}

/*.bloch-gate > select > .option-library-gate {*/
.bloch-gate-option.option-library-gate {
	color: green;
	font-weight: bold;
}

/*** The bit number in a gate of the program code area.  for <input type='number'> */
.bloch-gate-aux {
	background:  lightgrey;
}


.bloch-gate-aux.bloch-gate-aux-on {
	width:30px; 
	font-size:10pt;
}

.bloch-gate-aux.bloch-gate-aux-off {
	width: 0;
	display: none;
}

/*** The container <td> including the virtical line. */
.bloch-gate-gap {
	height: 20px;
	background: linear-gradient(90deg, white 48%, black 48% 52%, white 52%);
}


/*** The container of a horizontal line in the program area. */
.bloch-gate-side {
	width: 100%;
	min-width: 30pt;
}

.bloch-gate-side.gateID_0,
.bloch-gate-side.gateID_1,
.bloch-gate-side.gateID_2,
.bloch-gate-side.gateID_3 
{
	background: linear-gradient(0deg, white 45%, black 45% 55%, white 55%);
}

.bloch-gate-side.bloch-gate-side-on
{
	background: linear-gradient(0deg, white 45%, black 45% 55%, white 55%);
}

.bloch-gate-side.gateID_0.gateID_1,
.bloch-gate-side.gateID_0.gateID_2,
.bloch-gate-side.gateID_0.gateID_3,
.bloch-gate-side.gateID_1.gateID_2,
.bloch-gate-side.gateID_1.gateID_3,
.bloch-gate-side.gateID_2.gateID_3
{
	background: linear-gradient(0deg, white 35%, black 35% 45%, white 45% 55%, black 55% 65%, white 65%);
}



.bloch-gate-side.bloch-gate-side-off {
	background: white;
}

/*  The label of each input bit. */
.bit_line_class {
	background-color: white;
	
}

.bit_line_class.inactive {
	color: darkgray;
	
}


/*** ID: The chart representing the calculation result.  <canvas>*/
#calculationResult {
}

/*** ID: The container of the chart. */
#result_td {
    height: 200px;
    text-align: center;
}

/*
.option-library {
	background: pink;
}
*/