html, body
{
    margin: 0px;
    padding: 0px;
    color: #4c5258;
    font-family: 'Roboto', sans-serif;
}

#mytinymcearea
{
    min-height: 600px;
}

@media only screen and (max-width: 1200px)
{
    .flexboxlayout1
    {
        display: block;
    }
    .flexelement1
    {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px)
{
    .flexboxlayout1
    {
        display: flex;
        justify-items: space-between;
    }
    .flexelement1
    {
        width: 50%;
    }

}


body
{
    min-width: 800px;
    overflow-x: scroll;
}
button:hover, a:hover
{
    cursor: pointer;
}


a
{
    color:#4c5258;
    transition: color 0.5s ease;
    text-decoration: none;
}
a:hover
{
    color: #161616;
}

.grey1
{
    color:#4c5258;
}
.grey2
{
    color: #6c757d; 
}
.grey3
{
    color: #d3d3d3;
}

/* Allgemeine width transition Klassen */
.widthtransition
{
    transition: width 0.2s ease;
}


/* Allgemeine Toogle Klassen */
.show
{
    display: block !important;
}
.shownot
{
    display: none !important;
}

.iconbutton
{
    background-color: transparent;
    border: none;
    outline: none;
    margin: 0px;
    padding: 0px;
}
.iconbutton:hover
{
    color: #161616;
}

.primbutton
{
    background-color: #161616;
    color: white;
    border: none;
    outline: none;
    transition: background-color 0.5 ease;
    border-radius: 5px;
}
.primbutton:hover
{
    background-color: #000;
    border: none;
    outline: none;
}


@media only screen and (max-width: 820px)
{
    .customcontainer
    {
        width: 100%;

    }
    .flexinglayout
    {
        display: block;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1500px)
{
    .customcontainer
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
    }
    .flexinglayout
    {
        display: flex;
        justify-content: end;
    }
}

@media only screen and (min-width: 1500px)
{
    .customcontainer
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 1024px;
    }
    .flexinglayout
    {
        display: flex;
        justify-content: end;
    }
}

input, textarea, select
{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
    border: none;
    outline: none;
    min-width: 400px;
    font-size: 1rem;
}

/* ##################### */
/* ##################### */
/* User HEader  */
/* ##################### */
/* ##################### */

#userheaderbody
{
    background-color: #d9dddc;
}

/* ##################### */
/* ##################### */
/* Admin Header & Side Nav & interactive Layout Wrapper  */
/* ##################### */
/* ##################### */

/* obere Leiste */
#headernav
{
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 800px;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
    position: absolute;
    z-index: 4000;
    background-color: #fff;
}
#headernavflex1
{
    padding: 10px;
}
.fullwid
{
    width: 350px;
}
.minwid
{
    width: 50px;
}
#headernavflex2
{
    width: 100%;
    padding: 10px;
}
#headernavflex3
{
    width: 200px;
    padding: 10px;
    margin-right: 0px;
}

/* Logo Klassen für Sidenav Toogle */
.logosmall
{
    display: none;
}
.logobig
{
    display: block;
    width: 120px;
    height: auto;
}



/* Sienavigation */
#sidenav
{
    position: fixed;
    padding: 10px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 5000;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
}
#sidenavheader
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fullnav
{
    width: 222px;
}
.minnav
{
    width: 20px;
}
.sidenavitem
{
    margin: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d3d3d3;
}
.sidenavitem a
{
    text-decoration: none;
}
.sidenavitem:first-child
{
    margin-top: 20px;
}
.sidenavitem:last-child
{
    border-bottom: none;
}

/* main content  auf den Templates */
#maincontent
{
    width: 100%;
    display: flex;
    background-color: #d9dddc;
}
#mainfooter
{
    width: 100%;
    display: flex;
}
#thecontent
{
    padding-top: 100px;
    padding-bottom: 80px;
    min-height: 80vh;
}
#contentnav
{
    margin-bottom: 80px;
}

.contentnavbutton
{
    font-size: 0.9rem; 
    padding: 8px; 
    margin-top: 20px;
}
.contentnavbutton:hover
{
    color: white;
}

/* ##################### */
/* ##################### */
/* Main Content Admin  */
/* ##################### */
/* ##################### */


#thecontent td, #thecontent th, #thecontent tr, #thecontent table
{
    margin: 0px;
    border-spacing: 0px;
}

#thecontent td, #thecontent th
{
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
}
#thecontent td
{
    border-top: solid 1px #ebedf2;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 8px;
    padding-bottom: 8px;
}
#thecontent table
{
    
    width: 100%;
    min-width: 400px;
    padding: 10px;
    background-color: white;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
    border-radius: 10px;
}

.contentbox
{
    width: 100%;
    padding: 10px;
    padding-bottom: 30px !important;
    border-radius: 10px;
    margin: 10px;
    background-color: white;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
}

.dashboardgrid
{
    display: grid;
    column-gap: 40px;
    row-gap: 5px;
}

@media only screen and (max-width: 820px)
{
    .dashboardgrid
    {
        grid-template-columns: 250px;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1200px)
{
    .dashboardgrid
    {
        grid-template-columns: 300px 300px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1700px)
{
    .dashboardgrid
    {
        grid-template-columns: 300px 300px 300px;
    }
}

@media only screen and (min-width: 1700px)
{
    .dashboardgrid
    {
        grid-template-columns: 300px 300px 300px 300px;
    }
}

.bigcontentbox
{
    width: 100%;
    padding: 20px;
    padding-bottom: 30px !important;
    border-radius: 15px;
    background-color: white;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
}

.iconrow
{
    text-align: center !important;
}



/* ##################### */
/* ##################### */
/* Footer  */
/* ##################### */
/* ##################### */

#mainfooter
{
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 4000;
    background-color: #fff;
    text-align: center;
}


/* ######################
#########################
######### Modals ########
#########################
###################### */


.modalbutton
{
    background-color: transparent;
    border: none;
    color: #555;
    background-color: #fff;
    transition: color 0.5s ease;
    padding: 5px;
    font-size: 2.5rem !important;
    
}


.modalbutton:hover
{
    color: #000;
    border: solid 1px #000;
    cursor: pointer !important;

}

.modalbutton2
{
    background-color: #fff;
    border: none;
    color: #555;
    background-color: #fff;
    transition: color 0.5s ease;
    outline: none;
    font-family: 'Poppins', sans-serif !important;
    transition: color 0.5s ease;
    transition: box-shadow 0.5s ease;
    box-shadow: 0px 0px 9px -1px #5a5a5a;

}


.modalbutton2:hover
{
    color: #000;
    box-shadow: 0px 0px 13px -1px #5a5a5a;
    cursor: pointer !important;
}




@media only screen and (min-width: 768px)
{
    .modalbutton2
    {
        font-size: 1rem !important;
        padding: 10px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 768px)
{
    .modalbutton2
    {
        font-size: 1rem !important;
        padding: 10px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-top: 10px;
    }
}

.modalstyle
{

    position: fixed;
    z-index: 5000;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    bottom: 0px;
    background-color: #fff;
    overflow-y: scroll;
    animation-name: modalopen;
    animation-duration: 0.5s;
}

@keyframes modalopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


.modalcontent p, .modalcontent h2, .modalcontent h3, .modalcontent h4, .modalcontent h5, .modalcontent h6, .modalcontent li
{
    color: #000;
    margin-top: 10px;
}

@media only screen and (min-width: 1480px)
{
    .modalcontent
    {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    .modalcontent p
    {
        font-size: 1rem;
    }
    
    .modalcontent h6
    {
        font-size: 1.2rem;
    }
    
    .modalcontent h5
    {
        font-size: 1.4rem;
    }
    
    .modalcontent h4
    {
        font-size: 1.6rem;
        font-weight: 300;
    }
    
    .modalcontent h3
    {
        font-size: 1.8rem;
        font-weight: 300;
    }
    
    .modalcontent h2
    {
        font-size: 2rem;
        font-weight: 300;
    }
}

@media only screen and (max-width: 1480px)
{
    .modalcontent
    {
        margin-top: 50px;
        margin-bottom: 50px;
        padding-left: 10px;
        padding-right: 30px;
        overflow-x: hidden;

    }
    .modalcontent p, .modalcontent li
    {
        font-size: 1rem;
        padding-right: 50px !important;
    }
    
    .modalcontent h6
    {
        font-size: 1rem;
        padding-right: 50px !important;
    }
    
    .modalcontent h5
    {
        font-size: 1.1rem;
        padding-right: 50px !important;
    }
    
    .modalcontent h4
    {
        font-size: 1.3rem;
        font-weight: 300;
        padding-right: 50px !important;
    }
    
    .modalcontent h3
    {
        font-size: 1.5rem;
        font-weight: 300;
        padding-right: 50px !important;
    }
    
    .modalcontent h2
    {
        font-size: 1.7rem;
        font-weight: 300;
        padding-right: 50px !important;
    }
}

.modalcontent a
{
    color: #009e66;
    transition: color 0.5s ease;
    text-decoration: none;
}

.modalcontent a:hover
{
    color: #333;
}

.modalcontent button
{
    font-size: 1.5rem;
}

.modalnotshow
{
    display: none;
}

.modalshow
{
    display: block;
}

.closemodal
{
    position: fixed;
    top: 0px;
    z-index: 6000;
}





/* ######################
#########################
######### Media Control ########
#########################
###################### */

.foldernotshow
{
    display: none;
}

.foldershow 
{
    display: block;
}

.folderstyle
{
    width: 100%;
    height: 100%;
    background-color: #5a5a5a;
    animation-name: folderopen;
    animation-duration: 0.5s;
}

@keyframes folderopen {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


  #mediaimagegrid
  {
    display: grid;
    grid-template-columns: 150px 150px 150px 150px 150px;
    grid-template-rows: auto;
      justify-content: start;
  }

  @media only screen and (max-width: 520px)
  {
    #mediaimagegrid
    {
      grid-template-columns: 150px 150px;
    }
  }

  @media only screen and (min-width: 520px) and (max-width: 1500px)
  {
    #mediaimagegrid
    {
      grid-template-columns: 150px 150px 150px;
    }
  }

  @media only screen and (min-width: 820px) and (max-width: 1500px)
  {
    #mediaimagegrid
    {
      grid-template-columns: 150px 150px 150px 150px 150px;
    }
  }

  @media only screen and (min-width: 1500px)
  {
    #mediaimagegrid
    {
      grid-template-columns: 150px 150px 150px 150px 150px 150px;
    }
  }


  #mediaimagegrid img
  {
    max-width: 100px;
    width: 100%;
    margin-right: 10px;
  }

  .uploadmediaimage
  {
      background-color: #d9dddc;
      padding: 10px;
      box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%);
  }

  /* order button, ordner beschreibung und lösch button layout flex */
  .folderline
  {
      margin-bottom: 5px;
      background-color: #9a9a9a;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 3px;
      padding-bottom: 3px;
      border-radius: 5px;
      display: flex;
      justify-content: space-between;
  }

  
.my-awesome-dropzone
{
    border: solid 1px #000;
    text-align: center;
}

@media only screen and (max-width: 820px)
{
    .my-awesome-dropzone
    {
        margin-left: 10px;
        margin-right: 10px;
        width: 100%;
        min-height: 75px;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1500px)
{
    .my-awesome-dropzone
    {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        min-height: 100px;
    }
}

@media only screen and (min-width: 1500px)
{
    .my-awesome-dropzone
    {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        min-height: 150px;
    }
}

.dz-button
{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 12px !important;
    margin-top: 40px;
}

.dz-success-mark
{
    display: none !important;
}

.dz-error-mark
{
    display: none !important;
}