body{
background:#f0f3f4; 
}
#container{
height:auto;
width:80%;
margin-left:10%;
border:2px;
border-color:550000;
}
#header{
width:100%;
height:18%;
background-repeat:repeat; 
background-position:0px 0px;
margin:auto;
/*background:url(images/bg.jpg);
*/ 
}



#header form {
     float: right; 
     margin-right: 30px; 
     height: 40px; 
     padding-top: 50px;
 }
 
 #header form label {
     display: inline-block; 
     margin: -25 2px;
 }
 
 #header_container form input {}
 
 #header form #s-user, 
 #header form #s-pass {
     display: block;
     width: 200px;
     border: 1px solid #eee;
     padding: 3px 0 3px 0;
     margin-bottom: -1px;
 }
 
 #header form .submit {
     height: 23px;
     width: 100px;
     vertical-align: bottom;
     background: #05a1c7; 
     color: #fff;
     border: 1px solid #ddd;
     -moz-border-radius: 5px;    
     border-radius: 5px;
     float:ri;
     }
 #header form .submit2 {
     height: auto;
     width: auto;
     vertical-align: bottom;
     background: #05a1c7; 
     color: #fff;
     border: 1px solid #ddd;
     -moz-border-radius: 5px;    
     border-radius: 5px;
     float:middle;
}
#main_label{
     display: inline-block; 
     margin: -25 2px;
     height: auto;
     width: 220px;
     vertical-align: bottom;
     background: #05a1c7; 
     color: #fff;
     border: 1px solid #ddd;
     -moz-border-radius: 5px;    
     border-radius: 5px;
     float:none;
}

#logo{
float:left;
padding:0px;
height:100%;
width:100%;
}
#center-content{
height:100%;
width:100%;

font-family: 'Raleway', sans-serif; 
}
div.form-container
{
margin-left:32%;
margin-right:32%;
margin-top:30px;
height:245px;
width:auto;
border:2px;
border-style:solid;
}
div.form-heading
{
padding:10px;
height:50px;
font-family: 'Raleway', sans-serif; 
color:white;
font-weight:bold;
font-size:22px;
background-color:#05a1c7
}
div.form-row
{
padding:8px;
height:25px;
}
div.form-row-big
{
padding:5px;
height:200px;
}
label{
font-family: 'Raleway', sans-serif; 
font-size:12px;
padding:10px;
width:200px;
float:left;
font-weight:bold;
}
input{
float:left;
height:25px;
width:250px;
}
input.sub{
float:left;
height:25px;
width:150px;
margin-left:100px;
}
textarea
{
font-family: 'Raleway', sans-serif; 
}
div.space
{
height:10px;
}
div.imageContainer 
{
width:200px; 
height:200px; 
background-image: url(images/logo.png);
float:left;
padding:0px;
height:100%;
width:100%;
}
#footer
{
margin-top:10px;
color:white;
text-align:center;
height:30px;
width:100%;
background-color:#05a1c7;
}
#profilebox{
height:42px;
width:98%;
background-color:black;
padding-top:10px;
padding-left:12px;
padding-bottom:5px;
padding-right:10px;
font-family: 'Raleway', sans-serif; 
font-size:15px;
color:cyan;
}
div.imgage{

width:0px;
float:left;
}
div.profileinfo{
float:right;
margin-top:30px;
margin-right:10px;
}

div.profileinfo2{
text-align: center;
display: block;
    margin: auto;
}

div.midbutton{
float:right;
}
div.action{
float:left;
height:80px;
width:200px;
background-color:#FFFFCC;
font-family: 'Raleway', sans-serif; 
font-size:16px;
font-weight:bold;
padding-left:10px;
padding-top:5px;
}
div.userbody{
height:30px;
width:10px;
margin-top:10px;
}
a {
color: #10a3e8;
margin-top:10px;
font-family: 'Raleway', sans-serif; 
text-decoration:none;
font-size:16px;}
div.rheading{
font-family: 'Raleway', sans-serif; 
font-size:18px;
font-weight:bold;
padding:10px,10px,10px,10px;
color:#FF9900;
background-color:#FFFFCC;
}
div.message{
height:150px;
width:8328x;
margin-left:230px;
background-color:#999999;
padding-top:10px;
padding-left:10px;
}

div.messagetext{
font-family: 'Raleway', sans-serif; 
font-size:16px;
margin-left:120px;
color:#FFFFFF;
}

div.fieldset-auto-width {
         display: inline-block;
		 margin-left:100;
		 
    }

#menuwrapper,
#menuwrapper ul,
#menuwrapper li,
#menuwrapper a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Raleway', sans-serif; 
  font-size: 14px;
}
#menuwrapper ul li{
border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
    cursor:pointer;
}
#menuwrapper ul li:hover{
z-index : 1;
    position:relative;
}
#menuwrapper a {
  line-height: 1.3;
}
#menuwrapper {
  width: 220px;
  float:left;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 3px;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#menuwrapper ul li {
  margin: 0 0 2px 0;
}
#menuwrapper ul li:last-child {
  margin: 0;
}
#menuwrapper ul li a {
	position:relative;
	z-index : 1;
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
    text-decoration:none;
}
#menuwrapper ul li a span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}
#menuwrapper ul li:hover ul {
    left:220px;
    top:0px;
      display: block;

  
}


#menuwrapper ul li ul{
    position:absolute;
	z-index : 1;
    display:none;
	  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
    text-decoration:none;
}

#menuwrapper ul li ul:hover{
    left:220px;
    top:0px;
    display:block;
	color: #ffffff;
	  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
    border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}


#menuwrapper ul li a:hover {
  text-decoration: none;
}
#menuwrapper ul li.active {
  border-bottom: none;
}
#menuwrapper ul li.active a {
  background: #97be10;
  background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));
  background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);
  background: linear-gradient(#97be10 0%, #79980d 100%);
  color: #fff;
  text-shadow: 0 1px 1px #000;
  border: 1px solid #79980d;
}
#menuwrapper ul li.active a span {
  border: 1px solid #97be10;
}
#menuwrapper ul li.has-sub a span {
  background: url(images/icon_plus.png) 98% center no-repeat;
}
#menuwrapper ul li.has-sub.active a span {
  background: url(images/icon_minus.png) 98% center no-repeat;
}

#menuwrapper ul li ul li a{
    color: #ffffff;
    display:inline-block;
    width:220px;
}

#menuwrapper ul ul {
  padding: 5px 12px;
  display: none;
}
#menuwrapper ul ul li {
  padding: 3px 0;
}
#menuwrapper ul ul a {
  display: block;
  color: #595959;
  font-size: 13px;
  font-weight: bold;
}
#menuwrapper ul a:hover {
  color: cyan;
}

#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  font-weight: normal;
  text-decoration: none;
  line-height: 1;
  font-family: 'Raleway', sans-serif; 
  font-size: 14px;
  position: relative;
}
#cssmenu a {
  line-height: 1.3;
}
#cssmenu {
  margin-top:10px;
  float:left;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 3px;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu ul li {
  margin: 0 0 2px 0;
}
#cssmenu ul li:last-child {
  margin: 0;
}
#cssmenu ul li a {
  font-size: 15px;
  display: block;
  color: #ffffff;
  text-shadow: 0 1px 1px #000;
  background: #565656;
  background: -moz-linear-gradient(#565656 0%, #323232 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
  background: -webkit-linear-gradient(#565656 0%, #323232 100%);
  background: linear-gradient(#565656 0%, #323232 100%);
  border: 1px solid #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#cssmenu ul li a span {
  display: block;
  border: 1px solid #666666;
  padding: 6px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: bold;
}
#cssmenu ul li a:hover {
  text-decoration: none;
}
#cssmenu ul li.active {
  border-bottom: none;
}
#cssmenu ul li.active a {
  background: #97be10;
  background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));
  background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);
  background: linear-gradient(#97be10 0%, #79980d 100%);
  color: #fff;
  text-shadow: 0 1px 1px #000;
  border: 1px solid #79980d;
}
#cssmenu ul li.active a span {
  border: 1px solid #97be10;
}
#cssmenu ul li.has-sub a span {
  background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu ul li.has-sub.active a span {
  background: url(images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul li ul{
    position:absolute;
    display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#cssmenu ul li ul:hover{
    left:100%;
    top:0px;
    display:block;
}
#cssmenu ul li ul li a{
    color:#454444;
    display:inline-block;
    width:220px;
}

#cssmenu ul ul {
  padding: 5px 12px;
  display: none;
}
#cssmenu ul ul li {
  padding: 3px 0;
}
#cssmenu ul ul a {
  display: block;
  color: #595959;
  font-size: 13px;
  font-weight: bold;
}
#cssmenu ul a:hover {
  color: cyan;
}


div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: 'Raleway', sans-serif; 
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
th {
  color:#D5DDE5;
  background:#374857;
  border-bottom:2px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:18px;
  font-weight: 100;
  font-family: 'Raleway', sans-serif; 
  padding:10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}
 
th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
  border-bottom: 1px solid #22262e;
}
 
tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}
 
tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
td {
  background:#FFFFFF;
  padding:5px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:16px;
  font-family: 'Raleway', sans-serif; 
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}


#buttons {
  text-align: center;
}

/* start da css for da buttons */
.btn {
  border-radius: 5px;
  padding: 5px 5px;
  font-size: 18px;
  text-decoration: none;
 
  color: #fff;

  display: inline-block;
}

.btn:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

.blue {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.blue:hover {
  background-color: #6FC6FF;
}

.green {
  background-color: #2ecc71;
  box-shadow: 0px 5px 0px 0px #15B358;
}

.green:hover {
  background-color: #48E68B;
}

.red {
  background-color: #e74c3c;
  box-shadow: 0px 5px 0px 0px #CE3323;
}

.red:hover {
  background-color: #FF6656;
}

.purple {
  background-color: #9b59b6;
  box-shadow: 0px 5px 0px 0px #82409D;
}

.purple:hover {
  background-color: #B573D0;
}

.orange {
  background-color: #e67e22;
  box-shadow: 0px 5px 0px 0px #CD6509;
}

.orange:hover {
  background-color: #FF983C;
}

.grey {
  background-color: #2C3539;
  box-shadow: 0px 5px 0px 0px grey
}

.grey:hover {
  background-color: black;
}


#tips a  {
	text-decoration:none;
	color: black;
}

#tips a:hover {
	color: #666666;
	background: #FFFFCC;
	text-decoration: none;
}
#tips a span {display: none;}
#tips a:hover span {
	display: block;
	position: absolute;
	width: 200px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #0000CC;
	background: #FFFFCC;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	border: 1px solid #666666;
	text-decoration: none;
}

.breadcrumb {
    padding: 0 .5rem;
}

.breadcrumb ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
    
.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 .25rem;
    content: "→";
}