body {
 margin: 0px;
 padding: 0px;
 width: 100%;
 font-family: Arial,Verdana;
 font-size: 16px;
}
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
 font-size: 16px;
 padding: 0px 3px;
}
* {
 margin: 0px auto;
 padding: 0px;
}
div.clearDiv {
 clear: both;
 float: none;
}
#put-center {
 display:inline-block;
 width: 100%;
 text-align:center;
}
#form-container {
 display:inline-block;
 margin: 0px auto;
}
.error {
 background-color:red;
 color:white;
 border-radius: 5px;
}
#logo {
 width:50%;
 float:left;
}
#img-in-navbar {
 display:none;
}
#logo img {
 width:100%;
}
#ads {
 width:50%;
 float:left;
}
#ads img {
 width:100%;
}
#ulbar {
 width:100%;
 background-color: red;
 color: white;
}
#username {
 width: 60%;
 float: left;
 padding: 2px 0px;
}
#note {
 width: 20%;
 float: left;
 text-align:right;
}
#note-area {
 width: 90%;
}
#logout {
 width: 20%;
 float: left;
 text-align:right;
 padding: 2px 0px;
}
#navbar {
 background-color:#000;
 display:block;
}
#menus-holder {
 display:none;
 width:70%;
 position:absolute;
 background-color:#000;
 opacity: 0.9;
 filter: alpha(opacity=90); 
}
#menus-controller {
 display:inline-block;
}
#menus-controller, #logout a{
 text-decoration:none;
 color:#FFF;
}
.menu {
 padding:4px;
 border:none;
 font-size:16px;
 cursor:pointer; 
 width: 99%;
 background-color:#000;
 /*background-color:rgba(0,0,0,0.5);*/
 color:#FFF;
 text-align:left;
}
.menu:hover {
 background-color:#222; 
}
.menu-items-container  {
 padding-left:8px;
 display:none;
 position:relative;
}
.menu-item-container {
 background-color:#000; 
 padding: 3px;
 white-space:normal;
}
.menu-item {
 color:#FFF;
 padding:2px;
 border-radius:3px;
 text-decoration:none;
}
.menu-item:hover {
 background-color:#3C3C3C;
}
#veca {
 margin: 0;
 padding: 0;
 width: 100%;
 min-height: 435px;
}
#veca #loginform {
 margin: 75px auto;
 padding: 0;
 font-size: 1em;
}
#veca #loginform table{
 margin: 0 auto;
 padding: 10px 5px;
 width: 94%;
 background-color:#0B6623;
 color:white;
 border-radius: 5px;
}
fieldset {
 margin: 5px;
 padding: 0px;
 background-color: teal;
 color:#FFF;
 border:0px;
 border-radius: 5px;
 font-size:0.9em;
 min-width: 0;
}
legend {
 background-color: teal;
 color:#FFF;
 padding: 3px;
 border-radius: 5px;
}
fieldset table {
 display:inline-block;
 margin: 0;
 padding: 0;
 width: 100%;
 border: inherit;
 border-collapse: collapse;
}
input,select {
 box-sizing : border-box;
}
input {
 padding:3px;
 border-radius:3px;
}
#summary {
 background-color: lightblue;
}
#summary td {
 padding:4px;
 border:1px solid white;
 font-size: 12px;
}
#veca span {
 display: block;
 text-align:justify;
 padding: 5px;
}
#footer,#header {
 background-color: #006300;
 color: white;
 text-align: center;
 margin:0px;
 padding:0px;
}
#footer {
 min-height:124px;
}
/*The Modal (background) */
.modal {
 display: none; /* Hidden by default*/
 position: fixed;  /* Stay in place*/
 z-index: 1; /* Sit on top */
 padding-top: 100px;
 left: 0;
 top: 0;
 width:100%;
 height:100%;
 overflow: auto; /* Enable scroll if needed*/
 background-color: rgb(0,0,0); /*fallback color*/
 background-color: rgba(0,0,0,0.4); /* Balck w/ opacity */
}
/*Modal Content*/
.modal-content {
 position: relative;
 background-color: #fefefe;
 color: #000;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 80%;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,019);
 -webkit-animation-name: animatestop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatestop;
 animation-duration: 0.4s;
}
/*The Modal for report(background) */
.modal-for-report {
 display: none; /* Hidden by default*/
 position: absolute;  /* Stay in place*/
 z-index: 1; /* Sit on top */
 padding-top: 5px;
 left: 0;
 top: 0;
 width:100%;
 height:100%;
 overflow: auto; /* Enable scroll if needed*/
 background-color: rgb(0,0,0); /*fallback color*/
 background-color: rgba(0,0,0,0.4); /* Balck w/ opacity */
}
/*Modal Content for report*/
.modal-content-for-report {
 position: relative;
 background-color: #fefefe;
 color: #000;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 86%;
 overflow: auto;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,019);
 -webkit-animation-name: animatestop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatestop;
 animation-duration: 0.4s;
}
/*Add Animation*/
@-webkit-keyframes animatestop {
 from {top:-300px;opacity:0}
 to{top:0;opacity:1}
}
@keyframes animatestop {
 from {top:-300px;opacity:0}
 to{top:0;opacity:1}
}
/*Close Button*/
.close {
 color:white;
 float:right;
 font-size: 28px;
 font-weight: bold;
}
.close:hover,
.close:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
.modal-header {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}
button {
 padding: 3px;
 border-radius: 2px;
}
.modal-body {
 padding: 2px 16px;
}
.modal-footer {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}
table.table-for-display th,td {
 padding: 4px;
}
#change-my-pswd-holder {
 display: block;
 margin: 15px 5px;
 font-size: 12px;
 font-style: italic;
}
#change-my-pswd-holder a {
 text-decoration: none;
 color: silver;
 padding: 2px;
 border-radius: 2px;
}
#photo-holder {
 width: 60%;
}
#edit-user-display td {
 width: 33%;
 font-size: 1em;
}
#edit-user-display  {
 width: auto;
}
.wrapper {
 overflow:hidden;
 overflow-x:scroll;
 overflow-y:scroll;
 height:auto;
 font-size:1em;
}
.wrapper2 {
 overflow:hidden;
 overflow-x:scroll;
 overflow-y:scroll;
 height:auto;
 font-size:1em;
}
.wrapper table {
 width:96%;
 overflow-x:scroll;
 overflow-y:scroll;
 height:auto;
 padding:0 auto;
}
.wrapper2 table {
 width:100%;
 overflow-x:scroll;
 height:auto;
 padding:0 auto;
f}
#reportTable {
 width:100%;
 overflow-x:scroll;
 height:auto;
 padding:0 auto;
}
#edit-area {
 overflow:hidden;
 text-align:center;
 margin: 0px auto;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
#reportTable tr:nth-child(even){background-color: #f2f2f2;}

.circle-text {
display: table-cell;
height: 200px; /*change this and the width
for the size of your initial circle*/
width: 200px;
text-align: center;
vertical-align: middle;
border-radius: 50%;
/*make it pretty*/
background: #0066ff;
color: #fff;
font: 0.5em "josefin sans", arial; /*change this
}