@charset "utf-8";
/* CSS Document */

body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}
form.sele { border:none}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.fontff {
	font-size:18px;
	color:#FFF;
}
a.left {color: white; text-decoration: none; font-size:14px;}
a.left:link {color: white;}
a.left:visited {color: white;}
a.left:hover {color: white;}
a.left:active {color: white;}

table.tabledata {
  font-family: font-family: Arial, Helvetica, sans-serif;;
  border-collapse: collapse;
  width: 100%;
}

table.tabledata td, th {
  border: 1px solid #cccccc;
  text-align: left;
  padding: 8px;
}

table.tabledata tr:nth-child(even) {
  background-color: #dddddd;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

/* ===== menu ==== */
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color:#900;
  color: white;
}

<!--@media screen {
<!--  div.divFooter {
<!--    display: none;
<!--  }
<!--}

footer { /* Place the footer at the bottom of each page */
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Any other appropriate styling */
    color: #4f82d6;
    font-weight: bold;
	font-size:9px;
}
/* Show current page number via CSS counter feature before */
.page-number:after {
	content: counter(page);
}

.print-only{
        display: none;
    }

@page {
        size: A4;
        /*margin: 0;*/
		margin-top:25px;
		margin-bottom:50px;
		margin-left:5px;
		margin-right:5px;
		
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

@media print {
	body {
        /*width: 21cm;		
        height: 29.7cm;*/
		size: A4;
		margin-top:25px;
		margin-bottom:50px;
		margin-left:5px;
		margin-right:5px;
        /*margin: 0mm 0mm 50mm 0mm; */
        /* change the margins as you want them to be. */
		page-break-after: always;
   	}
	
	.page {
            /*margin: 0;*/
			margin-top:25px;
			margin-bottom:50px;
			margin-left:5px;
			margin-right:5px;
            border: initial;
            border-radius: initial;
            width: initial;
            min-height: initial;
            box-shadow: initial;
            background: initial;
			/*background-color: white !important;*/
            page-break-after:always;
        }
   	
   	#non-printable { display: none; }
	#printable { display: block; }
	.print {
		display: none;
	}
	
	
	.page-number:after {
		counter-increment: page;
		content: counter(page);
	}
	
	.no-print {
       display: none;
    }

    .print-only{
       display: block;
     } 	
	
	div.divFooter {
    	position: fixed;
		color: #4f82d6;
    	font-weight: bold;
		font-size:9px;
		right:5;
    	bottom: 0px;
		/*margin-bottom:-10px;*/
  	}
}