/*===========================================================

 Copyright (c) 2023 Flerosoft (https://flerosoft.com)
 Software Name: Floating Help Center | Advanced jQuery Plugin
 Version: 1.0.0
 Product Page : https://floatinghelpcenter.flerosoft.com
 Documentation: https://floatinghelpcenter.flerosoft.com/docs
 Changelog: https://floatinghelpcenter.flerosoft.com/docs
 Description: Floating Help Center is a lightweight and robust jQuery plugin that helps to create a knowledge base or collection of documentation that typically includes answers to frequently asked questions, how-to guides, and troubleshooting instructions. 
===========================================================*/

/*=================================================
  Table of Contents
=================================================

  1. Fonts Import
  2. Reset CSS
  3. Floating Help Center
    4. Floating Button
    5. Floating Popup
    5.3 HTML Content(Detailed CSS is in floatinghelpcenter.theme.css)
    5.4 External Link
    6. Media Queries

=======================================================*/

/* =================================== */
/*  1. Fonts Import
/* =================================== */

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-regular.woff") format("woff");
}

@font-face {
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/open-sans-regular-italic.woff") format("woff");
}

@font-face {
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/open-sans-semibold.woff") format("woff");
}

@font-face {
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-bold.woff") format("woff");
}

@font-face {
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/source-sans-pro-regular.woff") format("woff");
}

/* =================================== */
/*  2. Reset CSS
/* =================================== */

.floating-help-center abbr,.floating-help-center address,.floating-help-center article,.floating-help-center aside,.floating-help-center b,.floating-help-center blockquote,.floating-help-center canvas,.floating-help-center caption,.floating-help-center cite,.floating-help-center code,.floating-help-center dd,.floating-help-center del,.floating-help-center details,.floating-help-center dfn,.floating-help-center div,.floating-help-center dl,.floating-help-center dt,.floating-help-center em,.floating-help-center fieldset,.floating-help-center figcaption,.floating-help-center figure,.floating-help-center footer,.floating-help-center form,.floating-help-center h1,.floating-help-center h2,.floating-help-center h3,.floating-help-center h4,.floating-help-center h5,.floating-help-center h6,.floating-help-center header,.floating-help-center hgroup,.floating-help-center i,.floating-help-center iframe,.floating-help-center img,.floating-help-center ins,.floating-help-center kbd,.floating-help-center label,.floating-help-center legend,.floating-help-center li,.floating-help-center mark,.floating-help-center menu,.floating-help-center nav,.floating-help-center ol,.floating-help-center p,.floating-help-center pre,.floating-help-center q,.floating-help-center samp,.floating-help-center section,.floating-help-center small,.floating-help-center span,.floating-help-center strong,.floating-help-center sub,.floating-help-center summary,.floating-help-center sup,.floating-help-center table,.floating-help-center tbody,.floating-help-center td,.floating-help-center tfoot,.floating-help-center th,.floating-help-center thead,.floating-help-center time,.floating-help-center tr,.floating-help-center ul,.floating-help-center var{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
.floating-help-center article,.floating-help-center aside,.floating-help-center details,.floating-help-center figcaption,.floating-help-center figure,.floating-help-center footer,.floating-help-center header,.floating-help-center hgroup,.floating-help-center main,.floating-help-center nav,.floating-help-center section,.floating-help-center summary{display:block;}
.floating-help-center [hidden]{display:none;}
.floating-help-center a:focus{outline:thin dotted;}
.floating-help-center a:active,.floating-help-center a:focus,.floating-help-center a:hover{outline:0;}
.floating-help-center abbr[title]{border-bottom:1px dotted;}
.floating-help-center b,.floating-help-center strong{font-weight:700;}
.floating-help-center dfn,.floating-help-center em,.floating-help-center i{font-style:italic;}
.floating-help-center li{list-style:none;}
.floating-help-center hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;}
.floating-help-center code,.floating-help-center kbd,.floating-help-center pre,.floating-help-center samp{font-family:monospace, serif;}
.floating-help-center pre{white-space:pre-wrap;}
.floating-help-center q{quotes:"\201C""\201D""\2018""\2019";}
.floating-help-center small{font-size:80%;}
.floating-help-center sub,.floating-help-center sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline;}
.floating-help-center sup{top:-8px;}
.floating-help-center sub{bottom:-4px;}
.floating-help-center img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
.floating-help-center svg:not(:root){overflow:hidden;}
.floating-help-center figure{margin:0;}
.floating-help-center fieldset{border:1px solid silver;margin:0 2px;padding:5px 10px 12px;}
.floating-help-center legend{border:0;padding:0;}
.floating-help-center button,.floating-help-center input,.floating-help-center select,.floating-help-center textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
.floating-help-center button,.floating-help-centerinput{line-height:normal;outline:0;border:none;}
.floating-help-center button,.floating-help-center select{text-transform:none;}
.floating-help-center button,.floating-help-center html input[type="button"],.floating-help-center input[type="reset"],.floating-help-center input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
.floating-help-center button[disabled],.floating-help-center html input[disabled]{cursor:default;}
.floating-help-center input[type="checkbox"],.floating-help-center input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;}
.floating-help-center button::-moz-focus-inner,.floating-help-center input::-moz-focus-inner{border:0;padding:0;}
.floating-help-center textarea{overflow:auto;vertical-align:top;}
.floating-help-center table{border-collapse:collapse;border-spacing:0;}
.floating-help-center td{vertical-align:top;}

/* =================================== */
/*  3. Floating Help Center
/* =================================== */

.floating-help-center__btn,
.floating-help-center__btn *,
.floating-help-center__btn :before,
.floating-help-center__btn :after,
.floating-help-center__popup,
.floating-help-center__popup *,
.floating-help-center__popup :before,
.floating-help-center__popup :after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialised;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Segoe UI,
    segoe ui, SegoeUI, Segoe, Helvetica, Arial, sans-serif;
  position: relative;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#floatingHelpCenter.floating-help-center {
  color: #0e1318;
}

/* =================================== */
/*  4 Floating Button
/* =================================== */
.check-overlay {
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: -8px;
  right: -8px;
}

.floating-help-center__btn {
  position: fixed;
  bottom: 300px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}
.floating-help-center__btn .btn {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
}
.floating-help-center__btn .btn:before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: transparent url("../img/help-icon.svg") center center no-repeat;
  background-size: 30px auto;
  -webkit-background-size: 30px auto;
  -moz-background-size: 30px auto;
  -o-transition: 0.4s ease all;
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
}
.floating-help-center__btn .btn:after {
  content: "";
  opacity: 0;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: transparent url("../img/x-icon.svg") center center no-repeat;
  background-size: 14px auto;
  -webkit-background-size: 14px auto;
  -moz-background-size: 14px auto;
  -o-transition: 0.4s ease all;
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  -ms-transform: scale(0) rotate(-360deg);
  transform: scale(0) rotate(-360deg);
  -webkit-transform: scale(0) rotate(-360deg);
  -moz-transform: scale(0) rotate(-360deg);
}

.floating-help-center__btn .helper-txt {
  position: absolute;
  right: 100%;
  background-color: #f5f7f9;
  top: 0;
  letter-spacing: -0.03em;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
  -webkit-box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
  -moz-box-shadow: 0 6px 8px 2px rgba(0, 0, 0, 0.14);
  -o-transition: 0.4s ease all;
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
}

.floating-help-center__btn .helper-txt strong {
  font-weight: 600;
}

.floating-help-center__btn .floating-help__icon {
  max-width: 34px;
  width: 100%;
}

.floating-help-center__btn.floating-help-center__popup--active .btn:before {
  opacity: 0;
  -ms-transform: scale(0) rotate(360deg);
  transform: scale(0) rotate(360deg);
  -webkit-transform: scale(0) rotate(360deg);
  -moz-transform: scale(0) rotate(360deg);
}

.floating-help-center__btn.floating-help-center__popup--active .btn:after {
  opacity: 1;
  -ms-transform: scale(1) rotate(0deg);
  transform: scale(1) rotate(0deg);
  -webkit-transform: scale(1) rotate(0deg);
  -moz-transform: scale(1) rotate(0deg);
}

.floating-help-center__btn.floating-help-center__popup--active .helper-txt {
  -ms-transform: translate(0, 15px);
  transform: translate(0, 15px);
  -webkit-transform: translate(0, 15px);
  -moz-transform: translate(0, 15px);
  opacity: 0;
  visibility: hidden;
}
@media only screen and (min-width: 992px) {
  .floating-help-center__btn {
    right: 7px;
  }
  .floating-help-center__btn .helper-txt {
    font-size: 13px;
    margin-right: 7px;
    width: 164px;
    padding: 9px 10px;
  }
  .floating-help-center__btn .btn {
    width: 56px;
    height: 56px;
  }
}

/* =================================== */
/*  5 Floating Popup
/* =================================== */
body.fhc-lock-scroll {
  overflow: hidden;
}

.floating-help-center__popup {
  width: 330px;
  min-height: 300px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  bottom: 102px;
  right: 25px;
  background: #f5f7f9;
  opacity: 0;
  visibility: hidden;
  -ms-transform: translate(0, 50px);
  transform: translate(0, 50px);
  -webkit-transform: translate(0, 50px);
  -moz-transform: translate(0, 50px);
  -o-transition: 0.4s ease all;
  transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  will-change: transform, visibility, opacity;
  max-width: calc(100% - 50px);
}

.floating-help-center__popup.floating-help-center__popup--active {
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-height: auto;
}

.floating-help-center__popup svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* =================================== */
/*  5.3 HTML Content(Detailed CSS is in floatinghelpcenter.theme.css)HTML Content
/* =================================== */

.floating-help-center__popup .html-content {
  padding: 16px;
  height: auto;
  max-height: 380px;
  overflow-y: auto;
}

/* =================================== */
/*  5.4 External Link
/* =================================== */

.floating-help-center__popup .external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
}
.floating-help-center__popup .no-result {
  padding: 8px;
  margin-bottom: 10px;
  text-align: center;
}

.floating-help-center__popup .external:hover {
  background-color: rgba(64, 87, 109, 0.07);
}

.floating-help-center__popup .external .external__link {
  font-size: 16px;
  color: #0e1318;
  font-weight: 600;
  width: 100%;
}

.floating-help-center__popup .external .external__arrow {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}

/* =================================== */
/*  6. Media Queries
/* =================================== */
@media only screen and (max-width: 991px) {
  .floating-help-center__btn {
    bottom: 120px;
    left: 7px;
  }
  .floating-help-center__btn .helper-txt {
    font-size: 12px;
    width: 150px;
    left: 100%;
    margin-left: 7px;
    padding: 5px 3px 5px 8px;
  }
  .floating-help-center__btn .btn {
    width: 48px;
    height: 48px;
  }
  .floating-help-center__popup {
    /** max-width: 100%; **/
    width: 100%;
    /** left: 0; **/
    top: 52px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
  }
  .floating-help-center__popup .html-content {
    max-height: calc(100% - 120px);
  }
  .floating-help-center__popup .help-list {
    max-height: calc(100% - 120px);
  }
}