.phone-input-group{margin-bottom:1rem;.country-select {width: 40%; margin-right: 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;} #phone-number {width: 60%;} // Placeholder styles only for input field input::placeholder {color: #999999; opacity: .4;} // For older browsers - only for input input::-webkit-input-placeholder {color: #999999; opacity: .4;} input:-moz-placeholder {color: #999999; opacity: .4;} input::-moz-placeholder {color: #999999; opacity: .4;} input:-ms-input-placeholder {color: #999999; opacity: .4;} // Input and select normal text color input,select {color: #333333;} // Only fade placeholder on input focus input:focus {&::placeholder {opacity: .4;}}}.invalid-phone{border-color:#dc3545}.country-flag{margin-right:5px;font-size:1.2em}