#chat-window {
    position: fixed;
    bottom: 0;
    right: 20px;
    background-color: white;
    border-radius: 4px 4px 0 0;
    transform: translateY(0);
    transition: all ease 350ms;
    height: 400px;
    width: 400px;  
    max-width: 80%;
    z-index: 9999999;
    box-shadow: 8px 8px 20px rgb(0 0 0 / 16%);
}

#chat-window::before {
    content: '';
    display: block;
    border-radius: 5px 5px 0 0;
    height: 4px;
    background-image: linear-gradient(44.19deg, #0ae90a 100%, #66CB66 50%);
}

#chat-window .chat-window-header {
    color: #2E3C50;
    font-family: 'Work Sans';
    cursor: pointer;
    padding: 15px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32px;
    font-weight: 600;
  	font-size: 24px;
}

#chat-window.is-close {
    transform: translateY(81%);
    background: linear-gradient(82.6deg, #66CB66 28.25%, #9BDD9B 100%) !important;
  	border: none;
  	height: 280px;  
}

#chat-window.is-close::before{
	content: '';
    display: block;
    border-radius: 5px 5px 0 0;
    height: 0;
}

#chat-window.is-close:hover {
    background: #54AA5C;
}

#chat-window.is-close .if-open,
#chat-window:not(.is-close) .if-close{
    display: none;
}

#chat-window .chat-window-body {
    padding: 15px 35px 30px;
    text-align: center;
}



#chat-window .chat-window-body a {
    display: block;
    font-family: "Work Sans",sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #66CB66;
    text-transform: none;
    margin-bottom: 15px;
    transition: all 150ms ease;
    text-decoration: none;
    border-radius: 1px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
  	border: solid 1px #66CB66;
    padding: 15px;
}

#chat-window .chat-window-body a:last-child {
    margin-bottom: 0;
}

#chat-window .chat-window-body a:hover {
    background-color: #80D480;
  	border-color: #54AA5C;
    color: white;
}
#chat-window .chat-window-body a .fab {
	margin-right: 3px;
}

#chat-window .chat-window-header span.if-open {
    margin-top: -165px;
    margin-right: -30px;
    background-color: white;
    border-radius: 99px;
    width: 35px;
    height: 35px;
    text-align: center;
}

#chat-window span.if-open > i.fa.fa-times {
    padding-top: 6px !important;
}

#chat-window.is-close > .chat-window-header {
    color: white !important;  
    padding-top: 15px !important;
  	font-size: 18px;
}

#chat-window i.fa.fa-comment-alt{
    visibility: hidden;
}

@media (max-width: 48em){
	#chat-window {
      min-height: 80%;
      max-width: 100%;
      right: 0;
      width: 48em;      
  	}
  
    #chat-window.is-close {
      height: 35px;
      min-height: 45%;
      max-width: 22%;
  	}
  
  	#chat-window i.fa.fa-comment-alt,
	#chat-window.is-close > .chat-window-header{
      visibility: hidden;
	}
  
  	#chat-window.is-close i.fa.fa-comment-alt {
      visibility: visible;
      position: absolute;
	}
}