.display-call{
	top: 0;
	height: 100vh;
	width: 100vw;
	background-color: #0000005e;
	position: fixed;
	display: flex;
}
.container-center{
	margin: auto;
	background-color: #fff;
	border-radius: 40px;
	padding: 40px;
	display: flex;
	border-radius: 24px;
}
.container-box{
	margin: auto;
}
.text-call{
	font-weight: 600;
	font-size: 25px;
}
.text-call span{
	font-size: 25px;
}

.logo-floating{
	margin-left: auto;
}
.button-text{
	margin-left: 10px;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
}
.box-text{
	display: flex;
	margin-bottom: 20px;
}
.img-calling{
	max-height: 150px;
}
.text-floating{
	margin-top: auto;
	margin-bottom: auto;
	padding-left: 20px;
}
.button-start-call{
	background: linear-gradient(180deg, #91CD60 0%, #65A42E 100%);
	width: 100%;
	border-radius: 24px;
	border-width: 1px;
	padding-top: 16px;
	padding-right: 32px;
	padding-bottom: 16px;
	padding-left: 32px;
	text-align: center;
	color: #fff;
	display: flex;

}
.button-end-call{
	background: linear-gradient(180deg, #F3654D 0%, #D44A4A 100%);
	width: 100%;
	border-radius: 24px;
	border-width: 1px;
	padding-top: 16px;
	padding-right: 32px;
	padding-bottom: 16px;
	padding-left: 32px;
	text-align: center;
	color: #fff;
	display: flex;

}
.w-100{
	width: 100%;
}

.button-wa-call{

	display: inline-block;
	text-decoration: none;
	font: bold 12px/1em HelveticaNeue, Arial, sans-serif;
	padding: 6px 8px;
	background: linear-gradient(to bottom, #0ea300, #00c096);
	border-color: #99e61c #55e61c #15d8ae;
	width: 100%;
	border-radius: 6px;
    color: #fff;
}

.button-wa-call-manual {
    display: inline-block;
    text-decoration: none;
    font: bold 12px/1em HelveticaNeue, Arial, sans-serif;
    padding: 6px 8px;
    background: linear-gradient(to bottom, #007bff, #0056b3); /* biru */
    border-color: #3399ff #007bff #0056b3;
    width: 100%;
    border-radius: 6px;
    color: #fff;
}

.button-wa-call-official {
    display: inline-block;
    text-decoration: none;
    font: bold 12px/1em HelveticaNeue, Arial, sans-serif;
    padding: 6px 8px;
    background: linear-gradient(to bottom, #c3ff00, #5ab300); /* hijau */
    border-color: #99e61c #55e61c #15d8ae;
    width: 100%;
    border-radius: 6px;
    color: #fff;
}

.button-wa-call-official:disabled,
.button-wa-call-official.disabled {
    background: linear-gradient(to bottom, #ccc, #999);
    border-color: #999 #888 #777;
    cursor: not-allowed;
    opacity: 0.6;
}

.loading-bg{
	background-color: #FAFAFA;
	border-radius: 24px;
	padding: 10px;
}
.spinner{
	animation: spin 2s linear infinite;
}

.wa-call{
	padding-left: 5px;
	padding-right: 5px;
	display: flex;
	background-color: #fff;
}
.wa-call .input{
	width: 50%;
}
.wa-call .button-call{
	width: 50%;
	display: flex;
}
.wa-call .button-call button{
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 5px;
	margin-right: 5px;
}

@keyframes spin {
	from {
	  transform: rotate(0deg);
	}
	to {
	  transform: rotate(360deg);
	}
  }