@font-face {
    font-family: 'ligaturesymbols';
    src: url('fonts/ligaturesymbols-2.11.eot');
    src: url('fonts/ligaturesymbols-2.11.eot?#iefix') format('embedded-opentype'),
        url('fonts/ligaturesymbols-2.11.woff') format('woff'),
        url('fonts/ligaturesymbols-2.11.ttf') format('truetype'),
        url('fonts/ligaturesymbols-2.11.svg#ligaturesymbols') format('svg');
    font-weight: bold;
    font-style: normal;
}
@media only screen and (max-width: 760px) {
    #widescreen { display: none; }
}
@media screen
{
    table { page-break-inside:avoid }
    #line2 { 
        font-size:small; 
        width:100px;
        text-align: center;
    }
    #CurrentOrderInfo{ 
        text-align: center;
    }
    #OrderNo{ 
        font-size:9px;
        display: inline-block;
        vertical-align: top;
        font-stretch: ultra-condensed;
        opacity: 0.5;
    } 
    #OrderInfo{ 
        font-size:9px;
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        font-stretch: ultra-condensed;
    }
    #ClientInfo{ 
        font-size:9px;
        display: inline-block;
        vertical-align: top;
        font-stretch: ultra-condensed;
        opacity: 0.5;
    }        
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
            "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
            "Helvetica Neue", Arial, sans-serif;
        font-size: medium;
        font-weight: normal ;
        color: #000000 ;
        width: auto;
        min-width: 310px;
        /*background-color: whitesmoke;*/
		background-color: #ff8800;
        padding: 3px;
        margin: 0px ;
        border: 0px solid black;
        -webkit-border-radius: 5px ; 
        margin-top: 0px ;
        margin-bottom: 0px ;
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    }

/*    #bodydiv::after {
        content: "";
        background-image:url(jul.jpg);
        background-size: 100%;
        opacity: 0.1;
        overflow: scroll;
        left: 0;
        width: 110%;
        height: 100%;
        top: 0;
        position: fixed;
        z-index: -1;
    }*/

    table { page-break-inside:avoid }
    #CP
    {
        width: 100%; 
        display: table;
    }
    #Heading
    {
        height: auto;
        margin: 0 auto;
    }
    #HeadingItem1
    {
        float: left;
        text-align: center;
        margin: 0 auto;
        font-size: 20px;
        width: 20%;
        height: 48px;
        position:relative;
    }
    #Info1
    {
        font-size: 8px;
        visibility: hidden;
    }
    #Info2
    {
        font-size: 8px;
    }
    #Info3
    {
        font-size: 8px;
    }
    #HeadingItem2
    {
        float: left;
        margin: 0 auto;
        text-align: center;
        position:relative;
        width: 60%;
        height: 48px;

    }
    #HeadingItem3
    {
        float: left;
        margin: 0px;
        width: 10%;
        text-align: center;
        position:relative;
        font-size: 5px;
        height: 48px;
    }
    
    #HeadingItem3 input,h2
    {
        margin: 0px;
    }
    
    #HeadingItem4
    {
        float: left;
        margin: 0 auto;
        width: 10%;
        text-align: center;
        position:relative;
        font-size: 33px;
        height: 48px;
    }

    #MenuButton
    {
        position:absolute;
        top:0;
        right:0;
        width: 30px;
        height: 30px;
        border: 0px solid #aaaaaa ;
        -webkit-border-radius: 5px ; 
        margin : 5px;
        display: table-cell;
    }
    #CPLogo
    {
        display: table-cell;
        height: auto;
        width: 100%;
        max-width: 214px;
        margin: 0 auto;
        /*        content:url(images/ACsenteret_logo.png);*/
    }
    .dialog {
        z-index: 1000;
        position: absolute;
        width: 90%;
        height: 100px;
        background-color: inherit;
        color: white;
    }
    #popup {
        z-index: 1001;
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        background-color: inherit;
        border: 2px solid black ;
        -webkit-border-radius: 5px ; 
    }
    label a {
        padding-left: 20px;
    }
    #popupembed {
        width: 100%;
    }
    #labelansweredby {
        font-size:80%;
        opacity: 0.9
    }
    .Checklist
    {
        padding: 0px;
        margin: 0px ;
        border: 0px solid black ;
        /*-webkit-border-radius: 5px ; */
        margin-top: 3px ;
        margin-bottom: 3px ;
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    }
    .q:focus {
        border: 3px solid orange ;
    }
    .question
    {
        page-break-inside:avoid;
        padding: 0px;
        /*margin: 0px ;*/
        border-top: 0px solid black ;
        border-left: 2px solid black ;
        border-right: 2px solid black ;
        border-bottom: 2px solid black ;
        margin-left: 5px ;
        margin-top: -3px ;
        margin-right: 5px ;
        /*margin-bottom: 3px ;*/
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    } 
    /*.question:nth-child(odd) {filter: brightness(110%);}#fdf5e6  #f2f2f1*/
	.question:nth-child(odd) {background-color: #fff0ee ;}
    .question:nth-child(even) {background-color: oldlace;}
	
    [data-answered="yes"] {
        border: 3px solid green ;
    } 

    button,input,select,textarea {
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 5px;
        background-color: white ;
        /*filter: brightness(100%);*/
        font-size: 120%;
        font-weight: 600; 
        max-width: 90%;
        border: 1px solid grey ;
		-webkit-border-radius: 3px ;
    }
	button {
		-webkit-box-shadow: 2px 2px 0px DarkGray ;
		-moz-box-shadow: 2px 2px 0x DarkGray ;
		box-shadow: 2px 2px 0px DarkGray ;
	}
    textarea {
        font-size: 160%;
    }

    .button-container form,
    .button-container form div {
        display: inline;
    }
    .menubutton {
        width: auto;  
        height: 2em;
        
    }
    div > canvas {
        height : auto;
        max-height: 90vh;
        max-width: 90vw;
    }
    div > .imgwrapper {
        width: auto;
        height : auto;
        max-height: 50vh;
        max-width: 90vw;

    }
    div > .zoomimage {
        width: auto;
        height : auto;
        max-height: 50vh;
        max-width: 90vw;
        border: 2px solid black;
    }
    .zoomimage {
        vertical-align: middle;
        display: inline-block;
        -webkit-border-radius: 5px ; 
    }
    .button-container button {
        display: inline;
        vertical-align: middle;
    }

}
@media screen and (max-width: 365px) {
    button,input,select {
        margin-top: 5px;
        margin-left: 4px;
        margin-right: 4px;
        margin-bottom: 5px;
        font-size: inherit;
        max-width: 90%;
    }
}
@media screen and (max-width: 400px) and (min-width: 365px){
    button,input,select {
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: inherit;
        max-width: 90%;
    }
}
@media screen and (max-width: 580px) and (min-width: 400px) {
    button,input,select {
        margin-top: 5px;
        margin-left: 8px;
        margin-right: 8px;
        margin-bottom: 5px;
        font-size: inherit;
        max-width: 90%;
    }
}

@media print
{
    @page {
        size: auto;   /* auto is the initial value */
        margin: 0;  /* this affects the margin in the printer settings */
    }
    table { page-break-inside:avoid }
    #HeadingItem1
    {
        display: none;
    }
    #Info1
    {
        display: none;
    }
    #Info2
    {
        display: none;
    }
    #Info3
    {
        display: hidden;
        width: 20%;
    }
    #HeadingItem2
    {
        margin: 0 auto;
        text-align: center;
        position:relative;
        width: 60%;
    }
    #HeadingItem3
    {
        display: none;
        width: 10%;
    }
    #HeadingItem4
    {
        display: none;
        width: 10%;
    }

    #line2 { 
        font-size:small; 
        width:100px;
        text-align: center;
    }
    #CurrentOrderInfo{ 
        text-align: center;
    }
    #OrderNo{ 
        font-size:9px;
        display: none;
        vertical-align: top;
        font-stretch: ultra-condensed;
        opacity: 0.5;
    } 
    #OrderInfo{ 
        font-size:9px;
        display: inline-block;
        vertical-align: top;
        font-weight: bold;
        font-stretch: ultra-condensed;
    }
    #ClientInfo{ 
        font-size:9px;
        display: inline-block;
        vertical-align: top;
        font-stretch: ultra-condensed;
        opacity: 0.5;
    }        
    body {
        font-family: Helvetica;
        font-size: small;
        color: #000000 ;
        width: auto;
        max-width: 1014px;
        min-width: 310px;
        background-color: #ffffff;
        padding: 3px;
        margin: 0px ;
        border: 0px solid black;
        -webkit-border-radius: 5px ; 
        margin-top: 0px ;
        margin-bottom: 0px ;
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    }
    table { page-break-inside:avoid }
    #CP
    {
        width: 100%; 
        display: table;
    }
    #Heading
    {
        height: auto;
        margin: 0 auto;
    }
    #MenuButton
    {
        display: none;
    }
    #CPLogo
    {
        display: table-cell;
        height: auto;
        width: 100%;
        max-width: 214px;
        margin: 0 auto;
        /*        content:url(images/ACsenteret_logo.png);*/
    }
    .dialog {
        z-index: 1000;
        position: absolute;
        width: 90%;
        height: 100px;
        background-color: grey;
        color: white;
    }
    .Checklist
    {
        background-color: #ffffff ;
        padding: 0px;
        margin: 0px ;
        border: 1px solid black ;
        -webkit-border-radius: 5px ; 
        margin-top: 3px ;
        margin-bottom: 3px ;
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    }
    .q:focus {
        border: 0px solid orange ;
    }
    .question
    {
        page-break-inside:avoid;
        background-color: #ffffff ;
        padding: 5px;
        margin: 3px ;
        border: 3px solid black ;
        -webkit-border-radius: 3px ; 
        margin-top: 3px ;
        margin-bottom: 3px ;
        color: black;
        -webkit-border-vertical-spacing: 0px;
        -webkit-border-horizontal-spacing: 0px;
    }   
    [data-answered="yes"] {
        border: 3px solid green ;
    } 
    button,input,select {
        margin-top: 5px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 5px;
        font-size: inherit;
        max-width: 90%;
    }
    .button-container form,
    .button-container form div {
        display: inline;
    }
    .menubutton {
        width: auto;  
        height: 2em;
    }
    div > canvas {
        height : auto;
        max-height: 90vh;
        max-width: 90vw;
    }
    div > .imgwrapper {
        width: auto;
        height : auto;
        max-height: 50vh;
        max-width: 90vw;

    }
    div > .zoomimage {
        width: auto;
        height : auto;
        max-height: 50vh;
        max-width: 90vw;
        border: 2px solid black;
    }
    .zoomimage {
        vertical-align: middle;
        display: inline-block;
        -webkit-border-radius: 5px ; 
    }
    .button-container button {
        display: inline;
        vertical-align: middle;
    }
}