/* -----------------------------------------------------------------------------
                            Health App  CSS
--------------------------------------------------------------------------------*/
/* -----------------------------------------------------------------------------
              Basic Defaults
--------------------------------------------------------------------------------*/
* {box-sizing: border-box;margin:0;padding:0; text-shadow: none;list-style-position: inside}
iframe {border:none;}
h1,h2,h3,h4 {display:block;text-align: center;}
h3 {font-size:1.3rem}
h4 {font-size:1.1rem}
input,textarea{font-size:0.85rem;}
/*------------------------------------------------------------------------------
/*  Bootstrap v4 overwrites
--------------------------------------------------------------------------------*/
[type=search] {-webkit-appearance:none;}
.input-group-text {background: transparent}
/* -----------------------------------------------------------------------------
             generate div for a print page break
--------------------------------------------------------------------------------*/
@media print {
  .pages {padding-left:12px;}
  .RechnungLeistungenTab { page-break-inside:auto }
  .RechnungLeistungenTab  tr  { page-break-inside:avoid; page-break-after:auto }
  .FinalerKommentar,.closing  { page-break-inside:avoid; page-break-before:auto }
   /*.page-break	{ display: block; page-break-before: always; }   */
}
/* -----------------------------------------------------------------------------
  Blocks labeled mobileOnly or desktopOnly are shown conditionally

/* Assume Desktop first
                                                       */
.mobileOnly {display:none;}
.desktopOnly {display:block;}
/* Switch when mobile (no Mouse and hoevering is not possiblle)                  */
@media (hover: none) and (pointer: coarse) {
    .mobileOnly {display:block}              /* touchscreens only, data shown only here */
    .desktopOnly {display:none}              /* touchscreens only, data hidden here     */
}
/* -----------------------------------------------------------------------------
      own Popup Layout
--------------------------------------------------------------------------------*/
.bryttecpopupsmallwhite {position: absolute; top:0; width:50%;min-width:300px;max-width:500px;max-height:100%;
                         padding:0.5rem; background-color: rgba(255,255,255,1.0);
                         border: 2px solid black; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                         -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                         color: black;
                         overflow: auto;
                         }
.bryttecpopupmediumwhite {position: absolute; top:0; width:80%;min-width:300px;max-width:900px;max-height:100%;
                         padding:0.5rem; background-color: rgba(255,255,255,1.0);
                         border: 2px solid black; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                         -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                         color: black;
                         overflow: auto;
                         }
.bryttecpopuplargewhite {position: absolute; top:0; width:100%;min-width:300px;max-width:1100px; max-height:100%;
                        padding:0.8rem; background-color: rgba(255,255,255,1.0);
                        border: 2px solid black; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                        -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                        color: black;
                        overflow:auto;
                         }
.JStecpopupverylargewhite {position: absolute; top:0; width:100%;min-width:300px;max-width:1500px; max-height:100%;
                        padding:0.8rem; background-color: rgba(255,255,255,1.0);
                        border: 2px solid black; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                        border-radius:5px;
                        color: black;
                        overflow:auto;
                         }
.bryttecpopupsmallblack {position: absolute; top:0; width:50%;min-width:300px;max-width:500px; max-height: 100%;
                         padding:0.5rem; background-color: rgba(0,0,0,0.7);
                         border: 2px solid white; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                         -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                         color: white;
                         overflow: auto;
                         }
.bryttecpopuplargeblack {position: absolute; top:0; width:100%;min-width:300px;max-width:1000px; max-height: 100%;
                        padding:0.8rem; background-color: rgba(0,0,0,0.7);
                        border: 2px solid black; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                        -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                        color: white;
                        overflow:auto;
                        }
.popnavitem1 {width: 100%; padding:0.5rem; font-size:1.0rem;}
.popnavitem2 {width: 50%; min-width:160px; padding:0.5rem; font-size:1.0rem;}
.popnavitem3 {width: 33%; min-width:160px; padding:0.5rem; font-size:1.0rem;}
.popnavitem4 {width: 25%; min-width:160px; padding:0.5rem; font-size:1.0rem;}
.popnavitem5 {width: 20%; min-width:160px; padding:0.5rem; font-size:1.0rem;}
/* -----------------------------------------------------------------------------
    Chat Layout
-------------------------------------------------------------------------------*/
#WhatsAppdiv {background-color:#e9e9d5}
#WhatsAppdiv .links {position:relative; left:0; width:70%;
                     background-color:white;}
#WhatsAppdiv .rechts {position:relative; left:30%; width:70%;
                     background-color:#f1ee8a;}
#WhatsAppdiv .mitte  {position:relative; left:0; width:100%;
                      background-color:#f1ee8aa0; text-align: center;}
#WhatsAppdiv .datum  {position:relative;
                     background-color: #a3aed9;text-align: center;}
#WhatsAppdiv .klein {font-size:0.6rem;}
#WhatsAppdiv * {margin-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius:5px;}
/* -----------------------------------------------------------------------------
    Special Captcha scaling used and needed because of iphne 5 .. we scale the
    origonal size a bit to better fit
*/
.scalerecaptcha {
    transform:scale(0.93);
    transform-origin:0 0;
}
/* -----------------------------------------------------------------------------
      Basic Header and Footer Layout
--------------------------------------------------------------------------------*/
header,footer {color: white;  background-color: black;  font-size:1.3rem;}
header > * {padding: 0.5rem;}
footer {position:fixed; bottom:0; left:0; width:100%}
/* -----------------------------------------------------------------------------
      Some Div - Text Layouts
--------------------------------------------------------------------------------*/
.headerlinewhite {background-color: white; color:black; font-size:1.2rem;text-align: center;}
/* -----------------------------------------------------------------------------
      FlexBox
--------------------------------------------------------------------------------*/
.flexboxheader {display:flex; flex-flow: row wrap; justify-content: space-between;align-items: center;}
.flexboxnav {display:flex; flex-flow: row wrap; justify-content: flex-start; align-items: center;}
.flexboxlist {display:flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center;}
.flexeqlist {display:flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.flexcenter {display:flex; flex-flow: row nowrap; justify-content: space-around; align-items: center;}
.flexwrapspacearound {display:flex; flex-flow: row wrap; justify-content: space-around; align-items: center;}
/* -----------------------------------------------------------------------------
      Navigation Details
--------------------------------------------------------------------------------*/
nav  {background-color:darkgrey}
nav div {padding:0; width:100%;  text-align: center; margin:0px}
#navigation a, #footer a {font-weight:normal;background-color:black; margin: 0;}
#navigation a:hover, #footer a:hover {background-color:white; color:black; font-weight:normal}
/* -----------------------------------------------------------------------------
      vertikale Navigation
--------------------------------------------------------------------------------*/
.vertNavContainer {position: absolute; top:0;  min-width:220px;max-width:420px;max-height: 100%;
                   padding:0.5rem; background-color: rgba(0,0,0,0.7);
                   border: 2px solid white; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                   -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                   color: white;
                   overflow: auto;
                   }
.vertNavitem {background-color: rgba(0,0,0,0.7); width:100%; color:white; padding:1rem; cursor:pointer}
.vertNavitem:hover {background-color:white; color:black; font-weight:normal}
/* -----------------------------------------------------------------------------*/
/*   Drop Down Layout
/*------------------------------------------------------------------------------*/
[drop-for] {background-color:rgba(0,0,0,1.0);border:solid 1px white; border-radius:3px; flex-flow: column nowrap; display:flex;}
[drop-for] a  {color:white; font-size:1rem; text-decoration: none; padding:1rem; border-bottom: 1px solid grey;text-align: center;}
[drop-for] a:hover {background-color: white;color:black}
[drop-for] a:last-child  {border:none}
[drop-for] i {color:white;font-size:32px; padding:0.5rem; cursor:pointer }
[drop-for] p {background-color :#3d3d3d}
/* -----------------------------------------------------------------------------
    Listitems
--------------------------------------------------------------------------------*/
/*li.clickable {cursor:pointer}
li.clickable:hover {background-color: black; color:white; text-shadow: none;} */
/* -----------------------------------------------------------------------------
    Table Layouts
--------------------------------------------------------------------------------*/
table {padding:0; margin-top: 1rem; margin-bottom: 1rem;}
.tabcolblack { background-color:#706d6d;color:white; padding: 1rem; border:none}
.tabcolgrey { background-color: #f3f3f3;color:black; padding: 1rem; border:none}
.RechnungHeader tr { background-color: #f3f3f3;color:black; text-align: center; font-size:0.9rem}
.RechnungHeader td {padding:0.9rem}
.RechnungLeistungenTab tr { background-color: #f3f3f3; color:black; text-align: center; font-size:0.8rem}
.RechnungLeistungenTab td {padding:0.8rem;text-align: left}

/* -----------------------------------------------------------------------------
    Alertbox
--------------------------------------------------------------------------------*/
.alertContainer {right:0; z-index:100; position: fixed; top:0; background-color:rgba(0,0,0,0.7); width:30%; min-width:320px;max-width:420px;
                 padding:0.5rem; background-color: rgba(23, 157, 8, 0.85);
                 border: 2px solid white; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
                 -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px;
                 color: white;
                   }
/* -----------------------------------------------------------------------------
     Search Items
--------------------------------------------------------------------------------*/
.searchlistitem {display:none;cursor:pointer;background-color: #ede5e5;padding:0.8rem; border-radius:5px}
.searchlistitem:hover {background-color: black; color:white;}
/* -----------------------------------------------------------------------------
     Ergebnis
--------------------------------------------------------------------------------*/
.ergebnisse  {cursor:pointer; background-color: #faf5f5; padding:0.6rem; border-radius:3px; margin-bottom: 0.6rem; text-align: left;font-size:0.85rem}
/* -----------------------------------------------------------------------------
     Marking process flows
--------------------------------------------------------------------------------*/
#stepsbar .processstep  {cursor:pointer; background-color: #dbd6d6; padding:0.4rem;}
/*  ---------------------------------------------------------------------------
     Beauty
--------------------------------------------------------------------------------*/
.jstcard {background-color: white; border-radius: 5px; margin:10px;
       box-shadow: 0 4px 8px 0 rgba(0, 0, 0);padding:1rem;}
/* ---------------------------------------------------------------------------*/
/*  Basic Popup Layout                                                        */
/*----------------------------------------------------------------------------*/
/* outer frame  to position the popups                                        */
.posterouter {position:relative; top:0; width:100%; display:flex;justify-content: center; flex-flow: row nowrap; visibility: hidden;}
.posterouterLeft {position:relative; top:0; width:100%; display:flex;justify-content:flex-start; flex-flow: row nowrap; visibility: hidden;}
.popupsmallwhite
     {position: relative; width:50%;min-width:300px;max-width:600px; padding:0.5em;
       background-color: rgba(255,255,255,1); border:solid 1px black; border-radius:5px}
.popuplargewhite
     {position: relative; margin:0 0.8rem 0 0.8rem; width:100%; min-width:320px;max-width:1000px; padding:0.8rem;
       background-color: rgba(255,255,255,1); border:solid 1px black; border-radius:5px}
.popuplargewhite > p:first-child {background: linear-gradient(to right, #eee , #000);}
.popuplargewhite i, .popupsmallwhite i {color:black;font-size:2rem; padding:0.5rem; cursor:pointer }
.popuplarge
     {position: absolute; top:0; width:100%;min-width:320px;max-width:1000px; padding:0.8em;}
.popupbackcolor {background-color: #e6e6e6;}
.containerheader {background-color: rgba(0,0,0,0.9); color: white; font-size:1.4em;
                 text-align: center; padding:0.5em;
                 border-radius:3px;}
/* -----------------------------------------------------------------------------
  Process Popup Style
-------------------------------------------------------------------------------*/
.processpopup {display:none;position:absolute;top:0px; border-radius:3px; width:100%}
.scroller {overflow:auto}
.hideit {display:none}
/* -----------------------------------------------------------------------------
  Layout PatientenDaten Results
-------------------------------------------------------------------------------*/
.listofdata .datenrow:nth-child(odd) {padding: 0.8rem; background-color: #e4dede; border-radius:3px;}
.listofdata .datenrow:nth-child(even) {padding: 0.8rem; background-color: #f2f5f2; border-radius:3px;}
/* -----------------------------------------------------------------------------
   CSS3 Grid
--------------------------------------------------------------------------------*/
.pagegridcontainer {display:grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content;
    justify-items: stretch;
    align-items: stretch;
  }
.pagegridheader {grid-area: 1 / 1 / span 1 /  span 1}
.pagegridsrcol  {grid-area: 2 / 1 / span 1 / span 1}
.pagegridsfooter  {grid-area: 3 / 1 / span 1 / span 1}
/*  ----------------------------------------------------------------------------
   Media Query
   -----------------------------------------------------------------------------*/
/*   Assume a iPhone 5 as smallest width                                        */
@media only screen and (min-width: 5px) {
  .navitem5,.popnavitem5  {width: 100%; padding:0.5rem; font-size:0.9rem;}
  .navitem4,.popnavitem4  {width: 100%; padding:0.5rem; font-size:0.9rem;}
  .navitem3,.popnavitem3  {width: 100%; padding:0.5rem; font-size:0.9rem;}
  .navitem2,.popnavitem2  {width: 100%; padding:0.5rem; font-size:0.9rem;}
  .navitem1,.popnavitem1  {width: 100%; padding:0.5rem; font-size:0.9rem;}
  .header {font-size:0.8rem;}
  .footer {font-size:0.9rem;}
   #navigation a.navitem5,#navigation a.navitem4,
   #navigation a.navitem3,#navigation a.navitem2,#navigation a.navitem1
               {border-left: solid 1px white;
               border-right: solid 1px white;
               border-top: solid 1px white; border-bottom:none;}
   #navigation a.navitem5:last-child,
   #navigation a.navitem4:last-child,
   #navigation a.navitem3:last-child,
   #navigation a.navitem2:last-child,
   #navigation a.navitem1:last-child
               {border-bottom:solid 1px white;}
  .RechnungSuchenDiv > .flexboxlist {flex-wrap: wrap;}
  }
/*   Devices ab 400 px                                                          */
@media only screen and (min-width: 400px) {
  .navitem5,.popnavitem5 {width: 100%;padding:0.5rem;cursor:pointer; font-size:1.0rem;}
  .navitem4              {width: 50%;padding:0.5rem;cursor:pointer; font-size:1.0rem;}
  .navitem3,.popnavitem3 {width: 100%;padding:0.5rem;cursor:pointer; font-size:1.0rem;}
  .navitem2,.popnavitem2 {width: 50%;padding:0.5rem;cursor:pointer; font-size:1.0rem;}
  .navitem1,.popnavitem1  {width: 100%; padding:0.5rem; cursor: pointer; font-size:1.0rem;}
  .popnavitem4            {width: 100%;padding:0.5rem;cursor:pointer; font-size:1.0rem;}
  .header {font-size:1.0rem;}
  .footer {font-size:0.9rem;}
  #navigation a.navitem5,
  #navigation a.navitem3,
  #navigation a.navitem1
              {border-left: solid 1px white;
               border-right: solid 1px white;
               border-top: solid 1px white; border-bottom:none;}
 #navigation a.navitem5:last-child,
 #navigation a.navitem3:last-child,
 #navigation a.navitem1:last-child
              {border-bottom:solid 1px white;}
 #navigation a.navitem4,
 #navigation a.navitem2
              {border-left: solid 1px white;
               border-bottom: solid 1px white;
               border-top: solid 1px white;
               border-right:none;}
 #navigation a.navitem4:last-child,
 #navigation a.navitem2:last-child
              {border-right:solid 1px white;}
 .RechnungSuchenDiv > .flexboxlist {flex-wrap: wrap;}
  }
@media only screen and (min-width: 550px) {
  .navitem1,.popnavitem1 {width: 100%; padding:0.5rem; cursor: pointer; font-size:1.1rem;}
  .navitem2,.popnavitem2 {width: 50%;padding:0.5rem;cursor:pointer; font-size:1.1rem;}
  .navitem3,.popnavitem3 {width: 33.333%;padding:0.5rem;cursor:pointer; font-size:1.1rem;}
  .navitem4,.popnavitem4 {width: 25%;padding:0.5rem;cursor:pointer; font-size:1.1rem;}
  .navitem5,.popnavitem5 {width: 20%;padding:0.5rem;cursor:pointer; font-size:1.1rem;}
  .header {font-size:1.1rem;}
  .footer {font-size:0.9rem;}
  #navigation a.navitem1
              {border-left: solid 1px white;
               border-right: solid 1px white;
               border-top: solid 1px white; border-bottom:none;}
  #navigation a.navitem1:last-child
              {border-bottom:solid 1px white;}
 #navigation a.navitem5,
 #navigation a.navitem4,
 #navigation a.navitem3,
 #navigation a.navitem2
              {border-left: solid 1px white;
               border-bottom: solid 1px white;
               border-top: solid 1px white;
               border-right:none;}
 #navigation a.navitem5:last-child,
 #navigation a.navitem4:last-child,
 #navigation a.navitem3:last-child,
 #navigation a.navitem2:last-child
              {border-right:solid 1px white;}
.RechnungSuchenDiv > .flexboxlist {flex-wrap: wrap;}
}
/*   Devices ab 750 px                                                          */
@media only screen and (min-width: 750px) {
  .navitem5,.popnavitem5 {width: 20%;padding:0.5rem;cursor:pointer; font-size:1.2rem;}
  .navitem4,.popnavitem4 {width: 25%;padding:0.5rem;cursor:pointer; font-size:1.2rem;}
  .navitem3,.popnavitem3 {width: 33.333%;padding:0.5rem;cursor:pointer; font-size:1.2rem;}
  .navitem2,.popnavitem2 {width: 50%;padding:0.5rem;cursor:pointer; font-size:1.2rem;}
  .navitem1,.popnavitem1 {width: 100%; padding:0.5rem; cursor: pointer; font-size:1.2rem;}
  .header {font-size:1.3rem;}
  .footer {font-size:0.9rem;}
  #navigation a.navitem1
              {border-left: solid 1px white;
               border-right: solid 1px white;
               border-top: solid 1px white; border-bottom:none;}
  #navigation a.navitem1:last-child
              {border-bottom:solid 1px white;}
 #navigation a.navitem5,
 #navigation a.navitem4,
 #navigation a.navitem3,
 #navigation a.navitem2
              {border-left: solid 1px white;
               border-bottom: solid 1px white;
               border-top: solid 1px white;
               border-right:none;}
 #navigation a.navitem5:last-child,
 #navigation a.navitem4:last-child,
 #navigation a.navitem3:last-child,
 #navigation a.navitem2:last-child
              {border-right:solid 1px white;}
.RechnungSuchenDiv > .flexboxlist {flex-wrap: nowrap;}
  }