/* --------------------------------------------- */
/* Style-Definitionen für die Portal-Entwicklung */
/* --------------------------------------------- */
/* 
** globale Variablen 
*/
:root 
{
  --mmltext: white;     /* Text */
  --mmbackl: white;     /* heller Hintergrund */
  --mmbackg: #f7f7f7;   /* Seitenhintergrund */
  --mmblack: black;     /* sehr dunkel */
  --mmdblue: blue;      /* Standard Blau */
  --mmmblue: #309AFC;   /* Meyer-Blau */
  --mmnblue: #049dff;   /* norm MM-Nlau */
  --mmlblue: #8ec6fb;   /* lichtes MM-Blau */
  --mmhblue: #C6E3FE;   /* helles MM-Blau */
  --mmublue: #E1F1FF;   /* ultrahelles MM-Blau */

  --vpaddingtop:      20px;   /* Abstand zum Portal-Pic*/
  --vpaddingbottom:   90px;   /* Abstand zum footer bei kleiner Auflösung */
  --vpaddingbottommd: 50px;   /* Abstand zum footer bei mittlerer Auflösung */
}
/*
** Seitenkopf
*/


/* 
** Anmelde-Formular 
*/
.confirm 
{
  padding-top: var(--vpaddingtop);  /* 120px; */
  padding-bottom: var(--vpaddingbottom);  /* 120px; */
  background-color: var(--mmlblue);  /* #8ec6fb; */
  color: var(--mmbackl); /*  white; */
}
.confirm .confirm-message 
{
  height: 6rem;
}
@media (min-width: 576px) 
{
  .confirm .confirm-message 
  {
    height: 100%;
  }
}
/* 
** Fußzeilen-Bereich 
*/
.footer
{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--mmbackl); /* #309AFC; */
  border-top: 1px solid var(--primary);
  text-align: center;
}
.footer .footer-icon 
{
  width: 2rem;
  height: 2rem;
  background-color: var(--mmmblue); /* #309AFC; */
  color: var(--mmbackl); /*  white; */
  border-radius: 50%;
  text-align: center;
  margin: 0.2rem;
}
.footer .footer-icon:hover 
{
  text-decoration: none;
}

#footerbutton
{
  display:block;
}
#footerbuttonless
{
  display:block;
}
/* 
** Page-Menu 
*/
#page 
{
  position: relative;
  left: 0px;
  margin-bottom: 80px;
  -webkit-transition: 0.4s all;
  transition: 0.4s all;
  -webkit-transform: translate(0px, 0px);
          transform: translate(0px, 0px);
}
/* 
** MM-Kacheln 
*/
.kacheln
{
  padding-top: var(--vpaddingtop);  /* 120px; */
  padding-bottom: var(--vpaddingbottom);  /* 120px; */
  background-color: var(--mmbackg); /*  #f7f7f7; */
}
@media (min-width: 768px) /* Bei mittlerer Auflösung ist der footer niedriger */
{
  .kacheln
  {
    padding-bottom: var(--vpaddingbottommd);  /* 120px; */
  }
}
.kacheln a:link 
{
  text-decoration: none;   /* ohne Unterstrich */
}
#kachel_out
{
  padding: 3px 5px 5px 3px;
}
.kachelmain, .kachelsubm, .kachelleaf, .kmain, .ksubm, .ktail
{
  border-radius: 4%;
  height: 400px;
  border: 1px solid var(--primary);
}
.kachelmain, .kmain
{
  background-color: var(--mmlblue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmnblue),
              5px  5px 8px inset var(--mmnblue);
}
.kachelmain:hover, .kmain:hover
{
  background-color: var(--mmnblue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmlblue),
              5px  5px 8px inset var(--mmlblue);
  cursor: pointer;
}
.kachelsubm, .ksubm
{
  background-color: var(--mmhblue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmlblue),
              5px  5px 8px inset var(--mmlblue);
}
.kachelsubm:hover, .ksubm:hover
{
  background-color: var(--mmlblue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmhblue),
              5px  5px 8px inset var(--mmhblue);
  cursor: pointer;
}
.kachelleaf, .ktail
{
  background-color: var(--mmublue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmhblue),
              5px  5px 8px inset var(--mmhblue);
}
.kachelleaf:hover, .ktail:hover
{
  background-color: var(--mmhblue);
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 
              0 5px 9px 0 rgba(0, 0, 0, 0.19), 
             -5px -5px 8px inset var(--mmublue),
              5px  5px 8px inset var(--mmublue);
  cursor: pointer;
}
@media (min-width: 576px) 
{
  .kachelmain, .kachelsubm, .kachelleaf, .kmain, .ksubm, .ktail
  {
   height: 300px;
  }
}
@media (min-width: 768px) 
{
  .kachelmain, .kachelsubm, .kachelleaf, .kmain, .ksubm, .ktail
  {
   height: 275px;
  }
}
@media (min-width: 980px) /* Vorher: 992  (Auch in bootstrap geändert !) */
{
  .kachelmain, .kachelsubm, .kachelleaf, .kmain, .ksubm, .ktail
  {
   height: 255px;
  }
}
@media (min-width: 1152px) 
{
  .kachelmain, .kachelsubm, .kachelleaf, .kmain, .ksubm, .ktail
  {
   height: 245px;
  }
}
/*
** Datenbank-Eingabefelder
*/
.dbinputfields 
{
  padding-top: var(--vpaddingtop);  /* 120px; */
  padding-bottom: var(--vpaddingtop);  /* 120px; */
  background-color: var(--mmlblue);  /* #8ec6fb; */
  color: var(--mmbackl); /*  white; */
}
/*
** Tabellendarstellungen aus Datenbank
*/
.dbgrid 
{
  padding-top: var(--vpaddingtop);  /* 120px; */
  padding-bottom: var(--vpaddingbottommd);  /* 120px; */
  background-color: var(--mmublue);  /* #8ec6fb; */
  border: 1px solid var(--secondary);
  height: 100%;   /* 50vh;  */
  overflow: auto;
  font-size: 1.5rem;
}
/*
** Symbol als Link zum "Passwort ändern"
*/
#usersymbol
{
  border: 2px solid var(--primary);
  border-radius: 20%;
  background-color: var(--mmublue);  /* #8ec6fb; */
  padding-bottom: 3px; 
  text-decoration: none;
}
/*
** Symbol als Link zur Hilfe F1
*/
#userhelp
{
  border: 2px solid var(--primary);
  border-radius: 20%;
  background-color: var(--mmublue);  /* #8ec6fb; */
  padding-bottom: 3px; 
  text-decoration: none;
}
/*
** Datum/Uhrzeit im footer
*/
#uhrig1, #datig1, #uhrig2, #datig2
{
  width: 100px;
	margin-top: 8px;
}
/*
** Das Icon auf jeder Kachel
*/
.team-image
{
  border-radius:7%;
  border: 5px solid mmbackg;
}
/*
** Auftragsbalken bei Yardmanager-Auftragskärtchen
*/
.dborderbar
{
  padding-top: var(--vpaddingtop);  /* 120px; */
  padding-bottom: var(--vpaddingbottommd);  /* 120px; */
  background-color: var(--mmublue);  /* #8ec6fb; */
  border: 1px solid var(--secondary);
  height: 100%;  /* 65vh; */
  overflow: auto;
  font-size: 1.5rem;
}
/*
** Buchen-Button Extra-large
*/
.mmbtn-xxl 
{
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: 4px solid var(--primary);
  border-radius: 2%;
  height: 100px;
  width: 100%;
  font-size: 3.0rem;
}
.mmbtn-xl 
{
  color: black;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  border: 4px solid black;
  border-radius: 2%;
  height: 75px;
  width: 100%;
  font-size: 3.0rem;
}
/*
** Label Extra-large
*/
.mmlabel-xxl 
{
  color: black;
  background-color: var(--mmlblue);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border: 4px solid var(--mmlblue);
  border-radius: 2%;
  height: 100px;
  width: 100%;
  font-size: 2.0rem;
}


table.mmdbgrid
{
   overflow: auto;
}
/*
** Text mit Schatten versehen, also outline
*/
.addtxtshadow {
  text-shadow:
     1px  1px 1px #000,
    -1px  1px 1px #000,
    -1px -1px 1px #000,
     1px -1px 1px #000;
}