/* *
 * LibAnswers uses an iFrame
 * it also uses a JS function to size the HTML within the iFrame
 * so we need to set some styles outside of the widget first
 * * Other styles can only be accessed from within that iFrame
 * * They are included in the widget "Custom CSS" field
 * *   https://albany.libanswers.com/admin/chatbrowse?m=x&id=18654
 * */


 .s-lch-widget-float {
  bottom: unset;
  top: 0;
  padding: 3.5em 0em 4em 0em; 
}

.s-lch-widget-float-btn.online {
  top: 0;
  position: fixed;
  border-radius: 0;
  width: 4em;
  height: 3.875em;
  padding: 1em;
  box-shadow: 0.1em 0.2em 0.5em transparent; 
}

.s-lch-widget-float-btn.online:focus {
  outline: 1px dotted #eeb211;
}

.s-lch-widget-float-btn path {
  fill: rgba(70,22,107,1);
  stroke: transparent;
  animation: slow-reminder-animation;
  animation-delay: 60s;
  animation-duration: 60s;
  animation-iteration-count: 2;
} 

.s-lch-widget-float-btn .dots path {
  fill: rgba(21,140,144,1);
  stroke:  rgba(21,140,144,1);   /*teal #158c90 */
  animation: dots-animation;
  animation-delay: 8s;
  animation-duration: 2s;
  animation-iteration-count: 4;
} 


@keyframes pulse-animation {
  0%,10%,30%,50%,70%,100% {
    box-shadow: 0 0 0.1em 0em rgba(238, 178, 17, 0.15);
    transform: scale(100%);
  }
  20% {
    box-shadow: 0 0 0 .33em rgba(238, 178, 17, 0.5);
    transform: scale(102%);
  }
  60% {
    box-shadow: 0 0 0 .33em rgba(238, 178, 17, 0.5);
    transform: scale(107%);
  }
}


@keyframes slow-reminder-animation {
  0%,6%,9%,15%,100% {
    fill: rgba(70,22,107,1);
    transform: scale(100%);
    transform-origin: center;
   }
  3% {
    fill: rgb(50, 14, 77);
    transform: scale(115%);
    transform-origin: center;
  }
  12% {
    fill: rgb(117, 44, 173);
    transform: scale(110%);
    transform-origin: center;
  }
}



@keyframes dots-animation {
  0% {
    fill: rgba(21,140,144,1);
    stroke:  rgba(21,140,144,1);   /*teal #158c90 */
   }
  50% {
    fill: rgba(255,255,255,1);
    stroke:  rgba(255,255,255,1);   /*teal #158c90 */
  }
 
  75%,100% {
    fill: rgba(21,140,144,1);
    stroke:  rgba(21,140,144,1);   /*teal #158c90 */  
  }
}




.s-lch-widget-float.open {
  width: 100vw!important;
  top: 3em !important;
  padding: 0px !important;
  bottom: 4em !important;
  height: unset !important;
}

.s-lch-widget-float-load {
  box-shadow: 0.1em 0.2em 0.5em #000;
  border-radius: 0px!important;
  border: 0px solid rgb(221, 221, 221)!important;
}

.s-la-widget {
  max-height: 75vh;
}


@media (max-width: 500px) {
  .s-lch-widget-float.open .s-lch-widget-float-btn {
      display: block!important;
      margin-top: 0em!important;
      opacity: 0.5;
  }
}
@media all and (min-width: 768px) {

  .s-lch-widget-float.open {
    top: 4em !important;
    bottom: 1px !important;
    width: 50vw!important;
    height: auto!important;
    padding: 1em !important;
  }
  .chatpane {
      width: 88%;
   }

    #client_question { height: 10em; }
    #branding_247 a.nav-link {
        display: none!important;
    }

  .s-lch-widget-float-btn { border: 1px solid transparent; padding-top:0.85em; font-size: 1.66em; height: 3.25em; width: 3.25em; border-radius: 3.25em; transition: all .5s; }

  .s-lch-widget-float-btn:hover {
      transform: scale(110%);
  }

  .s-lch-widget-float-btn[aria-expanded="true"] {
      transform: scale(80%);
      opacity: 0.5; 
  }

  .s-lch-widget-float-btn.online {
      top: unset;
      position: relative;
      /* box-shadow: 0.1em 0.2em 0.5em #ccc; */
      padding:0.85em 0.75em 0.75em 0.75em; font-size: 1.66em; height: 3.25em; width: 3.25em; border-radius: 3.25em; transition: all .5s; 
      border: 1px solid transparent;
      box-shadow: 0 0 0.1em 0em rgba(238, 178, 17, 0.15);
      animation: pulse-animation;
      animation-delay: 5s;
      animation-duration: 10s;
      animation-iteration-count: 1;
  }
  
  .s-lch-widget-float {
      bottom: 0;
      top: unset;
      padding: 33% 1em 0em 0em; 
  }

  #primoExploreRoot .s-lch-widget-float {
    bottom: 6em;
    padding-right: .05em;
  }

  .s-lch-widget-float-btn {
      bottom: 1em;
      z-index: 10;
  }

  .s-lch-widget-float-load.expanded { z-index: 100; }

  #client_question { height: 12em; }

  .chatpane {
     width: 88%; padding-top: 1em;
  }
  .s-la-widget .btn-xs {margin-bottom: 2em;}

}



@media all and (min-width: 992px) {

  .s-lch-widget-float {
      bottom: 0;
      top: unset;
      padding: 4.5em 1em 0em 0em; 
  }

  
  #primoExploreRoot .s-lch-widget-float {
    bottom: 6em;
    padding-right: .05em;
  }

  .s-lch-widget-float.open {
      width: 30vw!important;
  }

}
