/* GENERAL: =general
------------------------------*/

body, html, h1, h2, h3, p, ul, li, div, span {
	margin: 0;
	padding: 0;
}

body {
	color: #000;
	font: 110% helvetica,'Open Sans', Tahoma, "lucida grande", "lucida sans unicode",  arial, sans-serif; 
	text-align: center;
	min-height: 100vh;
}

html, body {
	margin: 0;
	color:#4B3916;
}

a {
	color: #333;
	font-weight: normal;
	background: transparent;
	text-decoration:none;
	outline:none;
}

a:hover {
	text-decoration:underline;
}

ul, li {
	display: block;
	list-style: none;
}

div.clear, br.clear, p.clear, .clear {
	clear:both;
	height:0;
	padding:0;
	margin:0;
	width:0;
	float:none;
}

.bold {
	font-weight:bold;
}

.right {
	text-align:right;
}

fieldset {
	border:0;
}

legend {
	display:none;
}

img {
	border: 0;
}

input:autofill {
  background: #fff; /* or any other */
}


select {
   appearance: none;
}

input, select{
	box-sizing:content-box;
	border: 1px solid #CACACA;
	border-top:0;
	border-left:0;
	margin:1em 0 1em 0;
	padding:0.8em 0em 0.8em 1.0em;
	border-radius:5px;
	color:#3A526A;
	background:#EDF0F3;
}
	
input:focus, select:focus { 
	box-shadow: 1px 1px 5px -2px rgba(0,0,0,0.58);
	outline: none;
}

.add-pointer {
	cursor:pointer;
}

.padding-left {
	padding-left:5px;
}

.padding-left10 {
	padding-left:10px;
}

.font-small {
	font-size:11px;
}

.highlight {
	color:#903;
}

.underline {
	text-decoration:underline;
}

.transition {
	transition: all 0.6s ease;
}

.responsive-text::after {
    content: attr(data-long);
}

.loginBackground {
	background: url(../images/loginBackground.jpg);
	width:100%; 
	height:auto;
}

/* MAIN CONTAINER: =maincontainer
------------------------------*/

#container {
	position:relative;
	margin:0;
	padding:0;
	height:auto !important; /* real browsers */
	height: 100%;
	min-height:100%;
	width:100%;
}

/* HEADER: =header
------------------------------*/

.menuWrap {
	width:100%; 
	margin:0;	
	z-index:80;
	border-bottom:1px solid #EFEFEF;
	position:sticky;
	top:0;
}

.menuLog {
	width:100%; 
	margin:0 auto;
}

div#LogSession {
	width: 100%;
	display: flex;
	justify-content: flex-end; /* Aligns items to the right */
	align-items: center; /* Vertically centers items if needed */	
/*	padding-right:4.0em; */
 	background-color:#3a4660;	
}

#LogSession .power, 
#LogSession .calc {
	margin: 8px 10px; /* Add space between the spans */
}

div#LogSession span.calc {
	margin-right:20px;
}

div#LogSession span a i {
	font-size:1.1em;
	padding:6px;
}

div#LogSession span.calc a {
	cursor:pointer;
}

div#LogSession a
{
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-right: 10px;
    border-radius: 50%;
	color:#DAE0DB;
	box-shadow: 0 0 10px 0px #888 inset;
}

div#LogSession a.power-button {
	background: radial-gradient(circle 30px at center, #BAEFBA 0%, #5cdb5c 47%, #5cdb5c 80%);
	color:#fff;
	}

div#LogSession a.power-button:hover {
	background:#ff0021;
	color: #fff;
	transition: background-color 0.30s;
}

div#LogSession a.calculator:hover {
	text-decoration:none;
	color:#FFF;
}

#LogoMenu {
	display: flex;           /* Use Flexbox for layout */
	justify-content: flex-start; /* Distribute space between items */
	align-items: center;     /* Vertically center both #header and #LogSession */
	width: 100%;             /* Ensure the container spans full width */
	background:#FFF;
}

#Logo {
	display:flex;
	align-items:center;
	gap:10px;
	background-image:url(../images/GC_Logo.png);
	background-repeat:no-repeat;
	background-position:top 2px left 10px;
	background-size:40px 40px;
}

#Logo h1 {
	font-family: 'Josefin Sans', sans-serif;
	padding-top:10px;
	padding-left:60px;
	font-weight: 600;
	margin-bottom:0;
    font-size: 2em;
    margin: 0; /* Remove default margins */
}


/* MAIN CONTENT: =content text
------------------------------*/
#content_wrap {
	width:80%;
	padding:0;
	margin:5em auto 5em auto;
	box-shadow: 8px 6px 25px -8px rgba(0,0,0,0.35); 
	background:#FFF;
}

#header h1 {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1.8em;
	font-weight: 600;
	text-align:left;
	width:80%;
	padding-top:15px;
	padding-left:15px;
	margin-bottom:0;
}

h1.categoryTitle {
	margin-bottom:5px;
	margin-left:12px;
	font-weight:bold;
	letter-spacing:0.04em;
	float:left;
	text-align:left;
	font-size: 1.8em;
	width:auto;
}

h3.collectionTitle {
	color:#438496; 
	padding-top:5px;
	font-size:1.3em;
}

span.collectionDetails {
	display:inline-block; 
	font-style:italic; 
	margin-top:9px;
}

#main_content {
	width:100%;
	background:#FFF;
	min-height:600px;
	margin:0;
	padding-bottom:2em;
}

#main_content p {
	line-height:1.6;
}

#main_content li {
	margin-top:20px;
	margin-left:10px;
}

#contentShadow {
	height:15px;
}

/* BODY TEXT: =body text
------------------------------*/

#section_txt {
	width:90%;
	margin:30px auto 10px auto;
	padding-top:1.5em;
	font-size:0.80em;
	text-align:justify;
	border:1px solid #E5E5E5;
	border-radius: 4px 4px 4px 4px;
}

#section_txt .subheading  {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:1.8em;
	color: #FF9900;
	font-weight:normal;
}

#section_txt .fn_list {
	width:95%;
	margin-left:auto;
	margin-right:auto;
}

#section_txt .nav_order {
	width:95%;
	border-top:1px dotted #CCC;
	margin-left:auto;
	margin-right:auto;
}

#section_txt a.lists {
	font-size:1.0em;
	color: #333;
	text-decoration: none;
	display: inline;
}

#section_txt ul {
	list-style: none;
	margin-left: 20px;
	padding: 7px 0 10px 0;
}

#section_txt li {
	display: block;
	width: 100%;
	background: transparent;
	margin: 0 5px;
	padding: 3px 0 3px 0;
}

#section_txt ul li a {
	color:#333;
}

#section_txt select, #section_txt textarea, #section_txt input {
	width:70%;
	border:1px solid #CCC;
	margin:2px 0 4px 0;
}

#section_txt input[type=submit]  {
	background:#0092ca; 
	color:#FFF;
	width:auto;
	padding: 1.2em;
	margin-top:6px;
	border:0;
	font-weight:bold;
	cursor:pointer;
	border-radius: 6px 6px 6px 6px;
	transition: 0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out;
	text-align:center;
}

a.printButton {
	margin: 25px 0 35px 0px;
	padding-left:30px;
	padding-right:30px;
}

#section_txt input[type=submit]:hover {
	background:#2e89ba;
}

#section_txt input[type=submit]:active {
	background: #2e89ba;
	box-shadow: inset 3px 3px 20px #4592af;
}

#section_txt label {
	font-weight:bold;
	text-align:right; 
	width:20%;
	padding:0.8em;
	float:left;
}

#section_txt a.content-link {
    color: #6B7A8F;
    border: none;
    box-shadow: none;
	border-bottom:3px solid #F7C331;
	background-size: 200% 200%;
	transition: background-position 0.6s;
	background-image: linear-gradient(to top, #F7C331 50%, white 0);
	background-position: top;
}

#section_txt a.content-link:hover {
    box-shadow: none;
    color: #6B7A8F;
	background-position: bottom;
	text-decoration:none;
}

#section_txt a.content-link:visited, #section_txt a.content-link:active {
    color: #6B7A8F;
	text-decoration:none;
	border:none;
	border-bottom:3px solid #F7C331;
    box-shadow: none;
}

#section_txt input.upload {
	border:1px solid #CCC;
}

div.itemContainer {
	margin:0 0 5px 0; 
	padding:0 0 0 2px; 
	min-height:135px; 
	border-bottom:2px solid #F0F0F0;
	width:100%;
	background: rgba(255,255,255,1);
}

div.itemContainer p {
	margin-top:0px;
	margin-bottom:10px;
}

.squareThumb {
  position: relative;
}

/* Force iframe to use full width and height of the modal */
.fancybox-iframe {
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

/* Remove default padding from the Fancybox modal window */
.fancybox-content {
    padding: 0 !important;
    margin: 0;
}

/* Ensure the Fancybox modal itself has no additional margins */
.fancybox-slide {
    margin: 0 !important;
    padding: 0 !important;
}

/* CUSTOM JQUERY DATEPICKER
----------------------------------*/
	
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 40% !important;
	padding:0.4em !important;
	margin:0 0.1em !important;
}

/* MISCELLANEOUS: = various
------------------------------*/

.taxbracket {
	background:#FFF; 
}

input.incomeYear, input:focus.incomeYear {
    border: none !important;	/* Remove the border */
    background: none;      		/* Remove the background */
    color: inherit;        		/* Inherit the text color */
    font: inherit;         		/* Inherit the font style */
	font-weight:bold;
    padding: 0 !important;            		/* Remove padding */
    margin: 0 !important;             		/* Remove margin */
    outline: none;         		/* Remove the outline when focused */
	box-shadow: none;			/* Remove the box shadow when focused */
}

.padRight15 {
	padding-right:15px;
}


/* DASHBOARD PAGE: =summary used for desktop page
------------------------------*/
#homeDash {
	width:100%;
}

.mainFrame {
	width:96%;
	margin:2em auto;
}

#colI, #colII {
	width:48%;
	float:left;
	margin:20px 1%;
	padding:0;
}

.rowI, .rowII, .rowIII, .rowIV {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

.rowIcolA, .rowIcolB,.rowIIcolA, .rowIIcolB {
	width:50%; 
	float:left;
}

.boxShadow {
	box-shadow: 2px 2px 6px -4px rgba(0,0,0,0.40);
	background-color:#FFF;
}

.borderRadius-12 {
	border-radius: 10px;
}

.tableBorder-top {
	border-top:1px solid #8f988d;
}

.tableBorder-bottom {
	border-bottom:2px solid #8f988d;
}

.marginTopSpacing-2em {
	margin-top:2em !important;
}

.marginTopSpacing-1em {
	margin-top:1em;
}

.marginBottomSpacing-2em {
	margin-bottom:2em !important;
}

.marginTopSpacing-10 {
	margin-top:10px;
}

.marginBottomSpacing-20 {
	margin-top:20px;
}

.marginTB10 {
	margin-top:10px;
	margin-bottom:10px;
}

.autoCenterElement {
	margin-left:auto;
	margin-right:auto;	
}

#homeDash h3 {
	margin-bottom:20px;
}

#homeDash h3 a, .col1B a, .col1C a {
	color:#438496;
	font-weight:bold;
}

.chart-wrapper1, .overallExpense, .weekly, .monthly, .InterestCalc, .YTDIncome, .YTDSavings, .Orders, .Upcoming, .HouseholdTotal  {
	margin-top:20px;
	margin-bottom:0px;
	padding:20px;
	box-sizing: border-box;
	background-color:#FFF;
}

.chart-wrapper2 { /* =power use */
	width:50%; 
	margin:20px auto;
	padding:10px; 
	background-color:#FFFFFF;
}

.chart-wrapper2 h3 {
	padding-bottom:10px;
}

.weekly, .monthly, .rowIcolA, .rowIcolB,.rowIIcolA, .rowIIcolB {
	 width:48%; 
	 float:left; 
	 margin-left:4%;
	 margin-top:20px;
	 margin-bottom:0;
}

.weekly {
	margin-left:0;
}

.rowIcolA,.rowIIcolA {
	margin-left:0;
	margin-top:0;
}

button.weeklyButton {
	all:revert;
	border:none;
	background:none;
	font-weight:bold;
	font-family:helvetica,'Open Sans', Tahoma, "lucida grande", "lucida sans unicode",  arial, sans-serif; 
	font-size:100%;
	color:#4B3916;
	cursor:pointer;
	padding-left:0;
}

button.weeklyButton:hover {
	text-decoration:underline;
}

.overallExpense span.label {
	display:block;
	text-align:right;
	margin-bottom:15px;
}

.overallExpense span.figure {
	display:block;
	text-align:right;
	margin-bottom:15px;
}

/* ===================================  DEBIT CARD ==================================== */

.card-group {
	background: linear-gradient(171.8deg, rgb(5, 111, 146) 13.5%, rgb(6, 57, 84) 78.6%);
	border-radius: 20px;
	position: absolute;
	position:relative;
	width: 330px;
	width: 100%;
	margin:0 auto;
}

.card {
	height: 198px;
	width: 330px;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(30px);  /* This will produce the blur */
	border: 2px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.card .logo img,
.card h3,
.chip img,
.wave img,
.number,
.name,
.card .from,
.card .to,
.ring {
	position: absolute; /* All items inside card should have absolute position */
}

.card .logo img {
	top: 20px;
	right: 20px;
	width: auto;
	height: 24px;
	opacity: 0.8;
}

.card h3 {
	top:20px;
	left:20px;
	font-family: 'Baloo Chettan 2', cursive;	
	background-image:url(../images/GC_Logo.png);
	background-size:30px;
	background-repeat:no-repeat;
	line-height:30px;
	padding-left:35px;
	font-size:1.4em;
	z-index:10;
}

div.card h3 a{
	color:#1D2731 !important;
}

.chip img {
	top: 70px;
	left: 20px;
	width:35px;
	height: auto;
}

.wave img {
	top: 70px;
	right: 20px;
	width:28px;
	height: auto;
}

.number,
.name,
.card .from,
.card .to {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 400;
	letter-spacing: 2px;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.card .number {
	left: 20px;
	bottom: 60px;
	font-family: "Nunito", sans-serif;
}

.card .name {
	font-size: 0.7rem;
	left: 20px;
	bottom: 40px;
}

.card .from {
	font-size: 0.7rem;
	bottom: 20px;
	right: 75px;
}

.card .to {
	font-size: 0.7rem;
	bottom: 20px;
	right: 20px;
}

.ring {
	height: 500px;
	width: 500px;
	border-radius: 50%;
	background: transparent;
	border: 50px solid rgba(255, 255, 255, 0.1);
	bottom: -250px;
	right: -250px;
	box-sizing: border-box;
}

.ring::after {
	content: "";
	position: absolute;
	height: 600px;
	width: 600px;
	border-radius: 50%;
	background: transparent;
	border: 30px solid rgba(255, 255, 255, 0.1);
	bottom: -80px;
	right: -110px;
	box-sizing: border-box;
}

.shine {
	background: rgba(255,255,255,0.05); 
	left: 390px; top: 0;
	margin: 0 15px 0 0;
	padding: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	transform: skew(50deg);
}

.shine-layer-two {
	transform: skew(80deg);
}

/* ============================================================================= */

a.background_circle {
  	display:inline-block;
	width: 19px;
	height: 19px;
	line-height: 19px;
	padding:5px;
	text-align: center;
	border-radius:50%;
	background: radial-gradient(ellipse at center,  #258dc8 0%,#258dc8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

a.background_circle p {
	color:#258dc8;
}

a.background_circle i {
	margin-top:1px;
	color: #fff;
}

a.background_circle:hover {
	text-decoration:none;
}

.weekly p, .monthly p {
	 margin-top:-13px; 
	 color:#D2EDFF; 
	 font-size:0.6em;
}

.percentChange {
	font-size:0.8em;
}

.percentChange .green {
	color:#6DBA8C;
}

.percentChange .red {
	color:#FF6A6A;
}

.input-wrapper {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom:10px;
}

.wrapper {
	width:100%;
}

.intCalLabel {
	text-align:left !important; 
	margin-left:0; 
	padding-left:0;
	width:80% !important;
}

.wrapper input {
	margin-bottom: 10px;
	border: none;
	border-bottom: 2px solid #585858;
	color: #585858;
	width:100%;
}

.wrapper input:focus {
	outline: none;
	border-bottom: 2.4px solid #69CDF3;
}


/* ====================================== IMAGE GALLERY ======================================= */

div.itemContainer ul.gallery-wrap  {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width:80%;
	margin:0 auto !important;
	padding:0;
	list-style:none;
    opacity: 0; /* Initially hidden */
    animation: fadeInAnimation 1s ease-in-out forwards; /* Apply animation */
	
	}

/* ====================================== IMAGE GALLERY ======================================= */


li.GalImgThumb {
	border:1px solid #C8C8C8;
	box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.3);
	border-radius:5px;
	background:#EFEFEF;
	display:flex; 
	flex-direction:column; 
	flex:1 1 20%; 
	margin:0.5em !important; 
	box-sizing:border-box; 
	padding:10px; 
	max-width: 20%;
	position:relative;
}

li.GalImgThumb:hover {
	-webkit-box-shadow: 3px 0px 14px 1px rgba(0,0,0,0.16); 
	box-shadow: 3px 0px 14px 1px rgba(0,0,0,0.16);
}

li.GalImgThumb img {
	width: 90%; /* Makes the image take up the full width of its container */
	height: auto; /* Ensures the image maintains its aspect ratio */
	margin:5px auto;
	object-fit: cover; /* Ensures the image covers the entire container */
	display: block; /* Removes the extra space below the image */
}

p.disposedTxt {
	position:absolute; 
	top:5px; 
	left:5px;
	font-size:0.9em;
	text-transform: uppercase;
	padding-left: 5px;
	padding-right: 5px;
	color:#222;
	background:#ffd000;
	border-radius:4px;
}

.descriptionbox {
	margin:10px;
	min-height:10em;
}

.descriptionbox p {
	margin:0 !important;
}

.name-container {
    padding: 10px;
    text-align: left;
    min-height: 6.5em; /* Sets a minimum height for the container */
    display: flex; /* Flexbox will ensure the spans are aligned at the top */
    flex-direction: column; /* Stacks the spans vertically */
}

.common-name, .scientific-name {
    display: inline-block; /* Ensures the elements respect line breaks and behave like block elements */
    vertical-align: top; /* Aligns text to the top of its container */
}

.scientific-name {
	font-style:italic;
}

.common-name {
    font-weight: bold; /* Makes the common name bold */
	margin-bottom:0.8em;
	font-size:1.1em;
}

li.GalImgThumb a.noteButton, li.GalImgThumb a.noNotes {
	display:block;
	margin: auto 10px 10px 10px;
	padding: 10px 15px;
	/*background-color: rgb(15, 98, 254); */
	background-color:#3a4660;
	color: #FFF !important;
	text-decoration: none;
	letter-spacing: 0.16px;
	text-align: center;
	font-weight:600;
	transition: background 70ms cubic-bezier(0,0,.38,.9),box-shadow 70ms cubic-bezier(0,0,.38,.9),border-color 70ms cubic-bezier(0,0,.38,.9),outline 70ms cubic-bezier(0,0,.38,.9);
	border-radius: 6px 6px 6px 6px;
}

li.GalImgThumb a.noteButton:hover {
	background-color:#4A5A7B;
}
					
li.GalImgThumb a.noNotes {
  background-color: #B8C0D3;
  cursor: default;
  pointer-events: none;
}

/* Modal background */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
}

/* Modal content box */
.modal-content {
  position: relative; /* This ensures the close button is positioned relative to the modal */
  background-color: white;
  margin: 15% auto;
  padding: 40px 25px 25px 25px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  text-align: left;
}
/* Close button */
.close-modal {
  position: absolute;
  top: 8px; /* Adjust this value to move it further up or down */
  right: 12px; /* Adjust to move it left or right */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

/* LOGIN PAGE: =
------------------------------*/
div.loginForm-container {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh; /* Adjust based on your container's height */
	
}
#login { /* box formulaire */
  background:
      radial-gradient(black 15%, transparent 16%) 0 0,
	  radial-gradient(black 15%, transparent 16%) 8px 8px,
	  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
	  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
	background-color:#373737;
	background-size:16px 16px;
    height: 340px;
    width: 480px;
    padding: 30px;
	
    position: relative;
/*    top: 50%;
    left: 50%;
	transform:translate(-50%, 50%); */
    z-index: 0;
    border-radius: 10px;
    box-shadow:
          0 1px 10px rgba(0,0,0,0.75), 
    	  0 0 2px rgba(0, 0, 0, 0.5),
          0 1px 1px rgba(0,0,0,0.5),
       	  0 3px 0 #373737,
          0 4px 0 rgba(0,0,0,0.5),
          0 0 0 #373737,
          0 1px 0 rgba(0,0,0,0.5), 
          0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
          0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
		  
		  box-sizing:border-box;
		  max-width:100%;
}

#login:before { /* "stitches" around the border. couture autour du formulaire */
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed rgba(143, 143, 143, 0.7);
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
}

#login:after{
	transform: none;
    height: 40px;
    position: absolute;
    right: -36px;
    width: 0;
    top: 88px;
    content: "";
    display: block;
    z-index: 20;
}

h1 {
    text-transform:  capitalize;
    text-align: right;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font-size:35px;
	font-weight:bold;
    letter-spacing: -0.06em;
}

.ribbon { /* ruban  */
    background-color: #C94700;
    background-size:5px 5px,100% 100% ;
    background-image: linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px,
    linear-gradient(top, #C94700, #B84100);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
    border-top-right-radius: 20px 5px;
    color: #301607;
    height: 55px;
    width: 480px;
    line-height: 55px;
    padding: 0 5px 0 0;
    margin-left: -32px;
    position: relative;
    text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
}

fieldset#inputs {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}

fieldset#actions{
	display: block;
    height: 92px;
    overflow: hidden;
    position: relative;
    text-align: center;
	border: 0;
    padding: 0;
}

fieldset#inputs{ /* contour des inputs */
	padding: 10px;
    margin: 0px;
    width: 400px;
    background-color: #C8BCB6;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),linear-gradient(top, #C8BCB6, #B3A39A);
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
    border-radius: 5px;
}
/*
@media screen and (-webkit-animation) {
	fieldset#inputs:before {
		width: 440px!important;
	}
	} */
fieldset#inputs:before{ /* couture autour des inputs */
	content: "";
	padding: 0px;
    margin: -18px -22px;
	width: 435px;
	height: 155px;
	position: absolute;
	border: 1px dashed rgba(143, 143, 143,0.7);
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
    border-radius: 2px;
	z-index: -1;
}

#inputs input { /* pictos des inputs */
    background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABkCAYAAACPQLC2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhtJREFUeNrsV1FuwjAMbRECBAIqxD+7ARyhOwE9QvfDd28wbrB+8wNHaG9QblBuAP9IzeADAYLOntwqZQlk6z6mKZEMkRO/2o7T+plpmhplRsUoOTSABtAA/wagij+z2ayg7Pf7XfgLQGxSRSDOdrt95/dNJhOxB9frNQCxQQwSnAdSD24HvOZsgdpWzgG+J0ViWdZAFSASAESMsY0qgIMGWQ4I0FHOwW63w2w/t9vtwX6/3yjVQbPZ7IK8tVqtFCSBeW6Mc9ThGu6RheCDeBSvBfMptzZFHX2EPACZFwAajcYYYnW5c0dxQT9EkayN8xwAsisJMb4TPtqEGYDzg2vg5B6gW6UuU5kvdOVO5T2SiAfAyluAMAVDRns/c2DqBkMDaAANoAE0gAbQAH+PsdyyFQFz8amls0jNSOcjg6nKjHu93gDav5gzzEbWBjuwx5aGQI2UxTdYMBZoCPMYZATiCT0AZjIU0Z4kSV5o3SBS5slIly1q8TqdzpDWnayrl5EuS9L+xUBCGL8uA4junByfVCYDcBXLIPiSA2QjCEAxxg9a3mnBA2Ahc2QjHN21JU9em6bpHA6HTQ5Qr9fnnOuZ8ZrOHgtqlCXyeDyGBb5Qq9VExp+s5HQ6rWgeCu8CjFeB2wxc9M/n8+rhZeIqLn8yxgfGS6XbSAWx5t2+XC5L5fcBHckTHYsH4YTfeR9oxqIBNIAG+DWADwEGAAgZ5RSSVu1LAAAAAElFTkSuQmCC) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 5px;
    width: 85%;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
	font-size:1.1em;
}

#username {
    background-position: 5px -2px !important;
}

#password {
    background-position: 5px -52px !important;
}

#inputs input:focus {
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    box-shadow: 0 0 0 1px #e8c291 inset;
}

#login span.chest {
	width:40px; 
	height:40px; 
	margin-left: -50px; 
	margin-top:7px;
	display:inline-block;
	position: absolute;
	background:url(../images/GC_Logo.png) no-repeat;
	background-position:top left;
	background-size:40px 40px;
}

/*--------------------*/
#actions {
    margin: 25px 0 0 0;
}

form#login #submit {/* bouton de connection */
    background-color: #F3A005;
    background-image: linear-gradient(top, #C94700, #B84100);
    border-radius: 2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0,0.7);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
    display: block;
    border: none;
	position: relative;
    float: none;
    height: 35px;
    padding: 0;
    margin: 0 auto 20px;
    width: 120px;
    cursor: pointer;
    font-size:18px ;
    color: #FFF;
    text-transform:  capitalize;
}

form#login #submit:hover,#submit:focus {
    background-color: #930000;
    background-image: linear-gradient(top, #B84100, #C94700);
}

form#login #submit:active {
    outline: none;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

form#login #submit::-moz-focus-inner {border: none;}

#actions a {
    color: #000000;
    float: none;
    line-height: 35px;
    margin-left: 10px;
    text-decoration: none;
}

#actions a:hover{color: #FFFFFF;text-decoration: underline;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}
/* ---------------------------- END LOGIN FORM -------------------------------- */



/* TAX: =
------------------------------*/
#expectedTax {
	display:none;
}

/* LIBRARY: =toggle
------------------------------*/
a.toggleLink {
	text-decoration:none;
}

a.toggleLink:hover {
	color:#0FAAB5;
	text-decoration:none;
}

img.toggleImg {
	vertical-align:bottom;
}

/* TRACK: =toggle
------------------------------*/


.TaskCatRow {
	padding-top:8px;
	padding-bottom:8px;
}

.TaskCatRow a {
	background:#30abd5;
	color:#FFF;
	font-family:'Open Sans',sans-serif;
	font-size:1.1em;
	font-weight:700;
	letter-spacing:.5px;
	display:block;
	width:100px;
	text-align:center;
	text-decoration:none;
	border-radius:10px;
	margin:5px;
	padding:1.1em;
	position:relative;
	box-shadow:inset 0 0 0 #22313F;
	transition:all 0.3s ease-out;
}

.TaskCatRow a:hover {
	color:#FFF;
	background:#8dbdd8;
	box-shadow:inset 0px -50px 0px #68A7CA;
}

.grey-text, div.grey-text a {
	color:#CCCCCC;
}

.toggleSwitch {
	position:relative;
}

.toggleSwitch a, .toggleSwitch i {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  }
  
.toggleSwitch i.fa-toggle-off {
	color:#888;
}

.toggleSwitch i.fa-toggle-on {
	color:#bada55;
}
/* ============================== */

/* ITEM DESCRIPTION: =toggle
------------------------------*/

.description-hide {
  height: 3.5rem;
  overflow: hidden;
  cursor: pointer;
}

.description-show {
  height: auto; 
  overflow: visible;
  cursor: default; 
}

.toggleItems {
	height:auto;
}

.add-read-more.show-less-content .second-section,
.add-read-more.show-less-content .read-less {
	display: none;
}

.add-read-more.show-more-content .read-more {
	display: none;
}

.add-read-more .read-more,
.add-read-more .read-less {
	font-weight: bold;
	margin-left: 2px;
	cursor: pointer;
}

/* ============================== CALCULATORS ================================ */


/* CURRENCY CONVERTER: =toggle
------------------------------*/

#input-values, #output-values {
	width:100%; 
}

input.convertAmount, select.currencyType {
	box-sizing: border-box;
	width:100% !important;
 	resize: none;
  	flex: 1;
	margin-bottom:20px !important;
}

#original-currency-amount {
	padding-left: 50px;
}

button {
	width: 300px;
	height: 40px;
	font-size: 20px;
	font-weight: 600;
	color: #00539cff;
}

#exchange {
	display:block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin: 12px auto 20px auto;
	outline: 0;
	color: #00539cff;
	border: 4px solid #ffd662ff;
}

#center, .center {
	text-align:center;
	justify-content: center;
}

#output-text {
	display: none;
	margin-top:30px;
}

span.from {
	display: block;
	font-size: 1.0em;
	color: #666;
	font-weight:bold;
	float:left;
	padding-right:10px;
}
 
span.to {
	display:block;
	font-size:2.0em;
	color: #333;
	font-weight: bolder;
	float:left;
	margin:20px 0 20px 0;
}

#exchange-rate {
	cursor: default;
}



/* ============= CALCULATORS ================= */
/* OTHERS:
------------------------------*/

.calculatortable {
	border-collapse: collapse;
	margin: 15px auto; 
	padding: 7px 0px;
	border: 1px solid #F8F8F8;
}

.calculatorForms {
	width:70%;
}

fieldset.calculatortable label {
	margin:6px 0 1px 0px;
	font-weight:bold;
	font-size:0.9em;
	display:block;
	padding-right: 8px;
	width:90%;
	text-align:right;
	float:left;
}

fieldset.calculatortable input, select {
	margin:2px 0 4px 0;
	width:90%;
}

.calculatortable input.button {
	padding:0.8em 1.0em 0.8em 1.0em;
	width:auto;
}

#intResult {
	margin-top: 10px;
	color: #585858;
	text-align: left;
	display:none;
}

#intResult div {
	margin-bottom: 5px;
}

div.finYr-leftcell, div.finYr-rightcell {
	flex-shrink: 0;
    flex-grow: 0;
    white-space: nowrap;
	margin-right:10px;
}

div.finYr-rightcell  {
	text-align:center;
}

div.finYr-rightcell input {
	background:#0092ca; 
	color:#FFF;
	box-sizing: border-box;
	height:3.0em;
	cursor: pointer;
	padding:12px;
	transition: 0.2s box-shadow ease-in-out, 0.2s background-color ease-in-out;
	font-weight:bold;
}

div.finYr-rightcell input:hover{
	background:#2e89ba;
	box-shadow: 1px 1px 5px -2px rgba(0,0,0,0.58);
}


/* ============= DVD ================= */

.synopsis p {
	margin:0;
	padding:0;
}

.evenrow {
	background-color:#F6F6F5;
}

.movieClass {
	float:left; 
	width:266px; 
	height:37px; 
	margin:0 0 2px 10px; 
	padding:0; 
	background:url(../images/Classifications.jpg) no-repeat;
}
/* end */

/* STAR RATING: =dvds
------------------------------*/

.hover_rate {
	background: url('../images/star.png'); 
	z-index: 1;
	cursor:pointer;
}

.highlight {
	font-family: Arial, sans-serif;
	font-size: 14px;
	position: relative;
	/* top: 1px; */
	color: #93784b;
	font-weight: bold;
}

.star_rating {
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #93784b;
	float: left;
	width: 100px;
	position: relative;
	top: 1px;
	margin-left:4px;
}

/* TOOLTIPS: =tooltips
------------------------------*/
.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(../images/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }


/* FAV RECIPES: =library
------------------------------*/

div.recipeDetails {
	 width:500px; 
	 border-bottom:1px solid #EFEFEF; 
	 padding:4px;
}

div.recipeDetails p {
 	margin:0; padding:0;
}

/* TRACK: =google Caldendar
------------------------------*/

iframe.gCal {
	display:block;
	margin: 15px auto;
	border: 0;
	width:90%;
	height:600px;
}

/* EXPENSES: =expense form and chart
------------------------------*/

g[class^='raphael-group-'][class$='-creditgroup'] {
	 display:none !important;
}

input.datepicker, input.powerUseDatepicker
{
    box-sizing: border-box;
	width: 33% !important;
	float:left;
}

div.datePickerSpacer {
	float:left; 
	width:4%; 
	padding-left:1em;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
/*
.togglebox, */
.toggle_container { 
	border: 1px solid #E2E5D8;
	background:#D9DDCC;
	width: 100%;
	clear: both;
	margin:2px 0px;
	padding:0px;
}

/* end toggle information */

a.adjust:hover{
	background:#333;
	color:#FFF;
	transition: all 400ms ease;
}

/* CUSTOM CHECKBOXES
----------------------------------*/

fieldset#checkboxes {
	padding:0;
	margin-left:21%;
}

.checkboxEnclosure {
	float:left; 
	width:40%;
	}

.checkbox-custom, .radio-custom {
    opacity: 0;
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    cursor: pointer;
}

.checkbox-spaceLabel {
	height:4px;
	margin:0 !important;
	padding:5px !important;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
	width:60% !important; 
	text-align:left !important;
	margin-bottom:0 !important;
	margin-top:-20px !important;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
	border-radius: 4px 4px 4px 4px;
	border: 0px solid #ddd;	
	background: rgb(241,251,254);
	background: linear-gradient(180deg, rgba(241,251,254,1) 0%, rgba(242,245,246,1) 25%, rgba(206,216,219,1) 100%); 
}

.checkbox-custom:checked + .checkbox-custom-label:before {
	background: rgb(255,212,61);
	background: radial-gradient(circle, rgba(255,212,61,1) 0%, rgba(252,196,0,1) 52%, rgba(230,178,0,1) 100%);
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #ccc;
}

.checkboxEnclosure input, .checkboxEnclosure label {
	margin-top: 0;
}


/* BACK TO TOP: =scroll to top
------------------------------*/

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    background: rgba(255,153,0, 0.7);
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    border-radius: 35px;
    display: none;
    transition: all 0.3s ease;
	z-index:20;
	box-shadow: 0px 10px 15px -5px rgba(0,0,0,0.15);
}

.back-to-top i {
    color: #6B7A8F;
    margin: 0;
    position: relative;
    left: 0px;
    top: 9px;
    font-size: 22px;
    transition: all 0.3s ease;
	z-index:21;
}

.back-to-top:hover {
    background: rgba(255,153,0, 0.9);
}

.back-to-top:hover i {
    color: #000;
    top: 5px;
}


/* CHARTS: =fusion charts
------------------------------*/
.chart-wrapper {
	display: flex;
	justify-content: space-between; /* Adjusts space between items */
	align-items: flex-start; /* Ensures top alignment */
	flex-wrap: wrap; /* Allows flex items to wrap to the next line */
}



.chart-item {
	padding: 6px 0;
}

.chart-item.full-width {
  width: 100%;
  box-sizing: border-box;
}

.chart-item.half-width {
  flex: 0 0 48%;
  box-sizing: border-box;
}

#chart-container { /* On Income Page */
	flex: 0 0 100%; /* Flexbox equivalent of 100% width */
	margin-right:0%;
}

#pie-container { /* On Income Page */
	flex: 0 0 48%; /* Flexbox equivalent of 48% width */
	margin-right: 2%;
}

#barchart-container { /* On Expenses Page */
	flex: 0 0 100%; /* Flexbox equivalent of 100% width */
	margin-top:20px;
}

#power_pie-container { /* On Power Page */
	flex: 0 0 100%; /* Flexbox equivalent of 100% width */
    margin-top: 20px; /* Set top margin only */
    margin-left: auto; /* Auto margin on the left */
    margin-right: auto; /* Auto margin on the right */
}

#power_bar-container {
	flex: 0 0 100%;
	margin-top: 20px; /* Set top margin only */
    margin-left: auto; /* Auto margin on the left */
    margin-right: auto; /* Auto margin on the right */
}


/* PAGINATION: =pagination
------------------------------*/
#pagination {
	text-align:right;
	height:26px;
	margin-top:8px;
	font: 0.9em normal Arial, Helvetica, sans-serif;
}

/* pagination style */
.pagin {
	padding: 4px 0;
	margin: 0;
	font-family: "Verdana", sans-serif;
	font-size: 1em;
	font-weight: bold;
}

.pagin * {
	padding: 4px 9px;
	margin: 0;
}

.pagin a {
	border: solid 1px #B0B0B0;
	background-color: #FFF;
	color: #5a5a5a;
	text-decoration: none;
	border-radius: 2px;
}

.pagin a:visited {
	border: solid 1px #B0B0B0;
	background-color: #FFF;
	color: #5a5a5a;
	text-decoration: none;
}

.pagin a:hover, .pagin a:active {
	border: solid 1px #B0B0B0;
	background-color: #EEF0E8;
	color: #5a5a5a;
	text-decoration: none;
}

.pagin span {
	cursor: default;
	border: solid 1px #808080;
	background-color: #FFF;
	color: #5a5a5a;
	border-radius: 2px;
}

.pagin a:has(i), .pagin span:has(i) {
	border:none;
	font-size:1.4em;
	color: #5a5a5a;
	background-color:inherit;
}

.pagin a:has(i):hover, .pagin a:has(i):active, .pagin span:has(i):hover {
	border:none;
	color: #000;
	background-color:inherit;
}

.pagin span.current {
	border: solid 1px #B0B0B0;
	background-color: #FAFAFA;
	color: #5a5a5a;
}

/* DATA ROWS: =data row settings
------------------------------*/

.tblHeader, .asset-data-row, .expense-data-row, .income-data-row, .orders-data-row, .task-data-row, .data-row  {
	display:flex;
	width:100%;
	margin:0.5em 0;
}

.asset-data-row:hover, .expense-data-row:hover, .income-data-row:hover, .orders-data-row:hover, .task-data-row:hover {
	box-shadow: 3px 4px 5px -3px rgba(0,0,0,0.3);
}

/* COLUMN WIDTHS: =column widths
------------------------------*/

.width5, .width10, .width15, .width20, .width25, .width30, .width33, .width35, .width40, .width45, .width50, .width60, .width70, .width80, .width85, .width90, .width100 {
/*	vertical-align:top; */
	padding:6px 0;
	margin:0;
}

.width5 {flex: 1 1 5%} .width10 {flex: 1 1 10%;} .width15 {flex: 1 1 15%;} .width20 {flex: 1 1 20%;} .width25 {flex: 1 1 25%;} .width30 {flex: 1 1 30%;} .width33 {flex: 1 1 33.3%;} .width35 {flex: 1 1 35%;} 
.width40 {flex: 1 1 40%;} .width45 {flex: 1 1 45%;} .width50 {flex: 1 1 50%;} .width60 {flex: 1 1 60%;} .width70 {flex: 1 1 70%;} .width80 {flex: 1 1 80%;} .width85 {flex: 1 1 85%;} .width90 {flex: 1 1 90%;} .width100 {flex: 1 1 100%;}

.max-width5 {max-width:5%} .max-width10 {max-width:10%;} .max-width15 {max-width:15%;} .max-width20 {max-width:20%;} .max-width25 {max-width:25%;} .max-width30 {max-width:30%;} .max-width33 {max-width:33.3%;} .max-width35 {max-width:35%;} 
.max-width40 {max-width:40%;} .max-width45 {max-width:45%;} .max-width50 {max-width:50%;} .max-width60 {max-width:60%;} .max-width70 {max-width:70%;} .max-width80 {max-width:80%;} .max-width85 {max-width:85%;} .max-width90 {max-width:90%;} .max-width100 {max-width:100%;}

.flex-totalCenter {
	display:flex;
	align-items: center;      /* new */
	justify-content: center;  /* new */
}

.tblHeader {
	background: #95A5A6;
	color: #ffeba7;
	padding:12px 0;
	margin-bottom:5px;
	font-size:1.1em;
	font-weight:bold;
	border-top:1px solid #EEE;
	border-bottom:1px solid #EEE;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lineHeight-21 {
	line-height:27px;
	height:27px;
}

.firstCell {
    box-sizing: border-box; 
	padding-left:6px;
}

.FinLogo {
	width:26px;
	height:26px;
    margin: 0 10px;
	padding: 0px;
    position: relative;
	background-color:#FFFFFF;
	border-radius:40%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:26px 26px;
}

.FinLogo:hover {
	box-shadow: 0px 0px 8px -3px rgba(0,0,0,0.6);
}

.serveLogo {
	background-size:40px 40px;
	width:40px;
	height:40px;
	border-radius:40%;
}

.asset-data-row a {
	width:26px; 
	height:26px; 
	border-radius:40%;
	padding:0; 
	display:inline-block; 
	text-decoration:none;
}




/* ===================================== end main container ========================= */

/* @media all and (max-width: 769px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), 
only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	*/