/*
 * Return the rem of a pixel's value
 *
 * Sample: pxToRem(50)
 * Result: 3.125rem
 */
/*
 * Return the percent ratio from width and height
 *
 * Sample: ratio(16, 9)
 * Result: 56.25%
 */
/*
 * Return the rem of a pixel's value
 *
 * Sample: pxToRem(50)
 * Result: 3.125rem
 */
/*
 * Return the percent ratio from width and height
 *
 * Sample: ratio(16, 9)
 * Result: 56.25%
 */
.select-field {
  display: flex;
  flex-direction: column;
  position: relative; }
  .select-field.floating-label .selected {
    padding-top: 1rem; }
  .select-field.floating-label .custom-select-hzn-option {
    padding-left: 1.25rem; }
  .select-field.floating-label.centered-label label {
    position: absolute;
    left: 1.25rem;
    top: 1.125rem;
    color: #757575;
    font-size: 0.8125rem;
    max-width: calc( 100% - 2.5rem);
    text-overflow: ellipsis;
    height: 0.9375rem;
    overflow: hidden;
    white-space: nowrap; }
  .select-field.floating-label label {
    z-index: 1;
    position: absolute;
    transition: font-size 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, top 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
    left: 1.25rem;
    top: 0.625rem;
    color: #757575;
    font-size: 0.6875rem;
    pointer-events: none; }
  .select-field.floating-label.has-error label {
    color: #d70000; }
  .select-field-select {
    font-size: 0.9375rem; }
    .select-field-select .selected-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3.0625rem;
      padding: 0.5rem 1.25rem;
      border: 0.0625rem solid #cecece;
      box-sizing: border-box;
      border-radius: 0.3125rem; }
      .select-field-select .selected-option .icon {
        width: 1rem;
        height: 1rem; }
        .select-field-select .selected-option .icon svg {
          width: 1rem;
          height: 1rem; }
    .select-field-select .custom-select-hzn-options {
      border-bottom: 0.0625rem solid #cecece;
      overflow-y: auto;
      max-height: 16rem;
      border-bottom-left-radius: 0.3125rem;
      border-bottom-right-radius: 0.3125rem; }
    .select-field-select .custom-select-hzn-option {
      padding: 0.5rem 1.25rem;
      width: 100%;
      box-sizing: border-box;
      border-left: 0.0625rem solid #cecece;
      border-right: 0.0625rem solid #cecece; }
      .select-field-select .custom-select-hzn-option:hover {
        background-color: #f6f6f6; }
    .select-field-select.is-open .selected-option {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: #e5e5e5; }
    .select-field-select.is-open .arrow {
      transform: rotate(180deg); }
  .select-field--black-bordered .select-field-select .selected-option {
    border-color: #000000; }
  .select-field.disabled {
    color: #757575; }
  .select-field.placeholder-with-label .selected {
    color: #757575; }