html, body {
	background-color: #eee;
	min-height: calc(100vh);
}

.app-container {
	background-color:white;
	max-width:500px;
	width: 100%;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.admin-container {
	background-color:white;
	max-width:1140px;
	width: 100%;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
.admin-container header img {
	max-width: 300px;
	height: auto;
}

/* sidenav */

a#navtrigger {
	font-size:2.5rem;
}

nav.sidenav {
	height: 100%;
	width: 280px;
	position: fixed;
	z-index: 3;
	top: 0;
	left: -300px;
	background-color: #ffffff;
	overflow-x: hidden;
	transition: 0.5s;
}

nav.sidenav.active {
	left: 0px;
}

nav.sidenav .navhead {
	color:white;
	position: relative;
}
.weloveavene nav.sidenav .navhead {
	background-color: #ff9999;
}
.weloveklorane nav.sidenav .navhead {
	background-color: #015835;
}
.welovefurterer nav.sidenav .navhead {
	background-color: #003619;
}

nav.sidenav .navhead a#navclose {
	font-size:2.5rem;
	position: absolute;
	top:0px;
	right: 15px;
}

nav.sidenav .navhead .user-icon {
	font-size:3rem;
}

nav.sidenav .navcontent ul {
	list-style-type:none;
	margin-bottom:0;
	padding-left:0;
}

nav.sidenav .navcontent ul li {
	margin-bottom: 15px;
}

nav.sidenav .navcontent ul li a {
	text-decoration: none;
}

/* progress bar */

.progress {
	height: 0.5rem;
}

/* sale cards */

.sale-card:not(:first-child) {
	/*border-top:0;*/
}

.sale-card .card-body {
	padding: 0.75rem;
}

.sale-card .card-body .sale-image {
	border-radius: 25px;
	background-size: cover;
}

.sale-card .card-body .sale-image img {
	width:50px;
	height:50px;
}

.modal .close {
	font-size:2.5rem;
}

/* bottom buttons */

.sale-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 2;
	border-radius: 999px;
	font-size: 1.5rem;
}

.present-button {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 2;
	border-radius: 999px;
	font-size: 1.6rem;
}

/* about page */

.about .subtitle {
	margin-top: 2em;
	display: flex;
	align-items: stretch;
	margin-bottom:0.5em;
}
.weloveavene .about .subtitle {
	background-color: #ffcccc;
}
.weloveklorane .about .subtitle {
	background-color: #deffde;
}
.welovefurterer .about .subtitle {
	background-color: #e0ffef;
}

.about .subtitle .number {
	display: flex;
	align-items: center;
	font-weight: bold;
	color: white;
	padding-left: .4em;
	padding-right: .4em;
}
.weloveavene .about .subtitle .number {
	background-color: #ff9999;
}
.weloveklorane .about .subtitle .number {
	background-color: #015835;
}
.welovefurterer .about .subtitle .number {
	background-color: #003619;
}

.about .subtitle .title {
	margin-left: .5em;
	margin-right: .5em;
	padding-top: .3em;
	padding-bottom: .3em;
	color: #333;
}

/* dropzone */

.weloveavene .dropzone {
	border: 1px solid #ff9999;
}
.weloveavene .dropzone .dz-message {
	color:#ffcccc;
}
.weloveklorane .dropzone {
	border: 1px solid #015835;
}
.weloveklorane .dropzone .dz-message {
	color:#28a745;
}
.welovefurterer .dropzone {
	border: 1px solid #003619;
}
.welovefurterer .dropzone .dz-message {
	color:rgb(27, 114, 46);
}

/* donut chart */

.donut-item {
    width: 70%;
    font-size: 16px;
    margin: 0 auto;
    animation: donutfade 1s;
}

@keyframes donutfade {
    0% { opacity: .2; }
    100% { opacity: 1; }
}

@media (max-width: 320px) {
    .donut-item {
        width: 100%;
    }
}

.donut-ring {
    stroke: #EBEBEB;
}

.donut-segment {
    transform-origin: center;
    stroke: aqua;
    /*animation: donut1 3s;*/
}

.donut-percent {
    animation: donutfadelong 1s;
}

@keyframes donutfadelong {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*
@keyframes donut1 {
    0% { stroke-dasharray: 0, 100; }
    100% { stroke-dasharray: 69, 31; }
}
*/

.donut-text {
    fill: aqua;
}

.donut-percent {
    font-size: 0.8em;
    line-height: 1;
    transform: translateY(0.5em);
    font-weight: bold;
}

.donut-data {
    font-size: 0.2em;
    line-height: 1;
    transform: translateY(0.5em);
    text-align: center;
    text-anchor: middle;
    color:#999;
    fill: #999;
    animation: donutfadelong 1s;
}

.weloveavene .donut-segment {
    stroke: #ff9999;
}
.weloveavene .donut-text {
    fill: #ff9999;
}
.weloveklorane .donut-segment {
    stroke: #015835;
}
.weloveklorane .donut-text {
    fill: #015835;
}
.welovefurterer .donut-segment {
    stroke: #003619;
}
.welovefurterer .donut-text {
    fill: #003619;
}

/* card with image */

.card .card-img-container {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}