:root
{
	/* Colors */
	--colorBrand: #39803C;
	--colorSubBrand: #19851D;
	--colorPrimary: #3D3D3D;
	--colorPrimaryHover: #595959;
	--colorInactiveGrey: #B7B7B7;
	--colorInactiveGrey2: #D1D3D4;
	--colorTableBorder: #DCDFE0;
	--colorTableAlternateRow: #F0F2F3;
	--colorWhite:#ffff;
	--colorError: #B80303;
	--colorAlert: #F8B404;
  --color-bg-highlight: #E2EDE2;
	/* Fonts */
	--heading1: 22px;
	--heading2: 18px;
	--heading3: 14px;
	--paragraph: 14px;
	--buttonFont: 13px;
	--supportingText: 13px;
	/* Buttons */
	--mediumButtonHeight: 30px;
}
html
{
  overflow:hidden;
}
.popupSection
{
  padding: 15px!important;
  border-bottom: 1px solid #D9DCDD;
}
.popupHeader
{
  background: #383838;
  color: white;
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  align-items: center;
  padding-left: 16px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.close 
{
  overflow: hidden;
  position: relative;
  border: none;
  padding: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  color: #f9f9f9;
  font: inherit;
  text-indent: 100%;
  cursor: pointer;
}
/* Pseudo-element styles */
.close:before, 
.close:after 
{
  position: absolute;
  top: 15%;
  left: calc(50% - .0625em);
  width: .125em;
  height: 70%;
  border-radius: .125em;
  background: currentcolor;
  content: '';
}
.close:after 
{
  transform: rotate(-45deg);
}
.close:before 
{
  transform: rotate(45deg);
}
/* Imported from ccv.css */

#page-cover
{
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity:.6;
  z-index: 2999;
  top: 0;
  left: 0;
}

#spinning
{
  display: none;
  z-index:4000;
  position:fixed;
  left:35%;
  top:25%;
}

/*This file is representing all of the new styles that are being used for the 2021-22 acc styes. Other css files are still needed*/
/* Custom checkbox and radio buttons */
.dt-row.odd
{
    background-color: white;
}
.dt-row.even
{
  background-color: var(--colorTableAlternateRow);
}
/*
.dataTables_wrapper select
{
  background-color: white !important;
}*/
.dataTables_empty
{
  background-color: white !important;
}
table.dataTable thead tr th
{
  border-top: 1px solid var(--colorInactiveGrey2);
  border-bottom: none;
}
table.dataTable>thead>tr,table.dataTable>tfoot>tr, .dt-row
{
  height: 40px;
}
table.dataTable>tfoot>tr>th
{
  border-top-color: var(--colorPrimary);
}
table.dataTable.cell-border>tbody>tr:first-child>td 
{ 
  border-top:  1px solid var(--colorInactiveGrey2);
}
table.dataTable.cell-border>tbody>tr>td:first-child
{
  border-left: none;
}
.dataTables_filter input
{
  background-color: white !important;
}
table.dataTable 
{
 color: var(--colorPrimary);
}
table.dataTable.cell-border>tbody>tr>th, table.dataTable.cell-border>tbody>tr>td
{
  border-right: none;
}
#homeDiv td.dt-period_avail, #homeDiv tfoot th.dt-period_avail, #txrx-table_wrapper td.dt-amount, #txrx-table_wrapper th.dt-amount, .column-highlight
{
  box-shadow: inset 0 0 0 9999px var(--colorBGHighlight) !important;
  font-weight: 700;
}
table.dataTable.stripe>tbody>tr.odd>*, table.dataTable.display>tbody>tr.odd>* {
  box-shadow: none;
}
table.dataTable thead>tr>th
{
  background:  var(--colorTableAlternateRow);
}
table.dataTable thead>tr>th.dt-current_period
{
  background:  var(--colorTableBorder);
  padding: 10px;
  text-align: center;
}
.dataTable > thead > tr > th[class*="sort"]:not(:hover,[class*="sorting_asc"]):before,
.dataTable > thead > tr > th[class*="sort"]:not(:hover,[class*="sorting_desc"]):after {
  content: "" ;
}
.dataTables_scrollFoot
{
  background-color: white;
  border-top: var(--colorPrimary) solid 1px;
}
#cp_main_table_wrapper table.dataTable>thead>tr.headerrow>th
{
  background-color: white;
}
#card_setup_address
{
  color: var(--colorBrand);
  font-weight: 700;
}
table.dataTable thead th
{
  text-align: left;
}
table.dataTable.compact thead tr th,table.dataTable.compact tbody tr th, table.dataTable tbody tr.dt-row td 
{
  font-size: 14px;
  padding-left: 10px;
  text-align: left;
  padding-right: 26px !important;
}
table.dataTable th.sorting:hover
{
  background-color: var(--colorBGHighlight) !important;
}
table.dataTable.compact tfoot th
{
  padding-right: 26px;
}
.input_container 
{
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.input_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #f9f9f9;
  border:  1px solid black;
  margin-top: -3px;
  margin-left: 8px;
}

/* On mouse-over, add a grey background color */
.input_container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a custom background */
.input_container input:checked ~ .checkmark {
  background-color: #486734;
  border: 1px solid #486734
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.input_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.input_container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Custom radio button */
.radio_container {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.radio_checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #f9f9f9;
  border: 1px solid black;
  border-radius: 50%;
  margin-left: 10px;
  margin-top: -3px
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .radio_checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a background color*/
.radio_container input:checked ~ .radio_checkmark {
  background-color: #F9F9F9;

}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .radio_checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after {
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #486734;
}
/* 2024 Facelift Style Additions */
.popupHeader
{
  background: #383838;
  padding: 10px;
  color: white;
}