/*------------------------------------------------------------------
* Version: 0.1
* Author: Simon Rüfenacht
* Website: https://www.sumis.ch
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
# [Import]
------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/*------------------------------------------------------------------
# [Root / Reset]
------------------------------------------------------------------*/
:root{
	--bs-body-font-family: "Noto Sans",sans-serif;
	--bs-font-sans-serif: "Noto Sans";
	--bs-body-color: #0b0b0b;
	--bs-body-bg: #FAFAFA;
	--bs-border-radius: 0.5rem;
	--bs-border-color: rgb(234, 234, 234);
	--bs-primary-rgb: 115, 161, 255;
	--ui-primary-color: 62,180,137;
	--ui-card-bg: #f4f4f4;
	--ui-gray-100: #f0f0f0;
	--ui-border-color: rgb(224, 224, 224);
}
.font-terminal{
	font-family: "Noto Sans Mono",sans-serif;
	font-weight:400;
	text-transform:uppercase;	
}

/*------------------------------------------------------------------
# Body
------------------------------------------------------------------*/
html { 
	font-size:14px;
}
body {
	font-size:1rem;
    width: 100%;
    height: 100%;
	text-size-adjust:100%;
}
a,
a:hover,
a:focus {
    text-decoration: none;
	color: inherit;
}

/*------------------------------------------------------------------
# Layout
------------------------------------------------------------------*/
#wrapper{
	width:100%;
}
#sidebar-wrapper{
    width:340px;
}
#sidebar-wrapper .sidebar-nav a{
    border-color: #0000;
	color: var(--bs-secondary);
}
#sidebar-wrapper .sidebar-nav a:hover{
	color: var(--bs-black);
	background-color: var(--ui-gray-100);
}
#sidebar-wrapper .sidebar-nav a.active{
	color: var(--bs-black);
	background-color:#fff;
	border:1px solid var(--bs-border-color);

}
#sidebar-wrapper .sidebar-nav-header{
	border-left:4px solid transparent;
	margin-left:-4px;
	padding: 0.375rem 0.75rem;
	padding-left: calc(0.375rem + 4px);
}
#sidebar-wrapper .konto-list li.list-item{
	border-left:4px solid transparent;
	margin-left:-4px;
	padding: 0.375rem 0.75rem;
	padding-left: calc(0.375rem + 4px);
}

#sidebar-wrapper .konto-list li.list-item:hover{
	background-color: rgba(var(--ui-primary-color),0.1);
}
#sidebar-wrapper .konto-list li.list-item.active{
	border-color: rgba(var(--ui-primary-color),1);
	color: rgba(var(--ui-primary-color),1);
}
#sidebar-wrapper .logo{
	width:32px;
}
#sidebar-wrapper .logo-label{
	font-size:1.5rem;
	font-weight:bold;
	color: rgba(var(--ui-primary-color),1);
}
.login-wrapper .logo{
	width:40px;
}
.login-wrapper .logo-label{
	font-size:1.5rem;
	font-weight:bold;
	color: rgba(var(--ui-primary-color),1);
}
#content-wrapper{
	padding-top:2rem;
	padding-bottom:2rem;
}

/* Headings
------------------------------------------------------------------*/
h1,h2,h3{
	margin:0;
	padding:0;
}
h3{
	font-size:1.25rem;
	font-weight:600;
}
.heading{
	margin-bottom:2.5rem;
}


/*------------------------------------------------------------------
# Components
------------------------------------------------------------------*/

/* Grid
------------------------------------------------------------------*/



/* Lists
------------------------------------------------------------------*/
.list-group {
    --bs-list-group-bg: var(--bs-white);
    --bs-list-group-item-padding-x: 1.5rem;
    --bs-list-group-item-padding-y: 0.75rem;
}
.list-group-item-action:hover .form-control,
.list-group-item-action:hover .form-select,
.list-group-item-action:hover .icon-wrapper{
	background-color: var(--bs-white);
}


/* Dropdown
------------------------------------------------------------------*/
.dropdown-menu{
	--bs-dropdown-border-color: var(--bs-border-color);
	--bs-dropdown-bg: var(--bs-white);
    --bs-dropdown-link-active-bg: rgb(var(--ui-primary-color));
}
.dropdown-scrollable{
	max-height:60vh;
	overflow-y: scroll;
}
.dropdown-sm .dropdown-menu{
    --bs-dropdown-font-size: 0.875rem;
}
.dropdown-divider{
	border-color: var(--bs-border-color);
}

/* Forms
------------------------------------------------------------------*/
.form-label{
	font-size:0.875rem;
	margin-bottom:0.25rem;
	color: var(--bs-secondary);
}
.form-control:focus,
.form-select:focus{
	box-shadow:none !important;
	border-color: var(--bs-gray-400);
}
.split-submit{
	display:none;
}
fieldset{
	margin-bottom:0rem;
	padding-bottom:1rem;
}
fieldset:last-of-type{
	border:0;
}
fieldset legend{
	background-color: var(--ui-gray-100);
	font-size:0.875rem;
	margin-top:1rem;
	padding:0.375rem;
	color: var(--bs-gray-600);
	text-transform: uppercase;
}


/* Buttons
------------------------------------------------------------------*/
.btn-light{
	--bs-btn-bg: var(--bs-body-bg);
	--bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
	--bs-btn-hover-bg: #E4E5E5;
}
.btn-primary{
	--bs-btn-color: var(--bs-gray-600);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-bg: var(--bs-white);
	--bs-btn-active-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--ui-border-color);
    --bs-btn-hover-border-color: var(--bs-gray-500);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-active-border-color: rgba(var(--ui-primary-color),1);
	--bs-btn-active-bg: rgba(var(--ui-primary-color),0.1);
	--bs-btn-hover-bg: #E4E5E5;
	font-weight:600;
}


/* Tables
------------------------------------------------------------------*/
.table{
	--bs-table-bg: #fff;
    --bs-table-striped-bg: var(--ui-card-bg);
	vertical-align: middle;
}

/* Tables
------------------------------------------------------------------*/
.nav{

    --bs-nav-link-color: var(--bs-secondary);
    --bs-nav-link-hover-color: rgb(var(--ui-primary-color));
}
.nav-underline {
    --bs-nav-underline-border-width: 0.25rem;
}

/*------------------------------------------------------------------
# Cards
------------------------------------------------------------------*/
.card-db{
	padding:1rem;
	background-color: #fff;
    border-radius: var(--bs-border-radius);
	border:1px solid var(--bs-border-color);
}
.card-db a:hover{
	color:#000;
	text-decoration:underline;
}
.card-db-grid{
	margin-top:1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.card-db-grid.ext{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr !important;
}
.card-db .grid-item{
	padding:0.25rem 0.75rem;
    border-left:2px solid var(--bs-border-color);
}
/*------------------------------------------------------------------
# Charts
------------------------------------------------------------------*/
.chart-bars{
	background-color: var(--bs-gray-200);
	height:30px;
	position: relative;
	overflow:hidden;
}
.chart-bar{
	height:30px;
	content:" ";
}
.chart-bar-2{
	height:12px;
	position:absolute;
	left:0;
	top:9px;
	animation: expandBar 1.5s ease;

}
.chart-label{
	position:absolute;
	height:20px;
	top:7px;
	right:5px;
	font-size:0.75rem;
}
.circular-chart {
	display: block;
	width:45px;
	height: 45px;
}
.circle-bg {
	fill: none;
	stroke: #eee;
	stroke-width: 3.8;
}

.circle {
	fill: none;
	stroke-width: 2.8;
	stroke-linecap: round;
	animation: progress 1.5s ease-out forwards;
}

.circular-chart.orange .circle {
	stroke: #ff9f00;
}

.circular-chart.green .circle {
	stroke: rgba(var(--bs-success-rgb), 0.75);
}

.circular-chart.blue .circle {
	stroke: rgba(var(--bs-primary-rgb), 0.75);
}
.circular-chart.red .circle {
	stroke: rgba(var(--bs-danger-rgb), 0.75);
}

.percentage {
	fill: #666;
	font-family: sans-serif;
	font-size: 0.5em;
	text-anchor: middle;
}
@keyframes progress {
	0% {
		stroke-dasharray: 0 100;
	}
}
@keyframes expandBar {
  0% {
    width: 0%;
  }
}
.progress{
	height:4px;
}
.progress-bar{
		animation: expandBar 1.5s ease;
}
.bi-arrow-clockwise.spin::before{
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}


/*------------------------------------------------------------------
# Helpers
------------------------------------------------------------------*/
.border-transparent {
    border-color: #0000 !important;
}
.border-ausgaben{
	border-left:2px solid rgba(var(--bs-danger-rgb), 0.75);
}
.border-sparen{
	border-left:2px solid rgba(var(--bs-primary-rgb), 0.75);
}
.shadow-border-xs {
    box-shadow:rgba(0, 0, 0, 0.06) 0px 2px 4px 0px;
}
.shadow-hover:hover{
    box-shadow:rgba(0, 0, 0, 0.12) 0px 4px 8px 0px;
}
.hover:hover{
	background-color: var(--bs-tertiary-bg);
}
.text-xs{
	font-size:0.75rem;
}
.text-sm{
	font-size:0.875rem;
}
.text-md{
	font-size:1.125rem;
}
.text-lg{
	font-size:1.25rem;
}
.text-xl{
	font-size:1.5rem;
}
.text-xxl{
	font-size:2rem;
}
.bg-muted{
	
	background-color: var(--bs-gray-200);
}
.icon-flex, .icon-wrapper {
	padding-top:2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-wrapper {
    border-radius: 50%;
	background-color:var(--bs-gray-100);
	border:1px solid var(--bs-gray-400);
    overflow: hidden;
    width: 35px;
    height: 35px;

}
.icon-wrapper.matched{
	background-color: rgba(var(--bs-success-rgb),0.25);
	border-color: rgba(var(--bs-success-rgb),0.5);
}
.icon-wrapper .bi {
	margin-bottom:2px;
}
.header-subtitle{
	font-size:1.125rem;
	font-weight:bold;

	padding:0.5rem 1.5rem;
}

.vtest{
	width:120px;
	padding-top:0.5rem;
	padding-right:1.5rem;
	margin-right:1.5rem;
	border-right: 2px dashed var(--bs-border-color);
	text-align:right;
}
.w-100p{
	width:100px;
}
.w-125p{
	width:125px;
}
.w-150p{
	width:150px;
}