@media only screen and (max-width: 340px) { /* Sehr kleine Geräte, z.B. iPhone SE */
    :root{
        --kalDayNr: 10pt; 
        --kalWoTag: 9pt;
        --kalMoName: 13pt;
        --foot_pad: 1px 0px 1px 0px;
        --foot_size: 8pt;
    }  
    tr.kal_mob1  {
        --kalHead: 35px;
    }
}

@media only screen and (min-width: 340px) { /* Grössere Geräte */
    :root{
        --kalDayNr: 12pt;
        --kalWoTag: 11pt;
        --kalMoName: 14pt;
        --foot_pad: 10px 0px 10px 0px;
        --foot_size: 10pt;
    }  
    
   /* Kalender Icons grösser */
    tr .svgKal { 
        max-width: 14.5pt !important;
        width: 120% !important;
    }
    
    tr.kal_mob1  {
        --kalHead: 53px;
    }
}

    
    html,body {
        /*! font-family: arial, "lucida console", sans-serif; */
		height: 100%
    }
	
	.site {
        height: auto;
        min-height: 100%;
    }

    #Kopfzeile {
            height: 35px;
            padding-bottom: 8px;
        }

    #fixiertLogoSmall{
        width: 40%;
        float:left;
        background-image: url("images/logo_small.png");
        background-repeat: no-repeat;
        background-size: var(--bg_size);
        height: 35px;
    }

    #fixiert{
        float:left;
        width: 100%;
        height: 35px;
        background-color: var(--head);
    }
   
    div#Fusszeile {
        position:absolute;
        bottom: 0;
        margin: auto;
        margin-top: -60px;
        width: 97%;
        padding: var(--foot_pad);
        background-color: var(--head);
        display: table;
    }

    div#Fusszeile p {
        display: table-cell;
        vertical-align: middle;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: var(--foot_size);
        text-align: center;
    }

    a {
        color: var(--link);
        font-family: Arial, Helvetica, sans-serif;
    }
    .arrow {
        font-size: 19pt;
        cursor: pointer;
    }
    .svg{
        float:left;   
    }
    .td_kal_mob .svg {
        float: none;
    }
    #button_darst {
        display: none !important;
    }
    #button_darstSmall, #button_bellSmall {
       position: relative;
       top:3px;
       right: 0px;
       width:42px;
       height:25px;
       font-size: 28pt;
       float: right;
    }

    #button_darstSmall:after {
       content: '\2630';
       position: relative;
       top: -5px;
    }    

    #button_bellSmall {
        width: 25px;
        background-image: url("images/bell.png");
        background-repeat: no-repeat;
        height: 100%;
        background-size: 100%;
        top: 10px;
        right: 5px;
        
    } 
    
    #button_darstSmall.click:after {
       font-size: 24pt;
       content: '\00D7';
    }

    #inhalt_menuSmall {
       width: 100%;
       top: 30px;
       right: 0px;
       float:right;
       background-color: var(--app_light);
       z-index: 10;
       border-radius: 10px;

    }
    li.limenuTit {
        color:black;
        font-weight: bold;
    }
    
    ul.limenu { 
        list-style-type: none;
        width: auto;
    }

    li.limenu { 
        list-style-type: none;
        text-align: left;
	    margin-right: 30px;
	    padding: 0;  
        cursor: pointer;
	    margin-left: 13px;
    }

    .limenu { 
        color: #3e3e3e;
    }
    li.limenu:hover{ 
        color:black;
        list-style: square;
    }

    li.limenu:hover table:before{
        content: 'ADD';
    }



    .tp {
        position: relative;
        display: inline-block;
    }
    .tptxt {
        visibility: hidden;
        width: auto;
        background-color: #333333;
        color: white;
        text-align: center;
        border-radius: 2px;
        padding: 2px 5px;

        /* Position the tooltip */
        position: absolute;
        z-index: 100;
        bottom: +110%;
        left: 50%;
        transition-delay: 0s;
    }

    .tp:hover .tptxt {
        visibility: visible;
    }

    .tp:active .tptxt {
        visibility: visible;
    }
 
    
    body {
        font-family: arial, "lucida console", sans-serif;
    }

    table.kal_mob,td.kal_mob {
        border: 1px solid gray;
    }

    td.td_kal_mob {
        width: 14.286%;
        height: 35px;
        background-color: white;
        vertical-align: middle;
        text-align: center;
        vertical-align: top;
        font-size: var(--kalDayNr);
    }
    td.kal_mob_hide {
        border: 1px solid gray;
        background-color: white;
    }

    .kal_mob th {
        border: 1px solid white;
        background-color: var(--app_dark);
        text-align: center;
    }

    .kal_mob th.thtabwota {
        font-size: var(--kalWoTag);
    }
    tr.kal_mob1  {
        height: var(--kalHead);
        font-size: var(--kalMoName);
    }
    .kal_mob th.left, .kal_mob th.right  {
        font-size: 15pt;
    }

  .tbl-qa_mob {
        font-size: 0.9em;
        border-collapse: collapse;
        margin-bottom: 5px;

    }
 .head_kal {
        color: white;
        background-color: #818181;
    }

    .feiertag_mob {
        color:var(--app_dark);
    }
    
    .heute {
-webkit-animation-name: example;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    /* Standard syntax */
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:#ffe886;}
    50%  {background-color:#ea7b4a;}
    100% {background-color:#ffe886;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:#ffe886;}
    50%  {background-color:#ea7b4a;}
    100% {background-color:#ffe886;}
}
    

div #AbarSum {
        overflow: hidden;
        background-color: var(--report);
        color: black;
        min-height: 16px;
        /*border-color: gray;
        border-style: solid;
        border-width: 1px;*/
        border-radius: 5px;
        font-size: 11pt;
        padding: 2px 5px;
        margin: 2px 2px;
}
div #AbarSum .abarLegend {
        float:left; 
        /*! min-width:120px; */ 
        max-width:600px; 
        padding-right:20px;
		width: 100% /*damit jede Fraktion auf einer neuen Zeile beginnt*/
}

.abarTxt, .sageTab {
    display:inline-block;
    margin:1px;
}

div #AbarSum .abarLegend .abarBold {
        font-weight: bold;
}

#jahrKal {
    float:right;
}

    
    #logoZKRI {
     max-width: 100px;
    }
    
    #content0,#content3,#content4,#Navigation, #fixiertLogo, #jahrKal{
        display:none !important; 
    }

    
    #listTit{
      display: flex;
      align-items: center;
      background-color: white; /*Anpassung*/
      border: 2px solid var(--app_dark) !important; /*Anpassung Farbe*/
      height: 41px !important;
      padding-left: 2%;
      margin-bottom:5px;
      font-size: 12pt !important;
	  border-radius: 10px;
      color:var(--app_dark);
      cursor: pointer;
    }
    #listTit:before{
      font-size: 12pt;
      content: "\25bc \2002\2002\2002";
    }
    #listTit:hover {
      background-color: var(--app_dark); /* Anpassung Farbe Hover Gemeinde/Tour */
      color: white;
    }

    #content1 {
        padding: unset !important;
        margin-top:30px;
    }
    #content2 {
        padding: unset !important;
        margin-top:15px;
    }
    #content1.mymove,#content2.mymove {
        margin-top:0px !important;
        transition-duration: 0.8s;
    }
    .sel_wrapper select, .sel_wrapper_intervall select {
      width: 100%;
      border:unset;
      border: 1px solid #5a5a5a !important;
      height: 30px !important;
      margin: unset !important;
      margin-bottom: 2px !important; 
      padding-left:  12%;
      font-size: 12pt !important;
      color: #5a5a5a;
	  border-radius: 10px;
    }

    .sel_wrapper  {
      display: unset;
      /*width: 165px;*/
      /*overflow: hidden;*/
      background: url(arr.png) 3% / 18px no-repeat transparent;
    }
    .sel_wrapper:hover {
      font-size: 110%;
    }
    #mySelect1:disabled ,#mySelect2:disabled,#mySelect3:disabled,#mySelect5:disabled {
      display:none !important;
    }

    button.bottom {
        display: none !important;
    }

    button.small {
      background-color: white;
      border: 2px solid #555555 !important;
      font-style: bold;
      height: 41px !important;
      font-size: 12pt !important;
	  border-radius: 10px;
      color:black;
}
    
    div #content5  {
        margin-left: 0px !important;
        margin-top: 3px !important;
        padding: 3px !important;
        width: unset !important;
        background-color: var(--app_light) !important; /*Anpassung Farbe Infofeld*/
        box-shadow: none !important;
        text-align: center !important;
        border-radius: 3px !important;
        font-size: 12pt !important;
    }

    .tbl-qa_mob, #tbl-qa {
     width: 100%;
    }
    
    table.tbl-qa_mob {
        border: none;
    }
    .kal_mob td:nth-child(1), .kal_mob th:nth-child(1) {
        border-left: none;
    }
    .kal_mob td:nth-child(7), table.tbl-qa_mob th:nth-child(7), .kal_mob th{
        border-right: none;
    }

    .sel_wrapper #mySelect3.animate {
        display: none !important;
    }

.liste_mon .listTitMon {
    font-weight: bold;
    font-style: italic;
    background-color:#b9b9b9;
    padding: 3px;
}