/* Web Widget Style Starts Here*/
@import url(./bootstrap.css);

@import url(./base.css);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

@import url(./docs.md-iconic-font.css);

.hal-hidden{
  display: none !important;
}
  #hal-app .modal-backdrop {
    z-index: -1 !important;
  }
#hal-app ul li{
  list-style: none;
}
#hal-fabs {
  bottom: 20px;
  position: fixed;
  margin: 1em;
  right: 20px;
  z-index: 1080;

}

.hal-fab {
  display: block;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  text-align: center;
  color: #f0f0f0 !important;
  margin: 25px auto 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  position: relative;
  z-index: 998;
  overflow: hidden;
  background: #42a5f5;
  -webkit-animation: hearbeat;
  animation: hearbeat;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  border: 2px solid #a3d6ff;
}

@-webkit-keyframes hearbeat {
  0%   {box-shadow: 1px 1px 20px 10px rgba(0, 0, 0, .3);}
  100% {box-shadow: none;}
}

@keyframes hearbeat {
  0%   {box-shadow: 1px 1px 20px 10px rgba(0, 0, 0, .3);}
  100% {box-shadow: none;}
}

.hal-fab #hal-custom-fab-image{
  width:100%;height:100%;background-position: center;background-repeat: no-repeat;background-size: cover;
}

.hal-fab:hover {
    box-shadow: 1px 1px 20px 10px rgba(0, 0, 0, .3);
}

.hal-fab > i {
      font-size: 2em !important;
    line-height: 73px !important;
  -webkit-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.hal-fab:not(:last-child) {
  width: 0;
  height: 0;
  margin: 20px auto 0;
  opacity: 0;
  visibility: hidden;
  line-height: 40px;
}

.hal-fab:not(:last-child) > i {
  font-size: 1.4em;
  line-height: 40px;
}

.hal-fab:not(:last-child).is-visible {
  width: 40px;
  height: 40px;
  margin: 15px auto 10;
  opacity: 1;
  visibility: visible;
}

.hal-fab:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

.hal-fab:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}

.hal-fab:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}

.hal-fab:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}

.hal-fab:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}

.hal-fab(:last-child):active,
.hal-fab(:last-child):focus,
.hal-fab(:last-child):hover {
  box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

#hal-app .panel {
  opacity: 0;
  z-index: 1080;
  box-sizing: content-box;
  background-color: #337ab7;
  display: none;
  padding: 0px;
}
@media only screen and (min-width: 300px) {
#hal-app .panel {
margin-top:10%;
bottom: 100px;
    position: fixed;
width:90%;
}
}
/* SMARTPHONES LANDSCAPE */

@media only screen and (min-width: 480px) {
#hal-app .panel {
margin-top:10%;
bottom: 100px;
    position: fixed;
    width:90%;
}
}

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      #hal-app .panel {
        width:400px;
        position: fixed;
        right: 120px;
        bottom: 40px;
      }    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      #hal-app .panel {
        width:400px;
        position: fixed;
        right: 120px;
        bottom: 40px;
      }    
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      #hal-app .panel {
        width:400px;
        position: fixed;
        right: 120px;
        bottom: 40px;
      }    

      
    }

    @media only screen and (min-height: 600px) {
      #hal-app .panel-body{
        height: 300px
      }
    }
    
    @media only screen and (min-height: 800px) {
      #hal-app .panel-body{
        height: 400px
      }
    }

#hal-app .btn {
    margin-bottom: 3px !important;
    box-shadow: none;
}
#hal-app #hal-say-it {
  height: 40px;
  width: 80%;
  float: right;
  border-bottom-left-radius: 5px !important;
  border-top-left-radius: 5px !important;
  font-size: 14px;
}
#hal-app #hal-submit {
  height: 40px;
  font-size: 14px;
  border-bottom-right-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

/*Element state*/

#hal-app .is-active {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#hal-app .is-float {
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

#hal-app .is-loading {
display: block;
-webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}
/*Animation*/

@-webkit-keyframes zoomIn {
0% {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0.0;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
}

@keyframes zoomIn {
0% {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0.0;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
}

@-webkit-keyframes load {
0% {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0.0;
}
50% {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0;
}
}

@keyframes load {
0% {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0.0;
}
50% {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1;
}
100% {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0;
}
}
/* SMARTPHONES PORTRAIT */

/*Color Options*/



.blue .hal-fab {
background: #42a5f5;
color: #fff;
}



.blue .chat {
background: #42a5f5;
color: #999;
}


/* Ripple */

.ink {
display: block;
position: absolute;
background: rgba(38, 50, 56, 0.4);
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
webkit-transform: scale(0);
-webkit-transform: scale(0);
        transform: scale(0);
}
/*animation effect*/

.ink.animate {
-webkit-animation: ripple 0.5s ease-in-out;
        animation: ripple 0.5s ease-in-out;
}

@-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/

100% {
  opacity: 0;
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  webkit-transform: scale(5);
  -webkit-transform: scale(5);
          transform: scale(5);
}
}

@keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/

100% {
  opacity: 0;
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  webkit-transform: scale(5);
  -webkit-transform: scale(5);
          transform: scale(5);
}
}
::-webkit-input-placeholder { /* Chrome */
color: #bbb;
}
:-ms-input-placeholder { /* IE 10+ */
color: #bbb;
}
::-moz-placeholder { /* Firefox 19+ */
color: #bbb;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: #bbb;
}
#hal-app .panel.is-visible {
opacity: 1;
-webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
display: block;
}
#hal-app .is-hide{
opacity: 0
}


/* Web Widget Style Ends Here*/

    #hal-app #btn-speak-bb {
        height: 30px;
        border: 1px solid #F2F3F4;
        border-radius: 15px;
        width: 30px;
        background-color: #F2F3F4;
    }

    #hal-app #btn-speak-bb:before {
        display: inline-block;
        font-size: 14px;
        font-family: "FontAwesome";
        content: "\f028";
        color: #BDC6CD;
        margin-left: -4px;
        margin-top: -2px;
    }

    #hal-app #btn-pause {
        height: 30px;
        border: 1px solid #F2F3F4;
        border-radius: 15px;
        width: 30px;
        background-color: #F2F3F4;
    }

    #hal-app #btn-pause:before {
        display: inline-block;
        font-size: 14px;
        font-family: "FontAwesome";
        content: "\f04c";
        color: #BDC6CD;
        margin-left: -4px;
        margin-top: -2px;
    }

    #hal-app #btn-resume {
        height: 30px;
        border: 1px solid #F2F3F4;
        border-radius: 15px;
        width: 30px;
        background-color: #F2F3F4;
    }

    #hal-app #btn-resume:before {
        display: inline-block;
        font-size: 14px;
        font-family: "FontAwesome";
        content: "\f04b";
        color: #BDC6CD;
        margin-left: -2px;
        margin-top: -2px;
    }

    #hal-app #btn-stop {
        height: 30px;
        border: 1px solid #F2F3F4;
        border-radius: 15px;
        width: 30px;
        background-color: #F2F3F4;
    }

    #hal-app #btn-stop:before {
        display: inline-block;
        font-size: 14px;
        font-family: "FontAwesome";
        content: "\f04d";
        color: #BDC6CD;
        margin-left: -4px;
        margin-top: -2px;
    }


    #hal-app .btn-default {
        margin: 3px;
    }
    #hal-app #hal-start-button {
        height: 35px;
        border: 1px solid #2094fa;
        border-radius: 50%;
        width: 35px;
        background-color: #2094fa;
        margin-top: 2px;
        margin-left: 10px;
    }

    #hal-start-button:before {
        display: inline-block;
        font-size: 18px;
        font-family: "FontAwesome";
        content: "\f130";
        color: #fff;
        margin-left: -1px;
        margin-top: 0px;
    }

            .Blink {
        animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
        background-color: red !important;
    }

    @keyframes blinker {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

#hal-app .compared_text.start{
  display: inline;
}

#hal-app .bot-note{
  display: inline;
}
#hal-app .bot-note-splitter{
  margin-bottom: 10px;
}

#hal-app .modal-body img{
  max-width: 500px
}

#hal-app .modal{
  top: 10% !important;
}
#hal-app .modal-header{
  display: block;
}