/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Antic&display=swap');


html, body 	{ margin:0; padding:0; height:100%; background-color:#d8d8d8; font-family: 'Antic', sans-serif; }

#global { background-color:white; height:100%; position:relative; text-align: center; overflow:hidden; }	

.arrow 		{ width:15px; height:15px; text-decoration:none; }
.arrow svg 	{ fill:#d8cec3; }

section#add 	{ padding:10px 20px; height:176px; }
section#histo 	{ background-color:#f2ece6; padding:20px 20px; height:220px; }
section#stats 	{ background-color:#d8cec3; height:213px; position:relative; }
section#form_add { position:absolute; width:100%; height:100%; background:white; top:0; display:none; z-index:100; }

/*@media (min-width: 700px) {
 	#global 		{ height:692px; width:338px; margin:0 auto 0 auto; position:relative; top:20px; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2); }
	section#histo 	{ height:214px; }
}*/


section#add table 		{ width:100%; border-collapse:collapse; vertical-align:middle; font-size:13px; }
section#add table:before,
section#add table:after 	{ content:' '; display:block; height:196px; width:12px; position:absolute; top:0; background:white; 
								transform: skewX(3.5deg); }
section#add table:before 	{ left:33%; margin-left:1px; }
section#add table:after 	{ left:67%; margin-left:-15px; }

section#add table td 	{ height:72px; background-color:white; border-top:10px white solid; border-bottom:10px white solid; width:33%; 
							text-align:center; }
section#add table tr td.oblig 			{ background-color:#d8cec3; cursor:pointer; }
section#add table tr td.loisirs			{ background-color:#f2ece6; cursor:pointer; }
section#add table tr td.revenus 	 	{ background-color:#b4e573; cursor:pointer; }

section#add table td a 					{ display:inline-block; padding:0 10px; }
section#add table tr:nth-child(1) td:nth-child(1) a 	{ margin-left:-10px; }
section#add table tr:nth-child(2) td:nth-child(3) a 	{ margin-left:5px; }
section#add table tr:nth-child(3) td:nth-child(3) a 	{ margin-left:10px; }

/*section#add table td:first-child 	{ padding-right:10px; }
section#add table td:last-child 	{ padding-left:10px; }*/
section#add table td a 	{ color:black; text-decoration:none; }


section#histo div 	{ overflow-y:scroll; height:100%; padding-right:10px; }
section#histo table { border-collapse:collapse; width:100%; font-size:14px; vertical-align:bottom; }
section#histo table td { border-bottom:0.5px dotted #d8cec3; padding:4px 10px; }
section#histo table tr:first-child td { border-top:0.5px dotted #d8cec3; }
section#histo table td:nth-child(1) { width:25px; text-align:left; font-size:11px; text-transform:uppercase; color:#998675; }
section#histo table td:nth-child(2) { text-align:left; }
section#histo table td:nth-child(3) { width:60px; text-align:right; }
section#histo table td.neg { color:#8cc63f; }


section#histo ::-webkit-scrollbar 		{ width:8px; }
section#histo ::-webkit-scrollbar-track 	{ background:#f2ece6; }
section#histo ::-webkit-scrollbar-thumb 	{ background:#d8cec3; }

section#form_add form 	{ padding:40px 20px; text-align:left; }
form p					{ margin-top:0; text-align:left; }
label 					{ display:inline-block;width:70px; float:left; margin-top:3px; }
select					{ width:calc(100% - 70px); height:25px; }
input[type='text'],		
input[type='number']	{ width:calc(100% - 81px); height:21px; padding-left:5px; }
input[readonly]			{ width:calc(100% - 79px); height:21px; padding-left:5px; border:1px solid #998675; background:#f2ece6; 
							border-radius:2px; color:#998675; }
input[type='submit']	{ width:100%; height:30px; border:1px solid black; background:#d8cec3; border-radius:2px; }
input[type='reset']		{ width:100%; height:30px; border:1px solid #998675; background:#f2ece6; border-radius:2px; color:#998675; }

section#historique 			{ background:#998675; height:100%; width:100%; position:absolute; z-index:100;
								top:100%; left:-100%; box-sizing:border-box; }
/*section#historique 			{ top:0; left:0; }*/
section#historique .slider 	{ height:calc(100% - 60px); }
section#historique .slick-list, section#historique .slick-track, section#historique .slick-slide { height:100%; }
section#historique .slick-slide 	{ padding-left:20px; padding-right:20px; }
section#historique h3 				{ text-align:left; color:#e7e0d8; margin:0 20px 5px; font-size:16px; font-weight:normal; }
section#historique h3 				{ margin-top:30px; }
section#historique .stats-box		{ background-color:#d8cec3; padding:20px; font-size:13px; margin-bottom:30px; }


section#historique .annuel .stats-box.with-scroll:before 	{ content:' '; display:block; width:100%; height:1px; 
																border-bottom:0.5px dotted rgba(0,0,0,0.3); }
section#historique .stats-box table 	{ width:100%; border-collapse:collapse; border-top:0.5px dotted rgba(0,0,0,0.3); }
section#historique .stats-box table.budget-body.scroll 	{ height:206px;overflow-y:scroll; width:calc(100% + 12px); display:block; padding-right:4px;
															border:none; }
section#historique .stats-box table.budget-body.scroll tbody 	{ width:100%; display:block; }
section#historique .stats-box table.budget-body.scroll tr 		{ width:100%; display:block; overflow:auto; }
section#historique .stats-box table.budget-body.scroll tr>* 	{ float:left; }

section#historique .stats-box table.budget-body.scroll td.icon 		{ text-align:right; padding:4px 0 3px 0; }
section#historique .stats-box table.budget-body.scroll td.icon img 	{ display:inline-block; height:15px; cursor:pointer; }

section#historique .stats-box table.budget-foot th,
section#historique .stats-box table.budget-foot td 	{ font-weight:bold; }
section#historique .stats-box table.budget-foot td.green { color:#8cc63f; }

section#historique .stats-box th 		{ text-align:left; border-bottom:0.5px dotted rgba(0,0,0,0.3); margin:0; padding:5px 0; font-weight:normal; }
section#historique .stats-box td 		{ border-bottom:0.5px dotted rgba(0,0,0,0.3); margin:0; padding:5px 0; }
section#historique .stats-box .budget-body tr:last-child th,
section#historique .stats-box .budget-body tr:last-child td 	{ border-bottom:none; }
section#historique .stats-box td span 	{ background-color:#c7b299; text-align:right; display:inline-block; height:15px; 																		float:left; margin-right:7px; }
section#historique .stats-box td.neg span 	{ background-color:#8cc63f; }

section#historique .hebdo .stats-box th:nth-child(1)  	{ width:88px; text-align:left; }
section#historique .hebdo .stats-box td:nth-child(2) 	{ text-align:left; }

section#historique .annuel .stats-box th:nth-child(1)  	{ width:55%; text-align:left; }
section#historique .annuel .stats-box td:nth-child(2) 	{ width:20%; text-align:right; }
section#historique .annuel .stats-box td:nth-child(3) 	{ width:25%; text-align:right; }

section#historique .remb .stats-box th:nth-child(1)  	{ width:55%; text-align:left; }
section#historique .remb .stats-box td:nth-child(2) 	{ width:35%; text-align:right; }
section#historique .remb .stats-box td:nth-child(3) 	{ width:10%; text-align:right; }

section#historique ::-webkit-scrollbar 			{ width:8px; }
section#historique ::-webkit-scrollbar-track 	{ background:#d8cec3; }
section#historique ::-webkit-scrollbar-thumb 	{ background:#c7b299; }

section#historique:after 	{ content:' '; display:block; background-color:#d8cec3; width:100%; height:60px; position:absolute; bottom:0;
								clip-path: polygon(-1% 50% , -1% 100%, 101% 100%, 101% 0%); z-index:-1; }

section#historique .arrow 		{ position:absolute; bottom:45px; left: 15px; }

section#historique .slick-dots  { right:10px; width:40%; bottom:-43px; }
section#historique .slick-dots li 		 { width:35px; height:15px; padding:0; margin:0; }
section#historique .slick-dots li button { width:35px; height:15px; padding:5px 0; }
section#historique .slick-dots li button:before { width:35px; height:5px; content:' '; background-color:#f2ece6; opacity:1; top:5px; }
section#historique .slick-dots li.slick-active button:before { background-color:#998675; }

section#stats .balance 	{ position:absolute; background:#8cc63f; top:20px; left:0; width:165px; height:55px; z-index:50; text-align:left;
							clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 79% 0%); }
section#stats .balance.neg 	{ background:#c1272d; color:#d8cec3; }
section#stats .balance .title { margin-left:15px; font-size:13px; margin-top:10px; }
section#stats .balance .montant { font-size:18px; margin-left:65px; }
section#stats .balance.neg .montant	{ margin-left:75px; }
section#stats .left 	{ background-color:#998675; width:100%; height:213px; clip-path: polygon(0% 0%, 0% 100%, 65% 100%, 30% 0%);
							position:absolute; top:0; }
section#stats .left:before { content:' '; display:block; width:100%; height:1px; border-bottom:1px dashed black; bottom:80px;
								position: absolute; }
section#stats .bars { position:absolute; left:45px; bottom:-15px; width:100px; height:160px; transform: rotate(-90deg); }
section#stats .bars div { background-color:#c7b299; margin-bottom:10px; text-align:left; padding:1px 11px 2px 5px;
    						font-size:14px;	width:var(--width); }
section#stats .bars div.orange { background-color:#f7931e; }

section#stats .arrow 		{ position:absolute; bottom:15px; left: 190px; }
section#stats .curWeek { float:right; display:block; margin-right:25px; margin-bottom:10px; width:115px; text-align:center; }
section#stats .donut,
section#stats .donut *,
section#stats .donut *::after,
section#stats .donut *::before 	{ box-sizing:border-box; }


/* Pie */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

#stats .pie {
  --b: 10px;
  --c: #f7931e;
  --bg: #e7e0d8;
  --w: 115px;
}
#historique .pie {
  --b: 15px;
  --c: #8cc63f;
  --bg: #c7b299;
  --w: 150px;
}
#historique .pie .heading {
	font-size:30px;
}
#historique .pie .subtitle {
	font-size:18px;
}


.pie {
  --p: 20;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  float: right;
  clear:right;
  margin: 0px 25px;
}
.pie .heading {
	font-size:24px;
	padding-right:15px;
}
.pie .subtitle {
	font-size:14px;
	font-weight:normal;
	padding-left:15px;
}

.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background: radial-gradient(farthest-side, var(--c) 98%, #0000) top/var(--b)
      var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p) * 1%), #0000 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
}
.pie:after {
  inset: calc(50% - var(--b) / 2);
  background: var(--c);
  transform: rotate(calc(var(--p) * 3.6deg))
    translateY(calc(50% - var(--w) / 2));
}
.pie-bg:before {
  inset: 0;
  background: radial-gradient(farthest-side, var(--bg) 98%, #0000) top/var(--b)
      var(--b) no-repeat,
    conic-gradient(var(--bg) calc(100 * 1%), #0000 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--b)),
    #000 calc(100% - var(--b))
  );
}
.pie-bg:after {
  inset: calc(50% - var(--b) / 2);
  background: var(--bg);
  transform: rotate(calc(100 * 3.6deg))
    translateY(calc(50% - var(--w) / 2));
}
.animate {
  animation: p 1s 0s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p {
  from {
    --p: 0;
  }
}