/* 
   ================================================================= 
   BILDER 
   ================================================================= 
*/

#cmsLightbox {
   display: none;
   position: fixed;
   z-index: 120;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.7);
}
#cmsLightbox > div {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
}
#cmsLightbox img {
   display: block;
   max-width: 80%;
   max-height: 80%;
}

.cmspic {
   margin: 0; padding: 0;
   border: 1px solid black;
   border-radius: 10px;
   overflow: hidden;
   cursor:pointer;
   display: inline-block;
   text-align: center;
}
.cmspic img {
   max-width: 100%;
}

.cmspiclinks     { float: left;  margin-right: 7px; max-width:30%; }
.cmspicrechts    { float: right; margin-left: 7px;  max-width:30%; }
.cmspiczentriert {               margin:auto;       max-width: 98%; }
.cmspicstandard {}

.cmspicportrait {
   width: 80px; height: 80px;
   border: 1px solid black;
   border-radius: 50%;
   background-repeat: no-repeat;
   background-position: center top;
   background-size: cover;
   float: left;
   margin: 0.2em 0.5em 0.2em 0;
   display: inline-block;
}

/* 
=============================================================
TABELLEN [tab] 
============================================================= 
*/

   .contentTab { margin: 0; }
   .contentTab, .contentTab td, .contentTab th {
      border: 1px dotted #000;
      border-collapse: collapse;
   }
   .contentTab td {
      padding: 0px 7px 0px 7px;
      font-size: 0.8em;
   }
   .contentTab th {
      padding: 0px 7px 0px 7px;
      font-size: 0.8em;
      font-weight: bold;
      text-align: left;
   }

   /* Mangenta Tabelle */
   .contentTab.mangenta, .contentTab.mangenta td, .contentTab.mangenta th {
      border: 1px solid #000;
   }
   .contentTab.mangenta tr:nth-child(odd) td {
      background-color: white;
   }
   .contentTab.mangenta tr:nth-child(1) td {
      background-color: #e5007d;
      font-weight: bold;
      color: white;
   }

   /* Neutrale Graue Tabelle */
   .contentTab.grey, .contentTab.grey td, .contentTab.grey th {
      border: 1px solid #000;
   }
   .contentTab.grey tr:nth-child(odd) td {
      background-color: white;
   }
   .contentTab.grey tr:nth-child(1) td {
      background-color: #525252;
      font-weight: bold;
      color: white;
   }


.sitemapTree {
   max-width: 450px;
}
.sitemapTree ul {
   margin: 0;
   list-style: none;
   padding: 0;
   width: 100%;
}
.sitemapTree li {
   position: relative;
   display: block;
   width: 100%;
   border: 1px solid lightgray;
   border-width: 1px 0 0 0;
}
.sitemapTree i {
   float: right;
   cursor: pointer;
}
.sitemapTree li > div {
   padding: 0.2em 0 0.2em 0;
}
.content .sitemapTree ul {
   margin: 0;
}
.content .sitemapTree li {
   margin: 0;
}
.sitemapOpenAll, .sitemapCloseAll {
   display: inline-block;
   cursor: pointer;
}
.sitemapSearchBox {
   border: 1px solid grey;
   border-radius: 0.3em;
   display: inline-block;
   padding: 0.2em;
}
.sitemapSearchOptions .notice {
   font-size: 0.6em;
   color: grey;
   margin-top: -0.2em;
   margin-left: 0.3em;
}

/* 
=============================================================
MARGINS
============================================================= 
*/

/* Margin-Top */
.mt-1  { margin-top: 1px; }
.mt-2  { margin-top: 2px; }
.mt-3  { margin-top: 3px; }
.mt-4  { margin-top: 4px; }
.mt-5  { margin-top: 5px; }
.mt-6  { margin-top: 6px; }
.mt-7  { margin-top: 7px; }
.mt-8  { margin-top: 8px; }
.mt-9  { margin-top: 9px; }
.mt-10 { margin-top: 10px; }
.mt-11 { margin-top: 11px; }
.mt-12 { margin-top: 12px; }
.mt-13 { margin-top: 13px; }
.mt-14 { margin-top: 14px; }
.mt-15 { margin-top: 15px; }
.mt-16 { margin-top: 16px; }
.mt-17 { margin-top: 17px; }
.mt-18 { margin-top: 18px; }
.mt-19 { margin-top: 19px; }
.mt-20 { margin-top: 20px; }

/* Margin-Right */
.mr-1  { margin-right: 1px; }
.mr-2  { margin-right: 2px; }
.mr-3  { margin-right: 3px; }
.mr-4  { margin-right: 4px; }
.mr-5  { margin-right: 5px; }
.mr-6  { margin-right: 6px; }
.mr-7  { margin-right: 7px; }
.mr-8  { margin-right: 8px; }
.mr-9  { margin-right: 9px; }
.mr-10 { margin-right: 10px; }
.mr-11 { margin-right: 11px; }
.mr-12 { margin-right: 12px; }
.mr-13 { margin-right: 13px; }
.mr-14 { margin-right: 14px; }
.mr-15 { margin-right: 15px; }
.mr-16 { margin-right: 16px; }
.mr-17 { margin-right: 17px; }
.mr-18 { margin-right: 18px; }
.mr-19 { margin-right: 19px; }
.mr-20 { margin-right: 20px; }

/* Margin-Bottom */
.mb-1  { margin-bottom: 1px; }
.mb-2  { margin-bottom: 2px; }
.mb-3  { margin-bottom: 3px; }
.mb-4  { margin-bottom: 4px; }
.mb-5  { margin-bottom: 5px; }
.mb-6  { margin-bottom: 6px; }
.mb-7  { margin-bottom: 7px; }
.mb-8  { margin-bottom: 8px; }
.mb-9  { margin-bottom: 9px; }
.mb-10 { margin-bottom: 10px; }
.mb-11 { margin-bottom: 11px; }
.mb-12 { margin-bottom: 12px; }
.mb-13 { margin-bottom: 13px; }
.mb-14 { margin-bottom: 14px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-17 { margin-bottom: 17px; }
.mb-18 { margin-bottom: 18px; }
.mb-19 { margin-bottom: 19px; }
.mb-20 { margin-bottom: 20px; }

/* Margin-Left */
.ml-1  { margin-left: 1px; }
.ml-2  { margin-left: 2px; }
.ml-3  { margin-left: 3px; }
.ml-4  { margin-left: 4px; }
.ml-5  { margin-left: 5px; }
.ml-6  { margin-left: 6px; }
.ml-7  { margin-left: 7px; }
.ml-8  { margin-left: 8px; }
.ml-9  { margin-left: 9px; }
.ml-10 { margin-left: 10px; }
.ml-11 { margin-left: 11px; }
.ml-12 { margin-left: 12px; }
.ml-13 { margin-left: 13px; }
.ml-14 { margin-left: 14px; }
.ml-15 { margin-left: 15px; }
.ml-16 { margin-left: 16px; }
.ml-17 { margin-left: 17px; }
.ml-18 { margin-left: 18px; }
.ml-19 { margin-left: 19px; }
.ml-20 { margin-left: 20px; }


/* 
=============================================================
ADMIN MENÜ CMS
============================================================= 
*/
.cmsadminmenu {
   position: fixed;
   z-index: 100;
   margin: 0px;
   width: 100%;
   bottom: 0px;
   background-color: rgba(255,255,255,0.6);
   border: 0px solid black;
   border-top-width: 1px;
   padding: 0.2rem 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}
.cmsadminmenu a {
   display: inline-block;
   padding: 0.3rem;
   border: 1px solid #888;
   font-size: 0.8rem;
   background-color: #fff;
   margin: 3px;
   color: black;
   text-decoration: none;
}
.cmsadminmenu a:hover {
   color: red;
}

.cmsloading {
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255,255,255,0.6);
}
.cmsloading > div {
   width: 30%;
   height: 30%;
   background-color: #fff;
   color: black;
   padding: 1em;
   border: 2px solid black;
   border-radius: 0.5em;
}

/* 
=============================================================
FORMULARE & BUTTONS
============================================================= 
*/
.btn {
   margin: 0;
   padding: 0.5em;
   color: black;
   border: 1px solid black;
   border-radius: 0.3em;
   background-color: rgba(255,255,255,0.7);
   font-weight: bold;
   cursor: pointer;
}
.btn:hover {
   background-color: rgba(255,255,255,1);
}
.btn-green {
  background-color: rgba(0,255,0,0.7);
}
.btn-green:hover {
  background-color: rgba(0,255,0,1);
}
.btn-red {
  background-color: rgba(255,50,50,0.7);
}
.btn-red:hover {
  background-color: rgba(255,50,50,1);
}
.btn-trans-white {
   background-color: rgba(255,255,255,0.6);
}
.btn-trans-black {
   background-color: rgba(0,0,0,0.5);
}

/* 
=============================================================
MODAL
============================================================= 
*/

.cmsmodal {
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
   z-index: 100;
}
.cmsmodal > div {
   position: relative;
   display: inline-block;
}
.cmsmodalcontent {
   position: relative;
   margin: 1em;
   background-color: #fff;
   color: black;
   padding: 1em;
   border: 2px solid black;
   border-radius: 0.5em;
   box-shadow: 0 0 3px #000000;
   overflow-y: auto;
}

.cmsmodalclose {
   position: absolute;
   z-index: 101;
   right: 0;
   top: 0;
   margin-top: -0em;
   margin-right: -0em;
   display: inline-block;
   padding: 0.3em;
   font-size: 1.4em;
   border: 2px solid black;
   border-radius: 50%;
   width: 2em;
   height: 2em;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: bold;
   background-color: white;
   cursor: pointer;
}