/*
---------------------------------------------------------
OVERVIEW
---------------------------------------------------------
This style sheet is one of many style sheets that have 
been created to provide multiple options in defining the 
colors of each element displayed on the various pages 
within the DataWave program. The styles included in 
this style sheet have been divided into the same 10 
categories used for layout style sheets to make it 
easier for you to locate and change styles 
when necessary.

     -  Layout Styles
     -  Data Table Styles
     -  Link Table Styles
     -  Content Styles
     -  Left Menu Styles
     -  Right Menu Styles
     -  Filter Styles
     -  Sort Styles
     -  Help / Info Styles
     -  Icon Styles


---------------------------------------------------------
LAYOUT STYLES
---------------------------------------------------------
The following styles define the overall structure of
DataWave pages and the positioning of constant program 
elements. In particular, the styles in this category 
are intended to make sure that each page is  displayed 
in a consistent and responsive manner.
---------------------------------------------------------
*/

#page {
	border-color: #000000;
}

#page-top {
     background-color: #024078;
     color: #ffffff;
     border-color: #000000;
}

#box-top {
     background-color: #024078;     
}

#content {
     color: #222222;
     background-color: #eff1f3;
     border-color: #000000;
}

#content a {
	color: #024078;
}

#content a:hover {
	color: #527e46;
}

#box-content {
     color: #222222;
     background-color: #eff1f3;
}

#box-content a {
	color: #024078;
}

#box-content a:hover {
	color: #527e46;
}

#loading-animation {
     background-color: #ffffff;
}

#page-title {
	color: #024078;
}

#page-title2 {
	color: #024078;
}

#page-subtitle {
	color: #024078;
}

.top-button {
	background-color: #287abe;
	color: #ffffff;
}

.top-button:hover {
	background-color: #000000;	
	color: #ffffff;
}

.top-button2 {
	background-color: #138b07;
	color: #ffffff;
}

.top-button2:hover {
	background-color: #000000;	
	color: #ffffff;
}

.bottom-button {
	background-color: #287abe;
	color: #ffffff;
}

.bottom-button:hover {
	background-color: #000000;	
	color: #ffffff;
}

.per-page-button {
	background-color: #287abe;
     color: #ffffff;
}

.per-page-button:hover {
	background-color: #000000;
     color: #ffffff;
}

.per-page-button-inactive {
	background-color: #287abe !important;
     color: #ffffff;
}

#page-bottom {
     background-color: transparent;
     color: #ffffff;
}

#page-bottom a {
     color: #ffffff;
}

/*
---------------------------------------------------------
DATA TABLE STYLES
---------------------------------------------------------
The following styles define the appearance of the 
various tables of data which are added as content and
then displayed dynamically throughout the DataWave 
program.
---------------------------------------------------------
*/

.scroll-box {
     border-color: #bfc4c9;
}

.scroll-box::-webkit-scrollbar {
     background: #ffffff;
     border-color: #bfc4c9;
}

.scroll-box::-webkit-scrollbar-thumb {
     background: #024078;
}

div > div::-webkit-scrollbar {
     background: #ffffff;
     border-color: #bfc4c9;
}

div > div::-webkit-scrollbar-thumb {
     background: #024078;
}

.data-table th {
     border-color: #bfc4c9;
	background-color: #acb1b7;
	color: #ffffff;
}

.data-table td {
     border-color: #bfc4c9;
	color: #111111;
}

.data-table td a {
     color: #111111 !important;
}

.data-table-row1 {
	background-color: #ffffff;
}

.data-table-row2 {
	background-color: #eff1f3;
}

#entries-count {
	color: #222222;
}

.entry-section-label {
	color: #ffffff;
     background-color: #1a6292;
	border-color: #000000;
}

.entry-label {
	color: #ffffff;	
	background-color: #acb1b7;
     border-color: #ffffff;
}

.bottom-entry-label {
     border-color: #acb1b7 !important;
}

.entry-label-highlighted {
	color: #ffffff !important;
	background-color: #58884b !important;
     border-color: #ffffff !important;
}

.entry-field {
	background-color: #ffffff;
	border-color: #bfc4c9;
     color: #444444;
}

.entry-form {
	color: #222222;
}

.entry-form textarea {
	border-color: #999999;
}

.entry-form input {
	border-color: #999999;
}

.entry-form select {
	border-color: #999999;
}

.error-message {
     color: #3a9701;
}


/*
---------------------------------------------------------
LINK TABLE STYLES
---------------------------------------------------------
The following styles define the appearance of the 
various tables used to display selections for adding
various types of entries (pages, columns. fields,
etc.) throughout the DataWave program.
---------------------------------------------------------
*/

.dw-link-table th {
	border-color: #000000;
	background-color: #000000;
     color: #ffffff;
}

.dw-link-table td {
	border-color: #555555;     
}

.dw-link-table td a {
	border-color: #555555;
     color: #222222 !important;
}

.dw-link-table-row1 {
	background-color: #ffffff;
}

.dw-link-table-row2 {
	background-color: #e4f2fe;     
}

.dw-link-table td:hover {
	background-color: #cde7fe !important;
}


/*
---------------------------------------------------------
CONTENT STYLES
---------------------------------------------------------
The following styles define the default appearance of 
content elements which have been entered for the various 
pages added in the DataWave program. Please note that 
the appearance of each content element can be adjusted
separately within DataWave to change the element's
appearance and positioning.
---------------------------------------------------------
*/

.dw-header	{
	color: #287abe;
}

.dw-image {
	border-color: #000000;
}

.image-view-container {
     background: rgba(1,25,48,.9);
     color: #ffffff;
}

.image-view-close {
     color: #ffffff; 
}

.image-view-close:hover,
.image-view-close:focus {
     color: #999999;
}

.dw-line {
	border-color: #000000;
}

.dw-table th {
	border-color: #000000;
	background-color: #000000;
     color: #ffffff;
}

.dw-table td {
	border-color: #000000;	
}

.dw-table-row1 {
	background-color: #ebedef;
}

.dw-table-row2 {
	background-color: #d1d3d5;
}

.dw-button {
	background-color: #000000;
	color: #ffffff;
}

.dw-button:hover {
	background-color: #555555;
	color: #ffffff;
}

.dw-form textarea {
	border-color: #999999;
}

.dw-form input {
	border-color: #999999;
}

.dw-form select {
	border-color: #999999;
}

.dw-phone-display-note	{
	background-color:#000000;
     color: #ffffff;
}

.dw-box-block	{
	background-color: #ebedef;
	border-color: #000000;
}

.dw-box-layout-border-color1 {
	background-color: #000000;
}

.dw-box-layout-border-color2 {
	background-color: #186696 !important;
}

.dw-box-layout-container-link {
     color:#ffffff !important;
}

.dw-box-layout {
	border-color: #000000;
}

.dw-box-layout-cell	{
	background-color: #000000;
	border-color: #ebedef;
}

.dw-box-layout-cell:hover	{
	background-color: #186696;
}

.dw-code-block	{
	background-color: #ebedef;
	border-color: #000000;
}


/*
---------------------------------------------------------
LEFT MENU STYLES
---------------------------------------------------------
The following styles define the appearance of the menu
opened when the menu link located at the top-left of the 
current program page is clicked. This menu displays the 
links for accessing the various pages included in the 
currently selected section of the program.
---------------------------------------------------------
*/

#left-menu-button {
	color: #ffffff;
}

#left-menu-button:hover {
	color: #30699a !important;
}

#left-menu-button:hover #left-menu-title {
	color: #cccccc !important;
}

#left-menu-title {
     color: #ffffff;
}

.left-menu {
     background-color: #ffffff;
	border-right-color: #adadad;
}

.left-menu h3 {
	color: #352d2b;
	background-color: #ffffff;
	border-bottom-color: #352d2b;
}

/* Left Menu 1st Level */

#left-menu-list > ul > li > a {
	color: #ffffff;
     background-color: #417310;
	border-bottom-color: #ffffff;
}
#left-menu-list > ul > li > a:hover {
     color: #ffffff;
     background-color: #659f2b;
}
#left-menu-list > ul > li.active {
     color: #dddddd;
}

/* Left Menu 2nd Level */

#left-menu-list > ul > li > ul > li {
	background-color: #ffffff;
}
#left-menu-list > ul > li > ul > li:hover {
	background-color: #dddddd;
}
#left-menu-list > ul > li > ul > li > a {
	color: #352d2b;
}
#left-menu-list > ul > li > ul > li > a > span {
	border-bottom-color: #adadad;
}
#left-menu-list > ul > li > ul > li > a:hover {
     color: #352d2b;
}


/*
---------------------------------------------------------
RIGHT MENU STYLES
---------------------------------------------------------
The following styles define the appearance of the menu
opened when the menu link located at the top-right of 
the current program page is clicked. This menu displays 
the links for accessing the various sections of the 
program.
---------------------------------------------------------
*/

#right-menu-button {
	color: #ffffff;
}

#right-menu-button:hover #right-menu-title {
	color: #cccccc !important;
}

#right-menu-title {
     color: #ffffff;
}

.right-menu {
     background-color: #ffffff;
	border-left-color: #adadad;
}

.right-menu h3 {
	color: #352d2b;
	background-color: #ffffff;
	border-bottom-color: #352d2b;
}

/* Right Menu 1st Level */

#right-menu-list > ul > li > a {
	color: #ffffff;
     background-color: #1b67a5;
	border-bottom-color: #ffffff;
}
#right-menu-list > ul > li > a:hover {
     color: #ffffff;
     background-color: #378dd3;
}
#right-menu-list > ul > li.active {
     color: #dddddd;
}

/* Right Menu 2nd Level */

#right-menu-list > ul > li > ul > li {
	background-color: #ffffff;
}
#right-menu-list > ul > li > ul > li:hover {
	background-color: #dddddd;
}
#right-menu-list > ul > li > ul > li > a {
	color: #352d2b;
}
#right-menu-list > ul > li > ul > li > a > span {
	border-bottom-color: #adadad;
}
#right-menu-list > ul > li > ul > li > a:hover {
     color: #352d2b;
}


/*
---------------------------------------------------------
FILTER STYLES
---------------------------------------------------------
The following styles define the filters which are
used throughout the program to limit the data table
entries that are currently displayed.
---------------------------------------------------------
*/

.filters {
     background-color: #acb1b7;
	border-left-color: #adadad;
}

.filters h3 {
	color: #ffffff;
	background-color: #59931f;
	border-bottom-color: #ffffff;
}

#filters-close-button {
	color: #352d2b;
}

.filter {
	background-color: #ffffff;
	border-color: #ffffff;
}

.filter-label {
	background-color: #1b67a5;
	color: #ffffff;
}

#active-filters-block {
     color: #352d2b;
     border-color: #adadad;
}

#phone-active-filters-block {
     color: #352d2b;
     border-color: #adadad;
}

/*
---------------------------------------------------------
SORT STYLES
---------------------------------------------------------
The following styles define the sorting options which
are used throughout the program to order the data table
entries that are currently displayed.
---------------------------------------------------------
*/

.sort {
     background-color: #acb1b7;
	border-left-color: #adadad;
}

.sort h3 {
	color: #ffffff;
	background-color: #59931f;
	border-bottom-color: #ffffff;
}


#sort-close-button {
	color: #352d2b;
}

.sort-option-label {
	background-color: #1b67a5;
	color: #ffffff;
}

.sort-option {
	background-color: #ffffff;
	border-color: #ffffff;
}


/*
---------------------------------------------------------
HELP / INFO STYLES
---------------------------------------------------------
The following styles define the info that has
been entered to describe the current page being
displayed.
---------------------------------------------------------
*/

.info {
     background-color: #acb1b7;
	border-left-color: #adadad;
}

.info h3 {
     color: #ffffff;
	background-color: #59931f;
	border-bottom-color: #ffffff;
}

.help {
     background-color: #acb1b7;
	border-left-color: #adadad;
}

.help h3 {
     color: #ffffff;
	background-color: #59931f;
	border-bottom-color: #ffffff;
}

.help-content-container {
     background-color: #acb1b7;
}

.help-content {
     background-color: #ffffff;
}


/*
---------------------------------------------------------
ICON IMAGE STYLES
---------------------------------------------------------
The following styles define the icon images which are
displayed as buttons throughout the program.
---------------------------------------------------------
*/

.icon-button {
     background-color: #024078;
}

.icon-button:hover {
	background-color: #338a11;
}

.field-icon-button {
     background-color: #024078;
}

.field-icon-button:hover {
	background-color: #338a11;
}

.phone-field-icon-button {
     background-color: #024078;
}

.sublist-icon-button-off {
     background-color: #acb1b7;
}

.sublist-icon-button-off:hover {
     background-color: #000000;
}

.sublist-icon-button-on {
     background-color: #000000;
}

.sublist-icon-button-on:hover {
     background-color: #acb1b7;
}

.text-format-icon {
     background-color: #138b07;
}

.text-format-icon:hover {
     background-color: #000000;
}