html {
	background-color: #ffffff;
	
}


body {
	background: #ffffff;
	font-family: 'Calibri';
	font-size: 18px;
}



div.mycontainer {
    border-radius: 10px;
    background-color: #f2f2f2;
    padding: 10px;
	transform: translate(-50%, 0%);
	left: 50%;
}

/*
.table-striped thead tr:nth-of-type(even) {
  background-color:  #dbf2f5;
}
*/
thead tr th {
    background-color: #dbf2f5;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  #fff8c2;
}

.table-striped tbody tr:nth-of-type(even) {
  //background-color:  #fce791;
  background-color:  #ffee75;
}


/*
.table-striped tbody tr:nth-of-type(even) {
  background-color:  #b2dfdb;
}
*/

.align_right {
	text-align: right;
} 

.align_left {
	text-align: left;
}


/* Breakpoint για να υπάρξει μικρό περιθώριο αριστερά και δεξιά του mycontainer όταν η οθόνη είναι μικρή. Το έχω δοκιμάσει στο κινητό μου και σε οριζόντια και σε κάθετη διάταξη. 
Πρέπει να το δοκιμάσω και σε tablet για να δω πόσο πρέπει να βάλω το max-width. */
@media only screen and (max-width: 575px) {
	div.mycontainer {
		left: 50%; 
	}
	
	.align_right {
		text-align: left;
	} 
	
	.row1 {
		padding-left: 30px;
	}
	
	form {
		padding-left: 10%;
	}
}

@media only screen and (min-width: 576px) and (max-width: 1999px) {
	div.mycontainer {
		left: 50%;
	}
}



input[type="text"], input[type="password"], select, textarea {
    font-family: 'Calibri';
	font-size: 16px;
	padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

input[type="file"] {
	font-size: 16px;
	font-family: 'Calibri';
	cursor: pointer;
}


input[type="submit"] {
	font-family: 'Calibri'; 
	font-size: 18px; 
	height: 34px; 
	cursor: pointer;
}

button {
	//font-size: 16px;
	font-family: 'Calibri';
	//height:  32px;
	cursor: pointer;
}

button.OkOrError {
	font-size: 18px; 
	height:  40px;
	vertical-align: middle;
}

button.btn_sbm {
	font-size: 18px;
}



label {
	float: left;
}




/* Κλάση που καθορίζει να γίνεται αναδίπλωση κειμένου όταν το κείμενο ενός κουμπιού ξεφεύγει από τα όρια του ίδιου του κουμπιού. */
/* Για κάποιον λόγο δεν δουλεύει καλά. Δεν κάνει, δηλαδή, αναδίπλωση, απλώς κόβει το κείμενο. */
.btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}