body {
    overflow: hidden;
    background: transparent url(/css/images/IdyiaUI/achtergrond_1920x1080.jpg) no-repeat;
    background-size: cover;
}

header, #EloHeader {
    height: 9.5rem;
    position: fixed;
    top: 0;
}

#EloBody, #EloPfBody {
    position: absolute;
    width: 100%;
    height: calc(100% - 10.5rem);
    overflow-y: hidden;
    background-color: transparent;
}

footer, #EloFooter {
    background-color: transparent;
    height: 1rem;
    position: fixed;
    bottom: 0;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ClsGenericRect,
.ClsScroll {
    overflow: auto;
}

.ClsYScroll {overflow-y: auto;}

.ClsXScroll { overflow-x: auto;}

.ClsNoScroll {overflow: hidden;}

.ClsDspNone {display:none;}

.ClsTransp0 {opacity: 0;}

.ClsText_Center {text-align: center;}

/* Font classes.                            */
.FontLilitaOne {font-family: 'Lilita One', cursive;}

.ClsFontLilitaOne {font-family: 'Lilita One', Arial;}

.ClsFontLilitaOneBold {
    font-family: 'Lilita One', Arial;
    font-weight: bold;
}

.ClsNormal {font-weight: normal;}

.ClsBold {font-weight: bold;}

.ClsBolder {font-weight: bolder;}

.ClsSchedDisc {
    height: 1.33333333333333%;
    top: 105.333333333333%;
    width: 15%;
}

/* CSS for borderlines */
.ClsBorder {
    border: 1px solid #E8E8E8;
}

.ClsTopBorder,
.ClsTBorder {
    border-top: 1px solid #E8E8E8;
}

.ClsBottomBorder,
.ClsBBorder {
    border-bottom: 1px solid #E8E8E8;
}

 /* CSS for borderlines */
.ClsRBorder {
    border: 1px solid #E8E8E8;
}

.ClsLBorder {
    border-left: 1px solid #E8E8E8;
}

.ClsBotAndRightBorder,
.ClsBAndRBorder {
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsTAndLBorder {
    border-left: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsTAndRBorder {
    border-right: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsBAndLBorder {
    border-left: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsLAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
}

.ClsLBAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsLTAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsTAndBBorder {
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
} {
    border-right: 1px solid #E8E8E8;
}

.ClsLBorder {
    border-left: 1px solid #E8E8E8;
}

.ClsBotAndRightBorder,
.ClsBAndRBorder {
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsTAndLBorder {
    border-left: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsTAndRBorder {
    border-right: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsBAndLBorder {
    border-left: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsLAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
}

.ClsLBAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.ClsLTAndRBorder {
    border-left: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
    border-top: 1px solid #E8E8E8;
}

.ClsTAndBBorder {
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}
.Cls_H1 {height:1em;}
.Cls_H2 {height: 2em;}
.Cls_H2v5 {height: 2.5em;}
.Cls_H4v5 {height: 4.5em;}
.Cls_H4 {height: 4em;}
.Cls_H5 {height :5em;}
.Cls_HAuto {height:auto;}

.Cls_H1R {height: 1rem;}
.Cls_H2R {height: 2rem;}
.Cls_H2v5R {height: 2.5rem;}
.Cls_H4v5R {height: 4.5rem;}
.Cls_H4R {height: 4rem;}
.Cls_H5R {height: 5rem;}
.Cls_H3V375R {height: 3.375rem;}

.ClsW100H2v25 {
    width: 100%;
    height: 2.25em;
    float: left;
    padding-top: 0.25em;
}

.Cls_Mw0 {
    margin-left: 0;
    margin-right: 0;
}

.Cls_Mp0 {
    padding-left: 0;
    padding-right: 0;
}

/* CSS used in multiple pages */

#PP6701001_PupPortalScndContainer,
#PP6701001_PupPortalScndTitle_Rect {
    color: #8E196A;
}

/*.ClsPupDayWeekTtl {*/ /* replace with w-100 h-100 for bootstrap */
    /*width: 100%;
    height: 100%;
}*/

/* Classes for font-size conversions. */

/*based on 12 px result = 13px */
.ClsFntSz12v13 {font-size: 108.333%;}

/*based on 12 px result = 14px */
.ClsFntSz12v14 {font-size: 116.67%;}

/*based on 12 px result = 16px */
.ClsFntSz12v16 {font-size: 141.7%;}

/*based on 12 px result = 18px */
.ClsFntSz12v18 {font-size: 150%;}

/*based on 12 px result = 22px */
.ClsFntSz12v22 {font-size: 183%;}

/*based on 12 px result = 24px */
.ClsFntSz12v24 {font-size: 200%;}

/*based on 12 px result = 28px */
.ClsFntSz12v28 {font-size: 233.28%;}

/* Several classes for often used width */
.clsW100H2v5O {
    width: 100%;
    height: 2.5em;
}

.clsW100HautoO {
    width: 100%;
    height: auto;
}

.clsW100HautoFLP,
.clsW100Hauto {
    width: 100%;
    height: auto;
    float: left;
    padding-top: 0.25em;
}

.clsW100H2v25FLP,
.clsW100H2v25 {
    width: 100%;
    height: 2.25em;
    float: left;
    padding-top: 0.25em;
}

.clsW98H2v5FL {
    width: 98%;
    height: 2.5em;
    float: left;
    padding-top: 1em;
    padding-left: 1%;
}

.clsW99v9H2v5FLP,
.clsW99v9H2v5 {
    width: 100%;
    height: 2.25em;
    float: left;
    padding-top: 0.25em;
}

.clsW99v9HautoFL,
.clsW99v9Hauto {
    width: 100%;
    height: auto;
    float: left;
}

.clsW30H2v5FL,
.clsW30H2v5 {
    width: 30%;
    height: 2.5em;
    float: left;
}

.clsW30H50FlR,
.clsW30H50FlR {
    width: 30%;
    height: 50%;
    float: right;
}

.clsW50H50FR,
.clsW50H50FlR {
    width: 50%;
    height: 50%;
    float: right;
}

.ClsW100pFlRght {
    width: 100%;
    float: right;
}

.ClsW50p {
    width: 50%;
}

.ClsW100H100p {
    width: 100%;
    height: 100%;
}

.ClsHeight2v5 {
    height: 2.5em;
}

.ClsHaut {
    height: auto;
}

.AppClsLeftAlign0v5,
.AppClsLeftAlign1v5,
.AppClsLeftAlign2v5,
.AppClsLeftAlign3,
.AppClsLeftAlign4,
.AppClsLeftAlign4v5,
.AppClsLeftAlign5,
.AppClsLeftAlign6,
.AppClsLeftAlign7,
.AppClsLeftAlign7v5,
.AppClsLeftAlign8,
.AppClsLeftAlign10,
.AppClsLeftAlign11,
.AppClsLeftAlign12,
.AppClsLeftAlign13,
.AppClsLeftAlign15,
.AppClsLeftAlign20,
.AppClsLeftAlign25 {
    float: left;
    margin-right: 0.5em;
    padding-top: 0.2em;
}

.ClsPos0v5,
.ClsPos1v5,
.ClsPos2v5,
.ClsPos3,
.ClsPos4,
.ClsPos4v5,
.ClsPos5,
.ClsPos6,
.ClsPos7,
.ClsPos7v5,
.ClsPos8,
.ClsPos10,
.ClsPos11,
.ClsPos12,
.ClsPos13,
.ClsPos15,
.ClsPos20,
.ClsPos25 {
    padding-left: 0;
}

.AppClsLeftAlign25,
.ClsPos25 {width: 25em;}

.AppClsLeftAlign20,
.ClsPos20 {width: 20em;}

.AppClsLeftAlign15,
.ClsPos15 {width: 15em;}

.AppClsLeftAlign13,
.ClsPos13 {width: 13em;}

.AppClsLeftAlign12,
.ClsPos12 {width: 12em;}

.AppClsLeftAlign11,
.ClsPos11 {width: 11em;}

.AppClsLeftAlign10,
.ClsPos10 {width: 10em;}

.AppClsLeftAlign8,
.ClsPos8 {width: 8em;}

.AppClsLeftAlign7v5,
.ClsPos7v5 {width: 7.5em;}

.AppClsLeftAlign7,
.ClsPos7 {width: 7em;}

.AppClsLeftAlign6,
.ClsPos6 {width: 6em;}

.AppClsLeftAlign5,
.ClsPos5 {width: 5em;}

.AppClsLeftAlign4v5,
.ClsPos4v5 {width: 4.5em;}

.AppClsLeftAlign4,
.ClsPos4 {width: 4em;}

.AppClsLeftAlign3,
.ClsPos3 {width: 3em;}

.AppClsLeftAlign2v5,
.ClsPos2v5 {width: 2.5em;}

.AppClsLeftAlign1v5,
.ClsPos1v5 {width: 1.5em;}

.AppClsLeftAlign0v5,
.ClsPos0v5 {width: 0.5em;}