/*------------ AUXChatBox -----------------------------------*/

.RequestCall,
.telegramButton,
.WhatsAppButton {
	color: var(--light);
}

.RequestCall {
	/* background: var(--color3);
    color: var(--textLight); */
}

.RequestCall:hover {
	background: var(--color2);
}

.telegramButton {
	background: var(--telegramColor);
}

.telegramButton:hover {
	background: var(--telegramHover);
}


.WhatsAppButton {
	background: var(--WhatsAppColor);
	font-weight: 600;
}

.WhatsAppButton:hover {
	background: var(--WhatsAppHover);
}

.Header-ChatBox-Wraper .WhatsAppButton, .Header-ChatBox-Wraper .telegramButton {
	padding: 4px 6px 0 6px;
}



.ModalWindow-WhatsApp-icon, .ModalWindow-Telegram-icon {
    width: 24px;
    height: 24px;
	margin-right: 8px;
}






.ChatBoxOpen-wraper,
.ChatBoxClose-wraper {
	position: fixed;
	z-index: 700;
}

.AUXChatBox-Circle {}

.RecallCircle .AUXChatBox-Circle-icon {
	fill: var(--light);
	width: 10vw;
}

.ChatBoxOpen-wraper .AUXChatBox-Circle {
	/* margin-bottom: 4px; */
}

.ChatBoxClose-wraper .AUXChatBox-Circle {
	position: absolute;
	bottom: 0;
}



.RecallCircle {
	background: var(--color5);
	z-index: 700;
}

/* .RecallCircle:hover {
	background: var(--color4);
} */

.TelegramCircle {
	background: var(--telegramColor);
	z-index: 710;
}

/* .TelegramCircle:hover {
	background: var(--telegramHover);
} */

.WhatsUpCircle {
	background: var(--WhatsAppColor);
	z-index: 720;
	right: 0;
}

/* .WhatsUpCircle:hover {
	background: var(--WhatsAppHover);
} */

/* .ButtonCircle {
	z-index: 786;
	right: 0;
	background-color: aqua;
} */




/*----------- DESCTOP ---------------------------------------------------*/
@media screen and (min-width:769px) {

	.ChatBoxOpen-wraper,
	.ChatBoxClose-wraper {
		bottom: 3vw;
		right: 4vw;
		width: 8vw;
	}

	.ChatBoxOpen-wraper {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 8px;
	}

	.ChatBoxClose-wraper {
		height: 7vw;
	}

	.AUXChatBox-Circle {
		border-radius: 50%;
		box-sizing: border-box;
		width: 7vw;
		height: 7vw;
		max-width: 98px;
		max-height: 98px;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.AUXChatBox-Circle-icon {
		max-width: 48px;
		max-height: 48px;
        cursor: pointer;
	}

	.TelegramCircle {
		right: 1.4vw;
	}

	.qrCode {
		max-width: 20vw;
	}


}



/*----------- MOBILE ----------------------------------------------------*/
@media screen and (max-width:768px) {

	.ChatBoxOpen-wraper,
	.ChatBoxClose-wraper {
		position: fixed;
		z-index: 700;
		bottom: 4vw;
		right: 4vw;
	}

	.AUXChatBox-Circle {
		border-radius: 50%;
		box-sizing: border-box;
		width: 18vw;
        height: 18vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.AUXChatBox-Circle-icon {
		width: 8vw;
		height: 8vw;
	}

	.TelegramCircle {
		right: 5.5vw;
	}

	.qrCode {
		max-width: 82vw;
		padding-top: 8vw;
	}

}




.ChatBoxOpen-wraper {
	display: none;
	flex-direction: column;
	gap: 8px;
}