.iframe{
    position: fixed;
    z-index: 999;
    height: 101%;
    width:102%;
    left: -3px;
}
.intro {
    display: none;
}
.is-visiblenew {
    display: none;
}


.fabs {
    bottom: 140px;
    position: fixed;
    margin: 1em;
    right: 0px;
    z-index: 998;
}

.deep-orange .fab {
    background: #083d59;
    border: 1px solid #FFF;
    color: #eceff1;
}

.fab>i {
    font-size: 2em;
    line-height: 55px;
    transition: all .2s ease-in-out;
}

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

.zmdi-close:before {
    content: '\f00d'!important;
}

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

.fab {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    color: #263238;
    margin: 25px auto 0;
    padding: 20px 5px 0 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    cursor: pointer;
    transition: all .1s ease-out;
    position: relative;
    z-index: 998;
    overflow: hidden;
}

.float-animation {
    animation: float 2s ease-out ;
}
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}


  /* Style for the hovering div */
  .hoveringDiv {
    /* display: none; */
    height: 22px;
    position: relative;
    /* color: #292929; */
    background-color: #000d;
    border: 1px solid #ccc;
    padding: 10px;
    width: 150px;
    top: 20;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 2px 20px 2px 20px; /* Add border-radius for a curvy look */
    transition: transform 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    animation: moveUpDown 1s infinite alternate; 
}

.hoveringDiv p{
    color: white;
    font-weight: bold; /* Bold text */
    letter-spacing: 1px;
    text-shadow: 1px 8px 3px rebeccapurple; /* Text shadow */
    /* box-shadow: 0 0 20px rebeccapurple; */
    display: flex;
    position: relative;
    top: -20px;
    left: 22px;
    font-size: 14px;
    align-items: center;
}

.hoveringDiv p span {
    font-size: 1.5em; /* Adjust the size of the emoji */
  }

@keyframes moveUpDown {
    from {
        transform: translate(0%, -40%);
    }
    to {
        transform: translate(0%, -20%); /* Adjust the vertical position for the top of the animation */
    }
}
.move {
    animation: moveUp 2s forwards;
  }

  .chat {
    position: fixed;
    top: 50%;
    right: -5%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 430px;
    height: 100%;
    max-height: 600px;
    z-index: 1031;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 10px;
    animation: form-entry 2s ease-in-out;
    display: -webkit-box;
    /* display: -ms-flexbox; */
    display: none;
    /* display: flex; */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.minimized{
    height: 15%;
    top: 75%;
    animation: shrink-height 0.5s forwards;
}

@keyframes shrink-height {
    from {
        height: 100%;
        top:50%;
    }
    to {
        height: 15%;
        top: 75%;
    }
}
.maxim{
    height: 100%;
    top: 50%;
    animation: expand-height 0.5s forwards;
}

@keyframes expand-height {
    from {
        height: 15%;
        top:75%;
    }
    to {
        height: 100%;
        top: 50%;
    }
}

@media only screen and (min-width: 200px) {
    .chat {
      background-color: lightblue;
      width: 99%;
      /* left: 50%; */
      right: -49%;
      top: 56%;
      
    }
  }
@media only screen and (min-width: 300px) {
    .chat {
      background-color: lightblue;
      width: 98%;
      right: -48%;
      /* left: 50%; */
      top: 58%;
      
    }
  }

@media only screen and (min-width: 400px) {
    .chat {
      background-color: lightblue;
      top: 50%;
      width: 400px;
      right: -47%;
      /* left: 50%; */
      
    }
  }
  @media only screen and (min-width: 500px) {
    .chat {
        
        top: 50%;
        /* left: 65%; */
        right: -5%;
        width: 430px;
      
    }
  }