/* --------------------------------------------------------------------------- GLOBAL */
body { font-family: Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #333; background-color: #f8f8f8; }


:root { 

--main-bg-color: #2299cf; 
--main-bgalt-color: #eef9FF; 
--main-ft-color: #0077cc; 
/*
--main-bg-color: DodgerBlue; 
--main-bgalt-color: LightCyan; 
--main-ft-color: DodgerBlue; 
*/
}
.mobile { display:none; }

/* --------------------------- FONTS */

.title { height:50px; }

h1 {
	position: relative; 
	width:50%;
  	margin: 0px -14px 20px 0px; 
  	font-size: 16px; 
  	color: #333; 
	padding: 0px 10px 0px 10px;
	border-radius: 0px 0px 0px 8px;
	border-left: 3px solid var(--main-bg-color);
	border-bottom: 3px solid var(--main-bg-color);
	text-transform: uppercase;
  }
  
h2 {
	font-size:14px;
}

.actiontypes { font-size: 11px; display: block; margin-top: -5px; }

.center { text-align:center; }
.right { text-align:right; }
.bottom { vertical-align:bottom; }
.middle { vertical-align:middle; }

.f_alert { color:#f00; }


a { color: var(--main-ft-color); text-decoration: none; }
a:visited { color: var(--main-ft-color); text-decoration: none; }
a:active { color: var(--main-ft-color); text-decoration: none; }
a:hover { text-decoration: underline; }

.button_profile { margin-left:7px; }

/* --------------------------- DIV */
.container { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: 1200px; }
.col { box-sizing: border-box; flex-basis: 0; flex-grow: 1; max-width: 100%; padding: 0 15px; }
.col-1 { flex-basis: 8.33%; }
.col-2 { flex-basis: 16.66%; }
.col-3 { flex-basis: 25%; }
.col-4 { flex-basis: 33.33%; } 
.col-5 { flex-basis: 41.66%; }
.col-6 { flex-basis: 50%; }
.col-7 { flex-basis: 58.33%; }
.col-8 { flex-basis: 66.66%; }
.col-9 { flex-basis: 75%; }
.col-10 { flex-basis: 83.33%; }
.col-11 { flex-basis: 91.66%; }
.col-12 { flex-basis: 100%; }

.header { border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 40px; background-color: var(--main-bg-color); color: #fff; padding: 10px 20px; font-weight:bold; text-align:center; }
.error { border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 40px; background-color: #cf2222; color: #fff; padding: 10px 20px; font-weight:bold; text-align:center; }
.scrollable { overflow-x:auto; }


/* --------------------------------------------------------------------------- TABLE */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
thead { font-weight: bold; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; text-align:center; }
th { background-color: var(--main-bg-color); color:#fff; }

tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: var(--main-bgalt-color)}

/* --------------------------------------------------------------------------- FORM */
input[type="text"], input[type="email"], input[type="password"], textarea, select { display: block; width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-bottom: 10px; font-size:15px; }
input[type="submit"] { background-color: var(--main-bg-color); color: #fff; padding: 5px 5px; border: none; border-radius: 4px; cursor: pointer; font-size:15px; border: 1px solid var(--main-bg-color); width:100px; text-align:center; }
input[type="submit"]:hover { background-color: #32a9dF; border: 1px solid #53caeF; }
input[type="date"] { color: #000; padding: 5px 5px; border: none; border-radius: 4px; cursor: pointer; font-size:15px; border: 1px solid var(--main-bg-color); width:150px; text-align:center; }
input[type="submit"].warning { background-color: #F00; border: 1px solid #000; }
textarea { resize: none; }


/* --------------------------------------------------------------------------- RESPONSIVE */
@media (max-width: 768px) {
.col { flex-basis: 100%; max-width: 100%; }
input[type="text"], input[type="email"], textarea, select { width: 100%; margin-bottom: 20px; }
.topnav a { font-size:20px; }
.right { text-align:left; }
.button_profile img { width:40px; }
.desktop { display:none; }
.mobile { display:block; }
.blason { width:98%; }
}