:root {
    --box-size: max(50%);         /*           --box-size: max(95%, 300px);  */
}

@media only screen and (max-width: 20em) {
    :root {
        --box-size: max(100%, 300px); 
    }

                           
            body {
               background-color: yellow;    
            }
          

    
    .bild {
        width: var(--box-size);               /*  width: 100%;  */
        height: auto;                        /* höhe richtwet sich nach breite  */
    }
}


body {
    margin: 0;
}

html, body {
    min-height: 100%;
    }

body, div, form, input, select, textarea, p { 
    padding: 0;
    margin: 0;
    outline: none;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;                           
    color: #555252;
    line-height: 40px;                          
    }

h1 {
    position: absolute;
    margin: 0;
    font-size: 2.5em;                          
    color: #fff;
    z-index: 2;
    }

h3, h4  {
    margin: 0; 
    color: #095484;                        
        }


#canvas { 
    position: absolute; 
    left: 50%;  
    transform: translate(-50%, 50%); 
    width: var(--box-size);  
    visibility: hidden;
     }
#canL1, canL2 { 
        box-sizing: border-box;         
        width: 100%;                        /* width: 100%; option1  */
        align-items: center;
        display: flex;
        justify-content: center;
        border-radius: 10px;                   
        background: #fff;
        box-shadow: 0 0 10px 0 #095484; 
        }
        
    #canL2{
        opacity: 0.5; 
    }
   
    #chartContainer { 

        box-sizing: border-box;
        margin-top: 6%;
        position: absolute; 
        left: 50%;  
        transform: translate(-50%, 50%); 
        width: var(--box-size);  
        height: 300px; 
        background: #fff;
        border: 1px solid #095484;
        border-radius: 12px;
        box-shadow: 0 0 10px 0 #095484;
        visibility: hidden; 
        }



    #tabarea { 
        box-sizing: border-box;
        margin-top: 6%;
        position: absolute; 
        width: var(--box-size);
        width: 100%;   
        display: flex;
        justify-content: center;
        align-items: center;
        height: inherit;  
        visibility: hidden; 
    }

   xx#tabbox {   
        width: var(--box-size);                     /*         50%;   */              
        display: flex;
        justify-content: center;
        align-items: center;
        height: inherit; 
        padding: 35px 35px;                           
        border-radius: 10px;                        
        background: #fff;
        box-shadow: 0 0 10px 0 #095484; 
    }    

    table#tabelle {
        table-layout: auto;                /*  fixed; */
        /*  width: var(--box-size);    */
    }

    #tabelle {   
        border-collapse: collapse;
        border: 1px solid #eee;
        border-bottom: 2px solid #1c87c9;
        box-shadow: 0 0 10px 0 #095484; 
                
        tr {
            height: 25px;
            &:hover {
            background: #f4f4f4;
            
            td {
                color: #5b5555;              
               }
            }
        }


        th { 
            border-collapse: collapse; 
            padding-left: 5px;
            font-size: 12px; 
            text-align: center; 

           /* background: #1c87c9;  */
            color: #fff;
            text-transform: uppercase;           
            &.last {
                border-right: none; 
                text-align: center;                  
                }
            }

        td {  
            border-collapse: collapse;
            /*  text-align: left; */ 
            /*text-align: right;  */   
            text-align: center;  
            /* padding-left: 5em;  */
            font-size: 12px;    
            }

    }
    
    #ud  {                                              /* box für löschen / ändern  */
        width: 50px;                                      
        padding: 1px; 
        border-radius: 5px;  
        font-size: 12px;
    }
    #tabelle tr, th {   
            line-height: 20px;  
        }
    

        /*
    .tsp1 {
        background: #7e1cc9;
        width: 10%;
    }
*/

    
    .formbox {
        margin-top: 6%;
        width: 100%;
        height: auto;  
        position: absolute;  
        display: flex;
        justify-content: center;
        align-items: center;
        height: inherit;            
    }
    form {
        margin: 0 10px;
        width: var(--box-size);                          /*        width: 50%;   */
        height: auto;
        padding: 35px;                   
        border-radius: 10px;                 
        background: #ebebeb;                
        box-shadow: 0 0 10px 0 #095484; 
    }
    #weiterBtn  {   
        width: 140px;                
        padding: 1px; 
        border-radius: 5px;             
        background: #1c87c9;
    }


    

    .boxauswahl {
        float: left;   
    }
    
    .btn-block {
        margin-top: 30px; 
        display: flex;
        text-align: center;
        }

    input, select, textarea {
        margin-bottom: 5px;                 
        border: 1px solid #ccc;
        border-radius: 5px;            
    }

    input {
        width: calc(100% - 20px);            
        padding: 0;                                                
    }

    #bdate, #edate {
        height: 22px;        
    }
 
    .p-cls, .p-cls-t {  
        height: 22px;
    }
   
    .p-cls-t {  
        padding-top: 10px;
    }



    select {
        width: 100%;
        padding: 5px 0;                         
        background: transparent;
    }

    textarea {
        width: calc(100% - 30px);               
        padding: 5px;                           
    }

    .item:hover p, .item:hover i, .question:hover p, .question label:hover, input:hover::placeholder, a {
        color: #095484;
    }

    .item input:hover, .item select:hover, .item textarea:hover {
        border: 1px solid transparent;
        box-shadow: 0 0 10px 0 #095484;                   
        color: #095484;
    }

    .item {
        position: relative;
        margin: 10px 0;                           /*   margin: 20px 0;   */                 
    }

    input[type="date"]::-webkit-inner-spin-button {
        display: none;
    }

    .item i, input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        font-size: 14px;       
        color: #a9a9a9;
    }

    .item i {
        right: 2%;
        top: 50px;               
        z-index: 1;
    }

    [type="date"]::-webkit-calendar-picker-indicator {
        right: 1%;
        z-index: 2;
        opacity: 0;
        cursor: pointer;
    }

    input[type=checkbox]  {
        display: none;
    }

    .checkbox {
        height: 25px;
    }


    .check {
        height: 20px;
    }
        
    label {        
        font-size: 14px;
    }   

    label.check {
        position: relative;
        display: inline;                      /* display: inline-block;  */                                     
        margin: 0;           
        cursor: pointer;
    }
    .checktxt {
        background: #c9ec75;     
    }

    .question span {
        margin-left: 50px;                       
    }

    span.required {
        margin-left: 0;
        color: red;
    }

    


    .checkbox-item label {   
        margin-left: 20px;                                       
    }


    
    label.check:before {
        content: "";
        margin-top: 0px;  
        position: absolute;
        left: 0;
    }
    
    label.check:before { 
        box-sizing: border-box;           
        top: 0;                          
        width: 20px;                     
        height: 20px;                    
        border-radius: 5px;                
        background: white;   
        border: 1px solid #192228;
    }

    input[type=checkbox]:checked + .check:before {
        background: #abb4ba;                          
    }
    
    label.check:after {
        left: 5px;                          
        border: 5px solid #fff;            
    }

    label.check:after {
        content: "";
        position: absolute;
        top: 5px;                      
        width: 15px;                    
        height: 10px;                    
        background: transparent;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        opacity: 0;
    }
    
    
    button {
        width: 125px;                
        padding: 5px;                   
        border: none;
        border-radius: 5px;                
        background: #095484;
        font-size: 14px;                
        color: #fff;
        cursor: pointer;
    }

    button:hover {
        background: #0666a3;
    }