* {
    box-sizing: border-box;
}

body {
    margin: 0;
	/* Show red border in test database for visibility */
	/* border: 20px solid red; */
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 5px;
    text-align: center;
}

.heading{
	/* text-decoration: underline; */
}
/* Create three unequal columns that floats next to each other */
.column {
    /*float: left;*/
    display: table-cell;
    padding: 10px;
	vertical-align: top;
    /*height: 300px;*/ /* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
    width: 25%;
}

/* Left and right wide column */
.column.third {
    width: 37.5%;
}

/* Middle column */
.column.middle {
    width: 50%;
}

/* 3/4 column */
.column.wide {
    width: 75%;
}

/* Full width column */
.column.full {
    width: 100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
	clear: both;
}

/* Style the footer */
.footer {
    background-color: #808080;
    padding: 10px;
    text-align: center;
}
.row {
	display: table;
	width: 100%;
}

.shadow{
    padding: 10px;
    box-shadow: 8px 8px 3px lightgrey;
}
.blank {
	padding: 0px;
}
.error {
	color: white;
	background-color: #B04040;
	border: 3px solid;
	border-color: #ff0000;
/*
	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
*/
}
.accept {
	color: white;
	background-color: #209020;
	border: 3px solid;
	border-color: #00ff00;
/*	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px
*/
}
.warning {
	color: white;
	background-color: #ff8000;
	border: 3px solid;
	border-color: #ffff00;
/*	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px
*/
}
.elementToFadeInAndOut {
	/* color: white; */
	/* background-color: #209020; */
	/* border: 3px solid; */
	/* border-color: #00ff00; */
    -webkit-animation: fadeinout 1s linear forwards;
    animation: fadeinout 1s linear forwards;
}

@-webkit-keyframes fadeinout {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeinout {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
		display: table-row;
		/*width: 100%;*/
    }
    .index{
		width: 20%;
		float: right;
    }
    .data{
		width: 80%;
		float: left;
    }
    /* .header {position: sticky; top: 0px;} */
    /* .footer {position: sticky; bottom: 0px;} */
}
@media (min-height: 600px) {
/*    .header {position: sticky; top: 0px;}*/
	.footer {position: sticky; bottom: 0px;}
}