/*
    Red:    #ef1821;
    Blue:   #0767b0;
    Orange: #FFA500; 
*/

body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Comic Sans MS;
	font-size: 10pt;
	color: #0767b0;
}


/* ************************************************** */
@font-face {
     font-family: digital-7; 
     src: url(../fonts/digital-7.ttf);
     src: local(digital-7), url(../fonts/digital-7.ttf);
}

.CameraIcon                     {   position: absolute;   top: 3px;  right: 35px;  }               
.TimerIcon                      {   position: absolute;   top: 3px;  right: 5px;  }               
/*
.TimerSmall                     {   position: absolute;   top: 0px;  left: 0px; margin: 0px; padding: 5px; 
                                    background-color: black; text-align: center;  border: 2px outset gray; }
.TimerSmall select              {   width: 70px; }
.TimerSmall input[type=button], 
.TimerSmall input[type=submit]  {   width: 70px; text-align: center; font-size: 10pt; }
.TimerSmall .Clock              {   font-family: digital-7; color: white; font-size: 32pt; line-height: 100%;  }

.TimerLarge                     {   position: absolute;   top: 0px;  left: 0px; margin: 0px; padding: 10px 10px 200px 10px; 
                                    background-color: black; text-align: center;  border: 2px outset gray; width: 100%; }
.TimerLarge select              {   width: 120px; }      
.TimerLarge input[type=button], 
.TimerLarge input[type=submit]  {   width: 120px; text-align: center; font-size: 24pt; font-weight: bold;}
.TimerLarge .Clock              {   font-family: digital-7; color: white; font-size: 450pt; line-height: 100%;  }
*/ 
/* ************************************************** */

.PreviewPanel           {   position: absolute;   top: 0px;  left: 0px; margin: 0px;
                            padding: 80px 200px 400px 200px; background-color: rgba(00,00,00,0.6);           }
.PreviewPanel table     {   background-color: whitesmoke; border-collapse: collapse; border: 1px solid #0767b0;     }
.PreviewPanel table th  {   border: 1px solid #0767b0; vertical-align: top; text-align: left; padding: 8px 16px;    }
.PreviewPanel table td  {   border: 1px solid #0767b0; vertical-align: top; text-align: left; padding: 8px 16px;    }

.OptionsPanel               {   position: absolute;   top: 0px;  left: 0px; width: 100%; height: 1000px; margin: 0px;
                                padding: 80px 200px 400px 200px; background-color: rgba(00,00,00,0.6);         }
.OptionsPanel fieldset      {   margin: 10px; padding: 0px 10px; }
.OptionsPanel table         {   background-color: whitesmoke; border: 1px solid #0767b0; }
.OptionsPanel td            {   padding: 10px; vertical-align: top; }
.OptionsPanel table table   {   background-color: transparent; border: none; width: auto; }
.OptionsPanel td td         {   padding: 2px; vertical-align: top; }
.SampleText                 {   margin: 3px;  width:80px; cursor:pointer; color:black; background-image: url(images/ColorText.png); background-repeat:no-repeat; text-align: right;  }
.SampleBack                 {   margin: 3px;  width:80px; cursor:pointer; color:black; background-image: url(images/ColorBack.png); background-repeat:no-repeat; text-align: right;  }
.ajax__colorPicker_container {  width: auto ! important; border: 1px solid #0767b0; }

#btnMenuShow { position: fixed; bottom:0px; left: 0px; background-attachment: scroll; }
#btnMenuHide { position: fixed; bottom:0px; left: 149px; background-attachment: scroll; }
    
.SideMenu {
    width: 160px;
    float: left;
	padding: 0px;	
	margin: 0px; 
	text-align: center;
	font-size: 9pt;	
    }
.Sidebar { 
    background-image: url(../images/Sidebar.png);
    background-repeat: repeat-y; 
    }  
.BodyMenu { 
    padding: 30px; 
    margin-left: 160px;
    }  
.BodyOnly { 
    padding: 10px 20px; 
    margin-left: 0px;
    }  



.Grid       { border-collapse: collapse; }
.Grid th    { background-color: #F0E68C;  color: #0767b0; }
.Grid th    { border: 1px solid #0767b0; vertical-align: middle; padding: 4px 8px;}
.Grid td    { border: 1px solid #0767b0; vertical-align: top;    padding: 4px 6px;    }
.Grid .Top  { vertical-align: top !important; }
.Grid 
.AltRow     { background-color: #FFFACD;  }  /* #F0FFF0; */
.Left       { text-align: left; }
.Right      { text-align: right; }
.Center     { text-align: center; margin: 0px auto; }
.FloatLeft       { float: left; margin-right: 5px;}
.FloatRight      { float: right; }

Legend      { color: #0767b0; }
.Layout th  { text-align: left; vertical-align:top; padding: 4px 8px; }
.Layout td  { text-align: left; vertical-align:top; padding: 4px 6px; }
.Tight     { border-collapse: collapse; }
.Tight th  { text-align: left; vertical-align:top; padding: 0px 2px; }
.Tight td  { text-align: left; vertical-align:top; padding: 0px 2px; }


caption { text-align: left; font-weight: bold; font-size: larger; color: orange;}

.Bold       { font-weight: bold; }
.Error      { color: #ff0000; font-size: 10pt; }
.Valid      { background-color: #99ff99; }
.Warning    { background-color: #ffcccc !important; }
.Invalid    { background-color: #ff9999; }
.Red        { color: #ea2127; }
.Black      { color: #000000; }
.Pre        { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;  }

.Pending, 
.Pending A  { color: #ea2127; }
.Done, 
.Done    A  { color: #009900; }

.RAG-Red,
.RAG-Red A  { color: #ea2127; }
.RAG-Amber,
.RAG-Amber A { color: Goldenrod; }
.RAG-Green,
.RAG-Green A { color: #009900; }
td.RAG-Green {
    background-image: url("../images/Check.png"); 
	background-position: right center;
	background-repeat: no-repeat;
}


#_xxx_Score  {
    text-align: center;
    border: none;
    width: 80px;
    padding: 5px;
    font-weight: bold;
}

.ASC { background-image: URL(../images/asc.png); background-position:right; background-repeat: no-repeat; }
.DESC { background-image: URL(../images/desc.png); background-position:right; background-repeat: no-repeat; }


UL {
	margin: 0px 0px 15px 10px;
    text-indent: 15px;
}
OL {
	margin: 0px 0px 15px 10px; 
    text-indent: 15px;
}

H1, .H1 {
	font-family: Verdana;
	font-size: 14pt;
	color: #0767b0;
	margin: 0px;
	}
H2, .H2 {
	font-family: Arial;
	font-size: 12pt;
	font-weight: bold;
	color: #0767b0;
	margin: 0px;
	padding: 0px;
	line-height: 16pt;
	}
.Header {
    font-family: Arial;
	font-size: 14pt;
	font-weight: bold;
	color: #ea2127;
	margin: 0px;
	padding: 10px 0px 0px 0px;
	cursor: pointer;
}
.Note {
	font-family: Arial;
	font-size: 8pt;
	font-weight: normal;
	color: gray;
	}
.Green {
    color: green!important;
}	
.NoEquip { 
    padding: 0px 5px; 
    width: 20px;
    float: right;
}
a 	{
	Text-decoration: none;
	color: #ea2127;
}
a img { border:0 !important; } 

a:hover	{
	Text-decoration: underline;
}
input[type=submit] { width: 100px; }
.Wrap { white-space:  normal; } 
.Nowrap { white-space: nowrap; }



.Button,
input[type=submit] {
    display: inline-block;
    text-align: center;
    width: 100px;
    margin: 1px;
    padding: 2px;
    background: #4479BA;
    color: #FFFFFF;
    border: solid 1px #20538D;
    border-radius: 4px;
    transition-duration: 0.2s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;  
    user-select:none;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.Button:hover,
input:hover[type=submit] {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}
.Button:active,
input:active[type=submit] {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    background: #2E5481;
    border: solid 1px #203E5F;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 
}
    .Button:disabled,
    input[type="submit"]:disabled {
        background: gray;
        color: silver;
    }

input[type=radio] {
    accent-color: #666666;    
}
    input[type=radio].Gear::after {
        content: url("../images/RadioGear.png");
        position: relative;
        top: -4px;
        left: -3px;
        vertical-align: middle;
    }
/* ************************************************** */
/*	border: 1px solid gray; */
.Required  {	
	background-image: url("../images/Required.gif"); 
	background-position: right Top;
	background-repeat: no-repeat; 
	}
select.Required, textarea.Required  {	
	background-image: url("../images/Required2.gif"); 
	background-position: right Top;
	background-repeat: no-repeat;
	}
select,	textarea, input[type=text], input[type=file], input[type=password] {
	font-family: Arial;	
	font-size: small;	
	}
.Border     { border: 1px solid gray; }
.NoBorder   { border: none; background-color: transparent; }

/********************************************************************* */
.MenuStatic {
	border:			    solid 1px gray;
	padding:            0px;
	margin:             6%;
	font-family:	    Arial;
	font-size:		    9pt;
	font-weight:	    bold;	
	text-align:         left; 
	}
.MenuStaticItem {
	color:			    #0767b0;
	background-color:   #FFF8DC; /* (Cornsilk) */	
	padding:		    6px 9px;
	text-indent:        0px;
	}
.MenuStaticItem:Hover {
	background-color:   #F0E68C; /* Khaki */
    }
    
.MenuDynamic {
	border:			    solid 1px gray;
	font-family:	    Arial;
	font-size:		    9pt;
	font-weight:	    bold;
	}	
.MenuDynamicItem {
	color:			    #0767b0;
	background-color:   #F0E68C; /* (Khaki) */ 
	padding:		    4px;
	text-indent:        0px;
	}
.MenuDynamicItem:Hover {
	background-color:   #BDB76B; /* Dark Khaki */
	}	

/* ************************************************** */
#map-canvas {
    float:right;
    width: 500px;
    height: 500px;
    margin: 0px 0px 0px 30px;
    padding: 1px;
    border: 1px solid #999999;
    }
    
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.Popup {
    padding: 0px 20px 0px 0px;
}
.Popup th, .Popup td { white-space: nowrap; }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.popup {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 100px;
    background-color: rgba(0,117,92,0.5);
}

    .popup > div {
        display: table;
        min-height: 300px;
        width: auto;
        min-width: 400px;
        margin: auto;
        background-color: white;
        border: 6px outset gray;
        position: relative;
        z-index: 1;
        text-align: center;
        max-height: 500px;
        overflow-y: scroll;
    }

        .popup > div > table,
        .popup > div > div {
            margin: 20px 40px !important;
        }
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* ************************************************** */
.Hidden         {   display: none;  }
.NoScreen       {   display: none;  }
@Media Print    {
    Body        {   background-image: none;  padding: 0px;  margin: 0px; }
    .Sidebar    {   background-image: none; }
	.NoPrint    {   display: none;  }
    .SideMenu   {   display: none;  }
    .BodyMenu   {   position: relative;   top: auto;   left: auto;   padding: 0px;  margin: 0px; }
    .Valid      {   background-color: transparent; }
    .Warning    {   background-color: transparent; }
    .Invalid    {   background-color: transparent; }
    .Donation   {   display: none;  }
	}
/* ************************************************** */
@media only screen and (max-device-width: 480px) { /* iPhone & iPod Touch */
    input[type="radio"] { height: 2.0em; width: 2.0em; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) { /* iPhone 4 & iPod touch 4G */
    input[type="radio"] { height: 2.0em; width: 2.0em; }
}
@media only screen and (max-device-width: 1024px) { /* iPPad */
    input[type="radio"] { height: 2.0em; width: 2.0em; }
}
/* ************************************************** */
.Donation { 
    border: 2px solid ; 
    border-radius: 25px;
    background-color: #FFFF99;
    padding: 15px;    
    width: 300px;
    clear: both;
    margin-left: 190px;
}
.Callout { 
    border: 2px solid; 
    border-radius: 25px;
    background-color: #FFFF99;
    padding: 10px 20px;    
    width: 300px;
} 
.Special {
    font-size: larger;
    font-weight: bold;
    color: green;
}    
 /*
    position: absolute;
    top: 470px;
    left: 190px;
 */
/* ************************************************** */
div.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex > div {
    flex-basis: auto;
    padding: 10px;
}
/* border: 1px dotted green; */
.col1 > div {
    flex-basis: 99%;
    padding: 10px;
}

.col2 > div {
    flex-basis: 48%;
    padding: 10px;
}

.col3 > div {
    flex-basis: 31%;
    padding: 10px;
}

.col4 > div {
    flex-basis: 24%;
    padding: 10px;
}
.Box { 
    border: 2px solid ; 
    border-radius: 25px;
    background-color: #FFFF99;
    padding: 15px;    
    width: 300px;
}    
.GrayBox {
    display: inline-block; 
    border: 1px solid #999999; 
    border-radius: 10px;
    padding: 5px 10px;
    margin-bottom: 10px;
    max-width: 700px;
}
.Boxer {
    display: inline-block;
    border: 1px solid #999999;
    padding: 2px 5px;
}    
.flexcol {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column;
  flex-flow: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;

  font-family: Verdana;	
  color: black;
  margin-top: 5px;
  height: 100%;
}
.flexrow {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
}
.flexrow > * { flex-grow: 1; flex-basis:0; -webkit-flex-grow: 1; -webkit-flex-basis:0; }

header1 { font-size: 1.2vw; font-weight: bold; }
header2 { font-size: 1.2vw; font-weight: bold; }
header3 { font-size: 1.0vw; }
header4 { font-size: 1.0vw; }
report  {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 20px 0px;
  min-height: 300px;  
}


.PrintGrid       { border-collapse: collapse; table-layout: fixed; word-wrap: break-word;
                   max-width: 100% !important; max-height: 100% !important; }
.PrintGrid th    { background-color: #dddddd;  color: black; }
.PrintGrid th    { border: 1px solid #999999; vertical-align: middle; padding: 4px 8px; font-size: 0.8vw;}
.PrintGrid td    { border: 1px solid #999999; vertical-align: top; padding: 4px 6px; font-size: 0.8vw; white-space: pre; }
.PrintNotes tr td:last-child  { min-width: 300px; }

footer1 { font-size: 1.0vw; align-self: flex-end; -webkit-align-self: flex-end; }
footer2 { font-size: 1.0vw; align-self: flex-end; -webkit-align-self: flex-end; }
@Media Print    {
    .Box            { display: none; }
    .flexcol        { page-break-after:always; }
    .PrintGrid th   { padding: 2px; font-size: 0.8vw; }
    .PrintGrid td   { padding: 2px; font-size: 0.8vw; }
    .PrintNotes th,
    .PrintNotes td  { font-size: 0.5vw; }
	}
/* ************************************************** */
.maxsize { max-height: 100px; max-width: 150px;}

.small {
	/*transform: rotate(270deg);*/
	/*transform-origin: left bottom 0;*/
    font-size: smaller;
    padding: 2px !important;
}