:root {
            --dark-color: #0a0e0f;
            --light-color: #f9fafb;
            --main-background: #cfcfcf;
            /*--main-background-bild: url('/images/bg-verlauf-start-3.jpg') no-repeat fixed top;*/
            --primary-background: #8ea5bd;
            --primary-textColor: #cfcfcf;
            --secondary-background: #F08700;
            --secondary-textColor: #000000;
            --primary-card-background-header: #424547;
            --accent-background: #FF8500;
            --accent-textColor: #2E7FBC;
            --primary-gradient: linear-gradient(180deg, #344150, #8ea5bd);
            --secondary-gradient: linear-gradient(180deg, #8ea5bd, #344150);
        }
         body {
            background: var(--main-background);                 /* background of your website */
              /*background: var(--main-background-bild);*/
        }

        a {
            color: var(--secondary-background); /* color of your links */
        }

        .container-header {
            background-color: var(--primary-background); /* Solid background of your header */
            background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */
        }


        .mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
            background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */
            color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */
                        border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */
        }

        .btn.btn-primary {
            background-color: var(--primary-background); /* background of your primary buttons */
            border-color: var(--primary-background); /* border color of your primary buttons */
            color: var(--primary-textColor); /* text color of your primary buttons */
        }

        .mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
            background-color: var(--accent-background); /* background of your primary buttons */
            border-color: var(--accent-background); /* border color of your primary buttons */
            color: var(--dark-color); /* text color of your primary buttons */
        }

        .btn.btn-secondary {
            background-color: var(--secondary-background); /* background of your secondary buttons */
            border-color: var(--secondary-background); /* border color of your secondary buttons */
            color: var(--secondary-textColor); /* text color of your secondary buttons */
        }

        .bg-info {
            color: var(--accent-textColor);
            background-color: var(--accent-background) !important;
        }

        .card {
            border: 1px solid var(--primary-background); /* border color of your cards */
                border-radius: 0; /* border radius of your cards */
                background-color: var(--primary-background); /* background color of your cards */
        }

        .card-header {
            background-color: var(--primary-card-background-header); /* background color of your card headers */
            border-bottom: 1px solid var(--primary-background); /* border color of your card headers */
            color: var(--primary-textColor); /* text color of your card headers */
            font-family: "comic sans ms", serif;
            font-size: 16 px;
        }

        .card-body {
            background-color: var(--primary-background); /* background color of your card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */
            color: var(--secondary-textColor); /* text color of your card bodies */
        }

        .card-body a {
            color: var(--secondary-textColor); /* text color of your card body links */
        }

        .card.secondary {
            border: 1px solid var(--secondary-background); /* border color of your secondary cards */
            border-radius: 0; /* border radius of your secondary cards */
            background-color: var(--secondary-background); /* background color of your secondary cards */
        }

        .card-header.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card headers */
            border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */
            color: var(--secondary-textColor); /* text color of your card headers */
        }

        .card-body.secondary {
            background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */
            border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */
            color: var(--secondary-textColor); /* text color of your secondary card bodies */
        }

        .card-body.secondary a {
            color: var(--secondary-textColor); /* text color of your secondary card body links */
        }

        .plg_system_webauthn_login_button svg {
            fill: var(--primary-color); /* color of your webauthn login button icon */
        }

        .footer {
            background-color: var(--secondary-background); /* background color of your footer */
            background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */
            color: var(--secondary-color); /* text color of your footer */
        }

        ::selection {
                background-color: var(--accent-background); /* background color of your text selection */
                        color: var(--dark-color); /* text color of your text selection */
        }

        .metismenu.mod-menu .metismenu-item > ul {
                        background-color: var(--secondary-background); /* background color of your dropdown menu */
                        border: 1px solid var(--secondary-background); /* border color of your dropdown menu */
                color: var(--secondary-color); /* text color of your dropdown menu */
                }

        .metismenu.mod-menu .metismenu-item > ul a {
                color: var(--secondary-color); /* text color of your dropdown menu links */
        }

        .main-top.card.colorpicker-module {
                background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
                color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            border: none;
        }

        .colorpicker-module .card-header, .colorpicker-module .card-body  {
            background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
            color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */
        }

        .article-info {
                background-color: var(--main-background); /* background color of your article info */
                padding: 15px 20px; /* padding of your article info */
        }

        .article-info dd {
                color: var(--main-color); /* text color of your article info */
                }

        .btn.btn-info {
                background-color: var(--primary-background); /* background color of your info buttons */
            border: 1px solid var(--main-background); /* border width, style and color of your info buttons */
                color: var(--primary-color); /* text color of your info buttons */
        }

        .btn-primary .icon-white:before {
                color: var(--primary-textColor); /* text color of your info buttons in primary */
        }

        .btn-secondary .icon-white:before {
            color: var(--secondary-textColor); /* text color of your info buttons in primary */
        }

        .form-control {
                background-color: var(--main-background); /* background color of your form controls */
                border: 1px solid var(--main-color); /* border color of your form controls */
                color: var(--primary-color); /* text color of your form controls */
                border-radius: 0; /* border radius of your form controls */
        }

        label {
                font-weight: bold; /* font weight of your labels */
        }

        /* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */
                h1, .h1 {
                        font-size: clamp(18px, 5vw, 28px);
                }

                /* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */
                h2, .h2 {
                        font-size: clamp(16px, 5vw, 26px);
                }

                /* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */
                h3, .h3 {
                        font-size: clamp(14px, 5vw, 24px);
                }

                /* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */
                h4, .h4 {
                        font-size: clamp(12px, 5vw, 22px);
                }


         .form-control {
         background-color: #ffffff;
         border: 2px solid #525050;
         color: var(--secondary-color);
         }  
/*	
     .tfw-calendar-app {
  background-color: transparent !important;
}
*/          
          footer .grid-child .footermodul {width:100%;margin:0 auto auto 0;}
          
          @media (max-width: 1320px) {
          
           footer .grid-child .footermodul {width:100%;margin:0 auto auto 15px;}}

.container-header .mod-menu {
   justify-content: center;
   color: #ffffff;
   background-color: #22262a;
   padding: 0;
}

.container-header .navbar-toggler {    
  justify-content: center;
   color: #ffffff;
   background-color: #22262a;
   padding: 0;
}

#tinymce {
  padding: 15px;
}

img {
  max-width: 100%;
}

.row {
  background: #ccc;
  outline: 3px #888 solid;
  padding: 15px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

div[class*="col-"] {
  background: #fff;
  outline: 1px #888 dashed;
  box-sizing: border-box;
  padding: 25px;
}

.col-lg-4, .col-lg-6, .col-lg-12 {
  position: relative;
  float: left;
}

.col-lg-12 {
  width: 100%;
}

.col-lg-6 {
  width: 50%;
}

.col-lg-4 {
  width: 33.33333333%;
}

@media only screen and (min-width: 600px){
.container-nav {
padding:0px 0px; !important;justify-content: center !important; /*Menüband center hamburger left*/
}}
.container-header .mod-menu {
  flex-direction: column !important;
}
/*
.container-header .navbar-toggler {
  width: 65px;
  height: 45px;
  background-color: #b94800; 
}
*/

@media screen and (max-width: 600px) {
.container-nav {
    display: initial;
  }
.myleftmenu {
    display: none;
  }
}
@media not screen and (max-width: 600px) {
.container-nav {
    display: none;
  }
.myleftmenu {
    display: initial;
  }
}

.table-scrollable {  
overflow-y: auto;  
width:100%;
}
.panel h3{
padding:10px 25px 10px 10px;
border:1px solid #ebebeb;border-radius:5px;background:#ebebeb
}
.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: #fff;
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}
.form-control {
  background-color: #e1e1e1;
  border: 2px solid #525050;
  color: var(--secondary-color);
}
@media (max-width: 992px) {
  nav.navbar {order: -1;}
}
/* externe Links mit Icon kennzeichnen */
a[href^="http://"]:not([href*="bienes-ferienwohnungen.de"]):after,
a[href^="https://"]:not([href*="bienes-ferienwohnungen.de"]):after {
content: url('/images/ICONS/external-link.png');    padding-left:4px;
}