iframe#download
	{
		width: 0px;
		height: 0px;
		opacity: 0;
		visibility: hidden;
	}

form#fileupload
	{
		display: none;
	}

:placeholder-shown
	{
		x-font-style: italic;
	}

::placeholder
	{
		color: rgba( 0, 0, 0, 0.3 );
		x-color: red;
	}


.rtl {
    direction: rtl
}

.ltr {
    direction: ltr
}

.right-align {
    text-align: right;
}

body > .container {
	position: fixed;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	font-family: Nunito, sans-serif;
	font-weight: 200;
	letter-spacing: 0.2px;
	color: rgba(255, 255, 255, 0.6);
	background-color: rgb(41, 41, 63);
}
.container > .top {
	color: rgba(255, 255, 255, 0.6);
	background-color: rgb(51, 51, 76);
}

.bottom > .layout-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px 10px;
	position: relative;
	justify-content: space-between;
	height: 100%;
}

.container > .content
	{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		max-height: calc( 100vh - 100px );
		max-height: calc( 100% - 50px );
	}

body.searching .container > .content
	{
		padding-top: 20px;
	}

.content > .title {
    height: 50px !important;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    vertical-align: middle;
}

.content > .layout-container
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow-x: hidden;
		overflow-y: auto;
		justify-content: space-evenly;
		transition: margin-top 0.1s ease-in-out;
	}

body.pushdown .content > .layout-container
	{
		margin-top: 50px;
	}


.container > .bottom {
	position: relative;
	top: -48px;
	color: rgba(255, 255, 255, 0.6);
	x-background-color: rgb(51, 51, 76);
	max-height: 0px;
}

.top > .layout-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px 20px;
	position: relative;
	justify-content: space-between;
	height: 50px;
}



.content > .layout-container
	{
		padding: 27px 15px;
		row-gap: 32px;
		column-gap: 20px;
	}

.content .campaign::before,
.content .campaign
	{
		border-radius: 25px;
	}


.content .campaign
	{
		position: relative;
		display: flex;
		min-height: 220px;
		x-border: 4px solid rgb( 51, 51, 76 );
		width: 100%;
		background-color: rgba( 0, 0, 0, 1 );
		max-width: 470px;
	}

.content .campaign > .layout-container
	{
		transition: background-color 0.5s ease-in-out;
	}

.content .campaign.hidden
	{
		display: none;
	}


.content .campaign::before
	{
		position: absolute;
		content: '';
		display: flex;
		width: 100%;
		height: 100%;
		background-image: var(--bg-image);
		background-size: cover;
		/* opacity: 0.7; */
	}

.content .campaign:first-child::before
	{
		opacity: 1.0;
	}


.content .campaign > .layout-container
	{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 10px 10px;
		position: relative;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 25px;
		max-width: 100%;
	}

.content .campaign .labels
	{
		position: absolute;
		top: -24px;
		display: flex;
		x-margin-top: -25px;
		padding: 5px 13px;
		x-margin-bottom: 4px;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 12px;
		color: rgb(255 148 111 / 85%);
		font-weight: 300;
		column-gap: 10px;
		font-size: small;
	}

.content .campaign .labels:empty
	{
		display: none;
	}


.content .campaign .heading
	{
		position: relative;
		font-weight: 600;
		padding-right: 15px; /* to create room for the icon */
	}

.content .campaign .heading a.twitter
	{
		text-transform: lowercase !important;
	}

.content .campaign .heading a.instagram
	{
		text-transform: lowercase !important;
	}

.content .campaign .heading a.instagram > span
	{
		margin-right: 3px;
	}

.campaign .heading .clipboard
	{
		position: absolute;
		right: 30px;
		top: -26px;
		padding: 10px;
		font-size: large;
	}

.campaign .heading .share-button
	{
		display: inline-block;
		position: absolute;
		right: 40px;
		top: -19px;
		padding: 6px 10px;
		font-size: small;
		font-weight: 800;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 12px;
		cursor: pointer;

		x-background-color: rgba( 255, 255, 255, 0.2);
		x-color: rgba( 0, 0, 0, 0.6 );

	}

.campaign .heading .share-button:hover
	{
		text-decoration: underline;
	}


.campaign .heading .share-button.rotate
	{
		right: -49px;
		x-right: -40px;
		top: 62px;
		top: 58px;
		transform: rotate( 90deg );
	}

.campaign .heading .share-button.rotate::before
	{
		x-transform: rotate( -90deg );
	}

.campaign .heading .share-button .text
	{
		font-family: sans-serif;
		margin-left: 5px;
	}

body.emptyTracklist .menu-item.tracker
	{
		opacity: 0.5;
	}

.menu-item.tracker.open,
.menu-item.tracker.open > .icon,
.campaign.tracking .menu-item .bookmark-button
	{
		color: rgb(255 148 111 / 85%);
		x-color: rgb(235 44 44 / 85%);
	}

.campaign:not(.tracking) .heading .clipboard
	{
		display: none;
	}

.campaign > .overlay
	{
		content: "";
		position: absolute;
		background-color: rgba(0, 0, 0, 0.6);
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		border-radius: 25px;
		display: none;
		z-index: 0;
	}

.campaign:has( .coptions.open) .overlay
	{
		display: block;
		z-index: 1;
	}

.menu-item.coptions
	{
		position: absolute;
        top: -10px;
        right: -7px;
		white-space: nowrap;
		z-index: 1;
	}

.menu-item.coptions > .icon
	{
		background-color: initial;
		border-color: initial;
		border: 0px;
		z-index: 10;
		color: inherit;
	}

.menu-item.coptions > .menu-list
	{  
        top: 0;
        right: -3px;
		background-color: rgba(50, 50, 50, 0.7);
		border-top-right-radius: 25px;
	}

.menu-item.coptions .menu-list-item
	{
		padding: 0px;
		border-bottom: 1px solid rgb(41 41 41);
	}

.menu-item.coptions a
	{
		padding: 10px 10px;
		cursor: pointer;
		width: 100%;
	}

.menu-item.coptions a:hover .text
	{
		text-decoration: underline;
	}

.menu-item.coptions .text
	{
		font-family: sans-serif;
		padding-left: 5px;
		font-weight: 400;
	}

.content .campaign .heading .currency
	{
		position: relative;
		font-size: larger;
		font-weight: 800;
		cursor: pointer;
	}

.content .campaign .heading .currency::after
	{
		position: relative;
		left: 0px;
		top: -10px;
		display: inline-block;
		font-family: "Font Awesome 5 Free";
		content: "\f059";
		font-size: smaller;
		color: rgba( 255, 255, 255, 0.6 );
		x-color: rgb(153 255 183 / 80%);
	}

.campaign .latest
	{
		margin: auto 0px 0px;
	}

.campaign .latest .heading
	{
		margin-top: 10px;
		font-weight: 400;
		font-size: small;
	}
.campaign .latest .contributions
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		font-size: smaller;
		font-size: medium;
		font-weight: 800;
		margin: 5px -5px;
		background-color: rgba( 0, 0, 0, 0.2 );
		border-radius: 7px;
	}

.campaign .latest .contributions > div
	{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: 0px 5px;
		text-align: center;
	}

.campaign .latest .sum
	{
		padding: 5px;
		border-bottom: 1px solid rgba( 255, 255, 255, 1 );
	}

.campaign .latest span
	{
		color: rgb( 0, 200, 0 );
	}

.campaign .latest .red
	{
		color: rgb( 200, 0, 0 );
	}

.campaign .button
	{
		display: flex;
		margin: 0px -10px -10px -10px;
		border-bottom-right-radius: 25px;
		border-bottom-left-radius: 25px;
		overflow: hidden;
	}

.campaign a.clipboard
	{
		cursor: pointer;
	}

.campaign .button a
	{
		font-size: x-small;
		display: inline-block;
		padding: 10px 22px;
		flex-grow: 1;
		text-align: center;
		background-color: rgba(64, 156, 67, 0.7);
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		font-weight: 400;

		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

.campaign .button a i
	{
		font-size: larger;
		padding-right: 5px;
	}

input.input_campaign
	{
		width: 200px;
		height: 30px;
		border: 0px;
	}

input.add_campaign
	{
		border: 0px;
		height: 30px;
		width: 50px;
	}

body.loading::after
	{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background-color: rgba(0, 0, 0, 0.8);
		content: "Please wait..";
		justify-content: center;
		display: flex;
		flex-direction: column;
		color: rgba( 255, 255, 255, 0.8 );
		text-align: center;
		font-size: xx-large;
	}

body > .infopopup
	{
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba( 0, 0, 0, 0.8 );
		font-family: Arial;
		line-height: 1.6em;
	}

body > .infopopup:not(.open)
	{
		display: none;
	}

body > .infopopup > .content
	{
		position: relative;
		display: flex;
		background-color: rgba(64, 156, 67, 0.7);
		background-color: rgb(47 89 48 / 70%);
		color: rgba( 255, 255, 255, 0.7 );
		max-width: 350px;
		padding: 0px 20px;
		border-radius: 25px;
		max-height: calc( 100% - 60px );
		padding-bottom: 10px;
	}

body > .infopopup.wide > .content
	{
		max-width: 800px;
	}

body > .infopopup.m-wide > .content
	{
		max-width: 450px;
	}

.flyer-grid
    {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 10px;
    }

.flyer-grid img
    {
        min-width: 300px;
        max-width: 600px;
    }

.flyer-grid .overlay-text {  position: relative;
  bottom: calc(2em + 5px);
  background: rgba(0, 0, 0, 0.75);
  width: fit-content;
  font-size: smaller;
  padding: 0 0.5em;
  border-top-right-radius: 0.5em;
}

body > .infopopup > .content > .scroll
	{
		overflow-y: auto;
		overflow-x: hidden;
	}

body > .infopopup  .close
	{
		position: absolute;
		right: 0px;
		top: -18px;
	}

body > .infopopup .close::before
	{
		font-family: "Font Awesome 5 Free";
		content: "\f057";
		font-size: xx-large;
		color: rgb(208 33 33 / 70%);
		cursor: pointer;
	}

body > .infopopup > .content p.star::before
	{
		display: none;
		position: relative;
		top: 2px;
		content: "*";
		color: rgba( 255, 255, 255, 1 );
		font-weight: bold;
	}

body > .infopopup > .content .hgreen
	{
		color: rgb( 0, 200, 0 );
		font-weight: bold;
	}

body > .infopopup > .content .hblue
	{
		color: rgb(140 140 176);
		font-weight: bold;
	}

body > .infopopup > .content .usd
	{
		color: rgb( 0, 200, 0 );
		x-color: rgb( 0, 0, 200 );
		font-weight: bold;
	}

body > .infopopup > .content .rate
	{
		color: rgb( 0, 200, 0 );
		x-color: rgb( 0, 0, 200 );
		font-weight: bold;
	}

body > .infopopup.add-appeal
	{
		line-height: 1.3em;
	}

body > .infopopup.add-appeal .star
	{
		border-bottom: 1px dotted;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

body > .infopopup.add-appeal > .content
	{
		color: rgba( 255, 255, 255, 0.8 ); /* maybe set to default ? */
	}

body > .infopopup .heading
	{
		font-size: x-large;
		margin-bottom: 10px;
		display: inline-block;
	}

body > .infopopup form
	{
		display: flex;
		flex-direction: column;
		grid-row-gap: 5px;

		--altcha-max-width: 100%;
/*
		--altcha-color-text: rgb( 0, 200, 0 );
		--altcha-color-text: rgb( 0, 0, 0 );

		--altcha-color-base: rgba( 255, 255, 255, 0.8 );
	    --altcha-color-base: rgb(208 247 212);
*/
	}

body > .infopopup form .more-info > .content
	{
		background-color: rgb(47 89 48);
		padding: 15px;
		border-radius: 15px;
	}
body > .infopopup form .more-info:not(.open)
	{
		display: none;
	}

form label
	{
		position: relative;
		word-wrap: break-word;
	}

form label a.icon
	{
		padding: 5px;
		position: absolute;
		margin-top: -3px;
		margin-left: 7px;
		cursor: pointer;
	}

body > .infopopup form label.required::before
	{
		content: "*";
		display: inline-block;
		x-padding: 5px;
		color: rgba( 200, 0, 0, 1 );
	}

body > .infopopup form label:not(.altcha-label),
body > .infopopup form input[type=button],
body > .infopopup form altcha-widget
	{
		margin-top: 15px;
	}

body > .infopopup form label:first-child
	{
		margin-top: 0px;
	}

body > .infopopup form input,
body > .infopopup form textarea
	{
		font-family: Arial;
		font-size: medium;
		border-radius: 10px;
		padding: 10px;
	}

body > .infopopup form textarea
	{
		height: 100px;
	}

body > .infopopup form .buttons
	{
		display: flex;
		justify-content: flex-end;
	}

body > .infopopup form input[type=button]
	{
		height: 40px;
		border-radius: 0px;
		border-radius: 15px;
		padding: 10px 20px;
		cursor: pointer;
	}

body > .infopopup form input[type=button][name="submit"]
	{
		color: rgba(0, 0, 0, 0.8);
		background-color: rgb(208, 246, 212);
	}

body > .infopopup form input[type=button][name="cancel"]
	{
		color: rgba( 255, 255, 255, 0.8 );
		background-color: transparent;
		border: 0px;
	}

body > .editor:not(.visible)
	{
		display: none;
	}

body > .editor
	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;

		background: rgba(0, 0, 0, 0.8);
	}

body > .editor > .layout-container
	{
		margin: auto 20px;
	}

.editor > .layout-container > .heading
	{
		display: flex;
		flex-direction: row;
		background-color: rgba(255, 255, 255, 1);
		margin: 0px 30px;
		padding: 5px 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border: 2px solid #eee;
		border-bottom: 0px;
		column-gap: 10px;
	}

.editor .heading a
	{
		text-decoration: underline;
		cursor: pointer;
	}

.editor .heading .a-close
	{
		margin-left: auto;
	}


.editor .content.view,
.editor .content.settings
	{
		border: 2px solid #eee;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		padding: 10px;
		height: 500px;
		overflow-y: auto;
	}

.editor .content.edit
	{
		height: 500px;
		-webkit-touch-callout: none !important;
		-webkit-user-select: none !important;
	}

div.tox-hugerte
	{
		height: 100% !important;
	}

.editor .content.settings
	{
		display: flex;
		flex-direction: column;
	}

.editor .content.settings input
	{
		height: 30px;
	}


body.tracking .campaign:not(.tracking),
.editor .content:not(.visible),
.campaign.exclude
	{
		display: none;
	}


/*
	Menu
*/

.menu-main
	{
		display: flex;
		column-gap: 20px;
		flex-grow: 1;
		z-index: 9;
	}

.bottom .menu-main
	{
		height: 100%;
	}

.menu-item
	{
		display: flex;
		align-items: center;
		column-gap: 5px;
		cursor: pointer;
	}

.menu-item.align-r
	{
		position: relative;
	}

.menu-item:hover > .label, .menu-item:hover > .icon, .menu-list-item:hover
	{
		color: white;
	}

.menu-item > a
	{
        display: flex;
		align-items: center;
		height: 100%;
    }

@media (max-width:700px)  { 
	.menu-item > .hide
		{
			display: none;
		}
}

.responsive
    {
        width: 100%;
        height: auto;
    }

.menu-spacer
	{
        flex-grow: 1;
	}

.menu-item.search
	{
		x-margin-left: auto;
	}

.menu-item.search input
	{
		width: 100%;
		height: 30px;
		border: 0px;
		font-size: medium;
		/* -webkit-user-select: none; */
	}

.menu-item.search .menu-list
	{
		left: 0px;
		right: 0px;
	}

.bottom .menu-item.scrollup
	{
		display: none;
		margin-left: auto;
	}

.menu-item .icon
	{
		position: relative;
		display: flex;
		border: 1px solid rgb(41 41 63);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: rgba(41, 41, 63, 0.9);
		justify-content: center;
		align-items: center;
		color: rgba( 255, 255, 255, 1 );
	}

.bottom .menu-item .icon
	{
		background-color: rgba(41, 41, 63, 0.8 );
		border-color: rgba( 255, 255, 255, 0.6 );
		font-size: larger;
	}


.menu-item .menu-list
	{
		position: absolute;
		top: 51px;
		background-color: rgb(51 51 76);
		display: flex;
		flex-direction: column;
		x-padding: 10px 20px;
	}

.menu-item.align-r .menu-list
	{
		right: 0px;
		top: 46px;
	}

.menu-item:not(.open) > .menu-list
	{
		display: none;
	}

.menu-list-item
	{
		display: flex;
		padding: 10px 10px;
		border-bottom: 1px solid rgb(41 41 63);
		column-gap: 10px;
	}

.menu-list-item > *
	{
		display: flex;
		align-self: center;
	}

.menu-list-item > :first-child
	{
		margin-right: auto;
		padding-right: 10px;
	}

.menu-item .icon.fa-file-export
	{
		padding-left: 5px;
	}

.menu-list-item .icon:not( .selected )
	{
		background-color: inherit;
	}

.menu-list-item.selected
	{
	}

.menu-list-item .flip
	{
		rotate: 180deg;
		transform: rotateY(180deg);
	}

.menu-list-item:last-child
	{
		border-bottom: 1px solid transparent;
	}