@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

.curved{-moz-border-radius:5px;  -webkit-border-radius:5px;  -khtml-border-radius:5px;  border-radius:5px; padding: 15px;    margin: 10px auto;    border: 1px solid transparent; max-width:94%}
.success{    color: #3c763d;    background-color: #dff0d8; border-color: #d6e9c6;}
.success a{color:#fff; text-decoration:underline}
.warning {    color: #8a6d3b;    background-color: #fcf8e3;    border-color: #faebcc;}
.error {color: #a94442;    background-color: #f2dede;    border-color: #ebccd1;}
.info {color: #ffffff;background-color: #5ab5ec61;border-color: #6c8ff15c;}
.grey {color: #ffffff;background-color: #e7e7e230;border-color: #999895;}
.error b, .error strong, .responsive-tabs-wrapper a, .responsive-tabs-wrapper strong, .gray b, .gray strong {color:#333; font-weight:500}
.success, .error, .warning {font-size:1em}
.success h3 { margin-top:0}
body {
	font-family: 'Inter', sans-serif;
	font-size: 1em;
	line-height: 17px;
	font-weight: 300;
	color: #666666;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}
body a {
	color: #000;
	text-decoration: none;
}
#reportYear {
	float:right;
	margin-top: -2.5em;
	min-width: 20%;
	}
form {
	padding: 0px;
	margin: 0px;
}
input, textarea, select, input[type=text],input[type="password"]{ min-width:40%;max-width:90%;padding:10px;font-size:1em;border:1px #ddd solid;background:#eee}

.panel { margin:1em auto; /*width:85%^*/}
.panel-warning { margin-bottom:3em;}
.panel-body input, .panel-body textarea, .panel-body select, .panel-body input[type="password"]{ min-width:18%;max-width:90%;padding:6px;font-size:1em;border:1px #eee solid;background:#fafafa; margin:5px; 	font-family: 'Inter', sans-serif; }
@media screen and (min-width: 641px) {
.panel-body input[type=text] { min-width:18%;max-width:90%;padding:6px;font-size:1em;border:1px #eee solid;background:#fafafa; margin:5px; 	font-family: 'Inter', sans-serif; }
}
@media screen and (max-width: 640px) {
.panel-body input[type=text], select#enttype{ width:98%; padding:6px;font-size:1em;border:1px #eee solid;background:#fafafa; margin:5px; }
}
h1, h2, h3, h4, h5 {
	margin: 0px;
	padding: 0px;
	text-transform:uppercase;
}

@media screen and (min-width: 1025px) {
.logincontainer {
	display: block;
	padding: 25px;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #ffffff;
	margin-top: 5%;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 6px;
}
}
@media screen and (max-width: 1024px) {
.logincontainer {
	display: block;
	padding: 25px;
	width: 275px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #ffffff;
	margin-top: 15%;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 6px;
}
}
.logincontainer h1 {
	color: #FFFFFF;
}
.col-md-6 { max-width:750px; margin-left:20px}
.container {	
	max-width: 1048px;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;
}
.leftcolumn {	
	width:100%;
	padding: 5px;
	margin-top:5px;
	/*padding-left: 0px;
	float: left;*/
}
#customers {
  font-family: 'Inter', sans-serif;
  font-size:0.8em;
  border-collapse: collapse;
  width: 98%;
  margin:4em 1em;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  color:#333;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #000;
  color: white;
}

h1 {
	font-size: 2em;
	line-height: 1em;
	font-weight: normal;
	color: #000;
	text-decoration: none;
	margin-bottom: 5px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 24px;
}

.notices {
	background-color: #e90e0e80;
	display: block;
	border: 1px solid #dc0a0a;
	padding: 15px;
	margin-bottom: 15px;
	margin-top: 10px;
	border-radius: 9px;
	font-size: 0.8em;
	color: #fff;
}

.topnav {
  overflow: hidden;
  background-color: #333;
	/*max-width: 1048px;*/
	padding-left:12%;
	margin-left: auto;
	margin-right: auto;  
}

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

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

.topnav a.active, .menubuttonsactive {
  background-color: #04AA6D;
  color: white;
}
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}


.rightcolumn {

	max-width: 100%;
	/* float: left; */
	padding: 6px;
}
@media screen and (min-width: 601px) {
.header {
	max-width: 1200px;
	margin-left: 20%;
	padding: 5px;
	padding-bottom: 0px;
	border-bottom:1px #efefef solid;
}
.headercontainer {
	padding:65px;
	background-color: #f5f5f5;
	padding-bottom: 0px;
	min-height:120px;
}

}
@media screen and (max-width: 600px) {
.header {
	max-width: 1200px;
	padding: 5px;
	padding-bottom: 0px;
	border-bottom:1px #efefef solid;
}
.headercontainer {
	padding:15px;
	background-color: #f5f5f5;
	padding-bottom: 0px;
	min-height:120px;
}

}
.header h1 {
	color: #ffffff;
	line-height: 1em;
    margin: 10px auto;
}
.headerright {
	/*display: block;
	float: right;
	margin-left: 25px;
	padding: 5px;		
	*/
	clear:both;
	line-height: 5em;
}
td {
	padding-right: 5px;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size:0.9em;
}
th {
	text-align: left;
	padding:12px;
}

hr {
	border: 0px;
	height: 1px;
	margin:20px 0;
	color: #CCCCCC;
	background-color: #CCCCCC;
}

.datedisplay {
	font-size: 14px;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
	line-height: 19px;
}
.leftcolumn hr {
	color: #F4F4F4;
}
#morecontact {
}
.historycontainer {
	border-bottom: 1px #008c6e solid;
	display: block;
	width: 1048px;
	padding: 25px;
	margin-left: auto;
	margin-right: auto;
}
.contactimage {
	float: left;
	margin-right: 6px;
}
.addcontact {
	font-size: 15px;
	font-weight: bold;
	line-height: 25px;
	display: block;
	padding: 4px;
	border-bottom: 1px dotted #CCCCCC;
}
.pagination {
	font-size: 12px;
	display: block;
	margin-top: 10px;
}

.pagination a {
}
.pagination .current {
	font-weight: bold;
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block;
		width:95%; 		
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: none; }
	
	td { 
		/* Behave  like a "row" 
		padding-left: 3%;*/
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 65%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	
}

/* ======================================================= */
/*                     Buttons Styles                      */
/* ======================================================= */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button, .more-button, .button-slider {
position: relative;
overflow: visible;  /* removes extra side padding in IE */
outline: none;
border: 1px solid #999;  /* IE */
border: rgba(0, 0, 0, 0.2) 1px solid;  /* Saf4+, Chrome, FF3.6 */
border-bottom: rgba(0, 0, 0, 0.4) 1px solid;
background: -moz-linear-gradient( center top, rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(0, 0, 0, .1)), to(rgba(255, 255, 255, .1)) );
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
white-space: normal;
line-height: 1em;
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
button::-moz-focus-inner {
border: none;
}
button.button {
margin: 0;
padding: 0;
}
a.button, a.button:hover {
text-decoration: none;
color:#fff;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
background: -moz-linear-gradient( center top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .2)) );
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF');
}
.button:active, .button.active {
top: 1px;
background: -moz-linear-gradient( center top, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .1)) );
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF');
}
input[type=submit], input[type=button] {
	position: relative;
padding: .6em 1.3em;
border-top: rgba(255, 255, 255, 0.2) 1px solid;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
white-space: normal;
line-height: 1em;
margin:1px;
	background-color: #00adee;}

.button, .button span, .more-button, .more-button, .button-slider {position: relative;padding:8px;border-top: rgba(255, 255, 255, 0.2) 1px solid;color: #fff;text-align: center;text-decoration: none;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);white-space: normal;line-height: 1em;margin:1px;font-size: 1em;}
.button span { border-top:none}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button.button span, .more-button {
margin-top: -1px;
margin-right: -2px;
margin-left: -2px;
} 
}
.small {
font-size: 12px;
}
.medium {
font-size: 14px;
}
.big {
font-size: 18px;
}
/* Button Color Scheme
---------------------------------------------------------- */
.button.black {
background-color: #333333;
}
.button.gray {
background-color: #666666;
}
.button.white {
background-color: #ffffff;
}
.button.white span{
color: #666666;
}
.button.red, .roll-button {
background-color: #e62727;
}
.button.orange {
background-color: #ff5c00;
}
.button.magenta {
background-color: #a9014b;
}
.button.yellow {
background-color: #ffb515;
}
.button.blue {
background-color: #00adee;
}
.button.pink {
background-color: #e22092;
}
.button.green {
background-color: #91bd09;
}
.button.rosy {
background-color: #f16c7c;
}
/* Button Group
-------------------------------------------------------------- */
.roll-button-group {
text-align: center;
}
.roll-button-group .roll-button {
margin-left: 8px;
}
.roll-button-group .roll-button:first-child {
margin-left: 0;
}