@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-Bold.ttf");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-BoldItalic.ttf");
  font-weight: Bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-Italic.ttf");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-Medium.ttf");
  font-size: medium;
  font-display: swap;
}
@font-face {
  font-family: DMSans;
  src: url("../omega/fonts/DMSans-MediumItalic.ttf");
  font-size: medium;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: FredokaOne;
  src: url("../omega/fonts/FredokaOne-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: url("../omega/fonts/Outfit-VariableFont_wght.ttf");
  font-display: swap;
}
@font-face {
  font-family: RalewayItalic;
  src: url("../omega/fonts/Raleway-Italic-VariableFont_wght.ttf");
  font-display: swap;
}
@font-face {
  font-family: Raleway;
  src: url("../omega/fonts/Raleway-VariableFont_wght.ttf");
  font-display: swap;
}
@font-face {
  font-family: Kalam;
  src: url("../omega/fonts/Kalam-Regular.ttf");
  font-display: swap;
}
@font-face {
  font-family: Kalam;
  src: url("../omega/fonts/Kalam-Bold.ttf");
  font-weight: bold;
  font-display: swap;
}
@font-face {
  font-family: Kalam;
  src: url("../omega/fonts/Kalam-Light.ttf");
  font-weight: light;
  font-display: swap;
}
/*** GLOBAL VARIABLES ***/
:root {
  --tsp-dark: #2b2b48;
  --tsp-primary: #6367b6;
  --tsp-secondary: #8c7dd0;
  --tsp-secondary--accent: #3a3f9a;
  --tsp-secondary--light: #d5c1fa;
  --tsp-tertiary--first: #95dcfb;
  --tsp-tertiary--second: #d87fb9;
  --tsp-light: #f9f8fa;
  --tsp-shadow-dark: #a4a7dd;
  --tsp-shadow-light: #efe7ff;
}

/*** HEADER ***/

#give-form-1907-wrap .give-form-header {
  display: none;
}

#give-form-1907-wrap p {
  font-family: "DMSans";
}

#give-form-1907-wrap .give-form-title {
  font-family: "Outfit";
}

/*** DONATION BUTTONS ***/
#give-form-1907-wrap button.give-donation-level-btn {
  border-radius: 0;
  background: white;
  color: var(--tsp-secondary--accent);
  padding: 0.1rem !important;
  box-shadow: 2px 2px var(--tsp-secondary);
}

#give-form-1907-wrap button.give-donation-level-btn:hover {
  color: white;
  background-color: var(--tsp-secondary--accent);
}

#give-form-1907-wrap .give-donation-amount.form-row-wide {
  border-radius: 0;
  border-color: var(--tsp-secondary--accent);
  box-shadow: 2px 2px var(--tsp-secondary);
}

#give-form-1907-wrap h2.give-amount-heading {
  text-align: center;
  font-family: "DMSans";
  color: var(--tsp-secondary--accent);
}

#give-form-1907-wrap .give-donation-amount span,
#give-form-1907-wrap .give-donation-amount input {
  color: var(--tsp-secondary--accent);
}

/*** FORM ***/
#give-form-1907-wrap .give_checkout_user_info {
  font-family: "DMSans";
  color: var(--tsp-secondary--accent) !important;
}

#give-form-1907-wrap .give-form-section #give-first-name-wrap input,
#give-form-1907-wrap .give-form-section #give-last-name-wrap input,
#give-form-1907-wrap .give-form-section #give-email-wrap input,
div#give-card-number-field-1907-1 {
  border-radius: 0 !important;
  border: 2px solid var(--tsp-secondary--accent) !important;
  box-shadow: 3px 3px var(--tsp-secondary) !important;
}

.give-input-field-wrapper,
.give-select,
.give-square-cc-fields,
.give-stripe-single-cc-field-wrap,
:where(.form-row, .give-gateway-details)
  :where(
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    textarea,
    select,
    .give-select,
    .give-stripe-cc-field
  ):not(#give-amount) {
  border-radius: 0 !important;
  border: 2px solid var(--tsp-secondary--accent) !important;
  box-shadow: 3px 3px var(--tsp-secondary) !important;
}

#give-form-1907-wrap
  .give-personal-info-section
  fieldset:not(.ffm-field-container > fieldset)
  legend:first-of-type {
  color: var(--tsp-secondary--accent);
  font-family: "DMSANS";
}

#give-form-1907-wrap p#give-anonymous-donation-wrap {
  color: var(--tsp-secondary--accent);
  font-family: "DMSANS";
}

#give-form-1907-wrap input#give-anonymous-donation {
  border: 1px solid var(--tsp-secondary--accent);
  box-shadow: 2px 2px var(--tsp-secondary);
  margin-right: 0.5rem;
}

#give-form-1907-wrap .give-donation-summary-section {
  font-family: "DMSANS";
}

#give-form-1907-wrap .give-donation-summary-section,
#give-form-1907-wrap .give-donation-summary-section thead,
#give-form-1907-wrap .give-donation-summary-section tfoot,
#give-form-1907-wrap .give-donation-summary-section tbody,
#give-form-1907-wrap
  section.give-form-section.give-payment-details-section
  fieldset,
#give-form-1907-wrap section.give-form-section.give-payment-details-section,
#give-form-1907-wrap #give_cc_fields legend,
#give-form-1907-wrap .give-donation-summary-section .heading,
#give-form-1907-wrap .give-payment-details-section legend:first-of-type {
  font-family: "DMSANS" !important;
  color: var(--tsp-secondary--accent) !important;
}

#give-form-1907-wrap .give-submit-button-wrap input {
  box-shadow: 4px -4px var(--tsp-secondary);
  border-radius: 0;
  font-family: "Outfit";
  font-variation-settings: "wght" 500;
}

#give-form-1907-wrap p.give-amount-description {
  background: var(--tsp-light);
  padding: 1rem;
}

.give-input-field-wrapper.focus,
.give-input-field-wrapper:focus,
.give-select.focus,
.give-select:focus,
.give-square-cc-fields.focus,
.give-square-cc-fields:focus,
.give-stripe-single-cc-field-wrap.focus,
.give-stripe-single-cc-field-wrap:focus,
:where(.form-row, .give-gateway-details)
  :where(
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    textarea,
    select,
    .give-select,
    .give-stripe-cc-field
  ):not(#give-amount).focus,
:where(.form-row, .give-gateway-details)
  :where(
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    textarea,
    select,
    .give-select,
    .give-stripe-cc-field
  ):not(#give-amount):focus {
  outline: 0.125rem solid var(--tsp-tertiary--second);
}

#give-form-1907-wrap .give-personal-info-section #give-email-wrap label,
#give-form-1907-wrap .give-personal-info-section #give-first-name-wrap label,
#give-form-1907-wrap .give-personal-info-section #give-last-name-wrap label,
#give-form-1907-wrap .give-personal-info-section #give-title-wrap label {
  clip: unset;
  border-width: unset;
  height: auto;
  margin: 0 0 0.5rem 0;
  overflow: visible;
  padding: 0px;
  position: relative;
  white-space: nowrap;
  width: auto;
  color: var(--tsp-secondary--accent);
}

#give-form-1907-wrap #give-email-wrap:before,
#give-first-name-wrap:before,
#give-last-name-wrap:before {
  inset-block-end: -1.8125em;
}

.give-receipt-classic .dashboard-link-container {
    display: none;
}

.give-receipt-classic .receipt-sections {
    -webkit-padding-before: clamp(2.375rem,1.3493589744rem + 3.2051282051vw,3rem);
    padding: clamp(2.375rem,1.3493589744rem + 3.2051282051vw,3rem);
    padding-inline: clamp(1.25rem,-3.6730769231rem + 15.3846153846vw,4.25rem);
}

div#tsp-donate--failed {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    text-align: center;
    flex-direction: column;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
.give-receipt-classic {
    border-radius: .5rem;
    margin: 3rem;
}
}

/* Medium devices (tablets, 768px and up) -- bootstrap medium, this is
    where mobile navbar disappears
  */
@media (min-width: 768px) {
  div#give-form-1907-wrap {
    width: 100%;
    display: grid;
  }

  #give-form-1907-wrap form#give-form-1907-1 {
    width: 75%;
    justify-self: center;
  }

  #give-form-1907-wrap .give-form-section {
    padding-bottom: 1.5rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #give-form-1907-wrap form#give-form-1907-1 {
    width: 60%;
    justify-self: center;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  #give-form-1907-wrap form#give-form-1907-1 {
    width: 50%;
    justify-self: center;
  }
}