﻿/*----COOKIE BAR--------------------------------------*/

.cookie-overlay     {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; background-color: rgba(35,67,82,0.5); }
.cookieBar-content  {width: 1080px; max-width: calc(100% - 60px); background-color: #ffffff; border-radius: 120px 0 0 0; z-index: 9999; padding:60px 80px; left: 0; text-align: center; display: flex;flex-direction: column;align-items: center;}

/*.cookieBar             {width: 100%; background-color:rgba(0,0,0,0.6); position: fixed; bottom: 0px; left: 0px; text-align: left; z-index: 9999; box-sizing:border-box;}*/
.cookieBar				{ display: flex; height: 100%; align-items: center; justify-content: center; margin: 0; padding: 0; z-index: 9999; background-image: none; background-color: rgba(0, 0, 0, 0.3); text-align: center}
.cookieBar h2           {font-size: 66px; font-weight: 300}
.cookieBar p			{color: #234352;  margin: 2em auto; font-size: 30px; line-height: 1.2em;}
.cookieBar p a			{color:#fff; font-weight: 700}
.cookieBar p a:hover	{text-decoration: underline;}
.cookie-buttons			{display: flex; padding: 10px 0 0 0;}

.cookie-buttons a, .accept	   {font-size: 30px; font-weight: 600; display: block; padding:28px 60px 30px 60px; background-color: var(--magenta); color:#ffffff; text-decoration: none; margin-right: 20px; transition: 0.2s ease-out; border-radius: 40px 0 0 0}
.cookie-buttons a.manage	   {background-color: transparent; color:var(--magenta); border: 1px solid var(--magenta); transition: 0.2s ease-out; margin-right: 0; border-radius: 0 40px 0 0}

.cookie-buttons .accept:hover	{background-color: var(--navy); border-color; var(--navy); color: #fff;}
.cookie-buttons a.manage:hover	{background-color:  var(--navy); border-color; var(--navy); color: #fff;}

.close-cookies				{width:13px; height: 13px; position: absolute; right:10px; top:10px;}
.close-cookies img			{width:100%;}

.cookie-popup-outer				{background-color: rgba(0,20,56,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 40px; opacity: 0; visibility: hidden; transform: translateY(30px); transition: 0.2s ease-out;}
.cookie-popup-outer.active		{opacity: 1; visibility: visible; transform: translateY(0);}
.cookie-popup-container			{width:730px; height: 590px; background-color:#ffffff; min-height: 20px; box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0%), 0 7px 14px 0 rgb(50 50 93 / 10%); color:#333; border-radius: 80px 0 0 0;}

.cookie-popup-container-top					{padding: 40px; display: flex; align-items: center; border-bottom: 1px solid #d8d8d8; position: relative;}
.cookie-popup-container-top img.cookie-logo	{width:85px; align-items: center; margin: 0 30px 0 20px;}
.cookie-popup-container-top h2				{font-size: 30px; font-weight: 300}
.cookie-popup-container-top .close-cookies	{width:22px; height: 22px; right: 20px; top:20px;}

.cookie-middle-container	{height: calc(100% - 196px);}
.cookie-middle-content		{position: relative; height: 100%; overflow-y: auto; overflow-x: hidden;}

.cookie-text-box			{word-break: break-word; word-wrap: break-word; padding-top: 20px; padding-right: 16px; padding-bottom: 15px; position: absolute; top:0; left: 30%; width: 65.3333333333%; margin-left: 4%;}
.cookie-text-box h3			{margin-bottom: 1em; font-size: 15px;}
.cookie-text-box p			{font-size: 13px; line-height: 1.4em; margin-bottom: 1em;}
.cookie-text-box p a		{color:#333333; font-weight: 600}

.cookie-tab-btn    			{width: 30.6666666667%; cursor: pointer; border-left: 10px solid transparent; background-color: #f4f4f4; border-bottom: 1px solid #d7d7d7; padding-top: 16px; padding-right: 5px; padding-bottom: 16px; padding-left: 12px; font-weight: 700; line-height: 1.3em;}
.cookie-tab-btn.active		{background-color:#ffffff; border-left-color:var(--magenta)}

.bottom-container			{padding:20px 30px; border-top: 1px solid #d8d8d8; display: flex; justify-content: flex-end;}
.save-settings				{padding:15px 10px; background-color:var(--magenta); color: #ffffff; text-decoration: none; font-size: 14px; border-radius: 20px 0 0 0; transition: 0.2s ease-out;}
.save-settings:hover		{background-color: #707070}

/* SWITCH */
.cookie-popup-container .switch 						{display: inline-block; width: 40px; height: 24px; position: absolute; right: 20px; top:10px}
.cookie-popup-container .switch input 					{opacity: 0; width: 0; height: 0;}
.cookie-popup-container .slider 						{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.cookie-popup-container .slider:before 					{position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
.cookie-popup-container input:checked + .slider 		{background-color: var(--magenta);}
.cookie-popup-container input:focus + .slider 			{box-shadow: 0 0 1px var(--magenta);}
.cookie-popup-container input:checked + .slider:before 	{-webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px);}
.cookie-popup-container .slider.round 					{border-radius: 24px;}
.cookie-popup-container .slider.round:before 			{border-radius: 50%;}

@media (max-width:900px) {

    .cookieBar-content  {border-radius: 70px 0 0 0; padding: 40px;}
    
    .cookieBar h2   {font-size: 27px;}
    .cookieBar p    {font-size: 16px;}
    
    .cookie-buttons a, .accept {font-size: 16px; padding: 21px 40px 22px 40px;}
    .cookie-middle-container {height: calc(100% - 200px);}
    .bottom-container {padding: 6px 30px 0 30px;}
}

