.country-code-phone-group {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: visible;
}

.country-code-phone-group > .country-code-select {
	flex: 0 0 82px !important;
	width: 82px !important;
	max-width: 82px !important;
	min-width: 82px !important;
	padding: 0.375rem 1.15rem 0.375rem 0.3rem !important;
	border: 1px solid #ced4da;
	border-right: 0;
	border-radius: 0.375rem 0 0 0.375rem;
	background-color: #fff;
	color: #212529;
	font-size: 0.875rem;
	color: transparent !important;
	position: relative;
	z-index: 2;
}

.country-code-phone-group > .country-code-visible-label {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	pointer-events: none;
	max-width: 43px;
	overflow: hidden;
	white-space: nowrap;
	color: #212529;
	font-size: 0.8rem;
	font-weight: 500;
}

.country-code-phone-group > input {
	display: block !important;
	flex: 1 1 0 !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.country-code-phone-group > .country-code-select:focus {
	z-index: 2;
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

.country-code-phone-group > .country-code-select option {
	color: #212529;
}

@media (max-width: 576px) {
	.country-code-phone-group > .country-code-select {
		flex-basis: 78px !important;
		width: 78px !important;
		min-width: 78px !important;
		max-width: 78px !important;
	}
}