#cardigan-field-recipient-language{
    margin-bottom: 15px;
}

#cardigan-field-recipient-form-validate-error{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--secondary-color-2);
    margin: 24px 0 16px;
    font-size: calc-rem(14px);
    line-height: calc-rem(16px);
    text-align: left;

    span {
        margin-left: 8px;
    }

    svg {
        path:first-of-type {
            fill: var(--secondary-color-2);
            min-width: 24px;
          }

    }

}
.cardigan-giftcards-greeting-box-fields {
    margin-top: 10px;
    #cardigan-field-greeting{
        border:1px solid rgb(180, 180, 180);
        resize:none;
        font-size: 11px;
        min-height:110px;

    }
    #cardigan-field-greeting:focus{
        border:1px solid rgb(122, 122, 122);
    }
    #cardigan-field-greeting::placeholder{
        color:rgb(182, 182, 182);
    }
}
.input-container {
    position: relative;
    .floating-label-input{
        padding-bottom:3px;
        margin-bottom:15px;
        outline: none;
      }
  }


  
.floating-label-input ~ .floating-label {
    position: absolute;
    left: -1px;
    top: 0px;
    transition: 0.2s ease all;
    pointer-events: none;
    letter-spacing: 1px;
    font-family: var(--font-input), helvetica, arial, sans-serif;
}

.floating-label-input:not(:placeholder-shown) ~ .floating-label,
.floating-label-input:focus ~ .floating-label {
    top: -10px;
    color: #9b9b9b;
}

.cardigan-field-recipient-required-error{
    position:absolute;
    right:5px;
    top:5px;
    transition: 0.2s ease all;
    font-size: 14px;
    color:var(--secondary-color-2);
    opacity: 0.7;
}



.floating-label-input:focus ~ .cardigan-field-recipient-required-error,
.floating-label-input:not(:placeholder-shown) ~ .cardigan-field-recipient-required-error {
    opacity: 0;
}

.floating-label-input.value-validation-error:placeholder-shown {
    border-bottom: 1px solid var(--secondary-color-2);
}

.floating-label-input.value-validation-error:focus {
    border-bottom: 1px solid var(--primary-color-1);
}

.floating-label-input.email-missmatch-error {
    color: var(--secondary-color-2);
    border-bottom: 1px solid var(--secondary-color-2);
}

// .floating-label-input.email-missmatch-error:focus {
//     color: var(--primary-color-1);
//     border-bottom: 1px solid var(--primary-color-1);
// }