body
{   
	overflow:auto; 
	font-family: Veranda, sans-serif;
	font-size: 12px; 
	text-align: left; 
	line-height: normal;
	margin:0; 
	padding:0;
 
}

table{
	font-family: Veranda, sans-serif;
	font-size: 12px; 
	text-align: left;
	line-height: normal;
	width: 100%;
	table-layout: fixed;
	margin:0; 
	 padding:10px;
	 border: 0;
}


table.ingredients {
    font-family: Veranda, sans-serif;
    font-size: 12px;
    text-align: left;
    line-height: normal;  
    margin: 0;
    padding: 5px;
    border: 0;
}
  

optgroup{
	font-size: 12px; 
}
select{
	font-size: 12px; 
}
td.left{
	width:30%;
}
td.right{
	width:70%;
}
div.actual{
	font-size: 18px; 
	 background-color:#DACF4F;
}
div.sample_null {
	float: left;
	background-color: #80f080;
	border: 1px;
	border-color: #80d080;
	border-style: solid;
	height: 50px;
	text-align: center;
	min-width: 50px;
	margin: 1px;
}

div.sample_done {
	float: left;
	background-color: #d0d0d0;
	border: 1px;
	border-color: #808080;
	border-style: solid;
	height: 50px;
	text-align: center;
	min-width: 50px;
	margin: 1px;
}

div.sample_to_do {
	float: left;
	background-color: #80d080;
	border: 1px;
	border-color: #808080;
	border-style: solid;
	height: 50px;
	text-align: center;
	min-width: 50px;
	margin: 1px;
}

div.sample_selected {
	float: left;
	background-color: #80f080;
	border: 1px;
	border-color: #ff0000;
	border-style: solid;
	height: 50px;
	text-align: center;
	width: 50px;
	margin: 1px;
}

div.sample_group {
	clear: left;
	float: left;
	background-color: #80d0d0;
	border: 1px;
	border-color: #808080;
	border-style: solid;
	height: 50px;
	text-align: left;
	overflow: clip;
	width: 50px;
	margin: 1px;
}

div.sample_group_expanded {
	clear: left;
	float: left; 
	background-color: #80d0d0;
	border: 2px;
	border-color: #808080;
	border-style: solid;
	width: auto;
	height: auto;
	min-width: 300px;
	min-height:200px;
	text-align: left;
	z-index: 10;
	margin: 1px;
}

div.sample_grid {
	clear: left;
    margin-top:15px;
} 

select.bp {
    height: 40px;
    width: 100%;
    color: #fff;
    background-color: darkgray ;
    background-image: none;
    cursor: pointer;
}
button.bp {
    height: 40px;
    width: 80px;
    color: #fff;
    background-color: darkgray;
    background-image: none;
    cursor: pointer;
}
button.bp_small {
	height: 20px;
	width: 80px;
	color: #fff;
	background-color: darkgray;
	background-image: none;
	cursor: pointer;
}
input.bp {
	height: 40px;
	width: 90%;
	color: #fff;
	background-color: darkgray;
	background-image: none;
	cursor: text;
}

  

tr
{
	vertical-align:top;
}

th
{ 
	background-color:#DACF4F;
	text-align:left;
}
img
{
	 border:0;
}
input:focus, input.sffocus 
{
	 border:1px solid blue; 
}
 div.header
 {   
 background-color :#182B37;
 width:100%;    
    margin-left: 0px ;
  margin-right: 0px ;
 padding-top:10px ;
 padding-bottom:10px ;
  overflow: hidden;

 }
 div.header_text
 {     
    color:#ffffff;
   float: left; 
 }
 div.header_logo
 { 
    margin:0;
    float: right; 
    overflow: hidden;
 }
 img.logo{
     max-height:100px;
     max-width:140px;
     object-fit:cover;
 }
 div.main
 {   
	background-color :white;
	width:100%; 
	height:100%; 
	margin-left: auto ;
	margin-right: auto ;
	padding:5px; 
 } 
  
 div.menubar
 {  
 background-image:url(./img/menu.png);
 background-repeat:repeat-x;
 width:100%;  
    margin-left: auto ;
  margin-right: auto ;
 padding-left:20px ;
 padding-right:20px ;
 padding-top:10px ;
 padding-bottom:10px ;
 font-family: Verdana;
 font-style : normal ;
 font-size : 9pt;
 font-weight :bold;
 }
 
a.menu{
 width :140px;
 text-align : center;
 color :white;
 text-decoration : none;
 background-color :transparent;
 padding :3px;
 border-width : 1px;
 border-left-color: #c0c0c0; 
 border-left-style:solid;
 }
a.menu_sel{
 width :140px;
 text-align : center;
 color :#DACF4F;
 text-decoration : none;
 background-color :transparent;
 padding :3px;
 border-width : 1px;
 border-left-color: #c0c0c0; 
 border-left-style:solid;
 }
 
a.menu:hover{ 
 background-color :#DACF4F;
 }  
@media (min-width: 576px) 
{
	body
	{    
		font-size: 18px;  
	line-height: 1.5;
	}

	table{ 
		font-size: 18px;  
	line-height: 1.5; 
	} 
	optgroup{
		font-size: 18px; 
	} 
	select{
		font-size: 18px; 
	}
	input{
		font-size: 18px; 
	}
	div.actual{
		font-size: 24px; 
	}
	 div.menubar
	 {  
		background-image:url(./img/menu_med.png);
		font-size: 18px; 
	 }
	  
}

@media (min-width: 768px) 
{ 
	body
	{    
		font-size: 20px;  
	line-height: 2;
	}

	table{ 
		font-size: 20px;  
	line-height: 2; 
	} 
	
	optgroup{
		font-size: 20px; 
	}
	select{
		font-size: 20px; 
	}
	input{
		font-size: 20px; 
	}
	div.actual{
		font-size: 24px; 
	}
	div.menubar
	 {   
		background-image:url(./img/menu_med.png);
		font-size: 20px; 
	 } 
}

@media (min-width: 992px) {
	body
	{   
		font-size: 12px;  
	line-height: normal;
	} 

	table{ 
		font-size: 12px;   
	} 
	
	optgroup{
		font-size: 12px; 
	} 
	select{
		font-size: 12px; 
	}
	input{
		font-size: 12px; 
	}
	
	div.actual{
		font-size: 18px; 
	}
	div.menubar
	 {  
		background-image:url(./img/menu.png);
		font-size: 12px; 
	 } 
}

@media print {
    body {
        visibility: hidden; 
    }
    #header, #main_menu, #main {
        display: none;
    }
    
    #section-to-print {
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
    }
}
/*
div.tasktable {
    height:50vh;
    overflow-y: auto;
}
body.clip {
    height: 100%;
    overflow: clip; 
}*/

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    /* The actual popup (appears on top) */
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

        /* Popup arrow */
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Toggle this class when clicking on the popup container (hide and show the popup) */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s
    }

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


img.allergy_small {
    height: 28px;
    width: 24px;
    vertical-align: middle;
}

img.allergy {
    height: 52px;
    width: 48px;
    vertical-align: middle;
}


div.allergy {
    float: left;
    min-width: 75px;
}

p.small {
    margin:0;
}