/*
* Common styles for all cookie consent templates (banner-static, popup, slideout)
*/

.bm-cookie-banner
{
	background-color: #EBEBEB;
	color: #202020;
	text-align: center;
	font-size: 16px;
}

.bm-cookie-banner__title
{
	font-size: 1.8em;
	line-height: 1.1;
	padding-bottom: 16px;
}

.bm-cookie-banner__text,
.bm-cookie-banner__checkboxes
{
	margin-bottom: 18px;
}

.bm-cookie-banner__content .bm-cookie-banner__text p,
.bm-cookie-banner__content .bm-cookie-banner__text li
{
	margin-bottom: 4px;
}

.bm-cookie-banner__text a
{
	color: inherit;
}

.bm-cookie-banner__button-wrapper
{
	display: flex;
	justify-content: center;
}

.bm-cookie-banner__button
{
	background-color: #202020;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	padding: 12px 24px;
	margin: 10px 12px;
	width: 50%;
	max-width: 300px;
	transition: all 0.15s ease;
}

.bm-cookie-banner__button:hover,
.bm-cookie-banner__button:focus
{
	background-color: #3E3E3E;
}

.bm-cookie-banner__checkboxes
{
	display: table;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding: 0 25px;
}

.bm-cookie-banner__checkbox input[type="checkbox"]
{
	position: absolute;
	opacity: 0;
	left: -1000px;
}

.bm-cookie-banner__checkbox
{
	display: block;
	position: relative;
	padding-left: 35px;
	cursor: pointer;
}

.bm-cookie-banner__checkbox:not(:last-of-type)
{
	margin-bottom: 12px;
}

.bm-cookie-banner__checkbox .fakecheck
{
	width: 20px;
	height: 20px;
	background-color: #FFFFFF;
	border: 1px solid #202020;
	position: absolute;
	top: 0;
  	left: 0;
}

.bm-cookie-banner__checkbox .fakecheck::after
{
	display: none;
	content: "";
	position: absolute;
  	left: 5px;
	top: 0px;
	width: 8px;
	height: 14px;
	border: solid #202020;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

.bm-cookie-banner__checkbox input:focus + .fakecheck
{
	outline: 1px dotted #000000;
	outline: -webkit-focus-ring-color auto 5px;
}

.bm-cookie-banner__checkbox input:checked + .fakecheck::after
{
	display: block;
}

.bm-cookie-banner__checkbox span
{
	font-weight: bold;
}

.bm-cookie-banner__form
{
	display: flex;
	flex-direction: column;
}

.bm-cookie-banner__form--buttons-above
{
	flex-direction: column-reverse;
}

/*
* Margin below buttons only if they're above fields
*/
.bm-cookie-banner__form--buttons-above > .bm-cookie-banner__button-wrapper
{
	margin-bottom: 18px;
}

/**
* Shortcode button
*/

.cookie-shortcode-button
{
	background-color: #202020;
	color: #FFFFFF;
	display: inline-block;
	padding: 12px 24px;
	margin: 10px 0;
	max-width: 300px;
	transition: all 0.15s ease;
}

.cookie-shortcode-button:hover,
.cookie-shortcode-button:focus
{
	background-color: #3E3E3E;
}


/**
* Media queries (mobile)
*/

@media screen and (max-width: 768px)
{
	.bm-cookie-banner__button-wrapper
	{
		flex-direction: column-reverse;
		align-items: center;
	}

	.bm-cookie-banner__checkboxes
	{
		padding: 0;
	}

	.bm-cookie-banner__button
	{
		width: 100%;
	}

	/* Reverse order – form buttons above checkboxes */
	.bm-cookie-banner__form
	{
		flex-direction: column-reverse;
	}
	/* Update margins when order is reversed */
	.bm-cookie-banner__button-wrapper
	{
		margin-bottom: 18px;
	}
	.bm-cookie-banner__checkboxes
	{
		margin-bottom: 0;
	}
}

@media screen and (max-width: 450px)
{
	.bm-cookie-banner__button
	{
		max-width: initial;
	}
}