#addContactDial {
	background-color: transparent;
	border: none;
	outline: none;
	overflow: hidden;
	position: relative;
}

#addContactDial:active {
	border: none;
	outline: none;
}

#addContactDialContent {
	display: flex;
	background-color: white;
	border-radius: 1.875rem;
	position: fixed;
}

#addContactLogoAndTextDiv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background-color: #2a3647;
	padding-inline: clamp(0.9375rem, -2.0339rem + 5.5932vw, 3rem);;
	padding-top: 9.625rem;
	padding-bottom: 14.5rem;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

#addContactLogoAndTextDiv img {
	width: 3.5rem;
	height: 4.1562rem;
	margin-bottom: 0.75rem;
}

#addContactTextDiv {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: white;
}

#addContactTextDiv h3 {
	font-size: clamp(1.875rem, -0.9163rem + 5.2542vw, 3.8125rem);
	font-weight: 700;
	white-space: nowrap;
}

#addContactTextDiv p {
	font-size: clamp(1rem, 0.0095rem + 1.8644vw, 1.6875rem);
	font-weight: 400;
	white-space: nowrap;
}

#addContactInfoDiv {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding-left: clamp(1.875rem, -4.1578rem + 11.3559vw, 6.0625rem);;
	padding-right: 3.0rem;
	padding-top: 3.0rem;
	padding-bottom: 8.4375rem;
}
#closeDialBtnDiv{
	display: flex;
	justify-content: flex-end;
}

#closeDialBtn {
	margin-bottom: 3.8125rem;
	background-color: white;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.125rem;
}

#closeDialBtn img {
	width: 1.5rem;
	height: 1.5rem;
}

#closeDialBtn:hover {
	background-color: #d1d1d1;
}

#contactImgAndFormDiv {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, -4.0424rem + 9.4915vw, 4.5rem);
}


#contactImgDiv {
	width: 7.5rem;
	height: 7.5rem;
	background-color: #d1d1d1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 4.1875rem;
}

#contactImgDiv img {
	width: 2.6875rem;
	height: 2.6875rem;
}

#contactFormDiv {
	display: flex;
	flex-direction: column;
}

#contactFormDiv form {
	flex-direction: column;
	display: flex;
	gap: clamp(1rem, -0.4407rem + 2.7119vw, 2rem);
	margin-bottom: 3.0rem;
}

.formDiv {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3.125rem;
	border: 0.0625rem solid #d1d1d1;
	border-radius: 0.625rem;
	padding: 0.8125rem 21px;
	width: clamp(20rem, 10.8157rem + 17.2881vw, 26.375rem);
}

.formDiv input {
	z-index: 1;
	height: 1.5rem;
	outline: none;
	border: none;
	font-weight: 400;
	font-size: 1.25rem;
}

.formDiv input::placeholder {
	font-weight: 400;
	font-size: 1.25rem;
}

.form input:focus {
	outline: none;
	border: none;
}

#dialButtonDiv {
	display: flex;
	gap: 1.5625rem;
}

#cancelButton {
	padding: 0.9375rem 24px;
	border: 0.0625rem solid #2a3647;
	background-color: white;
	border-radius: 0.625rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: clamp(1rem, 0.5498rem + 0.8475vw, 1.3125rem);
	font-weight: 400;
}

#cancelButton svg {
	width: 0.6562rem;
	height: 0.6562rem;
}

#cancelButton:hover {
	border-color: #29abe2;
	color: #29abe2;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

#cancelButton:hover svg path {
	stroke: #29abe2;
}

#createContactBtn {
	display: flex;
	gap: 0.25rem;
	padding: 1.0rem;
	background-color: #2a3647;
	color: white;
	border-radius: 0.625rem;
	align-items: center;
	font-size: clamp(1rem, 0.5498rem + 0.8475vw, 1.3125rem);
	font-weight: 700;
}

#createContactBtn:hover {
	background-color: #29abe2;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

#createContactBtn svg {
	width: 0.9688rem;
	height: 0.6875rem;
}

/* ---------------------------------------------- EDIT ----------------------------------*/


#editContactDialContent {
	display: flex;
	background-color: white;
	border-radius: 1.875rem;
	position: fixed;
}

#editContactLogoAndTextDiv {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background-color: #2a3647;
	padding: 0 48px;
	padding-top: 9.625rem;
	padding-bottom: 14.5rem;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}

#editContactLogoAndTextDiv img {
	width: 3.5rem;
	height: 4.1562rem;
	margin-bottom: 0.75rem;
}

#editContactTextDiv {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: white;
}

#editContactTextDiv h3 {
	font-size: clamp(1.875rem, -0.9163rem + 5.2542vw, 3.8125rem);
	font-weight: 700;
	white-space: nowrap;
}

#editContactTextDiv p {
	font-size: 1.6875rem;
	font-weight: 400;
}

#editContactInfoDiv {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	padding-left: clamp(3rem, -0.1515rem + 5.9322vw, 5.1875rem);
	padding-right: 3.0rem;
	padding-top: 3.0rem;
	padding-bottom: 8.4375rem;
}


#editImgDiv {
	width: 7.5rem;
	height: 7.5rem;
	background-color: #d1d1d1;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 4.1875rem;
	font-size: 2.9375rem;
	font-weight: 500;
}

#contactImgDiv img {
	width: 2.6875rem;
	height: 2.6875rem;
}

#contactFormDiv {
	display: flex;
	flex-direction: column;
}

.form input:focus {
	outline: none;
	border: none;
}

#dialButtonDiv {
	display: flex;
	gap: 1.5625rem;
}

#deleteButton {
	padding: 0.9375rem 24px;
	border: 0.0625rem solid #2a3647;
	background-color: white;
	border-radius: 0.625rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: clamp(0.75rem, -0.0604rem + 1.5254vw, 1.3125rem);
	font-weight: 400;
	color: #2a3647;
}

.formInputWrapper svg{
	flex-shrink: 0;
}

#deleteButton svg {
	width: 0.6562rem;
	height: 0.6562rem;
}

#deleteButton:hover {
	border-color: #29abe2;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
	color: #29abe2;
}

#saveBtn {
	display: flex;
	gap: 0.25rem;
	padding: 1.0rem;
	background-color: #2a3647;
	color: white;
	border-radius: 0.625rem;
	align-items: center;
	font-size: clamp(0.75rem, -0.0604rem + 1.5254vw, 1.3125rem);
	font-weight: 700;
}

#saveBtn svg {
	width: 0.9688rem;
	height: 0.6875rem;
}

#saveBtn:hover {
	background-color: #29abe2;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.slideIn {
	animation: slideIn 0.5s ease-in-out forwards;
}

@keyframes slideIn {
	0% {
		transform: translate(200%, -50%);
	}

	100% {
		transform: translate(-50%, -50%);
	}
}

@keyframes slideOut {
	0% {
		transform: translate(-30%, -50%);
	}

	100% {
		transform: translate(200%, -50%);
	}
}

.slideOut {
	animation: slideOut 0.5s ease-out forwards;
}

#successDial {
	position: relative;
	background-color: transparent;
	overflow: hidden;
	width: 100%;
	height: 31.25rem;
	border: none;
	outline: none;
}

#successDial:active {
	border: none;
	outline: none;
}

#successDial::backdrop {
	background-color: transparent;
}

#successDiv {
	margin-top: 9.375rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#successDiv button {
	background-color: #2a3647;
	color: white;
	border-radius: 1.25rem;
	box-shadow: 0 0 4px 0 #00000026;
	font-size: 1.25rem;
	font-weight: 400;
	padding: 1.25rem;
	transform: translateX(500%);
}

@keyframes slideInAndOut {
	0% {
		transform: translateX(500%);
	}
	20% {
		transform: translateX(0%);
	}
	80% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(500%);
	}
}

.slideMsgInAndOut {
	animation: slideInAndOut 1.5s ease-out forwards;
}

#afterSpan {
	position: relative;
}

#afterSpan::after {
	content: "";
	position: absolute;
	background-color: #29abe2;
	bottom: calc(0% - 16px);
	height: 0.1875rem;
	width: 125%;
	left: 0;
	border-radius: 0.625rem;
}

.hideRefuseDiv {
	visibility: hidden;
}

.showRefuseDiv {
	visibility: visible;
}

.refuseDiv {
	justify-content: flex-start;
	align-items: center;
	color: red;
	font-size: 0.8125rem;
	font-weight: 400px;
	margin-left: 0.625rem;
	height: 10px;
}

.formInputWrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 0.5rem;
}

.formDiv:focus-within {
	border-color: #29abe2;
}

.hideSuccessMsg{
	display: none;
}

@media(max-width: 850px){
	#addContactDialContent{
		flex-direction: column;
			width: 90%;
			max-width: 500px;
	}
	#contactImgDiv{
		display: flex;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
		margin: 0;
		border: 3px solid white;
	}
	#addContactInfoDiv{
		padding-inline: 20px;
		padding-block: 62px;
		margin-top: 40px;
	
	}

	#contactImgAndFormDiv{
		justify-content: center;
	}
	#addContactLogoAndTextDiv{
		padding-inline: 20px;
		padding-block: 120px;
		border-bottom-left-radius: 0;
		border-top-right-radius: 20px;
	}
	#addContactLogoAndTextDiv img{
		display: none;
	}
	#addContactTextDiv h3{
		font-size: 47px;
	}
	#addContactTextDiv p{
		font-size: 20px;
	}
	#closeDialBtnDiv{
		position: fixed;
		top:20px;
		right: 20px;
	}
	#closeDialBtn{
		background-color: #2a3647;
	}
	#closeDialBtn img{
		filter: invert(100);
	}
	#cancelButton{
		display: none;
	}
	#dialButtonDiv{
		display: flex;
		justify-content: center;
	}
	#afterSpan::after{
		width: 170%
	}
	@keyframes slideInFromBottom {
		0% {
			transform: translate(-50%, 300%);
		}
	
		100% {
			transform: translate(-50%, -50%);
		}
	}
	
	@keyframes slideOutFromBottom {
		0% {
			transform: translate(-50%, -50%);
		}
	
		100% {
			transform: translate(-50%, 300%);
		}
	}
	
	.slideIn{
		animation: slideInFromBottom 0.5s ease-in-out forwards;
	}

	.slideOut{
		animation: slideOutFromBottom 0.5s ease-in-out forwards;
	}

    #editContactDialContent {
        flex-direction: column;
        width: 90%;
        max-width: 500px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #editContactLogoAndTextDiv {
        padding-inline: 20px;
        padding-block: 120px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 20px;
    }

    #editContactLogoAndTextDiv img {
        display: none;
    }

    #editContactTextDiv h3 {
        font-size: 47px;
		position: relative;
    }

	#editContactTextDiv h3::after{
		content: "";
		position: absolute;
		left: 0;
		bottom: -12px;
		width: 35%;
		height: 3px;
		border-radius: 20px;
		background-color: #29abe2;
	}
    #editContactTextDiv p {
        font-size: 20px;
    }

    #editContactInfoDiv {
        padding-inline: 20px;
        padding-block: 62px;
        margin-top: 40px;
        align-items: center;
		padding-bottom: 3rem;
    }

    #editImgDiv {
        display: flex;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
        margin: 0;
        border: 3px solid white;
    }

    #closeDialBtnDiv {
        position: fixed;
        top: 20px;
        right: 20px;
    }

    #closeDialBtn {
        background-color: #2a3647;
    }

    #closeDialBtn img {
        filter: invert(100);
    }

    #dialButtonDiv {
        justify-content: center;
    }

    .slideIn {
        animation: slideInFromBottom 0.5s ease-in-out forwards;
    }

    .slideOut {
        animation: slideOutFromBottom 0.5s ease-in-out forwards;
    }
}

@media(max-width: 650px){
	#editContactTextDiv h3{
		font-size: clamp(2.375rem, 2.0354rem + 1.6981vw, 2.9375rem);
	}
	#editContactLogoAndTextDiv{
		padding-block: 80px;
	}
	#editContactInfoDiv{
		padding-bottom: 1.5rem;
	}
	#editImgDiv{
		transform: translate(-50%, -130%);
	}

	#addContactLogoAndTextDiv{
		padding-block: 80px;
	}

	#addContactInfoDiv {
		padding-block: 30px;
	}
}