/*********************************************/
	/* template/gyropedia/css/public.css      	   */
	/* This is used by all the routines for login etc */
	/********************************************/
	
	body,html {
		height : 100%;
		margin : 0;
	}
	
	.titlepage {
		background-image: var(--login-background-image);
		height : 100%;
		
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	
	.title {
		background-color: rgba(0,0,0,0.7);
	
		position : absolute;
		top : 15%;
		left : 10%;
		
		padding-left : 40px;
		padding-right : 40px;				
		font-size : 24pt;
		color : white;
	
		border : 2px solid transparent;
		border-radius : 20px;
		display : inline-block;
	}
	
	a.title:hover {
		border-color : white;
		color : white;
		text-decoration: none;
	}


		
	
	@media only screen and (max-width: 720px){
	
		.title {
			top : 12%;
			left : 5%;
			max-width : 90%;
			font-size : 18pt ;
		}
		
	}
	
	
	
	
	/**************************************************/
	/*         The Clear Menu at the top of the page        */
	/**************************************************/
	
	
	.clear-menu {
		padding-top : 20px;				
	}
	
	.clear-menu a {
		color : white !important;
		font-weight : bold;				
	}
	
	.clear-menu .home {
		margin-left : 20px;
	
	}
	
	.clear-menu .login {
		float : right;
		margin-right : 20px;
	}
				
				
	
	/************************************/
	/*         Dark form background         */
	/************************************/
	
	.form-dark {
		background-color : white;
		color : black;
		border : 2px solid #0080ff !important;
		border-radius : 10px !important;
	}
	
	.form-dark a {
		color : --color-primary;
	}
	
	.form-dark a.btn {
		color : white;
	}


	.form-dark .btn {
		box-shadow: none;
	}

	/* Floating Placeholders */

	.floating-placeholder{
		position:relative;
		height:60px;
		margin:0;
		padding:0;
		width:100%;
	}
	
/*	.floating-placeholder input:focus+label{
		color: black;
	}
	
	.floating-placeholder input[value]+label{
		color:silver;
	}*/
	
	.floating-placeholder label{
		display:block;
		position:absolute;
		top:20px;
		left:20px;
		font-size:18pt;
		color : silver;
		font-weight : normal;
		z-index:1;
	}
	
	.floating-placeholder input, .floating-placeholder select{
		font-size:18pt;
		border:none;
		outline:none;
		position:absolute;
		top:0;
		left:0px;
		display:block;
		background:transparent;
		z-index:2;
		border-bottom:1px solid #ccc;
		text-indent:20px;
		margin-top : 22px;
		padding-bottom : 0px;
		line-height: 1.0em;
	}

	.floating-placeholder-float label{
		top : 0;
		font-size : 11pt;
		color : silver !important;
		transition: font-size .35s ease-in-out;
		transition: top .35s ease-in-out;

	}
	
	label.required  {
		color : grey !important;
	}