@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,600');

html {
    max-height:100vh;
    overflow: hidden;
	}
	
body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	/*background-color:#02609D;*/
    background-color: white;
	/*color: white;*/
	/*animation: fadein 1s;*/
    /*-moz-animation: fadein 1s; !* Firefox *!*/
    /*-webkit-animation: fadein 1s; !* Safari and Chrome *!*/
    /*-o-animation: fadein 1s; !* Opera *!*/
	padding: 0;
	margin: 0;
	min-width:300px;
    min-height:100vh;
}

table{
	/*color:#01E900;*/
    color: grey;
	font-family: 'Roboto', sans-serif;
}

h2{
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

h5{
	font: 25px/1.5 "Roboto", sans-serif;
	font-weight:200;
	color:orange;
}

h6{
	font: 25px/1.5 "Roboto", sans-serif;
	/*color:#01E900;*/
    color: grey;
	margin-top: 0;
	margin-bottom: 0;
	font-weight:300;
}

hr {
  background: #ddd; 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  /*margin: 0 0 1.4em;*/
    margin: 0;
  border: none; 
}

#wrapper {
	max-width:100%;
	min-width: 100%;
	width: auto;
    margin: 0 auto;
	height: auto;
	min-height: 100%;
	padding-right: 0px;
	margin-right: 0px;
	/*background:#FAFAFA;*/
}

#box {
	margin-left: 10px;
	margin-right: 5px;
	padding-right:5px;
	padding-left:5px;
	padding-top:20px;
	padding-bottom:10px;
	margin-bottom:20px;
	max-width:600px;
    height:auto;
	/*border: 1px solid grey;*/
	/*border-top-right-radius: 9px;*/
	/*border-top-left-radius:9px;*/
	/*border-bottom: none;*/
	min-height:600px;
	/*background-color: #02447F;*/
    background-color: white;
	/*box-shadow: -10px -4px 12px -2px #333*/
}

.errorbar{
    background-color:red;
    border-radius: 9px;
    color: white;
    width:95%;
    box-sizing: border-box;;
    padding:5px;
    text-align: center;
    margin:auto;
    box-shadow: -10px -4px 12px -2px #333
}

#scrollbox{
		max-height:405px;
		width:auto;
		border:0px outset #ccc;
		overflow:auto;
}

.login_box{
	box-sizing: border-box;
	width:100%;
	text-align: center;
	max-width:600px;
	margin: auto;
    padding:auto;
}

.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
.hoverTable td{ 
		padding:2px;
	}
/* Define the hover highlight color for the table row */
 .hoverTable tr:hover {
    background-color: #eaeaea;
    color:grey;
    }


a, a:active, a:visited { color: #607890; }

a:hover { color: #036; }

#fontdate{
	font: 10px/1.5 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#flex
{
	width: 100%;
	box-sizing: border-box;
}

/* Popup */
.popup{ position:relative; list-style:none; cursor:pointer;}
.popup li div{ position:absolute; z-index:5; visibility:hidden; width:auto; height:auto; right:-100px; background-color:#A9D0F5;}
.popup li:hover div{visibility:visible;}


//* Hot pink *//
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 

/* Text Box */
input:-webkit-input-placeholder {
    color:    #b5b5b5; 
} 
 
input-moz-placeholder {
    color:    #b5b5b5; 
} 
 
 input, select  {
    background: #E6E6E6; 
    font-size: 18px; /*0.8rem;*/ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    border: none; 
    padding: 13px 10px; 
    width: auto; /*270px; */
    margin-bottom: 20px; 
    box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 ); 
    clear: both; 
} 
input:focus, select:focus {
    background: #fff; 
    box-shadow: 0px 0px 0px 3px #6587b1, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
    outline: none;    
} 

.inputsimage  { /*this will align image next to input box*/ 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
    border: none; 
    padding: 13px 10px; 
    width: auto; /*270px; */
    margin-bottom: 20px; 
    clear: both; 
} 

/***FIRST STYLE THE BUTTON***/
input#gobutton{
	-webkit-appearance: none; /*Removed Safari styling*/
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	padding:5px 25px; /*add some padding to the inside of the button*/
	background:#0E63B1; /*the colour of the button*/
	border:1px solid #0E3E7D; /*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 2px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	/*style the text*/
	color:#f3f3f3;
	/*font-size:1.1em;*/
}
/***NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES***/
input#gobutton:hover, input#gobutton:focus{
background-color :#0E3E7D; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
input#gobuttonred:hover, input#gobuttonred:focus{
background-color :#CE1D1D; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
input#gobuttonred{
	-webkit-appearance: none; /*Removed Safari styling*/
	cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
	padding:5px 25px; /*add some padding to the inside of the button*/
	background:#F62323; /*the colour of the button*/
	border:1px solid #952222; /*required or the default border for the browser will appear*/
	/*give the button curved corners, alter the size as required*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*give the button a drop shadow*/
	-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
	-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
	box-shadow: 0 0 4px rgba(0,0,0, .75);
	/*style the text*/
	color:#f3f3f3;
	font-size:1.1em;
}
input#gobutton:disabled{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:grey; /*the colour of the button*/
border:1px solid #33842a; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
input#gobuttonred:disabled{
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
padding:5px 25px; /*add some padding to the inside of the button*/
background:grey; /*the colour of the button*/
border:1px solid #952222; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}


/* SCROLLBAR */
::-webkit-scrollbar {
    width: 5px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #1084e1;
    -webkit-box-shadow: inset 0 0 6px #1084e1;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #0E3E7D;
}

/*PAGE FADE IN from body tag*/

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:inline-block;
        clear:both;
        content:" ";
    }
 
    .tab-links li {
        margin:0px 5px ;
        float:left;
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#D0A9F5;
            font-size:16px;
            font-weight:300;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }
 
        .tab-links a:hover {
            background:#DA81F5;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#E6E6E6;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#E6E6E6;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

/* Add icon */
.add{ 
	width:64px; 
	height:64px; 
	opacity: 1; 
	filter: alpha(opacity=100); 
	background: url(images/plus1.png) no-repeat; 
	margin-bottom:0px;
	margin-top:0px;
} 
.add:hover { 
	opacity: 0.7; 
	filter: alpha(opacity=70); 
	background: url(images/plus1_hover.png) no-repeat; 
}
.fade:hover { 
	opacity: 0.5; 
	filter: alpha(opacity=50); 
}