/* #empty ist ein Platzhalter. Ohne dass ich den Formularfeldern eine ID zuweise kann ich die Buttons 
für die Posts nicht individuell stylen. Idee wäre alle standard Formularfelder in einen Div Formular 
zu stecken und hier dann alles umzuschreiben */
/* 	===========================================
	Formularfelder allgemeine Einstellungen 
	============================================ */  
/*Pagination */

/* Eingabe Box, z.B. Neues Medikament anlegen*/
.inputbox {margin: 0em 3em 1.5em 3em;}
.searchbox {display:block; text-align:right; margin:0.1em;}

form {
	font-size:1.1em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:white;
	width: 90%;
	text-align:center;
	margin-left:0em;
	padding:0;
}

/*Formular in dem die Speciesbuttons in der animalWebgallery stecken*/
form#animalgallery_form {width: 100%;}

/* Fehlermeldung Login */
span.error{
	color:red;
	font-size: 1.5em;
	margin-left: 0.31em;
}
label {
	font-size:0.9em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
}

.formular {
	position:relative;  /*realative, damit ich die errormessage ausrichten kann*/
	text-align:left;  /*left ist wichtig für die Anordnung von Label und Input*/
	padding:2em;
	margin: 1em auto;
	width:80%;
	max-width:980px;
}
#animalSettingsEdit.formular, #animalSettingsEdit0.formular{padding:1em 2em 1em 2em;}

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel],input[type=url], input[type=number], 
input[type=file], select, textarea{
    width: 100%;
    padding: 5px;
    border: 2px solid #26e50b; /*#ccc;*/
    border-radius: 4px;
    box-sizing: border-box;
	resize: vertical;
	background-color:transparent; /*rgba(77, 72, 70, 0.36);*/
	color: white;
}
	
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover { border: 3px solid #26e50b;}

input[type=range], input[type=color], input[type=radio], input[type=checkbox]{
    box-sizing: border-box;
}

textarea{ height:10em;}

iframe {max-width: 368px;/*420px;*/ max-height: 271px/*345px; */ border-radius: 4px;}

label {
    padding: 5px;
	margin-right:0.7em;
    display: inline-block;
}

/* alte Version, Design ist gut aber macht Ärger in Formularen,. daher hier 
	auskommentiert, muss irgendwie je nach Bedarf einzeln formatiert werden 
input[type=submit], #form button {
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px; 
    cursor: pointer; 
*/
   /* float: right;
	width: 9%;

	
background-color: rgba(33, 45, 80, 0);

color: #05138a;

margin-top: 1em;

padding: 3px 20px;

border: 3px solid #3a3a74;

border-radius: 4px;

cursor: pointer;

float: right;
}
*/

/* 	==========================================
		Spezielle Formular Einstellungen
	==========================================*/
	
#breed, #sex { width:72%;}	/* inputfeld verkleinern*/
#frequency, #dosage {width:32%;}

form.tinyEditor{margin:0.5em;}
/* 	==========================================
		Allgemeine Tabellen Einstellungen
	==========================================*/

/* alte Angaben, weiß nicht ob man sie wirklich braucht
.table{ display:table; }
.tr{ display:table-row;}
.td{ display:table-cell}	 */


.overflow_x {overflow-x: auto;}

.table {
	
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	/*border: 1px solid white;  /* Boder an dieser Stelle macht nur dem rahmen außen um die Tabelle, aber nicht zwischen den Zellen */
	/* Angaben von form*/
	font-size:1em;
	line-height:1.5em;
	font-family:Helvetica;
	font-weight:100;
	color:#2F2D2C;
}

.height100{max-height:15em;}

.table-hover tr:hover, .table-hover tr.tablehead {background-color: rgba(33,45,80,0.15);}
.table-hover tr.tablehead {background-color: rgba(33,45,80,0.34);}
.table-bordered td, th, tr {border: 1px solid white;}
.table-bordered_transp td, th, tr {border: 1px solid rgba(33,45,80,0);} /* aus der Not geboren, weil ich den Rahmen nicht wegbekommen habe!*/
tr {page-break-inside: avoid;}


/*	
#tabletest{
color:#2F2D2C; 
width: 100%;
max-width: 100%; 
border-collapse:collapse;
}
#tabletest td, th, tr {border: 1px solid white; text-align: left; vertical-align:middle; border-collapse:collapse;} /*table, th, td */
/*#tabletest tr:hover{color:white; background-color: rgba(33,45,80,0.85);}

thead {display: table-header-group;}
tr {page-break-inside: avoid;}*/
/*td,th {padding: 0;}*/
 /* Tabelle ursprung vom Inder: Responsive hier nur einfach kopiert, als Vorschlag für später
 @media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive > .table-bordered {
    border: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
  .table-responsive > .table-bordered > tbody > tr > th:first-child,
  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
  .table-responsive > .table-bordered > thead > tr > td:first-child,
  .table-responsive > .table-bordered > tbody > tr > td:first-child,
  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
  .table-responsive > .table-bordered > tbody > tr > th:last-child,
  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
  .table-responsive > .table-bordered > thead > tr > td:last-child,
  .table-responsive > .table-bordered > tbody > tr > td:last-child,
  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
  .table-responsive > .table-bordered > tbody > tr:last-child > td,
  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
 
 */

/*	=============================================
		Buttons
	============================================*/

.btn100{
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	/*padding: 12px 20px;*/
	padding: 4px 4px;
    border: none;
    border-radius: 4px;
    cursor: pointer;	
}

.btn50{
	width:49%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 4px 4px;
    border-radius: 4px;
    cursor: pointer;
}

.btn_small{
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 7px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;	
}

/* verwendet in gallery für die Auswahl Jung, Alt etc */
.btn_small_gallery{
    background-color: rgba(255, 254, 252, 0.39);
    color: black;
	font-size:0.8em;
	font-family: Montserrat, Calibri, Segoe print, Papyrus;
	font-weight: 500;
	letter-spacing: 0.21em;
    margin-top:1em;
	padding: 14px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width:100%;	 /* 100% von aside Kästchen*/
	min-width:7em;
	box-shadow: 0em 0em 1em 0em;	
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 
}
.btn_small_gallery_active{
    background-color:#ff9b00;
    color: black;
	font-size:0.8em;
	font-family: Montserrat, Calibri, Segoe print, Papyrus;
	font-weight: 500;
	letter-spacing: 0.21em;
    margin-top:1em;
	padding: 14px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width:100%;	
	min-width:7em;
	box-shadow: 0em 0em 1em 0em;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto; 	
}

.btn_small_gallery:hover{
	background-color:rgba(173, 172, 170, 0.48);
}


.btn { 
	width:100%;
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin-top:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Auswahlbuttons für die Tierart */
.formbtn_gallery { 
    background-color:#4a4444;
    color: white;
    margin:1em;
	padding: 6px 6px; /*5px 11px;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.8em; /* angpasst an Icons */
	width:11em;
}
/* wenn eine Tierarteingegrenz ist, dann den Button anders färben*/
.formbtn_gallery_active { 
    background-color:#ff9b00;
    color: white;
    margin:1em;
	padding: 6px 6px; /*5px 11px;*/
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size:0.8em; /* angpasst an Icons */
	width:11em;
}

input[type=submit]:hover, #form button:hover, .btn100:hover{
	background-color:rgb(53, 83, 99); /* blau rgb(27, 94, 144);*/
}
.formbtn_gallery a:hover, .formbtn_gallery_active a:hover{color:white}
button.formbtn_gallery:hover{ background-color: #877d7d;}



/* =======================================================
	Formular animalSettingsEdit Tabellen Optikn 4 Spalten
	======================================================*/

#animalSettingsEdit input[type=text]{width:65%;}
/*#animalSettingsEdit0 input[type=text]{width:100%;}*/


#animalSettingsEdit input[type=submit],
#animalSettingsEdit0 input[type=submit] {
	/*width:100%;*/
    background-color: rgba(33,45,80,0.85);
    color: white;
    margin:0em 8px;
	padding: 5.7px 5px;
    border: none;
    border-radius: 2px; 
    cursor: pointer; 
}
#animalSettingsEdit input[type=submit]:hover, 
#animalSettingsEdit0 input[type=submit]:hover{background-color:rgb(27, 94, 144);}

/*#animalSettingsEdit0 label{font-weight:bold;}*/

#animalSettingsEdit fieldset,
#animalSettingsEdit0 fieldset{margin-top:7px;}

#animalSettingsEdit0 summary{font-family:calibri;}
#animalSettingsEdit0 summary.fa-pencil-square-o{color: rgba(33,45,80,0.85);}

/* Tabellen Optik */
/*.row, .col_left, .col_right {border: 1px solid blue;}*/


/* Einstellungen besser für die Formulare, aber zerschießt die animal galerie! Könnte auch mit responsive wieder besser werden!*/ 
.row{padding:0.21em 0em; margin:0em 0.7em;}  

/* alte Einstellungen
.row{padding:0.41em 0em; margin:0.7em;}*/
.row1{
	width:100%; 
	padding:0.41em 0em; 
	margin:1em auto 1em;
	
}
.col_20{
	float: left;
	width: 20%;	
}

.col_21{
	float: left;
	width: 21%;	
}

.col_30_l{
	float: left;
	width: 30%;	
	padding-left:0.3em;
}

.col_30{
	float: left;
	width: 30%;	
	border-left:1px solid white;
	margin-left:1em;
	padding-left:0.3em;
}
.col_34{
	float: left;
	width: 34%;	
	border-left:1px solid white;
	margin-left:1em;
	padding-left:0.3em;
}

.col_22{
	float: left;
	width: 28%;	
}

.col_40{
	float: left;
	width: 39%;	
	display:inline;	
}
.col_25{
	float: left;
	width: 29%;	
	display:inline;
	border-left:1px solid white;
	overflow-y: auto;
	height:5em;
}
.col_12{
	/*float: left;*/
	text-align:center;
	/*width: 12%;*/	
}

.col_btn_r{
	float: right;
	width: 7%;	
	padding-right:1em;
	margin-top: 11px;  /* da das Formular zweireihig ist, muss der Button etwas nach unten geschoben werden um auf gleicher Höhe zu stehen*/
vertical-align:bottom;
	}
.col_50_left{
	float: left;
	width: 48%;	
	margin-right:1em;
}

.col_50{
	float: left;
	width: 48%;	
	
}
/* 	=====================================================================
		2 Spaltige Tabellen Optik
		Stammdaten eines Hundes anlegen / animal create und animal edit
	=====================================================================*/
.col{float: left;  margin-top: 6px;}

.col_left {
    float: left;
    width: 34%;
    margin-top: 6px;
}

.col_left_third {
    float: left;
    width: 30%;
    margin-top: 6px;
}

.col_right {
    float: left;
    width: 66%;
    margin-top: 6px;
}
/*
.col_20 {
	float: left;
	width: 30%;
	margin-top: 6px;
	border:3px solid red;
	display:inline;
}*/
.col_mid {
	float: left;
	width: 28%; /*width: 34%;*/
	margin-top: 6px;
	margin-left:9px;
	margin-right:9px;
}

/* Clear floats after the columns */
.row:after,.row1:after {
    content: "";
    display: table;
    clear: both;
}

/* 	====================================
		Toolbar
	===================================== */
	
/* Variante 1 - Buttons in einer Leiste mit Hintergund*/
#toolbar button{clear:all;}
	button:hover{}
#toolbar {
	display:block; 
	width:90%;
	margin-left:auto; 
	margin-right:auto; 
	text-align:right; 
	padding:0.3em; 
	box-shadow:1em 1em 1em -1em;
}
/* Variante 2 - Buttonsammlung*/
#toolbar11{text-align:right; }
.btn_group .button {
    /*background:yellow;*/
	padding: 0px 9px;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
	height:1.5em;
	font-size:1.2em;
}

.btn_group .button:not(:last-child) { border-right: none;} /* Prevent double borders */

/*Zum Testen */
#toolbar0{display:block; width:90%; margin-left:auto; margin-right:auto; text-align:right; padding:0.3em;}

#toolbar1{ width:90%;}

#toolbar1 button {     
	margin:1em;
	padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}


/* 	====================================
		Tierdatenblatt anlegen
	===================================== */
	
#basic_animal_data{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);}
#basic_vet_data{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);}

.databox_blue{ margin-top:0.7em; border:1px solid blue; background-color:rgba(14, 14, 107, 0.15);}
.databox_red{margin-top:0.7em; border:1px solid red;background-color:rgba(255, 0, 0, 0.15);}
.databox_green{margin-top:0.7em; border:1px solid green;background-color:rgba(37, 174, 68, 0.2);}
.databox_teal{ margin-top:0.7em; border:1px solid teal; background-color:rgba(15, 131, 135, 0.2);} /* helleres Petrol */

/* Einstellungen für unsere Tools */
.databox_teal1{ margin-top:0.7em; border:1px solid #8bdbd3;; background-color:rgba(0, 98, 127, 0.51);} /* dunkleres Petrol */

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .col_left, .col_right, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}