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

/*------------------------------------------------------------------
# [Import]
------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.0/dist/bootstrap-table.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta3/css/bootstrap-select.min.css");
@import url("//assets.svsumiswald.ch/dropzone/latest/dropzone.css");

/*------------------------------------------------------------------
# [Root / Reset]
------------------------------------------------------------------*/


:root{
	--ui-primary-color: rgb(251, 115, 105);
	--ui-primary-color-rgb: 251, 115, 105;
    --ui-border-color: #e1e1eb;
	--ui-light-bg-color: #f0f3f5;
	--ui-light-box-bg-color: #f9f9f9;
	--ui-list-bg: #f6f7f9;
	--ui-app-header-height: 64px;
	--ui-app-sidebar-width: 270px;
    --ui-border-color: #ecf0fa;
    --ui-background-bg: #F6F6FA;
	--ui-body-color: rgb(31, 35, 40);
	--ui-color-label: #32325d;
	--ui-text-muted:  #8898aa!important;
	--bs-body-font-family: "Noto Sans",sans-serif;
	--bs-font-sans-serif: "Noto Sans";
	--bs-body-font-size: 14px;
	--bs-body-color: #57667E;
	--bs-border-radius: 0.375rem;
	--bs-input-bg: #fff;
	--bs-border-color:#ced4da;
	--bs-text-muted: #8898aa!important;	
}


body,h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,a,td {    
	-moz-osx-font-smoothing: grayscale;    
	-webkit-font-smoothing: antialiased;
}
.form-control:focus,
.form-select:focus{
	box-shadow:none !important;
}
.w-100p{
	width:100px;
}
.text-muted{
	color: var(--bs-text-muted) !important;
}
.text-sm{
	font-size:0.875rem;
}
.text-xs{
	font-size:0.75rem;
}
/*------------------------------------------------------------------
# Body
------------------------------------------------------------------*/

body {
    width: 100%;
    height: 100%;
	background: rgb(239,245,255);
	background: linear-gradient(90deg, rgba(var(--ui-primary-color-rgb),0.05) 0%, rgba(243,243,243,1) 50%);
}
a,
a:hover,
a:focus {
    text-decoration: none;
	color: inherit;
}


/*------------------------------------------------------------------
# Layout
------------------------------------------------------------------*/
.header{
	height: var(--ui-app-header-height);
	padding:0 2rem 0 1rem;
	width:100%;
	border-bottom:2px solid var(--ui-border-color);
	background-color: #fff;
	position:fixed;
	z-index:999;
	top: 0;
}
.header .mobile-trigger{
	color: var(--bs-text-muted);
	font-size:24px;
	cursor:pointer;
	display:none;
}
.header .website-title > div{
	font-size:1.25rem;
	font-weight:bold;
}
.header .website-title img{
	width:28px;
    transition: all 0.3s;
}
.header .filter-year > div{
	padding: 0.375rem 0.5rem;
	border-radius: var(--bs-border-radius);
	background-color: rgba(0,0,0,0.02);
	border:1px solid rgba(0,0,0,0.08);
}
.header .filter-year > div:hover{
	background-color: var(--ui-primary-color);
	border-color: var(--ui-primary-color);
	cursor: pointer;
	color:#fff;
}


/* Sidebar */
.sidebar {
	background-color:#fff;
	width: var(--ui-app-sidebar-width);
	position:fixed;
	height:100%;
	top: var(--ui-app-header-height);
	left:0;
	border-right:2px solid var(--ui-border-color);
}
.sidebar-inner{
	padding:1rem;
}
.sidebar-footer{
	border-top:2px solid var(--ui-border-color);
	padding:1rem;
	position:fixed;
	bottom:0;
	width: var(--ui-app-sidebar-width);
}
/* Content */
.wrapper{
	width: 100%;
}
.content-wrapper{
	margin-top: var(--ui-app-header-height);
	margin-left:var(--ui-app-sidebar-width);
}	
.container-fluid{
    padding: 2rem;

}
.wrapper.sidebar-visible #content{
	filter: blur(2px);
}
#content{
	padding:2rem;
}
.login-wrapper{
	background-color:#F6F8FC;
}
.login-wrapper .box-left{
	background-color:#fff;
}
.login-wrapper .login-form .form-label{
	font-weight:600;
	font-size:0.875rem;
	margin-bottom:0.5rem;
}
.login-wrapper .box-inner{
	padding-top:30vh !important;
}
.login-wrapper .box-inner h1{
	margin-top:1rem;
}
/*------------------------------------------------------------------
# Navigation
------------------------------------------------------------------*/
.vertical-nav-menu {
    margin: 0;
    padding: 0;
    position: relative;
    list-style: none;
}
.sidebar-heading {
    text-transform: uppercase;
    font-size: .8125rem;
    margin: 0.75rem 0;
    font-weight: 600;
    color: var(--bs-gray-800);
    white-space: nowrap;
    position: relative;
}
.vertical-nav-menu li a {
	text-decoration:none;
    display: flex;
    padding: 0.375rem 1rem;
    position: relative;
    border-radius: var(--bs-border-radius);
    color: var(--ui-body-color);
    white-space: nowrap;
    transition: all .2s;
    margin: 0.1rem 0;
}
.vertical-nav-menu li a:hover{
	background-color:  var(--ui-light-bg-color);
    text-decoration: none;
}
.vertical-nav-menu li.active a{
	background-color:  var(--ui-primary-color);
	color:#fff;
}
.vertical-nav-menu li.active i.nav-icon,
.vertical-nav-menu li.active a:hover i.nav-icon{
	color:#fff;
}
.vertical-nav-menu li i.nav-icon{
	display:block;
	margin-right:0.75rem;
	color: var(--bs-text-muted);
}
.vertical-nav-menu li a:hover i.nav-icon {
    color: #111;
}

/*------------------------------------------------------------------
# Text / Heading
------------------------------------------------------------------*/

h1{
	font-size:1.75rem;
	font-weight:600;
	margin-bottom:1rem;
}


.offcanvas h5{
	font-size:1.125rem;
	font-weight:bold;
	color: var(--bs-gray-600);
}
/* Filter */
.filter-sidebar{
	position: sticky;
    top: 90px; 
}
.filter-sidebar h5{
	font-size:1.125rem;
	color: var(--bs-gray-600);
	margin-bottom:1rem;
}

/* Intro */
.intro{
	margin-bottom:1rem;
}
.intro .breadcrumb{
	color: var(--gray500);
	font-size:0.8125rem;
	--bs-breadcrumb-margin-bottom:0 !important;
	--bs-breadcrumb-item-padding-x: 0.375rem;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%23a1a5b7'/%3E%3C/svg%3E");;
}
.intro .title{
	display:flex;
	align-items:center;
	font-weight:600;
	font-size:1.675rem;
}
.intro .title .badge{
	font-weight:normal;
	margin-top:3px;
}


/*------------------------------------------------------------------
# Helper
------------------------------------------------------------------*/
.icon-sm{
	width:18px !important;
}
.icon-bi-md{
	font-size:1.25rem;
}
.icon {
	width: 2rem;
	height: 2rem;
}

.icon i {
	font-size: 1.25rem;
}
.icon-shape {
	display: inline-flex;
	padding: 1.25rem;
	text-align: center;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.icon-shape-svg {
	display: flex;
	padding: 0.5rem;
	text-align: center;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	width:40px;
	height:40px;
}
.icon-shape-svg-sm {
	display: flex;
	text-align: center;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	width:22px;
	height:22px;
	padding:4px;
}
.icon-white{
	fill: #fff;
}
.icon-gold{
    fill: rgba(229, 193, 0, 0.75);
}
.icon-red{
	fill: rgba(255,50,50,0.75);
}
.icon-green{
	fill: rgba(0,227,150,0.85);
}
.icon-blue{
	fill: rgba(41,134,204,0.75);
}
.icon-grey{
	fill: var(--ui-text-muted);
}
.icon-svg{
	width:36px;
}
.icon-svg-xl{
	width:48px;
}
.icon-svg-sm{
	width:18px;
}
.icon-bg-gold {
    background-color: rgba(229, 193, 0, 0.75);
}
.icon-bg-red{
	background-color: rgba(255,50,50,0.75);
}
.icon-bg-green{
	background-color: rgba(0,227,150,0.85);
}
.icon-bg-blue{
	background-color: rgba(41,134,204,0.75);
}
.icon-bg-purple{
	background-color: rgba(142,124,195,0.75);
}
.icon-bg-success{
	background-color: rgba(25,135,84,0.75);
}
.icon-bg-indigo{
	background-color: rgba(102,16,242,0.75);
}
.icon-bg-orange{
	background-color: rgba(253,126,20,0.75);
}
.icon-bg-teal{
	background-color: #028391;
}

/*------------------------------------------------------------------
# Komponenten
------------------------------------------------------------------*/

/* Dropdown */
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ui-primary-color);
    --bs-dropdown-border-color: var(--ui-border-color);
    --bs-dropdown-border-width: 2px;
}
/* Buttons */
.btn-light{
    --bs-btn-color: #000000;
    --bs-btn-bg: #F1F1F4;
    --bs-btn-border-color: #F1F1F4;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--bs-gray-300);
    --bs-btn-hover-border-color: #f2f2f5;
    --bs-btn-focus-shadow-rgb: 205, 205, 207;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: var(--bs-gray-300);
    --bs-btn-active-border-color: #f2f2f5;
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #F1F1F4;
    --bs-btn-disabled-border-color: #F1F1F4;
}

/* Cards */
.card{
	--bs-card-border-width: 1px;
    --bs-card-border-color: var(--ui-border-color);
	box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.card:hover{
	box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.12);
}
.card-blur:before{
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	background-color: rgba(255,255,255,0.5);
	z-index:100;
	content:"";
backdrop-filter: blur(4px);
}
/* Lists */
.list-group {
    --bs-list-group-border-color: var(--ui-border-color);
	--bs-list-group-item-padding-x: 1.25rem;
	--bs-list-group-action-hover-bg: var(--ui-light-box-bg-color);
	--bs-list-group-active-bg: var(--ui-light-box-bg-color)
	--bs-list-group-active-border-color: var(--ui-border-color);
	--bs-list-group-active-color: var(--bs-body-color);
}
.list-title{
	font-weight:600;
}
.list-group-item-footer,
.list-group-item-header{
	font-weight:bold;
}
.list-group-item-header{
	padding-top:1rem;
	padding-bottom:1rem;
}
/* Text */
.text-bg-primary {
    background-color: RGBA(var(--ui-primary-color-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Forms */
fieldset{
	border-bottom:1px solid var(--ui-border-color);
	padding-bottom:0.5rem;
	margin-bottom:1rem;
}
fieldset:last-of-type{
	border-style: dashed;
}
fieldset legend{
	font-size:1rem;
	font-weight: bold;
	color: var(--ui-primary-color);
}
.form-label{
	margin-bottom: 0.375rem;
}
.card .form-label{
	font-size:0.75rem;
	text-transform: uppercase;
	color: var(--bs-text-muted);
}
.form-select:focus,
.form-control:focus{
	border-color: var(--ui-primary-color);
}
/* Tables */
.table{
	--bs-table-striped-bg: rgba(var(--ui-primary-color-rgb),0.1);
	--bs-table-hover-bg: rgba(var(--ui-primary-color-rgb),0.2)
}
.bootstrap-table .fixed-table-container .table tfoot th .th-inner, .bootstrap-table .fixed-table-container .table thead th .th-inner {
	padding:0.75rem 0.5rem;
	border-bottom:2px solid var(--ui-border-color);
}

.fixed-table-pagination{
	margin-top:1rem;
}
.pagination-detail{
	display:none;
}

/*------------------------------------------------------------------
# Module
------------------------------------------------------------------*/
/* Dropzone */
.dropzone {
	min-height:auto;
	height:auto;
	text-align:left;
	border:0;
	padding:2rem 1rem;
	border-radius:0;	
 
}
.dropzone .dz-message {
    text-align: left;
    margin: 0;
}
.dropzone .dz-message .dz-button{
	font-size:1rem;
}
.upload{
	background-color: var(--ui-light-box-bg-color);
	border:2px solid var(--ui-border-color);
	border-radius: var(--bs-border-radius);
}
.upload:hover{
	border-color: var(--ui-primary-active-color);
}
.bootstrap-select .dropdown-menu{
	font-size:0.875rem;
}
.bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
    outline: none !important;
}
.bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #111;
}
.bootstrap-select .btn-light{
    --bs-btn-color: #000000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: var(--bs-gray-100);
    --bs-btn-hover-border-color: var(--ui-primary-color);
    --bs-btn-focus-shadow-rgb: 205, 205, 207;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: var(--bs-gray-100);
    --bs-btn-active-border-color: var(--ui-primary-color);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: #F1F1F4;
    --bs-btn-disabled-border-color: #F1F1F4;
}

/*------------------------------------------------------------------
# Solar
------------------------------------------------------------------*/
[data-theme=solar] {
	--ui-primary-color: rgb(251, 115, 105);
	--ui-primary-color-rgb: 251, 115, 105;
	--ui-primary-active-color: #e1675e;
}

.chart{
	background-color: var(--ui-light-bg-color);
	height:8px;
	width:100%;
	border-radius: var(--bs-border-radius);
}
.chart-bar{
	background-color: var(--bs-green);
	border-radius: var(--bs-border-radius);
}


/*------------------------------------------------------------------
# MoneyTracker
------------------------------------------------------------------*/
[data-theme=moneytracker] {
	--ui-primary-color: #00b894;
	--ui-primary-color-rgb: 0, 184, 148;
	--ui-primary-active-color: #00a585;
    --ausgaben-rgb: 192, 57, 43;
    --einnahmen-rgb: 39, 174, 96;
    --sparen-rgb: 41, 128, 185;
}
.bg-einnahmen{
	background-color: rgba(var(--einnahmen-rgb),0.9);
}
.bg-ausgaben{
	background-color: rgba(var(--ausgaben-rgb),0.75);
}
.bg-sparen{
	background-color: rgba(var(--sparen-rgb),0.75);
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: var(--ui-primary-color);
    --bs-btn-border-color: var(--ui-primary-color);
    --bs-btn-hover-bg: var(--ui-primary-active-color);
    --bs-btn-hover-border-color: var(--ui-primary-active-color);
    --bs-btn-active-bg: var(--ui-primary-active-color);
    --bs-btn-active-border-color: var(--ui-primary-active-color);
    --bs-btn-disabled-bg: var(--ui-primary-color);
    --bs-btn-disabled-border-color: var(--ui-primary-color);
}
.button-import{
	display:none;
}
/* Transaktionen */
.trans-list .list-group-item{
	display:flex;
}
.trans-list .tr-icon{
	font-size:1rem;
	margin-right:1rem;
}
.trans-list .tr-title,
.trans-list .tr-amount{
	font-weight:600;
}
.trans-list .tr-info{
	font-size:0.8125rem;	
	color: var(--bs-text-muted);
}
.trans-list .list-title{
	font-weight:bold;
}
.trans-list .er-amount,
.card-header .er-amount{
	width:90px;
}
.dropdown-sm .dropdown-menu{
	--bs-dropdown-font-size: 0.8125rem;
}
.dropdown-big .dropdown-menu{
	--bs-dropdown-min-width: 15rem;
}
.card-header > div{
	padding:0.25rem 1.25rem;
}


/* Quicksum */
.quick-sum .qs-value{
	font-size:1.25rem;
	font-weight:bold;
}
.quick-sum .qs-label{
	font-size:0.8125rem;
	color: var(--bs-text-muted);
	text-transform: uppercase;
}

/* Charts */
.circular-chart {
  display: block;
  width:40px;
  height: 40px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

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

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.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.675em;
  text-anchor: middle;
}

/*------------------------------------------------------------------
# Solar
------------------------------------------------------------------*/
[data-theme=abfallkalender] {
	--ui-primary-color: rgb(44,172,251);
	--ui-primary-color-rgb: 44, 172, 251;
	--ui-primary-active-color: #279AE1;
}

/*------------------------------------------------------------------
# Peakhunters
------------------------------------------------------------------*/
[data-theme=peakhunters] {
	--ui-primary-color: rgb(191, 174, 137);
	--ui-primary-color-rgb: 191, 174, 137;
	--ui-primary-active-color: #AB9C7B;

}
.form-check-input:checked {
    background-color: var(--ui-primary-color);
    border-color: var(--ui-primary-color);
}
form .list-group-item:hover {
    background-color: rgba(var(--ui-primary-color-rgb), 0.10);
}
.ph-map {
    width: 100%;
    height: 350px;
}



/*------------------------------------------------------------------
# Breakpoints
------------------------------------------------------------------*/
@media (max-width: 1200px){
	.box-left{
		width:40% !important;
	}
	.box-right{
		width:60% !important;
	}
}
@media (max-width: 991.98px){
	.sidebar {
		top:0;
		left:-280px;
		transition: .3s;
		width: 280px;
		height:100vh;

	}
	.sidebar-open {
		background-color:#fff;
		left: 0;
		box-shadow: 0 5px 20px rgba(0,0,0,.2);
		z-index:1024; 
	}
	.content-wrapper{
		margin-left:0;
	}
	.container-fluid{
		padding:1rem;
	}
	.header{
		padding-right:1rem;
		justify-content: space-between!important;
	}
	.filter-year{
		margin-left:0 !important;
	}
	.mobile-trigger{
		display:block !important;
	}
}
@media (max-width: 599px){
	.header{
		padding:1rem;
	}
	.login-wrapper{
		flex-direction: column!important;
	}
	.box-left,
	.box-right{
		width:100% !important;
		height: auto !important;
		display:block !important;
	}
	.login-wrapper .box-inner {
		padding: 1rem !important;
	}
	.box-left .box-inner{
		text-align:center !important;
	}
	.box-left .box-inner p{
		display:none;
		
	}
	.login-wrapper .box-inner h1{
		margin-top:0;
	}
}