:root {
  --white: #ffffff;
  --deleteRed: #ff4f4f;
  --printBlue: #0023d6;
  --offWhite: #e7e7e7; 
  --logoBackground: #fff;
  --menuBackground: #004167;
  --menuColor: #fff;
  --menuHover: #E27E14;
  --bodyBackground: #fff;
  --downdownBackground: #dbdbdb;
  --reportTotals: #d6d6d6;
  --tableFontColor: #313131;
  --h4Color: #0000FF;
  --hoverBorderColor: #0000FF;			/*#0083ff;*/
  --lightPurple: #ADA6FF;
  --disabledText: #a2a2a2;
  
  
  /* custom */
  --topBarBackground: #007bc6;
  --footerBackground: #00a1ad;
  --menuColor: #0071b3;  
  --menuHoverBG: #007BC6;
  --menuHoverColor: #fff;
  --BlueGreen: #00a1ad;
  --AFCBlue: #007BC6;
  --Lime: #a1d068;
}

#main-content ul {
	margin-left: 30px;
}
#main-content li {
	list-style: disc;
}

#addresses {
	display: flex;
	margin-top: 24px;
	align-items: center;
	margin-bottom: 12px;	
}

#addresses a.add-btn {
	font-size: 1em !important;
	padding: 9px 20px;
}

.entryField {
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
}

.pagination li {
	list-style: none !important;
}

.add-btn, .add-btn2 {
	display: inline-block;
	margin-left: 55px;
	background: #85d4fb;
	padding: 9px 24px;
	color: #000;
	font-size: 1.2em;
	border: 1px solid #000;
	border-radius: 5px;	
}

.add-btn-left {
	display: inline-block;
	background: #85d4fb;
	padding: 9px 24px;
	color: #000;
	font-size: 1.2em;
	border: 1px solid #000;
	border-radius: 5px;	
}


.add-btn:hover, .add-btn2:hover, .add-btn-left:hover {
	background: blue;
	color: white;
}
	
.delete-btn {
	background: var(--deleteRed);
	color: #000;
	padding: 5px 7px;
}

.print-btn {
	color: #000;
	padding: 5px 7px;
}

.centerData {
	text-align: center !important;
}

.required > label:after {
  content: " *";
  color: red;
}


.checkbox {
	width: 22px;
	display: inline;
	vertical-align: middle;
	margin-right: 15px;
}


.form-check-label {
  display: block;
  text-indent: -15px;
  padding-left: 15px;
  color: #000;
}

.form-check {
	display: inline-flex !important;
	padding-left: 15px;
	width: auto;
}

.moveRight50 {
	margin-left: 50px;
}

.radioOption {
	color: #000;
}

.alignBottom {
	align-self: end;
}

hr {
	border-top: 1px solid darkgrey !important;
}



/***********************************************************/

.dataTables_length {
  display: inline-block;
  float: left;
  margin-right: 30px;
}
.dt-buttons {
  margin-bottom: 0px;
}
.dt-buttons .dt-button {
  background-image: none;
  background: #d0d0d0;
  color: #373757;
  border-color: var(--offWhite);
  margin-right: 10px;
  padding: 7px 20px;
  border-radius: 0px;
}
.dt-buttons .dt-button:hover:not(.disabled),
.dt-buttons .dt-button:focus,
.dt-buttons .dt-button.active {
  background-image: none;
  background: #5873fe;
  color: #ffffff;
}
button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled) {
  background-color: #5873fe;
  background-image: none;
  border: 1px solid #5873fe;
  box-shadow: none;
  color: #ffffff;
}
button.dt-button:focus:not(.disabled),
div.dt-button:focus:not(.disabled),
a.dt-button:focus:not(.disabled) {
  background-color: #5873fe;
  background-image: none;
  border: 1px solid #5873fe;
  box-shadow: none;
  color: #ffffff;
}
button.dt-button:active:hover:not(.disabled):not(.disabled),
button.dt-button.active:hover:not(.disabled):not(.disabled),
div.dt-button:active:hover:not(.disabled):not(.disabled),
div.dt-button.active:hover:not(.disabled):not(.disabled),
a.dt-button:active:hover:not(.disabled):not(.disabled),
a.dt-button.active:hover:not(.disabled):not(.disabled) {
  background-color: #5873fe;
  background-image: none;
  border: 1px solid #5873fe;
  box-shadow: none;
  color: #ffffff;
}
button.dt-button:active:not(.disabled),
button.dt-button.active:not(.disabled),
div.dt-button:active:not(.disabled),
div.dt-button.active:not(.disabled),
a.dt-button:active:not(.disabled),
a.dt-button.active:not(.disabled) {
  background-color: #5873fe;
  background-image: none;
  border: 1px solid #5873fe;
  box-shadow: none;
  color: #ffffff;
}


[type="button"] {
	padding: 6px !important;
}

input:disabled {
	color: var(--disabledText);
	border-color: var(--disabledText) !important;
}
button:disabled {
	color: var(--disabledText) !important;
	border-color: var(--disabledText) !important;
}

/*************    Header    ***************/

.header {
  background: #ffffff;
  z-index: 990;
  margin-left: 250px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: margin-left 300ms ease-in-out 0s;
}


.HomePageHeading {
	color: var(--h4Color);
}

/****************   FOOTER   *********************/

#footer {
  background: var(--BlueGreen);
  padding: 35px 0 30px;
  margin-top: 50px;

}

.footer-data {
	display: flex;
	justify-content: space-around;
}

#footerlogo {
	margin-left: -7%;
}

#footerContactBlock,
#footerResourcesBlock {
	align-content: center;
}

#footerContactBlock a, 
#footerResourcesBlock a {
	text-decoration: none;
	font-size: 2em;
	color: rgba(255,255,255,0.7);
}

.footerContact,
.footerResource {
	margin-bottom: 15px;
}

#footer p {
  font-size: .85em;
}

#footerFixed {
  padding-top: 5px;
  text-align: center;
  background: #fff;
  position: absolute;
  top: 93vh;
  width: 100vw;
}
	

[type="search"] {
	padding: 4px !important;
	margin-left: 8px;
}


/**
 * PRINT STYLE
 */


@media print {

	#printFooter {
		display: block;
	}

	.header,
	.sidebar,
	.chat-sidebar,
	.control,
	.control-bar {
	display: none !important;
	}
	[contenteditable]:hover,
	[contenteditable]:focus {
	outline: none;
	}
  
	.tableNormal td, .tableNormal th {
		font-size: 11px !important;
		line-height: normal !important;
	}

	.tableWide td, .tableWide th {
		font-size: 9px !important;
		line-height: normal !important;
	}

	.noPrint,
	.dt-buttons,
	.add-btn,
	.button-right,
	#bootstrap-data-table-export_length,
	#bootstrap-data-table-export_filter,
	#bootstrap-data-table-export_info,
	#bootstrap-data-table-export_paginate
	
	{
		display: none !important;
	}

	.printOnly {
		display: block;
		color: #000;		
	}
	
	@page {
		size: auto !important;
	}


}




/*    Input Style
------------------------*/

.form-group {
  margin-bottom: 10px;
}
.form-control {
  height: 25px;
  border-radius: 0px;
  box-shadow: none;
  border-color: var(--hoverBorderColor);
  font-family: 'Roboto', sans-serif;
  padding: 0;
  border: 1px solid;
  font-size: .9em;
}
.form-control:hover {
  box-shadow: none;
  border-color: var(--hoverBorderColor);
}
.form-control:focus,
.form-control.active {
  box-shadow: none;
  border-color: #878787;
}
.input-default {
  border-radius: 4px;
}
.input-flat {
  border-radius: 0px;
}
.input-rounded {
  border-radius: 100px;
}
.input-focus {
  border-color: #5873fe;
}
.input-focus:focus {
  border-color: #5873fe;
}

/*    Input States
-----------------------*/

.has-default .form-control:hover,
.has-success .form-control:hover,
.has-warning .form-control:hover,
.has-error .form-control:hover,
.has-default .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.has-error .form-control:focus,
.has-default .form-control.active,
.has-success .form-control.active,
.has-warning .form-control.active,
.has-error .form-control.active {
  box-shadow: none;
}
.has-default .control-label {
  color: #878787;
}
.has-default .form-control {
  border-color: #878787;
}
.has-default .form-control:hover,
.has-default .form-control:focus,
.has-default .form-control.active {
  border-color: #878787;
}
.has-success .control-label {
  color: #28a745;
}
.has-success .form-control {
  border-color: #28a745;
}
.has-success .form-control:hover,
.has-success .form-control:focus,
.has-success .form-control.active {
  border-color: #28a745;
}
.has-warning .control-label {
  color: #e7b63a;
}
.has-warning .form-control {
  border-color: #e7b63a;
}
.has-warning .form-control:hover,
.has-warning .form-control:focus,
.has-warning .form-control.active {
  border-color: #e7b63a;
}
.has-error .control-label {
  color: #dc3545;
}
.has-error .form-control {
  border-color: #dc3545;
}
.has-error .form-control:hover,
.has-error .form-control:focus,
.has-error .form-control.active {
  border-color: #dc3545;
}
.has-feedback label ~ .form-control-feedback {
  top: 35px;
}
.form-horizontal .has-feedback .form-control-feedback {
  top: 5px;
}
.has-success .form-control-feedback {
  color: #28a745;
}
.has-warning .form-control-feedback {
  color: #e7b63a;
}
.has-error .form-control-feedback {
  color: #dc3545;
}
.has-success .input-group-addon {
  background-color: #71dd8a;
  border-color: #28a745;
  color: #28a745;
}
.has-warning .input-group-addon {
  background-color: #f5e0ac;
  border-color: #e7b63a;
  color: #e7b63a;
}
.has-error .input-group-addon {
  background-color: #efa2a9;
  border-color: #dc3545;
  color: #000;					/* #dc3545;*/
  padding: 8px;
}
/*    Input Size
--------------------*/
.input-sm {
  font-size: 12px;
  height: 30px;
  line-height: 1.5;
}
.input-lg {
  font-size: 18px;
  height: 46px;
  line-height: 1.33333;
}
/*    Basic form
----------------------*/
label {
  font-weight: bold;
  margin-bottom: 10px;
  display: inline;
  color: var(--h4Color);
}
/*    Form Horizontal
----------------------*/
.form-horizontal .control-label {
  padding-top: 12px;
}
.form-horizontal .form-group {
  margin-left: 0px;
  margin-right: 0px;
}
.is-invalid .form-control {
  border-color: #dc3545;
}
.invalid-feedback {
  color: #ef5350;
  display: none;
  margin-top: 0.25rem;
}
.is-invalid .invalid-feedback,
.is-invalid .invalid-tooltip {
  display: block;
}


body {
  font-family: 'Roboto', sans-serif;
  background: var(--bodyBackground);
  font-size: 1em;
}

.content-wrap {
  min-height: 30vh;
  margin-top: 40px;
}

a,
button {
  outline: none!important;
  text-decoration: none!important;
  transition: all 0.2s ease 0s;
}
a.active,
button.active,
a:focus,
button:focus,
a:hover,
button:hover {
  color: #252525;
  outline: none!important;
  text-decoration: none!important;
}

.edit-btn {
	border-bottom: 4px solid #09bc92;
}

.btn {
	min-width: 145px;
	height: 44px;	
}


ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6.h1 {
  color: #373757;
}

h1 {
	font-size: 2rem;
	display: inline;
}

h2 {
	font-size: 1.75em;
	display: inline;
}

h3 {
	font-size: 1.5em;
}


h4 {
	font-size: 1.25em;
	color: var(--h4Color);
	font-weight: bold;
}

.smallLink {
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: underline !important;
	color: var(--h4Color);
}
	
.largeLink {
	font-size: 1.4em;
	font-weight: bold;
	text-decoration: underline !important;
	color: var(--h4Color);
}

.menuItems a {
	font-size: 1.2em;
}

#h-header {
	background-color: #fff;
}

.flexmenu {
	display: flex;
	align-items: center;
}

img {
  margin-right: 20px;
}


.menuRight {
	margin-left: auto;
	margin-right: 20px;
}

.bg-light {
	background: #fff;

}
	
.dropdown:hover .dropdown-menu {
  display: block;
}

/* .dropdown .dropdown-menu {
  display: none;
} */

.navbar .navbar-nav .nav-link {
    color: var(--menuColor) !important;
    font-size: 1.1em;
}
.navbar .navbar-nav .nav-link:hover{
    color: var(--menuHoverColor) !important;
}

.dropdown-menu {
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--downdownBackground);
}

.dropdown-menu a {
	color: #000 !important;
	border-bottom: 1px solid #2d444f;
}

/* .navbar-header {
	display: none !important;
} */

.hmenu a {
  display: block;
  padding: 5px 10px;
  color: var(--menuColor);
  text-decoration: none;
}

.hmenu a:hover {
  background-color: var(--menuHoverBG);
  color: #000 !important;
}

table {
	color: var(--tableFontColor);
}

thead {
	background: var(--lightPurple);
	border-top: 1px solid var(--offWhite);
	vertical-align: top;
}
thead tr th {
	color: #373757;
	font-weight: 500;
}

.table-striped tbody tr {
	background: #fff !important;
}


.table-striped tbody tr.reportTotals {
	background: var(--reportTotals) !important;
}

.inline-field {
	margin-top: calc(.375rem + 1px) !important;
	margin-bottom: calc(.375rem + 1px) !important;
	margin-left: 15px !important;
}

.moveUp50 {
	margin-top: -50px !important;
}

.moveDown50 {
	margin-top: 50px !important;
}

.checkbox-align-bottom {
	align-items: end;
}

.smallFont {
	font-size: 14px;
}

[class*="col-md-"] {
	font-size: 14px !important;
}

.boldFont {
	font-weight: bold;
}

.col-11pct {
	flex: 0 0 11%;
	margin-right: 20px;
}

table th, table td {
	font-size: 14px !important;
	padding: 8px !important;
}

table td.tableSmallFont {
	font-size: 10px !important;
}



@media (min-width: 320px) {
	
	#topBar {
		background: var(--topBarBackground);
		height: 66px;
		min-width: 100vw;
		margin-left: -15px;
		margin-right: -15px;
	}
	
	.navbar-header {
		display: block;
	}
	
	.navbar-toggle {
		width: 48px;
		height: 48px;
	}

	.icon-bar {
		background-color: #252525;
		display: block;
		height: 3px;
		margin: 5px auto;
		width: 22px;
	}

	.navbar {
		padding: 2px !important;
		margin-left: 0px;
	}

	
	.navbar-collapse {
		background: var(--menuBackground);
		margin-left: -15px;
		margin-right: -15px;
		padding: 20px;
	}

	nav a {
		color: #000;
		display: block;
		width: 100%;
	}

	nav li {
		/*
		margin-bottom: 4px;
		background: var(--menuBackground);
		padding: 12px;
		*/
	}

	.headerRow {
		margin-left: -15px;
		display: flex;
		width: 100vw;
	}
	
	.logo {
	  background: var(--logoBackground);
	  text-align: center;
	  display: block;
	  width: 100vw;
	}

	.logo img {
		width: 216px;
		height: 146px;
	}
	
	.hmenu {
		display: none;
	}
	
	.menuLeft {
		margin-left: 25px;
	}
	
	.main .page-header {
		color: var(--BlueGreen);
		font-weight: bold;
	}

	.page-title {
		font-size: 3em;
		color: var(--BlueGreen);
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	.titleAdd {
		display: flex;
	}
	
	.addButton {
		align-content: center;
		margin-bottom: 10px;
	}

	
	.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	
	select.form-control {
	  background: #afd9ff;
	  padding: 4px;
	  margin-left: 3px;
	  margin-right: 3px;
	  height: auto !important;  
	  font-size: .85rem;
	}

	select {
		height: 25px;
	}
	
	.horizontal-select {
	  margin-top: calc(.375rem + 1px) !important;
	  margin-bottom: calc(.375rem + 1px) !important;
	}	
	
	
	.tox-edit-area, .tox-tinymce {
		border: 1px solid darkgrey !important;
	}
}


@media (min-width: 768px) {
	.navbar-collapse {
		background: revert;
		margin-left: 0;
		margin-right: 0;
		padding: 0;
		
	}
	
	.navbar {
		padding: 2px !important;
	}

	.navbar-nav {
		margin-left: 30px;
	}
	
	nav a {
		color: var(--menuColor);
	}
	
	.navbar-header {
		display: none;
	}

	.logo {
		display: inline-block;
		width: auto;
	}

	.logo img {
		width: 100%;
		height: auto;
	}
	
	.hmenu {
		display: flex;
		width: 100vw;
		justify-content: right;
	}	
}