body {
  position: relative;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
}

.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.d-flex {
  display: flex !important;
}
#chat-lowes {
  left: auto;
  z-index: 3000
}

@media screen and (min-width:768px) {
  #chat-lowes {
    overflow: hidden;
    right: 10%;
    -webkit-transition: left 1s;
    -o-transition: left 1s;
    transition: left 1s
  }

  #chat-lowes.modal-open {
    right: calc(10% + 15px)
  }
}

@media screen and (max-width:767px) {
  #chat-lowes {
    bottom: 20%;
    right: 0;
    width: 42px
  }

  #chat-lowes .chat-welcome {
    width: 225px
  }

  #chat-lowes .chat-min {
    background-color: #fff;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 42px;
    padding: 8px 0;
    text-align: center
  }

  #chat-lowes .chat-min:before {
    background: url("https://dev.lowescdn.com/dev0034/node/lowesca/store-locator-ca/1.0.4/icon-chat.png") 0 0 no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 26px;
    width: 30px;
    margin-bottom: -38px;
    padding-bottom: 30px
  }

  #chat-lowes .chat-min:after {
    color: #999;
    content: "Live";
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding-top: 30px
  }

  #chat-lowes .chat-min .help,
  #chat-lowes .chat-min>img {
    display: none
  }

  #chat-lowes .chat-min .close {
    display: inline-block;
    font-size: 10px;
    margin-left: -30px
  }

  #chat-lowes .chat-offline {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 42px;
    padding: 8px 0;
    text-align: center
  }

  #chat-lowes .chat-offline:before {
    background: url("https://dev.lowescdn.com/dev0034/node/lowesca/store-locator-ca/1.0.4/icon-chat.png") 0 0 no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    height: 26px;
    width: 30px;
    margin-bottom: -38px;
    padding-bottom: 30px;
    opacity: .5
  }

  #chat-lowes .chat-offline:after {
    color: #fff;
    content: "Live";
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding-top: 30px
  }

  #chat-lowes .chat-offline .help,
  #chat-lowes .chat-offline>img {
    display: none
  }

  #chat-lowes .chat-offline .close {
    display: inline-block;
    font-size: 10px;
    margin-left: -30px
  }

  #chat-lowes .chat-offline>p:not(.close) {
    font-size: 0;
    z-index: 200;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
  }
}

@media print {
  #chat-lowes {
    display: none
  }
}

#chat-lowes.hide {
  left: calc(100% + 65px)
}

#chat-lowes:focus {
  outline: none
}

@media screen and (max-width:767px) {
  #chat-lowes.open {
    height: 100%;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: auto;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
  }

  #chat-lowes.open>div {
    height: 100%
  }

  #chat-lowes.open .chat-welcome {
    height: 100%;
    width: inherit
  }

  #chat-lowes.open .chat-body {
    height: calc(100% - 50px - 74px);
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  #chat-lowes.open .chat-min+.chat-welcome {
    max-height: 100% !important
  }
}

#chat-lowes.open .chat-min {
  display: none !important
}

#chat-lowes.open .chat-min+.chat-welcome {
  max-height: 380px
}

.chat-min,
.chat-offline,
.chat-welcome {
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  width: 320px
}

.chat-min button,
.chat-offline button,
.chat-welcome button {
  cursor: pointer
}

.chat-min,
.chat-offline {
  cursor: pointer;
  height: 60px
}

@media screen and (min-width:768px) {

  .chat-min p:not(.close),
  .chat-offline p:not(.close) {
    line-height: 35px;
    color: #fff;
    padding-right: 10px;
    padding-left: 10px;
    margin: 5px 10px 0
  }

  .chat-min img,
  .chat-offline img {
    padding-right: 4px
  }

  .chat-min p.close,
  .chat-offline p.close {
    padding-top: 5px
  }

  .chat-min p.close .icon-close,
  .chat-offline p.close .icon-close {
    color: #fff
  }
  .icon-close:before {
    content: url("https://dev.lowescdn.com/dev0034/node/lowesca/store-locator-ca/1.0.4/close.png");
  }
  .icon-keyboard_arrow_down:before {
    content: url("https://dev.lowescdn.com/dev0034/node/lowesca/store-locator-ca/1.0.4/keyboard_arrow_down.png");
    vertical-align: sub;
  }
}

.chat-min img,
.chat-min p,
.chat-offline img,
.chat-offline p {
  display: inline-block;
  margin: 0
}

.chat-min p:not(.close),
.chat-offline p:not(.close) {
  color: #fff;
  font-size: 20px;
  line-height: 38px;
  margin: 5px 15px 0
}

.chat-min img,
.chat-offline img {
  width: 75px;
  padding-left: 5px;
}

.chat-min {
  background-color: #0471af
}

.chat-offline {
  background-color: #ccc
}

.chat-offline p {
  color: #fff
}

.chat-welcome {
  color: #fff;
  font-family: Helvetica, sans-serif;
  max-height: 0;
  overflow-y: hidden;
  text-align: center
}

.chat-welcome p {
  margin: 0
}

.chat-welcome .chat-header {
  background-color: #0471af;
  height: 50px;
  position: relative
}

.chat-welcome .chat-header p {
  font-size: 16px;
  line-height: 50px
}

.chat-welcome .chat-header [class*=icon-],
.chat-welcome .chat-header [class^=icon-] {
  color: #fff;
  cursor: pointer;
  font-size: 25px;
  font-weight: 700;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 15px
}

.chat-welcome .chat-body {
  background-color: #004990;
  height: 256px;
  padding-top: 20px
}

.chat-welcome .chat-body img {
  display: block;
  margin: 0 auto;
  margin-bottom: 15px
}

.chat-welcome .chat-body p {
  font-size: 18px
}

.chat-welcome .chat-footer {
  background-color: #fff;
  height: 74px;
  padding: 15px
}

.chat-welcome .chat-footer button {
  background-color: #0471af;
  border: none;
  color: #fff;
  font-size: 14px;
  height: 44px;
  width: 160px;
  margin: 0 auto;
  text-transform: uppercase
}
@media screen and (max-width:767px) {
  .chat-welcome {
    padding-bottom: 37px
  }
}