/* Colors */
/*=====================================================================================================================================
lightning blue: #0cdfdf
light gray: #e5eff0
dark gray: #3c585e
black: #1f2d30
module: individual box
*/

/* Reset defaults */
/*=====================================================================================================================================*/
html, body {
	margin: 0;
	padding: 0;
	font-size: 1em;
	background: white;
	/*background-image: url(/background.jpg);
	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;*/
	height: 100%;
	width: 100%;
}

input[type="radio"] {
	margin: 0;
}

/* Fonts */
/*=====================================================================================================================================*/
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: auto;
  font-weight: 100 1000;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/dm-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

h1, h2, h3, h4, p, a, label, input, select, table, legend{
	font-family: 'DM Sans Variable';
	color: #1f2d30;
}

p, label, i, a, button, th, td, input#clientFinTX, .fa-button {
	font-weight: 300;
	font-size: 0.8em;
	color: #333;
	margin: 0;
}

p.text-align-left, label.text-align-left, i.text-align-left, a.text-align-left, button.text-align-left, th.text-align-left, td.text-align-left {
	text-align: left
}

a {
	color: #777;
	cursor: pointer;
}

h1 {
	font-weight: 700;
	font-size: 1.5em;
	margin: 0.25em 0;
}

.humble-h1 {
	font-size: 0.75em;
	text-transform: uppercase;
	display: inline;
	padding-right: 1em;
}

h2 {
	font-weight: 700;
	font-size: 1.1em;
	margin: 0.25em 0;
}

h3 {
	font-weight: 700;
	font-size: 1em;
	margin: 0.25em 0;
}

h4 {
	font-weight: 700;
	font-size: 0.8em;
	margin: 0.25em 0;
}

hr {
	border: 1px dotted #e5eff0;	
}

p {
	margin: 1em 0;	
}

p:first-of-type {
	margin-top: 0;
}

p:last-of-type {
	margin-bottom: 0;
}

p span.comment {
	color: gray;
	font-style: italic;
}

p span.bold {
	font-weight: bold;
}

p span.light {
	color: gray;
}

p.center {
	text-align: center;
}

button {
	font-size: 0.9em;
}

.lightning-blue {
	color: #0cdfdf;	
}

.goodDelta, .positive {
	color: green;
}

.badDelta, .warning, .negative {
	color: red;
}

 {
	color: red;
}

/* General spacing */
/*=====================================================================================================================================*/

#app {
	padding: 0.5em;
}


.module {

	/*box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.5);
	border: 1px solid #e5eff0;
	width: 50em;
	*/
	margin: 0.5em;
	padding: 0.5em;
	padding-left: 0;
	border-radius: 0.25em;
	background: white;
}

.bordered-module {
	border: 1px solid #ddd;	
	padding-left: 0.5em;
}

.submodule {
	width: fit-content;
	padding: 1em;
	margin-top: 0.5em;
	border: 1px solid #ddd;
	border-radius: 0.25em;
	break-inside: avoid-column;
	position: relative;
}

.submodule:first-of-type {
	margin-top: 0;
}


.submodule fieldset{
	padding: 0em;
	break-inside: avoid-column;
}

.submodule .subsection {
	padding: 0.1em 0.3em;
	margin: 1em 0;
	border: 1px solid #ddd;
	border-radius: 0.25em;
}

/* Inputs */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

fieldset {
	border: 0;
	break-inside: avoid;
	margin: 0;
}

legend {
	display: none;
}

.inputs {
	margin: 0.5em 0;
}

label {
	color: #777;
	margin: 0 1em;
	font-size: 0.75em;
}

label.p-style-label {
	margin: 0;	
}

input, select {
	border: 1px solid #ccc;
	background: #fafafa;
	padding: 0.25em;	
	width: 10em;
}

input#clientFinTX {
	border: 0;
	background: white;
}

input:hover, select:hover {
	background: #eee;
}

input[type="file"] {
	background: white;
	border-right: 0;
}

input[type="radio"] {
	width: 1em
}

input[type="checkbox"] {
	width: 1em
}


.highlighted-inputs {
	margin-bottom: 1em;
	padding: 0.5em;
	background: #eee;
}

/* Buttons */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

button {
	padding: 0.25em 0.5em;
	margin: 1em 0.5em 0.5em 0;
	border: 1px solid #777;
	background: white;
	color: #3c585e;
	cursor: pointer;
	border-radius: 0.2em;
	/*box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);*/
}

button:hover {
	box-shadow: 0 0 3px 1px #0cdfdf;
}

button.disabled {
	color: #ddd;	
	border: 1px solid #ddd;
}
button.disabled:hover {
	box-shadow: initial;
}

button.small {
	font-size: 0.85em;
	margin-top: 0;
}

.fa-button {
	background: white;
	padding: 0.25em;
	cursor: pointer;
	border-radius: 5em;
	font-size: 1em;
}

.fa-button.red, .fa-solid.red {
	color: red;
}

.fa-button.green, .fa-solid.green {
	color: green;
}

.fa-button.blue, .fa-solid.blue {
	color: blue;
}

.fa-button.red:hover, .fa-button.green:hover, .fa-button.blue:hover {
	color: #3c585e;
}

.fa-button.disabled, .fa-button.disabled:hover{
	background: white;	
	color: lightgray;
	box-shadow: initial;
}

.fa-no-format, .fa-no-format:hover {
	background: initial;
	border-radius: 0;
	padding: 0;
	margin-left: 0;
	color: initial;
	box-shadow: initial;
}

/* Tables */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

table {
	border-collapse: collapse;
}

th {
	color: #777;
	font-size: 0.8em;
	text-align: left;
	padding: 1em 0.25em;
}


td {
	padding: 0.25em;
	text-align: left;
	font-weight: 300;
	width: auto; /* Remaining columns adjust automatically */
}

th:first-of-type, td:first-of-type {
	padding-left: 0;
	width: 15em;
}

/* Input Tables */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

table.input-table {
	border-collapse: collapse;
	width:50em;
}

.input-table th {
	color: #777;
	font-size: 0.8em;
	text-align: left;
	padding: 1em 0em;
}


.input-table td {
	border: 1px solid #ccc;
	background: white;
	padding: 0;
	margin: 0;
	font-size: 0.7em;

	text-align: left;
	font-weight: 300;

	min-width: 7em;

}

.input-table .inputs {
	margin: 0;
}

.input-table td.tx-td-input input, td.tx-td-input select{
	border: 0;
	background: white;
}

.input-table td.actions-column {
	min-width: 7em;
	border: 0;
	background: white;
	padding-left: 1em;
}

.input-table input[type="checkbox"], #main-menu-module input[type="checkbox"] {
	width: 0.8em;
	height: 0.8em;
}

/* Specific spacing */
/*=====================================================================================================================================*/

/* Indicators */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
.loading-container .fa-spinner {
	animation-name: spin;
	animation-duration: 1000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear; 	
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.saved-status {
	font-family: 'DM Sans Variable';
	font-weight: 300;
	text-transform: uppercase;
	color: white;
	background: green;
	padding: 1em;
	border-radius: 0.25em;
	position: fixed;
	top: 1em;
	left: 50vw;
	box-shadow: 0 1px 5px 1px rgba(100, 100, 100, 0.5);
}


/* Onboard */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

#onboard-module {

	/*background-color: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);*/
	/*
	box-shadow: 0 2px 5px 1px #ddd;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	min-height: 90vh;*/

	margin: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	min-height: 90vh;

}

#onboard-module .submodule {
	width: 20em;
	font-size: 1.1em;
}

#onboard-module .submodule.wide {
	width: 41em;
}

#onboard-module fieldset {
	border: 1px solid #ddd;
	padding: 1em;
}

#onboard-module legend {
	display: initial;
}


#onboard-module .close-modal-x {
	background: initial;
	border-radius: 0;
	box-shadow: initial;
	padding: 0;
	margin-left: 0;
	color: initial;
	position: absolute;
	top: 1.5em;
	right: 1.5em;
}

#onboard-module .close-modal-x:hover {
	color: red;
}


/* Main Menu */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

#main-menu-module a{
	font-size: 0.8em;
	cursor: pointer;
	padding: 0 0.25em;
	text-decoration: none;
}

#main-menu-module a:hover, #main-menu-module a.selected{
	color: #333;
	text-decoration: underline;
}

.main-menu-item {
	display: inline;
	position: relative;
	height: 0;
	width: 0;
}

#main-menu-module .submodule {
	background: white;
	position: absolute;
	margin: 0;
	top: 1.5em;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 1px 5px 1px rgba(100, 100, 100, 0.3);
	border-radius: 0.25em;
}

#main-menu-module .alert{
    border: 1px solid #ddd;
    padding: 1em;
    margin-top: 1em;
}

#main-menu-module .alert p{
	color: red;
    font-size: 0.75em;
    margin: 0;
}

#main-menu-module .alert .fa-triangle-exclamation {
	color: red;
    font-size: 1em;
    margin-bottom: 1em;
}

.main-menu-item .inputs:first-of-type {
	margin-top: 0;
}

.main-menu-item .inputs label {
	margin: 0;
}

#main-menu-module input {
	height: 1.5em;
	width: 10em;
}

.main-menu-item button {
	margin-bottom: 0;
}

#main-menu-module .columns-2 {
	columns: 2 10em;
	column-gap: 1em;
	width: 21em;
}

#main-menu-module .column {
	break-inside: avoid;
	max-width: 10em;
	width: 100%;
}

#main-menu-module #upload-transaction-submodule.centered-modal, 
#main-menu-module #transaction-viewer-submodule.centered-modal
{
	position: fixed;
	top: 3em;
	left: 50%;
	transform: translate(-50%, 0%);
	max-height: 70vh;
}

#main-menu-module #upload-transaction-submodule.centered-modal .table-container {
	overflow: scroll;
	max-height: 50vh;
	border: 1px solid #ddd;
	border-radius: 0.25em;
	padding: 0.5em;
	margin: 0.5em 0;
}


/* Account Number Management */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
#account-number-mgmt-submodule table.input-table {
	width:initial;
}

/* Welcome Module */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Upload Transaction */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/* Quick Categorizer */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

#main-menu-module .quick-categorize-module {
	display: inline;
	position: relative;
	height: 0;
	width: 0;
}

#main-menu-module #quick-categorize-submodule {
	background: white;
	position: absolute;
	width: 20em;
	margin: 0;
	bottom: 0em;
	left: 0;
	right: 0;
	top: initial;
	z-index: 1000;
	box-shadow: 0 1px 5px 1px rgba(100, 100, 100, 0.3);
	border-radius: 0.25em;
}

#main-menu-module #quick-categorize-submodule input {
	height: initial;
	width: initial;
}

#main-menu-module #quick-categorize-submodule .quick-categorize-element-details {
	padding: 0.5em;
	border: 1px solid #ddd;
	border-radius: 0.25em;
	margin: 0.5em 0;
}

#main-menu-module #quick-categorize-submodule .quick-categorize-element-details p {
	font-size: 1em;
	margin: 1em;
}


.qC-blinker-on {
	animation: blink_fast 0.5s infinite;
	margin-left: 0;
}
@keyframes blink_fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Transaction Viewer */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

#transaction-viewer-submodule label {
	margin-left: 0.5em;
}

#transaction-viewer-submodule .subfilters {
	margin: 0.5em 0;
	padding: 0.25em;
	border: 1px solid #ccc;
	border-radius: 0.25em;
}

/* Average Performance Table */
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

.columns-2 {
	column-count: 2;
	column-width: 35em;
	column-gap: 1em;
	/*width: 95vw;*/
}

.column {
	break-inside: avoid;
	max-width: initial;
	width: initial;
	column-width: auto;
}

#average-performance-submodule {
	min-width: 33em;
	border: 0;
}

.average-performance-table td:first-of-type {
  width: 150px;
}

.average-performance-table td {
	padding: 0.25em;
}

.average-performance-table tr.overhead-category-rows:nth-child(even) {
	background: #f9f9f9;
}

.average-performance-table tr.overhead-category-rows td {
	font-size: 0.75em;
}

.average-performance-table tr.overhead-category-rows td:first-of-type {
	padding-left: 1em;
}

.average-performance-table tr.single-line-row {
	border-top: 1px dotted #aaa;
	border-bottom: 1px dotted #aaa;
}

.average-performance-table tr.double-line-row {
	border-top: 2px double #aaa;
	border-bottom: 2px double #aaa;
}

.average-performance-table tbody:hover tr {
	background: white;
}

.average-performance-table tbody:hover tr:hover {
	background: #f3f3f3;
}

.average-performance-table td:hover, table td:hover a{
	background: #3c585e;
	color: white;
}

.category-breakdown-chart-submodule, .point-performance-chart-submodule {
	width: initial;
}

/*Wide tables*/
/*Thank you: https://codepen.io/team/css-tricks/pen/wXgJww?editors=1100
Table transforms when screensize is too narrow*/
/*@media
only screen 
and (max-width: 760px), (min-device-width: 768px) 
and (max-device-width: 1000px)  {

	/* Force table to not be like tables anymore 
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) 
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr {
		margin: 0 0 1rem 0;
	}


	/*td:before {
		/* Now like a table header 
		position: absolute;
		/* Top/left values mimic padding 
		top: 0;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}*/

	/*
	Label the data
	You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
	
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Secret Alias"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
	*/

}