/* Das ist meine user.css für das Template Cassiopeia, Stil MyCassiopeia */

:root {
  --mygrey: #d6d6d6; /*Light Gray        */
  --mygrey_verylight: #f5f5f5; /*Cultured          */
  --mygrey_light: #e0e0e0; /* Platinum         */
  --mygrey_dark: #adadad; /*Silver Chalice    */
  --mygrey_darker: #333333; /* Jet              */
  --mygrey_verydark: #474747; /*Outer Space       */

  --myblue: #4062bb; /*True Blue         */
  --myblue_lighter: #5877C6; /*TGlaucous        */
  --myblue_light: #e0ecf5; /* Alice blue       */
  --myyellow1: #ffe785; /* Jasmine          */
  --myyellow2: #fff3c2; /* Blond            */
  --myyellow: #fff7d6; /* Cornsilk         */
  --myyellow3: #ffde5c; /* Mustard          */
  --mygreen: #0ab40a; /* Yellow Green Color Wheel */
  --mywhite: #ffffff;

  --cassiopeia-color-primary: var(--mygrey_verylight);
  --cassiopeia-color-link: var(--myblue);
  --cassiopeia-color-hover: var(--mygreen);

  --body-font-size: 1rem;
  --body-font-weight: 400;
  --body-line-height: 1.5;
  --body-color: var(--mygrey_verydark);
  --body-bg: var(--mygrey_verylight);

  --info-rgb: 153, 153, 153;
}

/* Grid-Spaltenabstände verkleinern */
.site-grid {
    grid-gap: 0 1em !important;
}


div.grid-child.container-component   main {
    margin-top: 0.5em;
}


@media (min-width: 576px) {
 body.wrapper-fluid .site-grid {
  grid-template-columns: [full-start] minmax(0,0.25em) [main-start] repeat(4,minmax(0,25%)) [main-end] 0.25em [full-end]
}
}

/* .grid-child.container-component { */
    /* margin-left:1em; */
     /* margin-right:1em; */
/* } */

/* .grid-child.container-sidebar-right { */
/* margin-right:1em!important;; */
/* } */


/* H1-H6 etwas verkleinern */
h1,
.h1 {
  font-size: calc(1.325rem + 0.9vw);
  text-decoration: underline var(--mygrey_dark) solid;
  margin-bottom: 0.9rem;
}
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2rem;
  }
}

h2,
.h2 {
  font-size: calc(1.3rem + 0.6vw);
  text-decoration: underline var(--mygrey_dark) solid;
  margin-bottom: 0.9rem;
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 1.75rem;
  }
}

h3,
.h3 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.5rem;
  }
}

h4,
.h4 {
  font-size: 1.25rem;
}

h5,
.h5 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

h6,
.h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 0.5rem;
}

.h11 {
    font-size: 0.8rem;
}

/* H1 unterstreichen */
/* .h1, h1 { */
/* text-decoration:underline; */
/* } */

/* Zeilenabstände */
/* h1, .h1 { */
/* margin-bottom: 0.9rem; */
/* } */

/***  Header anpassen */
.header {
  background-image: none;
}

.container-header .grid-child {
  padding: 10px 0 10px 0;
  /* border: 1px solid var(--mygreen);   */
}

.container-header .navbar-brand {
  padding: 0;
  /* border: 1px solid var(--mygreen);   */
}

.container-header .navbar-brand img {
  padding: 0;
  border: 2px solid var(--mygreen);
}


/*** Hauptseite anpassen */
.container-component {
  background-color: var(--myyellow);
  border: 1px solid var(--myblue);
  padding: 0px 10px 0px 10px;
}

dt.article-info-term + dd.modified {
    display:none;
}


.myheader {
  width: 100%;
}

.item-page {
  /* margin: 0px 10px 0px 10px;  */
  /* border: 1px solid var(--myblue);           */
}

/*** Statusmeldung   */
.bg-info {
  --bg-opacity: 1;
  background-color: rgba(var(--info-rgb), var(--bg-opacity)) !important;
}

.footer {
  color: var(--mygrey_verydark);
  background-color: var(--mygrey_verylight);
  background-image: initial;
  /* border: 1px solid var(--myblue);  */
  /* width:100%; */
}

.sidebar-right.card {
   border: 1px solid var(--myblue); 
   margin-top: 0 !important;
   margin-bottom: 0.5em;
}

.container-bottom-a {
  width: 100%;
  /* height:40px;    */
  margin-top: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--myblue);
}

.bottom-a.card {
  margin-top: 0px;
  margin-bottom: 00px;
}

.bottom-a .card-body {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: var(--mygrey_light);
}

.bottom-a .card-body {
  padding-top: 0px;
  padding-bottom: 10px;
}

.myversion {
  font-size: 12px;
  float: left;
}

.myversion ~ p {
  margin: 0px;
  line-height: 12px;
}

.myjversion {
  font-size: 12px;
  float: right;
}

/***  MaxiMenu/MobileMenuCK */
.mobilemenuck {
  text-shadow: initial;
}

.maximenuckh {
  width: 100%;
  border: 1px solid var(--mygreen);
  border-style: solid solid none;
}

div.maximenuckh.ltr {
    line-height: 28px !important; 
}


div.maximenuckh ul.maximenuck  li  {
   margin: 0px 10px 0 0!important;
   }   
    
.maximenuiconck {
  margin-top: 0px !important;
  margin-right: 4px;
}

/* Populärer Tags-Modul */
.mod-tagspopular ul {
  padding-left: 0rem;
}

/***  Weblinks */
.categories-list {
  margin: 0px 0px 0px 10px;
}

.com-content-categories__item {
  margin: 10px;
  border-bottom: 1px dotted var(--body-color);
}

.com-content-categories__item a {
  color: var(--body-color);
  text-decoration-line: initial;
}

.com-content-categories__item a:hover {
  color: var(--mygreen);
  text-decoration-line: underline;
}

:not(.com-content-categories__children)
  .com-content-categories__item
  a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f00b";
  color: var(--myblue);
}

.com-content-categories__children .com-content-categories__item a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f03a";
  color: var(--myblue);
}

.com-weblinks-category__children a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f03a";
  color: var(--myblue);
}

.com-weblinks-category__items .list-title.list-group-item {
  /* color: var(--body-color)!important; */
  background-color: var(--myyellow1);
  padding: 0.5rem 1rem 0.25rem 1rem;
}

.com-weblinks-category__items .list-title.list-group-item a {
  color: var(--body-color);
  text-decoration-line: initial;
}

.com-weblinks-category__items .list-title.list-group-item a:hover {
  color: var(--mygreen);
}

.com-weblinks-category__children .list-group-item {
  color: var(--body-color);
  background-color: var(--myyellow1);
  /* text-decoration-line: initial; */
}

.com-weblinks-category__children .list-group-item a {
  color: var(--body-color);
  background-color: var(--myyellow1);
  text-decoration-line: initial;
}

.com-weblinks-category__children .list-group-item a:hover {
  color: var(--mygreen);
}

.com-weblinks-category__children .list-group-item a:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
  content: "\f03a";
  color: var(--myblue);
}

.weblink-category {
  margin: 0px 0px 0px 10px;
}

li.list-group p {
  margin-bottom: 0px;
}

.weblink-category h1:first-of-type {
  display: none !important;
}

.weblink-category h2:first-of-type:before {
  content: "Links in Kategorie: ";
}

/* .com-weblinks-category__items .list-title.list-group-item a:before{ */
/* font-family: Font Awesome\ 5 Free; */
/* font-weight: 700; */
/* content: "\f35d";  */
/* color:var(--myblue); */
/* margin-right:4px; */
/* } */

/* Tags als Cloud anzeigen */
div.tagspopular li {
  display: inline;
  /* padding: 5px; */
  /* color: #3B5998; */
  background-color: #f0f0f0;
  /* margin: 2px; */
}

/* Blog-Item-Layout */

@supports (display: grid) {
  .blog-items {
    grid-row-gap: 0.3em !important;
  }
}

div.com-content-category-blog__items.blog-items {
  margin: 0 0 2px !important;
}

div.com-content-category-blog__items.blog-items.items-leading {
  margin-bottom: 6px !important;
}

div.com-content-category-blog__item.blog-item {
  border: 2px solid var(--myblue);
  border-width: 2px 0px;
  background-color: var(--myyellow1);
}

div.com-content-category-blog__item.blog-item .item-content {
  margin-top: -6px;
  padding: 0.25rem 1rem 0.25rem 1rem;
}

dt.article-info-term {
    display:none;
 }
 
 dd.create {
   margin-top: 16px;
   margin-bottom: 4px;
   font-size: smaller;
}

dd.modified {
  font-size: smaller;
  margin-bottom: 4px;
}

div.page-header h2 {
  margin-top: 24px;
}

/* .recipe_image   { */
/* width:300px !important;; */
/* margin-right: 30px; */
/* float:left; */
/* } */

/* .link_recipe_image  { */
/* margin-left: 20px; */
/* width:100px !important; */
/* display: contents!important;   */
/* } */

/* .link_recipe_image:before { */
/* content: "Zum Rezept";   */
/* } */

/* MusicFavs-Videos und Playlists */

#mufavs_pHere,
#mufavs_pFromMuFavs {
  color: var(--mygrey_verydark);
  font-size: 1.2em;
  font-weight: bold;
  /* line-height:0.6em; */
}

.mufavs_topbuttons {
  margin-right: 25px;
  margin-bottom: 10px;
  /* padding: 10px 20px; */
  width:120px;
  /* // font-family: "Finger Paint"; */
  /* font-family: "Segoe Print"; */
  font-size: 1em;
  font-weight: bold ;
  font-style: italic;
  color: var(--mygrey_verydark);
  background-color: var(--mygrey_light);
}

.mufavs_topbuttons_active {
  margin-right: 25px;
  margin-bottom: 10px;
   width:120px;
  /* // font-family: "Finger Paint"; */
  /* font-family: "Segoe Print"; */
  font-size: 1em;
  font-weight: bold ;
  font-style: italic;
  color: var(--mygrey_verylight);
    background-color: var(--mygreen);
}

#mufavs_ytplayer div {
    font-size: 1.8em; 
    color: var(--myblue) !important;
    background-color:var(--mygrey_verylight);
     /* font-weight: bold ; */
  /* font-style: italic; */
  line-height: 2 !important;
  padding:0;
}

#mufavs_ytplayer {
     background-color:var(--myyellow); 
}

#mufavs_VersionDate {
 font-size: 0.7em; 
 font-weight: normal;
 /* margin-left: 20px;  */
 color: var(--mygrey_darker);
}
 
#favstable td {
  padding: 0.5em 0em;
  width: 20%;
}

.divafteru2b {
  padding-top: 0.3em;
  width: 120px;
}

.div4post {
  line-height: 20px;
  /* margin-bottom: 0.8em; */
  margin-bottom: 0.6em;
  font-family: arial, helvetica, sans-serif;
  font-size: 0.7em;
  font-weight: bold;
  background-color: #4a67b7;
}

.a4post {
  color: #ffffff;
  text-decoration: none;
  margin-right: 5px;
}

.div4title {
  top: 1.5em;
  left: 1em;
  font-size: 0.8em;
  font-weight: bold;
  line-height: 1.1em;
  width: 120px;
  height: 4.5em;
  color: #4a67b7;
  background-color: #e6e6e6;
  padding: 0.2em;
}

.div4artist {
  top: 1.5em;
  left: 1em;
  font-size: 0.8em;
  font-weight: bold;
  line-height: 1.1em;
  width: 120px;
  height: 3.4em;
  color: #4a67b7;
  background-color: #e6e6e6;
  padding: 0.2em;
}

.div4posts {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  width: 120px;
  color: #4a67b7;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1em;
}

.arrows1 {
  margin-left: 0;
  margin-bottom: 10px;
  font-size: 1em;
  font-weight: bold;
}

.arrows2 {
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 1em;
  font-weight: bold;
}

/* JooDb-Forms */
#fs_songname_like {
    width:40%;
    display:inline;
}

#fs_artist_like {
    width:40%;
    display:inline;
}
   
.joodb.database-list table th {
  background-color: var(--myblue_lighter) ;
}
    
.joodb.database-list table tr  {       
  line-height: 1.6em;
}

div.joodb.database-list table tr.odd td{
  background-color: var(--myyellow1); 
  border-bottom: 1px solid var(--mygrey_dark) ;          
}
  
 div.joodb.database-list table tr.even td{
  background-color: var(--mygrey_light); 
  border-bottom: 1px solid var(--mygrey_dark) ;
}


/* FlexiContact */
.fc_page {
    margin-left:10px;
    margin-right:10px;
     width:80%;
}

div.fc_line label.fc_left          {
    text-align:left !important;
    width:20%!important;
    }

.fc_image_text {
    font-weight: bold !important;
}

.fc_error {
    color:red !important;
    font-weight: bold !important;
}
  
  /* GTranslate */
  
div.gt_switcher.notranslate {
    margin-top:-40px;
    opacity: 0.7;
}

/* Darstellung Rezept   */
.recipe_leftdata {
    float: left; 
    width: 250px; 
    padding: 0px 6px; 
    margin-right: 10px;
}

.recipe_rightdata {
   float: left; 
   width: 70%; 
   padding: 0px 6px;
}

.recipe_emptyline {
   clear: left;
   margin:0px;
   line-height:12px;
}

.recipe_ingredients_left {
  float: left;
  width: 250px;  
  padding: 6px; 
  margin-bottom: 10px; 
  margin-right: 10px; 
  border: thin solid var(--myblue);"
}

.recipe_steps_right {
  float: left;
  width: 70%;  
  border: thin solid var(--myblue); 
  padding: 6px;
}