html, body{
	height: 100%;
	width: 100%;
	margin: 0px;
}

#pageLayout{
	position: relative;
	max-height: 650px;
	max-width: 1500px;
	width: 100%;
	height: auto;
}

/* Stile del div contenente i valori dei registri e della memoria */
	#banco_registri{
		position: absolute;
		bottom: 5%;
		left: 33.333%;

		width: 35%;
		height: 41%;
	}

	#registri, #memoria{
		height: 80%;
		width: 100%;
		overflow: auto;
	}
	/* Stile del titolo posto sopra i valori */
	.block_title{
		width: 100%; 
		height: 14%;
		text-align: center; 
		margin: 0px; 
		font-size: 100%; 
	}

	/* Stile del div contenente UNICAMENTE i valori dei registri*/
	#reg_table1{
		border-collapse: separate; 
		width: auto; 
		margin: auto auto 0px auto;
	}
	.reg_td{
		border: 1px solid black;
		width: 16%;
		border-radius: 2px;
	}
	.reg_tr{
		border: 0px;
	}
	/* Stile del div contenente UNICAMENTE i valori della memoria*/
	#mem_table{
		max-height: 180px;
		display: flex;
		flex-flow: column wrap;
		justify-content: space-around;
		align-content: space-between;
		overflow: auto;
	}
	.mem_var{
		flex: 0 1 auto;
		height: 40px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;

		margin-right: 30px;
	}
	.mem_var input{
		max-height: 39px;
		margin-bottom: 0px !important;
	}
	.mem_label, .mem_address, .mem_value{
		height: 40px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
	}
	.mem_label{
		width: 55px;
		margin-right: 20px;
	}
	.mem_address{
		width: 25px;
		margin-right: 10px;
	}
	.mem_value{
		width: 170px;
		overflow: hidden;
		padding: 5px;
		border: 1px solid black;
		margin-right: 20px;
		/* border-radius: 2px; */
	}
	.mem_btn{
		width: 35px;
		height: 35px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

/* Aggiungo una transizione per nascondere i bottoni "memoria" e "registri" */
#reg_control, #mem_control, #mem_var_control{
	transition: transform 0.4s ease-in;
}

/* Nascondo l'indicatore rosso sotto ai bottoni "memoria" e "registri" */
#tabs .indicator{
	visibility: hidden;
}

#inputDiv{
	position: absolute;
	top: 2.30%;
	right: 2%;
	width: 20.67%;
	height: 62%;
}

td{
	padding: 5px 5px !important;
}

/* classe di stile che evidenzia la riga dell'istruzione in corso */
tr.focus{
	box-sizing: border-box;
    border-radius: 7px;
    box-shadow: 0 0 10px #80ced6 inset;
    transition: box-shadow 1s;
}
/* classe di stile che evidenzia la riga con istruzione non permessa */
tr.error{
	box-sizing: border-box;
    border-radius: 7px;
    box-shadow: 0 0 10px red inset;
    transition: box-shadow 1s;
}

/* stile del div di esecuzione e relativi controlli */
	#exBut_div{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;

		margin: 10px 0px;
	}
	#startButton{
		flex-grow: 5;
		margin: 0px 10px;
		transition: flex-grow 1s;
	}
	#stopButton{
		flex-grow: 1;
		margin: 0px 10px;
		transition: flex-grow 1s;
	}
	#prevButton{
		flex: 1 1 30%;
		margin: 0px 10px;
	}
	#nextButton{
		flex: 1 1 30%;
		margin: 0px 10px;
	}

/* Stile del div che contiene i campi adibiti a visualizzare le descrizioni correnti */
	#phaseDiv{
		position: absolute;
		bottom: 5%;
		right: 2%;
		width: 20.67%;
		border: 0px;

		display: flex;
		flex-flow: column nowrap;
	}
	.description_span{
		position: absolute;
		height: 20px;
		width: 100%;
		transition: left 0.25s ease;
		left: 0%;
	}

/* Con i seguenti stili, definisco la grandezza degli elementi del registro IR, 
	in base al tipo di istruzione (IR1 o IR2)*/
	.IR1{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.IR1 span:nth-child(n+0){
		border-right: 1px solid black;
		margin: auto; 
	}
	.IR1 span:nth-child(1){
		flex: 1 1 0;
	}
	.IR1 span:nth-child(2){
		flex: 1 1 0;
	}
	.IR1 span:nth-child(3){
		flex: 1 1 0;
	}
	.IR1 span:nth-child(4){
		flex: 2 1 0;
		border: 0px;
	}
	.IR2{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	.IR2 span:nth-child(n+0){
		border-right: 1px solid black;
		margin: auto; 
	}
	.IR2 span:nth-child(1){
		flex: 1 1 0;
	}
	.IR2 span:nth-child(2){
		flex: 1 1 0;
	}
	.IR2 span:nth-child(3){
		flex: 2 1 0;
	}
	.IR2 span:nth-child(4){
		flex: 1 1 0;
		border: 0px;
		min-width: 120px;
	}

/* Stile del contenuto a fondo pagina*/
#footer{
	max-width: 1500px;
	width: 100%;
	height: 5%;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}

/* Custom scrollbar */
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: black; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}