.pointer {
	cursor: pointer;
}


body {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0px;
	color: #212121;
	background-color: #FEFEFE;
}

hr.brand {
	border: 0px;
	opacity: 1;
	border-top: 2px solid #4A8203;
}

hr.white {
	border: 0px;
	opacity: 1;
	border-top: 2px solid #FFFFFF;
}


a,
a:link,
a:hover,
a:visited { color: inherit; }

a.noStyle,
a.noStyle:link,
a.noStyle:hover,
a.noStyle:visited { text-decoration: none; }


/* FONT STYLES 
======================================================== */

h1, h2, h3, h4, h5 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 800;
	letter-spacing: 0px;	
	color: #212121;
}

h1, h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 21px; line-height: 27px; }
h4 { font-size: 19px; line-height: 24px; }

h1 small, h2 small, h3 small, h4 small { font-weight: 500; color: #212121; display: block; letter-spacing: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
h1 small, h2 small { font-size: 24px; line-height: 28px; padding-bottom: 8px; font-weight: 300; }
h3 small { font-size: 19px; line-height: 21px; margin-top: 8px; font-weight: 300; opacity: 1; }
h4 small { font-size: 16px; line-height: 21px; margin-top: 8px; font-weight: 300; opacity: 1; }

p {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0px;
	color: #4a4a4a;
}

p.caption {
	font-size: 14px !important;
	line-height: 18px !important;
	color: #999999;
	width: 75%;
}

/* COLORS STYLES 
======================================================== */
.bgBrand { background-color: #212121; }
.bgBrandLight { background-color: #7f9562; }
.bgBrandSuperLight { background-color: #F0F6E0; }
.bgBrandInverted { background-color: #4A8203; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.bgBrandAlternative { background-color: #D11E2F; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.bgDark { background-color: #4a4a4a; }
.bgGrey { background-color: #CFCFCF; }
.bgLight { background-color: #EFEFEF; }
.bgWhite { background-color: #FFFFFF !important; }

.cBrand, .CBRand { color: #4A8203; }
.cBrandLight { color: #7F9562; }
.cBrandSuperLight { color: #F0F6E0; }
.cBrandInverted { color: #4A8203; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.cBrandAlternative { color: #D11E2F; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.cDark { color: #4a4a4a; }
.cGrey { color: #CFCFCF; }
.cLight { color: #F2F2F2; }
.cWhite { color: #FFFFFF; }

.shadowLight {
	box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.1);
}

/* GAP STYLES 
======================================================== */

.ugp4 { margin-top: 4px; }
.ugp8 { margin-top: 8px; }
.ugp16 { margin-top: 16px; }
.ugp24 { margin-top: 24px; }
.ugp32 { margin-top: 32px; }
.ugp40 { margin-top: 40px; }
.ugp48 { margin-top: 48px; }
.ugp56 { margin-top: 56px; }
.ugp64 { margin-top: 64px; }
.ugp80 { margin-top: 80px; }
.ugp88 { margin-top: 88px; }
.ugp96 { margin-top: 96px; }
.ugp128 { margin-top: 128px; }
.ugp256 { margin-top: 256px; }

.bgp0{ margin-bottom: 0px; }
.bgp12 { margin-bottom: 12px; }
.bgp16 { margin-bottom: 16px; }
.bgp32 { margin-bottom: 32px; }
.bgp40{ margin-bottom: 40px; }
.bgp48{ margin-bottom: 48px; }
.bgp56{ margin-bottom: 56px; }
.bgp80{ margin-bottom: 80px; }
.bgp120{ margin-bottom: 120px; }


.inGap8 { padding: 8px; }
.inGap12 { padding: 12px; }
.inGap16 { padding: 16px; }
.inGap24 { padding: 24px; }


  .dragHandle { cursor: grab; }
  .gallery-item.dragging { opacity: .6; }
  #galleryList .drop-before { border-top: 2px solid #999; padding-top: 15px; padding-bottom: 15px;  }
  #galleryList .drop-after  { border-bottom: 2px solid #999; padding-top: 15px; padding-bottom: 15px;}

.rectImage4_3,
.rectImage64,
.rectImage96 {
	display: inline; float: left;
	margin-right: 16px;
	width: 40px; height: 40px;
	background-color: #EFEFEF;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.rectImage96 { width: 96px; height: 96px; }
.rectImage4_3 { width: 100%; height: 210px; display: inline; float: left; }



/* BUTTONS
==================================== */
.btnRounded {
	border-radius: 50px !important;
}

.btn,
.btn:hover,
.btn a,
.btn a:link,
.btn a:visited,
.btn a:hover {
	padding: 12px 24px;
	line-height: 21px;
	padding-bottom: 14px;
	border-radius: 1px !important;
	text-decoration: none;
	color: inherit !important;
	font-size: 18px;
	font-weight: 400;
}

.btnSmall,
.btnSmall:hover,
.btnSmall a,
.btnSmall a:link,
.btnSmall a:visited,
.btnSmall a:hover,
a.btnSmall,
a.btnSmall:link,
a.btnSmall:visited,
a.btnSmall:hover {
	padding: 6px 16px !important; 
	line-height: 26px;
	padding-bottom: 8px;
	font-size: 16px;
	font-weight: 400;
}

.btnXS,
.btnXS:hover,
.btnXS a,
.btnXS a:link,
.btnXS a:visited,
.btnXS a:hover {
	padding: 6px 10px !important;
	line-height: 16px;
	padding-bottom: 6px;
	font-size: 14px;
	font-weight: 400;
}




.btnBrand,
.btnBrand:hover,
.btnBrand a,
.btnBrand a:link,
.btnBrand a:visited,
.btnBrand a:hover {
	border: 1px solid #4A8203;
	color: #FFFFFF !important;
	background-color: #4A8203;
}


.btnWhite,
.btnWhite a,
.btnWhite a:link,
.btnWhite a:visited,
.btnWhite a:hover {
	border: 1px solid #FFFFFF;
	color: #4A8203;
	background-color: #FFFFFF;
}


.btnBrandInverted,
.btnBrandInverted a,
.btnBrandInverted a:link,
.btnBrandInverted a:visited,
.btnBrandInverted a:hover {
	border: 1px solid #4A8203;
	color: #FFFFFF;
	background-color: #4A8203;
}


.btnBrandInvertedGhost,
.btnBrandInvertedGhost:hover,
 a.btnBrandInvertedGhost,
 a.btnBrandInvertedGhost:link,
 a.btnBrandInvertedGhost:hover,
 a.btnBrandInvertedGhost:visited,
.btnBrandInvertedGhost a,
.btnBrandInvertedGhost a:link,
.btnBrandInvertedGhost a:visited,
.btnBrandInvertedGhost a:hover {
	border: 1px solid #4A8203;
	color: #4A8203;
	background-color: transparent;
}

.btnBrandGhost,
.btnBrandGhost:hover,
.btnBrandGhost a,
.btnBrandGhost a:link,
.btnBrandGhost a:visited,
.btnBrandGhost a:hover {
	border: 1px solid #4A8203 !important;
	color: #4A8203 !important;
	background-color: transparent;
}

.btnWhiteGhost,
.btnWhiteGhost:hover,
.btnWhiteGhost a,
.btnWhiteGhost a:link,
.btnWhiteGhost a:visited,
.btnWhiteGhost a:hover {
	border: 1px solid #FFFFFF;
	color: #FFFFFF !important;
	background-color: transparent;
}

.btnDarkGhost,
.btnDarkGhost:hover,
.btnDarkGhost a,
.btnDarkGhost a:link,
.btnDarkGhost a:visited,
.btnDarkGhost a:hover {
	border: 1px solid #3B404A;
	color: #3B404A;
	background-color: transparent;
}

.floatingButton {
	position: fixed !important;
	z-index: 1000 !important;
	top: 56px;
	right: 56px;
}


.dashboardCard { border-radius: 1px; padding: 16px 16px 1px 16px;} 
.dashboardCard h1 { margin-bottom: 0px; }
.dashboardCard h1 span.dashboardCardIcon { color: #CCE8EC; }
.dashboardCard h1 a:link,
.dashboardCard h1 a:hover,
.dashboardCard h1 a:visited { 
	color: #4A8203;
}


#coverImage {
	width: 85%;
	height: 180px;
	background-color: #CFCFCF;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}


/* 	PreviewModal
	 ============================= 
	 ============================= */

#submissionPreviewModal .modal-header {
	background-color: #212121;
	min-height: 150px;
	padding-bottom: 150px;
	background-image: url('../images/bg_lines.png');
	background-position: left 95%;
	background-repeat: repeat-x;
	background-size: 200%;
}

#submissionPreviewModal img.logo { width: 270px; }
#submissionPreviewModal .modal-header h1 {
	color: #FFFFFF;
	margin-bottom: 88px;
	margin-top: 128px;
}

#submissionPreviewModal p.small {
	line-height: 16px;
	line-height: 19px;
}

#submissionPreviewModal .cover_image {
	width: 100%;
	height: 520px;
	background-color: #AFAFAF;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin-top: -210px;
}



#submissionPreviewModal .modal-footer {
	background-color: #212121; 
	padding: 8px 0px 32px 0px;

}

/* 	MAP STYLES
	 ============================= 
	 ============================= */
	 
#dashboardmap, #modalMap {
	width: 100%; height: 420px;
	background-color: #CFCFCF;
}

#modalMap { height: 480px;}

/* 	FORM STYLES
	 ============================= 
	 ============================= */
	 
div.form-text,
label { 
	color: #4a4a4a; font-weight: 300; 
	font-size: 14px; 
	margin-left: 5px; 
	display: block !important; 
	padding-bottom: 8px;
	line-height: 1.3em;
}

div.form-text {
	color: #4A8203 !important;
	opacity: 0.85;
	line-height: 1.2em;
}

input.form-control, select.form-control, select.form-select, select, textarea.form-control {
	font-size: 18px;
	border-radius: 2px;
	border: 1px solid #EFEFEF;
	background-color: #FFFFFF;
	box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.05); 
	opacity: 0.75;
	padding: 12px 16px;
}

input.form-control:focus { 
	border: 1px solid #F9F9F9;
	box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.15); 
	opacity: 1; 
}

.login input.form-control,
.login input.form-control:focus {
	box-shadow: none !important;
	border: 1px solid #F1f1f1;
}
.login input.form-control:focus {
	border: 1px solid #AFAFAF;
}

input.form-control::placeholder {
	color: #999999;
	font-weight: 300;
	font-size: 14px;
}

.largeFormSelect:focus,
.largeFormSelect {
	font-size: 24px; font-weight: 700; 
	outline: none;
	color: #4A8203;
	background-image: none;
	margin-top: -10px;
	width: 100%;
	opacity: 1 !important; 
	background-color: transparent !important; 
	z-index: 101 !important;
	position: relative;
	margin-top: -36px;
}
.dropDownIcon { 
	z-index: 100 !important;
	position: relative;
	width: 100%; display: block; text-align: right;
	font-size: 24px; font-weight: 700; 
	color: #4A8203;	
	margin-top: 12px; 
	z-index: 1000;
}


.checkBoxNiceHtml {
	font-size: 21px;
	color: #4A8203;
	font-weight: 400; 
	cursor: pointer; 
	display: flex;
	align-content: space-between;
}
.checkBoxNiceHtml.coloredBox.checked { background-color: #4A8203; color: #FFFFFF;}

.checkBox { display: flex; align-self: center;}
.checkBoxNiceHtml i { display: inline; float: left; margin-top: 4px; font-size: 24px; }
.checkBoxLabel {  width: 100%; margin-top: 4px; font-size: 16px; opacity: 0.75; line-height: 1.4em; color: inherit;}
.checkBoxNiceHtml i { margin-left: 4px; margin-right: 12px;}

.checkBoxNiceHtml i.checkedIcon { display: none;}	
.checkBoxNiceHtml.coloredBox i.checkedIcon { color: #FFFFFF;}	
.checkBoxNiceHtml i.unCheckedIcon {display: inline; opacity: 0.5; color: #4A8203; }	
.checkBoxNiceHtml.coloredBox i.unCheckedIcon {display: inline; opacity: 0.5; color: #FFFFFF; }	
.checkBoxNiceHtml.checked i.checkedIcon {display: inline; }	
.checkBoxNiceHtml.checked i.unCheckedIcon { display: none; }	

label.custom-switch-label { font-size: 19px; font-weight: 400; padding-top: 6px; }
label.custom-checkbox-label { font-size: 19px; font-weight: 400; padding-top: 4px; }
label.custom-radio-label { font-size: 19px; font-weight: 400; padding-top: 4px; }

.custom-checkbox {
	width: 24px;
	height: 24px;
	background-color: #FFFFFF;
	border: 1px solid #EFEFEF;
	border-radius: 1px !important;
	cursor: pointer;
	box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.05); 
}
 
.custom-checkbox:checked {
	background-color: #4A8203;
	border-color: #4A8203;
}
 
.custom-radio {
	width: 24px;
	height: 24px;
	background-color: white;
	border: 1px solid custom;
	border-radius: 25px !important;
	cursor: pointer;
}
 
 .custom-radio:checked {
	background-color: #4A8203;
	border: 6px solid #4A8203; 
 }


input#fileUpload {border: 1px solid #CCE8EC !important; }
input::file-selector-button, input::file-selector-button:hover {
		background-color: #4A8203 !important;
		color: #FFFFFF !important;
		border: none !important;
		
}



/* MODAL STYLES =============== */
.modal-content,
.modal-header,
.modal-footer {
	border-radius: 1px !important;
	background-color: #F2F2F2;
}


@media (max-width: 576px) {

	#submissionPreviewModal .modal-header { background-size: 400%; padding-bottom: 88px; }	
	#submissionPreviewModal img.logo { width: 180px; }
	#submissionPreviewModal .modal-header h1 { margin-bottom: 0px; margin-top: 56px; font-size: 28px !important; line-height: 32px; }
	#submissionPreviewModal .modal-header h1 small { font-size: 21px !important; line-height: 24px; }
	#submissionPreviewModal .cover_image { height: 180px; margin-top: -72px; }
}