1body {
2	min-height: 100%;
3	height: auto;
4}
5#app {
6	width: 100%;
7}
8// one solution to fix category multiselect being hidden (overflow of surrounding element)
9.splitpanes__pane-details {
10	// this works but is sketchy
11	// overflow: visible !important;
12	height: auto;
13}
14@media only screen and (max-width: 1024px) {
15	// fix max height being unset in mobile view by server style
16	.app-content-list {
17		max-height: calc(100vh - 50px) !important;
18	}
19}
20#projectid, #password {
21	display: none;
22}
23#newBillButton {
24	margin-top: 10px !important;
25}
26.balancePositive {
27	color: green;
28}
29.balanceNegative {
30	color: red;
31}
32.balance {
33	float: right;
34	font-weight: bold;
35	height: 44px;
36	line-height: 44px;
37}
38.memberAvatar img {
39	width: 24px;
40	height: auto;
41	border-radius: 50%;
42	margin: 10px 6px 10px 0px;
43	cursor: pointer;
44}
45.memberAvatarDisabled .disabledMask {
46	display: block;
47}
48.disabledMask {
49	width: 26px;
50	height: 26px;
51	background-image: url('./images/forbidden.svg');
52	position: absolute;
53	top: 9px;
54	left: 38px;
55}
56.memberAvatar {
57	width: 26px;
58	height: 44px;
59}
60
61.avatarTable {
62	.owerAvatar {
63		height: 24px;
64		margin: 2px 5px 2px 5px;
65	}
66	.owerAvatarDisabled {
67		margin-left: -21px;
68	}
69	.owerAvatar img {
70		margin-bottom: 2px;
71	}
72	.owerAvatarDisabled .disabledMask {
73		top: -1px;
74	}
75}
76.owerAvatar {
77	display: inline-block;
78	vertical-align: middle;
79	height: 26px;
80	.disabledMask {
81		display: block;
82		position: relative;
83		top: -31px;
84		left: -1px;
85	}
86}
87.owerAvatarDisabled {
88	margin-left: -26px;
89}
90
91input[type=number] {
92	-moz-appearance: number-input !important;
93	-webkit-appearance: initial !important;
94}
95.coloredTable {
96	// max-width: 500px;
97	display: block;
98	margin: 20px 20px 20px 20px;
99	border-spacing: 2px 2px;
100	scrollbar-width: unset !important;
101	scrollbar-color: var(--color-primary) var(--color-background-hover);
102
103	th {
104		font-weight: bold;
105		text-align: center;
106		border: 1px solid var(--color-border-dark);
107		padding: 0px 5px 0px 5px;
108
109		span {
110			display: block;
111			max-width: 100px;
112			word-wrap: break-word;
113			white-space: normal;
114		}
115	}
116	td {
117		text-align: right;
118		padding-right: 2px;
119	}
120	td:first-child {
121		text-align: left;
122	}
123}
124.undoDeleteBill {
125	display: none;
126}
127#app-settings-content button {
128	padding: 10px;
129	padding-left: 34px;
130	background-position: 10px center;
131	width: 100%;
132	text-align: left;
133}
134.selectedbill {
135	background-color: var(--color-background-dark) !important;
136}
137.app-navigation-entry-share {
138	display: none;
139}
140.app-navigation-entry {
141	padding-right: 0 !important;
142}
143.shareinput {
144	width: 100%;
145}
146.icon-colorpicker {
147	background-image: url('../img/color_picker.svg');
148}
149.loading-bill {
150	margin-left: 10px;
151	margin-right: 10px;
152}
153.activeButton {
154	background: var(--color-background-darker);
155}
156.memberitem > a {
157	opacity: 1 !important;
158}
159.autoexportSelect {
160	width: 40%;
161}
162.autoexportLabel {
163	width: 60%;
164	overflow: hidden;
165	text-overflow: ellipsis;
166}
167.autoexportProject {
168	display: flex !important;
169	align-items: center !important;
170}
171a.billitem .app-content-list-item-icon {
172	background-position: center;
173	background-repeat: no-repeat;
174	background-size: cover;
175}
176.exportStats span,
177.exportSettlement span {
178	min-height: 16px !important;
179	min-width: 16px !important;
180}
181/* this is not applied if done in a vue component */
182.memberColorPicker .trigger {
183	height: 25px !important;
184}
185.fixed-icon {
186	background-size: 60% 100%;
187	background-repeat: no-repeat;
188	background-position: center;
189}
190/* dirty hack to make things right in settings sidebar */
191.multiselect__content-wrapper {
192	z-index: 10000 !important;
193}
194
195// fade transition
196.fade {
197	&-enter {
198		opacity: 0;
199	}
200	&-enter-to {
201		opacity: 1;
202	}
203	&-leave {
204		opacity: 1;
205	}
206	&-leave-to {
207		opacity: 0;
208	}
209	&-enter-active,
210	&-leave-active {
211		transition: all 150ms ease-in-out;
212	}
213}
214
215.slide-right-leave-active,
216.slide-right-enter-active {
217	transition-duration: var(--animation-quick);
218	transition-property: min-width, max-width;
219}
220
221.slide-right-enter-to,
222.slide-right-leave {
223	min-width: 300px;
224	max-width: 500px;
225}
226
227.slide-right-enter,
228.slide-right-leave-to {
229	min-width: 0 !important;
230	max-width: 0 !important;
231}
232
233.slide-down-leave-active,
234.slide-down-enter-active {
235	transition-duration: var(--animation-quick);
236	transition-property: min-height, max-height;
237}
238
239.slide-down-enter-to,
240.slide-down-leave {
241	min-height: 300px;
242	max-height: 500px;
243}
244
245.slide-down-enter,
246.slide-down-leave-to {
247	min-height: 0 !important;
248	max-height: 0 !important;
249}
250
251.icon-activity {
252	background-image: url('../img/activity-dark.svg');
253	background-size: 20px;
254}
255
256body.theme--dark .icon-activity {
257	background-image: url('../img/activity.svg');
258}
259
260.cospend-settings-dialog .modal-container {
261	display: flex !important;
262}
263
264