@mixin Gradient-horisontal($from-color, $to-color){
  background: $from-color;
  background: -moz-linear-gradient(left, $from-color 0%, $to-color 100%);
  background: -webkit-linear-gradient(left, $from-color 0%, $to-color 100%);
  background: linear-gradient(to right, $from-color 0%, $to-color 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$from-color', endColorstr='$to-color',GradientType=1 );
}
@mixin Rotate($deg){
  transform: rotate($deg + deg);
  -webkit-transform: rotate($deg + deg);
  -moz-transform: rotate($deg + deg);
  -ms-transform: rotate($deg + deg);
  -o-transform: rotate($deg + deg);
}
.chat-wrapp {
  position: fixed;
  //bottom: 89px;
  //bottom: 20px;
  bottom: 0;
  right: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 17px;
    height: 100%;

  &.disabled {
    .chat-hidden-wrapp {
      display: none;
    }
    .chat-ico {
      display: block;
    }
    right: 47px;
    height: auto;
    bottom: 89px;
    padding-bottom: 0;


  }

  * {
    box-sizing: border-box;
  }

}

.chat-ico {
  display: none;
  float: right;
  width: 52px;
  height: 52px;
  border-radius: 100%;
  cursor: pointer;
  box-shadow: -5px 11px 24px 0px rgba(198, 233, 237, 0.75);
  border: 4px solid #fff;
  position: relative;
  @include Gradient-horisontal(#2573a7, #0ea5d7);

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("../images/message-chat.svg");
    background-size: 24px 21px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  &:hover {
    @include Gradient-horisontal(#0ea5d7, #2573a7);
  }
}

.chat-hidden-padding {
  height: 100%;
  padding: 20px 0;
}

.chat-hidden-wrapp {
  width: 286px;
  border-radius: 4px;
  border-bottom: 12px solid #0fa2d5;
  box-shadow: -5px 11px 24px 0px rgba(198, 233, 237, 0.75);
  margin-bottom: 20px;
  overflow: hidden;

  height: 100%;
  margin-bottom: 0;
}
.chat-hidden {
  padding: 16px 12px 16px 12px;
  height: 100%;
  background: #fff;
}

.chat-hidden-close {
  height: 56px;
  position: relative;
  background: #2572a6 url("../images/bg-chat.png") 50% 50% no-repeat;
  z-index: 7;
  div {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-image: url("../images/close-chat.svg");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 1 !important;
    &.close {}
    &.back {
      right: 40px;
      background-image: url("../images/chat-arrow-left.svg");
      background-size: 7px 12px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
  }
  span {
    color: #fff;
    text-transform: uppercase;
    line-height: 56px;
    padding-left: 26px;
  }
}

.chat-scroll {
  //height: 256px;
  height: 100%;
  position: relative;

}

.chat-start-btn {
  text-align: center;
  margin-top: 16px;
  &:first-child {
    margin-top: 0;
  }
  span {
    display: inline-block;
    width: 160px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 40px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    @include Gradient-horisontal(#2573a7, #0ea5d7);
    &:hover {
      @include Gradient-horisontal(#0ea5d7, #2573a7);
    }
  }
}

.chat-start-wrapp {
  //padding-top: 74px;
}

.chat-questions-wrapp {
  padding-right: 18px;
}

.chat-questions {
  margin-top: 12px;
  &:first-child {
    margin-top: 0;
  }
  div {
    @include Gradient-horisontal(#2573a7, #0ea5d7);
    color: #fff;
    border-radius: 4px;
    padding: 11px 14px 25px 14px;
    cursor: pointer;
    position: relative;
    &:hover {
      @include Gradient-horisontal(#0ea5d7, #2573a7);
    }

    p {
      margin: 0;
    }
    a {
      color: #2572a6 !important;
      text-decoration: none !important;
      &:hover {
        text-decoration: underline !important;
      }
    }

  }
  &.has-questions {
    > div {
      &:before {
        width: 12px;
        height: 7px;
        background-image: url("../images/chat-arrow-bottom.svg");
        background-size: 12px 7px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        content: '';
        position: absolute;
        bottom: 10px;
        right: 14px;
        display: block;
        @include Rotate(0);
      }
    }
  }

  .chat-questions {
    display: none;
    background: none !important;
    padding: 0;
    margin-top: 2px;
    div {
      background: #f5f5f5;
      color: #787a7a;

    }
    &.has-questions {
      > div {
        &:before {
          background-image: url("../images/chat-arrow-bottom-blue.svg");
        }
      }
    }
    .chat-questions {
      padding-left: 16px;
    }
  }
  &.show {
    > .chat-questions {
      display: block;
    }
    > div {
      &:before {
        @include Rotate(-180);
      }
    }
  }
}




/********************************scrollBar**********************/


/*
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE
------------------------------------------------------------------------------------------------------------------------
*/

.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }

.mCustomScrollBox{ /* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr;
}

.mCSB_container{ /* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto;
  //padding-right: 12px;
}



/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_inside > .mCSB_container{
  /*margin-right: 30px; */
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */

.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
  position: absolute;
  width: 10px;
  height: auto;
  left: auto;
  top: 0;
  right: 11px;
  bottom: 0;
  z-index: 5;
}

.mCSB_outside + .mCSB_scrollTools{ right: -5px; } /* scrollbar position: outside */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

.mCSB_scrollTools .mCSB_draggerRail{
  width: 2px;
  height: 100%;
  margin: 0 auto;

}

.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
  cursor: pointer;
  width: 100%;
  /*height: 30px; !* minimum dragger height *!*/
  height: 200px;
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
  position: relative;
  width: 8px;
  height: 100%;
  margin: 0 auto;

  text-align: center;


}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }




/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
  -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
  -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s,
  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
  opacity .2s ease-in-out, background-color .2s ease-in-out;
  -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s,
  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
  opacity .2s ease-in-out, background-color .2s ease-in-out;
  -o-transition: width .2s ease-out .2s, height .2s ease-out .2s,
  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
  opacity .2s ease-in-out, background-color .2s ease-in-out;
  transition: width .2s ease-out .2s, height .2s ease-out .2s,
  margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
  margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
  opacity .2s ease-in-out, background-color .2s ease-in-out;
}



/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/

/*
----------------------------------------
6.1 THEMES
----------------------------------------
*/

/* default theme ("light") */

.mCSB_scrollTools{ opacity: 1;}

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

.mCSB_scrollTools .mCSB_draggerRail{
  background: #f5f5f5 !important;
  opacity: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  opacity: 1;
  background: #95d7e0 !important;
  border-radius: 10px;
}


.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{

  opacity: 1;
}



.mCSB_scrollTools .mCSB_buttonUp{
  background-position: 0 0;
  /*
  sprites locations
  light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
  dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
  */
}

.mCSB_scrollTools .mCSB_buttonDown{
  background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft{
  background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight{
  background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }


/* theme: "dark" */

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }


.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }

.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }

/* ---------------------------------------- */

/* ---------------------------------------- */

@media (max-width: 991px) {
  .mCSB_outside + .mCSB_scrollTools {
    //right: -17px;
  }
}
/********************************end scrollBar**********************/