/*-----------------------------------------------
| style.css                                      |
|                                                |
| release: 01.09.2021                            |
| © intellisys.io                                |
------------------------------------------------*/

:root {
  --color-main-red: #e3000f;
  --color-main-green: #86bc21;
  --color-main-gray: #cccccc;
  
  --color-main-blue: #4384be;
  
  --color-dark-red: #990000;
  
  --height-gridgap: 46px;
  --color-gridgap: #fff;
  
  --font-primary: FiraSans, Arial, sans-serif;
  --font-accent: Chronic, Arial, sans-serif;
}

@font-face{
  font-family: "FiraSans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face{
  font-family: "Chronic";
  src: url("fonts/chronic-regular.woff2") format("woff2");
}

html {
  height: 100%;
}


body {
  
    font-family: var(--font-primary);
    background: #FFFFFF;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
      
    background-image: url('img/pattern.jpg');
} 


/*<InfoBar - DevMode>*/
#InfoBar_DevMode{
  position: relative;
  font-size:14px;
  height:40px;
  background-color: indianred;
}

.InfoBar_DevMode_Item{
  float:left;
  margin: 10px;
}
/*</InfoBar - DevMode>*/


/*<InfoBar - NoJs>*/
#InfoBar_NoJs{
  position: relative;
  font-size:14px;
  
  height:40px;
  background-color:#e9c46a;
}

.InfoBar_NoJs_Item{
  float:left;
  margin: 10px;
}
/*</InfoBar - NoJs>*/

/*<InfoBar - N/A>*/
#InfoBar_NA{
  position: relative;
  font-size:14px;
  
  margin:20px 40px 0px 40px;
  border: 1px dotted red;
  
}

.InfoBar_NA_Item{
  float:left;
  margin: 10px;
}
/*</InfoBar - N/A>*/



.SnackBarWrapper {
    
    display: none;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    
}

.SnackBar {
    
    background-color: white;
    
    width: 20%;
    padding: 20px 120px;
    border-radius: 20px;
    
}

.SnackBarCaption{
    font-size: 28px;    
    margin: 20px;
}

.SnackBarContent {
    margin: 20px;
}

.SnackBarButton{
 
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
}

.SnackBarButton:hover{
  background-color: var(--color-main-blue);
}



.QuestionBarWrapper {
    
    display: none;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    
}

.QuestionBar {
    
    background-color: white;
    
    width: 20%;
    padding: 20px 120px;
    border-radius: 20px;
    
}

.QuestionBarCaption{
    font-size: 28px;    
    margin: 20px;
}

.QuestionBarContent {
    margin: 20px;
}

.QuestionBarButton{
    
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
}

.QuestionBarButton:hover{
  background-color: var(--color-main-blue);
}









.SmallScreenWrapper {
    
    display: none;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    justify-content: center;
    align-items: center;
    
    background-image: url('img/pattern.jpg');
    
}


.SmallScreen {
    
    background-color: white;
    border: 1px solid black;
    
}

.SmallScreenCaption{
    font-size: 28px;    
    margin: 20px;
}

.SmallScreenContent {
    margin: 20px;
}



.Wrapper {
    position: relative;
    width: 100%;
    height: 100%
}


.MainFrame {
    
    position: relative;
    box-sizing: border-box;
    
    width: 90%;
    
    margin: 0px auto;
    min-width: 1254px;
    
    background-color:#ffffff;
    
    border: 1px solid #000;
    overflow: hidden;
    
}

/*< Anmeldung >*/


.Anmeldung{

      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
}

.AnmeldungCaption{
    font-size: 28px;    
}

.AnmeldungContent{
    
    border: 1px solid black; 
    padding: 20px 120px;
    
}

.AnmeldungInput{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


.AnmeldungButton{
 
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
}

.AnmeldungButton:hover{
  background-color: var(--color-main-blue);
}

.AnmeldungLostPass{

  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}

.AnmeldungFormResponseDiv {
  font-size: 14px;
  width: 300px;
}


/*< /Anmeldung >*/




.DefaultButton{
 
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
}

.DefaultButton:hover{
  background-color: var(--color-main-blue);
}


.ButtonCheckMark{
    
    display:none;
    height:16px;
    width:16px;
    background-image: url('img/check-mark-16.png');
}




/*< Abwesenheit >*/
.AnwGridHeader{
  
  font-size: 14px;
  text-align: center;

}

.AnwGridItem{
  
  border-bottom: 1px solid gray;
  cursor: pointer;
  height: 30px;

}

.AnwGridHLine{
  
  background-color: #000;
  height: 1px;
  margin: 2px 0px;
  
}


.AnwGridGesamtCaption{
  
  font-size: 14px; 
  font-weight: bold; 
  align-self: center;
  
}

.AnwGridGesamtAbwCaption{
  
  font-size: 14px; 
  align-self: center;
  color: var(--color-dark-red);
  
}

.AnwGridGesamtAnwCaption{
  
  font-size: 14px; 
  align-self: center;
  color: var(--color-main-green)
  
}

.AnwGridGesamtRowAbwCaption{
  
  font-size: 14px; 
  color: var(--color-dark-red);
  text-align: left;
  width: 20px;
  margin: 0px 5px;
  
}

.AnwGridGesamtRowAnwCaption{
  
  font-size: 14px; 
  color: var(--color-main-green);
  text-align: right;
  width: 20px;
  margin: 0px 5px;
  
}


.AnwGridGesamtItem{
  
  font-size: 14px; 
  align-self: center; 
  text-align: center;
  
}

.AnwGridGesamtAbwItem{
  
  font-size: 14px; 
  align-self: center; 
  text-align: center;
  color: var(--color-dark-red);
  
}

.AnwGridGesamtAnwItem{
  
  font-size: 14px; 
  align-self: center; 
  text-align: center;
   color: var(--color-main-green)
  
}


/*< /Abwesenheit >*/



/*< Landing >*/

.LandingTabItem {
  
  background-color: #cccccc;
  border-radius: 0px 0px 15px 15px;
  color: #fff;
  
  padding: 10px 30px;
  margin: 0px 5px;
  
  width: 150px;
  text-align: center;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  cursor: pointer;
  
}




.LandingMainItem {
  
  border-radius: 8px;
  /* background-color: var(--color-main-green); */
  background-color: #91bd38;
  color: #fff;
  
  padding: 30px;
  text-align: center;
  cursor: pointer;
  
  margin: 10px;
  
}

.LandingMainItemCaption {
  margin: 0px 10px 10px 10px;
  font-size: 22px;
}

.LandingMainItemImg {
  margin: 30px 30px 0px 30px;
  
}


/*< /Landing >*/



/*< Bestellungen >*/

.BestMainGrid{
  display: grid ;
  grid-template-columns: 1fr auto auto auto auto 1fr; 
  margin-top: 10px;
}

.BestMainGridItem{
  padding: 10px;
}


.BestMainGridItem:hover {
  cursor: pointer;
}

.BestMainGridPdfIcon{
  background-image: url('img/pdf-24.png');
  background-repeat: no-repeat;
  margin: 5px 15px;
  cursor: pointer;
}

.BestMainGridPdfIconDisabled{
  background-image: url('img/pdf-24-gray.png');
  background-repeat: no-repeat;
  margin: 5px 15px;
}


/*
.BestMainGrid > *:not(:first-child):not(:last-child):hover {
  background-color: #ccc;
  cursor: pointer;
}
*/

/*< /Bestellungen >*/





.ModalCustom-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}


















































.ArrowGotoSpeiseplan{

   background-image: url('img/arrow-1-32.png');
   height:32px;
   width:32px;   

   cursor:pointer;
}



/* <KWCarousel> */

.KWCarouselGrid{
    
    display: flex;    
    align-items: center;

    position: absolute;
    top: 11px;
    left: 100px;
    cursor: pointer;

    
    /*
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    
    justify-items: center;
    align-items: center;
    margin-bottom: 1rem;
    */
}


.KWCarousel_ArrowLeft{

   background-image: url('img/arrow-1-32.png');
   height:32px;
   width:32px;   
   margin-left: auto;
   
   cursor:pointer;
}

.KWCarousel_KWText{
  padding:5px;
  color: var(--color-main-red);
  width: 120px;
  text-align: center;
}


.KWCarousel_ArrowRight{
   
   background-image: url('img/arrow-2-32.png');
   height:32px;
   width:32px;
   margin-right: auto;
   
   cursor:pointer;
   
}


/* </KWCarousel> */



.LandingFlexRow {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
}



.EmtpyGrid{
  display: grid;
  justify-items: center;
  
  margin-top: 60px;
  border-bottom: 4px solid var(--color-dark-red);
  
}



.DefaultWrapper{


}

.DefaultCaption{
  
  font-size:18px;
  color: var(--color-dark-red);
  
}

.DefaultSmallCaption{
  
  font-size:14px;
  color: var(--color-dark-red);
  
}


.DefaultContent{


}

.SpeiseplanMainGrid{

    display: grid;
                                 
    grid-template-columns: 25px 80px 220px auto 220px auto 220px auto 220px auto 220px auto;
  
    grid-template-areas: 'gap0n1 clear0 BasisCaption gap1n1 SauceCaption gap2n1 BeilageCaption gap3n1 DessertCaption gap4n1 SalatCaption gap5n1'
                         'gap0n1 clear2 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1 HGridLineGray1'
                         'gap0n1 MontagPanel BasisMontag1 gap1n2 SauceMontag1 gap2n2 BeilageMontag1 gap3n2 DessertMontag1 gap4n2 SalatMontag1 gap5n2'
                         'gap0n1 MontagPanel BasisMontag2 gap1n3 SauceMontag2 gap2n3 BeilageMontag2 gap3n3 DessertMontag2 gap4n3 SalatMontag2 gap5n2'
                         'gap0n1 MontagPanel BasisMontag3 gap1n4 SauceMontag3 gap2n4 BeilageMontag3 gap3n4 DessertMontag3 gap4n4 SalatMontag3 gap5n2'
                         'gap0n1 clear4 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2 HGridLineGray2'
                         'gap0n1 DienstagPanel BasisDienstag1 gap1n5 SauceDienstag1 gap2n5 BeilageDienstag1 gap3n5 DessertDienstag1 gap4n5 SalatDienstag1 gap5n5'
                         'gap0n1 DienstagPanel BasisDienstag2 gap1n6 SauceDienstag2 gap2n6 BeilageDienstag2 gap3n6 DessertDienstag2 gap4n6 SalatDienstag2 gap5n5'
                         'gap0n1 DienstagPanel BasisDienstag3 gap1n7 SauceDienstag3 gap2n7 BeilageDienstag3 gap3n7 DessertDienstag3 gap4n7 SalatDienstag3 gap5n5'
                         'gap0n1 clear6 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3 HGridLineGray3'
                         'gap0n1 MittwochPanel BasisMittwoch1 gap1n8 SauceMittwoch1 gap2n8 BeilageMittwoch1 gap3n8 DessertMittwoch1 gap4n8 SalatMittwoch1 gap5n8'
                         'gap0n1 MittwochPanel BasisMittwoch2 gap1n9 SauceMittwoch2 gap2n9 BeilageMittwoch2 gap3n9 DessertMittwoch2 gap4n9 SalatMittwoch2 gap5n9'
                         'gap0n1 MittwochPanel BasisMittwoch3 gap1n10 SauceMittwoch3 gap2n10 BeilageMittwoch3 gap3n10 DessertMittwoch3 gap4n10 SalatMittwoch3 gap5n10'
                         'gap0n1 clear8 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4 HGridLineGray4'
                         'gap0n1 DonnerstagPanel BasisDonnerstag1 gap1n11 SauceDonnerstag1 gap2n11 BeilageDonnerstag1 gap3n11 DessertDonnerstag1 gap4n11 SalatDonnerstag1 gap5n11'
                         'gap0n1 DonnerstagPanel BasisDonnerstag2 gap1n12 SauceDonnerstag2 gap2n12 BeilageDonnerstag2 gap3n12 DessertDonnerstag2 gap4n12 SalatDonnerstag2 gap5n12'
                         'gap0n1 DonnerstagPanel BasisDonnerstag3 gap1n13 SauceDonnerstag3 gap2n13 BeilageDonnerstag3 gap3n13 DessertDonnerstag3 gap4n13 SalatDonnerstag3 gap5n13'
                         'gap0n1 clear10 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5 HGridLineGray5'
                         'gap0n1 FreitagPanel BasisFreitag1 gap1n14 SauceFreitag1 gap2n14 BeilageFreitag1 gap3n14 DessertFreitag1 gap4n14 SalatFreitag1 gap5n14'
                         'gap0n1 FreitagPanel BasisFreitag2 gap1n15 SauceFreitag2 gap2n15 BeilageFreitag2 gap3n15 DessertFreitag2 gap4n15 SalatFreitag2 gap5n15'
                         'gap0n1 FreitagPanel BasisFreitag3 gap1n16 SauceFreitag3 gap2n16 BeilageFreitag3 gap3n16 DessertFreitag3 gap4n16 SalatFreitag3 gap5n16'
                         'gap0n1 clear12 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6 HGridLineGray6'
                         'HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1 HGridLineRed1'
                         'PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed PlanFeed'
                         'clear22 clear13 AnmerkungDiv AnmerkungDiv AnmerkungDiv AnmerkungDiv clear18 clear19 ApplySelectionFormResponseDiv clear20 ApplySelectionButton clear21';  
   
    align-items: center;     
    margin: 30px 0px;                          
                              
    
}


.gap1n1{
    grid-area: gap1n1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main-green);
}

.gap2n1{
    grid-area: gap2n1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main-green);
}

.gap3n1{
    grid-area: gap3n1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main-green);
}

.gap4n1{
    grid-area: gap4n1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main-green);
}


.gap1n2{
    grid-area: gap1n2;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n3{
    grid-area: gap1n3;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n4{
    grid-area: gap1n4;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n5{
    grid-area: gap1n5;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n6{
    grid-area: gap1n6;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n7{
    grid-area: gap1n7;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n8{
    grid-area: gap1n8;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n9{
    grid-area: gap1n9;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n10{
    grid-area: gap1n10;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n11{
    grid-area: gap1n11;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n12{
    grid-area: gap1n12;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n13{
    grid-area: gap1n13;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n14{
    grid-area: gap1n14;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n15{
    grid-area: gap1n15;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}

.gap1n16{
    grid-area: gap1n16;
    height: var(--height-gridgap);
    background-color: var(--color-gridgap);
}




.TagAnzahlTxt {
  font-size:14px;
}


.MontagPanelWrapper{
    grid-area: MontagPanel;
    justify-self: center;
}

.MontagPanel{
    
    background-color: var(--color-main-red);
    color:#ffffff;

    text-align: center;
    border-radius: 5px 0px 0px 5px;

    padding:8px;
    margin: 5px 0px;
    
    width:50px;
     

}

.DienstagPanelWrapper{
    grid-area: DienstagPanel;
    justify-self: center;
}

.DienstagPanel{

    background-color: var(--color-main-red);
    color:#ffffff;

    text-align: center;
    border-radius: 5px 0px 0px 5px;

    padding:8px;
    margin: 5px 0px;

    width:50px;

}

.MittwochPanelWrapper{
    grid-area: MittwochPanel;
    justify-self: center;
}

.MittwochPanel{

    background-color: var(--color-main-red);
    color:#ffffff;

    text-align: center;
    border-radius: 5px 0px 0px 5px;

    padding:8px;
    margin: 5px 0px;

    width:50px;

}

.DonnerstagPanelWrapper{
    grid-area: DonnerstagPanel;
    justify-self: center;
} 

.DonnerstagPanel{

    background-color: var(--color-main-red);
    color:#ffffff;

    text-align: center;
    border-radius: 5px 0px 0px 5px;

    padding:8px;
    margin: 5px 0px;

    width:50px;

}

.FreitagPanelWrapper{
    grid-area: FreitagPanel;
    justify-self: center;
} 


.FreitagPanel{

    background-color: var(--color-main-red);
    color:#ffffff;

    text-align: center;
    border-radius: 5px 0px 0px 5px;

    padding:8px;
    margin: 5px 0px;

    width:50px;

}

/* <GridLines> */
/* ----------------------------------- */


.HGridLineGray1{
    grid-area: HGridLineGray1;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 0; 
}

.HGridLineGray2{
    grid-area: HGridLineGray2;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 0; 
}

.HGridLineGray3{
    grid-area: HGridLineGray3;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 0; 
}

.HGridLineGray4{
    grid-area: HGridLineGray4;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 0; 
}


.HGridLineGray5{
    grid-area: HGridLineGray5;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 0; 
}


.HGridLineGray6{
    grid-area: HGridLineGray6;
    background-color: #D3D3D3;
    height:1px;
    width: 100%;
    
    margin: 5px 5px 15px 5px;
}

.HGridLineRed1{
    grid-area: HGridLineRed1;
    background-color: #e3000f;
    height:4px;
    width: 100%;
    
    margin-top: 10px;
}


/* ----------------------------------- */
/* </GridLines> */



/* <CAPTIONS> */
/* ----------------------------------- */

.BasisCaption{
    
    grid-area: BasisCaption;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    
    padding:8px 0px;
    
    /* width:220px; */

}

.SauceCaption{
    
    grid-area: SauceCaption;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    
    padding:8px 0px;
    

}

.BeilageCaption{
    
    grid-area: BeilageCaption;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    
    padding:8px 0px;
  

}

.DessertCaption{
    
    grid-area: DessertCaption;
    
    background-color: var(--color-main-red);
    color:#ffffff;
    
    /* font-weight: bold; */
    font-size:18px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    
    padding:8px 0px;
    
}

.SalatCaption{
    
    grid-area: SalatCaption;
    
    background-color: var(--color-main-red);
    color:#ffffff;
    
    /* font-weight: bold; */
    font-size:18px;
    text-align: center;
    border-radius: 8px 8px 0px 0px;
    
    padding:8px 0px;
    
    
}

/* ----------------------------------- */
/* </CAPTIONS> */


.PlanFeed{

  
  grid-area: PlanFeed;
  display: grid; 
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
  
  width:100%;
  background-color: var(--color-main-green);
  
  margin: 4px 0px 20px 0px;  
  font-size:12px;
  color:#ffffff;
  
   
  /*
  
  
  display: flex;
flex-wrap: wrap;
flex-direction: row;
  
  
  
 
  display:grid; 
  grid-auto-flow: column;
  
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  
  
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  grid-auto-flow: dense;	
  
  
  */
  
  /* grid-auto-flow: column;  */
  
  
  
}

.PlanFeedExpand{
  grid-area: PlanFeedExpand;
  
  color: #fff;
  background-color: var(--color-main-green);
  border: none;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  
  /*
  grid-area: PlanFeedExpand;
  
  font-size:16px;
  color:#000;
  
  margin: 5px;
  cursor: pointer;
  */
  
}


.PlanFeedItem{
  margin: 5px;
}


.PlanFeedItemText{
  margin: 5px;
}

.PlanFeedItemBio{
  margin: 8px 5px 5px 5px;
}





.TagDayName{
  
  font-size:20px;
  margin-bottom:5px;
  
}

.TagAnzahlInput{
  
  font-size:18px;
  width:40px;
  height:40px;
  text-align: center;
  
  margin: 0;
  
  -webkit-appearance: none;
  -moz-appearance: textfield;
  
  border: none;
 
}

.TagAnzahlInputDiv{
  
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  width: 40px;
  height: 40px;
  margin: 0px auto;
  padding: 1px 2px;
 
  background-color: #fff;
  color: #000;
  
  /* cursor:pointer; */
  
}

.TagAnzahlInputDivDisabled{
  
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  width: 40px;
  height: 40px;
  margin: 0px auto;
  padding: 1px 2px;
 
  background-color: #d7d7d7;
  color: #574242;
  
}


.RezepteItemSelectedWrapper {
  
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

}

.RezepteItemSelected {
  
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  background-color: rgba(67, 132, 190, 0.6);
  
  
  
  /*
  background-color: rgba(134, 188, 33, 0.5);
  
  
  background-color: rgba(255, 96, 0, 0.61);
   background-color: rgba(255, 255, 255, 0.8); */
  
}

.RezepteItemSelectedImage {
  
  background-image: url('img/selected.svg');
  background-size: contain;
  height: 28px;
  width: 28px;
  
}


.RezepteItem{
  position: relative; 
  font-size:14px;
  border: 1px solid black;
  
  /* width: 100%; */
  /* width: 210px;   */
  
  height:46px;
  padding: 0px 0px 0px 5px;
  margin-bottom:3px;
 
  cursor:pointer;
  
}

.RezepteItemEmpty{
  position: relative; 
  font-size:14px;
  /* border: 1px solid black; */
  
  width:200px;
  height:46px;
  padding: 0px 0px 0px 5px;
  margin-bottom:3px;
 
  display: flex;
  justify-content: center;
  text-align: center;
  
  color:#990000;
 
  /* cursor:pointer; */
  
}

.RezepteItem_bestaetigen{
  position: relative; 
  font-size:14px;
  border: 1px solid black;
  
  width:200px;
  height:46px;
  padding: 0px 0px 0px 5px;
  margin-bottom:3px;
 
  
}


.RezepteItemInfo{
    position: absolute; 
		bottom: 0;
		right:0; 
		
		font-size:10px;
		padding: 0px 5px 0px 0px; 
}

.RezepteItemInfoPicture{
    
    display:none;
    
    position: absolute; 
    top:15px;
		right:-9px;
		
		height: 12px;
    width: 16px; 
}

.RezepteItemInfoPicture1{
    
		height: 12px;
    width: 16px; 
}

.RezepteItemInfoPicture2{
   
		height: 12px;
    width: 16px; 
}




.RezepteItemHidden{
    display:none;
}


.BestWeekWrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  
  justify-items: center;
  
  /* background-color: DodgerBlue; */

}

.BestTagWrapper{
  
  margin: 10px;
  
}



.EmptyCar{
   background-image: url('img/car.png');
   height:131px;
   width:179px;   
   
   margin-top:20px;
   
   cursor:pointer;
   
}

.LockedDesktop{
   background-image: url('img/desktop-128.png');
   height:128px;
   width:128px;   
   
   margin-top:20px;
   
   cursor:pointer;
   
}


/*< Anmeldung >*/


.AnmeldungGrid{

    display: grid;
    
    grid-template-columns: auto 1fr;
    grid-template-areas: 'Content Space';

}



/*< /Anmeldung >*/




/*< ApplySelectionButton >*/

.ApplySelectionButton{
    
    grid-area: ApplySelectionButton;
    
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
    
    
    
    
    
    /*
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 8px 8px 8px 8px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
    
    */
    
}

.AnwsSaveButton{
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 40px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
    margin-right: 50px;
    
    width: 220px;
    
}    


.ApplySelectionButton:hover{
   background-color: var(--color-main-blue);
}

.AnwsSaveButton:hover{
   background-color: var(--color-main-blue);
}

.AnwsSaveButtonCheckMark{
    
    display:none;
    height:16px;
    width:16px;
    background-image: url('img/check-mark-16.png');
}


/*< /ApplySelectionButton >*/



.ApplySelectionFormResponseDiv{
  
  grid-area: ApplySelectionFormResponseDiv;
  
  margin-top:5px;color:#FF4500;font-size:14px;

}


.InfoPanelGrid{
  
    display: grid;
    
    grid-template-columns: 1fr 3fr;
    align-items: center;
   
    margin: 10px;

}






/*< OrderButton >*/

.OrderButtonGrid{
    
    display: grid;
    
    grid-template-columns: 4fr 1fr;
    grid-template-areas: 'OrderButtonResult OrderButton';
    
    align-items: center;
    
}


.OrderButton{
    
    grid-area: OrderButton;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size:18px;
    text-align: center;
    
    border-radius: 8px 8px 8px 8px;
    
    padding:8px 8px;
    
    height:40px;
    cursor: pointer;
}

.OrderButton_CheckMark{
    
    display:none;
    height:16px;
    width:16px;
    background-image: url('img/check-mark-16.png');
}





.OrderButton:hover{
  background-color: var(--color-main-blue);
}

.OrderButtonResult{
  
  grid-area: OrderButtonResult;

}




/*< /OrderButton >*/


.NextDayButton{
    
    grid-area: NextDayButton;
    
    background-color: var(--color-main-green);
    color:#ffffff;
    
    font-size: 18px;
    text-align: center;
    
    border-radius: 8px 8px 8px 8px;
    
    width: 210px;
    padding: 18px 0px;
    margin: 10px 0px;
    
    cursor: pointer;
    display: none;
    
}

.NextDayButton:hover{
   background-color: var(--color-main-blue);
}




.DefaultFormResponseFrame{
    border:none;
    
    height:0px;
    width:0px;
}




/*< WaitAnimation >*/

.WaitAnimation{
  
  display:none;

  width: 16px;
  height: 16px;
  
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
  
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}


/*< /WaitAnimation >*/





/*< Feed >*/

.FeedWrapper {
    position:relative;
    
    display: flex;
    justify-content: end;
    align-items: center;
    
    height:50px;
    margin:0px 0px 0px 0px;
    background-color:rgb(81,84,91);
    
    color:#ffffff;
    
}
 
.FeedLink {
  
  font-size:14px;
  cursor: pointer;
  margin: 0px 8px;
  
} 

.FeedLink a {
  color:#ffffff;
  font-size:14px;
  text-decoration:none;
}


 
/*< /Feed >*/








.InfoPanelItem {
    margin:10px 0;
}


.Line_White{
    background-color:#ffffff; 
    height:1px;
    margin:10px 0px
}


@media screen and (min-width: 1650px) {
    
    .MainFrame {
    
        width: 1450px;
    }

}

@media screen and (max-width: 1400px) {
    
   .MainFrame {
        width: 100%;
    }
          
}

@media screen and (max-width: 1300px) {
    
   .SpeiseplanMainGrid {
        grid-template-columns: 1px 80px 220px auto 220px auto 220px auto 220px auto 220px auto;
    }
          
}




@media screen and (max-width: 1250px) {
    
    .SpeiseplanMainGrid {
        grid-template-columns: 1px 80px 200px 14px 200px 14px 200px 14px 200px 14px 200px 0px;
    }
          
}


@media screen and (max-width: 1139px) {
    
   .SmallScreenWrapper {
        display: flex;
    }
          
}



/* <Sonstiges> */
.Clear_Both {clear:both;}
.Clear_Right {clear:right;}
.Clear_Left {clear:left;}



.Line_Black{background-color:#000000; height:1px;}
.Line_Gray{background-color: rgb(240,240,240); height:1px;}
/* </Sonstiges> */