﻿/* Colors
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Fonts
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Layout
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Flex Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Links
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Animations
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Other Mixins
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Color Themes
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (min-width: 1101px) {
  #optoutForm ul {
    width: 50%;
  }
}

.optout-form legend {
  line-height: 1.75;
}
.optout-form legend p {
  color: #2d2d2d;
}
.optout-form input[type=submit][disabled] {
  cursor: default;
  opacity: 0.65;
}
.optout-form ul > li {
  box-sizing: border-box;
  position: relative;
  padding: 0.8em 0;
}
.optout-form input[type=radio] {
  cursor: pointer;
  height: 0;
  line-height: normal;
  padding: 0;
  position: absolute;
  opacity: 0;
  width: 0;
}
body:not(.disable-focus-state) .optout-form input[type=radio]:focus + label .circle {
  border: 2px solid #0077B3;
  box-shadow: 0px 0px 8px #8fd8f2;
}
.optout-form input[type=radio]:checked + label .circle {
  background-color: #0077B3;
  border: 2px solid #0077B3;
}
.optout-form input[type=radio]:checked + label .circle:after {
  opacity: 1;
}
.optout-form label {
  cursor: pointer;
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  position: relative;
  padding-left: 3.2rem;
}
.optout-form .circle {
  transition: opacity 0.25s ease-in-out;
  border: 1px solid #2d2d2d;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  height: 2.2rem;
  width: 2.2rem;
}
.optout-form .circle:after {
  content: "";
  position: absolute;
  opacity: 0;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: white;
}
@media (min-width: 769px) {
  .optout-form.two-column ul {
    display: flex;
    margin: 0 -0.8em;
  }
  .optout-form.two-column ul > li {
    width: 50%;
    padding: 0.8em;
  }
}
.optout-form.button-radios label {
  border-radius: 5px;
  box-shadow: 0 0 0 1px #707070 inset;
  padding: 1.2rem 1.6rem;
  text-align: center;
}
.optout-form.button-radios label:hover {
  box-shadow: 0 0 0 1px #0077B3 inset;
}
.optout-form.button-radios input[type=radio]:checked + label {
  background-color: #f3f9fc;
  box-shadow: 0 0 0 2px #0077B3 inset;
}
body:not(.disable-focus-state) .optout-form.button-radios input[type=radio]:focus + label {
  outline: -webkit-focus-ring-color none 0;
  outline: 3px dashed #0077B3;
  outline-offset: -3px;
}
