pre {
    font-family: Monaco,Roboto Mono,Consolas,monospace;
    /*overflow-x: auto;*/
    white-space: pre-wrap; /* Since CSS 2.1 */
    /*white-space: -moz-pre-wrap; */ /* Mozilla, since 1999 */
    /*white-space: -pre-wrap;*/ /* Opera 4-6 */
    /*white-space: -o-pre-wrap;*/ /* Opera 7 */
    /*word-wrap: break-word;*/ /* Internet Explorer 5.5+ */
}
/* 
    the used stndard for media based classes
    Medium Media(tablet): min-width:768px
    Large Media(desktop/laptop): min-width:992px
    Very Large Media(large desktop/laptop): min-width:1200px
    Extra Large Media(show screens): min-width:2000px
*/
/* maximum height 70 on Medium Media(tablet) Width-based ans Up */
@media (min-width:768px){
    .maxh70vhMMWU {
        max-height: 70vh;
        overflow: auto;
    }
    .maxh60vhMMWU {
        max-height: 60vh;
        overflow: auto;
    }
}

@media print {
    .pagebreakbeforinprint {
        page-break-before: always;
    }
    .hdeNoPrint {
        display: none;
    }
    .hdeNoScreen {
    }
    .avoidbetweenpagessplit{
        break-inside: avoid;
    }
}

@media screen {
    .hdeNoPrint {
    }

    .hdeNoScreen {
        display: none;
    }
}



.hdeNoPrintReady {
}
/* the following classes are for displaying text that appears clearly on diffrent backgrouns (used for carousel captions)*/
/*white text with 4 black text shadow*/
.hdeWt4Bs {
    color: white;
    text-shadow: 0.07em 0 black, 0 0.07em black, -0.07em 0 black, 0 -0.07em black;
}
/*white text with 8 black text shadow*/
.hde8BlackTextShadow {
    color: white;
    text-shadow: 0.05em 0 black, 0 0.05em black, -0.05em 0 black, 0 -0.05em black, -0.05em -0.05em black, -0.05em 0.05em black, 0.05em -0.05em black, 0.05em 0.05em black;
}
/* end of the following classes are for displaying text that appears clearly on diffrent backgrouns (used for carousel captions)*/

/*for embedding an iframe with dpecific dimensions such as embedding youtube video remove the dimensions put instead the RespIf class and put the iframe inside a div with one of the following DimensionedIfRespContainerXXXX clases (taken from www3 example) */
.DimensionedIfRespContainer16-9 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.DimensionedIfRespContainer4-3 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 75%; /* 4:3 Aspect Ratio */
}

.DimensionedIfRespContainer3-2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

.DimensionedIfRespContainer8-5 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

.DimensionedIfRespContainer1-1 {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
}

.RespIf {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/*end of for embedding an*/

.HdePrintableHr {
    display: block;
    height: 1px;
    background: transparent;
    width: 100%;
    border: none;
    border-top: solid 1px #000000;
    margin-top: 1px;
    margin-bottom: 1px;
}
/* to put a border arround each page put a div as the first element of the body class it with the following class and do not add any content inside it */
.HdePageborder {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 2px solid black;
}