/**
 * Styling for Buy Credit page
 */

@media screen and (max-width: 60em) {
  .mobile-app-advert-full {
    display: none;
  }
}
@media screen and (min-width: 60.0625em) {
  .mobile-app-advert-mobile {
    display: none;
  }
}

#main-content .l-rw {
  width: 100%;
  max-width: 1920px;
  padding: 0;
}
.l-main #rid-content {
  background: #b9dde9!important;
}
@media screen and (min-width: 30.0625em) {
  .l-main #rid-content {
    padding: 30px;
  }
}
#block-corolla-content {
  max-width: 72em;
  margin: 0 auto;
  overflow: auto;
  padding: 10px;
  background: #f6f8ed;
}
@media screen and (min-width: 30.0625em) {
  #block-corolla-content {
    padding: 0 30px 30px;
  }
}
.block-local-tasks {
  margin: 0 auto!important;
  max-width: 72em;
  padding: 30px 30px 0!important;
  background: #f6f8ed!important;
}
.block-local-tasks .block__inner {
  margin: 0!important;
  padding: 0!important;
}
.block-local-tasks .tabs__tab--is-active a,
.block-local-tasks a.is-active {
  background-color: #23677a!important;
}

.treegen.messages {
  margin: 0;
}
@media screen and (min-width: 30.0625em) {
  .treegen.messages {
    margin-top: 30px;
  }
}

.treegen.messages .container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.field {
  width: 100%;
  max-width: 72em;
  margin: 0 auto;
}
h3 {
  line-height: 1.5rem;
}
@media screen and (min-width: 45.0625em) {
  h3 {
    line-height: 2.05rem;
  }
}
h1.treegen-title {
  /*background: #f6f8ed;*/
  background: #77bdd5 url('../../images/brighter_future.1920.jpg') 50% 65% no-repeat;
  background-size: cover;
  padding: 60px 30px;
  margin: 0;
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25em;
  color: #f6f8ed;
  text-align: center;
  border: 10px #f6f8ed solid;
}
.field-commerce-product--body {
  background: #f6f8ed;
  padding: 10px;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.field-commerce-product--body a {
  color: #23677a;
}
@media screen and (min-width: 30.0625em) {
  h1.treegen-title {
    border: 30px #f6f8ed solid;
  }
  .field-commerce-product--body {
    padding: 0 30px 30px;
  }
}
.price {
  font-size: 2.2em;
  line-height: 1em;
  color: #23677a;
}
.price-suffix {
  font-size: large;
  line-height: 1em;
  color: #23677a;
  text-transform: uppercase;
}
.field-commerce-product--body .main-image {
  margin: 0 auto 30px;
  display: block;
}
.field-commerce-product--body {
  overflow: visible!important;
}
.field-name-field-promotion-image {
  text-align: center;
}
@media screen and (min-width: 45.0625em) {
  .field-name-field-promotion-image {
    text-align: left;
    float: left;
    width: 50%;
    max-width: 391px;
    margin: 10px 30px;
  }
  .field-commerce-product--body .main-image {
    float: left;
    margin: 0 30px 30px 0; 
    width: 56%;
    max-width: 400px;
  }
}
.field-commerce-product--body .field__item p:last-child {
  margin-bottom: 0;
}
.webform-container {
  clear: both;
  border: 0;
  padding: 10px;
  background: #f6f8ed;
  border-bottom: 15px solid #b9dde9;
}
@media screen and (min-width: 30.0625em) {
  .webform-container {
    padding: 30px;
    /*border-bottom: 0;*/
    border-bottom: 10px solid #b9dde9;
  }
}
@media screen and (min-width: 60.0625em) {
  .webform-container {
    /*margin-top: -30px;*/
    /*margin-bottom: 30px;*/
  }
}
.webform-detail {
  border: 0;
  margin: 0;
}
.webform-detail summary {
  background: #23677a;
  font-weight: 700;
  color: #f6f8ed;
  margin: 0;
  width: 100%;
  white-space: inherit;
}
.field-commerce-product-variations {
  clear: both;
}

@media screen and (min-width: 60.0625em) {
  .field--name-field-donation-recipient {
    float: left;
  }
  #donation-recipient {
    float: right;
    width: 50%;
  }
  .credit-markup,
  .field--name-field-donation-recipient,
  .field--name-purchased-entity,
  .field--name-unit-price,
  .field--name-quantity,
  .field--name-field-contribution-gift,
  .field--name-field-dietary-requirements,
  #contribution-terms,
  #edit-actions {
    width: 45%;
    margin: 0;
    overflow: hidden;
  }
  .field--name-field-donation-recipient {
    margin-top: 0;
  }
}
.field--name-purchased-entity {
  display: none;
}
.field--name-field-donation-recipient label,
.field--name-purchased-entity legend,
.field--name-unit-price label,
.field--name-quantity label,
.field--name-field-contribution-gift label,
.field--pre-selected label,
.field--name-field-dietary-requirements legend,
.button,
.button:hover,
.button:active {
  background: #23677a;
  font-weight: 700;
  color: #f6f8ed;
  margin: 0!important;
  padding: 10px 20px;
  width: 100%;
  white-space: inherit;
  border: 0;
}
.field--name-field-dietary-requirements .fieldset-wrapper {
  background: #fff;
  padding: 30px;
  border-radius: 4px;
  border: 1px solid #ccc;
} 
.credit-markup {
  background: #b3d3fb77;
  border-radius: 4px;
  padding: 30px;
  margin-bottom: 30px;
}
.credit-markup p {
  margin: 0;
}

.field--pre-selected,
.field--name-field-donation-recipient .form-item,
.field--name-unit-price,
.field--name-quantity .form-item,
.field--name-field-dietary-requirements fieldset,
.field--name-purchased-entity .form-item {
  margin: 0;
  margin-bottom: 30px;
}
.field--name-unit-price .field-suffix {
  display: none;
}
.field--name-field-contribution-gift .form-item {
  background: #23677a;
  padding: 15px 15px 5px;
  border-radius: 4px;
  width: 95%;
  max-width: 440px;
}
.field--name-field-contribution-gift input {
  width: 1.2em;
  height: 1.2em;
  background-color: white;
  vertical-align: middle;
  border: 1px solid #ddd;
}
.field--name-field-contribution-gift label {
  display: inline;
  background-color: #23677a!important;
}
.field--name-field-contribution-gift .description {
  color: #f6f8ed;
  line-height: 1.25em;
  padding: 10px 0;
}

/*
.field--name-purchased-entity .fieldset-wrapper {
  background: #f6f8ed;
  padding: 30px;
}
.field--name-purchased-entity .fieldset-wrapper:hover {
  background: white;
}
.field--name-purchased-entity label.option {
  background: #f6f8ed;
  background: inherit;
}
*/

.commerce-order-item-add-to-cart-form {
  padding: 0 10px;
}

.commerce-order-item-add-to-cart-form .form-required:after,
.commerce-order-item-add-to-cart-form .fieldset-legend:after,
.commerce-order-item-add-to-cart-form .field label:after {
  display: none;
}
input[type="text"],
select {
  background-color: #f6f8ed;
}
.webform-submission-form input[type="text"],
.webform-submission-form select {
  background-color: #fff;
}
.button,
.button:active,
.button:hover {
  font-size: x-large;
  text-transform: uppercase;
  height: auto;
  padding: 15px 0;
}
.field-node--field-demo {
  position: absolute;
  width: auto;
  top: 35px;
  left: 15px;
  webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}
.field-node--field-demo figure {
  margin: 0;
}
#contribution-terms .inner {
  background: #fff;
  padding: 15px;
  margin: 0;
  margin-bottom: 30px;
  border-radius: 4px;
  font-size: .9em;
  color: #23677a;
}
#contribution-terms .inner p:last-child {
  margin: 0;
}
#content-suffix {
  width: 100%;
  max-width: 1920px;
  padding: 0;
  margin: auto;
}
#content-suffix .l-rw,
#content-suffix .l-r {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
.block-contribute-other-options {
  width: 100%;
  max-width: 100%;
  background: #23677a;
  color: #f6f8ed;
  margin: 0;
  padding: 45px 30px;
}
.block-contribute-other-options a {
  color: #fff;
  font-weight: 700;
  text-decoration-line: underline;
}
.block-contribute-other-options .treegen-link.active {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2em;
}

.latest-discounts-cycle {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  text-align: center;
  margin-bottom: 30px;
  background: #f6f8ed;
}
@media screen and (min-width: 45.0625em) {
  .latest-discounts-cycle {
    float: right;
    margin-left: 30px;
    width: 300px;
    max-height: 600px;
    overflow: auto;
  }
}
.views_slideshow_cycle_teaser_section {
  margin: auto;
}
.latest-discounts-cycle .block__title {
  width: 100%;
  text-align: center;
  background: #23677a;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  line-height: 2.5rem;
  font-size: 1.25rem;
  text-align: center;
  margin: 0 auto 5px;
}
.latest-discounts-cycle .block__title a {
  color: #f6f8ed;
}
.latest-discounts-cycle .product-title {
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-transform: uppercase;
  color: #23677a;
  margin: 10px 0;
}
.latest-discounts-cycle .available-discount {
  font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 2rem;
  color: #23677a;
  margin: 10px 0; 
}
.latest-discounts-cycle .available-discount .field-content {
  font-size: 1.8rem;
}
.latest-discounts-cycle .treegen-button {
  margin-bottom: 5px;
}
.latest-discounts-cycle .treegen-button a {
  background: #23677a;
  display: block;
  width: 66.7%;
  margin: 0 auto;
  text-align: center;
  padding: 8px;
  color: #f6f8ed !important;
}
.latest-discounts-cycle img {
  height: 210px!important;
}
div.treegen-link {
  display: block;
  padding: 20px;
  padding-left: 20px;
  padding-left: 65px;
  font-size: 1rem;
  line-height: 1em;
  font-weight: 600;
  border-radius: 0;
  background: rgb(52, 131, 153) url("https://treegeneration.uk/sites/treegeneration.uk/themes/corolla/images/community_icon_light.png") 10px center / auto 45px no-repeat;
  color: rgb(246, 248, 237);
}
div.treegen-link form {
  color: #2e2e2e!important;
  font-weight: 400;
  line-height: 1.24em;
}
fieldset[id*="edit-your-contact-details"], 
fieldset[id*="staying-in-touch"] {
 border: 1px solid #ccc;
 padding: 10px;
 border-radius: 3px;
}
fieldset[id*="edit-your-contact-details"] .fieldset-legend, 
fieldset[id*="staying-in-touch"] .fieldset-legend {
  padding: 0 5px;
}