:root {
	--icon-color: #7D7D7D;
}

.cf-obfuscator{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:998;
	margin-top:0;
	display:none;
}

/* Button styles */

.cf-button-container {
	background:#7D7D7D;
	border-radius: 10px 27px 0px 0px;
    display: flex;
	align-items: center;
    justify-content: center;
}

.cf-button{
	width: 210px;
	height:40px;
	font-size:14px;
	line-height:38px;
	font-weight:600;
	text-transform:uppercase;
	text-align:center;
	padding: 0 20px 0 67px;
	color:#fff;
	background-color: transparent;
	cursor:pointer;
	border:none;
	transition: .3s;
}

.cf-button, .cf-button-container:hover{
	border:none;
}

.cf-button:before{
	content:" ";
	background: #5F5D5D url(/wp-content/plugins/jbs-contact-form/images/user.svg) center center/contain no-repeat;
	position:absolute;
	left: 20px;
	top: 2px;
	height: 50px;
	width: 50px;
	z-index:1000;
	transform: translateY(-18px);
	display: block;
}

.cf-button.avatar-crop:before{
	border-radius: 50%;
}

.cf-button-fixed-bottom-left{
	position:fixed;
	z-index:1999;
	bottom:0;
	left:55px;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
}

.cf-button-fixed-bottom-right{
	position:fixed;
	z-index:1999;
	bottom:0;
	right:100px;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
}

.cf-form-class .button{
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	display:inline-block;position:relative;
	border:none;
	background:#F5A63F!important;
	color:#fff;
	letter-spacing:.5px;
	font-size:14px;
	height:30px;
	line-height:19px;
	font-weight:600;
	padding:0 15px;
	cursor:pointer;
	white-space:nowrap;
	width:100%;
	box-sizing:border-box;
	text-align:center;
	margin:0;
}

.cf-form-class .button:hover{
	background-color:#C47C1E;
}

input.button,input.button:active,input.button:focus,button,button:active,button:focus{
	outline:none;
}


/* Form styles */

.cf-form-modal{
	position:fixed;
	width:180px;
	box-shadow: 4px 4px 13px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	background-color:#E4E3E3;
	margin:0;
	z-index:1600;
	display:none;
}

.cf-form-modal .cf-form-close{
	position:absolute;
	top:-38px;
	right:-5px;
	width:32px;
	height:40px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	cursor:pointer;
	z-index:99999;
}

.cf-form-modal .cf-form-close:before,.cf-form-modal .cf-form-close:after{
	content:'';
	position:absolute;
	left:50%;
	top:50%;
	height:3px;
	width:25px;
	background-color:#7D7D7D;
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
	-o-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

.cf-form-modal .cf-form-close:before{
	-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);
	-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);
	-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);
	-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);
	transform:translateX(-50%) translateY(-50%) rotate(-45deg);
}

.cf-form-modal .cf-form-close:after{
	-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);
	-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);
	transform:translateX(-50%) translateY(-50%) rotate(45deg);
}

.cf-form-modal-button-fixed-bottom-left{
	bottom:0px;
	left:75px;
}

.cf-form-modal-button-fixed-bottom-right{
	bottom:0px;
	right:120px;
}

.cf-form-pop-up{
	position:relative;
	top:50%;
	max-width:500px;
	max-height:85%;
	margin:auto;
	z-index:2002;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	z-index:1001;
}

.cf-success{
	display:none;
	line-height:1.7;
	color:#656565;
	font-weight:300;
}

#cf-form-container {
	height:320px;
}

#cf-links-container {
	height:auto;
	padding:0px 0 60px;
}

#cf-links-container a {
	font-size:14px;
	line-height: 19px;
	font-weight: 400;
	color: #7D7D7D;
	width:100%;
	display:flex;
	align-items: center;
	height:45px;
	padding: 0;
	box-sizing:border-box;
	text-decoration:none;
	z-index:10000;
}

#cf-links-container a:hover {
	background-color:#DBDBDB;
}

.cf-icon a svg {
	width: 35px;
	height: 35px;
	padding: 0 15px;
	box-sizing: unset;
}

.icon-style-1 svg > path {
	fill: var(--icon-color)!important;
}

/* Style responsive */

/*@media all and (min-width: 481px) {*/
	
#cf-container.style-1 .cf-field-container:nth-child(2) a {
	border-radius: 5px 5px 0 0;
}

#cf-container.style-2 .cf-icon span, #cf-container.style-3 .cf-icon span, #cf-container.style-4 .cf-icon span {
	display: none;
}

#cf-container.style-3 .cf-button-container span, #cf-container.style-4 .cf-button-container span {
	display: none;
}

/* Style 2 */

#cf-container.style-2 .cf-button:before {
	display: none;
}

#cf-container.style-2 .cf-button-container {
	border-radius: 5px 5px 0px 0px;
	padding: 0;
}

#cf-container.style-2 .cf-button {
	width: 150px;
	height: 30px;
	font-size: 16px;
	line-height: 32px;
	padding: 0 20px 0 20px;
}

#cf-container.style-2 .cf-form-modal-button-fixed-bottom-right {
	right: 55px;
}

#cf-container.style-2 .cf-form-modal {
	width: 150px;
	padding-bottom: 30px;
	font-size: 0px;
}

#cf-container.style-2 .cf-field-container {
	display: inline-block;
	width: 50%;
}

#cf-container.style-2 .cf-icon a svg {
	width: 45px;
	height: 45px;
	padding: 10px 0;
}

#cf-container.style-2 .cf-icon a {
	display: inline-table;
    text-align: center;
}

#cf-container.style-2 .cf-field-container:nth-child(2) a {
	border-top-left-radius: 5px;
}

#cf-container.style-2 .cf-field-container:nth-child(3) a {
	border-top-right-radius: 5px;
}	

/* Style 3 */

#cf-container.style-3 .cf-button-container {
	width: 80px;
	height: 80px;
	border-radius: 100% 0px 0px 0px;
	right: 0px;
	padding: 0;
}

#cf-container.style-3 .cf-form-modal-button-fixed-bottom-right {
	right: 0px;
}

#cf-container.style-3 .cf-button:before {
	left: 22px;
	top: 42px;
}

#cf-container.style-3 .cf-form-modal {
	width: 135px;
	height: 135px;
	padding-bottom: 0px;
	font-size: 0px;
	border-radius: 100% 0 0 0;
}

#cf-container.style-3 .cf-icon a svg {
	width: 35px;
	height: 35px;
	padding: 4px;
}

#cf-container.style-3 .cf-icon a {
	display: inline-table;
    text-align: center;
	border-radius: 50%;
}

#cf-container.style-3 .cf-field-container {
	position: absolute;
}

#cf-container.style-3 .cf-field-container:nth-child(2) {
	left: 8px;
	bottom: 0px;
}

#cf-container.style-3 .cf-field-container:nth-child(3) {
	left: 24px;
	bottom: 36px;
}

#cf-container.style-3 .cf-field-container:nth-child(4) {
	left: 53px;
	bottom: 65px;
}

#cf-container.style-3 .cf-field-container:nth-child(5) {
	left: 91px;
	bottom: 80px;
}

/* Style 4 */

#cf-container.style-4 .cf-button-container {
	width: 82px;
	height: 85px;
	border-radius: 10px 0px 0px 10px;
	right: 0px;
	bottom: 20px;
	padding: 0;
}

#cf-container.style-4 .cf-form-modal-button-fixed-bottom-right {
	right: 0px;
	bottom: 20px;
}

#cf-container.style-4 .cf-button:before {
	left: 6px;
	top: 25px;
	height: 70px;
    width: 70px;
}

#cf-container.style-4 .cf-form-modal {
	width: 82px;
	padding-bottom: 85px;
	font-size: 0px;
}

#cf-container.style-4 .cf-icon a svg {
	width: 45px;
	height: 45px;
	padding: 10px 0;
}

#cf-container.style-4 .cf-icon a {
	display: inline-table;
    text-align: center;
}

#cf-container.style-4 .cf-form-modal .cf-form-close {
    right: 25px;
}

#cf-container.style-4 .cf-field-container:nth-child(2) a {
	border-radius: 10px 10px 0 0;
}

/*}*/

/* Media responsive */

@media (min-width: 481px) {
	.cf-button {
		background-image: none !important;
	}
}

@media (max-width: 480px) {

	.cf-button-container{
		width:40px;
		height:40px;
		padding: 0;
		border-radius: 100%;
	}
	.cf-button{
		width:36px;
		height:36px;
		cursor:pointer;
		border-radius:100%;
		background: transparent url(/wp-content/plugins/jbs-contact-form/images/user.svg) center center/40px 40px no-repeat;
		padding:0;
		transform: rotateY(0deg) translateZ(2px);
		transform-style: preserve-3d;
	}

	.cf-button span, .cf-button:before{
		display:none;
	}

	.cf-button-fixed-bottom-left{
		bottom:20px;
		left:20px;
	}

	.cf-button-fixed-bottom-right{
		bottom:20px;
		right:20px;
	}

	.cf-form-modal-button-fixed-bottom-left{
		bottom:90px;
		left:20px;
	}

	.cf-form-modal-button-fixed-bottom-right{
		bottom:70px;
		right:20px;
	}

	.cf-obfuscator{
		background: rgba(136, 136, 136, 0.5);
		backdrop-filter: blur(5px);
	}
	
	#cf-links-container {
		height:auto;
		padding: 10px 0 0;
	}
	
	/* Style 2 */
	
	#cf-container.style-2 .cf-button-container {
		width: 56px;
		height: 56px;
		border-radius: 5px;
		padding: 0;
	}
	
	#cf-container.style-2 .cf-button {
		width: 50px;
		height: 50px;
		border-radius: 5px;
	}

	#cf-container.style-2 .cf-form-modal-button-fixed-bottom-right {
		right: 50px;
		bottom: 55px;
	}

	#cf-container.style-2 .cf-form-modal {
		width: 150px;
		padding-bottom: 0px;
	}
	
	/* Style 3 */

	#cf-container.style-3 .cf-button-container {
		bottom: 0;
	}
	
	#cf-container.style-3 .cf-button{
		background-color: #5F5D5D;
	}
	
	#cf-container.style-3 .cf-button-fixed-bottom-right .cf-button {
		position: absolute;
		right: 8px;
		bottom: 8px;
	}
		
	#cf-container.style-3 .cf-form-modal-button-fixed-bottom-right {
		right: 0px;
		bottom: 0px;
		padding-top: 0;
	}

	/* Style 4 */
	
	#cf-container.style-4 .cf-button {
		background-color: #5F5D5D;
	}

}

