/*
File    PaceBase.css

Description:  CSS styles for the Pace Base backed site

Sections:
  1.0 - Root - Site wide styles that apply to root, every objectin the DOM
  2.0 - Tags - Site wide styles applied to html tag elements
  2.1 - Form Tags
  2.2 - Scroll Bars
  3.0 - Mixin - Site wide classes that optionaly modify an elements default display
  4.0 - 4.0 - Page Layout Grid Sections
  4.1 - Headers - Page headers
  4.2 - Tabs
  4.3 - Page Tab Sub Menus
  4.4 - DL List for form and data display 
  4.5 - Tables
  4.6 - Datagrid tables
  4.7 - Sidebar
  4.8 - Message Box
  4.9 - Toolbox
  4.10 - Filter Box
  4.11 - Window Dialog
  4.12 - Report
  5.1 - Cir_Invoice/wind_InvoiceEnter.cfm
  5.2 - Cir_Client/page_Contracts.cfm

  X.1 Depricated Toolbar

*/


/*========================================================================================*/
/*                                                                                        */
/*	Section 1.0 - Root                  																					        */
/*                                                                                        */
/*========================================================================================*/

:root{
  --amber: #ffc107;
  --aqua:#00ffff;
  --blue:#2196F3;
  --lightBlue:#87CEEB;
  --lightBrown:#CD853F;
  --brown:#795548;
  --cyan:#00bcd4;
  --blueGray:#607d8b;
  --green:#4CAF50;
  --lightGreen:#8bc34a;
  --indigo:#3f51b5;
  --khaki:#f0e68c;
  --lime:#cddc39;
  --orange:#ff9800;
  --deepOrange:#ff5722;
  --hotPink:#FF69B4;
  --pink: #ffb3d9;
  --purple:#9c27b0;
  --deepPurple:#673ab7;
  --red:#f44336;
  --paper:#FFFFF0;
  --sand:#fdf5e6;
  --teal:#009688;
  --yellow:#ffeb3b;
  --white:#fff;
  --black:#000;
  --gray:#9e9e9e;
  --lightGray:#f1f1f1;
  --darkGray:#616161;

  --paleRed:#ffdddd;
  --paleGreen:#ddffdd;
  --paleYellow:#ffffcc;
  --paleBlue:#ddffff;
  --palePurple: #e0d8e0;
  --paleOrange:#ffE0D8;

  --lightPaceBlue: #accaec;
  --paceGreen: #038E95;
  --paceBlue: #235A9A;

  --veryPaleRed:#fff4f4;
  --veryPaleOrange:#fff8f4;
  --veryPaleGreen:#f4fff4;
  --veryPalePurple: #f8f2f8;
  

}



/*========================================================================================*/
/*                                                                                        */
/*	Section 2.0 - Tags                  																					        */
/*                                                                                        */
/*========================================================================================*/

a {
  color: #235A9A;
}

p {
  color: black;
}

body {
  font-family: sans-serif;
  font-size: 14pt;
  color: black;
  margin: 0;
  height: 100vh;
  width: 100vw;
  padding:0;
}

body.page{
  background-color: var(--lightGray);

}

body.window{
  background-color: white;

}

body.dev {
  --instanceBGColor: var(--lightGray);
  --instanceColor: black;
}

/* body.sandbox {
  --instanceBGColor: #0074b6;
  --instanceColor: white;
} */

body.prod {
  --instanceBGColor: var(--lightGray);
  --instanceColor: black;
}


h2 {
  /* 
  font-weight: normal;
  color: #235A9A;
  border-bottom: 1px solid #FFCC00;
  font-variant: normal;
  line-height: normal; */
  font-size: 16pt;
  margin-top: 0px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #235A9A;
  text-align: left;
  padding: 4px 10px 4px 10px;
  border-bottom: 1px solid #FFCC00;
  border-top: 1px solid #FFCC00;
  background-color: #eaf2fa;
  /* padding: 8px 10px; */
  vertical-align: middle;

}
section h2:nth-of-type(n+2){
  margin-top: 10px;
}


h3{
  /* font-size: 14pt;
  color: #235A9A;
  font-weight: bold;
  border-bottom: 1px solid #00000010;
  margin: 0px;
  padding: 5px 0px 0px 0px; */

  font-size: 14pt;
  margin-top: 25px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #235A9A;
  text-align: left;
  padding: 4px 10px 4px 10px;
  border-bottom: 1px solid #FFCC00;
  border-top: 1px solid #FFCC00;
  background-color: #eaf2fa;
  /* padding: 8px 10px; */
  vertical-align: middle;
}
section h3:nth-of-type(n+2){
  margin-top: 15px;
}

h4{
  color: #038E95;
  font-weight: normal;
  margin: 0px;
  padding: 5px 0px 5px 0px;
  font-size:14pt;
}



em {
  color: #cc3300;
  font-weight: bold;
}


/* ul,ol,dl{
  padding:0px;
  margin:0px;
  list-style-type: none;
} */

/*========================================================================================*/
/*                                                                                        */
/*	Section 1. - Form Tags              																					        */
/*                                                                                        */
/*========================================================================================*/


input:not([type='checkbox']),
select,
textarea,
.ui-selectmenu-button {
  font-family: inherit;
  font-size: 14px;
  padding: 5px;
  margin: 0px;
  color:black;
  border: 1px solid var(--lightGray);
  background-color: white;

  /* border-radius: 5px; */
}



textarea {
  overflow: auto;
}


input[type='checkbox'] {
  width:20px !important;
  height:20px;
  min-width: 20px;
}

/* Brings back gray checkbox in chrome 83 */
/* xinput[type='checkbox']{
  -webkit-filter: brightness(0.9);
} 
xinput[type="checkbox"]:checked {
  -webkit-filter: grayscale(100%) invert(100%) brightness(1.3);
} */ */

input:not([type='checkbox']):focus,
select:focus,
textarea:focus,
button:focus {
  border: 1px solid var(--paceGreen);
  outline: none !important;
}


input[type='date'],
input[type='text'],
input[type='tel'],
input[type='email'],
input[type='number'],
input[type='password'] {
  height: 30px;
  width: 100%;
  box-sizing: border-box;

}
input[type='search'] {
  height: 27px;
  width: 100%;
}


/* Relies on a javascript that  sets the data-visited attributes when
   the input receives focus.  Required with default value, ususally unset
   will have a blue indicator, but if the user visited the element and it's 
   still invalid the  indicated will be red
*/
input:invalid, 
textarea:invalid,
select:invalid{
  /* background: linear-gradient(90deg, red 4px, white 4px); */
  border-left: 2px solid var(--indigo);
}

input[data-visited]:invalid, 
textarea[data-visited]:invalid,
select[data-visited]:invalid{
  /* background: linear-gradient(90deg, red 4px, white 4px); */
  border-left: 4px solid var(--red);
}


input[type='checkbox']:invalid,
input[type='radio']:invalid{
  box-shadow: 0px 0px 1px 1px var(--indigo);
}

option{
  color: var(--black);
}

option[disabled]{
  display:none;
}

span.buttonOverlay{
  white-space: nowrap;
}

span.buttonOverlay input{
 width: calc(100% - 40px);
 margin-right: 0px;
}

span.buttonOverlay button {
  all: initial;
  background-color: #235A9A;
  border: 0px;
  border-radius: 0px 5px 5px 0px;

  margin: 0px;
  margin-left: -4px;
  /* moves the button over the top of the input before it */
  height: 27px;
  width: 35px;
  top: 2px;
  position: relative;
  box-shadow: none;
}
span.buttonOverlay button svg {
  height: 16px;
  width: auto;
  vertical-align: baseline;
  margin-left: 10px;
}
span.buttonOverlay button path.fg {
  fill:white
}
span.buttonOverlay button path.bg {
  fill:white
}
span.buttonOverlay button:focus path.fg{
  fill: var(--gray);
}


select {
  height: 29px;
  width: calc(100% - 4px);
}


textarea {
  height: 100px;
  width: calc(100% - 18px);
}

textarea.large{
  height: 250px;
}


input[type='date'].small,
input[type='text'].small,
input[type='number'].small,
input[type=password].small {
  width: 150px;
}

input[type=button],
input[type=submit],
button {
  border: 2px solid #e7e7e7;
  background-color: white;
  color: black;
  padding: 12px 24px;
  margin: 5px 10px;
  cursor: pointer;
  transition: .2s;
  border-radius: 2px;


}

input.readonly{
  pointer-events: none;
}

button.large{
  padding:30px;
  margin: 0;
}
button.large svg{
  height: 30px;
  vertical-align: text-bottom;
}

button:hover {
  background-color: #e7e7e7;
}

button svg {
  height: 16px;
  width: auto;
  vertical-align: bottom;  
}

button.sideBarButton{
  width: 100%;
  margin: 5px 0px 5px 0px ; 
}

button.sideBarButton svg{
  height: 30px;
  margin-bottom: 5px;
}

button.sideBarButton .svgTitle{
  margin-top: 5px;
  display: block;
}


label {
  color: var(--paceGreen);
}



input.noSpinner::-webkit-outer-spin-button,
input.noSpinner::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input..noSpinner {
    -moz-appearance:textfield; /* Firefox */
}

input[type='number'].dollar {
  padding-left:18px;
}

.dollar-input{
  position: relative;
  width: 100%;
}

.dollar-symbol {
  position:absolute;
  padding: 6px 10px;

}

.percent-input{
  position: relative;
}
.percent-symbol {
  position:absolute;
  margin: 6px 50px;
  user-select: none;
}





section::-webkit-scrollbar-track {
  border-radius: 0px 5px 5px 0px;
}

section::-webkit-scrollbar-thumb {
  border-radius: 0px 5px 5px 0px;
}


/*========================================================================================*/
/*	Section 2.1.1 - ImageSelect         																					        */
/*========================================================================================*/

/* .imageSelectWraper{
  position: relative;

}

.imageSelectGrid{
  position: absolute;  
  font-size: 10pt;
  font-family: inherit;
  padding: 6px;
  margin: 0px;
  color:black;
  border: 1px solid var(--lightGray);
  background-color: white;

  display: grid;
  grid-template-columns: 1fr 20fr 1fr;
  grid-gap: 10px;
  

} */



/*========================================================================================*/
/*                                                                                        */
/*	Section 2.2 - Scroll Bars            																					        */
/*                                                                                        */
/*========================================================================================*/

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: #ddd;
}

::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 3.0 - Mixin                  																					        */
/*                                                                                        */
/*========================================================================================*/

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.big {
  font-size: 16pt;
}

.m5 {
  margin: 5px;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.bigger{
  font-size: 15pt;
}

.black {
  color:var(--black);
}
.black path.fg{
  fill: var(--black)  
}
.black path.bg{
  fill: none  
}

.white {
  color:var(--white);
}
.white path.fg{
  fill: var(--white)  
}
.white path.bg{
  fill: none  
}

.gray {
  color:var(--gray);
}
.gray path.fg{
  fill: var(--gray)  
}
.gray path.bg{
  fill: var(--lightGray)  
}

.darkGray {
  color:var(--darkGray);
}
.darkGray path.fg{
  fill: var(--darkGray)  
}
.darkGray path.bg{
  fill: none  
}

.green {
  color:var(--green);
}
.green path.fg{
  fill: var(--green)  
}
.green path.bg{
  fill: none  
}

.blue {
  color:var(--blue);
}
.blue path.fg{
  fill: var(--blue)  
}
.blue path.bg{
  fill: none  
}



.red {
  color:var(--red);
}
.red path.fg{
  fill: var(--red)  
}
.red path.bg{
  fill: none  
}


.deepOrange {
  color:var(--deepOrange);
}
.deepOrange path.fg{
  fill: var(--deepOrange)  
}
.deepOrange path.bg{
  fill: none  
}




.deepPurple {
  color:var(--deepPurple);
}
.deepPurple path.fg{
  fill: var(--deepPurple)  
}
.deepPurple path.bg{
  fill: none  
}


.purple {
  color:var(--purple);
}
.purple path.fg{
  fill: var(--purple)  
}
.purple path.bg{
  fill: none  
}

.lightBrown {
  color:var(--lightBrown);
}
.lightBrown path.fg{
  fill: var(--lightBrown)  
}
.lightBrown path.bg{
  fill: none  
}


.em {
  color: #e63900;
}

.pointer {
  cursor: pointer;
}

.no-border{
  border: 0;
}

.no-background{
  background-color: white !important;
}

.invoiced{
  --clock: var(--gray);

}

.blackout {
  opacity: 1;
  background-color: rgba(35, 90, 154, 0.5);
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}


.previewFrame {
  border:0px;
  width:100%;
  height:425px;
  margin: 0;
}

iframe.report {
  height:100%; 
  border:1px solid var(--lightGray);
}
embed.report{
  height:100%; 
  border:1px solid var(--lightGray);
}

.transparent{
  opacity: 0.5;
}

div.loadingOverlay{
	_background: rgba( 26, 26, 26, 0.25 );
  position: absolute;
  top:0;
  left:0;
	width: 100%;
	height: 100%;
	z-index: 500;
  top: 0;
  display:none;
  align-items: center;
  justify-content: center;
}
 
div.loadingOverlay div {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 300px;
  height: 300px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

img.tiny{
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  object-fit: cover;
  height:25px;
  width:25px;
  box-shadow: 4px 4px 4px gray;
}


img.thumbnail{
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  object-fit: cover;
  height:50px;
  width:50px;
  box-shadow: 4px 4px 4px gray;
}

img.display{
  border: 1px solid #9e9e9e;
  border-radius: 15px;
  max-width: 200px;
}

img.Completed,
img.Finished,
img.grayscale{
  filter: grayscale(100%);
}

tr.Completed td,
tr.Finished td{
  color: #9e9e9e;
}

span.small{
  font-size: x-small !important;

}

span.bubble{
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
  color: var(--black);
  background: #eeeeee;
}

span.incomplete{
  color: white;
  background: var(--black);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
  
}


span.raw{
  color: white;
  background: var(--deepOrange);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}


span.production{
  color: white;
  background: var(--purple);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.pictures{
  color: white;
  background: var(--indigo);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}



span.packaging{
  color: white;
  background: var(--lightBrown);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.scheduled{
  color: white;
  background: var(--blue);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}


span.backstock,
span.info_received,
span.pickup{
  color: white;
  background: var(--lightBlue);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.success,
span.active,
span.unfulfilled{
  color: white;
  background: #348d01;
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.in_transit{
  color: white;
  background: #2196F3;
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}


span.finished,
span.completed,
span.fulfilled,
span.full_refund,
span.unactionable,
span.delivered,
span.expired{
  color: #333333;
  background: lightgray;
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.error,
span.unlinked,
span.exception{
  color: white;
  background: red;
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.buyer_warning,
span.warning,
span.pending{
  color: #333333;
  background: var(--orange);
  /* padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle; */
}


span.canceled,
span.running{
  color: #333333;
  background: var(--paleRed);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

span.partial_refund{
  color: white;
  background: var(--lightGreen);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  vertical-align: middle;
}

div.warning{
  color: #333333;
  background: var(--orange);
  padding:3px 7px 3px 7px;
  border-radius: 8px;
  font-size: smaller;
  border: 2px solid #333333;
}

div.warning header{
  font-size: 18pt;
  font-weight: normal;
  color: #333333;
  margin-top: 0px;
  margin-bottom: 5px;
  font-variant: normal;
  line-height: normal;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.0 - Page Layout Grid Sections 																			        */
/*                                                                                        */
/*========================================================================================*/
div.page_grid{
  display:grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content  auto;
  margin:0;
}

div.page_grid>header{
  grid-row: 1;
  grid-column: 1/4;
  display: flex;
}
/* div.page_grid>div.logo{
  grid-row: 1;
  grid-column: 1;
}

div.page_grid>nav.main{
  grid-row: 1;
  grid-column: 2 / 4;
} */

div.page_grid>section {
  overflow: auto;
  background-color: #ffffff;
  margin: 0px;
  padding: 10px;
  color:black;

}

div.page_grid>section.side{
  background-color: var(--lightGray);
  grid-row: 2;
  grid-column: 1 ;

}

div.page_grid>section.main{
  grid-row: 2;
  grid-column: 2/4 ;

}

div.page_grid>section.no_side{
  grid-row: 2;
  grid-column: 1 / 4 ;
}



div.window_grid{
  display:grid;
  width: 100vw;
  height: 100vh;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content min-content 1fr min-content;
  margin:0;
  background-color: var(--lightGray);
}

div.window_grid>header{
  grid-row: 1;
  grid-column: 1 / 3;
  background-color: var(--lightGray);
}


div.window_grid>nav.page{
  grid-row: 2;
  grid-column: 2;
}



div.window_grid>section.main{
  grid-row: 3;
  grid-column: 2 ;
  margin: 0;
  border-radius: 0;
  background-color: var(--white);
  overflow: scroll;
  background-color: #ffffff;
  padding: 10px;
  color:black;

}

div.window_grid>section.sidebar{
  grid-row: 2 / 4;
  grid-column:1;
  z-index: 10;
}


div.window_grid>section.footer{
  overflow: auto;
  background-color: #ffffff;
  padding: 10px;
  color:black;

  grid-row: 4;
  grid-column: 2/3;
  margin: 0;
  border-radius: 0;
  background-color: var(--white);
  padding: 0px;

  flex: 1 0  auto; 
  display:flex; 
  flex-flow: row nowrap; 
  justify-content: center;
  align-items: flex-end; 

}




section>div,
section>p {
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
}

/*
section.window{
  
}

section.window form {
  display:flex; 
  flex-flow: column nowrap; 
  height: 100%;
}
section.window form .button-container{
  flex: 1 0  auto; 
  display:flex; 
  flex-flow: row nowrap; 
  justify-content: center;
  align-items: flex-end; 
  margin:0px;
}
*/

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.1 - Header                																					        */
/*                                                                                        */
/*========================================================================================*/

header.page {
  
  display: flex;
  background-color: var(--instanceBGColor, brown);
}


header.page div.HeaderLeft {
  flex: 50%;
  padding-bottom: 10px;
}

header.page div.HeaderRight {
  flex: 50%;
  text-align: right;
}

header.page p {
  color: var(--instanceColor, white);
  margin: 0;
  margin-right: 10px;
  padding: 0;
}

header.page a {
  color: var(--instanceColor, white);
}





/*========================================================================================*/
/*                                                                                        */
/*	Section 4.2 - Tabs                  																					        */
/*                                                                                        */
/*========================================================================================*/
nav.page {
  display:flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: flex-start;

  margin: 0px;
  padding: 0px;
  padding-top:5px;
  background-color: var(--instanceBGColor);
  /* border-bottom: 1px solid red; */
}

nav.window {
  _justify-content: flex-start;
}
nav.page>ul {
  display:flex;
  margin: 0px;
  margin-left: 25px;
  padding: 0px;

}

nav.page>ul>li {
  display: inline-block;
  margin-left: -20px;
}



nav.page>ul>li>a {
  text-decoration: none;
  color: #000;
  font-weight: normal;
  background: #FFCC00;
  _background: var(--paper);
  position: relative;
  display: inline-block;
  margin: 0 22px;
  padding: 10px 11px;
  /* text-shadow: 0 1px 0 rgba(0, 2, 0, 0.4); */
  border-radius: 7px 7px 0 0;
  /* just to smooth the top edges */
}

nav.window>ul>li>a{
  _background-color: var(--paper);
 
}

nav.page>ul>li>a svg path.fg{
  fill:black
}
nav.page>ul>li>a svg path.bg{
  fill:none
}

/* @keyframes wave {
  0% {z-index: 1; transform: scale(1, 1)}
  15% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( 20deg );}
  25% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( -20deg );}
  35% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( 20deg );}
  45% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( -20deg );}
  55% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( 20deg );}
  65% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( -20deg );}
  75% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( 20deg );}
  85% {transform-origin: bottom center; transform: scale(1, 1.25) skewX( -20deg );}
  100% {z-index: 1; transform: scale(1, 1)}
}


nav.page>ul>li.shake>a{
  animation-name: wave;
  animation-duration: 1s;
  animation-iteration-count: 1;
} */


nav.page>ul>li>a:focus{
  _color: var(--darkGray);
  outline: none !important;
} 

nav.page>ul>li>a:focus path.fg{
  _fill: var(--darkGray);
} 



nav.page>ul>li>a:before,
nav.page>ul>li>a:after,
nav.pate>ul>li {
  content: " ";
  position: absolute;
  top: 0;
  width: 23px;
  height: 100%;
  background-color: inherit;
}

nav.page>ul>li>a:before {
  border-radius: 12px 0 0 0;
  transform: skew(-24deg);
  left: -16px;
  /* play with this one to give the LI border ~2px extrusion */
}

nav.page>ul>li>a:after {
  border-radius: 0 12px 0 0;
  transform: skew(24deg);
  right: -16px;
  /* play with this one to give the LI border ~2px extrusion */
  border-right: 3px solid #a38301;
  z-index: 1;
  /* overlap next element */
}
nav.window>ul>li>a:after {
  _border-right: 3px solid var(--gray);
}


nav.page>ul>li svg {
  height: 17px;
  width: auto;
  vertical-align: middle;
}


/* Hover and Active Man nav button styles  */

nav.page>ul>li.active>a,
nav.page>ul>li:hover>a {
  color: #FFF;
  background: #235A9A;
}

nav.window>ul>li.active>a,
nav.window>ul>li:hover>a{
  color: var(--black);
  background-color: var(--paper);
  border-bottom: 1px solid var(--paper);
  background-color: var(--white);
  border-bottom: 1px solid var(--white);
}

nav.page>ul>li.active>a:focus{
  _color:var(--lightGray);
  _--svgColor: var(--lightGray);
  outline: none !important;
} 
nav.page>ul>li.active>a:focus path.fg{
  fill:var(--lightGray)
}



nav.page>ul>li.active>a:before,
nav.page>ul>li:hover>a:before {
  z-index: 1;
  /* overlap prev element */
  border-left: 1px solid #01466e;
}

nav.window>ul>li.active>a:before,
nav.window>ul>li:hover>a:before {
  border-left: 1px solid var(--gray);
  border-bottom: 1px solid var(--white);

}

nav.page>ul>li.active>a:after,
nav.page>ul>li:hover>a:after {
  border-right: 3px solid #01466e;

}
nav.window>ul>li.active>a:after,
nav.window>ul>li:hover>a:after {
  border-right: 3px solid var(--gray);
  border-bottom: 1px solid var(--white);


}

nav.page>ul>li.active>a svg path.fg,
nav.page>ul>li:hover>a svg path.fg{
  fill:white
}


/* nav.page>ul>li:active svg,
nav.page>ul>li:hover svg {
  fill: white;
} */


/* Window Tabs - container for window tab contents */
div.tab {
  width:100%;
}


/*========================================================================================*/
/*                                                                                        */
/*	Section 4.2a - Inline Tabs           																					        */
/*                                                                                        */
/*========================================================================================*/

ul.tabBar {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.tabBar li {
  float: left;
  border: 1px solid lightgray;
  border-width: 1px 1px 0 1px;
  margin: 6px 5px 0 0;
    background: #f8f8f8;
  border-radius: 10px 10px 0 0;

}

ul.tabBar li.selected {
  position: relative;
  padding-bottom: 2px; 
    background: white;
  top: 1px;
  margin: 0px 5px 0 5px;
}

ul.tabBar li a {
  display:block;
  padding: 5px 15px;
  cursor: pointer;
}

ul.tabBar li.selected a {
  cursor: default;
  padding: 7px 15px;
}


section.tabContent{
  border-top: 1px solid lightgray;
  padding: 15px;
  clear: both;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.3 - Main Nav Menus         																					        */
/*                                                                                        */
/*========================================================================================*/
nav.main {
  display:flex;
  flex-flow: row nowrap;
  justify-content:flex-start;
  align-items: flex-start;
  
  margin: 0px;
  padding: 0px;
  /* padding-top:2px; */
  background-color: var(--instanceBGColor);
  /* border-bottom: 1px solid red; */
}

nav.main>ul {
  /* display:flex; */
  /* flex-direction: column; */
  /* margin: 1px 100px 5px 5px; */
  /* margin-left: 25px; */
  padding-left: 10px;

}


nav.main>ul>li {
  
  /* display: inline-block; */
  /* margin-left: -20px; */
  /* margin: -20px,5px,5px,5px; */
  padding: 0px 20px 0px 0px;
}

nav.main>ul>li>a {
  text-decoration: none;
}

nav.main>ul>li>a svg path.fg{
  fill:black
}
nav.main>ul>li>a svg path.bg{
  fill:none
}

nav.main>ul>li svg {
  height: 17px;
  width: auto;
  vertical-align: middle;
}


li.subNav {
  position: relative;
  display: inline-block;
}

li.subNav ul {
  list-style-type: none;
  display: none;
  position: absolute;
  /* left: 100px; */
  /* top: -1px; */


  color: black;
  
  text-align: left;
  font-weight: normal;
  background-color: var(--lightGray); */

  display: none;
  /* position: absolute; */

  padding: 10px 15px 10px 15px;
  margin: 0;
  min-width: 240px;
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .5);
  z-index: 999;
  border: 1px solid #cccccc;
}

li.subNav:hover ul {
  display: block;
}

li.subNav ul a {
  color: black;
  text-decoration: none;
  display: block;
  /* margin-bottom: 2px; */
  padding: 5px;
}

li.subNav ul path.fg{
  fill:black;
}
li.subNav ul path.bg{
  fill:none;
}


/*========================================================================================*/
/*                                                                                        */
/*	Section 4.4 - DL List for form and data display  															        */
/*                                                                                        */
/*========================================================================================*/

/*--------------------------------------*/
/*  defination list formatting          */
/*--------------------------------------*/
section dl{
  display:inline-grid;
  grid-auto-columns: 1fr 2fr;
  grid-auto-flow: column;
  gap: 0px 10px;

  margin: 0;
  padding: 0;
  width: 100%;
}

section dt {
  grid-column: 1;
  color: #038E95;
  font-weight: normal;
  margin: 0px;
  display:table-cell;
  vertical-align:top;
}

section dd {
  grid-column: 2;
  color: black;
  margin: 0px;
  display:flex; flex-direction: row; align-items:center;
  display:table-cell;
  vertical-align:top;
}

section.main dt,
section.main dd{
  padding: 5px 0px 5px 0px;

}


section.window dt,
section.window dd{
  padding: 5px 0px 0px 0px;

}

section dl.narrow{
  width: 50%;
}

section dt.wide{
  grid-column: 1 / 3;
}

/* the last half of the list is selected 
   See - https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child */
section dl.twoCol dt:nth-of-type(n+2):last-of-type, 
section dl.twoCol dt:nth-of-type(n+3):nth-last-of-type(-n+2),
section dl.twoCol dt:nth-of-type(n+4):nth-last-of-type(-n+3),
section dl.twoCol dt:nth-of-type(n+5):nth-last-of-type(-n+4),
section dl.twoCol dt:nth-of-type(n+6):nth-last-of-type(-n+5),
section dl.twoCol dt:nth-of-type(n+7):nth-last-of-type(-n+6),
section dl.twoCol dt:nth-of-type(n+8):nth-last-of-type(-n+7),
section dl.twoCol dt:nth-of-type(n+9):nth-last-of-type(-n+8),
section dl.twoCol dt:nth-of-type(n+10):nth-last-of-type(-n+9),
section dl.twoCol dt:nth-of-type(n+11):nth-last-of-type(-n+10),
section dl.twoCol dt:nth-of-type(n+12):nth-last-of-type(-n+11),
section dl.twoCol dt:nth-of-type(n+13):nth-last-of-type(-n+12),
section dl.twoCol dt:nth-of-type(n+14):nth-last-of-type(-n+13),
section dl.twoCol dt:nth-of-type(n+15):nth-last-of-type(-n+14),
section dl.twoCol dt:nth-of-type(n+16):nth-last-of-type(-n+15),
section dl.twoCol dt:nth-of-type(n+17):nth-last-of-type(-n+16),
section dl.twoCol dt:nth-of-type(n+18):nth-last-of-type(-n+17),
section dl.twoCol dt:nth-of-type(n+19):nth-last-of-type(-n+18),
section dl.twoCol dt:nth-of-type(n+20):nth-last-of-type(-n+19)
{
  grid-column: 3;
}
section dl.twoCol dd:nth-of-type(n+2):last-of-type, 
section dl.twoCol dd:nth-of-type(n+3):nth-last-of-type(-n+2),
section dl.twoCol dd:nth-of-type(n+4):nth-last-of-type(-n+3),
section dl.twoCol dd:nth-of-type(n+5):nth-last-of-type(-n+4),
section dl.twoCol dd:nth-of-type(n+6):nth-last-of-type(-n+5),
section dl.twoCol dd:nth-of-type(n+7):nth-last-of-type(-n+6),
section dl.twoCol dd:nth-of-type(n+8):nth-last-of-type(-n+7),
section dl.twoCol dd:nth-of-type(n+9):nth-last-of-type(-n+8),
section dl.twoCol dd:nth-of-type(n+10):nth-last-of-type(-n+9),
section dl.twoCol dd:nth-of-type(n+11):nth-last-of-type(-n+10),
section dl.twoCol dd:nth-of-type(n+12):nth-last-of-type(-n+11),
section dl.twoCol dd:nth-of-type(n+13):nth-last-of-type(-n+12),
section dl.twoCol dd:nth-of-type(n+14):nth-last-of-type(-n+13),
section dl.twoCol dd:nth-of-type(n+15):nth-last-of-type(-n+14),
section dl.twoCol dd:nth-of-type(n+16):nth-last-of-type(-n+15),
section dl.twoCol dd:nth-of-type(n+17):nth-last-of-type(-n+16),
section dl.twoCol dd:nth-of-type(n+18):nth-last-of-type(-n+17),
section dl.twoCol dd:nth-of-type(n+19):nth-last-of-type(-n+18),
section dl.twoCol dd:nth-of-type(n+20):nth-last-of-type(-n+19)
{
  grid-column: 4;
}


/* section dl.two{
  grid-template-columns: 1fr 2fr 1fr 2fr;;
} */

/* section dt[c2]{
  grid-column: 3;
}

section dd[c2]{
  grid-column: 4;
}

section dt.c2 {
  grid-column: 3;
}

section dd.c2 {
  grid-column: 4;
} */

section dl.middleBallance{
  grid-auto-columns: 1fr 1fr;
}

section dl.rightBallance{
  grid-auto-columns: 2fr 1fr;
}

section dl.outsideAlign>dd {
  text-align: right;
}

section dl.insideAlign>dt {
  text-align: right;
}

section dl.boxed dt,
section dl.boxed dd{
  border: 1px solid var(--gray);
}
/*========================================================================================*/
/*                                                                                        */
/*	Section 4.5 - Tables                            															        */
/*                                                                                        */
/*========================================================================================*/
table.main {
  width: 100%;
  margin: 0px 0px 5px 0px;
  padding: 0;
  border-spacing: 0px;
  background-color: white;
  margin-top: 5px;
}

/* table.main tr {
} */

table.main tr.selected td{
  background-color: var(--lightGray);
}

table.main th {
  font-weight: bold;
  color: #235A9A;
  text-align: left;
  padding: 4px 10px 0px 10px;
  border-bottom: 1px solid #accaec;
  /* border-top: 1px solid #accaec;
  background-color: #eaf2fa; */
  /* padding: 8px 10px; */
  vertical-align: middle;
  margin: 0px 10px 0px 10px;
}


table.main td {
  color: black;
  vertical-align: top;
  border-top: 1px solid #00000010;
  padding: 5px 10px 5px 10px;
}

table.main th.icon{
  width:10px;
}

/* section tr:first-of-type td {
  border-top: 0;
} */
table.main tr:first-of-type td
{
  border-top: 0;
  }

  table.main tr.subrow td
  {
    border-top: 0;
    font-size: 12pt;
    }
  

table.main td p {
 margin:0;
}

table.main tfoot td{
  background-color: #00000010; 
  padding: 0px 10px 5px 10px; 
}

table.main svg {
  height: 20px;
  width: auto;
  vertical-align:middle;  
}

table.main th>span{
  display:inline-block;
  width:min-content;
  vertical-align: middle;
}


table.sortable th:not(.sorttable_nosort) {
  cursor: pointer;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \25B4\25BE";
  cursor: pointer;

}
/* For sortable arrows */
table.sortable th::after {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}


tr.highlight {
  font-weight: bold;
  background: linear-gradient(0deg, var(--white) 0px, var(--paleYellow) 40px) !important;
  /* Important added to keep yellow on Cir_Client/page_Account.cfm  when a row is highlighted
   AND has a balance due*/
}
tr.highlight td.toolbox div.container{
  font-weight: normal;
  font-style: normal;

}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.6 - DL List for form and data display  															        */
/*                                                                                        */
/*========================================================================================*/

table.datagrid{
  white-space: nowrap;
}
table.datagrid td{
  border: 1px solid var(--lightPaceBlue);
}
table.datagrid input{
  border:0px;
  margin-top: 0px;
  margin-bottom: 0px;
}
table.datagrid input::-webkit-outer-spin-button,
table.datagrid input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
table.datagrid input:focus,
table.datagrid select:focus{
  outline: none !important;
  background-color: var(--lightGray);
}
table.datagrid select{
  border:0px;
  margin: 0 -8px;
}

table.datagrid input:invalid{
  background-color: var(--paleRed);
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.7 - Sidebar                																					        */
/*                                                                                        */
/*========================================================================================*/

/*	Side Navigation																			   */
nav.side {
  color: Black;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/* nav.side a.selected {
  background-color: #FFCC00;
} */

nav.side a {
  color: Black;
  text-decoration: none;
  display: block;
  padding:4px;
  white-space: nowrap;
  /* padding-left: 32px;
  text-indent:-32px; */
}

nav.side a.active,
nav.side a:hover {
  background-color: var(--lightGray);
  color: black;
  font-weight: bold;
}

nav.side svg {
  height: 20px;
  width: auto;
  vertical-align: middle;
}




/*========================================================================================*/
/*                                                                                        */
/*	Section 4.8 - Message Box            																					        */
/*                                                                                        */
/*========================================================================================*/

.mbox{
  top: 10%;
  width: 75%;
  padding: 20px;
  background-color: hotpink;
  color: white;
  border: 0;
  z-index: 1;
  border-radius: 10px;
  border:0;
}


.mbox h3 {
  color:inherit;
  border:0;
  width:100%;
  font-size: 18px;
  margin-bottom: 10px;
}
.mbox p {
  color:inherit;
  width:100%;
  margin-bottom: 10px;
}


.mbox button{
  background-color: white;
  border: 0;
}
.mbox button:hover{
  background-color: #f0f0f0;
}

.mbox #mbox_x_btn {
  margin:0;
  padding:0;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  background: none;
  box-shadow: none;
  border:0px;
  color:white;
  outline: none !important;
}
.mbox #mbox_x_btn:hover {
  color:black;
}



.mbox.info {
  background-color: var(--blue);
  border:0;
}

.mbox.warn {
  background-color: var(--orange);
  border:0;
}

.mbox.error {
  background-color: var(--red);
  border:0;
}

.mbox.success {
  background-color: var(--green);
  border:0;
}

.mbox.question {
  background-color: var(--indigo);
  border:0;
}


#mbox_cancel_btn,
#mbox_ok_btn,
#mbox_close_btn{
  display:none;
}

.mbox > form > svg{
  display: none;
  float: right;
  margin-right:25px;
  margin-bottom:25px;
  --svgColor:white;
  --svgColor2:none;
}

.mbox.error #mbox_error_icon{
  display:block;
}

.mbox.warn #mbox_warn_icon{
  display:block;
}

.mbox.info #mbox_info_icon{
  display:block;
}

.mbox.success #mbox_success_icon{
  display:block;
}

.mbox.question #mbox_question_icon{
  display:block;
}


.mbox.prompt #mbox_cancel_btn,
.mbox.prompt #mbox_ok_btn {
  display: inline-block;
}

.mbox.alert #mbox_close_btn{
  display:inline-block;
}


/* .alert {
  position: absolute;
  display: none;
  left: 50%;
  margin-left: -200px;
  top: 200px;
  width: 400px;

  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
} */


/*========================================================================================*/
/*                                                                                        */
/*	Section 4.9a - Linkbox                																					        */
/*                                                                                        */
/*========================================================================================*/

button.buttonBar{
  
}


ul.linkbox{
  margin:0px;
  padding:0px;
  list-style-type: none;
}

ul.linkbox > li{
  margin: 15px;
  padding: 5px;
  border: 5px solid #cccccc;
  background-color: #dddddd;
  border-radius: 5px;
  
}

ul.buttonBar > li:nth-child(1){
  margin-top: 0px;
}

ul.linkbox > li > a {
  text-decoration: none;
}

.linkbox svg {
  height:20px;
  width:auto
}

.linkbox .svgTitle {
  display: none;
}



/*========================================================================================*/
/*                                                                                        */
/*	Section 4.9a - Linkbox                																					        */
/*                                                                                        */
/*========================================================================================*/


ul.linkbox{
  margin:0px;
  padding:0px;
  list-style-type: none;
}

ul.linkbox > li{
  margin: 15px;
  padding: 5px;
  border: 5px solid #cccccc;
  background-color: #dddddd;
  border-radius: 5px;
  
}

ul.buttonBar > li:nth-child(1){
  margin-top: 0px;
}

ul.linkbox > li > a {
  text-decoration: none;
}

.linkbox svg {
  height:20px;
  width:auto
}

.linkbox .svgTitle {
  display: none;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.9 - Toolbox                																					        */
/*                                                                                        */
/*========================================================================================*/

.toolbox {
  margin: 0;
  white-space: nowrap;
  direction: rtl;
  width:min-content;
  position: relative;
}


.toolbox button {
  _visibility: hidden;
  border:0;
  padding: 0;
  margin: 0;
  background-color: unset;
}

.toolbox button:before {
  visibility: visible;
  content: "\00BB";
  font-weight: bolder;
  font-size: 12 px;
  position: relative;
}

.toolbox.open button:before {
  border: 1px solid var(--gray);
  border-left: 0px;
  padding: 5px 10px 5px 10px;
  content: "\00AB";
  background-color: white;
  z-index: 100;
  border-radius: 0 5px 5px 0;
  box-shadow: 8px 8px 15px -6px black;
}

.toolbox div.container {
  direction: ltr;
  display: inline-block;
  margin: 0px;

}

.toolbox.open div.container {
  position: absolute;
  margin-top: -6px;
  margin-right: -15px;
  background-color: white;
  padding: 10px;
  border: 1px solid var(--gray);
  border-radius: 5px 0px 5px 5px;
  box-shadow: 5px 5px 15px -15px rgba(0, 0, 0, .3);
  box-shadow: 8px 8px 15px -6px gray;
  z-index: 1;
}




.toolbox a {
  text-decoration: none;
  padding-right: 2px;
}
.toolbox a.openOnly{
  display:none;
}
.toolbox.open a,
.toolbox.open a.openOnly {
  display: block;
  margin: 15px;
}


.toolbox:not(.open) a:hover path.fg{
  fill:black;
}
.toolbox:not(.open) a:hover path.bg{
  fill:none;
}



.toolbox svg {
  vertical-align: middle;
  height:24px;
}

.toolbox.open svg {
  margin-right: 0px;
  height:36px;
}


.toolbox.open svg {
  margin-right: 0px;
}

.toolbox .svgTitle {
  display: none;
}

.toolbox.open .svgTitle {
  display: inline;
}



/*========================================================================================*/
/*                                                                                        */
/*	Section 4.11 - Filter Box             																					      */
/*                                                                                        */
/*========================================================================================*/

.filterBoxText{
  cursor: pointer;
  font-size:14pt;
  float:right;
}
.filterBoxText svg{
  height:16px;
 width: auto;
}
.filterBox{
  display:none;
  position:relative;
  background-color:white;
  box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .5);
  border: 1px solid var(--darkGray);
  padding:0;
  font-size: 14pt;
}
.filterBox header{
  background-color: var(--lightGray);
  margin:0;
  padding:15px;
  font-weight: bold;
  color:black;
}
.filterBox button.x{
  margin:0;
  padding:5px;
  padding-right: 15px;
  font-weight: bold;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  background: none;
  border:0px;
  color:var (var(--instanceColor));
  outline: none !important;
  float: right;
}

.filterBox  main{
 padding:15px;
}
.filterBox footer{
  padding: 0px 15px 15px 15px;
  display:flex;
  justify-content: center;
}
.filterBox svg {
 height:20px;
 width: auto;
}





/*========================================================================================*/
/*                                                                                        */
/*	Section 4.11 - Window dialog           																					      */
/*                                                                                        */
/*========================================================================================*/

#winBox{
  position: fixed;
  top: 25px;
  width: 800px;
  height: 600px;
  /* top: 5%;
  width: 90%;
  height: 90%; */
  padding: 0px;
  background-color: var(--lightGray);
  z-index: 200;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .5);
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid black;
}

/* #winBox.large{
  top: 0px;
  width: calc(100vw - 100px );
  height: calc(100vh - 100px );
} */

#winBox.large{
  top: 0px;
  width: 100%;
  height: 100%;
  /* max-height: 100%;
  max-width: 100%; */
}


#winBox::backdrop{
  background: #00000050
}


#winBox header{
  display:flex;
  background-color: var(--instanceBGColor);
  color: var(--instanceColor);
  height: 30px;
  overflow: hidden;
  cursor: grab;
  /* border-bottom: 1px solid var(--gray); */
}

#winBox h1{
  font-size:14pt;
  font-weight: normal;
  margin:0;
  padding:5px;
  padding-left: 15px;
  flex: 1 0 auto;
}
#winBoxURL{
  display:block;
  font-weight: normal;
  margin:0;
  padding:5px;
  padding-left: 15px;
  width:100%;
  align-self: end;
}

#winBox #winbox_min_btn,
#winBox #winbox_max_btn,
#winBox #winbox_x_btn{
  margin:0;
  padding:5px;
  padding-right: 15px;
  font-weight: bolder;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  background: none;
  border:0px;
  color:var (var(--instanceColor));
  outline: none !important;
}
#winBox #winbox_x_btn:hover{
  color:var(--gray)
}

#winBox #winbox_max_btn{
  display: inline;
}
#winBox #winbox_min_btn{
  display: none;
}


#winBox.large #winbox_max_btn{
  display:none;
}

#winBox.large #winbox_min_btn{
  display:inline;
}



#winBox iframe {
  border:0px;
  width:100%;
  height:calc(100% - 31px);
  margin: 0;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.13 - Dashboard              																					      */
/*                                                                                        */
/*========================================================================================*/

div.dash{
  display: grid;
  width:100%;
  height:95%;
  grid-template-columns: 1fr; 
  grid-auto-rows: 200px;
  grid-column-gap:40px;
  grid-row-gap: 40px;
}

div.dashcontainer{
  height: 100%;
  overflow: auto;
}

@media (min-width:800px){
  div.dash{
    grid-template-columns: 1fr 1fr;
  }
  
}

@media (min-width:1200px){
  div.dash{
    grid-template-columns: 1fr 1fr 1fr;
  }
  
}
/*========================================================================================*/
/*                                                                                        */
/*	Section 4.14 - Card                          																	      */
/*                                                                                        */
/*========================================================================================*/



#flowFrame{
  height:100%;
  overflow: auto;
  /* display: flex;
  justify-content: center; */
}

#flowContainer{
  /* display: flex;
  justify-content: center; */
}

#flowCanvas{
  margin: 0 auto;
  width: max-content;
  height: max-content;
  position: relative;
  transform-origin: 50% 0;
  transform-origin: 0 0;

}
.cardHolder{
  display:flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
 
}


.cardHolder:empty{
  display: none;
}

.card{
  border: 1px solid var(--lightGray);
  padding: 0px;
  width:auto;
  margin: 30px 10px 30px 10px ;
  box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, .5);
  z-index: 1;
  background-color: white;
  /* display: flex;
  flex-flow: row nowrap; */
}
.card header{
  background-color: var(--lightGray);
  margin:0;
  padding:15px;
  font-weight: bold;
}

.card header svg{
  height:24px;
  width: auto;
  float: right;
  margin: 0;;
}

.card table svg{
  height:24px;
  width: auto;
  float: right;
  margin: 0;;
}

.card svg{
  height:75px;
  width:auto;
  margin: 15px;
  display: inline-block;
  vertical-align: top;
  margin-right: 0;
}

.card a {
  text-decoration: none;
}

.card ul{
  display: inline-block;
  margin: 15px;
  margin-left:0
}

.card main{
  margin:15px;
}

.card footer{
  margin:15px;
}

#svgContainer {
  z-index: 10;
  position: absolute;
}

svg.connector path{
  stroke: var(--gray);
  stroke-width: 8;
}

svg.dashed path{
  stroke-dasharray: 5;
}


div.toggle{
  width: 40px;
  height: 40px;
  position: absolute;
  top: 40px;
  right: 60px;
  background-color: var(--paceBlue);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 20px;
}
div.toggle svg{
  height: 20px;
  width: auto;
}
div.toggle path.fg{
  fill:white;
}
div.toggle path.bg{
  fill:none;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 4.14 - Header Option Links            																	      */
/*                                                                                        */
/*========================================================================================*/
/* header.window{
  margin:0px;
  padding:0px 10px 0px 10px;;
}

header.window>ul{
}

header.window>ul>li{
  display: inline;
  margin:0px 15px 0px 0px;
}

header.window>ul>li>a:not(:hover) path.fg{
  fill:gray;
}
header.window>ul>li>a:not(:hover) path.bg{
  fill:none;
}

header.window>ul>li>a{
  color:black;
  font-weight: normal;
  font-size: 16px;
  text-decoration: none;
}


header.window>ul>li>a>svg{
  height: 20px;
  width: auto;
  vertical-align: middle;
}
header.window>ul>li>a:not(:hover) path.fg{
  fill:gray;
}
header.window>ul>li>a:not(:hover) path.bg{
  fill:none;
}
 */

/*========================================================================================*/
/*                                                                                        */
/*	Section 5.1 - Cir_Invoice/wind_InvoiceEnter.cfm																	      */
/*                                                                                        */
/*========================================================================================*/
.overlayContainer {
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
}

.overlayContainer svg.topLeft,
.overlayContainer input.topLeft{
  height:24px;
  position: absolute;
  top: 0;
  left: 0;
}


.overlayContainer svg.bottomRight,
.overlayContainer input.bottomRight{
  height:24px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2000;;
}






div.imageBanner{
  position: relative;
  display: inline-block; /* <= shrinks container to image size */
}
div.imageBanner div{
  height:24px;
  position: absolute;
    top: 0;
    left: 0;
    width:100%;
    color:white;
    border: 0px solid #9e9e9e;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    vertical-align: center;
    font-size:x-large;
    font-weight: bold;
    padding-top: 5px;
    padding-bottom: 5px;

}

div.imageBanner div.Product{
  background: rgba(0, 0, 255, 0.8);
}
div.imageBanner div.Inventory{
  background: rgba(128, 0, 255, 0.8);
}
div.imageBanner div.Listing{
  background: rgba(0, 128 , 0, 0.8);
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 5.1 - Cir_Invoice/wind_InvoiceEnter.cfm																	      */
/*                                                                                        */
/*========================================================================================*/
#itemsJson {
  height:375px;
}

.liUnit{
  white-space: nowrap;
}

#lineItemEntryDialog{
  top: 50;
  left: 50;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  padding: 20px;
  background-color: var(--paper);
  z-index: 1;
  border-radius: 10px;
  overflow: auto;
  box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .5);
  border:0;
}

#lineItemEntryDialog dl{
  display:inline-grid;
  grid-template-columns: min-content 1fr min-content 1fr;
  grid-template-rows: auto;
  grid-auto-flow: unset;
  margin-bottom: 15px; 
}

#lineItemEntryDialog dt {
  grid-column: initial;
}

#lineItemEntryDialog dd {
  grid-column: initial;

  display:flex;
  flex-flow: row  nowrap;
}

#lineItemEntryDialog dd.wide{
  grid-column: span 3;
}

#lineItemEntryDialog textarea{
  height: 60px;
}
 #lineItemEntryDialog img{
   max-width:200px;
   max-height: 60px;
 }
#ImageHolder{
  height:66px;
  background-color: white;
  margin-left:-10px;
  padding:2px;
  border: 1px solid var(--lightGray);
  border-left: 0;
  z-index: 1;
}
#ImageHolder:empty{
  display: none;
}

#lineItemEntryDialog table{
  border: 1px solid var(--lightGray);
} 
#lineItemEntryDialog th{
  background-color: var(--white);
  color: var(--paceGreen);
  border:0;
  padding:2px 10px 2px 10px;
} 
#lineItemEntryDialog td{
  border: 0;
}
#lineItemEntryDialog tfoot td{
  _background-color: white;
  font-weight: bolder;
}

#liContractSelect{
  width:auto;
}

#liAddRowContainer{
  text-align: center;
  vertical-align: middle;
}

.liEmpty{
  color:red;
  text-align: center;
}

/* #lineItemEntryDialog #LineImage{
  grid-row: span 2; 
  grid-column: span 3;
  
  display:flex;
  flex-flow: row  nowrap;
  justify-content: center;
  align-items: flex-start;
} */






/*========================================================================================*/
/*                                                                                        */
/*	Section 5.2 - Cir_Client/page_Contracts.cfm																	      */
/*                                                                                        */
/*========================================================================================*/

/* / */
.contract-person-primary{
  height: 12px;
  vertical-align: top;
}
.contract-person-primary path.fg{
  fill: var(--darkGray);
}



.contract-person{
  height: 12px;
  vertical-align: top;
}
.contract-person path.fg{
  fill: var(--gray);
}




/*========================================================================================*/
/*                                                                                        */
/*	Section 5.3 - Cir_Invoice/wind_PaymentApply.cfm																	      */
/*                                                                                        */
/*========================================================================================*/

div.payBalBar{
  display:flex; 
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}

div.payBalBar div{
 text-align: center;
 border: 1px solid var(--lightGray);
 padding:5px 10px;
}

div.payBalBar h3{
  border-bottom: 0;
}

div.payBalBar svg{
  height: 16px;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 5.4 - Cir_CommQueue/windCommQueueEntryView.cfm  												      */
/*                                                                                        */
/*========================================================================================*/
.attachemtFrame {
  border:0px;
  width:100%;
  height:325px;
  margin: 0;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 5.4 - Cir_Client/pate_Account.cfm  												      */
/*                                                                                        */
/*========================================================================================*/
tr.invBal{
  background: linear-gradient(0deg, white 0px, var(--veryPaleOrange) 25px);
}
tr.payBal{ 
  background: linear-gradient(0deg, white 0px, var(--veryPalePurple) 25px);
}


/*========================================================================================*/
/*                                                                                        */
/*	Section 5.5 - Cir_ShareFile                              												      */
/*                                                                                        */
/*========================================================================================*/

tr.file,
tr.folder {
  cursor: pointer;
}

/*========================================================================================*/
/*                                                                                        */
/*	Section 5.6 - PrePayments                              												      */
/*                                                                                        */
/*========================================================================================*/
.prepayment path.fg {
  fill: var(--amber);
}
.prepayment path.bg {
  fill: var(--paleYellow);
}

svg.prepayment .subicon path.fg{
  _fill:initial;
}



/*========================================================================================*/
/*                                                                                        */
/*	Section 5.6 - Photo Stack                               												      */
/*                                                                                        */
/*========================================================================================*/

.photo-stack {
  position: relative;
  margin: 0px; 
  width: 30px;
  height: 40px;
}
.photo-stack > p {
  position: absolute;
  /* width: 100%; */
  bottom: 0;
  left: 0;
  text-align: center;
  font-weight: bold;
  z-index: 1000;
}
.photo-stack img {
  position: absolute;
  top: 0;
  left: 0;
}

.photo-stack img:only-of-type{
  z-index: 999;
  transform: translate3d(0, 0, 0) rotate3d(0,0,0);
}

.photo-stack img:nth-child(1):not(img:only-of-type) {
  z-index: 999;
  transform: translate3d(0, 0, 0) rotate3d(0,0,0);
  box-shadow: 0px 0px 0px gray;

} 

.photo-stack img:nth-child(2) {
  transform: translate3d(25%, 25%, 0) rotate3d(0,0,1,15deg);
}


.photo-stack img:nth-child(3) {
  transform: translate3d(-25%, 25%, 0) rotate3d(0,0,1,-15deg);
}