.pageTop {
    color: #fff;
    padding: 10px;
    position: static;
    float: left;
    width: 100%;
    background-color: #fff;
    margin: 0 auto 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    background-color: inherit;
    color: #000;
    font-family: "Verdana", "Helvetica Neue", "Lucida Grande", "Arial","Segoe UI", "Helvetica", "sans-serif";
    font-weight: 500;
    padding: 0;
    margin: 0;
}

h1 {
    font-size: 20px;
    font-weight: 700
}

h2 {
    font-size: 14px;
    line-height: 16px
}

h3 {
    font-size: 10px;
    font-weight: 300;
}

h4 {
    font-size: 20px;
    font-weight: 500;
}

h5 {
    font-size: 14px;
    font-weight: 700;
}

h6 {
    font-size: 1em;
    font-weight: 500;
} 


.DivAlg, .WW_divHidden, .WW_divShow, .DivPuco {
    background-color: inherit;
    color: #000;
    margin: 0;
    padding: 0;
    position: static;
    float: left;
}

.DivPuco {
    display: none
}




.Welcome {
    background-image: url('/Images/Background.jpg');
   
}

@media only screen and (max-width:56.25em) {

    .WW_divHidden {
        display: none
    }

    .WW_divShow {
        display: block
    }

    .DivPuco {
        display: block
    }
}

.mGrid {
    width: 100%;
    background-color: #fff;
    margin: 1px 0 1px 0;
    border: solid 1px #666;
    border-collapse: collapse;
}

    .mGrid td {
        padding: 2px 0 1px 2px;
        border: solid 1px #666;
        color: #000;
        font-size: 14px;
    }

    .mGrid th {
        padding: 2px 0 1px 2px;
        color: #fff;
        background-color: darkgray;
        border-left: solid 1px #666;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
    }

    .mGrid .alt {
        background: #eee;
        padding: 2px 0 1px 2px;
    }

    .mGrid .pgr {
        background-color: #888888;
        padding: 2px 0 1px 2px;
    }

        .mGrid .pgr table {
            margin: 0;
        }

        .mGrid .pgr td {
            border-width: 0;
            padding: 0;
            border-left: solid 1px #666;
            font-size: 14px;
            font-weight: 500;
            color: #717171;
        }

        .mGrid .pgr a {
            color: #fff;
            text-decoration: none;
        }

            .mGrid .pgr a:hover {
                color: #fff;
                text-decoration: none;
            }

.RblVert {
    border: 0 solid #ccc;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    padding: 0;
    margin: 10px 0 0 0;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    direction: rtl;
    float: left;
    list-style-type: none;
    -webkit-appearance: none;
    -moz-appearance:none;
    -webkit-border-radius: 0;
   -moz-border-radius:0;
    border-radius: 0;
}

.Tblframe {
    position: static;
    color: inherit;
    text-align: left;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px 0 10px 2%;
    padding-bottom: 10px;
    width: 90%;
    display: inline-block;
}




.frame {
    position: static;
    color: inherit;
    text-align: left;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px 0 10px 0;
    padding-bottom: 10px;
    width: 100%;
    display: inline-block;
}

.SubframeS, .SubframeSR, .Subframe, .TstFrame, .TstFrameSub, .TstFrame3 {
    position: static;
    color: inherit;
    text-align: left;
    margin: 15px 2% 5px 0;
    padding: 5px
}

.SubframeS {
    float: left;
    width: 30%
}

.SubframeSR {
    float: right;
    width: 65%
}

.Subframe {
    float: left;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 30%;
}

.TstFrame {
    float: left;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 45%;
    margin-left: 15px
}

.TstFrameSub {
    width: 45%;
    float: left;
}

.TstFrame3 {
    width: 30%;
    float: left;
}



.LabelS, .SpanS, .SpanSM {
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0;
    font-size: 15px;
    line-height: 23px;
    color: #000;
    position: static;
    text-align: left;
    float: left;
    background-color: inherit;
    width: 80%
}

.LabelS {
    font-weight: 400;
}

.SpanS {
    font-weight: 700;
}

.SpanSM {
    font-weight: 700;
}

TextArea.txtEntryXXL {
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color: #000;
    font-size: 15px;
    line-height: 20px;
    padding: 0;
    height: 60px;
    padding-left: 10px;
    margin: 10px 0 0 15px;
    width: 95%;
    -moz-appearance: none;
    -webkit-appearance: none;
}

    TextArea.txtEntryXXL[type="text"] {
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        color: #000;
    }

    TextArea.txtEntryXXL:focus {
        outline: none;
        border: 1px solid #000;
    }

.txtAll {
    border: 1px solid #395aa7;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color: #000;
    font-size: 15px;
    line-height: 23px;
    padding: 0;
    height: 25px;
    padding-left: 10px;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}



input.txtAll[type="text"] {
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color: #000;
    text-align: left;
    padding-left: 2px
}


input.txtAll:focus {
    outline: none;
    border: 1px solid #000;
}



.C_Indicator_icon:before, .C_Indicator_icon1:before, .C_Indicator_icon2:before, .C_Indicator_icon3:before, .C_Indicator_icon4:before, .C_Indicator_icon5:before, .C_Indicator_icon6:before, .C_Indicator_icon7:before, .C_Indicator_icon8:before, .C_Indicator_icon9:before, .C_Indicator_icon10:before, .C_Indicator_icon11:before, .C_Indicator_icon12:before, .C_Indicator_icon13:before, .C_Indicator_icon14:before, .C_Indicator_icon15:before, .C_Indicator_icon16:before, .C_Indicator_icon17:before {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: #0f7991;
    color: #0f7991;
    padding-right: 0;
    position: static;
    text-align: center;
}

.C_Indicator_icon:before {
    content: "\f040 ";
    float: right;
    font-size: 30px;
    height: 32px;
    margin: 5px 5px 5px 0
}

.C_Indicator_icon1:before {
    content: "\f182";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon2:before {
    content: "\f06d";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon3:before {
    content: "\f1ec";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon4:before {
    content: "\f043";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon5:before {
    content: "\f185";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon6:before {
    content: "\f073";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}

.C_Indicator_icon7:before {
    content: "\f0ad";
    float: left;
    font-size: 23px;
    height: 32px;
    margin-left: 45%
}


@media only screen and (max-width:1100px) {
    .TstFrame {
        width: 42%;
    }

    .TstFrameSub {
        width: 95%;
        margin: 0;
        padding: 0;
    }

    .TstFrame3 {
        width: 95%;
        margin: 0;
        padding: 0;
    }

    

    .SubframeS, .Subframe {
        width: 29%
    }

    .SubframeSR {
        float: left;
        width: 90%;
        margin: 5px 2% 5px 0;
    }

    TextArea.txtEntryXXL {
        width: 90%
    }
}

@media only screen and (max-width:56.25em) {


    

    .SubframeS, .Subframe, .TstFrame {
        width: 90%;
        margin: 15px 2% 1px 15px;
    }

    .TstFrameSub {
        width: 95%;
        margin: 0;
        padding: 0;
    }
    .TstFrame3 {
        width: 95%;
        margin: 0;
        padding: 0;
    }

    .SubframeSR {
        width: 90%;
        margin: 5px 2% 5px 0;
    }

    TextArea.txtEntryXXL {
        width: 90%
    }
}

.Popup1 {
    position: fixed;
    padding: 20px 0 10px 10px;
    top: 50%;
    left: 50%;
    color: #000;
    font-family: Verdana, Sans-Serif;
    font-size: 16px;
    font-weight: 900;
    transform: translate(-50%, -50%);
    width: 40%;
    background-color: #fff;
    overflow: hidden;
    z-index: 1;
}

.divLegitimatie {
    position: fixed;
    padding: 20px 0 10px 10px;
    top: 50%;
    left: 50%;
    color: #000;
    font-family: Verdana, Sans-Serif;
    font-size: 12px;
    font-weight: 600;
    transform: translate(-50%, -50%);
    width: 500px;
    background-color: #fff;
    overflow: hidden;
    z-index: 1;
}

@media only screen and (max-width:56.25em) {


    .Popup1 {
        width: 90%;
        
    }

    .divLegitimatie {
        width: 90%;
    }
}

    .right-inner-addon i {
        position: absolute;
        right: 12%;
        top: 75px;
        padding: 10px 12px;
        pointer-events: none;
    }

    .Tblframe {
        position: static;
        color: inherit;
        text-align: left;
        border: 1px solid #395aa7;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin: 3px 0 0 8%;
        padding-bottom: 10px;
        width: 90%;
        display: inline-block;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        font-size: 15px;
        line-height: 23px;
        font-weight: 400;
    }

.txtArt {
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    border: 1px solid #395aa7;
    font-size: 15px;
    line-height: 23px;
    color: #000;
    position: static;
    text-align: left;
    float: left;
    background-color: inherit;
    width: 90%;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 2px 0 5px 2%;
    font-weight: 400;
}

    input.txtArt[type="text"] {
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        color: #000;
    }


    input.txtArt:focus {
        outline: none;
    }


.Verzendknop {
    background-color: #395aa7;
    color: #fff;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 15px;
    text-align: center;
    vertical-align: middle;
    margin: 5%;
    padding: 0;
    border: 1px solid #b70404;
    text-decoration: none;
    width: 90%;
    line-height: 30px;
    float: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

        .Verzendknop:hover {
            cursor: pointer;
        }


    .drlist {
        border: 1px solid #395aa7;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        color: #000;
        font-size: 16px;
        line-height: 35px;
        padding: 0;
        height: 23px;
        padding-left: 5px;
        margin: 0;
        width: 92%;
    }

    .drlist[type="text"] {
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        color: #000;
    }


    .drlist:focus {
        outline: none;
    }

@media only screen and (max-width:56.25em) {


    .drlist {
        
        padding-left: 1px;
    }
}

    .Pu_Save {
        position: fixed;
        top: 50%;
        right: -75px;
        color: #000;
        font-family: Verdana, Sans-Serif;
        font-size: 16px;
        font-weight: 900;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        shape-outside: circle(30% at 50%);
        clip-path: circle(50% at 100%);
        background-color: #b70404;
        overflow: hidden;
        z-index: 1;
        background-image: url('/Images/save_icon.gif');
        background-repeat: no-repeat;
        background-size: 50px 50px;
        background-position: right
    }



    .C_Login {
        background-color: #fff;
        color: #000;
        width: 50%;
        margin: 20px 25% 0 25%;
        padding: 0;
        position: static;
        float: left;
        border-width: 0 1px 1px 0;
        border-style: solid;
        border-color: #000 #fff;
        /* css3 extras */
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    }






    .C_Logo {
        background-color: inherit;
        height: 300px;
        vertical-align: central;
        color: white;
        width: 30%;
        margin: 10px 0 10px 0;
        padding: 10px;
        position: static;
        float: left;
        border-right: 1px solid #808080;
    }



    .C_LoginText {
        background-color: inherit;
        color: white;
        width: 60%;
        margin: 0;
        padding: 0;
        position: static;
        float: left;
    }

    .C_LoginLabel {
        color: #000;
        padding-left: 17px;
        margin-top: 20px;
        font-family: "Montserrat",sans-serif;
        font-weight: 700;
        font-size: 14px;
    }

.knop {
    background-color: inherit;
    color: #808080;
    font-family: Verdana, Sans-Serif;
    font-size: 11px;
    font-weight: 500;
    border-style: none;
    width: 100%;
    text-align: left;
    -webkit-appearance: none;
    -moz-appearance: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    text-decoration: none;
}

        .knop:hover {
            color: #ff0000;
            cursor: pointer;
        }


@media only screen and (max-width:67.5em) {
    .C_Login {
        margin: 10px 5% 0 5%;
        width: 90%;
    }
}


@media only screen and (max-width:56.25em) {

    .C_Login {
        margin: 10px 0 0 5%;
        width: 90%;
        height: 400px;
    }

    .C_Logo {
        margin: 10px 5% 0 5%;
        width: 80%;
        height: auto;
        border: 0;
    }

    .C_LoginText {
        width: 100%;
    }

    .C_LoginLabel {
        padding-left: 2px;
        font-weight: 500;
        font-size: 12px;
    }
}

.CheckboxUni {
    font-size: 16px;
    color: #000;
    line-height: 20px;
    padding: 0;
    min-height: 25px;
    padding-left: 5px;
    margin: 0 0 2px 0;
    width: 100%;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    float: left;
    list-style-type: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

    .C_wachtbalk {
        border: 1px solid #395aa7;
        -moz-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px #808080;
        position: fixed;
        padding: 20px 0 10px 10px;
        top: 50%;
        left: 50%;
        color: #000;
        font-family: Verdana, Sans-Serif;
        font-size: 16px;
        font-weight: 900;
        transform: translate(-50%, -50%);
        width: 150px;
        background-color: #fff;
        overflow: hidden;
        z-index: 1;
    }

.C_doc1 {
    background-color: inherit;
    color: white;
    position: static;
    float: left;
    width: 5%;
    padding: 1% 1% 0 1%;
    margin: 1% 1% 10px 1%
}

.C_doc2 {
    background-color: inherit;
    color: white;
    position: static;
    float: left;
    width: 70%;
    border-left: 1px solid #bbb8b8;
    padding: 1% 1% 0 1%;
    margin: 1% 1% 10px 1%
}



.C_doc3 {
    background-color: inherit;
    color: white;
    position: static;
    float: left;
    width: 80%;
    padding: 1% 1% 0 1%;
    margin: 1% 1% 0 1%;
}


A.Link3, A.Link3_a {
    background-color: inherit;
    color: #395aa7;
    font-family: "FontAwesome", "Montserrat",sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    border-style: none;
    position: static;
    text-align: left;
    text-decoration: none;
}

A.Link3_a {
    color: #fff;
}

    A.Link3:link, A.Link3_a:link {
        text-decoration: none;
    }

    A.Link3:active, A.Link3_a:active {
        text-decoration: none;
    }

    A.Link3:hover, A.Link3_a:hover {
        background-color: inherit;
        color: #b70404;
        cursor: pointer;
        text-decoration: none;
    }


.PopupCel {
    position: static;
    padding: 1px;
    color: #000;
    background-color: inherit;
    color: #000;
    float: left;
    width: 100%;
   
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 1px;
   
}

.Cellborder {
    background-color: inherit;
    color: #000;
    padding: 0;
    position: static;
    float: left;
    width: 100%;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 1px;
}

.Rowborder {
    background-color: inherit;
    border-top: 1px solid #395aa7;
    
}

.tdCell1 {
    width: 25%;
}
.tdCell1a {
    width: 80%;
    padding: 1px 0 1px 0;
}

.tdCell2 {
    width: 5%;
    text-align:center;
}
.tdCell2b {
    width: 5%;
    text-align: center;
    vertical-align: text-top;
    padding: 1px 0 1px 0;
}
.tdCell2b_15 {
    width: 13%;
    text-align: center;
    vertical-align: text-top;
    padding: 1px 1% 1px 1%;
}

.tdCell2bb {
    width: 5%;
    text-align: center;
    vertical-align: text-top;
    font-size: 15px;
    font-weight: 700;
    padding: 1px 0 1px 0;
}

.tdCell2a {
    width: 8%;
    text-align: left;
    padding-right:1%;
   
}
.tdCell3 {
    width: 5%;
    display: none;
    text-align: right;
}

.tdCell4 {
    width: 65%;
    display: table-cell;
    
}

.tdCell4a {
    width: 50%;
    display: table-cell;
    padding-left: 1%;
}

.tdCell4b {
    width: 42%;
    display: table-cell;
    padding-left: 1%;
}


.tdCell5 {
    width: auto;
    display: table-cell;
    padding-left: 1%;
}

.tdCell6 {
    width: 100%
}

.tdCell6 {
    width: 98%;
    padding: 1px 0 1px 1%
}

.tdCell7 {
    width: 5%;
    padding: 1px 0 1px 1%;
    vertical-align: text-top;
}
.tdCell7a {
    width: 96%;
    padding: 1px 0 1px 1%
}


.txtPuco {
    border: 0px;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color: #000;
    font-size: 15px;
    line-height: 23px;
    padding: 0;
    height: 25px;
    padding-left: 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}



input.txtPuco[type="text"] {
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    color: #000;
    text-align: left;
    padding-left: 2px
}


input.txtPuco:focus {
    outline: none;
   
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid inherit;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

/* Style the tab content */
.tabcontent {
    display:none;
    padding: 6px 12px;
    border: 0px solid inherit;
    border-top: none;
}



@media only screen and (max-width:56.25em) {
    .PopupCel {
        position: static;
        display: block;
        padding:0;
        color: #000;
        font-family: Verdana, Sans-Serif;
        font-size: 16px;
        font-weight: 900;
        width: 90%;
        background-color: #fff;
        margin: 15px 0 10px;
    }

        .tdCell1 {
            width: 54%;
        }

        .tdCell2 {
            width: 5%;
        }
        .tdCell2a {
            width: 12%;
        }

        .tdCell3 {
            display: table-cell;
            width: auto;
        }

        .tdCell4 {
            display: none;
            width: 0%
        }

         .tdCell4a {
            display: none;
            width: 0%
        }

   

    .txtPuco {
        border: 1px solid #395aa7;
        -moz-border-radius: 35px;
        border-radius: 3px;
        font-size: 15px;
        line-height: 16px;
        font-weight: 400
    }
    }

table.Beta {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
    table.Beta tr:nth-of-type(odd) {
        background: inherit;
    }

    table.Beta th {
        background: inherit;
        color: black;
        font-weight: bold;
    }

    table.Beta td, table.Beta th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        color: black;
    }



@media only screen and (max-width: 56.25em) {

    /* Force table to not be like tables anymore */
    table.Beta, table.Beta tbody, table.Beta th, table.Beta td, table.Beta tr {
        display: block;
    }



        /* Hide table headers (but not display: none;, for accessibility) */
        table.Beta thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.Beta tr {
            border: 1px solid #ccc;
        }

        table.Beta td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

            table.Beta td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
	Label the data
	*/
            table.Beta td:nth-of-type(1):before {
                content: "Radiator";
            }

            table.Beta td:nth-of-type(2):before {
                content: "Lengte(mm)";
            }

            table.Beta td:nth-of-type(3):before {
                content: "Hoogte(mm)";
            }

            table.Beta td:nth-of-type(4):before {
                content: "Type/Diepte(mm)";
            }

            table.Beta td:nth-of-type(5):before {
                content: "Vermogen(W)";
            }

            table.Beta td:nth-of-type(6):before {
                content: "Debiet(l/h)";
            }

            table.Beta td:nth-of-type(7):before {
                content: "Regeling";
            }

            table.Beta td:nth-of-type(8):before {
                content: "Locatie";
            }

            table.Beta td:nth-of-type(9):before {
                content: "\2705   \274C    n.v.t.";
            }
}

table.Beta_0 {
    width: 100%;
    border-collapse: collapse;
}
    /* Zebra striping */
    table.Beta_0 tr:nth-of-type(odd) {
        background: inherit;
    }

    table.Beta_0 th {
        background: inherit;
        color: black;
        font-weight: bold;
    }

    table.Beta_0 td, table.Beta_0 th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align:center;
        vertical-align:middle;
        color: black;
    }



@media only screen and (max-width: 56.25em) {

    /* Force table to not be like tables anymore */
    table.Beta_0, table.Beta_0 tbody, table.Beta_0 th, table.Beta_0 td, table.Beta_0 tr {
        display: block;
    }



        /* Hide table headers (but not display: none;, for accessibility) */
        table.Beta_0 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.Beta_0 tr {
            border: 1px solid #ccc;
        }

        table.Beta_0 td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

            table.Beta_0 td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
	Label the data
	*/
            table.Beta_0 td:nth-of-type(1):before {
                content: "Nieuw";
            }

            table.Beta_0 td:nth-of-type(2):before {
                content: "Uitbreiding/wijziging";
            }

            table.Beta_0 td:nth-of-type(3):before {
                content: "Bestaand";
            }

            table.Beta_0 td:nth-of-type(4):before {
                content: "Woning";
            }
}

table.Beta_1 {
    width: 100%;
    border-collapse: collapse;
}
    /* Zebra striping */
    table.Beta_1 tr:nth-of-type(odd) {
        background: inherit;
    }

    table.Beta_1 th {
        background: inherit;
        color: black;
        font-weight: bold;
    }

    table.Beta_1 td, table.Beta_1 th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        color: black;
    }



@media only screen and (max-width: 56.25em) {

    /* Force table to not be like tables anymore */
    table.Beta_1, table.Beta_1 tbody, table.Beta_1 th, table.Beta_1 td, table.Beta_1 tr {
        display: block;
    }



        /* Hide table headers (but not display: none;, for accessibility) */
        table.Beta_1 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.Beta_1 tr {
            border: 1px solid #ccc;
        }

        table.Beta_1 td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

            table.Beta_1 td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
	Label the data
	*/
            table.Beta_1 td:nth-of-type(1):before {
                content: "T aanvoer \2103";
            }

            table.Beta_1 td:nth-of-type(2):before {
                content: "T Retour \2103";
            }

            table.Beta_1 td:nth-of-type(3):before {
                content: "\2705   \274C    n.v.t.";
            }
}

table.Beta_2 {
    width: 100%;
    border-collapse: collapse;
}
    /* Zebra striping */
    table.Beta_2 tr:nth-of-type(odd) {
        background: inherit;
    }

    table.Beta_2 th {
        background: inherit;
        color: black;
        font-weight: bold;
    }

    table.Beta_2 td, table.Beta_2 th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        color: black;
    }



@media only screen and (max-width: 56.25em) {

    /* Force table to not be like tables anymore */
    table.Beta_2, table.Beta_2 tbody, table.Beta_2 th, table.Beta_2 td, table.Beta_2 tr {
        display: block;
    }



        /* Hide table headers (but not display: none;, for accessibility) */
        table.Beta_2 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.Beta_2 tr {
            border: 1px solid #ccc;
        }

        table.Beta_2 td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

            table.Beta_2 td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
	Label the data
	*/
            table.Beta_2 td:nth-of-type(1):before {
                content: "Groepen";
            }

            table.Beta_2 td:nth-of-type(2):before {
                content: "Oppervlakte(m2)";
            }

            table.Beta_2 td:nth-of-type(3):before {
                content: "Vermogen(W)";
            }

            table.Beta_2 td:nth-of-type(4):before {
                content: "T aanvoer \2103";
            }

            table.Beta_2 td:nth-of-type(5):before {
                content: "T Retour \2103";
            }

            table.Beta_2 td:nth-of-type(6):before {
                content: "Debiet(l/h)";
            }


            table.Beta_2 td:nth-of-type(9):before {
                content: "\2705   \274C    n.v.t.";
            }
}

table.Beta_3 {
    width: 100%;
    border-collapse: collapse;
}
    /* Zebra striping */
    table.Beta_3 tr:nth-of-type(odd) {
        background: inherit;
    }

    table.Beta_3 th {
        background: inherit;
        color: black;
        font-weight: bold;
    }

    table.Beta_3 td, table.Beta_3 th {
        padding: 6px;
        border: 1px solid #ccc;
        text-align: left;
        color: black;
    }



@media only screen and (max-width: 56.25em) {

    /* Force table to not be like tables anymore */
    table.Beta_3, table.Beta_3 tbody, table.Beta_3 th, table.Beta_3 td, table.Beta_3 tr {
        display: block;
    }



        /* Hide table headers (but not display: none;, for accessibility) */
        table.Beta_3 thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        table.Beta_3 tr {
            border: 1px solid #ccc;
        }

        table.Beta_3 td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

            table.Beta_3 td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            /*
	Label the data
	*/
            table.Beta_3 td:nth-of-type(1):before {
                content: "Vermogen(W)";
            }

            table.Beta_3 td:nth-of-type(2):before {
                content: "Debiet(l/h)";
            }

            table.Beta_3 td:nth-of-type(3):before {
                content: "Type";
            }

            table.Beta_3 td:nth-of-type(4):before {
                content: "T aanvoer \2103";
            }

            table.Beta_3 td:nth-of-type(5):before {
                content: "\2705   \274C    n.v.t.";
            }
}


.img_info {
    position:static;
}


    .img_info:before {
        content: "\f05a";
        font-family: "FontAwesome";
        text-decoration: #fff;
        /*--adjust as necessary--*/
        color: #b70404;
        font-size: 30px;
        padding-right: 0;
        position: absolute;
        top: 5px;
        right: 0;
        cursor: pointer;
    }

    .img_info:hover:before {
        color: #34B484;
    }


/* #region SCS styles */

.SCS_Div30 {
    position: static;
    float: left;
    width: 33%;
    padding: 10px;
}


.SCS_frame {
    position: static;
    color: inherit;
    text-align: left;
    border: 1px solid #395aa7;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 15px 0 10px 0;
    padding:0 0 10px 10px;
    width: 100%;
    display: inline-block;
}


.SCS_Subframe01, .SCS_Subframe02, .SCS_Subframe03, .SCS_Subframe04, .SCS_Subframe05, .SCS_Subframe06 {
    position: relative;
    float: left;
    text-align: center;
    margin: 15px 2% 5px 0;
    padding: 10px;
    color: inherit;
    border: 1px solid #0b9d3b;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.SCS_Subframe01{
    width: 30%;
}

.SCS_Subframe02 {
    width: 100%;
}

.SCS_Subframe03 {
    width: 100%;
}
.SCS_Subframe04 {
    width: 97%;
    margin: 15px 2% 10px 1%;
    padding: 10px;
    display: inline-block;
}

.SCS_Subframe05 {
    width: 64%;
    margin: 15px 2% 5px 0;
    padding: 10px;
    display: inline-block;
}

.SCS_Subframe06 {
    width: 47%;
    margin: 15px 2% 10px 1%;
    padding: 10px;
    display: inline-block;
}



.SCS_Subframe01:before, .SCS_Subframe02:before, .SCS_Subframe03:before, .SCS_Subframe04:before, .SCS_Subframe05:before,.SCS_Subframe06:before {
    content: attr(data-text); /* Haalt de tekst uit een data-attribuut */
    position: absolute;
    top: -0.8em; /* iets boven de lijn */
    left: 27%;
    transform: translateX(-50%);
    background: white; /* achtergrondkleur van je pagina of container */
    padding: 0 10px;
    font-size: 10px;
    color: #0b9d3b
}

.SCS_tdCell1 {
    width: 35%;
    padding: 1px 0 1px 0;
}

.SCS_tdCell2 {
    width: 60%;
    padding: 1px 0 1px 0;
}

.SCS_tdCell3{
    width: 6%;
    padding: 1px 0 1px 0;
}

.SCS_tdCell4 {
    width: 94%;
    padding: 1px 0 1px 0;
}

.SCS_tdCell5 {
    width: 12%;
    padding: 1px 0 1px 0;
   
}
.SCS_tdCell6 {
    width: 50%;
    padding: 1px 0 1px 0;
}

.SCS_tdCell7 {
    width: 20%;
    padding: 1px 0 1px 0;
}
.SCS_tdCell8 {
   
    padding: 1px 0 1px 0;
}


.SCS_PopupCel {
    position: static;
    padding: 1px;
    color: #000;
    background-color: inherit;
    color: #000;
    float: left;
    width: 100%;
    border: 1px solid #0b9d3b;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 1px;
}

.SCS_drlist {
    position: static;
    padding: 1px;
    color: #000;
    background-color: inherit;
    color: #000;
    float: left;
    width: 100%;
    border: 1px solid #0b9d3b;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 1px;
}

    .SCS_drlist[type="text"] {
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        color: #000;
    }


    .SCS_drlist:focus {
        outline: none;
    }

.scroll-panel {
    height: 300px;
    width: 100%;
    overflow: auto;
    border: 1px solid #ccc;
}


@media only screen and (max-width:56.25em) {

    .SCS_Div30 {
        width: 100%;
    }


        .SCS_Subframe01 {
        width: 90%;
        margin: 15px 2% 1px 15px;
    }

    .SCS_Subframe04 {
        width: 96%;
        margin: 15px 2% 1px 2%;
    }
    .SCS_Subframe05 {
        width: 96%;
        margin: 15px 2% 1px 2%;
    }

    .SCS_Subframe06 {
        width: 96%;
        margin: 15px 2% 1px 2%;
    }

    .SCS_tdCell1 {
        width: 25%;
    }

    .SCS_tdCell2 {
        width: 75%;
    }

   

    /* #endregion */