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

.qbit-container {
  border: 2px solid #000000;
}

.bloch-container {
  width: 200px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

.meters-container {
  width: 200px;
  margin-left: auto;
  margin-right: auto;	
}
.bloch-theta-container {
	text-align: left;
	width: 200px;
}

.bloch-theta {
	width: 60%;
}

.bloch-phi-container {
	text-align: left;
	width: 200px;
}

.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;
}
*/


.bloch-table {
	width: 400px;
	/*
	height: 600px;
	*/
	border-spacing: 0;
	
	/*table-layout: fixed;*/
}


.monitor-gate {
  width: 50px;
  text-align: center;
  border: 2px solid #000000;
}

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

.monitor-gate-select-option {
}

.bloch-gate {
  width: 120px;
  text-align: center;
  border: 2px solid #000000;
  display: flex;
  /*
  	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
	*/
}

.bloch-gate-selected {
  border: 2px solid #ff0000;
}



/* .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;
}

.bloch-gate-select-library {
	width: 80px;
	font-size:10pt;
}


.bloch-gate-select-option {
	font-size:10pt;
}

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

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

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

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

.bloch-gate-gap {
	height: 20px;
	background: linear-gradient(90deg, white 48%, black 48% 52%, white 52%);
}


.bloch-gate-side {
	width: 100%;
	min-width: 30pt;
}

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

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






#calculationResult {
}

#result_td {
    height: 200px;
    text-align: center;
}

.option-library {
	background: pink;
}