.help__desk-submit{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  border-radius: 4px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  line-height: 1.5;
}
.help__desk-submit:hover, .help__desk-button:hover{
  opacity: .9;
}

.help__desk-open-icon{            
  animation-duration: 4s;
  animation-iteration-count:infinite; 
}
@keyframes example {
  0%   {transform: rotateY(0deg)}
  100%  {transform: rotateY(360deg)}
}

.help__desk-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  font-weight: 700;
  z-index: 2;
  font-size: 16px;
  color: #fff;
  padding: 20px 30px;
  margin: 20px;
}
.help__desk-loader{
  padding-left: 4px;
}
.help__desk-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  background-color: #f8f8f8;
}

.help__desk-contact-more {
  margin-bottom: 12px;
}
.help__desk-question{
  margin-top: 12px;
}

.help__desk-contact{
  margin-top: 6px;
}

.help__desk-component{
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  border: 1px solid #dee2e6; 
  border-radius: 6px; 
  background-color: #fff; 
  box-shadow: 1px 1px 8px #ccc;
  margin-bottom: 16px;
}

.help__desk-scroll::-webkit-scrollbar{
    width: 5px;
}

.help__desk-scroll::-webkit-scrollbar-thumb{
  background-color: gray;	
  border-radius: 5px;
}
.help__desk-faq-component,
.faq-category-component,
.help__desk-category-component{
  color: white; 
  display: flex; 
  align-items: center; 
  padding: 16px; 
  justify-content:space-between
}
.help__desk-scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5;
}
.help__desk-icon:hover{
  border: 1px solid #ccc;
  border-radius: 4px;
}
.help__desk-text{
  transform: rotate(-90deg);
  white-space: nowrap;
}
.help__desk-hi{
  font-size: 30px;
  text-align: start;
  margin: 0;
}

.help__desk-height{
  max-height: 600px; 
  overflow-y: auto;
  overflow-x: hidden;
}
.help__desk-faq--main{
  height: 600px;
  background-color: white; 
  position:relative; 
  padding-bottom: 1px; 
  border-radius: 6px;
}

.help__desk-container{
  display: none;
  position: fixed;
  bottom: 100px;
  width: 370px;
  border-radius: 10px 0 0 10px;
  background-color: white;
  z-index: 5;
  background-color: #f8f8f8;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
}
.help__desk-search-main{
  display: flex; 
  align-items:center; 
  justify-content:space-between;
  border: 1px solid #ccc; 
  border-radius: 20px; 
  overflow: hidden; 
  height: 36px
}
.help__desk-list-faq,
.help__desk-list-category{
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 8px;
  max-height: 190px;
}
.help__desk-search-input{
  display: flex; 
  border: none !important; 
  outline: none !important;
  font-size: 16px !important;
  flex: 1;
  height: 36px !important;
  box-shadow: none;
  margin: 0 !important;
} 
.help__desk-search{
  padding-top: 16px
}
.help__desk-item-category {
  cursor: pointer;
  font-size: 13px;
  display: flex; 
  align-items:center; 
  justify-content:space-between;
  padding: 8px 24px;
  border-bottom: 1px solid #dee2e6;
  font-weight: 700;
}
.help__desk-faq-title{
  word-break:keep-all; 
  font-weight: 400; 
}
.feature-faq-category-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.help__desk-item {
  cursor: pointer;
  font-size: 13px;
  display: flex; 
  align-items:center; 
  justify-content:space-between;
  padding: 8px 24px;
  color: #000;
}
.help__desk-faq-height{
  padding: 16px 0; 
  overflow-x: hidden; 
  overflow-y: auto; 
  max-height: 525px
}
.help__desk-item:hover,
.feature-faq-hover:hover,
.help__desk-item-category:hover{
  background-color: #e9edf1;
  color: #000 !important;
}
.help__desk-background{
  border-radius: 0 0 26% 26%; 
  min-height: 200px;
  position: relative;
  z-index: 2;
}
.custom-scroll::-webkit-scrollbar{
  width: 5px;
  background-color: #F5F5F5;
}
  
.custom-scroll::-webkit-scrollbar-thumb {
  background-color: gray;	
  border-radius: 5px;
}

.help__desk-textarea{
  padding: 8px;
  max-width: 100%;
  min-width: 100%;
  min-height: 120px;
  max-height: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  box-shadow: none;
}
.help__desk-info{
  border: 1px solid #ccc;
  border-radius: 4px;
}
.help__desk-input{
  width: 100%;
  padding: 8px; 
  border-radius: 4px; 
  outline: none; 
  border: none; 
  font-size: 16px;
  font-family: inherit;
  line-height: 1.5;
  box-shadow: none;
}
.help__desk-icon{
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: flex;
}
.help__desk{
  font-size: 16px;
  z-index: 5;
}
.help__desk-body{
  padding: 16px 16px 0 16px;
  background-color: #f8f8f8;
}
.help__desk-button{
  display: flex;
  align-items:center;
  justify-content: center;
  width: 60px; 
  height: 60px;
  border-radius: 50%; 
  cursor:pointer;
  position:fixed; 
  bottom: 20px; 
  z-index: 5;
}
.send_faq-contact-link{
  padding: 8px; 
  border-radius: 4px;
  display: flex; 
  justify-content: center; 
  align-items: center;
  margin-left: 28px;
}
.send_faq-contact-instagram{
  border-radius: 4px;
  margin-left: 28px;
}
.help__desk-label{
  margin-bottom: 4px;
  font-weight: 700;
  color: #5c6282;
  text-align: start;
}
@media only screen and (max-height: 730px) {
  .help__desk-height,
  .help__desk-faq--main{
    height: calc(100vh - 130px); 
  }
  .help__desk-faq-height{
    height: calc(100vh - 203px); 
  }
}
@media only screen and (max-height: 630px) {
  .help__desk-container{
    bottom: 0;
  }
  .help__desk-height,
  .help__desk-faq--main{
    height: calc(100vh - 30px); 
  }
  .help__desk-faq-height{
    height: calc(100vh - 103px); 
  }
}
@media only screen and (max-width: 500px) {
  .help__desk-container{
    display: none;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: white;
    /* <% if (messagesSetting.aligment_faq_messages === 'left') { %>
        left: 0;
    <% } %>
    <% if (messagesSetting.aligment_faq_messages === 'right') { %>
        right: 0;
    <% } %>     */
    overflow-y: auto;
    bottom: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: white;
  }
}
@media only screen and (max-width: 400px) {
  .help__desk-container{
    width: 100vw;
    left: 0;
    right: 0;
  }
}