.cookie-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 15;
}
.cookie-container .cookie-banner {
padding: 0.5rem;
z-index: 5;
transform-origin: left;
background-color: var(--primary);
color: white;
}
.cookie-container .cookie-icon {
position: fixed;
left: .6rem;
bottom: 1.2rem;
height: 3rem;
width: 3rem;
border-radius: 50%;
align-items: center;
transition: all 0.25s;
background-color: var(--primary);
}
.cookie-container .cookie-icon img {  
width: 80%;
height: auto;
margin: 10%;
}
.cookie-container .cookie-icon:hover {
cursor: pointer;
transform: scale(1.25);
}
.cookie-container .cookie-settings {
position: fixed;
background: white;
left: 0.6rem;
bottom: 5.4rem;
border: 1px solid lightgray;
box-shadow: 0 0 16px 0 lightgray;
border-radius: 8px;
padding: 1rem;
}
.cookie-container .flex {
display: flex;
align-items: center;
}
.cookie-container .cookie-banner .info {
flex: 1 1;
padding: 12px;
}
.cookie-container .cookie-banner .actions {
flex: 0 0 240px;
text-align: right;
}
.cookie-container .main-text {
font-size: 1.25em;
}
.cookie-container .cookie-settings.displayed {
display: block;
}
.cookie-container .cookie-settings .settings-title {
margin-bottom: 1.5rem;
font-size: 1.25em;
}
.cookie-container .cookie-settings.is-right {
left: auto;
right: 0.6rem;
bottom: 7.2rem;
}
.cookie-container .cookie-settings .cookie-selector {
justify-content: space-between;
margin-bottom: 1rem;
display: flex;
}
.cookie-container .cookie-settings .cookie-selector .cookie-title {
font-size: 0.8rem;
color: grey;
padding: 0;
margin: 0;
}
.cookie-container .cookie-settings .cookie-selector .cookie-description {
font-size: 0.8rem;
color: grey;
padding: 0;
margin: 0;
}
.cookie-container .cookie-settings .cookie-selector .switch-selector {
text-align: right;
margin-left: 1rem;
}
.cookie-container .cookie-settings .cookie-footer {
margin-top: 3rem;
text-align: right;
} .btn {
border-radius: 0.3rem;
padding: 0.5rem 1.5rem;
color: #000;
background-color: transparent;
display: inline-block;
width: auto;
border: 1px solid transparent;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.btn:hover {
cursor: pointer;
} .cookie-container .btn.main-btn {
background-color: var(--primary);
border-color: var(--primary);
color: white;
}
.cookie-container .btn.light-btn {
background-color: transparent;
border-color: var(--primary);
color: var(--primary);
}
.cookie-container .btn.flat-btn {
background-color: transparent;
border-color: transparent;
color: black;
}
.cookie-container .btn.light-btn:hover,
.cookie-container .btn.flat-btn:hover {
background-color: var(--primary);
color: white;
} .cookie-container:not(.light) .cookie-banner .btn.main-btn {
background-color: #17c5ce;
border-color: #17c5ce;
color: var(--primary);
}
.cookie-container:not(.light) .cookie-banner .btn.light-btn {
background-color: var(--primary);
border-color: white;
color: white;
}
.cookie-container:not(.light) .cookie-banner .btn.flat-btn {
background-color: transparent;
border-color: transparent;
color: white;
}
.cookie-container:not(.light) .btn.light-btn:hover,
.cookie-container:not(.light) .btn.flat-btn:hover {
background-color: white;
color: var(--primary);
} .cookie-container.light .cookie-banner {
background-color: white;
color: black;
}  .switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.switch input { 
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--primary);
}
input:focus + .slider {
box-shadow: 0 0 1px var(--primary);
}
input:checked + .slider:before {
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
} .slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
} .slide-fade-enter-active {
transition: all .5s;
}
.slide-fade-leave-active {
transition: all .5s;
}
.slide-fade-enter, .slide-fade-leave-to {
transform: scale(0);
opacity: 0;
}
.pop-fade-enter-active {
transition: all .5s 5s;
}
.pop-fade-enter {
transform: scale(0);
opacity: 0;
}
@media (max-width: 1024px) {
.cookie-banner .container .flex {
flex-direction: column;
}
.cookie-container .cookie-banner .actions {
flex: 0;
}
.cookie-container .cookie-banner .container {
margin: 0;
width: 100%;
max-width: 100%;
}
}