/* general button style, can be renamed */
.widget-button, .widget-button:focus, .widget-button:active {
  background:linear-gradient(-45deg, #44dd96, #1088e2, #ff4e69);
  background-position:100% 50%;
  background-size: 400% 400%;
  border-radius: 50%;
  padding: 20px;
  box-shadow: rgb(45 35 66 / 10%) 0 3px 6px, rgb(45 35 66 / 15%) 0 7px 13px -3px, rgb(58 65 111 / 20%) 0 -3px 0 inset !important;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  border: 0;
  font-weight: 400;
  bottom: 20px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  line-height: 1em;
}

/* button hover styles */
.widget-button:hover {
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 100% 50%;
    }
	50% {
	    background-position: 0% 50%;
	}
	100% {
	    background-position: 100% 50%;
	}
}

/* hide/show arrow image */
.widget-button > img {
    display:none;
}

/* button style when widget is open, .widget-open class can not be renamed */
.widget-button.widget-open {
   border-radius: 4px;
   padding: 13px 20px;
   font-size: 18px;
   line-height: 1.5em;
}

/* styles for mobile devices */
@media (max-width: 479px) {
	iframe {
    	right: 0 !important;
    	width: 100% !important;
    	height: calc(100% - 35px) !important;
		bottom: 35px !important;
		border-radius: 0 !important;
	}
	.widget-button.widget-open {
		width: 100%;
		right:0 !important;
		bottom:0 !important;
		left:0;
		border-radius:0;
		font-size: 16px !important;
		padding: 5px !important;
	}
}