body {
  background-color: #ede4d8;
  padding: 10px;
  margin: 1%;
  font-family: Monospace, "Lucida Console";
  }


.right {
	float: right;  
	width: 49%; 
	box-sizing: border-box;
    padding: 10px;
}

.left {
	float: left; 
	margin-bottom: 10px; 
	width: 49%;
	box-sizing: border-box;
    padding: 10px;
    border: 5px;
  border-style: double;
  border-radius: 15px;
}

.rightcell {
	float: right;  
	width: 49%; 
	box-sizing: border-box;
    padding: 10px;
    border: 5px;
  border-radius: 15px;
}

.leftcell {
	float: left; 
	margin-bottom: 10px; 
	width: 49%;
	box-sizing: border-box;
    padding: 10px;
    border: 5px;
  border-radius: 15px;
}

.disable {
	opacity: 0.5;
	pointer-events: none;
	}

.tablink {
	margin: 0 auto;
	}
	
	

/*.left.top {
	background: rgba(157, 31, 55, 0.5);
}

.left.bot {
	background: rgba(255, 255, 255, 0.5);
}

.testinfo {
	float: right;
}*/

@media screen and (max-width: 400px
) {
    .left {
		float: none; 
		width: 100%;
		margin-bottom: 5px; 
	}
	.right {
	    display: none;
		float: none; 
		width: 100%;
		margin-bottom: 5px; 
	}
	    .leftcell {
		float: none; 
		width: 100%;
		margin-bottom: 5px; 
	}
	.rightcell {
		float: none; 
		width: 100%;
		margin-bottom: 5px; 
	}
}


input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
		background: none;
		text-align: left;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.25em;
		text-decoration: none;
		border-radius: 0.35em;
		border-style: dashed;
    border-color: black;
		outline: 0;
		cursor: pointer;
		padding: 20px 2.25em 20px 2.25em;
		font-size: 0.8em;
		width: 60%;
		min-height: 4em;
		line-height: 20px;
		margin: 0 auto;
	}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #f98780;
		}
		
		
.active {
	background-color: #f98780;
}

.dropbtn {
  background-color: #DCAE96;
  color: black;
  border-radius: 0.35em;
		border-style: dashed;
    border-color: black;
		outline: 0;
		cursor: pointer;
		padding: 20px 2.25em 20px 2.25em;
		font-size: 0.8em;
		width: 60%;
		min-height: 4em;
		line-height: 20px;
		margin: 0 auto;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fffdd0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}


.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #f98780;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #f98780;
    color: white;
}
.tablink2 {
	margin: 0 auto;
	width: 100% !important;
	}