﻿@keyframes vibrate {
	0%, 30%, 60%, 85%, 100% {
	  left: 0;	  
	}
	10%, 40%, 90%, 70% {
	  left: -2px;	  
	}
	20%, 50%, 80%, 95% {
	  left: 2px;	  
	}
  }

  .fadeInUp5px {
	-webkit-animation: fadeInUpKey 300ms ease-in-out;
	animation: fadeInUpKey 300ms ease-in-out;
}

@keyframes fadeInUpKey {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes zoom {
	0% { opacity: 0; transform: scale(0); }
	10% { opacity: 1; transform: scale(1); }
	20% { opacity: 0; }
	80% { opacity: 1; }
	90% { opacity: 0; }
	100% { opacity: 1; }
  }

  @keyframes bell {
	0% { transform: rotate(0); }
	10% { transform: rotate(30deg); }
	20% { transform: rotate(0); }
	80% { transform: rotate(0); }
	90% { transform: rotate(-30deg); }
	100% { transform: rotate(0); }
  }

  .bell{
	animation: bell 1s 1s both 2;	  
  }

  .zoom{
	animation: zoom 1s 1s forwards 1;	  
  }

.loadingbtn.animate:after {
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-left-color: transparent;
    left: 0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
    animation: spinner-border .75s linear infinite;   
}

.loadingchat {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity 150ms ease-in 50ms;
    width: 100%;
    z-index: 99999;
    /*background: #D27013*/
}

    .loadingchat .circle {
        width: 120px;
        height: 120px;
        border-radius: 100%;
        background: #FF8B00;
        background-image: url('https://cdn.dashaspeaks.com/dashaspeaks/web/content/images/chat-loading.svg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 60px;
        align-items: center;
        display: flex;
        justify-content: center;
    }

.dot-typing {
    position: relative;
    left: -9999px;
    width: 7px;
    height: 7px;
    border-radius: 5px;
    background-color: #FF8B00;
    color: #FF8B00;
    box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    animation: dot-typing 1.5s infinite linear;
    top: -10px;
    margin-right: -22px;
}

@-webkit-keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    16.667% {
        box-shadow: 9984px -10px 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    33.333% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    50% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px -10px 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    66.667% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    83.333% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px -10px 0 0 #FF8B00;
    }

    100% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    16.667% {
        box-shadow: 9984px -10px 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    33.333% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    50% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px -10px 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    66.667% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }

    83.333% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px -10px 0 0 #FF8B00;
    }

    100% {
        box-shadow: 9984px 0 0 0 #FF8B00, 9995px 0 0 0 #FF8B00, 10006px 0 0 0 #FF8B00;
    }
}

@keyframes blinker {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1.0;
    }
}

.blink {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
}