/**************
*COOKIE-BANNER*
***************/
.cookieBannerHeader,
.cookieBannerDismissButton,
.cookieBannerBody,
.cookieBannerFooter,
.cookieBannerMainButtons,
.cookieBannerPolicyLinks,
.cookieSettingsContainer {
  --bannerPaddingSize: 1.5rem;
}

.cookieBannerModal {
  width: 800px;
  max-width: calc(100% - 80px);
  margin: auto;
  position: fixed;
  top: 7rem;
  background: rgb(255 255 255);
  border-radius: 1rem;
}

.cookieBannerModalHidden {
  display: none;
}

.cookieBannerContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cookieBannerHeader,
.cookieBannerBody,
.cookieSettingsContainer,
.cookieBannerFooter {
  padding: var(--bannerPaddingSize);
}

.cookieBannerFooterPagina1 {
  padding-top: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

.cookieBannerFooterHr {
  display: none;
  width: 30px;
  margin: auto;
  color: #3c3c3c;
}

.cookieBannerHeader {
  height: calc(var(--bannerPaddingSize) * 2 + 24px);
  padding-top:1rem;
  padding-bottom:1rem;
}

.cookieBannerDismissButton {
  width: 24px;
  height: 24px;
  line-height: 24px;
  appearance: none;
  border: none;
  color: #000;
  background-color: transparent;
  font-size: 24px;
  position: absolute;
  top: var(--bannerPaddingSize);
  right: var(--bannerPaddingSize);
  cursor: pointer;
}

.cookieBannerBody {
  border-top: 1px solid #e6e6e6;
  overflow-y: auto;
  position: relative;
  text-align: center;
}

.cookieBannerBodyFirstPage {
  /* top: 7rem, bottom: 4rem */
  max-height: calc(100vh - 11rem - 66px - 164px);
}

.cookieBannerBodySecondPage {
  max-height: calc(100vh - 11rem - 66px - 85px);
}

.cookieBannerBody p {
  margin-bottom: 15px;
  line-height: 1.5;
}

.cookieBannerTitle {
  font-size: 1.4rem;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--clr-pandacom-grey);
}

.cookieBannerDescription {
  font-size: 1rem;
  font-weight: 300;
}

.cookieBannerDescription a {
  color: var(--clr-autoscuola-green);
}

.cookieBannerMainButtons {
  padding: var(--bannerPaddingSize) 3rem var(--bannerPaddingSize);
}

.cookieToggleAllSettingsButtons {
  padding: calc(var(--bannerPaddingSize) * 2) 3rem var(--bannerPaddingSize);
}

.cookieBannerMainButtons,
.cookieToggleAllSettingsButtons {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.cookieToggleAllSettingsButtons {
  justify-content: center;
  position: sticky;
  top: calc(var(--bannerPaddingSize) * (-1));
  padding-top: var(--bannerPaddingSize);
  background-color: #fff;
  z-index: 1;
  border-bottom: 1px solid #e6e6e6;
}

.cookieBannerMainButtons .cookieBannerMainButtonContainer {
  flex-grow: 1;
}

.cookieBannerPersonalizeContainer {
  text-align: center;
}

.cookieBannerButton {
  border-radius: 0.4rem;
  position: relative;
  border-style: none;
  width: 100%;
  cursor: pointer;
}

.cookieBannerMainButton,
.cookieBannerSecondaryButton {
  padding: 0.8rem 1.5rem;
  width: 100%;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.cookieBannerMainButton {
  background-color: var(--clr-autoscuola-green);
  color: #fff;
}

.cookieToggleAllSettingsButtons .cookieBannerMainButton {
  background-color: #e6e6e6;
  color: #3c3c3c;
}

.cookieBannerSecondaryButton {
  background-color: #fff;
  border: 1px solid #3c3c3c;
  color: #3c3c3c;
}

.cookieSettingsContainer {
  padding-bottom: 0;
}

.cookieBannerPersonalizeButton {
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--clr-autoscuola-green);
  max-width: 400px;
  margin: auto auto 5px;
  font-size: 1.2rem;
}

.policyButtonsContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.cookieBannerPolicyLinks {
  text-align: center;
}

.cookieBannerPolicyLinks a {
  margin: 0 5px;
  text-decoration: none;
  font-weight: 500;
  padding: 0.75rem 2rem;
  background: var(--clr-pandacom-grey);
  color: #fff;
  font-size: 1rem;
  border-radius: 0.5rem;
  display: block;
}

.cookieBannerFooterChoices {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cookieSingleSetting {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  justify-content: space-between;
  padding: 15px 0;
}

.cookieSettingTitle {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.cookieSettingDescription {
  font-size: 1.05rem;
}

.cookieSettingToggle {
  align-self: center;
}

/* Toggle input */
.cookieSettingSwitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.cookieSettingSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookieSettingSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 13px;
}

.cookieSettingSlider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 45%;
}

input:checked + .cookieSettingSlider {
  background-color: var(--clr-autoscuola-green);
}

input:focus + .cookieSettingSlider {
  box-shadow: 0 0 1px var(--clr-autoscuola-green);
}

input:checked + .cookieSettingSlider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

.settingDisabled {
  opacity: 0.4;
}

.settingDisabled .cookieSettingSlider {
  cursor: auto;
}

@media screen and (min-width: 992px)
{
  .cookieBannerMainButton:hover {
    background-color: var(--clr-autoscuola-green-lighter);
  }
  
  .cookieToggleAllSettingsButtons .cookieBannerMainButton:hover {
    background-color: var(--clr-grey-8);
  }
  
  .cookieBannerSecondaryButton:hover {
    background-color: var(--clr-grey-9);
  }
  
  .cookieBannerPersonalizeButton:hover {
    background-color: var(--clr-grey-9);
  }
  
  .cookieBannerPolicyLinks a:hover {
    background-color: #686666;
  }
}

@media screen and (max-width: 768px) {
  .cookieBannerModal {
    top: 1.5rem;
  }

  .cookieBannerBodyFirstPage {
    max-height: calc(100vh - 5rem - 66px - 155px);
  }

  .cookieBannerBodySecondPage {
    max-height: calc(100vh - 5rem - 66px - 76px);
  }

  .cookieBannerMainButtons {
    padding: var(--bannerPaddingSize) 0;
  }

  .cookieToggleAllSettingsButtons {
    padding: var(--bannerPaddingSize) 0 var(--bannerPaddingSize);
  }

  .cookieBannerMainButton,
  .cookieBannerSecondaryButton {
    padding: 0.5rem 1.5rem;
  }
}

@media screen and (max-width: 550px) {
  .cookieBannerTitle {
    font-size: 1.2rem;
  }

  .cookieBannerMainButtons {
    padding: 1rem 0 0.8rem;
  }
  .cookieToggleAllSettingsButtons {
    padding-top: 0.5rem;
    padding-bottom: 0.7rem;
  }

  .cookieBannerMainButtons,
  .cookieToggleAllSettingsButtons {
    flex-direction: column;
    gap: 0.5rem;
  }

  .cookieBannerMainButton,
  .cookieBannerSecondaryButton {
    font-size: 1rem;
  }

  .cookieBannerFooterChoices {
    flex-direction: column;
    gap: 0.5rem;
  }

  .cookieSingleSetting {
    flex-direction: column;
    gap: 1rem;
    padding: 5px 0 35px;
  }
  .cookieSettingToggle {
    align-self: flex-start;
  }

  .cookieBannerBodyFirstPage {
    max-height: calc(100vh - 4rem - 66px - 174px);
  }
  .cookieBannerBodySecondPage {
    max-height: calc(100vh - 4rem - 66px - 111px);
  }
}

@media screen and (max-width: 500px)
{
  .policyButtonsContainer
  {
    flex-direction: column;
  }

  .cookieBannerPolicyLinks a {
    width: calc(100% - 30px);
    margin: 0 15px;
  }

  .cookieBannerFooterHr {
    display: block;
    margin: 10px auto;
  }
}

@media screen and (max-width: 414px)
{
  .cookieBannerModal {
    max-width: calc(100% - 50px);
  }

  .cookieBannerBody {
    padding-bottom: 1rem;
  }

  .cookieBannerBody p {
    margin-bottom: 6px;
  }

  .cookieBannerTitle {
    font-size: 1.08rem;
    margin-bottom: 10px;
  }

  .cookieBannerDescription {
    font-size: 0.92rem;
  }

  .cookieSettingsContainer {
    padding-top: 1rem;
    padding-bottom: 0;
  }

  .cookieBannerBodyFirstPage {
    max-height: calc(100vh - 8rem - 66px - 215px);
  }

  .cookieBannerPersonalizeButton {
    font-size: 1.1rem;
  }
}

/*************
*COOKIE-LAYER*
**************/
.cookieLayer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background: rgb(0 0 0 / 30%);
  z-index: 3;
  display: flex;
  justify-content: center;
	transform: translateZ(2000px);
  -webkit-transform: translateZ(2000px);
}

.cookieLayerHidden {
  position: fixed;
  background: none;
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
}

/***************
*COOKIE-SETTING*
****************/
.cookieSingleSetting {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  justify-content: space-between;
  padding: 15px 0;
}

.settingDisabled {
  opacity: 0.4;
}

.cookieSettingTitle {
  font-size: 1.2rem;
  margin-bottom: 10px;
  font-weight: 500;
}

.cookieSettingDescription {
  font-size: 1.05rem;
}

.cookieSettingToggle {
  align-self: center;
}

.cookieSettingSwitch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.cookieSettingSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookieSettingSlider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 13px;
}

.cookieSettingSlider:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 45%;
}

input:checked + .cookieSettingSlider {
  background-color: var(--clr-autoscuola-green);
}

input:focus + .cookieSettingSlider {
  box-shadow: 0 0 1px var(--clr-autoscuola-green);
}

input:checked + .cookieSettingSlider:before {
  -webkit-transform: translateX(32px);
  -ms-transform: translateX(32px);
  transform: translateX(32px);
}

.settingDisabled .cookieSettingSlider {
  cursor: auto;
}

@media screen and (max-width: 550px) {
  .cookieSingleSetting {
    flex-direction: column;
    gap: 1rem;
    padding: 5px 0 35px;
  }

  .cookieSettingToggle {
    align-self: flex-start;
  }
}

/*********************
*COOKIE-SETTINGS-LINK*
**********************/
.cookieSettingsLinkContainer {
  width: 38px;
  height: 38px;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgb(255 255 255);
  border-radius: 0.4rem;
  border-color: rgba(0, 0, 0, 0.65);
  display: flex;
  appearance: none;
  border: none;
  cursor: pointer;
  overflow: hidden;
  /* HOVER OFF */
	transition: width 1s;
  -webkit-transition: width 1s;
  transition-delay: 0.1s;
  padding:0;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);
}

.cookieSettingsButton {
  background: none;
  padding: 5px;
}

.cookieSettingsDescription {
  opacity: 0;
  width: 205px;
  line-height: 28px;
  padding: 5px 15px;
  font-size: 0.92rem;
  color: var(--clr-autoscuola-green);
  /* HOVER OFF */
  transition: opacity 0.2s;
}
.cookieSettingsLinkContainerHidden {
  display: none;
}

@media screen and (min-width: 992px)
{
  .cookieSettingsLinkContainer.cookieSettingsLinkContainer:hover {
    width: 243px;
    /* HOVER ON */
    transition: width 0.8s;
    -webkit-transition: width 0.8s;
  }

  .cookieSettingsLinkContainer.cookieSettingsLinkContainer:hover
    .cookieSettingsDescription {
    opacity: 1;
    /* HOVER ON */
    transition: opacity 0.4s;
    transition-delay: 0.5s;
  }
}