/* shared setup */

/* <  375px */

/* From tailwind --lg = 60em =  < 960px */

/* >= 960px */

/* 960px - 1168px */

/* Values from Tailwind Config */

/* 500px */

/* 499px */

/* 720px */

/* 719px */

/* 960px */

/* 1200px */

/* 1280px */

:root {
  --mobile-logo-height: 41px;
  --mobile-logo-width: 126px;
  --mobile-header-height: 70px;
  --mobile-header-button-height: 40px;
  --ecomm-header-logo-height: 33px;
  --ecomm-desktop-header-logo-width: 213px;
  --ecomm-mobile-header-logo-width: 105px;
  --desktop-utility-height: 3.5rem;  /* 56px */
  --desktop-header-height: 5.25rem;  /* 84px */
  --desktop-logo-height: 2.75rem;    /* 44px */
  --desktop-logo-width: 8.75rem;     /* 140px */
  --desktop-logo-tight-scale-factor: 0.85;
  --desktop-search-height: 2.5rem;   /* 40px */
  --desktop-search-width: 23.75rem;  /* 380px */
  --max-content-width: 75rem;        /* 1200px */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --white: #fff;
  --depths: #012345;
  --caribbean-reef: #327ABD;
  --driftwood: #D5C6B4;
  --river-stone-grey: #757777;
  --kelp: #004225;
  --chlorophyll: #008666;
  --green: #51E172;
  --medium-gray: #C7C6C6;
  --dark-gray: #383736;
  --crystalline: #F7F5F3;
  --black-8: rgba(0,0,0,0.08);
  --black-22: rgba(0,0,0,0.22);
  --height-target: 2.75rem;
}

/* ecommerce specific (overrides and custom styles) */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

select {
  background: #fff;
  height: 2.6875rem;
}

input[type="submit"] {
  border: 0;
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"]{
  cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select{
  width: 100%;
  font-size: 1.125rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select{
  border: 1px solid #012345;
  border: 1px solid var(--depths);
  font-family: MuseoSlab, serif;
  padding: 0.625em;
}

input[type="date"]{
  width: 100%;
  border: 1px solid #012345;
  border: 1px solid var(--depths);
  font-size: 1rem;
  padding: 0.625em;
}

input.stepper, span.stepper{
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
}

input.stepper,
span.stepper{
  -moz-appearance: textfield;
  border: none;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.25em;
  text-align: center;
  width: 3ch;
}

@media (min-width: 60em){

input.stepper,
span.stepper{
    font-size: 1.125rem;
}
  }

input.stepper::-webkit-inner-spin-button,
  input.stepper::-webkit-outer-spin-button,
  span.stepper::-webkit-inner-spin-button,
  span.stepper::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
  }

.hint-text {
  margin-top: 0.25rem;
  display: block;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.75;
}

.hint-text-error {
  margin-top: 0.25rem;
  display: block;
  font-size: .875rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.75;
  --tw-text-opacity: 1;
  color: rgba(224, 37, 31, 1);
  color: rgba(224, 37, 31, var(--tw-text-opacity));
}

/* radio class is set on the <li> tag
checkbox class is set on the <label> tag */

.checkbox, .radio{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  cursor: pointer;
  -ms-flex-align: center;
      align-items: center;
  font-size: 1.125rem;
  line-height: 1.5;
}

.flex-col.checkbox > *, .flex-col.radio > *{
  max-width: 100%;
}

.checkbox label, .radio label {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
  }

.checkbox input, .radio input {
    margin-top: 0;
    margin-right: 0.5rem;
  }

.checkbox img, .radio img {
    vertical-align: baseline;
  }

.checkbox label[for="surge_contribution_form_donation_frequency_monthly"], .checkbox label[for="surge_contribution_form_donation_frequency_once"], .radio label[for="surge_contribution_form_donation_frequency_monthly"], .radio label[for="surge_contribution_form_donation_frequency_once"]{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

textarea {
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(1, 35, 69, 1);
  border-color: rgba(1, 35, 69, var(--tw-border-opacity));
  padding: 0.625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
}

/* for SHEDDWEB-581 needed to add space between label text and link */

.add-anchor-padding {
  padding-left: 0.3em;
}

/* for SHEDDWEB-910 */

.donation-button-spacing {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
}

.donation-button-spacing label {
    width: 31%;
  }

.donation-button-spacing label:nth-child(3n) {
      margin-right: 0px;
    }

@media (max-width: 500px) {

.donation-button-spacing label {
      width: clamp(44%, 29vw, 47%)
  }

      .donation-button-spacing label:nth-child(3n) {
        margin-right: 8px;
      }
    }

/* for SHEDDWEB-633 */

.donation-list-label {
  width: 205px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.donation-list-label p:first-child {
    line-height: 50px;
    margin: 1rem 0;
  }

.donation-list-description li {
  list-style: disc;
}

.donation-list-description ul {
  padding: 10px;
  margin-left: 1em;
}

.donation-list-description p {
  line-height: 1.5em;
}

/* email sign up forms section */

.email-signup-container {
  width: 100%;
}

.email-signup-container input[type="submit"] {
    width: 100%;
  }

@media (min-width: 31.25em){
    .email-signup-container input[type="submit"]{
      width: auto;
    }
  }

.short-email-signup-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between
}

.short-email-signup-container.items-center > *{
  max-width: 100%;
}

@media (min-width: 45em){
  .short-email-signup-container{
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.short-email-signup-container form {
    width: 100%;
  }

@media (min-width: 720px){

.short-email-text {
    padding-right: 1.25rem
}
  }

.long-form-text-input div, .short-form-text-input div {
    margin-top: 0.9375rem;
    margin-bottom: 0.9375rem;
  }

.long-form-moving-inputs {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media (min-width: 45em){
  .long-form-moving-inputs{
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.email_signup_interest_type_ids {
  padding-bottom: 1.25rem;
}

.email-form-thanks-title-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.flex-col.email-form-thanks-title-container > *{
  max-width: 100%;
}

.email-form-thanks-title-container{
  font-size: clamp(2rem, 2.5vw, 40%);
}

@media (max-width: 720px) {

.email-form-thanks-title-container > svg {
    width: 43px;

    height: 43px
}
  }

/* end email signups form section */

.normal-form-error {
  margin-top: 0.25rem;
  display: block;
  font-size: .875rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgba(224, 37, 31, 1);
  color: rgba(224, 37, 31, var(--tw-text-opacity));
}

@media (max-width: 900px) {
  #gpp-other-a11y-notes {
    width: 100%;
  }
}

/* Gated Content Form */

[data-controller="educator-info-form"] div {
    padding-bottom: 1.5rem;
  }

[data-controller="educator-info-form"] .gated_content_info_form_grade_level_taught, [data-controller="educator-info-form"] .gated_content_info_form_educator_type {
    width: 100%;
  }

@media (min-width: 31.25em){
    [data-controller="educator-info-form"] .gated_content_info_form_educator_school_name, [data-controller="educator-info-form"] .gated_content_info_form_is_cps_school, [data-controller="educator-info-form"] .gated_content_info_form_cps_network{
      width: 50%;
    }
  }

@media (min-width: 31.25em){
    [data-controller="educator-info-form"] .gated_content_info_form_school_zip_code{
      width: 25%;
    }
  }

@media (min-width: 60em){
    [data-controller="educator-info-form"] .gated_content_info_form_school_zip_code{
      width: 25%;
    }
  }

.gated_content_info_form_grade_level_taught ul {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

@media (min-width: 31.25em){
    .gated_content_info_form_grade_level_taught li{
      width: 25%;
    }
  }

/* GPP Accessibility and Other Notes */

.gpp-other-a11y-container {
  width: 100%;
  height: 196px;
}

#gpp-other-a11y-notes {
  width: 510px;
  height: 100%;
}

#gpp-other-a11y-notes:focus {
  outline: none !important;
}

.gpp-zip-code-input {
  width: 300px;
}

.gpp-zip-code-input input[type="text"] {
    padding: 1rem;
  }

@media (max-width:500px) {

.gpp-zip-code-input {
    width: 100%
}
  }

#gpp-homeschool-group-name {
  margin-bottom: 12px;
  width: 50%;
  padding: 1rem;
}

@media (max-width:960px) {

#gpp-homeschool-group-name {
    width: 100%
}
  }

/* GPP Primary and Day-Of Contacts */

#group_contact_form_building_entry {
  width: 100%;
  height: 136px;
}

.gpp-contact-input {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.gpp-contact-input input {
    max-width: 293px;
  }

@media (max-width: 720px) {

.gpp-contact-input input {
      max-width: 100%
  }
    }

.gpp-contact-input .group_contact_form_contact_phone > span {
    width: 100%;
  }

/* GPP Group Size screen student input */

.gpp-group-size-textbox {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column
}

.gpp-group-size-textbox.items-center > *{
  max-width: 100%;
}

@media (min-width: 45em){
  .gpp-group-size-textbox{
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 60em){
  .gpp-group-size-textbox{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

.gpp-group-size-textbox > input {
    width: 50%;
  }

@media (min-width: 60em){
    .gpp-group-size-textbox > input{
      width: 40%;
    }
  }

input#gpp-group-size-number-of-students {
  font-weight: 700;
}

@media (max-width: 31.24em) {

.button {
    width: 100%
}
  }

@media (min-width: 31.25em) {

.button {
    min-width: 130px
}
  }

.text-link {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
  text-decoration: underline;
  cursor: pointer;
}

.text-link[disabled] {
    color: rgba(0,0,0,0.22);
    color: var(--black-22);
    cursor: default;
  }

.text-link-small {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  font-size: .875rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgba(1, 35, 69, 1);
  color: rgba(1, 35, 69, var(--tw-text-opacity));
  text-decoration: underline;
  cursor: pointer;
}

.text-link-small[disabled] {
    color: rgba(0,0,0,0.22);
    color: var(--black-22);
    cursor: default;
  }

.addon-img {
  height: 150px;
  width: 150px;
  margin-top: 1rem;
  margin-left: 1rem;
}

@media (min-width: 60em) {

.addon-img {
    height: 240px;

    width: 240px;

    margin: 0;

    margin: initial
}
  }

.addons-flex {
  margin-bottom: 1.5rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 1.125rem;
  width: 100%;
  height: auto;
}

.addons-flex li {
    width: 50%;
  }

@media (min-width: 60em) {

.addons-flex li {
      width: 31%
  }
    }

[data-a11y-dialog-native] .dialog-overlay {
  display: none;
}

.dialog[aria-hidden='true'] {
  display: none;
}

/* container */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.dialog-overlay {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  /* z-index: 1; */
  inset: 0;
}

dialog::-ms-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
  background: #fff;
  border: 0;
  left: 0;
  height: 100%;
  margin: 0;
  overflow: auto;
  padding: 60px 25px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
}

@media (min-width: 31.25em) {

.dialog-content {
    height: auto;

    left: 50%;

    max-height: calc(100vh - 40px);

    max-width: calc(100% - 40px);

    padding: 40px 25px;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

    width: 850px
}
  }

@media (min-width: 60em) {

.dialog-content {
    padding: 40px
}
  }

.dialog-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: AcuminProCondensed, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25; /* h2 styling */
}

.dialog-close {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 1.25em;
  font-weight: bold;
  height: 2.75rem;
  padding: 0;
  position: absolute;
  right: 0.5em;
  text-align: center;
  top: 0.5em;
  -webkit-transition: 0.15s;
  transition: 0.15s;
  width: 2.75rem;
}

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes appear {
  from {
    -webkit-transform: translate(-50%, -40%);
            transform: translate(-50%, -40%);
    opacity: 0;
  }

  to {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes appear {
  from {
    -webkit-transform: translate(-50%, -40%);
            transform: translate(-50%, -40%);
    opacity: 0;
  }

  to {
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    opacity: 1;
  }
}

dialog::-ms-backdrop {
  animation: fade-in 200ms 1 both;
}

dialog::backdrop,
.dialog:not([aria-hidden='true']) > .dialog-overlay {
  -webkit-animation: fade-in 200ms 1 both;
          animation: fade-in 200ms 1 both;
}

@media (min-width: 31.25em) {

.dialog:not([aria-hidden='true']) > .dialog-content {
    -webkit-animation: appear 400ms 150ms 1 both;
            animation: appear 400ms 150ms 1 both
}
  }

/* app layout (tickets/cart/checkout) */

.ecomm-container {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column
}

.ecomm-container.items-center > *{
  max-width: 100%;
}

@media (min-width: 45em){

.ecomm-container{
    -ms-flex-direction: row;
    flex-direction: row;
}
  }

@media (max-width: 44.99em){

.ecomm-container{
    padding-bottom: 1.5rem;
}
  }

.ecomm-header__logo {
  margin: .5rem;
  background-position: 100%;
  background-repeat: no-repeat;
  height: 33px;
  height: var(--ecomm-header-logo-height);
}

@media (max-width: 59.999em) {

.ecomm-header__logo {
    background-image: url(/packs/static/images/shedd-logo-dda006473d171198b510.svg);

    background-size: contain;

    width: 126px;

    width: var(--mobile-logo-width)
}
  }

@media (min-width: 60em) {

.ecomm-header__logo {
    background-image: url(/packs/static/images/shedd-logo-flat-1f8a830c66afee32f2c7.svg);

    width: 213px;

    width: var(--ecomm-desktop-header-logo-width);

    margin-right: 2rem
}
  }

.ecomm-main {
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
}

@media (min-width: 45em){

.ecomm-main {
    width: 65%;

    padding-left: 2.5rem;

    padding-right: 2.5rem;

    padding-bottom: 3.75rem
}
  }

.ecomm-main__inner {
  position: relative;
}

@media (min-width: 45em){

.ecomm-main__inner {
    margin-left: auto;

    width: 100%;

    max-width: 45.625rem
}
  }

.ecomm-sidebar {
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 1.25rem
}

.ecomm-sidebar.items-center > *{
  max-width: 100%;
}

.ecomm-sidebar{
  -ms-flex-order: -1;
      order: -1;
}

@media (min-width: 45em){

.ecomm-sidebar{
    -ms-flex-order: initial;
        order: initial;

    -webkit-box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.25);

            box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.25);

    width: 35%;

    display: -ms-flexbox;

    display: -webkit-box;

    display: flex;

    --tw-bg-opacity: 1;

    background-color: rgba(247, 245, 243, 1);

    background-color: rgba(247, 245, 243, var(--tw-bg-opacity));

    padding-left: 2rem;

    padding-right: 2rem;

    padding-top: 3.75rem;

    padding-bottom: 3.75rem;
}
  }

.gpp-ecomm-sidebar {
  margin-bottom: 2rem;
  -ms-flex-direction: column;
  flex-direction: column
}

.gpp-ecomm-sidebar.items-center > *{
  max-width: 100%;
}

.gpp-ecomm-sidebar{
  -ms-flex-order: -1;
      order: -1;
}

@media (min-width: 45em){

.gpp-ecomm-sidebar{
    -ms-flex-order: initial;
        order: initial;

    -webkit-box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.25);

            box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.25);

    width: 35%;

    margin-bottom: 0;

    display: -ms-flexbox;

    display: -webkit-box;

    display: flex;

    --tw-bg-opacity: 1;

    background-color: rgba(247, 245, 243, 1);

    background-color: rgba(247, 245, 243, var(--tw-bg-opacity));

    padding-left: 2rem;

    padding-right: 2rem;

    padding-top: 3.75rem;

    padding-bottom: 3.75rem;
}
  }

@media (min-width: 45em){

.ecomm-sidebar__inner {
    margin-right: auto;

    width: 100%;

    max-width: 21.875rem
}
  }

.payment-component_error {
  color: red;
}

.adyen-checkout__payment-method {
  /* Payment method container */
}

.adyen-checkout__payment-method--selected {
  /* Payment method that has been selected */
}

.adyen-checkout__payment-method__header {
  /* Payment method icon and name */
}

.adyen-checkout__payment-method__radio {
  /* Radio button in payment method header */
}

.adyen-checkout__payment-method__radio--selected {
  /* Selected radio button in payment method header */
}

.adyen-checkout__payment-method__name {
  /* Payment method name in the payment method header */
}

.adyen-checkout__spinner__wrapper {
  /* Spinning icon */
}

.adyen-checkout__button {
  /* Buttons */
}

.adyen-checkout__button--pay {
}

.adyen-checkout__field {
  /* Form field container */
}

.adyen-checkout__label {
  /* Form label container */
}

.adyen-checkout__label__text {
  /* Text element inside the form label container */
}

.adyen-checkout__input {
  /* Input fields */
}

.adyen-checkout__input--error {
  /* Error state for the input fields */
}

.adyen-checkout__error-text {
  /* Error message text */
}

.adyen-checkout__card__cardNumber__input {
  /* Input field for the card number */
}

.adyen-checkout__field--expiryDate {
  /* Input field for the expiry date */
}

.adyen-checkout__field__cvc {
  /* Input field for the CVC security code */
}

.adyen-checkout__card__holderName {
  /* Input field for cardholder name */
  /*font-size: 26px;*/
}

.adyen-checkout__checkbox__input {
  /* Checkboxes */
}

.adyen-checkout__checkbox__label {
  /* Checkbox labels */
}

.adyen-checkout__radio_group__input {
  /* Radio buttons */
}

.adyen-checkout__dropdown__button {
  /* Dropdown button showing list of options */
}

.adyen-checkout__dropdown__list {
  /* Dropdown list */
}

.adyen-checkout__dropdown__element {
  /* Elements in the dropdown list */
}

.adyen-checkout__link {
  /* Links */
}

/* This overrides the vertical-align: bottom that's in the resets.css file */

.adyen-checkout__card__brands img {
  vertical-align: top;
}


/*# sourceMappingURL=ecommerce-698825ad.css.map*/