* {

/* With these codes padding and border does not increase it's width and gives intuitive style.*/



-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html { 
  background: url(images/grass_bk.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	background-color: rgba(0,0,0,1.00);
height: 100%;
}

body {

    min-height: 100%;

    /*background-color: #A5ACAF;*/
	
	font-family: "Arial", Arial, Sans-serif;
    font-style: normal;
	font-size: 14px;
	padding: 0px;
	margin: 0px;
	

}

form {

    border: none;
    padding: 0px;
	margin: 0px;

}



.result{
    padding: 0px;
	text-align: center;
    border: none;
    width: 100%;
}



td{
  	-moz-border-radius: 7px;
  	-webkit-border-radius: 7px;
  	border-radius: 7px;
    border: none;
  	padding: 2px 2px;
}


table.info{
    padding: 10px;
    border: none;
    width: 100%;
}
 
td.outline{
	border: 2px solid #A5A5A5;
	background: rgba(142,142,142,0.00);
  	font-family: arial;
  	font-weight: bold;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: left;
}

td.grey_l2{
	border: 1px solid #A5A5A5;
	background: rgba(142,142,142,0.69);
  	font-family: arial;
  	font-weight: bold;
  	color: #DCDCDC !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: left;
	width:1%;
	white-space:nowrap;
	margin: 0px 0px 0px 15px;
}

.grey{
	border: 1px solid #A5A5A5;
	background: rgba(142,142,142,0.69);
  	font-family: arial;
  	font-weight: bold;
  	color: #DCDCDC !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: center;
}

.grey_l{
	border: 1px solid #A5A5A5;
	background: rgba(142,142,142,0.69);
  	font-family: arial;
  	font-weight: bold;
  	color: #DCDCDC !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: left;
}

.good{
	background-color: rgba(76,142,98,0.60);
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: center;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
}

.good_l2{
	background-color: rgba(76,142,98,0.60);
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: left;
	width:1%;
	white-space:nowrap;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
	margin: 0px 0px 0px 15px;
	
}

.good:hover{
	background-color: rgba(105,194,164,0.60);
}



.bad{
	background-color: rgba(142,86,76,0.60);
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: center;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
}



.mid{
	background-color: rgba(252,248,114,0.60);
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: center;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
}


.vbad{
	background-color: rgba(211,61,34,0.73);
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: center;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
}



label {

	padding-left: 15px;

	background-color: rgba(255,255,255,0.80);

display: block;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;

width: 100%;

float: center;

}

input {
    -webkit-box-shadow:inset 3px 3px 5px #111;
       -moz-box-shadow:inset 3px 3px 5px #111;
            box-shadow:inset 3px 3px 5px #111;
	background-color: rgba(255,255,255,0.80);
	width: 100%;
	padding: 12px 10px;
	margin: 0px 0px 5px 0px;
  	-webkit-border-radius: 7px;
  		-moz-border-radius: 7px;
  	border-radius: 7px;
	border: none;
}



select {
    -webkit-box-shadow:inset 3px 3px 5px #111;
       -moz-box-shadow:inset 3px 3px 5px #111;
            box-shadow:inset 3px 3px 5px #111;
	background-color: rgba(255,255,255,0.80);
	width: 100%;
	padding: 12px 10px;
	margin: 0px 0px 5px 0px;
  	-webkit-border-radius: 7px;
  		-moz-border-radius: 7px;
  	border-radius: 7px;
	border: none;
	cursor: pointer;
}

option.bold {
     font-weight:bold;
	font-weight: bolder;
	text-shadow: 1px 1px 1px black;
}

button{
    width: 100%;
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
  	padding: 10px 10px;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
  	background: #006643;
  background: -webkit-linear-gradient(#009C66, #006643);
  background: -o-linear-gradient(#009C66, #006643);
  background: linear-gradient(#009C66, #006643);
	cursor: pointer;
}

button:hover {
  color: #FFFFFF !important;
  background: #009663;
  background: linear-gradient(top,  #00B074,  #009663);
  background: -ms-linear-gradient(top,  #00B074,  #009663);
  background: -webkit-gradient(linear, left top, left bottom, from(#00B074), to(#009663));
  background: -moz-linear-gradient(top,  #00B074,  #009663);
	cursor: pointer;
}

button.button2{
    width: 100%;
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
  	padding: 10px 10px;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
	background-color: rgba(142,86,76,0.60);
	cursor: pointer;
}
button.button2:hover {
  color: #FFFFFF !important;
	background-color: rgba(142,86,76,0.82);
	cursor: pointer;
}
 
.link{
    width: 100%;
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
  	padding: 10px 10px;
  	-webkit-border-radius: 7px;
  	-moz-border-radius: 7px;
  	border-radius: 7px;
  	border: none;
  	background: #006643;
  background: -webkit-linear-gradient(rgba(0,156,102,0.70), rgba(0,102,67,0.50));
  background: -o-linear-gradient(rgba(0,156,102,0.70), rgba(0,102,67,0.50));
  background: linear-gradient(rgba(0,156,102,0.70), rgba(0,102,67,0.50));
	cursor: pointer;
}
.link:hover {
  color: #FFFFFF !important;
  background: #009663;
  background: linear-gradient(top,  rgba(0,176,116,0.70),  rgba(0,150,99,0.50));
  background: -ms-linear-gradient(top,  rgba(0,176,116,0.70),  rgba(0,150,99,0.50));
  background: -webkit-gradient(linear, left top, left bottom, from(#00B074), to(#009663));
  background: -moz-linear-gradient(top,  rgba(0,176,116,0.70),  rgba(0,150,99,0.50));
	cursor: pointer;
}

.link2{
    width: 100%;
	margin: 0px;
  	font-family: arial;
  	font-weight: bold;
  	color: #FFFFFF !important;
  	font-size: 14px;
  	text-shadow: 1px 1px 0px #000000;
	text-align: left;
  	padding: 10px 10px;
  	-webkit-border-radius: 0px 7px 7px 0px;
  	-moz-border-radius: 0px 7px 7px 0px;
  	border-radius: 0px 7px 7px 0px;
  	border: none;
  	background: #66002C;
  background: -webkit-linear-gradient(rgba(156,0,0,0.50), rgba(0,102,67,0.20));
  background: -o-linear-gradient(rgba(156,0,0,0.50), rgba(0,102,67,0.20));
  background: linear-gradient(rgba(156,0,0,0.50), rgba(0,102,67,0.20));
	cursor: pointer;
}
.link2:hover {
  color: #FFFFFF !important;
  background: #960025;
  background: linear-gradient(top,  rgba(176,0,5,0.50),  rgba(0,150,99,0.30));
  background: -ms-linear-gradient(top,  rgba(176,0,5,0.50),  rgba(0,150,99,0.30));
  background: -webkit-gradient(linear, left top, left bottom, from(#00B074), to(#009663));
  background: -moz-linear-gradient(top,  rgba(176,0,5,0.50),  rgba(0,150,99,0.30));
	cursor: pointer;
}

button.pls {

    background-color: #5E9E88;

    color: white;

    padding: 14px 20px;

    margin: 0px 0px 5px 0px;

    border: 1px;

    cursor: pointer;

    width: 100%;

}



button:hover {

    opacity: 0.8;

}



.cancelbtn {

    width: auto;

    padding: 10px 18px;

    background-color: #f44336;

}



.imgcontainer {

    text-align: center;

}

.fillin {
  background-color: #FF9EA0;
  background-image: url(images/fillin_s.png);
  background-position: 5px 5px;
  background-repeat: no-repeat;
  padding-left: 35px;
  border: 1px solid red;
  	font-weight: bold;
}

input[type=date]:focus,select:focus,input[type=text]:focus {
  background-color: #DEFCDD;
  border: 1px solid white;
}

img.avatar {

    width: 40%;

    border-radius: 50%;

}



img.banner {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;

}



.container {
	margin: 0px;
    padding:0;

    border: none;


    width: 100%;
}

#header {
	margin-top: 0px;
padding:0px;
width: 100%; /**same height as BG image**/
background-color: #006946;
	
  -moz-border-radius: 0px 0px 7px 7px;
  -webkit-border-radius: 0px 0px 7px 7px;
  border-radius: 0px 0px 7px 7px;
}

#header h1 {
margin: 0px 3px;
padding-bottom: 5px;
	padding-top: 0px;
font-size: 17px;
color: #fff;
text-align: left;
width: 100%; /**width of text box**/
text-shadow: 2px 2px 5px #000000;
}

span.psw {

    float: right;

    padding-top: 16px;

}

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;	
	margin-bottom: 0px;
	padding:  0px;
	border: 0px;
    display: block;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #292929;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #292929;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #292929;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #292929;
}
/* Change styles for span and cancel button on extra small screens */


@media screen and (max-width: 100px) {

    span.psw {

       display: block;

       float: none;

    }

    .cancelbtn {

       width: 100%;

    }

}


button.dlb {
    background-image: url( 'images/dlb.png' );
    background-size: 35px 35px;
    height: 35px;  
    width: 35px;
}
