/*
Theme Name: Mobilisr multi purpose messaging tool
Theme URI: https://github.com/nelsoncarr/mobilisr
Author: Nelson
Author URI: https://github.com/nelsoncarr/
Description: An amazing way to mobilise and connect grassroots activists
Version: 1.0
Text Domain: mobilisr
Domain Path: /languages
*/

/*
 * Globals
 */

html {
	/* background image fix*/
	height: 100vh;
	/* set viewport constraint */
	min-height: 100%;
	/* enforce height */
}

/* fonts */
@font-face {
    font-family: 'Poppins Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Regular'), url('webfonts/Poppins-Regular.woff') format('woff');
    }
    
    @font-face {
    font-family: 'Poppins Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Poppins Bold'), url('webfonts/Poppins-Bold.woff') format('woff');
    }
    

body {
	padding-top: 2rem;
	font-family: 'Poppins Regular', sans-serif;
	/*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;*/
	color: #444;
	word-break: break-word;
}

a:not(.btn):not(.ab-item) {
	background-image: #1394b7;
    background-image: -webkit-linear-gradient(to right, #1394b7, #1eb6a2);
    background-image: linear-gradient(to right, #1394b7, #1eb6a2);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}

    
/* new styles */

.logo {
	width: 57%;
	margin-bottom: 2rem;
}

.logo.logo-small {
	/*height: 3rem;
	width: auto;
	filter: grayscale(1) brightness(0.6);*/
}

.task-card {
	position: relative;
	min-height: 12rem;
	padding: 1.25rem;
	border-radius: 1.25rem;
	margin-bottom: 1.5rem;
	/*box-shadow: rgb(0 0 0 / 12%) 0px 2px 6px;*/
	cursor: pointer;
	overflow: hidden;
	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;
}

.task-card h4 {
	color: #fff;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
}

.task-card .task-content {
	width: 100%;
}

.task-card .task-content:has(+ .task-image) {
	width: 70%
}


.task-card .task-description {
	color: #fff;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
	margin-bottom: 2.25rem;
}

.task-card .task-image {
	z-index: 0;
	border-radius: 0 1.25rem 1.25rem 0;
	position: absolute;
	transform: rotate(3deg);
	background-size: contain !important;
	background-repeat: no-repeat !important;
	height: 100%;
	right: 1rem;
	background-position: center left !important;
	width: 30%;
	bottom: 0;
}

.task-card .task-image:has(+ .task-list-progressbar-wrapper) {
    bottom: 1rem !important;
}

.task-card .task-image:has(~ .task-badges) {
    bottom: 1rem !important;
}


.task-card .task-badges {
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
}

.task-card .task-badges .badge {
	display: inline-block;
	min-width: 3rem;
	font-size: 0.8rem;
	background-color: #fff;
	font-weight: bold;
}

.task-card .task-badges .badge span {
    background-image: linear-gradient(to right, #c81282, #ee6472);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-light {
	color: #444;
	background-color: #fff;
}

.task-card:not(.locked):hover {
	-webkit-filter: brightness(0.95);
	-moz-filter: brightness(0.95);
	-ms-filter: brightness(0.95);
	filter: brightness(0.95);
}


.grain {
	position: absolute;
	top: -1.25rem;
	left: -1.25rem;
	width: calc(100% + 2.5rem);
	height: calc(100% + 2.5rem);
	z-index: 1;
}


.locked:not(.present) {
	filter: contrast(50%) brightness(1.25) grayscale(1) !important;
	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.locked:not(.present)  * {
	filter: blur(3px) grayscale(1);
}

.locked-lock {
	display: none;
}

.locked .locked-lock {
	display: block;
	margin: 1.5rem 0 1.5rem 0;
	box-sizing: border-box;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 25%;
	width: 50%;
	height: calc(100% - 3rem);
	background-image: url(img/lock.svg);
	background-repeat: no-repeat;
	filter: none;
	opacity: 1.0;
	background-position: center center;
	background-size: contain;
}


.locked.present .locked-lock {
	display: block;
	margin: 1.5rem 0 1.5rem 0;
	box-sizing: border-box;
	position: absolute;
	z-index: 3;
	top: 0;
	left: 25%;
	width: 50%;
	height: calc(100% - 3rem);
	background-image: url(img/present.svg) !important;
	background-repeat: no-repeat;
	filter: none;
	opacity: 1.0;
	background-position: center center;
	background-size: contain;
}


.locked.present .task-content h4 {
	display: none;
}

/* progressbar */
.progressbar-wrapper {
	margin: 2rem 0;
}

.progressbar-wrapper p,
.progressbar-wrapper .progress-label p,
.progressbar-wrapper .progress-counter {
	margin-bottom: 0.2rem;
	text-align: left;
}

.progress {
	border-radius: 16px;
	background: #21bc87;
	/* fallback for old browsers */
	-webkit-background: linear-gradient(to right, #c81282 0%, #ffdb3a 50%, #29cd84 100%);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #c81282 0%, #ffdb3a 50%, #29cd84 100%);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.progress .progress-bar {
	box-shadow: 0px 0px 0px 2000px #e9ecef;
	/* white or whatever color you like */
	background-image: none !important;
	background-color: transparent !important;

}

.progress-label {
	display: inline-block;

}

.progress-counter {
	float: right;
}

.task-list-progressbar-wrapper {
	width: calc(100% - 2.5rem);
	position: absolute;
	bottom: 1.25rem;
	left: 1.25rem;
	color: #fff;
	text-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
}

.task-list-progressbar-wrapper .progress {
	width: 100%;
	height: 0.6rem !important;
}

/* buttons */

.btn-lg {
	display: block;
	width: 100%;
	font-weight: bold;
	padding: calc(0.5rem + 1px) calc(1rem + 1px);
}

.btn-xl {
	display: block;
	width: 100%;
	font-weight: bold;
	padding: calc(1rem + 1px) calc(1rem + 1px);
	font-size: 1.4rem;
	line-height: 1.5;
	border-radius: 0.3rem;
}


/* primary */
.btn.btn-primary {
	background: #f2225b;
	background: -webkit-linear-gradient(to right, #c81282, #ee6472);
	background: linear-gradient(to right, #c81282, #ee6472);
	border: 0;
}

.btn.btn-primary:hover {
	filter: brightness(0.90);
}

.btn.btn-primary:focus {
	filter: brightness(0.85);
	box-shadow: 0 0 0 0.2rem rgba(248, 7, 89, 0.5);
}

.btn.btn-primary:active {
	filter: brightness(0.85);
	box-shadow: 0 0 0 0.2rem rgba(248, 7, 89, 0.5);
}







/* secondary */
.btn.btn-secondary {
	color: #f2225b;
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #c81282, #ee6472) border-box;
	border: 2px solid transparent;
	padding: calc(0.5rem - 1px) calc(1rem - 1px);
}

.btn.btn-secondary span {
	background-image: linear-gradient(to right, #c81282, #ee6472);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	width: 100%;
}

.btn.btn-secondary:hover {
	filter: brightness(0.90);
	background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #c81282, #ee6472) border-box;
	border: 2px solid transparent;
}

.btn.btn-secondary:focus {
	filter: brightness(0.85);
}

.btn.btn-secondary:active {
	filter: brightness(0.85);
}


/* share buttons */

/* WHATSAPP */

.btn.btn-whatsapp {
	background-color: #25D366;
	color: #fff;
	border: 0;
}

.btn.btn-whatsapp:hover {
	filter: brightness(0.90);
}

.btn.btn-whatsapp:focus {
	filter: brightness(0.85);
}

.btn.btn-whatsapp:active {
	filter: brightness(0.85);
}

/* INSTAGRAM */
.btn.btn-instagram {
	background: #833ab4;
	background: -webkit-linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
	background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
	color: #fff;
	border: 0;
}

.btn.btn-instagram:hover {
	filter: brightness(0.90);
}

.btn.btn-instagram:focus {
	filter: brightness(0.85);
}

.btn.btn-instagram:active {
	filter: brightness(0.85);
}

/* FACEBOOK */
.btn.btn-facebook {
	background: #1877f2;
	color: #fff;
	border: 0;
}

.btn.btn-facebook:hover {
	filter: brightness(0.90);
}

.btn.btn-facebook:focus {
	filter: brightness(0.85);
}

.btn.btn-facebook:active {
	filter: brightness(0.85);
}

/* SIGNAL */
.btn.btn-signal {
	background: #3a76f0;
	color: #fff;
	border: 0;
}

.btn.btn-signal:hover {
	filter: brightness(0.90);
}

.btn.btn-signal:focus {
	filter: brightness(0.85);
}

.btn.btn-signal:active {
	filter: brightness(0.85);
}

/* TIKTOK */
.btn.btn-tiktok {
	background: #FE2C55;
	color: #fff;
	border: 0;
}

.btn.btn-tiktok:hover {
	filter: brightness(0.90);
}

.btn.btn-tiktok:focus {
	filter: brightness(0.85);
}

.btn.btn-tiktok:active {
	filter: brightness(0.85);
}

/* TELEGRAM */
.btn.btn-telegram {
	background: #0088cc;
	color: #fff;
	border: 0;
}

.btn.btn-telegram:hover {
	filter: brightness(0.90);
}

.btn.btn-telegram:focus {
	filter: brightness(0.85);
}

.btn.btn-telegram:active {
	filter: brightness(0.85);
}

/* SMS */
.btn.btn-sms {
	background: #888;
	color: #fff;
	border: 0;
}

.btn.btn-sms:hover {
	filter: brightness(0.90);
}

.btn.btn-sms:focus {
	filter: brightness(0.85);
}

.btn.btn-sms:active {
	filter: brightness(0.85);
}


/* custom button icon */
.custom-icon {
	width: 20px;
	margin: 0 2.5px 5px 2.5px;
}

.post-action-modal-image, .success-modal-image {
	margin: 0 auto 1rem auto;
}



/* gradients */

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes gradient-infinite {
	0% {
		background-position: 0% 50%;
	}

	13% {
		background-position: 0% 25%;
	}

	25% {
		background-position: 50% 50%;
	}

	38% {
		background-position: 75% 0%;
	}

	50% {
		background-position: 100% 50%;
	}

	63% {
		background-position: 75% 100%;
	}

	75% {
		background-position: 50% 50%;
	}

	88% {
		background-position: 25% 0%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.settings {
	width: 2.5rem;
	float: right;
	cursor: pointer;
}

/* rotating */

.crossRotate {
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	outline: 0;
}

.crossRotateAction {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* background video */
.background-video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}


.custom-control .custom-control-input,
.custom-control .custom-control-label {
	cursor: pointer;
}



/* TASKS */

/* P2P Texting */

/* fix auto zoom on iOS */
.form-control {
	font-size: 16px;
}

.content {
	margin: 2rem 0;
}

#footer-wrapper {
	margin: 0 -15px 0 -15px;
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 1030;
	width: calc(100% + 30px);
	padding: 1rem;
	background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%);
	background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
	border-radius: 0.5rem;
	max-height: 45vh;
}

.modal .btn-primary,
.modal .btn-secondary,
.modal [id^=copy-button-] {
	text-align: center;
}

.modal .btn-lg, .modal .share-button {
	text-align: left !important;
}



/*
#footer-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1030;
	width: 100%;
	padding: 1rem;
	background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%);
	background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
	border-radius: 0.5rem 0.5rem 0 0;
	max-height: 45vh;
}

*/
@media (min-width: 576px) {

	#footer-wrapper {
		max-width: 450px;
		width: 100%;
		margin: 0 auto;
		position: sticky;
		border-radius: 0.5rem;
		max-height: 50vh;

	}
}

@media (min-width: 768px) {
	#footer-wrapper {
		max-width: 540px;
	}
}

#footer-wrapper p {
	margin-bottom: 0.5rem;
}


#p2ptexting-message-wrapper {
	height: calc(100% - 95px);
	border-radius: 0.5rem;
	/*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);*/
	overflow: auto;
	margin-bottom: 0.5rem;
	background-color: #fff;
}

#p2ptexting-message-textarea {
	border: 0;
	height: 100%;
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/*border-radius: 1.25rem 1.25rem 0 0;*/
	padding: 0.375rem 0.75rem 0 0.75rem
}

#p2ptexting-message-link {
	color: #999;
	padding: 0 0.75rem 0.375rem 0.75rem;
	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;
}


/* Facebook Event Invite */
#facebook-event-invite-wrapper button:first-child {
	margin-bottom: 0.5rem;
}

/* modals */

/* footer modal */

.modal-bottom .modal-dialog {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: 100% !important;
	margin: 0;
	transform: translateY(100%) !important;
}

.modal-bottom .modal-dialog .modal-content {
	border-radius: 0.5rem 0.5rem 0 0;
}

.modal-bottom.show {
	overflow: hidden;
}

.modal-bottom.show .modal-dialog {
	transform: translateY(0%) !important;
	min-height: 80px;
}

#p2ptextingDesktopModal .modal-header,
#p2ptextingMobileModal .modal-header {
	padding-bottom: 0;
}


.modal-header,
.modal-footer {
	border: none;
}

.modal-content {
	border: none;
}











/* navbar vs. admin-bar */

.admin-bar .navbar-fixed-top {
	top: 46px;
}

@media screen and (min-width: 783px) {
	.admin-bar .navbar-fixed-top {
		top: 32px;
	}
}

.footer.navbar-default {
	background-color: transparent;
}

/* hack for stickyness on iOS */
.navbar-fixed-bottom,
.navbar-fixed-top {
	transform: translate3d(0, 0, 0);
}

.navbar-fixed-bottom {
	height: 50% !important;
	position: absolute !important;
	bottom: 0 !important;
}

#header-logo {
	height: 45px;
}

/* navbar vs. admin-bar */

.admin-bar .navbar-fixed-top {
	top: 46px;
}

@media screen and (min-width: 783px) {
	.admin-bar .navbar-fixed-top {
		top: 32px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	font-family: 'Poppins Bold', sans-serif;
	/*font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;*/
	/*font-weight: 700;*/
	/*color: #fff;*/
}

strong, b {
	font-family: 'Poppins Bold', sans-serif;
	font-weight: 400;
}


/* navbar */

.navbar-default {
	color: #fff;
	border: 0;
}

.gradient {
	background: #ac207c !important;
	background: -webkit-linear-gradient(to right, #8221ae, #d5204b) !important;
	background: linear-gradient(to right, #8221ae, #d5204b) !important;
}

.navbar-default .navbar-toggle {
	background-color: transparent;
	border: 0;
	margin: 0px 5px 0px 0px;
	padding: 10px;
	height: 50px;
}

.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
	background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: #fff;
	display: block;
	width: 4px;
	height: 4px;
	margin: 3px;
	border-radius: 100%;
}

.navbar-default .navbar-brand {
	color: #fff;
	font-weight: bold;
	overflow: hidden;
	width: calc(100% - 35px);
	white-space: nowrap;
	outline: 0;
}

.navbar-brand,
#menu-modal p {
	outline: 0;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
	color: #fff;
	text-decoration: none;
}

body.single .navbar-header {
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

/* arrow */
.arrow {
	display: inline-block;
	margin-right: 10px;
}

/* navbar title with fadeout */
.navbar-title {
	display: inline-block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}


/* tasks */

.mobile-tasks .task-container {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	border-radius: 10px;
	/* padding: 20px; */
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	/* padding: 20px; */
	margin: 0 auto 15px auto;
	cursor: pointer;
}


/* tasks desktop */

.desktop-tasks .task-container {
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
	padding: 20px;
	margin-bottom: 20px;
	cursor: pointer;
}


/* done tasks mobile */
.mobile-tasks .done {
	background: #11998e;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #11998e, #38ef7d);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #11998e, #38ef7d);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
}

.mobile-tasks .done .badge.badge-counter {
	background-color: #fff;
	color: #25c685;
}

/* done tasks desktop */
.desktop-tasks .done {
	background: #11998e;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #11998e, #38ef7d);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #11998e, #38ef7d);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
}

.desktop-tasks .done .badge.badge-counter {
	background-color: #fff;
	color: #25c685;
}

#desktop-task a {
	color: #ff5b00;
	font-weight: bold;
}

#push-mini {
	display: none;
}

#push-subscribe {
	display: none;
}


#push-subscribe .task-container,
#push-subscribe img {
	background: #56ccf2;
	/* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #56ccf2, #2f80ed);
	/* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #56ccf2, #2f80ed);
	/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #fff;
}

#push-subscribe #privacy-disclaimer {
	font-size: 10px;
	color: #fff;
	line-height: 1.0
}

/*
   .subscribe {
	   background: #afd8e0;
		   background: -webkit-linear-gradient(to right, #afd8e0, #d1ecf1);
		   background: linear-gradient(to right, #afd8e0, #d1ecf1);
   }
   
   .subscribed  {
	   background: #9ef175;
		   background: -webkit-linear-gradient(to right, #9ef175, #69dd30);
		   background: linear-gradient(to right, #9ef175, #69dd30);
   }
	 
	 #notification-disclaimer {
		display: none;
   text-align: center;
	 font-size: 9px;
	 margin: 7px 0 10px 0;
}*/

.task-image {
	padding-right: 0;
}

.task-image img {
	border-radius: 50%;
}

.category-wrapper {
	width: 30%;
	padding-bottom: 30%;
	border-radius: 50%;
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
}

.category-icon {
	position: absolute;
	width: 75%;
	height: 75%;
	top: 10%;
	left: 10%;
}

/* .p2ptexting .category-wrapper, .p2ptexting-new .category-wrapper {
	background-color: #ff5b00;
   }

   .p2ptexting .category-icon, .p2ptexting-new .category-icon {
	background: url(img/megaphone_small.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
   }

   .wa2target .category-wrapper {
	background-color: #0E878F;
   }

   .wa2target .category-icon {
	background: url(img/bubble.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
   }
   
   .calling .category-wrapper {
	background-color: #5cb85c;
   }

   .calling .category-icon {
	background: url(img/phone.svg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
   }
*/

.task-title {
	margin-bottom: 0;
	font-weight: bold;
}


.notification-description {
	color: #444;
}

.notification-description p:first-child {
	margin-bottom: 0;
	font-weight: bold;
}

.badge.badge-counter {
	display: none;
	background-color: #5cb85c;
	float: right;
}

.hidden-task {
	display: none;
}

/* message and button container */

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50%;
}

/* footer calling */
#footer-calling {
	padding: 10px;
	border-top: 1px solid #666;
	height: 67px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
}

.calling-script {
	margin-top: 100px;
	padding-bottom: 89px;
}

#call {
	width: 100%;
	font-weight: bold;
}

/*
   #footer-wa2target {
	   height: calc(50% - 50px) !important;
   }
   #footer-wa2target .col-fluid {
	   height: calc(100% - 50px);
   }*/

.col-fixed {
	position: relative;
	min-height: 1px;
	padding-right: 0px;
	padding-left: 0px;
	float: left;
	width: 100%;
}

.col-fluid {
	position: relative;
	min-height: 1px;
	padding: 0 10px 10px 10px;
	float: left;
	width: 100%;
}

.col-fixed {
	width: 75px;
	height: 100%;
}

.col-fluid {
	width: calc(100% - 75px);
	height: 100%;
}

/* fix auto zoom on iOS */
.form-control {
	font-size: 16px;
}

#text-msg {
	box-sizing: border-box;
	height: 100%;
	padding: 0 15px 0 0;
	border-width: 5px 0 5px 15px;
	border-color: #fff;
	border-radius: 15px;
	box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

#footer-wa2target #text-msg {
	height: calc(100% - 50px);
}

.target {
	font-weight: bold;
	line-height: 1.5;
	height: 42px;
	margin-bottom: 8px;
}

.target .an {
	float: left;
	margin-right: 10px;
}

.btn-reset {
	position: absolute;
	top: 0;
	width: 65px;
	height: 65px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	border: 0;
	font-size: 175%;
	color: #8c8c8c;
}


#footer-wa2target .btn-reset {
	top: 50px;
}


.btn-send {
	position: absolute;
	bottom: 10px;
	width: 65px;
	height: 65px;
	margin: 0 10px 0 0;
	border-radius: 50%;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	border: 0;
}

.btn-send img {
	width: 30px;
	height: 30px;
	margin-left: 5px;
}


/* send buttons */
#whatsapp-button,
#sms-button,
#telegram-button,
#fb-messenger-button,
#viber-button,
#other-button,
#sms-other-button,
#telegram-other-button,
#fb-messenger-other-button,
#viber-other-button {
	display: none;
}

#whatsapp-button {
	background-color: #57bb63;
	border-color: #57bb63;
}

#telegram-button,
#telegram-other-button {
	background-color: #25a2dd;
	border-color: #25a2dd;
}

#fb-messenger-button,
#fb-messenger-other-button {
	background-color: #0084ff;
	border-color: #0084ff;
}

#fb-messenger-button img,
#fb-messenger-other-button img {
	height: 14px;
	display: inline-block;
	margin-left: 2px;
	margin-right: 3px;
}

#viber-button,
#viber-other-button {
	background-color: #665CAC;
	border-color: #665CAC;
}

#viber-button img,
#viber-other-button img {
	height: 14px;
	display: inline-block;
	margin-left: 2px;
	margin-right: 3px;
}

#other-button {
	background-color: #c20076;
	border-color: #c20076;
}

/* close */
.close {
	margin-bottom: 10px;
}

/* remove button outline */
.btn:focus,
.btn:active {
	outline: none !important;
	box-shadow: none;
}


.overlay {
	z-index: 1;
	height: 100%;
	width: 100%;
	position: fixed;
	overflow: auto;
	top: 0px;
	left: 0px;
	/*background: rgba(2, 2, 25, 0.70);
	   background: linear-gradient(to bottom, rgba(2,2,25,0.2), rgba(2,2,25,1));*/
}


#custom-cta-desktop {
	margin-top: 30px;
	color: #fff !important;
	padding: 15px 0 15px 0;
}


/* settings */

#checkbox-container {
	margin-top: 25px;
}

/* modals */

body.modal-open .background-container {
	-webkit-filter: blur(4px);
	-moz-filter: blur(4px);
	-o-filter: blur(4px);
	-ms-filter: blur(4px);
	filter: blur(4px);
}


.modal-sm {
	width: 175px;
	float: right;
}

#menu-modal .modal-sm a {
	color: #444;
	text-decoration: none;
	width: 100%;
	display: block;
	padding: 12px;
}

.modal-sm a:hover {
	color: #444;
}

.modal-sm p {
	margin: 0;
}


#menu-modal .modal-body {
	padding: 0;
}

#menu-modal .modal-dialog {
	margin: 5px;
}


#messenger-modal .modal-dialog {
	position: fixed;
	top: auto;
	right: 0px;
	bottom: 0px;
	left: auto;
}


/* messenger modal */

#messenger-modal .btn {
	width: 100%;
	margin-bottom: 15px;
	font-weight: bold;
	text-align: left;
}

#messenger-modal-close span {
	font-size: 50px;
	position: absolute;
	bottom: 5px;
	right: 10px;
}

#other-messengers-modal .modal-dialog {
	position: fixed;
	top: auto;
	right: 0px;
	bottom: 0px;
	left: auto;
}

#other-messengers-button {
	text-align: center;
	font-size: 2.5vw;

}


#other-messengers-modal .btn {
	width: 100%;
	margin-bottom: 15px;
	font-weight: bold;
	text-align: left;
}

#other-messengers-modal-close span {
	font-size: 50px;
	position: absolute;
	bottom: 5px;
	right: 10px;
}

.dark {
	background-color: rgba(0, 0, 0, 0.6);
}


/* encouraging modal */
#encouraging-modal {
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
}

#encouraging-modal .modal-dialog {
	margin-top: 100px;
}

#encouraging-modal .modal-title {
	font-weight: bold;
	color: #fff;
}

#encouraging-modal .modal-footer {
	border: 0;
	text-align: center;
}

/* modal directions */

.modal.fade:not(.in).top-right .modal-dialog {
	-webkit-transform: translate3d(25%, -25%, 0);
	transform: translate3d(25%, -25%, 0);
}

.modal.fade:not(.in).bottom-right .modal-dialog {
	-webkit-transform: translate3d(25%, 25%, 0);
	transform: translate3d(25%, 25%, 0);
}



/* external site container */

.external-container {
	padding-left: 0;
	padding-right: 0;
	margin-top: 0px;
}

/* switch fix */

.checkbox,
.radio {
	position: relative;
	display: block;
	margin-top: 0;
	margin-bottom: 20px;
}

/* breakout modal*/
#breakout-modal {
	display: none;
	top: 0px;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	color: #fff;
	z-index: 9999;
	padding: 100px 50px 0px 50px;
}


/*breakout modal arrow */
@keyframes jump {
	0% {
		top: 0;
	}

	50% {
		top: 25px;
	}

	100% {
		top: 0;
	}
}

#arrow {
	display: none;
	animation: jump 3s infinite;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	font-size: 250%;
	margin: 1px 10px 0 0;
	padding: 0;
	line-height: 1.0;
}

/* send now pointer */
@keyframes point {
	0% {
		bottom: 50px;
	}

	50% {
		bottom: 75px;
	}

	100% {
		bottom: 50px;
	}
}

#pointer {
	display: none;
	animation: point 3s infinite;
	position: absolute;
	height: 75px;
	bottom: 0;
	left: 0px;
	width: 65px;
	color: #444 !important;
	right: 0;
	color: #fff;
	font-size: 250%;
	padding: 0;
	line-height: 1.0;
	text-align: center;
}

#instructions {
	margin-top: 65px;
	width: 90%;
}

#instructions-p2ptexting-new {
	margin-top: 65px;
	width: 100%;
}


/* messenger modal */

/* fb messenger modal */
#fb-messenger-modal {
	background-color: rgba(0, 0, 0, 0.4);
}

#fb-messenger-modal .modal-dialog {
	margin-top: 125px;
}

#fb-messenger-modal,
#fb-messenger-modal h4 {
	color: #fff;
}

#fb-messenger-modal .modal-header,
#fb-messenger-modal .modal-footer {
	border: 0;
}

#fb-messenger-modal .modal-footer {
	text-align: center;
}

#copy-success,
#copy-fallback {
	display: none;
}

.footer-imprint {
	text-align: center;
	margin-top: 50px;
	z-index: 9999;
}


/* language switcher */
li.lang-item  {
list-style-type: none !important;
}

li.lang-item.current-lang  {
	font-weight: bold !important;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
	background-image: #1394b7;
	background-image: -webkit-linear-gradient(to right, #1394b7, #1eb6a2);
	background-image: linear-gradient(to right, #1394b7, #1eb6a2);
}

/* DARK MODE */


body.dark {
	color: #c0c0c0;
	background-color: #222;
}


body.dark .logo {
	filter: grayscale(0.5) brightness(0.95);
}

body.dark .logo.logo-small {
	filter: grayscale(1) brightness(1);
}


body.dark .settings {
	filter: brightness(2);
}

body.dark .progress {
	border-radius: 16px;
	background: #21bc87;
	-webkit-background: linear-gradient(to right, #c81282 0%, #ffdb3a 50%, #29cd84 100%);
	background: linear-gradient(to right, #c81282 0%, #ffdb3a 50%, #29cd84 100%);
	filter: grayscale(0.5) brightness(0.9);
}


body.dark .progress .progress-bar {
	box-shadow: 0px 0px 0px 2000px #444;
	background-image: none !important;
	background-color: transparent !important;
}


body.dark .task-card .progress {
	filter: none;
}


body.dark .task-card {
	filter: grayscale(0.45) brightness(0.9);
}


body.dark .locked {
	filter: contrast(50%) brightness(1.25) grayscale(1) !important;
	-ms-user-select: None;
	-moz-user-select: None;
	-webkit-user-select: None;
	user-select: None;
}

body.dark .task-card .task-image {
	filter: brightness(0.95);

}

body.dark .locked * {
	filter: blur(3px) grayscale(1);
}

body.dark .locked:hover {
	-webkit-filter: contrast(35%) brightness(1.5) grayscale(1);
	-moz-filter: contrast(35%) brightness(1.5) grayscale(1);
	-ms-filter: contrast(35%) brightness(1.5) grayscale(1);
	filter: contrast(35%) brightness(1.5) grayscale(1);
}

body.dark .locked .locked-lock {
	filter: none;
}

body.dark .locked .task-image {
	filter: blur(3px) grayscale(1) brightness(0.95);

}

.locked .progress {
	display: none;
}

/* für locked task cards keine filter??, damit kein override */


body.dark .task-card h3 {
	font-weight: bold;
	color: #fefefe;
	/* maybe doesn’t work for darker background images */
	/* text-shadow: 1px 1px 2px rgb(255 255 255 / 25%); */
}






body.dark .badge-light {
	color: #c0c0c0;
	background-color: #333;
}


body.dark .modal-content {
	background-color: #3D3D44;
}


body.dark #footer-wrapper p {
	color: #3D3D44;
}

body.dark #p2ptexting-message-wrapper,
body.dark #p2ptexting-message-wrapper * {
	background-color: #3D3D44;
}

body.dark #p2ptexting-message-textarea {
	color: #c0c0c0;
}


/* secondary */
body.dark .btn.btn-secondary {
	color: #f2225b;
	background: linear-gradient(#3D3D44, #3D3D44) padding-box, linear-gradient(to right, #c81282, #ee6472) border-box;
	border: 2px solid transparent;
}

body.dark .btn.btn-secondary span {
	background-image: linear-gradient(to right, #c81282, #ee6472);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	width: 100%;
}

body.dark .btn.btn-secondary:hover {
	filter: brightness(0.90);
	background: linear-gradient(#3D3D44, #3D3D44) padding-box, linear-gradient(to right, #c81282, #ee6472) border-box;
	border: 2px solid transparent;
}

body.dark .btn.btn-secondary:focus {
	filter: brightness(0.85);
}

body.dark .btn.btn-secondary:active {
	filter: brightness(0.85);
}