html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
        font: Arial, Helvetica, sans-serif;
    	}

    	div, h1, h2, h3 h4 {
        	box-sizing: border-box;
    	}

		.alert-ok {
			color: #4CAF50; /* Green */
			background-color: #DFF2BF; /* Light green */
			margin: 10px 0;
			padding: 12px;
			border: 1px solid green;
		}
		
		.alert-ko {
			color: #D8000C; /* Red */
			background-color: #FFD2D2; /* Light red */
			margin: 10px 0;
			padding: 12px;
			border: 1px solid red;
		}

    	
		/* The sidebar menu */
		.sidebar {
		  height: 100%; /* Full-height: remove this if you want "auto" height */
		  width: 180px; /* Set the width of the sidebar */
		  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
		  z-index: 1; /* Stay on top */
		  top: 0; /* Stay at the top */
		  left: 0;
		  background-color: #201C29; /* Black */
		  overflow-x: hidden; /* Disable horizontal scroll */
		}

		/* The navigation menu links */
		.sidebar a {
		  padding: 6px 8px 6px 16px;
		  text-decoration: none;
		  font-size: 1em;
		  color: #FFF;
		  display: block;
		}

		.sidebar a:hover {
		  color: #818181;
		}

		.sidebar .menu-items {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
		}

		.sidebar .menu-items div{
			width: 100%;
			height: 20px;
			padding: 4px;
			text-align: left;
			padding-left: 4px;
			margin: 0px;
		}


		.sidebar .menu-items div:nth-child(2n) {
			width: 100%;
			height: 20px;
			padding: 4px;
			background: #364150;
		}


		h1 { margin:30px auto; text-align:center;}
		/*	containers	*/
		.container {

			display: flex;
			flex-direction: row;
			width: 100%;
			margin: auto;
		}

	    .loginbox, #loginbox {

		    width: 95%;
		    max-width: 400px;
		    height: auto;
		    background-color: #FFF;
		    border-radius: 4px;
		    border: 1px solid #EFEFEF;
		    padding: 10px;
		    margin: auto;
		    margin-top: 100px;
		    box-shadow: 0 12px 24px rgba(0,0,0,.24);
		}

	    label {
	        display: block;
	        font-size: 1.2em;
	    }

	    /*   2-tab ID forms       */
		
		ul.tabs{
		    margin: 0px;
		    padding: 0px;
		    list-style: none;
		}

		ul.tabs li{
		    background: none;
		    color: #222;
		    display: inline-block;
		    padding: 10px 15px;
		    cursor: pointer;
		}

		ul.tabs li.current{
		    background: #ededed;
		    border-bottom: 4px solid #FF9802;
		    color: #222;
		}

		.tab-content{
			margin-top: 5px;
			width: 100%;
			max-width: 900px;
			display: none;
			flex-direction: column;
			background: #ededed;
		}

		.hide {
		display: none;
		}

		.tab-content.current{
		display: flex;
		flex-direction: column;
		}
	    .input_field {

	    	width: 90%;
	    	height: 15px;
	    	font-size: 1.0em;
	    	color: #666;
	    	padding: 6px 12px;
	    	margin-bottom: 8px;
	    }

	    .admin-table {

	    	width: 100%;
	    	max-width: 900px;
	    	font-size: 1em;
	    }

		@media screen and (max-width: 700px) {

			.regContainer {

				flex-direction: column;
			}

			.RegFormContainer {

				justify-content: space-around;
			}

		}

		
		@media screen and (max-width: 600px) {
			.topnav a:not(:first-child) {display: none;}
			.topnav a.icon {
			float: right;
			display: block;
			}

			.topnav.responsive {position: relative;}
			.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
			}

			.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
			}

			.admin-table {

	    	width: 100%;
	    	max-width: 900px;
	    	font-size: 0.8em;
	    }
		}


		@media screen and (max-width: 600px) {

			header {
				max-width: 100%;
				margin: 0px;
				padding: 0px;
			}

			footer {

				max-width: 900px;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}

			.topnav.responsive {position: relative;}
			.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
			}

			.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
			}

		}