:root {
  --padding: 1.5rem;
}

.cookie-modal {
	position:fixed;
	z-index:1000;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,.8);
	left:0;
	top:0;
	pointer-events:none;
	display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--padding);
}
.cookie-modal--hidden {
	display:none;
}
.cookie-modal__content {
	width: 680px;
	max-width: 100%;
	padding: calc(var(--padding)*2) var(--padding);
	box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3);
	background-color: #fff;
	pointer-events: auto;
	color: #000;
}
.cookie-modal__text {
    margin: calc(var(--padding)/3*2) 0;
}

.cookie-modal__options {
	margin-bottom: calc(var(--padding)*2);
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.cookie-modal__option {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	cursor: pointer;
	margin-right: calc(var(--padding)*1.5) !important;
	margin-bottom: calc(var(--padding)/3*2) !important;
}

.cookie-modal__option.disabled {
	opacity: 0.3;
	cursor: default;
}
.cookie-modal__buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.cookie-modal__button {
	margin-left: var(--padding);
	white-space:nowrap;
}	
.cookie-modal__button.hide{
	display:none;
}



@media all and (max-width: 720px) {

:root {
  --padding: 1rem;
}

}

@media all and (max-width: 600px) {

.cookie-modal__options {
	display: block;
}

}