/*!
CSS      Customer relevant CSS
Version  1.0
Date     31.08.2021
(C) 	 2021 / www.studio50.ch
*/
/*
    Global base styles for SimCM3 sites
    Font definition is in the domain specific class
    03.04.2021 V3.0

    Regions:
    #Reset and Base
    #Tag font and bases
    #grid Tables
    #div Tables
    #Regular Table
?    #List Design                   >> nur AfE , kann in SimCM3 gezügelt werden oder sonst was
?    #Form Tags
?    #Success, Info and Error Messages
?    #MessageBoxes and ListBoxes
?    #Special Snippets (between standard and module)
?        #Toggle Buttons Snippet
?    #Modules
?        #Image Galery Type 1
?        #Events
?        #Sitemap 
?        #Date Picker
?        #MM Audio Design
?        #MM Video Design
?        #Downloads
?        #Guestbook
?        #Blog Flyers and Posters
?        #Blog Images Download
?        #Blog Press Articles
?        #Blog (standard Blog)
    #global behavior handler
*/

:root {
    /* 
        Colors
        Syntax:     gm3             for GM3 Base Definition
                    color           the color name
                    light / dark    for a lighter or darker version of the standard

        Shadow definition
            We do not use hsl on shadows, but rgba, as it is blach with transparency only:
            box-shadow: 6px 6px 2px rgba(0,0,0,0.2);

        Base Colors
        -------------------------------------------------------------------
        gm3_white_font      #F8F8F8     248,248,248     white font color
        gm3_black_font      #212121     033,033,033     black font color

        Blue
        -------------------------------------------------------------------
        gm3_xxx      #06466C     006,070,108     xxx
        gm3_xxx      #004B96     000,075,150     xxx
        gm3_xxx      #1570a6     021,112,166     xxx
        gm3_xxx      #3b8edf     059,142,223     xxx
        gm3_xxx      #6b9dc9     107,157,201     xxx
        gm3_xxx      #85c6ff     133,198,255     xxx
        gm3_xxx      #93C8E7     147,200,231     xxx

        Green
        -------------------------------------------------------------------
        gm3_xxx      #065713     006,087,019     xxx
        gm3_xxx      #15a72b     021,167,043     xxx
        gm3_xxx      #AFE0B6     175,224,182     xxx

        Red
        -------------------------------------------------------------------
        gm3_xxx      #540406     084,004,006     xxx
        gm3_xxx      #990000     153,000,000     xxx
        gm3_xxx      #a71518     167,021,024     xxx
        gm3_xxx      #E07B7B     224,123,123     xxx

        Orange
        -------------------------------------------------------------------
        gm3_xxx      #774106     119,065,006     xxx
        gm3_xxx      #DE9C23     222,156,035     xxx
        gm3_xxx      #FCC171     252,193,113     xxx

        Gray
        -------------------------------------------------------------------
        gm3_xxx      #303030     048,048,048     xxx
        gm3_xxx      #424242     066,066,066     xxx
        gm3_xxx      #555555     085,085,085     xxx
        gm3_xxx      #808080     128,128,128     xxx
        gm3_xxx      #999999     153,153,153     xxx
        gm3_xxx      #b7b7b7     183,183,183     xxx
        gm3_xxx      #c0c0c0     192,192,192     xxx
        gm3_xxx      #cccccc     204,204,204     xxx
        gm3_xxx      #cfcfcf     207,207,207     xxx
        gm3_xxx      #e2e2e2     226,226,226     xxx
        gm3_xxx      #e6e6e6     230,230,230     xxx
        gm3_xxx      #ebebeb     235,235,235     xxx
        gm3_xxx      #f0f0f0     240,240,240     xxx
        gm3_xxx      #f5f5f5     245,245,245     xxx

        
    */
    /* Colors dark standard light */
    /* dark colors (-15L to standard) */
    --gm3_green_dark: #0D641A;
    --gm3_orange_dark: #AF691D;
    --gm3_red_dark: #640D0E;
    --gm3_blue_dark: #0D4364;
    /* Standard */
    --gm3_green: #15A72B;
    --gm3_orange: #DF903B;
    --gm3_red: #A71518;
    --gm3_blue: #1570A6;
    /* light colors (used on JS message boxes BG) */
    --gm3_green_light: #AFE0B6;
    --gm3_orange_light: #FCC171;
    --gm3_red_light: #E07B7B;
    --gm3_blue_light: #93C8E7;
    /* 

        NEU und geprüft:

    */
    /* Base Colors */
    --gm3_white: #FFFFFF; /* white #FFFFFF = hsl(210, 100%, 100%), rgb(255,255,255)    defined to shwitch light dark mode easily */
    --gm3_black: #000000; /* black #000000 = hsl(0, 0%, 0%), rgb(0, 0, 0)    defined to shwitch light dark mode easily */
    --gm3_white_font: #F8F8F8; /* dirty white #F8F8F8 = hsl(0, 0%, 97%), rgb(248,248,248)   font on dark mode */
    --gm3_black_font: #212121; /* dirty black #212121 = hsl(0, 0%, 13%), rgb(33, 33, 33)    font on light mode */
    /* Base SimCM3 Colors - JS Messages,  */
    --gm3_red_dark: hsl(359, 78%, 27%); /* red dark */
    --gm3_red: hsl(359, 78%, 37%); /*  red     #a71518      hsl(359, 78%, 37%)      rgb(167, 21, 24)     error icon color    */
    --gm3_red_light: hsl(359, 78%, 77%); /* red light */
    --gm3_green_dark: hsl(129, 78%, 27%); /* green dark */
    --gm3_green: hsl(129, 78%, 37%); /*  green   #15a72b        hsl(129, 78%, 37%)      rgb(21, 167, 43)     success icon color  */
    --gm3_green_light: hsl(129, 78%, 87%); /* green light */
    --gm3_orange_dark: hsl(31, 72%, 35%); /* orange dark */
    --gm3_orange: hsl(31, 72%, 55%); /*  orange  #DF903B = hsl(31,72%,55%), rgb(223, 144, 59)     warning icon color  */
    --gm3_orange_light: hsl(31, 72%, 88%); /* orange light */
    --gm3_blue_dark: hsl(202, 78%, 27%); /* blue dark */
    --gm3_blue: hsl(202, 78%, 37%); /*  blue    #1570a6     hsl(202, 78%, 37%)      rgb(21, 112, 166)     info icon color     */
    --gm3_blue_light: hsl(202, 78%, 77%); /* blue light */
    /*<span>#6b9dc9<br>hsl(208, 47%, 60%)<br>rgb(107,157,201)*/
    /* Gray tones */
    --gm3_gray_245: hsl(0, 0%, 96%); /* gray 245 #f5f5f5    hsl(0, 0%, 96%)     rgb(245,245,245) */
    --gm3_gray_240: hsl(0, 0%, 94%); /* gray 240 #f0f0f0    hsl(0, 0%, 94%)     rgb(240,240,240) */
    --gm3_gray_235: hsl(0, 0%, 92%); /* gray 235 #ebebeb    hsl(0, 0%, 92%)     rgb(235,235,235) */
    --gm3_gray_204: hsl(0, 0%, 80%); /* gray 204 #cccccc    hsl(0, 0%, 80%)     rgb(204,204,204) */
    --gm3_gray_192: hsl(0, 0%, 75%); /* gray 192 #c0c0c0    hsl(0, 0%, 75%)     rgb(192,192,192) */
    --gm3_gray_153: hsl(0, 0%, 60%); /* gray 153 #999999    hsl(0, 0%, 60%)     rgb(153,153,153) */
    --gm3_gray_128: hsl(0, 0%, 50%); /* gray 128 #808080    hsl(0, 0%, 50%)     rgb(128,128,128) */ /* nur border input und zoom bg - der hat aber alpha */
    --gm3_gray_51: hsl(0, 0%, 20%); /* gray 51  #333333    hsl(0, 0%, 20%)     rgb(051,051,051) */
    /*  */
}

/*
    #################################################################################################################################################
    #################################################################################################################################################
    #################################################################################################################################################
    #################################################################################################################################################
    #################################################################################################################################################
    #################################################################################################################################################

    ToDo:

    / *???* / >> anschauen wo es das braucht

    #List Design
    ------------
    GrossKleinSchreibung definieren, und doppelten Eintrag in Files und DB korrigieren.
    .List       sind scheinbar vom AFE
    .ListHov    isch nu ei mol drinne
    .ListSelected
    .list
    .title       in files nur 1 gefundne (ein Test), in DB keiner direkt als class definiert




    List Darstellung
    Header BG
        BG + Color ganze Liste                      dunkler, font black             1
        BG + Color item (haben aber BG Liste)       fast weiss, font black          2
        BG + Color Hover item                       heller als titel, font black    3
        BG + Color Selected                         color?                          4

    Elemente
        TAG
            Inputs, Text, Check, Radio
            Buttons
        Design
            Tabellen (div, grid)
            Daten Listen
            Daten Tabellen divTable?

    Allgemein:
        Farbe definieren für "selected Item"

*/

/* 
    #Reset and Base
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/
html, body {
    /**/
}

div, body {
    margin: 0px;
    padding: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%; /* default browser font size - 16px */
}

/* When admin chooses to blend in the content, we set the page parts to hidden until they are visible in the browser view */
.BlendIn {
    visibility: hidden;
}

/* 
    #Tag font and bases
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/
p, div {
    line-height: 1.6; /* set no unit so it calculates the line height accurate */
}

li {
    line-height: 1.5em; /* bit more space between the items */
}

.hand {
    cursor: pointer;
}

input[type='checkbox'] {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 0px;
    margin-right: 3px;
}

label {
    cursor: pointer;
}


/* #Alignments */

.right {
    text-align: right;
}

.center {
    text-align: center;
}


/* Readmmore functionallity */
.readmorelink {
    /**/
}

.readmoretext * {
    /**/
}

/* Icons in text */
.icontotext_small {
    width: 16px;
    height: auto;
}

.icontotext_medium {
    width: 24px;
    height: auto;
}

.icontotext_large {
    width: 32px;
    height: auto;
}

/*

    #href link and after icons

    mark _blank links so the user sees a new tab will be opened 
       5 1 blank sheet black
     -15 2 blank sheet color
     -35 3 written sheet black
     -55 4 written color
     -75 5 newtab black
     -95 6 newtab color
    -115 7 mail black
    -135 8 mail color

*/
a {
    text-decoration: none;
    color: var(--gm3_blue);
}

    a:hover {
        color: var(--gm3_blue_light);
    }

    /* mark _blank href */
    a[target="_blank"] {
    }

        a[target="_blank"]:after {
            content: '';
            display: inline-block;
            height: 1rem;
            top: 0rem;
            width: 1rem;
            background: url(/images/icons/a.href.png) right -75px no-repeat;
        }
    /* mark mailto href */
    a[href^="mailto:"]:after {
        content: '';
        display: inline-block;
        height: 1rem;
        top: 0rem;
        width: 1rem;
        background: url(/images/icons/a.href.png) right -115px no-repeat;
    }

    /* clear _blank for large href buttons */
    a.a-no-blank-icon[target="_blank"]:after {
        content: none;
    }

    a.a-no-blank-icon[href^="mailto:"]:after {
        content: none;
    }


.a-ref-1:after, .a-ref-2:after, .a-ref-3:after, .a-ref-4:after, .a-ref-5:after, .a-ref-6:after, .a-ref-7:after, .a-ref-8:after {
    content: '';
    display: inline-block;
    height: 1rem;
    top: 0rem;
    width: 1rem;
}

.a-ref-1 {
    /* blank sheet black */
    background: url(/images/icons/a.href.png) right 5px no-repeat;
}

.a-ref-2 {
    /* blank sheet color  */
    background: url(/images/icons/a.href.png) right -15px no-repeat;
}

.a-ref-3 {
    /* written sheet black */
    background: url(/images/icons/a.href.png) right -35px no-repeat;
}

.a-ref-4 {
    /* written color */
    background: url(/images/icons/a.href.png) right -55px no-repeat;
}

.a-ref-5 {
    /* newtab black */
    background: url(/images/icons/a.href.png) right -75px no-repeat;
}

.a-ref-6 {
    /* newtab color */
    background: url(/images/icons/a.href.png) right -95px no-repeat;
}

.a-ref-7 {
    /* mail black */
    background: url(/images/icons/a.href.png) right -115px no-repeat;
}

.a-ref-8 {
    /* mail color */
    background: url(/images/icons/a.href.png) right -135px no-repeat;
}

/* no underline for a.href */
a.nou {
    text-decoration: none;
}

/* style for clickable menu history */
.menuURLhrefItems {
    color: var(--gm3_green_dark);
}
/* 
    #grid Tables 
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/
.gridTable {
    display: grid;
    grid-gap: 20px 30px; /* rows gap, cols gap */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    background-color: var(--gm3_gray_245);
}

.grid_item {
    padding: 10px;
    background-color: var(--gm3_white);
}

/* 
    #div Tables 
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* margins in forms based on divtables - use for overwrites */
.forms > .divTR > .divTD {
    padding: 6px;
}

.divTable {
    width: 100%;
    display: table;
    border-collapse: collapse;
    border: 0px none;
}

.divTR {
    display: table-row;
}

.divTRhov:hover {
    background-color: var(--gm3_gray_240);
}

.divTD, .divTDHeader, .divTDhov {
    display: table-cell;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
}

.divTDHeader {
    font-weight: bold;
    background-color: var(--gm3_gray_240);
    padding-left: 10px;
}

.divTDhov:hover {
    background-color: var(--gm3_gray_240);
}

.divTDright {
    text-align: right;
}


/* 
    #Regular Table
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/
table {
    /* the old tag defs are now in the style */
    border: 0px none;
    border-spacing: 0px;
    border-collapse: separate;
}


/* 
    #List Design
    -------------------------------------------------------------------------------------------------------------------------------------------------
    Check !!!
*/
.List {
    border-bottom: 1px solid var(--gm3_gray_192);
}

.ListHov:hover {
    background-color: var(--gm3_gray_235); /* isch nu ei mol drinne */
}

.ListSelected {
    background-color: #fff;
    color: #fff;
}

.list {
    border-bottom: 1px solid var(--gm3_gray_192);
}

/*???*/
/*in files nur 1 gefundne (ein Test), in DB keiner direkt als class definiert */
.title {
    font-weight: bold;
    background-color: var(--gm3_gray_240);
}

/*
    #Form Tags
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/


/* Input types mandatory / not mandatory */
.tbflat, .tbmust, .taflat, .tamust, .cbflat, .cbmust {
    font-size: 1em;
    border: 1px solid var(--gm3_gray_128);
    height: 28px;
    width: 80%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.tbmust, .tamust, .cbmust {
    border-color: var(--gm3_red);
}

    .tbmust:focus, .tamust:focus, .tbflat:focus, .cbflat {
        background-color: var(--gm3_gray_245);
    }

.taflat, .tamust {
    height: 120px;
}

.cbflat, .cbmust {
    cursor: pointer;
}

/* radio */
.rbmust {
    width: 20px;
    border: 0px;
    cursor: pointer;
}
/* file */
.fuflat, .fumust {
    height: 28px;
    width: 400px;
}

.btn, .btnDis {
    font-size: 1em;
    background-color: var(--gm3_blue);
    border-width: 0px;
    border-style: none;
    color: var(--gm3_white_font);
    cursor: pointer;
    width: 100%;
    height: 40px;
    text-align: center;
}

    .btn:hover {
        filter: brightness(1.2);
    }

.btnDis {
    background-color: var(--gm3_gray_192);
    cursor: default;
}

/* Additionals to text boxes */
.lensSearch {
    background: transparent url('/images/cm3/Icon_Find_0.svg') right center no-repeat;
}

    .lensSearch::-ms-clear {
        width: 0;
        height: 0;
    }

.lensFilter {
    background: transparent url('/images/cm3/Icon_Filter_1.svg') right center no-repeat;
}

    .lensFilter::-ms-clear {
        width: 0;
        height: 0;
    }

.senseAutomated {
    background: transparent url('/images/cm3/Auto_1.svg') right center no-repeat;
}

    .senseAutomated::-ms-clear {
        width: 0;
        height: 0;
    }


.KeyAutomated {
    background: transparent url('/images/cm3/Auto_2.svg') right center no-repeat;
}

    .KeyAutomated::-ms-clear {
        width: 0;
        height: 0;
    }

.calendarAutomated {
    background: transparent url('/images/cm3/Auto_3.svg') right center no-repeat;
}

    .calendarAutomated::-ms-clear {
        width: 0;
        height: 0;
    }


/* Button I'm not a robot for forms and other inputs */
.secRoboCheck {
    border: 1px solid var(--gm3_gray_192);
    width: 230px;
    height: 48px;
    overflow: visible;
    padding: 6px;
    cursor: pointer;
}

    .secRoboCheck:hover {
        background-color: var(--gm3_gray_240);
    }

.secRoboText {
    height: 100%;
    width: 80%;
    float: right;
    line-height: 36px;
}

.secRoboNoHand {
    cursor: default;
}

    .secRoboNoHand:hover {
        background-color: transparent;
    }

/* 
    #Success, Info and Error Messages
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* floating temporary Message */
.gm3_tmpMessage {
    position: fixed;
    z-index: 99999;
    top: 20px;
    width: 60%;
    left: 20%;
    right: 20%;
}

/* Messages as text only */
.success, .warning, .error, .default, .successText, .warningText, .errorText, .defaultText {
    font-size: 0.8em;
}

.success, .successText {
    color: var(--gm3_green);
}

.warning, .warningText {
    color: var(--gm3_orange);
}

.error, .errorText {
    color: var(--gm3_red);
}

.default, .defaultText {
    color: var(--gm3_black_font);
}

/* Messages as box with optional border */
.successBox, .warnBox, .errorBox, .infoBox {
    display: block;
    margin: 0px;
    margin-bottom: 5px;
    padding: 18px;
    padding-left: 40px !important;
    color: var(--gm3_white_font);
    border: 0px none;
    background-position: 2px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position-x: 10px;
}

.successBox {
    background-color: var(--gm3_green_light);
    color: var(--gm3_green_dark);
    background-image: url(/images/cm3/errorBox_Ok_1.svg);
}

.successBorder {
    border: 1px solid var(--gm3_green_dark);
}

.warnBox {
    background-color: var(--gm3_orange_light);
    color: var(--gm3_orange_dark);
    background-image: url(/images/cm3/errorBox_Warn_1.svg);
}

.warnBorder {
    border: 1px solid var(--gm3_orange_dark);
}

.errorBox {
    background-color: var(--gm3_red_light);
    color: var(--gm3_red_dark);
    background-image: url(/images/cm3/errorBox_Stop_1.svg);
}

.errorBorder {
    border: 1px solid var(--gm3_red_dark);
}

.infoBox {
    background-color: var(--gm3_blue_light);
    color: var(--gm3_blue_dark);
    background-image: url(/images/cm3/errorBox_Info_1.svg);
}

.infoBorder {
    border: 1px solid var(--gm3_blue_dark);
}


/*
    #MessageBoxes and ListBoxes
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/

/* MessageBox Design */

.gm3_MessageBoxModal {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: URL(/images/rgba/white_70.png);
    z-index: 999999;
    cursor: not-allowed;
}

.gm3_MessageBox {
    z-index: 999999;
    position: absolute;
    min-height: 40px;
    height: auto !important;
    width: 400px;
    border: 1px solid var(--gm3_gray_128);
    line-height: 22px;
    background-repeat: no-repeat;
    background-position: center left;
    background-position: 30px;
    background-color: var(--gm3_white);
    cursor: default;
}

.gm3_MessageBoxShadow {
    -moz-box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 6px 2px 2px rgba(0,0,0,0.2);
    box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
    background-color: var(--gm3_white);
}

.gm3_MessageBoxTitleContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-color: var(--gm3_gray_235);
    border: 0px none;
}

.gm3_MessageBoxTitle {
    width: auto;
    height: 32px;
    line-height: 36px;
    font-weight: bold;
    font-size: 0.9em;
    float: left;
    border: 0px none;
    padding: 0px 0px 0px 14px;
}

.gm3_MessageBoxCNT {
    width: 40px;
    border: 0px none;
    padding: 4px 4px 0px 0px;
    font-weight: normal;
    font-size: 0.9em;
    height: 32px;
    text-align: right;
    float: right;
    display: block;
}

.gm3_MessageBoxText {
    padding: 50px 30px 30px 85px;
}

.gm3_MessageBoxData {
    height: 330px;
    width: 578px;
    line-height: 22px;
    border: 0px none;
    margin: 50px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
    overflow: scroll;
    overflow-x: hidden;
}

.gm3_MessageBoxCountDown {
    position: absolute;
    color: var(--gm3_gray_128);
    border: 0px none;
    top: 4px;
    left: 396px;
}

.gm3_MessageBoxButtonContainer {
    width: auto;
    text-align: center;
    margin: 20px 0px 14px 0px;
}

.gm3_MessageBoxButton {
    font-size: 1em;
    height: 35px;
    min-width: 120px;
    font-weight: normal;
    background-color: var(--gm3_blue);
    border: 0px none;
    color: var(--gm3_white);
    cursor: pointer;
}

    .gm3_MessageBoxButton:hover {
        filter: brightness(1.2);
    }


.gm3_ListBox {
    height: 400px;
    width: 600px;
}




/*
    #Special Snippets (between standard and module)
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/

/*
    #Toggle Buttons Snippet
*/
table.togglebutton_container {
    width: 100%;
    border: 0px none;
    border-spacing: 0px;
    border-collapse: separate;
}

    table.togglebutton_container tr td {
        width: 25%; /* Overwrites: set the value 100 divided by the amount of buttons */
        padding: 2px;
    }

.togglebutton {
    width: 100%;
    background-color: var(--gray_light);
    color: var(--black_font);
}

    .togglebutton:hover {
        background-color: var(--red_light);
        color: var(--white_font);
    }

.togglebutton_set {
    background-color: var(--red_light);
    color: var(--white_font);
    cursor: default;
}

/* Toggle buttons Radio and Checkbox Version */
.togglebutton_container tr td label, .togglebuttonSingle {
    display: block;
    line-height: 40px; /* Overwrites: to center on this native elements, set the pixel here if the height changes */
}

.togglebutton_container tr td input[type="radio"], .togglebutton_container tr td input[type="checkbox"] {
    display: none; /* Important. Hide the radio circle */
}

    .togglebutton_container tr td input[type="radio"]:checked + label,
    .togglebutton_container tr td input[type="checkbox"]:checked + label, .Checked + label,
    .togglebuttonSingle_container:checked + label {
        /* Set the same values as on a standard button (class inheritation is unf. missing in css) */
        background-color: var(--red_light);
        color: var(--white_font);
    }


/* 
        Zoom
*/

.gm3_Zoom_href {
    /* costom design */
}

    .gm3_Zoom_href img {
    }

#gm3_Zoom_lrg {
    display: none;
    position: fixed;
    background: var(--gm3_white);
    z-index: 1002;
    min-height: 100px;
    min-width: 100px;
    max-width: 80%;
    max-height: 80%;
    color: var(--gm3_gray_51);
    padding: 15px;
    font-size: 80%;
}

#gm3_Zoom_bg {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.8;
    background-color: var(--gm3_black);
    z-index: 1001;
}

#gm3_Zoom_lrg > img {
    border: solid 1px var(--gm3_gray_192) !important;
}

#gm3_Zoom_Image {
    border: solid 1px var(--gm3_gray_192) !important;
    z-index: 1003;
}

@media screen and (max-width:500px) {
    #gm3_Zoom_Image {
        width: 250px;
    }
}
/* END Zoom*/


/* Youtube Videos */
.youtube-wrapper {
    max-width: 100%;
    width: 600px;
    /* for centering
    left: 0;
    right: 0;
    margin: auto; */
}

.youtube-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

    .youtube-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*
    #Modules 
    -------------------------------------------------------------------------------------------------------------------------------------------------
*/
/*
    #Image Galery Type 1
*/
.modImgGalType1Row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.modImgGalType1Col {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .modImgGalType1Col img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .modImgGalType1Col {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .modImgGalType1Col {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

/* 

    #Events

*/
/*  Event Reviews */
.modEventReviewTitle {
    font-size: 1.3rem;
}

.modEventReviewPadding {
    padding: 10px;
}

.modEventReviewImage {
    min-width: 300px;
    max-width: 500px;
    width: 100%;
}

.modEventReviewVideo {
    min-width: 300px;
    max-width: 500px;
    width: 100%;
}

/*  Events */

/* Tour snippet */
.modEventsHeader {
    font-size: 2rem;
    font-weight: bold;
    color: var(--gm3_gray_51); /* war vorher 85, aber nur 1 eintrag */
}

.modEventsImage {
    max-width: 160px;
    width: 100%;
    height: auto;
}

.modEventsData {
    /* no defaults yet */
}

.modEventTable {
    /* no defaults yet */
}

/* 

    #Sitemap 

*/
.modSitemapContainer {
    padding: 10px;
    border: 1px solid var(--gm3_gray_192);
}

.modSitemapHref {
    text-decoration: none;
}

    .modSitemapHref:hover {
        color: var(--gm3_red_dark);
    }

.modSitemapTable {
    border: 1px solid var(--gm3_gray_192);
}

.modSitemapTR {
    border-bottom: 1px solid var(--gm3_gray_192);
    cursor: pointer;
}

    .modSitemapTR:hover {
        background-color: var(--gm3_gray_240);
    }

.modSitemapTRnoHov {
    border-bottom: 1px solid var(--gm3_gray_192);
}

.modSitemapTD {
    padding: 10px;
}

    .modSitemapTD span.modSitemapTitle {
        font-weight: bold;
    }

    .modSitemapTD span.modSitemapText {
        font-style: normal;
    }

    .modSitemapTD span.modSitemapDescription {
        font-size: 0.8rem;
        font-style: italic;
    }

/* 
    
    #Date Picker

*/
.datpik_navPrevNextMonth, .datpik_btnPrevMonth, .datpik_LabelMonth, .datpik_btnNextMonth, .datpik_gotoToday {
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.datpik_MonthCurrent, .datpik_MonthOther, .datpik_dayHeader, .datpik_Today, .datpik_calenTermin {
    font-size: 8pt;
    font-weight: normal;
    line-height: 13px;
    text-align: center;
}

.datpik_dayHeader {
    font-weight: bold;
}

.datpik_MonthCurrent, .datpik_Today, .datpik_calenTermin, .datpik_MonthOther, .datpik_dayHeader {
    width: 34px;
    height: 24px;
    line-height: 20px;
}

.datpik_Container {
    position: relative;
    width: 250px;
    border: 1px solid var(--gm3_gray_204); /* border of the object */
    background-color: var(--gm3_white); /* bg color of the day header */
}

.datpik_navPrevNextMonth {
    position: relative;
    width: 100%;
    height: 34px;
    background-color: var(--gm3_blue_dark); /* Title bg */
    cursor: pointer;
}

.datpik_btnPrevMonth, .datpik_LabelMonth, .datpik_btnNextMonth {
    position: relative;
    float: left;
    width: 32px;
    height: 34px;
    line-height: 34px;
    color: var(--gm3_white_font); /* color for header text */
}

.datpik_LabelMonth {
    width: 174px;
}

.datpik_gotoToday {
    position: relative;
    width: 234px;
    height: 34px;
    cursor: pointer;
    transition: 0.3s;
}

    .datpik_btnPrevMonth:hover, .datpik_btnNextMonth:hover, .datpik_gotoToday:hover, .datpik_LabelMonth:hover {
        filter: brightness(1.35);
    }

.datpik_MonthCurrent {
    position: relative;
    float: left;
    background-color: var(--gm3_white); /* bg color of the days in the active month */
    cursor: pointer;
}

.datpik_MonthOther {
    position: relative;
    float: left;
    background-color: var(--gm3_gray_245); /* days not in the current month but before and after */
    color: var(--gm3_gray_204); /* the text color to this days */
    cursor: pointer;
}

    .datpik_MonthOther:hover {
        filter: brightness(0.95);
    }

.datpik_MonthCurrent:hover, .datpik_calenTermin:hover, .datpik_Today:hover {
    background-color: var(--gm3_blue_dark); /* day inmonth on mouse over */
    color: var(--gm3_white_font); /* the text color to it */
}

.datpik_dayHeader {
    position: relative;
    float: left;
}

.datpik_Today {
    position: relative;
    float: left;
    background-color: var(--gm3_blue); /* bg color current day */
    color: var(--gm3_white_font); /* the day text color */
    cursor: pointer;
}

.datpik_calenTermin {
    position: relative;
    float: left;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid var(--gm3_blue_dark);
    background-image: url(/images/Term_Red.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.datpik_TableRow {
    position: relative;
    width: 100%;
    height: auto;
}


/* 

    #MM Audio Design

*/
.gm3_MM_AudioBox {
    display: block;
    position: absolute;
    min-width: 100px;
    width: 100px;
    height: auto !important;
    border: 1px solid var(--gm3_gray_192);
}

.gm3_MM_AudioBoxShadow {
    -moz-box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 6px 2px 2px rgba(0,0,0,0.2);
    box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
}

.gm3_MM_AudioBoxTitleContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-color: var(--gm3_gray_235);
    border: 0px none;
}

.gm3_MM_AudioBoxTitle {
    width: auto;
    height: 32px;
    line-height: 36px;
    font-weight: bold;
    font-size: 0.9em;
    float: left;
    border: 0px none;
    padding: 0px 0px 0px 14px;
}

.gm3_MM_AudioBoxTitleClose {
    float: right;
    cursor: pointer;
    background-image: URL(/images/player/player_off_b1.svg);
    background-size: cover;
}

.gm3_MM_AudioBlendinHeader {
    position: absolute;
    line-height: 36px;
    width: 100%;
    display: none;
    text-align: right;
    background-color: transparent;
    background-image: URL(/images/rgba/black_60.png);
}

.gm3_MM_AudioBlendinHeaderClose {
    float: right;
    cursor: pointer;
    background-image: URL(/images/player/player_off_b1.svg);
    background-size: cover;
}

.gm3_MM_AudioBlendinHeaderMove {
    float: right;
    cursor: move;
    background-image: URL(/images/player/player_move_b1.svg);
    background-size: cover;
}

.gm3_MM_AudioSourceContainer {
    display: block;
    height: 100%;
    height: auto;
    width: 100%;
    border: 0px none;
    padding: 0px 0px 0px 0px;
}

.gm3_MM_AudioSourceContainerGab {
    margin: 40px 0px 0px 0px;
}

.gm3_MM_AudioSource {
    display: block;
}

/* 
    
    #MM Video Design

*/
.gm3_MM_VideoBox {
    background-color: var(--gm3_white);
    position: absolute;
    min-height: 40px;
    width: 3200px;
    height: auto !important;
    border: 1px solid var(--gm3_gray_128);
}

.gm3_MM_VideoBoxShadow {
    -moz-box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 6px 2px 2px rgba(0,0,0,0.2);
    box-shadow: 6px 6px 2px rgba(0,0,0,0.2);
}

.gm3_MM_VideoBoxTitleContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    background-color: var(--gm3_gray_235);
    border: 0px none;
}

.gm3_MM_VideoBoxTitle {
    width: auto;
    height: 32px;
    line-height: 36px;
    font-weight: bold;
    font-size: 0.9em;
    float: left;
    border: 0px none;
    padding: 0px 0px 0px 14px;
}

.gm3_MM_VideoBoxTitleClose {
    float: right;
    cursor: pointer;
    line-height: 36px;
    font-weight: bold;
}

.gm3_MM_VideoBlendinHeader {
    position: absolute;
    line-height: 36px;
    width: 100%;
    display: none;
    text-align: right;
    background-color: transparent;
    background-image: URL(/images/rgba/black_60.png);
}

.gm3_MM_VideoBlendinHeaderClose {
    float: right;
    cursor: pointer;
    line-height: 36px;
    color: var(--gm3_white);
    font-weight: bold;
}

.gm3_MM_VideoSourceContainer {
    display: block;
    height: 100%;
    height: auto;
    width: 100%;
    border: 0px none;
    padding: 0px 0px 0px 0px;
}

.gm3_MM_VideoSourceContainerGab {
    margin: 40px 0px 0px 0px;
}

.gm3_MM_VideoSource {
    display: block;
}


/*

    #Downloads

*/
.modDownLoadTable > .divTR > .divTD {
    padding: 10px;
}

.modDownLoadTRHeader {
    background-color: var(--gm3_gray_240);
    font-weight: bold;
}

    .modDownLoadTRHeader div {
        background-color: var(--gm3_gray_240);
        font-weight: bold;
    }

.modDownLoadTR {
    border-bottom: 1px solid var(--gm3_gray_240)
}

    .modDownLoadTR > .divTD > .modThumbNailIcon {
        margin-right: 0px;
        border: 1px solid var(--gm3_gray_153);
    }
    /*
    .modDownLoadTR > .divTD > a > img {
        width: 32px;
        height: auto;
        height: 32px;
        margin-right: 10px;
        background-image: url('/images/icons/Icon_Save_1.svg');
        background-repeat: no-repeat;
        cursor: pointer;
        display: block;
    }*/
    .modDownLoadTR > .divTD > a {
        width: 32px;
        height: auto;
        height: 32px;
        margin-right: 10px;
        background-image: url('/images/icons/Icon_Save_1.svg');
        background-repeat: no-repeat;
        cursor: pointer;
        display: block;
    }

    .modDownLoadTR:hover {
        background-color: var(--gm3_gray_240);
    }
/*

    #Guestbook

*/
.modGBookTable > .divTR > .modGBookHeader {
    font-weight: bold;
}

.modGBookTable > .divTR > .modGBookEmail {
    /* */
}

.modGBookTable > .divTR > .modGBookPhone {
    /* */
}

.modGBookTable > .divTR > .divTD > span.modGBookDateTime {
    font-size: 0.7rem;
    color: var(--gm3_gray_153);
}

.modGBookTable > .divTR > .divTD > span.modGBookText {
    display: inline-block;
    line-height: 1.2rem;
}

.divTR > .divTD > hr {
    height: 3px;
    background-color: var(--gm3_gray_192);
    border: none;
}


/* 
    
    #Blog Flyers and Posters

    globals within:   
    p.dataReadMore

*/
.modBlogFlyersTD span.modBlogFlyersTitle {
    font-size: 1.2rem;
    font-weight: bold;
}

.modBlogFlyersTD span.modBlogFlyersText {
    font-size: 0.9rem;
    font-style: italic;
}

.modBlogFlyersTD img.modBlogFlyersImage {
    float: left;
    margin-right: 20px;
    margin-top: 6px;
    width: 200px;
}

.modBlogFlyersTD a {
    text-decoration: none;
}

.modBlogFlyersTD hr {
    height: 3px;
    background-color: var(--gm3_gray_192);
    border: none;
}
/* 

    #Blog Images Download

    globals within:   
    p.dataReadMore

*/
.modBlogImagesTD span.modBlogImagesTitle {
    font-size: 1.2rem;
    font-weight: bold;
}

.modBlogImagesTD span.modBlogPhotograferTitle {
    display: inline-block;
    width: 200px;
    font-weight: bold;
}

.modBlogImagesTD span.modBlogPhotograferText {
    color: green;
}

.modBlogImagesTD a.modBlogPhotograferURL {
    color: blue;
}

    .modBlogImagesTD a.modBlogPhotograferURL:hover {
        color: red;
    }

.modBlogImagesTD span.modBlogImagesText {
    font-size: 0.9rem;
    font-style: italic;
}

.modBlogImagesTD img.modBlogImagesImage {
    float: left;
    margin-right: 20px;
    margin-top: 6px;
    width: 200px;
}

.modBlogImagesTD a {
    text-decoration: none;
}

.modBlogImagesTD hr {
    height: 3px;
    background-color: var(--gm3_gray_192);
    border: none;
}
/* 

    #Blog Press Articles    

    globals within:   
    p.dataReadMore

*/
.modBlogPressTD span.modBlogPressTitle {
    font-size: 1.2rem;
    font-weight: bold;
}

.modBlogPressTD span.modBlogPressText {
    font-size: 0.9rem;
    font-style: italic;
}

.modBlogPressTD img.modBlogPressImage {
    float: left;
    margin-right: 20px;
    margin-top: 6px;
    width: 200px;
}

.modBlogPressTD a {
    text-decoration: none;
}

.modBlogPressTD hr {
    height: 3px;
    background-color: var(--gm3_gray_192);
    border: none;
}
/* 

    #Blog (standard Blog)

    globals within:   
    p.dataReadMore

*/
.modBlogTD span.modBlogDateTime {
    font-size: 0.7rem;
    color: var(--gm3_gray_240);
}

.modBlogTD span.modBlogTitle {
    font-size: 1.2rem;
    font-weight: bold;
}

.modBlogTD span.modBlogText {
    font-size: 0.9rem;
    font-style: italic;
}

.modBlogTD img.modBlogImage {
    float: left;
    margin-right: 20px;
    margin-top: 6px;
}

.modBlogTD img.modBlogIcon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.modBlogTD img.modBlogMP3Icon {
    width: 32px;
    float: left;
}

.modBlogTD video.modBlogMP4Icon {
    border: 0px none;
}

.modBlogTD a {
    text-decoration: none;
}

.modBlogTD hr {
    height: 6px !important;
    background-color: var(--gm3_gray_192) !important;
    border: none !important;
}

.modBlogTD iframe.modBlogYoutube {
    border: 0px none;
}


/* 

    #Q&A Toggle Content

*/
.mod-q-and-a-Content {
    border: 1px solid var(--gm3_gray_192);
    margin-bottom: 4px;
}

.mod-q-and-a-ContentTitle {
    font-weight: bold;
    padding: 8px;
    cursor: pointer;
}

.mod-q-and-a-ContentImage {
    text-align: center;
}

    .mod-q-and-a-ContentImage > img {
        height: 250px;
    }

.mod-q-and-a-ContentText {
    padding: 8px;
    padding-left: 5%;
    padding-bottom: 32px;
    display: none;
}

@media screen and (max-width:500px) {
    .mod-q-and-a-ContentImage {
        margin-top: 30px;
        background-color: var(--gm3_gray_240);
    }

        .mod-q-and-a-ContentImage > img {
            height: 125px;
            visibility: hidden;
            visibility: visible;
        }
}


/*

    #global behavior handler
    shorts to handle global behaviors like show hide on different divices

*/
/* show hide elements on PC or Mobile */
@media screen and (max-width: 500px) {
    /* hide mobile on PC */
    .z-mob {
        display: block;
    }

    .z-pc {
        display: none;
    }
}

@media screen and (min-width: 501px) {
    /* hide mobile */
    .z-mob {
        display: none;
    }
    /* show on PC */
    .z-pc {
        display: block;
    }
}