/**
 * Ersteller    : Dominik Jeni
 * Datum        : 02/2018
 * Beschreibung : Standard Desktop/PC Styles
 * Historie     : 
 */



/**
 *  STYLES RESETTEN UND SPEZIELLE SCHRIFTART IMPORTIEREN
 */
 
@import url('style_reset.css'); 
@import url('fonts.css');

 


/**
 *
 *  ALLGEMEINE STYLES
 *  
 */
 
input::-moz-focus-inner { /* im FF haben z.B. submit Buttons trotz css reset 2px größeren Textabstand als sie sollten */
 border: 0;
 padding: 0;
}

select::-ms-expand {             /* PFEIL AUSBLENDEN IE */
 display: none;
}

select:focus::-ms-value {        /* Ausgewählte Select-Option ist normal blau, allerdings nicht bis zum Rand, hier zurücksetzen */
 background: none;
 color: rgb(86,89,92);
}

select {                         /* PFEIL AUSBLENDEN REST */
 -webkit-appearance: none;
    -moz-appearance: none;
     -ms-appearance: none;
      -o-appearance: none;
         appearance: none;
 outline : none;
 overflow : hidden;
 text-indent : 0.01px;
 text-overflow : '';           
}

input, textarea, select, option {
 -ms-box-sizing: content-box;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box; 
 box-sizing: content-box;
}

a {
 word-break: break-all;    /* Wörter umbrechen, falls sie zu lang sind */
 /* ### Silbentrennung noch nicht bei Chrome ### Stand 09.11.17 ###
 word-wrap: break-word;    
 -moz-hyphens: auto;
 -o-hyphens: auto;
 -webkit-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto; */
}




/**
 *
 *  WRAPPER STYLES MAIN PAGE
 *
 */


html  {
 width: 100%;
 height: 100%;
 font-size: 100%;  /* An dieser Textgröße orientieren sich alle anderen Angaben (rem = root em bei den anderen Klassen) */
 background-color: #fff;
}

body {                                                                                                                         /* fungiert als Content Wrapper */
 width: 100%;
 height: 100%;
 overflow-y: scroll;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -ms-flex-direction: column;
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
}

.wrapper_header, .wrapper_footer {
 width: 100%;
 background-color: rgb(75,86,91);
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 -webkit-box-align: start;
 -moz-box-align: start;

 -ms-flex-align: flex-start;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 
 -webkit-flex-shrink: 0;
 -moz-flex-shrink: 0;
 -ms-flex-shrink: 0;
 flex-shrink: 0; /* Opera, Safari, Chrome überlappen content sonst, da dort default=1 */
}

.wrapper_header { 	
    -moz-box-shadow: 0.3rem 0.3rem 0.7rem #CCC, -0.3rem -0.3rem 0.7rem #CCC; /* Firefox */
 -webkit-box-shadow: 0.3rem 0.3rem 0.7rem #CCC, -0.3rem -0.3rem 0.7rem #CCC; /* Chrome, Safari */
  -khtml-box-shadow: 0.3rem 0.3rem 0.7rem #CCC, -0.3rem -0.3rem 0.7rem #CCC; /* Konqueror */
         box-shadow: 0.3rem 0.3rem 0.7rem #CCC, -0.3rem -0.3rem 0.7rem #CCC; /* CSS3 */
 margin-bottom: -1rem;  
 z-index: 8;     
}

.trenner {
 background-color: rgb(75,86,91);
 border-top: 1px solid rgb(160,165,167);
 height: 1rem;
 z-index: 9;
}

.wrapper_content {
 width: 100%;
 
 -webkit-box-flex: 1 1 auto;
 -webkit-flex: 1 1 auto;
 -moz-box-flex: 1 1 auto;
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;

 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;

 -webkit-box-align: start;
 -moz-box-align: start;

 -ms-flex-align: start;
 -webkit-align-items: flex-start;
 align-items: flex-start;
 
 -webkit-flex-shrink: 0;
 -moz-flex-shrink: 0;
 -ms-flex-shrink: 0;
 flex-shrink: 0; /* Opera, Safari, Chrome überlappen content sonst, da dort default=1 */
}

.bgimg {
 background-image: url('../img/Kuhmotiv.JPG') !important;
 background-repeat: no-repeat;
 background-size: cover;
}

.content {
 width: calc(80rem - 3rem); /* 1280px */
 margin: 1.5rem;
 height: auto;
 /*border: 1px solid blue;*/
 overflow: hidden;
}

#kacheln {
 display: -webkit-box !important;
 display: -moz-box !important;
 display: -ms-flexbox !important;
 display: -webkit-flex !important;
 display: flex !important;
 margin-bottom: 1.5rem;
}

.app {
 width: 25rem;
 text-decoration: none;
 color: #fff;
 background: rgb(0,169,131);
 cursor: pointer;
 padding: 0.8rem 0.6rem;
 margin-right: 0.5rem;
 border-radius: 0.2rem;
 
 -webkit-box-pack: center;
 -moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center; 
}

.app:hover {
 background: rgba(0,169,131,0.8);
}



/**
 *
 *  KOPF + FUSS BEREICH
 *
 */
 
.wrapper_header .content, .wrapper_footer .content {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -webkit-box-pack: justify;
 -moz-box-pack: justify;
 -ms-flex-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;

 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

.wrapper_header .content img {
 /* LOGO */
}

.wrapper_header .content p, .wrapper_header .content p a,
.wrapper_footer .content p, .wrapper_footer .content p a {
 color: rgb(160,165,167);
 text-decoration: none;
}

.wrapper_header .content p a:hover,
.wrapper_footer .content p a:hover {
 color: rgb(0,169,131);
}



/* Link mit Icon und Text */

.iconlink {
 display: -webkit-box !important;
 display: -moz-box !important;
 display: -ms-flexbox !important;
 display: -webkit-flex !important;
 display: flex !important;
 
 -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

.iconlink img {
 height: 1.2rem;
 padding-right: 0.5rem;
}

.iconlink .pfeil {
 height: 0.4rem;
}


/* Startseite */

.startseite {
 background-color: #f2f2f2;
 padding: 2rem;
}

.startseite h2 {
 font-size: 130%;
 padding-bottom: 1rem;
}

.startseite label {
 display: inline-block;
 width: 10rem;
 padding-bottom: 1.5rem;
}

.startseite input[type="text"], .startseite input[type="password"] {
 padding: 0.5rem;
 width: 15rem;
 border: 1px solid #fff;
 background-color: #fff;
}

.startseite input[type="text"]:hover, .startseite input[type="password"]:hover {
 border: 1px solid rgb(160,165,167);
}

.startseite a {
 padding: 0.5rem 0.7rem;
 border-radius: 0.2rem;
 text-decoration: none;
 color: #fff;
 background-color: rgb(75,86,91);
}

.startseite a:hover {
 background-color: rgb(160,165,167);
}




/* GRAPH */

.dygraph-title, .dygraph-axis-label, .dygraph-roller {
 font-size: 80% !important;
 font-weight: normal !important;
}



/* Content innerhalb Accordion, besteht aus Menüleiste und Result-DIV */

.accordionContent {
 background: #f2f2f2;
}

.collapse, .open {
 background: rgb(102,203,181);
 color: white;
 padding: 0.6rem 1rem;
 margin-top: 1rem;
 cursor: pointer;
}

.collapse:hover, .open:hover {
 background: rgba(102,203,181,0.8);
}

.accordionContent {
 -ms-flex-direction: column;
 -moz-flex-direction: column;
 -webkit-flex-direction: column;
 flex-direction: column;
 font-size: 80%;
}


/* Menüleiste im Contentbereich */

.submenu-content {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 width: 100%;
 margin-top: 0.5rem; /* Abstand zur Headerzeile */
 background-color: #98c4ea; /* hellblauer Hintergrund */
}

.submenu-content .load {
 color: #fff;
 padding: 0.5rem 1rem;
 /*margin-left: 1rem;*/
 text-decoration: none;
 flex: 0 0 auto; /* Breite der Box gemäß Textbreite */
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex; /* Icon und Text mittig */
 
  -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

.submenu-content .menu_start {
 margin-left: 1rem;
}

.submenu-content .load:hover {
 text-decoration: underline;
}

.submenu-content .clicked { /* angeklicktes Menü */
 background-color: #0077d4;
}

.submenu-content .unclicked { /* nicht angeklicktes Menü */
 background-color: transparent;
}

.box-icon {
 padding: 0.2rem;
}


/* Result-DIV unter dem Submenü */

.submenu-content-result {
 width: calc(100% - 2rem);
 padding: 1rem;
}


/* Submenu unter dem Submenu im Result DIV */

.submenu-content-sub {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 
 -ms-flex-wrap: wrap;
 -moz-flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 
 width: calc(100% + 2rem);
 margin-right: -1rem;
 margin-left: -1rem;
 margin-top: -1rem;
 background-color: #0077d4; /* Hintergrund */
}

.submenu-content-sub .loadGraph {
 color: #fff;
 padding: 0.5rem 1rem;
 /*margin-left: 1rem;*/
 text-decoration: none;
 flex: 0 0 auto; /* Breite der Box gemäß Textbreite */
 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex; /* Icon und Text mittig */
 
  -webkit-box-align: center;
 -moz-box-align: center;

 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

.submenu-content-sub .loadGraph:hover {
 text-decoration: underline;
}

.submenu-content-sub .clickedGraph { /* angeklicktes Menü */
 background-color: #0035ad;
}

.submenu-content-sub .unclickedGraph { /* nicht angeklicktes Menü */
 background-color: transparent;
}

.graph {
 margin-top: 1rem;
}