/* Content : 																*/
/* 1. General settings 														*/
/* 2. Buttons 																*/
/* 3. Border 																*/
/* 4. Pop-up windows with settings and information 							*/
/* 5. Tape_IN 																*/
/* 6. Tape_OUT 																*/
/* 7. Right Content - Table for displaying program instructions  			*/
/* 8. Left content with information about the currently executed program 	*/
/* 9. Menu located below the logo bar 										*/
/* 10. Location logo PRZ, name and autor at the top of the page 			*/

/*-----------------------------------------------------------------------------*/
/* 1. General settings */
/*-----------------------------------------------------------------------------*/
body
{
	font-size:20px;
	margin:0;
	font-family: 'Lato', sans-serif;
	box-sizing:border-box;
	min-width:1040px;
	user-select:none;

}
table
{
	font-size:20px;
	border-collapse: collapse;
	text-align:center;
}
button
{
	background-color:white;
	border: 2px solid #32CD32;
	font-size:15px;
	border-radius:3px;
	color:#32CD32;
	transition: background-color .1s ease-in-out;
	padding:5px 10px 5px 10px;
	margin:1px;
	cursor:hand;
}
button:hover
{
	background-color:#32CD32;
	color:white;
}

p
{
	display:inline;
}

hr
{
	display:block;
	border:0.5px solid #d6d6d6;
}

input
{
	border: 1px solid #a3a3a3;
	border-radius:3px;
	font-size:20px;
	text-align:center;
}
select
{
	border: 1px solid #a3a3a3;
	border-radius:3px;
	font-size:20px;
}

/*-----------------------------------------------------------------------------*/
/* 2. Buttons */
/*-----------------------------------------------------------------------------*/
.plus
{
	border-color:#1fc91c;
	color:#1fc91c;
}
.plus:hover
{
	background-color:#1fc91c;
}
.minus
{
	border-color:#ed0e0e;
	color:#ed0e0e;
}
.minus:hover
{
	background-color:#ed0e0e;
}
.x
{
	position:absolute;
	right:20px;
	top:20px;
	border-color:#ed0e0e;
	color:#ed0e0e;
}
.x:hover
{
	background-color:#ed0e0e;
}

/* Checkpoint to set breakpoints */
.round {
	position: relative;
  }
  
  .round label {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 20px;
  }
  
  
  .round input[type="checkbox"] {
	visibility: hidden;
  }
  
  .round input[type="checkbox"]:checked + label {
	background-color: red;
	border-color: red;
  }
  
  .round input[type="checkbox"]:checked + label:after {
	opacity: 1;
  }
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 3. Border */
/*-----------------------------------------------------------------------------*/

/* Border using in pop-up windows to underline the titles */
#border
{
	background-color:#32CD32;
	padding:10px;
	color:white;
	margin:30px auto 5px auto;
	text-align:center;
	font-size:15px;
	border-radius:5vw;
	width:200px;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 4. Pop-up windows with settings and information */
/*-----------------------------------------------------------------------------*/
#save_code
{
	position:absolute;
	left:40px;
	top:40px;
	right:40px;
	bottom:40px;
	background-color:white;
	border: 1px solid #ddd;
	z-index:100;
	display:none;
	padding:30px;
	overflow:auto;
}

#read_code
{
	position:absolute;
	left:40px;
	top:40px;
	right:40px;
	bottom:40px;
	background-color:white;
	border: 1px solid #ddd;
	z-index:100;
	display:none;
	padding:30px;
	overflow:auto;
}

#about
{
	position:absolute;
	left:40px;
	top:40px;
	right:40px;
	bottom:40px;
	background-color:white;
	border: 1px solid #ddd;
	z-index:100;
	display:none;
	padding:30px;
	overflow:auto;
	text-align: center;
}

#chart_cost
{
	position:absolute;
	left:40px;
	top:40px;
	right:40px;
	bottom:40px;
	background-color:white;
	border: 1px solid #ddd;
	z-index:100;
	display:none;
	padding:30px;
	overflow:auto;
	text-align: center;
}

#chart
{
	/*position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -221px;
	width: 442px;
	height: 442px;*/
	float:left;
	padding:10px;
	width: 47%;
}

#chart_options
{
	float:left;
	padding:10px;
	width: 45%;
}

#program_code, #inputTextToSave
{
	width:100%;
	height:100px;
}

#save_code h3
{
	transition:color .1s ease-in-out;
	cursor:hand;
}		
#save_code h3:hover
{
	color:#606060;
}
#read_code h3
{
	transition:color .1s ease-in-out;
	cursor:hand;
}		
#read_code h3:hover
{
	color:#606060;
}

#about h3
{
	transition:color .1s ease-in-out;
	cursor:hand;
}		
#about h3:hover
{
	color:#606060;
}

#chart_cost h3
{
	transition:color .1s ease-in-out;
	cursor:hand;
}		
#chart_cost h3:hover
{
	color:#606060;
}

/*Information about error occurring during writing files from files */
#print_info
{
	color:red;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 5. Tape_IN */
/*-----------------------------------------------------------------------------*/
#tape_in
{
	float:left;
	width: 100%;
	min-height:170px;
	height: 20%;
}

#table_tape_in
{
	width:100%;
}
#table_tape_in input
{
	width:100%;
}
#table_tape_in td, #program th {
	border: 1px solid #ddd;
	padding: 8px;
}
#table_tape_in tr:nth-child(even)
{
	background-color: #f2f2f2;
}
#table_tape_in th 
{
	background-color: #199fff;
	color: white;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 6. Tape_OUT */
/*-----------------------------------------------------------------------------*/
#tape_output
{
	position: fixed;
    bottom: 0;
	min-width: 640px;
	background-color: white;
}
#table_tape_out input
{
	width:100%;
}
#table_tape_out td, #program th {
	border: 1px solid #ddd;
	padding: 8px;
}
#table_tape_out tr:nth-child(even)
{
	background-color: #f2f2f2;
}
#table_tape_out th 
{
color: white;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 7. Right Content - Table for displaying program instructions  */
/*-----------------------------------------------------------------------------*/
#instruction_list
{
	float:left;
	overflow:auto;
	width: 100%;
	height: 50%;
}

#operations
{
	padding-left:35px !important;
	padding-right:35px !important;
}

#right
{
	float:left;
	overflow:auto;
	width: calc(100% - 400px);
	height: 100%;
}

/* The appearance of the code table  */
#program
{
	width:100%;
}
#program input
{
	width:100%;
}
#program td, #program th {
	border: 1px solid #ddd;
	padding: 8px;
}
#program tr:nth-child(even)
{
	background-color: #f2f2f2;
}
#program th 
{
	background-color: #32CD32;
	color: white;
}

/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 8. Left content with information about the currently executed program */
/*-----------------------------------------------------------------------------*/
#left
{
	float:left;
	box-sizing:border-box;
	border-right:1px solid #d6d6d6;
	padding:10px;
	background-color:white;
	width:400px;
	text-align:center;
	height: 100%; 
	overflow:auto;
}

#status
{
	overflow:auto;
	height:15%;
	width:100%;
	font-size:15px;
	border:1px solid #a3a3a3;
	background-color:white;
}

#register
{
	overflow:auto;
	height:20%;
	width:100%;
}
#register table, #register th, #register td 
{
	border: 1px solid #d6d6d6;
	width:100%;
	table-layout:fixed;
}

#statistic
{
	overflow:auto;
	height:30%;
	width:100%;
}
#statistic table, #statistic th, #statistic td 
{
	border: 1px solid #d6d6d6;
	width:100%;
	table-layout:fixed;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 9. Menu located below the logo bar */
/*-----------------------------------------------------------------------------*/
#control_menu
{
	position:relative;
	height: 36px;
	padding-top:10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* vertical line separating buttons for operating the program */
.section1 
{   
	border-right: 0.25px solid #d6d6d6;
	padding-right :10px;
	height: 100%;
}

/* vertical line separating buttons for operating the program */
.section2 { 
    border-left: 0.25px solid #d6d6d6;
	padding-left :10px;
	height: 100%;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/* 10. Location logo PRZ, name and autor at the top of the page */
/*-----------------------------------------------------------------------------*/
#logo_left
{
	float: left;
  	width:33.33333%;
  	text-align:left;
	height:110px;
}
#logo_center
{
	float: left;
  	width:33.33333%;
	padding-top:10px;
  	text-align:center;
	height:110px;
}
#logo_right
{
	float: left;
	width:30%;
	text-align:right;
	height:110px;
}

#logo_top
{
	position:relative;
	height: 120px;
	background-color: #32CD32;
}

#logo_prz
{
	margin:5px;
}
/*-----------------------------------------------------------------------------*/