.main-img {
        width:100%;
        background-image: url("img/IMG_3684-180x1200-80.jpg");
        background-position:50% 50%;
        height:70vw;
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .whitespace1 {
        clear:both;
        width:100%;
        background-color:white;
    }
    
    .content-container{
        position:relative;
    }

    .hitcounter {
        position:absolute;
        font-size:13px;
        color: gray;
        bottom:-40px;
        padding-left:20px;
    }

    .pagecontent p{
        margin-bottom:10px;
    }
    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 25px;
        background: #d3d3d3;
        background-image: url('https://hypowijs/images/arrow-right.png');
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
        margin-bottom:20px;
    }

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #4CAF50;
        cursor: pointer;
    }
    .grid-container{
        display:grid;
    }

    .gridrow {
        display:grid;
        grid-template-columns: auto auto;
        margin-bottom:10px;
    }
    .gridrow1 {
        display:inline-grid;
        grid-template-columns: max-content max-content;
        margin-bottom:10px;
    }
    .row2 {
        margin-bottom:20px;
    }
    .col1a {
        margin-left:30px;
    }
    .col2{
        text-align: right;
    }
    .col2a {
        text-align: right;
        margin-right:30px;
        margin-left:10px;
        cursor:default;
    }
    .editcell:hover {
        color: white;
        background-color: darkgreen;
    } 
    .amount:hover {
        color: white;        
    }       
    .table1{
        margin-top: 50px;
        margin-bottom:50px;
    }
    .table1 td{
        padding:3px;
        padding-top:2px;
        padding-bottom:2px;
    }
    .aflossing td {
        font-size:13px;
        text-align:center;
    }

    .input1 {
        width:60px;
        font-size:16px;
        font-family:arial;
        font-weight:300;
    }
    .pagecontent h1{
        margin-bottom:60px;
    }
    .inline{
        display:inline;
    }
    .hide {
        display:none;
    }
    .crdefault{
        cursor:default;
    }
    #chart{
        height:300px;
        width:100%;
    }

    .ct-legend {
        position : absolute;
        top :20px;
        left: 230px;
        font-size:13px;
    }
    
    .ct-legend:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: -17px;
        content: '';
        border: 1px solid gray;
        border-radius: 2px;
    }
    
  
    .ct-legend-0:before {
        background-color:#0544d3;
    }
    
    .ct-legend-1:before {
        background-color:#d70206;
    }
    
    .ct-legend-0 {
        left:230px;
        top:20px;
    }

    .ct-legend-1 {
        left:380px;
        top:20px;
    }
    
    .posrel {
        position : relative;
    }
    
    .grip{
        display:block;
        background-color:#4caf50;
        position:absolute;
        top:0px;
        z-index:8;
        left:60px;
        width:24px; 
        height:24px;
      }
      .grip:hover{
          background-color:#82c785
      }
      .validbar{
        display:block;
        background-color:#e0e0e0;
        position:absolute;
        z-index:5;
        height:24px;
      }
      .validbar:hover {
          background-color:#d3d3d3;
      }
      .range {
          position:relative;
          height:24px;
          background-color:#c3c3c3;
          background-color:#f7b0b0;

      }


    @media screen and (max-width: 800px) {  /* < 800px */
        .table1 td{
            font-size:11px;
        }

    }

    @media screen and (max-width: 600px) {  /* < 600px */
        .ct-legend-1 {
            left:230px;
            top:40px;
        }
    
    }
    .test {
        font-size:11px;
        color:lightgray;
        display:none;
    }
    
    
/************************************************/
/*                up-down arrows                */
/************************************************/

.relpos{
    position:relative;
}

/* arrow downwards */
.arrow-up-down:after {
    position: absolute;
    content: "";
    top: 5px;
    margin-left: 4px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-color: #666 transparent transparent transparent;
}

/*point the arrow upwards*/
    .arrow-up-down.arrow-up:after {
    border-color: transparent transparent #666 transparent;
    top: -3px;
}

/************************************************/
/*                provider list                 */
/************************************************/

.provitem {
    display:block;
    padding-left:4px;
    cursor:default;
    clear:both;
    font-size:16px;
    height:23px;
}
.provitem:hover{
    background-color:lightgray;    
}
.provtext {
    display:inline-block;
    font-size:16px;
}
.provpct {
    float:right;
    font-size:16px;
}

.provcontainer {
    max-height:150px;
    overflow:auto;
    margin-left:35px;
    margin-bottom:15px;
    max-width:300px;
    border: 1px solid #ddd;
}
.selprov {
    background-color:#bffcff;
}

.button-1 {
    font-size: 14px;
    padding:10px;
}
.blue {
    background-color:#5E91FF;
    color:white;
    border: 2px solid #5E91FF;
}
.blue:hover {
    border: 2px solid #3D81FF;
    background-color:#3D81FF;
}

#product-select select {
    font-size:15px;
    -width:300px;
}