/**
 * @file    auth-modals.css
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Sept. 2024
 */

.auth-modal {
  padding: 0;
  width: 460px;
  box-shadow:
    rgba(0, 0, 0, 0.2) -15px 20px 14px,
    rgba(0, 0, 0, 0.3) 0px 5px 10px;
  margin-bottom: 120px;
  min-width: 335px;
  background-color: white;

  @media only screen and (max-width: 640px) {
    margin: 0 20px;
    height: auto;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 100%;
    height: 40px;
  }

  label {
    position: relative;
    display: inline-block;
    background-color: white;
    line-height: 1em;
  }

  .content-padding {
    padding: 30px;
  }

  .form-fields {
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 10px;
    flex-direction: column;
  }

  .form-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-wrap: nowrap;
  }

  .form-field-message-container {
    display: flex;
    gap: 10px;

    span {
      font-size: .75rem;
      font-style: italic;
    }
  }

  #login-opts {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
  }

  #login-opts a {
    font-size: 14px;
    position: relative;
    top: 2px;
  }

  #login-opts > div {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
  }

  .buttons-row {
    margin-top: 1.75em;
    width: 100%;
    display: flex;
    justify-content: space-between;

    @media only screen and (max-width: 500px) {
      gap: 20px;
    }
  }

  .provider-box {
    margin-top: 1em;
  }

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

  .provider-box .button_to {
    width: auto;
    padding: 0;
    margin: auto;
  }

  .modal-header {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;  
    width: 100%;
    max-height: 80px;
    background-color: var(--primary-hue-main);
  
    #dcp-logo {
      height: 60px;
      margin:0;
    }
  }
}


#user-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  #edit-user {
    margin-bottom: 0;
  }

  #delete-user {
    display: block;
    text-align: center;
    
    p {
      font-size: 18px;
    }
    form {
      margin: 20px auto;
    }
    input {
      background-color: var(--error-hue);
      border-color: var(--error-hue);
    }
  }
}
/**
 * @file    checkout-and-payout.css
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Sept. 2024
 */

.wrapper {
  #dcp-loading-overlay {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    img {
      width: 100px;
    }
  }
}

#payouts-page,
#checkouts-page {
  background-color: white;
  width: clamp(360px, 100vw, 700px);
  position: relative;
  font-size: 14px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  input[type=text],
  input[type=email],
  input[type=password] {
    filter: none; /* remove autocomplete yellow in firefox */
    width: 100%;
    font-size: 16px;
  }

  select {
    width: 100%;
  }

  input[type="number"] {
    width: 100%;
    font-size: 16px;
  }

  section {
    margin-top: 30px;
  }

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

  /* Header */
  .header-banner {
    min-height: 75px;
    background-color: var(--primary-hue-main);
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    padding-left: 30px;

    h1 {
      color: white;
      font-size: 1.5rem;
      font-weight: 500;
    }
  }

  /* Form Content */
  .bank-account-container {
    grid-column: span 2;
  }

  #bank_account {
    width: 100%;
  }
  
  .credit-price-container {
    display: flex;
    gap: 20px;
    grid-column: span 2;
  }

  .input-field {
    position: relative;
  }
  
  .form-content {
    padding: 0 30px 30px 30px;
  }

  legend, .braintree-heading  {
    color: var(--content-hue-main);
    font-weight: 500;
    margin: 0 0 20px 0;
    font-size: 24px;
  }

  .alert {
    color: red;
    font-weight: bold;
    margin-top: 30px;
  }

  .price-input {
    font-family: "Berkeley", Courier, monospace;
  }

  .swap-container {
    padding: 0;
    display: flex;
    align-items: center;

    img {
      filter: var(--primary-hue-main-filter);
      width: 40px;
    }
  }

  .form-label {
    top: -7px;
    left: 5px;
    position: absolute;
    text-wrap: nowrap;
    z-index: initial;
    background: white;
    padding: 0 5px;
  }

  /* Save Information */
  .save-information {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5px;
  }

  /* Brain Tree Embedded Content */
  #bt-drop-in-wrapper {
    margin-top: 30px;
    position: relative;
    z-index: 0;
  }

  /* Totals */
  .totals-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #f3f4f4;
    padding: 20px;

    .total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      @media only screen and (max-width: 500px) {
        align-items: start;
        flex-direction: column;
      }
    }

    output {
      display: flex;
      justify-content: space-between;
      width: clamp(180px, 100%, 250px);
      font-size: 1.25rem;
      @media only screen and (max-width: 500px) {
        width: 100%;
      }
    }

    label {
      font-size: 1rem;
    }

    .total-row:last-child :is(label, output) {
      font-weight: bold;
    }

    output {
      font-family: "Berkeley", Courier, monospace;
    }
  }

  /* No Payment Error Message */
  #no-payment-error {
    display: none;
  }

  /* Braintree */
  
  /* Form Actions */
  .actions {
    display: flex;
    justify-content: flex-end;
  }

  /* Error Messages */
  .input-error-message {
    position: absolute;
    bottom: calc(-100% - 2px);
    right: 0;
    color: var(--error-hue);
    height: 100%;
    opacity: 0;
    transform: scale(0);
    text-align: right;
    transition: opacity;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
    font-size: .75rem;
  }

  .input-error-message-active {
    transform: scale(1);
    opacity: 1;
  }
}
#cookie-consent-container {
  position: fixed;
  bottom:0;
  left:0;
  right:0;
  min-height: 140px;
  height: auto;
  background-color: #0e243980;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  padding: 0 40px;
  min-width: 335px;
  z-index: 5;

  @media only screen and (max-width: 768px) {
    flex-direction: column;
    padding: 40px;
    gap: 20px;
  }

  @media only screen and (max-width: 640px) {
    background-color: #0e2439f2;
    padding: 40px 20px;
  }

  .cookie-consent-notice {
    font-size: 1rem;
    color: white;
    margin:0;
    max-width: 810px;
    text-align: left;
    line-height: 19px;

    @media only screen and (max-width: 640px) {
      text-align: center;  
    }
  }

  .cookie-consent-btn {
    color: white;
    background: var(--primary-hue-main);
    margin:0;
    padding:10px 20px;
    border: none;
    width: auto;
    min-height: 50px;
    font-weight: bold;
    height: auto;
    font-size: 1rem;
    min-width: 200px;
  }
}
/**
 * @file    dcp-style.css - Top-Level CSS for all DCP applications, static pages, etc.
 *          Loosely based on Portal's index.css in July 2024. That code was by Alex
 *          Huctwith and Danny Akbarzadeh.
 *
 * @note    Do not link directly to this file; link to dcp-style-branded instead. That file will load
 *          this file, after applying brand-specific styles.
 *
 * @author  Wes Garland, wes@distributive.network
 * @author  Kevin Yu, kevin@distributive.network
 * @date    July 2024
 */

/* @font-face {
  font-family: "Proxima Nova";
  src: url(/../fonts/proxima-nova.otf);
  font-weight: normal;
}

@font-face {
  font-family: "Source Code Pro";
  src: url(/../fonts/source-code-pro/static/SourceCodePro-Medium.ttf);
  font-weight: normal;
} */

:root {
  --primary-hue-main:     #1aa473;
  --primary-hue-light:    #1aa373cc; 
  --primary-hue-lighter:  #1aa47380;
  --primary-hue-lightest: #1aa47333;
}

:root, .dcp-base-font {
  font-family: "Proxima Nova", sans-serif;
  font-size: 16px;
  color: #222;
}

BODY {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: white;
}

/* Remove built-in form typography styles. */
INPUT, BUTTON, TEXTAREA, SELECT {
  font: inherit;
  box-sizing: border-box;
}

INPUT:not([type="radio"]), TEXTAREA {
  border-radius: 0;
}

INPUT:not([type="radio"]):not([type="checkbox"]), TEXTAREA {
  -webkit-appearance: none;
}

/* Remove grey background on <select/> tags */
SELECT {
  background: transparent;
}

/* Apperance for checkboxes, radio buttons */
INPUT[type="checkbox"],
INPUT[type="radio"   ] {
  height: 1em;
}

/* Appearance for all buttons */
INPUT[type="submit"],
INPUT[type="reset" ],
INPUT[type="button"],
BUTTON {
    position: relative;
  height:  35px;
  padding: 0 35px;
  border:  solid 1px var(--primary-hue-main);
  width: fit-content;
  min-width: 121px;
  
  background-color: white;
  font-size:        0.875rem;
  font-weight:      bold;
  color: var(--primary-hue-main);

  cursor: pointer;
}

/* Appearance for all buttons' tab-focus */
INPUT[type="submit"]:focus-visible, 
INPUT[type="reset" ]:focus-visible,
INPUT[type="button"]:focus-visible,
BUTTON:focus-visible {
  outline:          2px solid var(--primary-hue-lighter);
  outline-offset:   2px;
  border-radius:    0.5px;

  z-index: 1;
}

/* Appearance for non-primary buttons */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"][primary="false"],
INPUT[type="reset" ],
INPUT[type="button"],
BUTTON {
  background-color: white;
  color: var(--primary-hue-main);
}

/* Appearance for non-primary buttons being hovered */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit" ][primary="false"]:hover,
INPUT[type="reset"                   ]:hover,
INPUT[type="button"                  ]:hover,
BUTTON:hover {
  background-color: var(--primary-hue-lightest);
}

/* Appearance for non-primary button pre-activation */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit" ][primary="false"]:focus-visible, 
INPUT[type="reset"                   ]:focus-visible,
INPUT[type="button"                  ]:focus-visible,
BUTTON:focus-visible {
  background-color: var(--primary-hue-lightest);
}

/* Appearance for non-primary button activation */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"][primary="false"]:active,
INPUT[type="reset"                  ]:active,
INPUT[type="button"                 ]:active,
BUTTON:active {
  background-color: var(--primary-hue-lighter);
  z-index: 2;
}

/* Appearance for primary buttons */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"],
INPUT[type="button"][primary],
BUTTON[              primary] {
  background-color: var(--primary-hue-main);
  color: white;
}

/* Appearance for primary button hover */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"         ]:hover,
INPUT[type="button"][primary]:hover,
BUTTON[primary              ]:hover {
  background-color: var(--primary-hue-lighter);
}

/* Appearance for primary button pre-activation */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"         ]:focus-visible,
INPUT[type="button"][primary]:focus-visible,
BUTTON[primary              ]:focus-visible {
  background-color: var(--primary-hue-lighter);
}

/* Appearance for primary button activation */
/* Note INPUT[type="submit"] is expected to be a primary button by default */
INPUT[type="submit"         ]:active,
INPUT[type="button"][primary]:active,
BUTTON[primary              ]:active {
  background-color: var(--primary-hue-light);
}

/* Appearance for disabled button */
INPUT[type="submit"][disabled],
INPUT[type="reset" ][disabled],
INPUT[type="button"][disabled],
BUTTON[              disabled],
INPUT[type="submit"][disabled]:hover,
INPUT[type="reset" ][disabled]:hover,
INPUT[type="button"][disabled]:hover,
BUTTON[              disabled]:hover,
INPUT[type="submit"][disabled]:focus-visible,
INPUT[type="reset" ][disabled]:focus-visible,
INPUT[type="button"][disabled]:focus-visible,
BUTTON[              disabled]:focus-visible,
INPUT[type="submit"][disabled]:active,
INPUT[type="reset" ][disabled]:active,
INPUT[type="button"][disabled]:active,
BUTTON[              disabled]:active {
  background-color: #ddd;
  border-color:     #aaa;
  color:            #999;
  
  cursor: not-allowed;
}

BUTTON[disabled] > * {
  pointer-events: none;
}

/* Appearance for following input types */
INPUT[type="password"],
INPUT[type="email"   ],
INPUT[type="number"  ],
INPUT[type="search"  ],
INPUT[type="tel"     ],
INPUT[type="url"     ],
INPUT[type="text"    ],
SELECT {
  height: 35px;
  border: solid 1px #ccc;
  padding-left: 15px;
  font-size: 0.875rem;
}

INPUT[type="number"] {
  -moz-appearance: textfield;
}

/* Appearance for following input types' placeholder */
INPUT[type="password"]::placeholder,
INPUT[type="email"   ]::placeholder,
INPUT[type="number"  ]::placeholder,
INPUT[type="search"  ]::placeholder,
INPUT[type="tel"     ]::placeholder,
INPUT[type="url"     ]::placeholder,
INPUT[type="text"    ]::placeholder {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, .5);
}

/* Appearance for following input types', select, and textarea pre-activation */
INPUT[type="date"    ]:focus-visible,
INPUT[type="password"]:focus-visible,
INPUT[type="email"   ]:focus-visible,
INPUT[type="number"  ]:focus-visible,
INPUT[type="search"  ]:focus-visible,
INPUT[type="tel"     ]:focus-visible,
INPUT[type="url"     ]:focus-visible,
INPUT[type="text"    ]:focus-visible,
SELECT:focus-visible,
textarea {
  border-color: black;
  outline: none;
}

/* Most of the INPUT elements etc are box-sizing border-box, but border-box makes it extraordinarily
 * difficult to align checkboxes. This rule is a bug fix to let us right-align with other buttons
 * and still maintain the desired appearance.
 */
INPUT[type="checkbox"] {
  position:     relative;
  box-sizing:   border-box;
  width:        1rem;
  height:       1rem;
  padding:      0;

  cursor: pointer;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  border: 1px solid #8a8a8a;
  border-radius: 0;
  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-color: var(--primary-hue-main);
  }
}

/* Appearance for following input types for tab-focus */
INPUT[type="checkbox"]:focus-visible,
INPUT[type="radio"   ]:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-hue-lighter);
  outline: none;
}
INPUT[type="file" ]:focus-visible {
  outline:        2px solid var(--primary-hue-lighter);
  outline-offset: 2px;

  border-radius: .5px;
}

/* Basic appearance for fixed-width font elements */
PRE, TT, CODE {
  font-family: "Source Code Pro", monospace;
}

/* Basic appearance for headings */
H1, H2, H3 {
  color: #3a3a3a;
}

/* Basic appearance for hyperlinks */
A:link {
  color: var(--primary-hue-main);
}

A:visited {
  color: var(--hue-lighter);
}

A:hover {
  color: var(--hue-darker);
}

A:visited,
A:hover,
A:active {
  text-decoration: underline;
}

/* Appearance for link pre-activation */
A:focus-visible {
  outline:        2px solid var(--primary-hue-lighter);
  outline-offset: 2px;

  border-radius: .5px;
}

/* Class for elements holding a DCP Address */
.dcp-address {
  font-family: "Source Code Pro", monospace;
  font-size: 0.8em;
}

/* Class for elements holding a DCC amounts */
.dcp-amount {
  font-family: "Source Code Pro", monospace;
  font-weight: bold;
}
.dcp-amount::after {
  content: '\002287';
}

/* Class for elements which show the DCP logo or the brand logo */
.dcp-logo,
.brand-logo {
  background-image:  url(/../img/dcp-logo.svg);
  background-size:   contain;
  background-repeat: no-repeat;
  margin:  0;
  padding: 0;
}
/**
 * @file    error.css
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Sept. 2024
 */

#error_explanation {
  color: var(--error-hue);
  font-size: 1rem;
  text-align: left;
  line-height: normal;
  display: block;
}

.error-list {
  margin: 0 0 5px 0;
}

.error-list p {
  margin-bottom: 10px;
  font-weight: bold;
}

.error-list UL {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  margin-bottom: 10px;
}

.error-list li {
  list-style-type: disc;
}

.login-error {
  font-weight: bold;
  margin-bottom: 10px;
}

#form-area .alert {
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
}

body[alert="true"] p.alert {
  position: fixed;
  display: inline-block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  border: 4px solid #bfe8dc;
  outline: 1em solid white;
  border-radius: 0;
  background-color: white;
  padding: 2em;
  box-shadow: 0 0 400px 300px white;
}

/* Add a close-x */
body[alert="true"] p.alert:after {
  position: absolute;
  top: 0;
  right: 0;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-block;
  content: "\00d7";
  padding: 0.25em;
  pointer-events: initial;
  cursor: pointer;
}

p.error-message {
  text-align: center;
}

body[alert="true"] {
  pointer-events: none;
}

.field_with_errors {
  width: 100%;
}
/**
 * @file    footer.css
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Sept. 2024
 */

#bottom-bar h6#vision {
  font-family: "Courier New";
  font-weight: bold;
}

#bottom-bar {
  bottom: 0;
  position: fixed;
  padding: 0.57%;
  width: 100%;
  font-size: 18px;
  background-color: #f5f5f5;
}

#bottom-bar-content {
  opacity: 0.73;
  width: 100%;
  padding-left: 32px;
}

#bottom-bar-content A {
  padding-left: 0;
  padding-right: 1em;
  line-height: 1.5;
}

#bottom-bar-content h6 {
  float: right;
  padding-right: 32px;
  font-size: 18px;
  color: var(--content-hue-main);
  margin-bottom: 0;
  line-height: 1.5;
}
/**
 * @file    login.css
 *
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Jul. 2024
 */

#login-container {
  .login-opts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.7em;
    margin-bottom: -30px;
    font-size: 1rem;
    color: var(--content-hue-main);
  }

  .third-party-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 30px;
    position: relative;

    .third-party-line {
      margin: 0;
      background-color: #e5e5e5;
      height: 1px;
      position: absolute;
      top: 0;
      left: -30px;
      right: -30px;
    }

    .sign-in-with {
      padding: 0;
      margin: 0;
      font-size: 0.875rem;
      top: initial;
      left: initial;
      margin: 10px 0;
    }

    .provider-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0;

      @media only screen and (max-width: 640px) {
        flex-direction: column;
        gap: 5px;
      }
    }

    .third-party-btn {
      border: 1px solid var(--content-hue-main);
      background: transparent;
      width: 120px;
      max-width: none;
      padding: 0 0 0 10px;
      gap: 10px;
      display: flex;
      justify-content: start;
      align-items: center;
      box-sizing: border-box;

      @media only screen and (max-width: 640px) {
        width: 100%;
      }

      &:hover {
        background-color: #8a8a8a26;
      }
    }

    .google-icon,
    .gitlab-icon,
    .github-icon {
      width: 26px;
      height: 26px;
      object-fit: contain;
    }
  }
}
#not-found {
  background-color: white;
  width: 460px;
  margin: auto;
  margin-inline: auto; 
  padding: 60px 30px;
  border-radius: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  
  h1 {
    margin-bottom: 0;
  }
}
/**
 * @file    web-emails.css
 * @author  Kevin Yu <kevin@distributive.network>
 * @date    Sept. 2024
 */

#checkouts-web-email,
#payouts-web-email {
  background-color: white;
  width: 100%;
  max-width: 600px;
  padding-bottom: 60px;
  margin-top: 100px;
  border-radius: 0.3rem;
  margin: 30px;
  min-width: 350px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

  @media only screen and (max-width: 678px) {
    table:first-child {
      padding: 0 30px;
    }
  }
  @media only screen and (max-width: 500px) {
    table:first-child {
      padding: 0;
    }
  }

  body,
  a,
  span,
  td {
    font-family: arial;
  } 

  body,
  a {
      color: #3e3f3e;
  }

  td {
    font-size: 14px;
    color: #3e3f3e;
    vertical-align: top;
  }

  .footer div,
  .footer a,
  .footer td {
    font-size: 11px !important;
  }

  table {
    border-collapse: separate;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }

  .break-text {
    word-break: break-all;
  }
  .break-word {
    word-break: break-word;
  }

  /* Responsive CSS */
  @media screen and (max-width: 640px) {
    .footer div,
    .footer a,
    .footer td {
      font-size: 9px !important;
    }
  }
}
/**
 * @file    index.css - Global style for the portal
 *
 * @author  Alex Huctwith    <alex@distributive.network>
 *          Danny Akbarzadeh <danny@distributive.network>  
 *          Kevin Yu         <kevin@distributive.network>  
 *
 *          Design Philosophy Guide:
 *          - Reduce developer comprehension time
 *          - Reduce the level of css-variable indirection
 *          - Give CSS variables name good semantic meaning
 *          - Use CSS variables to reduce redundancy and improve semantics
 *
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS files in this directory. It is generally better to create a new
 * file per style scope.
 *


 */

:root {
  /* ---------------------------------- Customizable Brand Variables ---------------------------------- */

  /* The filter equivalents can be generated using a tool like CSS Filter Generator: https://codepen.io/sosuke/pen/Pjoqqp */
  --primary-hue-main-filter: invert(37%) sepia(90%) saturate(1126%)
    hue-rotate(134deg) brightness(94%) contrast(103%); /* primary-hue-main */

  --brand-logo: url(/assets/distributive-banner.png);

  --gradient-hue-top:    #0e2539;
  --gradient-hue-bottom: #366d64;
  /* ---------------------------------- DCP-Auth Default Variables ---------------------------------- */
  --content-hue-main:  #8a8a8a;
  --content-hue-light: #c4c4c480;
  --content-hue-dark:  #3a3a3a;

  --error-hue: #d62828;

  --disabled-hue: #e5e5e5;
}

/* Proxima Nova Font Faces */
@font-face {
  font-family: "Proxima Nova";
  src: font-url(/assets/fonts/proxima-nova-bold.otf);
  font-weight: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: font-url(/assets/fonts/proxima-nova-bold.otf);
  font-weight: bold;
}

/* Berkeley Font Faces */
@font-face {
  font-family: "Berkeley";
  src: font-url(/assets/fonts/berkeley-mono-regular.woff);
  font-weight: normal;
}

@font-face {
  font-family: "Berkeley";
  src: font-url(/assets/fonts/berkeley-mono-bold-italic.woff);
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Berkeley";
  src: font-url(/assets/fonts/berkeley-mono-bold.woff);
  font-weight: bold;
}

@font-face {
  font-family: "Berkeley";
  src: font-url(/assets/fonts/berkeley-mono-italic.woff);
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
}

HTML {
  min-height: 100%;
  width: 100%;
  padding: 0;
  background:
    url(/assets/login-dots.png) right -10px / contain no-repeat,
    linear-gradient(
      125deg,
      var(--gradient-hue-top) 14%,
      var(--gradient-hue-bottom)
    );

  @media only screen and (max-width: 1280px) {
    background-size: 1400px;
  }

  @media only screen and (max-width: 768px) {
    background-size: 1200px;
  }
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: none;
  height: 100%;
  width: 100%;
  font-family: "Proxima Nova", sans-serif;
}

/* Remove autofill background color in Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #000; /* Optional: ensure text color remains consistent */
}

a {
  color: var(--content-hue-main);
  text-decoration: none;
}

label {
  font-size: 0.875rem;
}

.auth-title {
  text-align: center;
  font-size: 1.5rem;
  margin: 0 0 30px 0;
  font-weight: bold;
  text-transform: capitalize;
}

.auth-message {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.input-field {
  width: 100%;
  position: relative;

  label {
    color: var(--content-hue-main);
    font-weight: bold;
    font-size: 12px;
  }
}

.form-fields-container {
  display: grid;  
  grid-template-columns: 1fr 1fr;
  gap: 20px;

  @media only screen and (max-width: 500px) {
    grid-template-columns: 1fr;
  }
}

.btn {
  margin-top: 10px;
}

.brand-banner {
  background: var(--brand-logo) center / contain no-repeat;
  width: 210px;
  height: 47px;
  position: absolute;
  top: 30px;
  left: 40px;
}

#brand-logo {
    height: 30px;
    margin: 0;
    content:var(--brand-logo);
}

#application-container {
  height: 100%;
  width: 100%;
  margin: auto;
  font-size: 24px;
  min-width: 320px;
}

@media only screen and (max-width: 700px) {
  #bottom-bar {
    display: none;
  }
}

#yielded {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: start;
  padding: 110px 0;

  @media only screen and (max-height: 750px) {
    /* to ensure we will be able to scroll down enough to hit the buttons on a short screen */
    margin-bottom: 120px;
  }

  @media only screen and (max-width: 640px) {
    align-items: flex-start;
  }
}

#dcp-logo {
  height: 80px;
  margin-bottom: 0.5em;

  @media only screen and (max-height: 750px) {
    transform: scale(1.01);
    margin-top: 8%;
  }

  @media only screen and (max-height: 500px) {
    margin-top: 5%;
  }
}

@media only screen and (max-height: 750px) {
  #yielded {
    margin-bottom: 120px;
  }
}