@adobe/coral-spectrum/coral-component-textfield/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-Textfield {
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 4px;
  padding: 5px 11px 7px 11px;
  text-indent: 0;

  min-width: 48px;
  height: 32px;
  width: 192px;

  vertical-align: top;
  margin: 0;
  overflow: visible;
  font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;

  transition: border-color 130ms ease-in-out, box-shadow 130ms ease-in-out;

  outline: none;

  -webkit-appearance: none;
  -moz-appearance: textfield;
}
._coral-Textfield::placeholder {
    font-weight: 400;
    font-style: italic;
    transition: color 130ms ease-in-out;
    opacity: 1;
  }
._coral-Textfield::-ms-input-placeholder {
    font-weight: 400;
    font-style: italic;
    transition: color 130ms ease-in-out;
    opacity: 1;
  }
._coral-Textfield:lang(ja)::placeholder, ._coral-Textfield:lang(zh)::placeholder, ._coral-Textfield:lang(ko)::placeholder {
       font-style: normal;
    }
._coral-Textfield:lang(ja)::-ms-input-placeholder, ._coral-Textfield:lang(zh)::-ms-input-placeholder, ._coral-Textfield:lang(ko)::-ms-input-placeholder {
       font-style: normal;
    }
._coral-Textfield:hover::placeholder {
      font-weight: 400;
    }
._coral-Textfield:disabled {
    resize: none;
    opacity: 1;
  }
._coral-Textfield:disabled::placeholder {
      font-weight: 400;
    }
._coral-Textfield::-ms-clear {
    width: 0;
    height: 0;
  }
._coral-Textfield::-webkit-inner-spin-button,
  ._coral-Textfield::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
._coral-Textfield:-moz-ui-invalid {
    box-shadow: none;
  }
._coral-Textfield.is-invalid,
  ._coral-Textfield:invalid,
  ._coral-Textfield.is-valid {
    background-repeat: no-repeat;
  }
._coral-Textfield.is-invalid,
  ._coral-Textfield:invalid {
    background-size: 18px 18px;
    background-position: calc(100% - 11px) 6px;
    padding-right: 41px;
  }
._coral-Textfield.is-valid {
    background-size: 12px 12px;
    background-position: calc(100% - 11px) 10px;
    padding-right: 35px;
  }
._coral-Textfield--multiline {
  height: auto;
  min-height: 56px;
  padding: 5px 11px 8px 11px;
  overflow: auto;
}
._coral-Textfield--quiet {
  border-radius: 0px;
  border-width: 0 0 1px 0;
  padding-left: 0;
  padding-right: 0;
  resize: none;
  overflow-y: hidden;
}
._coral-Textfield--quiet.is-invalid,
  ._coral-Textfield--quiet:invalid,
  ._coral-Textfield--quiet.is-valid {
    background-position: 100% 50%;
  }
._coral-Textfield--quiet._coral-Textfield--multiline {
    height: 32px;
    min-height: 32px;
  }

.coral--large ._coral-Textfield {
  border: 1px solid;
  border-radius: 5px;
  padding: 7px 14px 9px 14px;

  min-width: 60px;
  height: 40px;
  width: 240px;
  font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif;
  font-size: 17px;
  line-height: 1.5;

  transition: border-color 130ms ease-in-out, box-shadow 130ms ease-in-out;
}
.coral--large ._coral-Textfield::placeholder {
    font-weight: 400;
    font-style: italic;
    transition: color 130ms ease-in-out;
  }
.coral--large ._coral-Textfield::-ms-input-placeholder {
    font-weight: 400;
    font-style: italic;
    transition: color 130ms ease-in-out;
  }
.coral--large ._coral-Textfield:hover::placeholder {
      font-weight: 400;
    }
.coral--large ._coral-Textfield:disabled::placeholder {
      font-weight: 400;
    }
.coral--large ._coral-Textfield.is-invalid,
  .coral--large ._coral-Textfield:invalid {
    background-size: 22px 22px;
    background-position: calc(100% - 14px) 8px;
    padding-right: 51px;
  }
.coral--large ._coral-Textfield.is-valid {
    background-size: 16px 16px;
    background-position: calc(100% - 14px) 12px;
    padding-right: 45px;
  }
.coral--large ._coral-Textfield--multiline {
  height: auto;
  min-height: 70px;
  padding: 7px 14px 10px 14px;
}
.coral--large ._coral-Textfield--quiet {
  border-radius: 0px;
  border-width: 0 0 1px 0;
  padding-left: 0;
  padding-right: 0;
}
.coral--large ._coral-Textfield--quiet.is-invalid,
  .coral--large ._coral-Textfield--quiet:invalid,
  .coral--large ._coral-Textfield--quiet.is-valid {
    background-position: 100% 50%;
  }
.coral--large ._coral-Textfield--quiet._coral-Textfield--multiline {
    height: 40px;
    min-height: 40px;
  }

.coral--light ._coral-Textfield {
  background-color: rgb(255, 255, 255);
  border-color: rgb(225, 225, 225);
  color: rgb(75, 75, 75);
}
.coral--light ._coral-Textfield::placeholder {
    color: rgb(142, 142, 142);
  }
.coral--light ._coral-Textfield:hover {
    border-color: rgb(202, 202, 202);
    box-shadow: none;
  }
.coral--light ._coral-Textfield:hover::placeholder {
      color: rgb(44, 44, 44);
    }
.coral--light ._coral-Textfield:focus {
    border-color: rgb(20, 115, 230);
  }
.coral--light ._coral-Textfield.focus-ring:not(:active) {
      border-color: rgb(38, 128, 235);
      box-shadow: 0 0 0 1px rgb(38, 128, 235);
    }
.coral--light ._coral-Textfield[disabled] {
    background-color: rgb(234, 234, 234);
    border-color: transparent;
    color: rgb(179, 179, 179);
    -webkit-text-fill-color: rgb(179, 179, 179);
  }
.coral--light ._coral-Textfield[disabled]::placeholder {
      color: rgb(179, 179, 179);
    }
.coral--light ._coral-Textfield.is-invalid,
.coral--light ._coral-Textfield:invalid {
    border-color: rgb(215, 55, 63);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:rgb%28227%2C 72%2C 80%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
  }
.coral--light ._coral-Textfield.is-invalid.focus-ring:not(:active),
.coral--light ._coral-Textfield:invalid.focus-ring:not(:active) {
        border-color: rgb(215, 55, 63);
        box-shadow: 0 0 0 1px rgb(215, 55, 63);
      }
.coral--light ._coral-Textfield.is-valid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:rgb%2818%2C 128%2C 92%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
  }
.coral--light ._coral-Textfield--quiet {
  background-color: transparent;
  border-color: rgb(225, 225, 225);
}
.coral--light ._coral-Textfield--quiet:hover {
    border-color: rgb(202, 202, 202);
  }
.coral--light ._coral-Textfield--quiet:active {
    border-color: rgb(20, 115, 230);
  }
.coral--light ._coral-Textfield--quiet:focus {
    border-color: rgb(38, 128, 235);
    box-shadow: 0 1px 0 rgb(38, 128, 235);
  }
.coral--light ._coral-Textfield--quiet.focus-ring:not(:active) {
      border-color: rgb(38, 128, 235);
      box-shadow: 0 1px 0 rgb(38, 128, 235);
    }
.coral--light ._coral-Textfield--quiet:disabled {
    background-color: transparent;
    border-color:  rgb(225, 225, 225);
  }
.coral--light ._coral-Textfield--quiet.is-invalid,
.coral--light ._coral-Textfield--quiet:invalid {
    border-color: rgb(215, 55, 63);
  }
.coral--light ._coral-Textfield--quiet.is-invalid:focus,
.coral--light ._coral-Textfield--quiet:invalid:focus {
      box-shadow: 0 1px 0 rgb(215, 55, 63);
    }
.coral--light ._coral-Textfield--quiet.is-invalid.focus-ring:not(:active),
.coral--light ._coral-Textfield--quiet:invalid.focus-ring:not(:active) {
        border-color: rgb(215, 55, 63);
        box-shadow: 0 1px 0 rgb(215, 55, 63);
      }

.coral--lightest ._coral-Textfield {
  background-color: rgb(255, 255, 255);
  border-color: rgb(234, 234, 234);
  color: rgb(80, 80, 80);
}
.coral--lightest ._coral-Textfield::placeholder {
    color: rgb(149, 149, 149);
  }
.coral--lightest ._coral-Textfield:hover {
    border-color: rgb(211, 211, 211);
    box-shadow: none;
  }
.coral--lightest ._coral-Textfield:hover::placeholder {
      color: rgb(50, 50, 50);
    }
.coral--lightest ._coral-Textfield:focus {
    border-color: rgb(38, 128, 235);
  }
.coral--lightest ._coral-Textfield.focus-ring:not(:active) {
      border-color: rgb(55, 142, 240);
      box-shadow: 0 0 0 1px rgb(55, 142, 240);
    }
.coral--lightest ._coral-Textfield[disabled] {
    background-color: rgb(244, 244, 244);
    border-color: transparent;
    color: rgb(188, 188, 188);
    -webkit-text-fill-color: rgb(188, 188, 188);
  }
.coral--lightest ._coral-Textfield[disabled]::placeholder {
      color: rgb(188, 188, 188);
    }
.coral--lightest ._coral-Textfield.is-invalid,
.coral--lightest ._coral-Textfield:invalid {
    border-color: rgb(227, 72, 80);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:rgb%28236%2C 91%2C 98%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
  }
.coral--lightest ._coral-Textfield.is-invalid.focus-ring:not(:active),
.coral--lightest ._coral-Textfield:invalid.focus-ring:not(:active) {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--lightest ._coral-Textfield.is-valid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:rgb%2838%2C 142%2C 108%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
  }
.coral--lightest ._coral-Textfield--quiet {
  background-color: transparent;
  border-color: rgb(234, 234, 234);
}
.coral--lightest ._coral-Textfield--quiet:hover {
    border-color: rgb(211, 211, 211);
  }
.coral--lightest ._coral-Textfield--quiet:active {
    border-color: rgb(38, 128, 235);
  }
.coral--lightest ._coral-Textfield--quiet:focus {
    border-color: rgb(55, 142, 240);
    box-shadow: 0 1px 0 rgb(55, 142, 240);
  }
.coral--lightest ._coral-Textfield--quiet.focus-ring:not(:active) {
      border-color: rgb(55, 142, 240);
      box-shadow: 0 1px 0 rgb(55, 142, 240);
    }
.coral--lightest ._coral-Textfield--quiet:disabled {
    background-color: transparent;
    border-color:  rgb(234, 234, 234);
  }
.coral--lightest ._coral-Textfield--quiet.is-invalid,
.coral--lightest ._coral-Textfield--quiet:invalid {
    border-color: rgb(227, 72, 80);
  }
.coral--lightest ._coral-Textfield--quiet.is-invalid:focus,
.coral--lightest ._coral-Textfield--quiet:invalid:focus {
      box-shadow: 0 1px 0 rgb(227, 72, 80);
    }
.coral--lightest ._coral-Textfield--quiet.is-invalid.focus-ring:not(:active),
.coral--lightest ._coral-Textfield--quiet:invalid.focus-ring:not(:active) {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 1px 0 rgb(227, 72, 80);
      }

.coral--dark ._coral-Textfield {
  background-color: rgb(37, 37, 37);
  border-color: rgb(74, 74, 74);
  color: rgb(227, 227, 227);
}
.coral--dark ._coral-Textfield::placeholder {
    color: rgb(144, 144, 144);
  }
.coral--dark ._coral-Textfield:hover {
    border-color: rgb(90, 90, 90);
    box-shadow: none;
  }
.coral--dark ._coral-Textfield:hover::placeholder {
      color: rgb(255, 255, 255);
    }
.coral--dark ._coral-Textfield:focus {
    border-color: rgb(55, 142, 240);
  }
.coral--dark ._coral-Textfield.focus-ring:not(:active) {
      border-color: rgb(38, 128, 235);
      box-shadow: 0 0 0 1px rgb(38, 128, 235);
    }
.coral--dark ._coral-Textfield[disabled] {
    background-color: rgb(62, 62, 62);
    border-color: transparent;
    color: rgb(110, 110, 110);
    -webkit-text-fill-color: rgb(110, 110, 110);
  }
.coral--dark ._coral-Textfield[disabled]::placeholder {
      color: rgb(110, 110, 110);
    }
.coral--dark ._coral-Textfield.is-invalid,
.coral--dark ._coral-Textfield:invalid {
    border-color: rgb(236, 91, 98);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:rgb%28227%2C 72%2C 80%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
  }
.coral--dark ._coral-Textfield.is-invalid.focus-ring:not(:active),
.coral--dark ._coral-Textfield:invalid.focus-ring:not(:active) {
        border-color: rgb(236, 91, 98);
        box-shadow: 0 0 0 1px rgb(236, 91, 98);
      }
.coral--dark ._coral-Textfield.is-valid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:rgb%2857%2C 185%2C 144%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
  }
.coral--dark ._coral-Textfield--quiet {
  background-color: transparent;
  border-color: rgb(74, 74, 74);
}
.coral--dark ._coral-Textfield--quiet:hover {
    border-color: rgb(90, 90, 90);
  }
.coral--dark ._coral-Textfield--quiet:active {
    border-color: rgb(55, 142, 240);
  }
.coral--dark ._coral-Textfield--quiet:focus {
    border-color: rgb(38, 128, 235);
    box-shadow: 0 1px 0 rgb(38, 128, 235);
  }
.coral--dark ._coral-Textfield--quiet.focus-ring:not(:active) {
      border-color: rgb(38, 128, 235);
      box-shadow: 0 1px 0 rgb(38, 128, 235);
    }
.coral--dark ._coral-Textfield--quiet:disabled {
    background-color: transparent;
    border-color:  rgb(74, 74, 74);
  }
.coral--dark ._coral-Textfield--quiet.is-invalid,
.coral--dark ._coral-Textfield--quiet:invalid {
    border-color: rgb(236, 91, 98);
  }
.coral--dark ._coral-Textfield--quiet.is-invalid:focus,
.coral--dark ._coral-Textfield--quiet:invalid:focus {
      box-shadow: 0 1px 0 rgb(236, 91, 98);
    }
.coral--dark ._coral-Textfield--quiet.is-invalid.focus-ring:not(:active),
.coral--dark ._coral-Textfield--quiet:invalid.focus-ring:not(:active) {
        border-color: rgb(236, 91, 98);
        box-shadow: 0 1px 0 rgb(236, 91, 98);
      }

.coral--darkest ._coral-Textfield {
  background-color: rgb(8, 8, 8);
  border-color: rgb(57, 57, 57);
  color: rgb(200, 200, 200);
}
.coral--darkest ._coral-Textfield::placeholder {
    color: rgb(124, 124, 124);
  }
.coral--darkest ._coral-Textfield:hover {
    border-color: rgb(73, 73, 73);
    box-shadow: none;
  }
.coral--darkest ._coral-Textfield:hover::placeholder {
      color: rgb(239, 239, 239);
    }
.coral--darkest ._coral-Textfield:focus {
    border-color: rgb(38, 128, 235);
  }
.coral--darkest ._coral-Textfield.focus-ring:not(:active) {
      border-color: rgb(20, 115, 230);
      box-shadow: 0 0 0 1px rgb(20, 115, 230);
    }
.coral--darkest ._coral-Textfield[disabled] {
    background-color: rgb(44, 44, 44);
    border-color: transparent;
    color: rgb(92, 92, 92);
    -webkit-text-fill-color: rgb(92, 92, 92);
  }
.coral--darkest ._coral-Textfield[disabled]::placeholder {
      color: rgb(92, 92, 92);
    }
.coral--darkest ._coral-Textfield.is-invalid,
.coral--darkest ._coral-Textfield:invalid {
    border-color: rgb(227, 72, 80);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='0 0 18 18' width='18'%3E%3Cpath style='fill:rgb%28215%2C 55%2C 63%29' d='M8.564 1.289L.2 16.256A.5.5 0 0 0 .636 17h16.728a.5.5 0 0 0 .5-.5.494.494 0 0 0-.064-.244L9.436 1.289a.5.5 0 0 0-.872 0zM10 14.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-1.5a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25zm0-3a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-6a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25z'/%3E%3C/svg%3E");
  }
.coral--darkest ._coral-Textfield.is-invalid.focus-ring:not(:active),
.coral--darkest ._coral-Textfield:invalid.focus-ring:not(:active) {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--darkest ._coral-Textfield.is-valid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='12' viewBox='0 0 12 12' width='12'%3E%3Cpath style='fill:rgb%2851%2C 171%2C 132%29' d='M4.5 10a1.023 1.023 0 0 1-.8-.384l-2.488-3a1 1 0 0 1 1.577-1.233L4.5 7.376l4.712-5.991a1 1 0 1 1 1.576 1.23l-5.511 7A.977.977 0 0 1 4.5 10z'/%3E%3C/svg%3E");
  }
.coral--darkest ._coral-Textfield--quiet {
  background-color: transparent;
  border-color: rgb(57, 57, 57);
}
.coral--darkest ._coral-Textfield--quiet:hover {
    border-color: rgb(73, 73, 73);
  }
.coral--darkest ._coral-Textfield--quiet:active {
    border-color: rgb(38, 128, 235);
  }
.coral--darkest ._coral-Textfield--quiet:focus {
    border-color: rgb(20, 115, 230);
    box-shadow: 0 1px 0 rgb(20, 115, 230);
  }
.coral--darkest ._coral-Textfield--quiet.focus-ring:not(:active) {
      border-color: rgb(20, 115, 230);
      box-shadow: 0 1px 0 rgb(20, 115, 230);
    }
.coral--darkest ._coral-Textfield--quiet:disabled {
    background-color: transparent;
    border-color:  rgb(57, 57, 57);
  }
.coral--darkest ._coral-Textfield--quiet.is-invalid,
.coral--darkest ._coral-Textfield--quiet:invalid {
    border-color: rgb(227, 72, 80);
  }
.coral--darkest ._coral-Textfield--quiet.is-invalid:focus,
.coral--darkest ._coral-Textfield--quiet:invalid:focus {
      box-shadow: 0 1px 0 rgb(227, 72, 80);
    }
.coral--darkest ._coral-Textfield--quiet.is-invalid.focus-ring:not(:active),
.coral--darkest ._coral-Textfield--quiet:invalid.focus-ring:not(:active) {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 1px 0 rgb(227, 72, 80);
      }

.coral--large ._coral-DecoratedTextfield-icon {
  width: 22px;
  height: 22px;
  top: 9px;
  right: 15px;
}
.coral--large ._coral-DecoratedTextfield-field {
  padding-right: 51px;
}

._coral-InputGroup {
  position: relative;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  min-width: 192px;
  border-radius: 4px;
}
._coral-InputGroup ._coral-FieldButton {
    padding: 0;
    width: 34px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
._coral-InputGroup-field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
  -ms-flex: 1;
      flex: 1;
}
._coral-InputGroup--quiet {
  border-radius: 0;
}
._coral-InputGroup--quiet ._coral-FieldButton {
    width: auto;
    position: relative;

    padding-left: 12px;
    padding-right: 0;

    border-bottom: 1px solid;
    border-radius: 0;
  }
._coral-InputGroup--quiet ._coral-FieldButton:after {
      content: '';
      position: absolute;
      height: 100%;
      width: 10px;
      right: -10px;
    }
._coral-InputGroup--quiet ._coral-InputGroup-icon {
    right: 0;
  }
._coral-Datepicker--range {
  border-radius: 4px;
}
._coral-Datepicker--range._coral-InputGroup--quiet,._coral-Datepicker--range._coral-InputGroup--quiet ._coral-FieldButton {
      border-radius: 0;
    }
._coral-Datepicker--range._coral-Datepicker--datetimeRange ._coral-InputGroup-field {
      width: 153px;
      min-width: 153px;
    }
._coral-Datepicker--range ._coral-InputGroup-field {
    width: 104px;
    min-width: 104px;
    -ms-flex: initial;
        flex: initial;
  }
._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField {
      border-right: 0;
      padding-right: 12px;
    }
._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField.is-invalid,
      ._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField:invalid {
        background-image: none;
        padding-right: 12px;
      }
._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-endField {
      border-left: 0;
      border-radius: 0;
      padding-left: 12px;
    }
._coral-Datepicker--range ._coral-Datepicker--rangeDash {
    line-height: 24px;
    padding-top: 0;
    -ms-flex: initial;
        flex: initial;
    width: 0;
    z-index: 1;
  }
._coral-Datepicker--range ._coral-Datepicker--rangeDash:before {
      content: '–';
      display: inline-block;
      margin: 0 -7px;
      overflow: hidden;
      text-align: center;
      vertical-align: middle;
      width: 14px;
    }
._coral-Datepicker--range.is-focused ._coral-Datepicker-focusRing {
      position: absolute;
      border-radius: 4px;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }
._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        border-radius: 0;
        top: auto;
      }
._coral-Datepicker--range._coral-InputGroup--quiet ._coral-Datepicker--rangeDash:before {
        margin-left: -7px;
      }

.coral--large ._coral-InputGroup {
  min-width: 240px;
  border-radius: 5px;
}
.coral--large ._coral-InputGroup ._coral-FieldButton {
    width: 42px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
.coral--large ._coral-InputGroup-field {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
.coral--large ._coral-InputGroup--quiet {
  border-radius: 0;
}
.coral--large ._coral-InputGroup--quiet ._coral-FieldButton {

    padding-left: 15px;
    padding-right: 0;

    border-bottom: 1px solid;
    border-radius: 0;
  }
.coral--large ._coral-Datepicker--range {
  border-radius: 5px;
}
.coral--large ._coral-Datepicker--range._coral-InputGroup--quiet,.coral--large ._coral-Datepicker--range._coral-InputGroup--quiet ._coral-FieldButton {
      border-radius: 0;
    }
.coral--large ._coral-Datepicker--range._coral-Datepicker--datetimeRange ._coral-InputGroup-field {
      width: 193px;
      min-width: 193px;
    }
.coral--large ._coral-Datepicker--range ._coral-InputGroup-field {
    width: 130px;
    min-width: 130px;
  }
.coral--large ._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField,.coral--large ._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField.is-invalid,
      .coral--large ._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-startField:invalid {
        padding-right: 15px;
      }
.coral--large ._coral-Datepicker--range ._coral-InputGroup-field._coral-Datepicker-endField {
      padding-left: 15px;
    }
.coral--large ._coral-Datepicker--range ._coral-Datepicker--rangeDash {
    line-height: 30px;
    padding-top: 0;
  }
.coral--large ._coral-Datepicker--range ._coral-Datepicker--rangeDash:before {
      margin: 0 -7px;
      width: 14px;
    }
.coral--large ._coral-Datepicker--range.is-focused ._coral-Datepicker-focusRing {
      border-radius: 5px;
    }
.coral--large ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        border-radius: 0;
      }
.coral--large ._coral-Datepicker--range._coral-InputGroup--quiet ._coral-Datepicker--rangeDash:before {
        margin-left: -7px;
      }

.coral--light ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(38, 128, 235);
      }
.coral--light ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(38, 128, 235);
        }
.coral--light ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(202, 202, 202);
      }
.coral--light ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(202, 202, 202);
        }
.coral--light ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus {
          border-color: rgb(38, 128, 235);
        }
.coral--light ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ ._coral-FieldButton {
            border-color: rgb(38, 128, 235);
          }
.coral--light ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
    border-color: rgb(38, 128, 235);
  }
.coral--light ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--light ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
      border-color: rgb(215, 55, 63);
    }
.coral--light ._coral-InputGroup-field.focus-ring ~ ._coral-FieldButton {
    box-shadow: 0 0 0 1px rgb(38, 128, 235);
  }
.coral--light ._coral-InputGroup-field.focus-ring.is-invalid ~ ._coral-FieldButton,
.coral--light ._coral-InputGroup-field.focus-ring:invalid ~ ._coral-FieldButton {
      box-shadow: 0 0 0 1px rgb(215, 55, 63);
    }
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:hover,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:focus,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:active,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton.is-selected,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:invalid,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton.is-invalid,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:disabled,
.coral--light ._coral-InputGroup--quiet ._coral-FieldButton:disabled:hover {
      border-color: rgb(225, 225, 225);
    }
.coral--light ._coral-InputGroup--quiet:hover:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ ._coral-FieldButton {
        border-color: rgb(202, 202, 202);
      }
.coral--light ._coral-InputGroup--quiet ._coral-InputGroup-field.is-invalid ~ ._coral-FieldButton,
.coral--light ._coral-InputGroup--quiet ._coral-InputGroup-field:invalid ~ ._coral-FieldButton {
        border-color: rgb(215, 55, 63);
      }
.coral--light ._coral-InputGroup--quiet ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
        box-shadow: 0 1px 0 rgb(38, 128, 235);
        border-color: rgb(38, 128, 235);
      }
.coral--light ._coral-InputGroup--quiet ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--light ._coral-InputGroup--quiet ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
          box-shadow: 0 1px 0 rgb(215, 55, 63);
          border-color: rgb(215, 55, 63);
        }
.coral--light ._coral-Datepicker--range ._coral-InputGroup-field.focus-ring {
      box-shadow: none !important;
    }
.coral--light ._coral-Datepicker--range ._coral-InputGroup-field[disabled] ~ ._coral-Datepicker--rangeDash {
        color: rgb(179, 179, 179);
      }
.coral--light ._coral-Datepicker--range .focus-ring ~ ._coral-Datepicker-focusRing {
      box-shadow: 0 0 0 1px rgb(38, 128, 235);
    }
.coral--light ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-FieldButton,
.coral--light ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-FieldButton {
        box-shadow: 0 0 0 1px rgb(215, 55, 63);
      }
.coral--light ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-Datepicker-focusRing,
.coral--light ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(215, 55, 63);
      }
.coral--light ._coral-Datepicker--range.is-invalid ._coral-InputGroup-field {
      border-color: rgb(215, 55, 63) !important;
    }
.coral--light ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(215, 55, 63);
      }
.coral--light ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-FieldButton {
        border-color: rgb(215, 55, 63);
        box-shadow: 0 0 0 1px rgb(215, 55, 63);
      }
.coral--light ._coral-Datepicker--range.is-invalid ._coral-FieldButton {
      border-color: rgb(215, 55, 63);
    }
.coral--light ._coral-Datepicker--range.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
          border-color: rgb(215, 55, 63);
          box-shadow: 0 0 0 1px rgb(215, 55, 63);
        }
.coral--light ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(38, 128, 235);
      }
.coral--light ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton {
          box-shadow: none;
          border-color: rgb(215, 55, 63);
        }
.coral--light ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
              box-shadow: 0 2px 0 0 rgb(215, 55, 63);
            }
.coral--light ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-Datepicker-focusRing {
          box-shadow: 0 0 0 1px rgb(215, 55, 63);
        }

.coral--lightest ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(55, 142, 240);
      }
.coral--lightest ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(55, 142, 240);
        }
.coral--lightest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(211, 211, 211);
      }
.coral--lightest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(211, 211, 211);
        }
.coral--lightest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus {
          border-color: rgb(55, 142, 240);
        }
.coral--lightest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ ._coral-FieldButton {
            border-color: rgb(55, 142, 240);
          }
.coral--lightest ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
    border-color: rgb(55, 142, 240);
  }
.coral--lightest ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--lightest ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.coral--lightest ._coral-InputGroup-field.focus-ring ~ ._coral-FieldButton {
    box-shadow: 0 0 0 1px rgb(55, 142, 240);
  }
.coral--lightest ._coral-InputGroup-field.focus-ring.is-invalid ~ ._coral-FieldButton,
.coral--lightest ._coral-InputGroup-field.focus-ring:invalid ~ ._coral-FieldButton {
      box-shadow: 0 0 0 1px rgb(227, 72, 80);
    }
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:hover,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:focus,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:active,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton.is-selected,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:invalid,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton.is-invalid,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:disabled,
.coral--lightest ._coral-InputGroup--quiet ._coral-FieldButton:disabled:hover {
      border-color: rgb(234, 234, 234);
    }
.coral--lightest ._coral-InputGroup--quiet:hover:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ ._coral-FieldButton {
        border-color: rgb(211, 211, 211);
      }
.coral--lightest ._coral-InputGroup--quiet ._coral-InputGroup-field.is-invalid ~ ._coral-FieldButton,
.coral--lightest ._coral-InputGroup--quiet ._coral-InputGroup-field:invalid ~ ._coral-FieldButton {
        border-color: rgb(227, 72, 80);
      }
.coral--lightest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
        box-shadow: 0 1px 0 rgb(55, 142, 240);
        border-color: rgb(55, 142, 240);
      }
.coral--lightest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--lightest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
          box-shadow: 0 1px 0 rgb(227, 72, 80);
          border-color: rgb(227, 72, 80);
        }
.coral--lightest ._coral-Datepicker--range ._coral-InputGroup-field.focus-ring {
      box-shadow: none !important;
    }
.coral--lightest ._coral-Datepicker--range ._coral-InputGroup-field[disabled] ~ ._coral-Datepicker--rangeDash {
        color: rgb(188, 188, 188);
      }
.coral--lightest ._coral-Datepicker--range .focus-ring ~ ._coral-Datepicker-focusRing {
      box-shadow: 0 0 0 1px rgb(55, 142, 240);
    }
.coral--lightest ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-FieldButton,
.coral--lightest ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-FieldButton {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--lightest ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-Datepicker-focusRing,
.coral--lightest ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--lightest ._coral-Datepicker--range.is-invalid ._coral-InputGroup-field {
      border-color: rgb(227, 72, 80) !important;
    }
.coral--lightest ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--lightest ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-FieldButton {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--lightest ._coral-Datepicker--range.is-invalid ._coral-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.coral--lightest ._coral-Datepicker--range.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
          border-color: rgb(227, 72, 80);
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }
.coral--lightest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(55, 142, 240);
      }
.coral--lightest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton {
          box-shadow: none;
          border-color: rgb(227, 72, 80);
        }
.coral--lightest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
              box-shadow: 0 2px 0 0 rgb(227, 72, 80);
            }
.coral--lightest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-Datepicker-focusRing {
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }

.coral--dark ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(38, 128, 235);
      }
.coral--dark ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(38, 128, 235);
        }
.coral--dark ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(90, 90, 90);
      }
.coral--dark ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(90, 90, 90);
        }
.coral--dark ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus {
          border-color: rgb(38, 128, 235);
        }
.coral--dark ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ ._coral-FieldButton {
            border-color: rgb(38, 128, 235);
          }
.coral--dark ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
    border-color: rgb(38, 128, 235);
  }
.coral--dark ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--dark ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
      border-color: rgb(236, 91, 98);
    }
.coral--dark ._coral-InputGroup-field.focus-ring ~ ._coral-FieldButton {
    box-shadow: 0 0 0 1px rgb(38, 128, 235);
  }
.coral--dark ._coral-InputGroup-field.focus-ring.is-invalid ~ ._coral-FieldButton,
.coral--dark ._coral-InputGroup-field.focus-ring:invalid ~ ._coral-FieldButton {
      box-shadow: 0 0 0 1px rgb(236, 91, 98);
    }
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:hover,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:focus,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:active,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton.is-selected,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:invalid,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton.is-invalid,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:disabled,
.coral--dark ._coral-InputGroup--quiet ._coral-FieldButton:disabled:hover {
      border-color: rgb(74, 74, 74);
    }
.coral--dark ._coral-InputGroup--quiet:hover:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ ._coral-FieldButton {
        border-color: rgb(90, 90, 90);
      }
.coral--dark ._coral-InputGroup--quiet ._coral-InputGroup-field.is-invalid ~ ._coral-FieldButton,
.coral--dark ._coral-InputGroup--quiet ._coral-InputGroup-field:invalid ~ ._coral-FieldButton {
        border-color: rgb(236, 91, 98);
      }
.coral--dark ._coral-InputGroup--quiet ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
        box-shadow: 0 1px 0 rgb(38, 128, 235);
        border-color: rgb(38, 128, 235);
      }
.coral--dark ._coral-InputGroup--quiet ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--dark ._coral-InputGroup--quiet ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
          box-shadow: 0 1px 0 rgb(236, 91, 98);
          border-color: rgb(236, 91, 98);
        }
.coral--dark ._coral-Datepicker--range ._coral-InputGroup-field.focus-ring {
      box-shadow: none !important;
    }
.coral--dark ._coral-Datepicker--range ._coral-InputGroup-field[disabled] ~ ._coral-Datepicker--rangeDash {
        color: rgb(110, 110, 110);
      }
.coral--dark ._coral-Datepicker--range .focus-ring ~ ._coral-Datepicker-focusRing {
      box-shadow: 0 0 0 1px rgb(38, 128, 235);
    }
.coral--dark ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-FieldButton,
.coral--dark ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-FieldButton {
        box-shadow: 0 0 0 1px rgb(236, 91, 98);
      }
.coral--dark ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-Datepicker-focusRing,
.coral--dark ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(236, 91, 98);
      }
.coral--dark ._coral-Datepicker--range.is-invalid ._coral-InputGroup-field {
      border-color: rgb(236, 91, 98) !important;
    }
.coral--dark ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(236, 91, 98);
      }
.coral--dark ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-FieldButton {
        border-color: rgb(236, 91, 98);
        box-shadow: 0 0 0 1px rgb(236, 91, 98);
      }
.coral--dark ._coral-Datepicker--range.is-invalid ._coral-FieldButton {
      border-color: rgb(236, 91, 98);
    }
.coral--dark ._coral-Datepicker--range.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
          border-color: rgb(236, 91, 98);
          box-shadow: 0 0 0 1px rgb(236, 91, 98);
        }
.coral--dark ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(38, 128, 235);
      }
.coral--dark ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton {
          box-shadow: none;
          border-color: rgb(236, 91, 98);
        }
.coral--dark ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
              box-shadow: 0 2px 0 0 rgb(236, 91, 98);
            }
.coral--dark ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-Datepicker-focusRing {
          box-shadow: 0 0 0 1px rgb(236, 91, 98);
        }

.coral--darkest ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(20, 115, 230);
      }
.coral--darkest ._coral-InputGroup.is-focused:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(20, 115, 230);
        }
.coral--darkest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(73, 73, 73);
      }
.coral--darkest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid) ~ ._coral-FieldButton {
          border-color: rgb(73, 73, 73);
        }
.coral--darkest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus {
          border-color: rgb(20, 115, 230);
        }
.coral--darkest ._coral-InputGroup:hover:not(.is-invalid):not(.is-focused) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ ._coral-FieldButton {
            border-color: rgb(20, 115, 230);
          }
.coral--darkest ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
    border-color: rgb(20, 115, 230);
  }
.coral--darkest ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--darkest ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.coral--darkest ._coral-InputGroup-field.focus-ring ~ ._coral-FieldButton {
    box-shadow: 0 0 0 1px rgb(20, 115, 230);
  }
.coral--darkest ._coral-InputGroup-field.focus-ring.is-invalid ~ ._coral-FieldButton,
.coral--darkest ._coral-InputGroup-field.focus-ring:invalid ~ ._coral-FieldButton {
      box-shadow: 0 0 0 1px rgb(227, 72, 80);
    }
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:hover,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:focus,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:active,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton.is-selected,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:invalid,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton.is-invalid,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:disabled,
.coral--darkest ._coral-InputGroup--quiet ._coral-FieldButton:disabled:hover {
      border-color: rgb(57, 57, 57);
    }
.coral--darkest ._coral-InputGroup--quiet:hover:not(.is-invalid) ._coral-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ ._coral-FieldButton {
        border-color: rgb(73, 73, 73);
      }
.coral--darkest ._coral-InputGroup--quiet ._coral-InputGroup-field.is-invalid ~ ._coral-FieldButton,
.coral--darkest ._coral-InputGroup--quiet ._coral-InputGroup-field:invalid ~ ._coral-FieldButton {
        border-color: rgb(227, 72, 80);
      }
.coral--darkest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus ~ ._coral-FieldButton {
        box-shadow: 0 1px 0 rgb(20, 115, 230);
        border-color: rgb(20, 115, 230);
      }
.coral--darkest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus.is-invalid ~ ._coral-FieldButton,
.coral--darkest ._coral-InputGroup--quiet ._coral-InputGroup-field:focus:invalid ~ ._coral-FieldButton {
          box-shadow: 0 1px 0 rgb(227, 72, 80);
          border-color: rgb(227, 72, 80);
        }
.coral--darkest ._coral-Datepicker--range ._coral-InputGroup-field.focus-ring {
      box-shadow: none !important;
    }
.coral--darkest ._coral-Datepicker--range ._coral-InputGroup-field[disabled] ~ ._coral-Datepicker--rangeDash {
        color: rgb(92, 92, 92);
      }
.coral--darkest ._coral-Datepicker--range .focus-ring ~ ._coral-Datepicker-focusRing {
      box-shadow: 0 0 0 1px rgb(20, 115, 230);
    }
.coral--darkest ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-FieldButton,
.coral--darkest ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-FieldButton {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--darkest ._coral-Datepicker--range .focus-ring:invalid ~ ._coral-Datepicker-focusRing,
.coral--darkest ._coral-Datepicker--range .focus-ring.is-invalid ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--darkest ._coral-Datepicker--range.is-invalid ._coral-InputGroup-field {
      border-color: rgb(227, 72, 80) !important;
    }
.coral--darkest ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--darkest ._coral-Datepicker--range.is-invalid .focus-ring ~ ._coral-FieldButton {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.coral--darkest ._coral-Datepicker--range.is-invalid ._coral-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.coral--darkest ._coral-Datepicker--range.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
          border-color: rgb(227, 72, 80);
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }
.coral--darkest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused ._coral-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(20, 115, 230);
      }
.coral--darkest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton {
          box-shadow: none;
          border-color: rgb(227, 72, 80);
        }
.coral--darkest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-FieldButton.is-invalid.focus-ring {
              box-shadow: 0 2px 0 0 rgb(227, 72, 80);
            }
.coral--darkest ._coral-Datepicker--range._coral-InputGroup--quiet.is-focused.is-invalid ._coral-Datepicker-focusRing {
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }

.coral--dark ._coral-Textfield::placeholder {
  color: rgb(185, 185, 185);
}
.coral--darkest ._coral-Textfield::placeholder {
  color: rgb(162, 162, 162);
}
.coral--light ._coral-Textfield::placeholder {
  color: rgb(110, 110, 110);
}
.coral--lightest ._coral-Textfield::placeholder {
  color: rgb(116, 116, 116);
}
.coral--light ._coral-Textfield {
  border-color: rgb(158, 158, 158);
}