:root {
    --white: #FFFFFF;
    --black: #0A0A0A;
    --dark-grey: #333333;
    --grey: #5C5C5C;
    --link-grey: #999999;
    --medium-grey: #EBEBEB;
    --light-grey: #FAFAFA;

    --button-gap: 0.45rem;
    --button-black: var(--black);
    --button-black-hover: var(--grey);
    --button-black-active: var(--dark-grey);
    --button-text-color: #FFFFFF;

    --button-green: #5FA186;
    --button-green-hover: #42876D;
    --button-green-active: #396150;

    --button-outline-hover: var(--button-black-hover);
    --button-outline-active: var(--button-black-active);

    --button-outline-light: #d9dce1;

    --button-white: #FAFAFA;
    --button-white-hover: var(--black);


    --button-disabled-grey: var(--medium-grey);
    --button-disabled-text: var(--grey);

    --button-red: #CC5B60;
    --button-red-hover: #BB3A40;
    --button-red-active: #942E32;

    --button-radius: 8px;

    --font-name: "neue-haas-grotesk-display", -apple-system,system-ui,BlinkMacSystemFont,Helvetica,Lato,"Lucida Grande", sans-serif !important;
    --font-medium: var(--font-name);
    --font-regular: var(--font-name);
    --font-bold: var(--font-name);

  }

  body {
    background-color: #FAFAFA;
  }
  
  .button, *[role=button], .button.cta, .button.pink {
    /*RESET DEFAULT STYLING*/
    border: none;
    outline: none;
  
    /*General button styles*/
    font-weight: var(--medium-font-weight) !important;
    text-align: center;
    background-color: var(--button-black);
    border: 1px solid transparent;
    color: var(--button-text-color);
    border-radius: var(--button-radius);
    font-size: 0.875rem;
    text-decoration: none;
    padding: 12px 16px 10px 16px;
    width: fit-content;
    letter-spacing: var(--link-letter-spacing);
    line-height: 1;
    transition: all 250ms ease-in-out;
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap:var(--button-gap);
    white-space: nowrap;
    cursor: pointer;
  }
  
  button i.ico, .button i.ico, *[role=button] i.ico, *[type=button] i.ico, 
  button i.icon, .button i.icon, *[role=button] i.icon, *[type=button] i.icon {
    font-size: 1.35rem;
    position: relative;
    top:-1px;
  }
  
  button:hover, .button:hover, *[role=button]:hover, *[type=button]:not(.toggle-nav):hover, .button.pink:hover {
    background-color: var(--button-black-hover);
    border-color: var(--button-black-hover);
  }
  
  button:active, .button:active, *[role=button]:active, *[type=button]:not(.toggle-nav):active, .button.pink:active,
  button:focus, .button:focus, *[role=button]:focus, *[type=button]:not(.toggle-nav):focus, .button.pink:focus {
    background-color: var(--button-black-active);
  }
  
  /*STYLE THE GREEN BUTTON*/
  
  button.green, .button.green, *[role=button].green, *[type=button].green, .button.save:not(.white), .button.next {
    border-color: transparent !important;
    background-color: var(--button-green) !important;
  }
  
  button.green:hover, .button.green:hover, *[role=button].green:hover, *[type=button].green:hover, .button.save:not(.white):hover, .button.next:hover {
    border-color: transparent;
    background-color: var(--button-green-hover) !important;
  }
  
  button.green:active, .button.green:active, *[role=button].green:active, *[type=button].green:active, .button.save:not(.white):active, .button.next:active,
  button.green:focus, .button.green:focus, *[role=button].green:focus, *[type=button].green:focus, .button.save:not(.white):focus, .button.next:focus {
    border-color: transparent;
    background-color: var(--button-green-active) !important;
  }
  
  /*STYLE THE RED BUTTON*/
  
  button.red, .button.red, *[role=button].red, .button.delete {
    border-color: transparent;
    background-color: var(--button-red);
  }
  
  button.red:hover, .button.red:hover, *[role=button].red:hover, .button.delete:hover {
    background-color: var(--button-red-hover);
  }
  
  button.red:active, .button.red:active, *[role=button].red:active, .button.delete:active,
  button.red:focus, .button.red:focus, *[role=button].red:focus, .button.delete:focus {
    background-color: var(--button-red-active);
  }
  
  /*STYLE THE DISABLED BUTTON*/
  
  button.disabled, .button.disabled, *[role=button].disabled {
    background-color: var(--button-disabled-grey) !important;
    cursor: not-allowed;
    color: var(--button-disabled-text) !important;
    border-color: var(--button-disabled-grey) !important;
  }
  
  button.disabled:hover, .button.disabled:hover, *[role=button].disabled:hover {
    background-color: var(--button-disabled-grey) !important;
    border-color: var(--button-disabled-grey) !important;
  }
  
  button.disabled:active, .button.disabled:active, *[role=button].disabled:active,
  button.disabled:focus, .button.disabled:focus, *[role=button].disabled:focus {
    background-color: var(--button-disabled-grey) !important;
    border-color: var(--button-disabled-grey) !important;
  }
  
  /*STYLE THE OUTLINED BUTTON*/
  
  button.outline, .button.outline, *[role=button].outline, *[type=button].outline {
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black) !important;
  }
  
  button.outline:hover, .button.outline:hover, *[role=button].outline:hover, *[type=button].outline:hover {
    border-color: transparent;
    background-color: var(--button-outline-hover);
    color: var(--white);
  }
  
  button.outline:active, .button.outline:active, *[role=button].outline:active, *[type=button].button.outline:active,
  button.outline:focus, .button.outline:focus, *[role=button].outline:focus, *[type=button].outline:focus {
    background-color: var(--button-outline-active);
    color: var(--white);
  }
  
  
  /*STYLE THE WHITE BUTTON*/
  
  button.white, .button.white, *[role=button].white, *[type=button].white, .button.cancel {
    border-color: var(--button-outline-light);
    color: var(--black);
    background-color: var(--white);
  }
  
  button.white:hover, .button.white:hover, *[role=button].white:hover, *[type=button].white:hover, .button.cancel:hover {
    border-color: var(--button-white-hover);
    background-color: var(--button-white);
  }
  
  .uploadifive-button.button.white.small:hover {
    border-color: var(--button-white-hover) !important;
  }
  
  button.white:active, .button.white:active, *[role=button].white:active, *[type=button].button.white:active, .button.cancel:active,
  button.white:focus, .button.white:focus, *[role=button].white:focus, *[type=button].white:focus, .button.cancel:focus {
    border-color: var(--black);
  }
  
  /*STYLE THE WHITE OUTLINED BUTTON*/
  
  button.white.outline, .button.white.outline, *[role=button].white.outline, *[type=button].white.outline {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
  }
  
  button.white.outline:hover, .button.white.outline:hover, *[role=button].white.outline:hover, *[type=button].white.outline:hover {
    background-color: #FFFFFF1A;
  }
  
  button.white.outline:active, .button.white.outline:active, *[role=button].white.outline:active, *[type=button].button.white.outline:active,
  button.white.outline:focus, .button.white.outline:focus, *[role=button].white.outline:focus, *[type=button].white.outline:focus {
    background-color: var(--button-disabled-active);
    color: var(--white);
  }
  
  
  /*STYLE THE transparent BUTTON*/
  
  button.transparent, .button.transparent, *[role=button].transparent, *[type=button].transparent {
    border-color: transparent;
    color: var(--dark-grey);
    background-color: transparent;
  }
  
  button.transparent:hover, .button.transparent:hover, *[role=button].transparent:hover, *[type=button].transparent:hover {
    border-color: transparent;
    background-color: transparent;
    color: var(--black);
  }
  
  button.transparent:active, .button.transparent:active, *[role=button].transparent:active, *[type=button].button.transparent:active,
  button.transparent:focus, .button.transparent:focus, *[role=button].transparent:focus, *[type=button].transparent:focus {
    background: var(--white);
  }
  
  /*Button specific extra styles*/
  
  .button.small {
    padding: 10px 12px;
    height: 40px;
    min-width:40px;
    margin:0;
    display: inline-flex;
    font-size: 0.875rem;
  }
  
  .button.small + .button.small:not(.left) {
    margin-left: 0.45rem;
  }

  .button.small i.ico {
    font-size: 1rem !important;
  }
  
  .button.wider {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .button.wide {
    width: 100%;
    max-width: 450px;
  }
  
  .button.big, .button.large {
    font-size: 1.12rem;
    padding: 14px 23px;
    [class^=icon-], [class*=" icon-"] {
      font-size: 1rem;
    }
  }
  
  .button.wider.cancel {
    width: 76px;
  }
  
  .stepbar .button, .topbar .button {
      font-size: .875rem;
      height:38px;
  }
  
  .stepbar .button:not(.wider) {
      padding: 8px 16px;
  }
  
  .button [class^=icon-], .button [class*=" icon-"] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    align-self: center;
    font-size: 0.8rem;
  }
  
  .button [class^=icon-]::before, .button [class*=" icon-"]::before {
    align-self: center;
    margin-right: -1px;
  }
  
  .rotate90, button i.ico.rotate90, .button i.ico.rotate90, *[role=button] i.ico.rotate90, *[type=button] i.ico.rotate90 {
    transform: rotate(45deg) !important;
    rotate: 45deg;
  }
  
  a:has(.button) {
    text-decoration: none !important;
  }
  
  .buttons-gap {
    gap: 0.45rem;
  }
  
  .mt {
    margin-top: 1rem;
  }
  
  .button.center {
    margin-left:auto;
    margin-right: auto;
  }
  
  .button.left {
    float:left !important;
    min-height: 44px;
  }
  
  .button.right {
    margin-left: 0.45rem !important;
  }
  
  .uploadifive-button.button.white, .uploadifive-button.button.white * {
    color: var(--black);
    border-color: var(--button-outline-light);
    border-width: 1px;
    border-radius: var(--button-radius);
    text-shadow: none;
    font-family: var(--font-name);
  }

  .uploadifive-queue-item .progress-bar {
    background-color: #5FA186 !important;
    height: 10px !important;
    width: 0;
    }

    .uploadifive-queue-item {
      left: 0 !important;
      padding: 0 !important;
      border-bottom: none !important;
      margin-top: 0 !important;
    }

  .button-spinner {
    background-image: url("/2/img/layout/spinner.gif");
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    padding: 13px;
    position: relative;
    width: auto;
    left: 0;
    z-index: 10;
    filter: brightness(100);
    -webkit-filter: brightness(100);
  }
      
  .sweet-alert {
    font-family: "neue-haas-grotesk-display", -apple-system,system-ui,BlinkMacSystemFont,Helvetica,Lato,"Lucida Grande", sans-serif !important;
  }

  .notification.upgrade {
    background-color: #EAF1F8;
    color:#2E71B5 !important;
    font-size:1.25rem;
  }

  /* === Common reset for checkboxes === */
input[type="checkbox"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  outline: none;
}

/* === Checkbox Styling === */
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  border: 2px solid #000;
  border-radius: 0.25rem;  
  position: relative;
  background-color: #fff; 
  vertical-align: middle;
  margin-right: 0.5rem;
  margin-top: -1px;
}

.switch input[type="checkbox"] {
  width:0;
  position: absolute;
}

/* The “tick” icon, hidden by default */
input[type="checkbox"]::after {
  content: "\e976";
  font-family: 'BetterProposals-2025' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 0.75rem;
  line-height: 1;
  color: #fff;
  transition: transform 0.1s ease-in-out;
}

/* Checked state: fill box black and show tick */
input[type="checkbox"]:checked {
  background-color: #000;
}

input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) scale(1);
}

.row.grid {
all:unset;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}

.grid > [class*="col-"] {
    position:relative;
  }
  
  .grid > .col-1 {
    max-width:unset;
    grid-column: span 1;
  }
  
  .grid > .col-2 {
    max-width:unset;
    grid-column: span 2;
  }
  
  .grid > .col-3 {
    max-width:unset;
    grid-column: span 3;
  }
  
  .grid > .col-4 {
    max-width:unset;
    grid-column: span 4;
  }
  
  .grid > .col-5 {
    max-width:unset;
    grid-column: span 5;
  }
  
  .grid > .col-6 {
    max-width:unset;
    grid-column: span 6;
  }
  
  .grid > .col-7 {
    max-width:unset;
    grid-column: span 7;
  }
  
  .grid > .col-8 {
    max-width:unset;
    grid-column: span 8;
  }
  
  .grid > .col-9 {
    max-width:unset;
    grid-column: span 9;
  }
  
  .grid > .col-10 {
    max-width:unset;
    grid-column: span 10;
  }
  
  .grid > .col-11 {
    max-width:unset;
    grid-column: span 11;
  }
  
  .grid > .grid .col-12 {
    max-width:unset;
    grid-column: span 12;
  }
  

  @media (max-width: 991px) {
    .grid > .col-sm-1 {
        max-width:unset;
        grid-column: span 1;
    }
    .grid > .col-sm-2 {
        max-width:unset;
        grid-column: span 2;
    }
    .grid > .col-sm-3 {
        max-width:unset;
        grid-column: span 3;
    }
    .grid > .col-sm-4 {
        max-width:unset;
        grid-column: span 4;
    }
    .grid > .col-sm-5 {
        max-width:unset;
        grid-column: span 5;
    }
    .grid > .col-sm-6 {
        max-width:unset;
        grid-column: span 6;
    }
    .grid > .col-sm-7 {
        max-width:unset;
        grid-column: span 7;
    }
    .grid > .col-sm-8 {
        max-width:unset;
        grid-column: span 8;
    }
    .grid > .col-sm-9 {
        max-width:unset;
        grid-column: span 9;
    }
    .grid > .col-sm-10 {
        max-width:unset;
        grid-column: span 10;
    }
    .grid > .col-sm-11 {
        max-width:unset;
        grid-column: span 11;
    }
    .grid > .col-sm-12 {
        max-width:unset;
        grid-column: span 12;
    }
}