@font-face {
  font-family: InterBold;
  src: url('Inter/static/Inter-Bold.ttf');
}
@font-face {
  font-family: Inter;
  src: url('Inter/static/Inter-Regular.ttf');
}


body{
	background-color: #b6d55d;
	
}
#component{
	margin: auto auto;
	width: 1200px;
	height: 675px;
	background-image:url("grafiki/tlo.png");

}

table.login-form{
	position:relative;
	left: 285px;
	top: 175px;
	height: 375px;
}

table.login-form td.login-form-left{
	width: 310px;
	height: 310px;
	background-image: url("grafiki/tlo-lewe.png");
	background-size: cover;
	padding-right: 30px;
	padding-bottom: 30px;
}
table.login-form td.login-form-right{
	width: 280px;
	height: 280px;
	background-image: url("grafiki/tlo-niebieskie-prawe.png");
	background-size: cover;
	padding-left: 60px;
	padding-bottom: 60px;
}

table.login-form td.login-form-right input[name~=email]{
	
	width: 190px;
	height: 24px;
	font-family: Inter;
	border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
	border-top-right-radius: 5px; 
    border-top-left-radius: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
}

table.login-form td.login-form-right input[name~=password]{

	width: 190px;
	height: 24px;
	font-family: Inter;
	border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
	border-top-right-radius: 5px; 
    border-top-left-radius: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
}
.labelofform{
	font-family: Inter;
	font-size: 16px;
	color: #e6ff1d;
}
.logowanie {
	width: 200px;
	background-color:#ff8200;
	border-radius:6px;
	display:inline-block;
	cursor:pointer;
	color: white;
	font-family:InterBold;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
}

img#bbp{
	position:absolute;
	z-index:9999;
	width: 400px;
	height: 200px;
	display:none;
}

@media only screen and (hover: none) and (pointer: coarse){

	#component{
		background-color:none;
		background-image:none;
		width:100%;
	}
	body{
		padding: 0;
		margin: 0;
		margin: 0 auto;
		width: 100%;
		height: 100%;
		background-image:url("grafiki/tlo.png");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center;
	}
	table.login-form{
		
	  margin: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  width: 630px;
	  height: 375px;
	}
			
				
}
.error {
    background-color: red; /* Czerwone tło */
    color: white;          /* Białe litery */
    padding: 15px;         /* Dodaje trochę odstępu wewnątrz komunikatu */
    position: fixed;       /* Pozycjonuje element w stosunku do okna przeglądarki */
    top: 0;                /* Umieszcza komunikat na samej górze */
    left: 50%;             /* Umieszcza komunikat na środku ekranu (w poziomie) */
    transform: translateX(-50%); /* Dostosowuje położenie komunikatu tak, aby był dokładnie wyśrodkowany w poziomie */
    z-index: 1000;         /* Zapewnia, że komunikat jest wyświetlany nad innymi elementami */
    border-radius: 5px;    /* Zaokrągla rogi komunikatu */
    width: auto;           /* Szerokość dopasowuje się do treści komunikatu */
    max-width: 80%;        /* Maksymalna szerokość komunikatu to 80% szerokości ekranu */
    text-align: center;    /* Wyśrodkowuje tekst w komunikacie */
}