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

/****  General Purpose class ****/
.horizontal-align-class {
	display: flex;
	align-items: center;
}

/**** Body ****/
#qcalc-horizontal {

	background-color: rgba(255,255,255,0.6);
	background-blend-mode:lighten;
	background-image: url("../img/background_m.jpg");
/*	color: white;
*/
	background-size: 660px 700px;	
    background-repeat: no-repeat;
	background-size: cover;
	/* 切り取り線 目安 */
	/*
	padding: 5px;
	width: max-content;
	border-style: dashed;
    border-width: 5px 5px 5px 5px;
    border-color: pink;
    */
}
#qcalc-horizontal h1 {
	font-size: 20pt;
}

/**********  Table ******/
.program-table {
	border-collapse: collapse;
	border-spacing: 0px;
	color: black;
}

/** Table Columns **/
.program-input-col {
	border-left: 1px solid;
	border-right: none;
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.program-body-col {
	border-style: solid;
	border-width: 1px;
}

.program-body-col.highlight {
	border: 1px solid red;
}

.program-output-col {
	border-style: solid;
	border-width: 1px;
}

/** Table Title Row **/
.program-title-row {
	text-align: center;
	border: 1px solid black;
	background-color: aquamarine;
}

/***  Cells (TD Element) ****/
.program-title {
	
}

.program-title.highlight {
	background-color: red;
}

.input-bit-label {
	background-color: white;
}

.input-bit-label.inactive {
	color: darkgray;
}

.program-td-input {
	border-left: 1px solid;
	background-color: white;
}

.wire {
	width: 50px;
	height: 50px;
	padding: 0px;
	vertical-align: middle;
	background-color: white;
}

.output-box {
	width: 50px;
	height: 50px;
	padding: 0px;
	vertical-align: middle;
	background-color: white;
}

.operator-box {
	width: 50px;
	height: 50px;
	padding: 0px;
	background-color: aliceblue;
	vertical-align: middle;
}

.operator-store {
	width: 50px;
	height: 50px;
	padding: 0px;
	background-color: aliceblue;
	vertical-align: middle;
}

.operator-store:hover {
	background: #27acd9;
}

/***  IMG Tag of the operator ****/
.operator-image {
	width: 50px;
	height: 50px;
	vertical-align: middle;
}

.operator-image.dragging {
	opacity: 0.4;
}

/***  Button ****/
.pushButton {
	font-size: 14pt;
	border-radius: 100vh;
}

/***  Some special items ***/
#program-area-hint {
	font-size: 6pt;
	color: aquamarine;
}

#result_td {
	background-color: aliceblue;
       width: 630px;
       height: 200px;
       display: block; 
       box-sizing: border-box; 
}

/*** hover ***/
@media ( hover : hover) {
	.input-bit-label:hover {
		/*	font-weight:bold;*/
		background: #27acd9;
	}
	.output-box:hover {
		background: #27acd9;
	}
	.pushButton:hover {
		color: #fff;
		background: #27acd9;
	}
}

@media ( hover : nonve) {
	.input-bit-label:active {
		/*	font-weight:bold;*/
		background: #27acd9;
	}
	.output-box:active {
		background: #27acd9;
	}
	.pushButton:active {
		color: #fff;
		background: #27acd9;
	}
}