/*************************************2021.9.29 更新样式***************************************************************/
/*Chapter Hover*/
.chapter-pse {
  margin: 1.6em;
  position: relative;
  background-color: #fff !important;
  font-weight: 400;
}
.chapter-pse:hover {
  border-radius: 10px;
  box-shadow: 4px 8px 55px 0px rgba(147,167,186,0.2);
  transform: scale(1.1);
  cursor: pointer;
}
.chapter-hover {
  overflow: hidden;
  display: inline-block;
  font-weight: 400;
  position: relative;
  margin: 1.6em;
  position: relative;
  background-color: #fff !important;
}
.chapter-hover:hover{
  border-radius: 10px;
    box-shadow: 4px 8px 55px 0px rgba(147,167,186,0.2);
}

.chapter-hover:hover p {
  margin-top:20px;
  line-height:20px;
}

.chapter-hover-image {
  transition: transform 0.3s ease;    
  height: 80px;
  margin-bottom: 10px;
}

.chapter-hover:hover .chapter-hover-image {
  transform: scale(0.8);
  transform-origin: top center; /* 设置变换的基点为顶部中心 */
}
.hover-text {
  position: absolute;
  top: 75%;
  left: 45%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  min-width: 190px;
}
.chapter-hover:hover .hover-text {
  opacity: 1;
}
/*Chapter Hover End*/

/*NEW PSE Chapter Hover*/
/* 默认样式 */
.new-chapter-pse, .new-chapter-hover {
  width: 210px; /* 固定宽度 */
  height: 140px; /* 固定高度 */
  margin: 1.6em;
  position: relative;
  background-color: #fff !important;
  font-weight: 400;
  border: 1px solid #ffffff; /* 边框 */
  border-radius: 10px; /* 圆角框 */
  padding: 10px; /* 内边距稍微减少，以适应固定高度 */
  box-sizing: border-box;
  box-shadow: 1px 4px 25px 0px rgba(147, 167, 186, 0.2); /* 阴影 */
  text-align: center; /* 文字居中 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 让文字底部对齐 */
  align-items: center; /* 水平居中 */
}

/* 固定宽度且保持原始比例的图片样式 */
.new-chapter-hover .new-chapter-hover-image {
  width: 110px;  /* 固定宽度 */
  height: auto; /* 高度自动，根据宽度自适应 */
  object-fit: contain; /* 保持图片的比例并适应容器 */
  border-radius: 5px; /* 图片圆角 */
  margin-bottom: 10px; /* 增加图片与文字之间的间距 */
}

/* 文字样式 */
.new-chapter-hover .new-hover-text {
  font-size: 14px;
  color: #007bff; /* 默认蓝色 */
  cursor: pointer; /* 鼠标指针效果 */
  transition: text-decoration 0.3s ease; /* 平滑过渡 */
  width: 190px; /* 确保文字宽度不超过框的宽度 */
  margin-top: 0; /* 取消 margin-top，让文字底部对齐 */
}

/* 悬浮时文字颜色不变，添加下划线 */
.new-chapter-hover .new-hover-text:hover {
  color: #007bff; /* 颜色不变 */
}

/* 点击后跳转的链接样式 */
.new-chapter-hover .new-hover-text a {
  color: inherit; /* 继承父级颜色 */
}

.new-chapter-hover .new-hover-text a:hover {
  text-decoration: underline; /* 悬浮时加下划线 */
}

/*PSE Chapter Hover End*/
.bgcolor {

  background-color: #0098f0;
  color: #fff;
  
  }

thead.thead {
  background-color: #006ee1;
  color: #fff;
}

/* 去除默认 图片hover 样式 */

img.image:not(img[usemap]) {
  opacity: 1 !important;
}

/*scrolling banner*/
.text-notices {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 700px;
  max-width: 90%;
  margin: 8px auto 0;
}
.text-notices-zh {
  margin: 8px 0 0 65px;
}
.text-notices .swiper {
  width: 100%;
}
.text-notices .swiper-wrapper {
  height: 30px;
  position: relative;
}
.text-notices .swiper-slide {
  position: absolute;
  display: none;
}
.text-notices .swiper-slide:first-child {
  display: block;
}
.text-notices a {
  font-size: 16px;
  color: #101f3a !important;
  text-decoration: none;
  line-height: 28px;
  position: relative;
  display: flex;
  align-items: center;
}
.text-notices a:hover {
  text-decoration: underline;
}
.text-notices .notify-svg {
  width: 22px;
  margin-right: 10px;
}
.text-notices .new-svg {
  width: 40px;
  margin-left: 8px;
}
.text-notices a:before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../images/notify-blue.svg) center no-repeat;
  background-size: cover;
  margin-right: 0;
  position: relative;
  top: 0;
}
.text-notices a::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 16px;
  background: url(../images/new.svg) center no-repeat;
  background-size: cover;
  margin-left: 10px;
  position: relative;
}

/* 标签 - YCM 手册有用到 */

.tag-improved {
  background: #DCF5EA;
  color: #21BF73;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 0.5rem;
  font-weight: 500;
}

.tag-new {
  background: #FDE7DF;
  color: #F36F39;
  padding: 4px;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 0.5rem;
  font-weight: 500;
}

.tag-update {
    margin: 30px 0 20px;
    font-weight: 600;
    font-family: Manrope;
    font-size: 20px;
    position: relative;
    width: fit-content;
}

.tag-update::after {
    content: "";
    width: 65px;
    height: 30px;
    background: url("../images/p-series-title-images/update.png")
    no-repeat center;
    position: absolute;
    right: -78px;
    bottom: 0px;
    background-size: contain;
}

.tag-deprecated {
  background: #646d71;
  color: #fff;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 1rem;
}

.tag-wrapper {
  display: flex;
  align-items: stretch; /* 让 blue-line 高度自动撑满 tag-cfd */
}

.blue-line {
  width: 3px;
  background-color: #0AB3FF;
  border-radius: 2px;
  margin-right: 5px;
}

.tag-cfd {
  background: #D6F2FF;
  color: #0AB3FF;
  padding: 5px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  margin-right: 0.5rem;
}
/* P系列软件版安装手册-about this guide 样式 */

.rno-learning-path-item {
  position: relative;
  box-sizing: border-box;
}
.rno-learning-path-inner {
  padding-left: 70px;
  position: relative;
}
.rno-learning-path-inner::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #e3e8ed;
  position: absolute;
  left: 28px;
  top: 0;
  z-index: 5;
}

.rno-learning-path-wrap
  .rno-learning-path-item:last-child
  .rno-learning-path-inner::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e1e6f0;
  position: absolute;
  left: 19.5px;
  bottom: 0;
}
.rno-learning-path-head {
  line-height: 32px;
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 10;
}
.rno-learning-path-icon {
  width: 42px;
  height: 42px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  border: 4px solid #fff;
  background-color: #fff;
}
.rno-learning-path-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #333;
  line-height: 28px;
  font-weight: 500;
}
.rno-learning-path-item .rno-learning-path-section:last-child {
  padding-bottom: 48px;
}
.rno-learning-path-section {
  padding-top: 4px;
  padding-bottom: 20px;
  overflow: hidden;
}
.rno-learning-path-section-title {
  display: block;
  font-size: 16px;
  color: #000;
  line-height: 26px;
  font-weight: 400;
}

.learning-path-title {
  font-size: 20px;
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: #3d4a59;
  /* margin-left: -2rem; */
}

.rno-learning-path-item .no-space {
  margin-left: 0;
}

/* P系列软件版安装手册-about this guide 样式 */

.rno-learning-path-item {
  position: relative;
  box-sizing: border-box;
}
.rno-learning-path-inner {
  padding-left: 70px;
  position: relative;
}
.rno-learning-path-inner::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #e3e8ed;
  position: absolute;
  left: 24px;
  top: 0;
  z-index: 5;
}

.rno-learning-path-wrap
  .rno-learning-path-item:last-child
  .rno-learning-path-inner::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e1e6f0;
  position: absolute;
  left: 19.5px;
  bottom: 0;
}
.rno-learning-path-head {
  line-height: 32px;
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 10;
}
.rno-learning-path-icon {
  width: 42px;
  height: 42px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  border: 4px solid #fff;
  background-color: #fff;
}
.rno-learning-path-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #333;
  line-height: 28px;
  font-weight: 500;
}
.rno-learning-path-item .rno-learning-path-section:last-child {
  padding-bottom: 48px;
}
.rno-learning-path-section {
  padding-top: 4px;
  padding-bottom: 20px;
  overflow: hidden;
}
.rno-learning-path-section-title {
  display: block;
  font-size: 16px;
  color: #000;
  line-height: 26px;
  font-weight: 400;
}

.learning-path-title {
  font-size: 20px;
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: #3d4a59;
  /* margin-left: -2rem; */
}

.rno-learning-path-item .no-space {
  margin-left: 0;
}

/* topic archive */
.archive-learning-path-item {
  position: relative;
  box-sizing: border-box;
}
.archive-learning-path-inner {
  padding-left: 70px;
  position: relative;
}
.archive-learning-path-inner::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: #e3e8ed;
  position: absolute;
  left: 34px;
  top: 0;
  z-index: 5;
}

.archive-learning-path-wrap
  .archive-learning-path-item:last-child
  .archive-learning-path-inner::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e1e6f0;
  position: absolute;
  left: 30px;
  bottom: 0;
}
.archive-learning-path-head {
  line-height: 32px;
  position: absolute;
  left: 8px;
  top: 0;
  z-index: 10;
}
.archive-learning-path-icon {
  width: 50px;
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
  border: 4px solid #fff;
  background-color: #fff;
}
.archive-learning-path-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #333;
  line-height: 28px;
  font-weight: 500;
}
.archive-learning-path-item .archive-learning-path-section:last-child {
  padding-bottom: 48px;
}
.archive-learning-path-section {
  padding-top: 4px;
  padding-bottom: 20px;
  overflow: hidden;
}
.archive-learning-path-section-title {
  display: block;
  font-size: 16px;
  color: #000;
  line-height: 26px;
  font-weight: 400;
}

.learning-path-title {
  font-size: 18px;
  line-height: 51px;
  margin-top: 20px;
  margin-bottom: 5px;
  color: #3d4a59;
  /* margin-left: -2rem; */
}

.archive-learning-path-item .no-space {
  margin-left: 0;
}

/* topic 右边导航样式 */
/* .wh_topic_toc {
  border-left: 2px solid #f6f7f9 !important;
  margin-left: 0;
  padding-left: 0.5em;
  position: sticky;
  top:100px;
  max-height: 500px;
  overflow-y: auto;
} */
.wh_content_area nav#wh_topic_toc {
  padding: 40px 0 100px 0;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc {
  position: sticky;
  top: 20px;
  width: 80%;
  border-left: none;
}
.wh_content_area nav#wh_topic_toc .wh_topic_toc ul {
    max-height: 532px;
    overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
  height:10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: #9d9d9d;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #757575;
}
.wh_content_area nav#wh_topic_toc .wh_topic_toc .wh_topic_label {
  margin-top: 10px;
  margin-bottom: 10px;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc li.section-item {
  position: relative;
  margin: 0;
  padding: 8px;
  line-height: 22px;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc li.section-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 1.5px;
  height: 100%;
  background: rgba(213, 223, 233, 1);
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc li.section-item .section-title a {
  color: #303c42;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc li.section-item .section-title a.current_node {
  text-decoration: none;
  color: #006ee1;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc li.section-item:has(a.current_node)::before {
  background: rgba(0, 110, 225, 1);
}

#go2top {
  background-color: #000;
  border-radius: 2em;
  padding: 4px 14px;
  margin-right: -20px;
}
.oxy-icon-up:before {
  content: "";  
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../images/top-1.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-left: -3px; 
} 
/* 目录收缩 */
.navbar-close {
    cursor: pointer;
    width: 40px;
    display: block;
    padding-bottom: 20px;
    position: relative; 
}

.navbar-close::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 44px;
    width: 40px;
    height: 40px;
    background: url('../images/close-banner.svg') no-repeat center center;
    background-size: contain;
    z-index: 1;
}
.navbar-close img {
    visibility: hidden; 
}
.navbar-open {
  width: 60px;
  height: 40px;
}
.navbar-open::before {
    content: "";
    position: absolute;
    top: 84px;
    cursor: pointer;
    left: 44px;
    width: 40px;
    height: 40px;
    background: url('../images/open-navbar.png') no-repeat center center;
    background-size: contain;
    z-index: 1;
}
.navbar-open img {
    visibility: hidden; 
}
.topic-close {
  width: 40px;
  height: 40px;
}
.topic-close::before {
    content: "";
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url('../images/open-navbar.png') no-repeat center center;
    background-size: contain;
}
.topic-close img {
    visibility: hidden; 
}
.topic-open-fixed {
  position: absolute; 
  top: 285px; 
  right: 40px; 
  z-index: 9999; 
  width: 40px; 
  cursor: pointer;
}
.topic-open-fixed::before {
    content: "";
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: url('../images/topic-open.png') no-repeat center center;
    background-size: contain;
}
.topic-open-fixed img {
    visibility: hidden; 
}
/*引用新字体*/
@font-face {
  font-family: "manrope";
  src: url(./fonts/Manrope-VariableFont_wght.ttf);
  font-display: swap;
}
/* 更改notes图标 */
div.note_restriction {
  background-image: url(../images/notes/restriction.svg) !important;
  background-repeat: no-repeat;
  background-size: 23px 29px;
}
div.note_note {
  background-image: url(../images/notes/note.svg) !important;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
div.note_tip {
  background-image: url(../images/notes/tip.svg) !important;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
div.note_caution {
  background-image: url(../images/notes/caution.svg) !important;
  background-repeat: no-repeat;
}
div.note_danger {
  background-image: url(../images/notes/danger.svg) !important;
  background-repeat: no-repeat;
}
div.note_remember {
  background-image: url(../images/notes/remember.svg) !important;
  background-repeat: no-repeat;
}
div.note_trouble {
  background-image: url(../images/notes/troubleshooting.svg) !important;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}
div.note_warning {
  background-image: url(../images/notes/warning.svg) !important;
  background-repeat: no-repeat;
}
div.note_important {
  background-image: url(../images/notes/important.svg) !important;
  background-repeat: no-repeat;
  background-size: 28px 28px;
}

/*Attached PDF download segment*/
#attached-pdf p{
  font-size: 16px;
}
#attached-pdf hr{
  background: transparent;
  background-color: #e1e4e8;
  border: 0;
  border-bottom-color: #eee;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  height: 0.25em;
  margin: 24px 0;
  overflow: visible;
  overflow: hidden;
  padding: 0;
  width: 85%;
}
.download-file {
  margin-top: 8px;
  margin-bottom: 9px;
  position: relative;
}

.download-file .download-file-container {
  background-color: #fff;
  border: 1px solid #ededf0;
  border-radius: 12px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 90px;
  max-width: 360px;
  padding: 12px;
  /* text-align: left; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.download-file-container .container-1 {
   align-items: center;
   display: flex;
}

.download-file-container .download-icon-1 {
   background-color: #ECECEC;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 50px;
   width: 50px;
}

.download-file-container .download-icon-1 span {
  display: inline-block;
 }
.download-file-container .download-icon-1 a {
  display: block;
  /* font-size: 0; */
  background: url(../images/click-to-download.png) center no-repeat;
  background-size: 50% 50%;
  width: 36px;
  height: 36px;
  margin: 0px 5px 0 6px;
  top: 0;
  cursor: pointer;
}

.download-file-container .download-icon-1 a:hover {
   background: url(../images/click-to-download-blue.png) center no-repeat;
   background-size: 50% 50%;
 }
.download-image {
    height: 30px;
    margin-right: 10px;
    width: auto;
    margin-left: 5px;
}

.download-image img {
    max-width:100%;
}

.download-file-name {
  display: inline-block;
  margin-bottom: 0;
  max-width: 200px;
  overflow: hidden;
  text-align: justify;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 搜索框 */

.p-series-page .search-note-zh {
  font-size: 13px;
  /* font-weight: bold; */
  color: #101f3a;
  margin: 1.2vw 0 0 1.6vw;
  text-align: left;
}

.search_input {
  background: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  float: right;
  margin: 0;
  position: absolute;
  border: 0;
  margin-top: 30px;
}
.migration-banner .wh_search_input #searchForm div {
  width: 723px;
  height: 67px;
  background-color: #fff;
  box-shadow: 0px 0px 36px 0px rgba(0, 95, 195, 0.07);
  border-radius: 33px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
  padding-right: 2px;
}

.wh_main_page .wh_search_input #searchForm div {
  width: 723px;
  height: 56px;
  background-color: #fff;
  box-shadow: 0px 0px 36px 0px rgba(0, 95, 195, 0.07);
  border-radius: 10px;
  margin: 40px auto 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: space-between;
  padding-right: 2px;
}
div #searchForm > div {
  width: 100%;
}
.wh_search_page input[type="search"],.wh_topic_page input[type="search"] {
  background: #fff url(https://help.yeastar.com/resources/images/search.svg) no-repeat 20px;
  border-radius: 3px;
  padding: 10px 8px 10px 50px;
  border: 1px solid #d5dfe9;
  border-radius: 33px;
} 
input[type="search"]::-webkit-input-placeholder {
  color: #ccc; 
}
input[type="search"] {
  background: #fff url(https://help.yeastar.com/resources/images/search.svg)
    no-repeat 6px;
  border-radius: 3px;
  padding: 10px 8px 10px 32px;
  border: 1px solid #0098d9;
}
.wh_search_button {
  display: none;
}
.back-home {
  position: absolute;
  top: 0;
  left: -60px;
  border: 1px solid #d5dfe9;
  border-radius: 50%;
  background: #ffffff;
}
.back-home a {
  color: #fff;
}
.back-home img {
  width: 42px;
  /* visibility: hidden;  */
}
/* ----------------- PSE部署平台样式 begin --------------- */
.module-name {
  font-weight: 600;
  margin-top: 20px;
}

.cloud-platforms,
.virtual-machines,
.hardware-servers {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
}

.cloud-platforms,
.virtual-machines{
  padding-bottom: 30px;
  border-bottom: 1px solid #E2E2E2;
}

.cloud-platform-item,
.virtual-machine-item,
.hardware-server-item {
  padding: 24px 26px 24px 21px;
  width: 245px;
  border-radius: 21px;
  border: 1px solid #e7e8eb;
  transition: border-color 0.2s ease;
}

.cloud-platform-item:hover,
.virtual-machine-item:hover,
.hardware-server-item:hover {
  border-color: #006ee1;
}

.cloud-platform-img,
.virtual-machine-img,
.hardware-server-img {
  display: flex;
  align-items: center;
  height: 38px;
  max-height: 100%;
}

.cloud-platform-name,
.virtual-machine-name,
.hardware-server-name {
  margin-top: 0.84vw;
  margin-bottom: 0.84vw;
}

/* hover */
.hover-content {
  display: flex;
  align-items: flex-end;
  min-height: 55px;
  font-size: 14px;
  color: #006ee1;
}
.hover-content a:hover {
  text-decoration: underline;
}

.hover-content .default {
  display: inline-block;
}

.hover-content .hover-links {
  display: none;
}

.cloud-platform-item:hover .hover-content .hover-links,
.virtual-machine-item:hover .hover-content .hover-links,
.hardware-server-item:hover .hover-content .hover-links {
  display: inline-block;
}

.cloud-platform-item:hover .hover-content .default,
.virtual-machine-item:hover .hover-content .default,
.hardware-server-item:hover .hover-content .default {
  display: none;
}
/* ----------------- PSE部署平台样式 end --------------- */
/* about this guide */

.guide-chapters-new .chapter {
  min-width: 95px;
}

.guide-chapters-new-en .chapter {
  min-width: 128px;
}

.guide-chapters {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: wrap;
}
.phone-chapters {
  justify-content: space-between;
}
.chapter {
  font-weight: 400;
  position: relative;
  /*margin:1.6em 1.6em 1.6em 0;*/
  margin: 1.6em;
  position: relative;
  background-color: #fff !important;
}
.chapter_image {
  width: 60px;
  height: 60px;
  /* position:absolute;
    */

  -webkit-border-radius: 50%;
  box-shadow: 0 1.6px 3.6px 0 hsl(0deg 0% 0% / 13%),
    0 0.3px 0.9px 0 hsl(0deg 0% 0% / 11%);
  border: 1px solid hsla(0, 0%, 100%, 0);
  display: block;
  margin: 0 auto 20px;
}

.chapter_image_install {
  height: 80px;
  /* position:absolute;
    */
  margin: 10px 0 0 0;
}
.chapter_text {
  position: relative;
  width: 100%;
}
.chapter_title {
  font-size: 1.1em;

  text-align: center;
}
.chapter_title a {
  color: #3d4a59 !important;
}
.chapter_title a:hover {
  color: #0081cc !important;
}
.chapter_title span {
  display: block;
  width: 100%;
}
.phone-chapter {
  text-align: center;
  margin: 1.6rem auto;
  width: 33%;
  border: 1px solid #fff;
  border-radius: 12px;
  background: #fff;
  transition: 
    background 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
}

.phone-chapter:hover {
  border: 1.5px solid #006ee1;
  background: #f0f6ff;
  box-shadow: 0 2px 8px rgba(30, 136, 229, 0.10);
}

.phone-chapter a:hover {
  text-decoration: underline;
}

.phone-chapter img {
  width: 165px;
  height: auto;
  margin: 3rem auto;
}

.back-gray {
  background-color:#f6fdff;
  padding: 1vw 0 1vw;
  margin: 6vw auto 6vw;
}
div[data-id="getting-started"] > div > .chapter_image {
  background: url("../images/p-series-title-images/getting-started-new.png")
    no-repeat center;
  background-size: 50%;
}
div[data-id="dashboard"] > div > .chapter_image {
  background: url("../images/p-series-title-images/dashboard-new.png") no-repeat
    center;
  background-size: 60%;
}
div[data-id="extension"] > div > .chapter_image {
  background: url("../images/p-series-title-images/extension-new.png") no-repeat
    center;
  background-size: 55%;
}
div[data-id="extension-group"] > div > .chapter_image {
  background: url("../images/p-series-title-images/extension-group-new.png")
    no-repeat center;
  background-size: 65%;
}
div[data-id="role"] > div > .chapter_image {
  background: url("../images/p-series-title-images/role-new.png") no-repeat
    center;
  background-size: 60%;
}
div[data-id="linkus-server"] > div > .chapter_image {
  background: url("../images/p-series-title-images/linkus-server-new.png")
    no-repeat center;
  background-size: 60%;
}

div[data-id="ldap-server"] > div > .chapter_image {
  background: url("../images/p-series-title-images/ldap-server.png") no-repeat
    center;
  background-size: 55%;
}
div[data-id="organization"] > div > .chapter_image {
  background: url("../images/p-series-title-images/organization.png") no-repeat
    center;
  background-size: 55%;
}

div[data-id="trunk"] > div > .chapter_image {
  background: url("../images/p-series-title-images/trunk-new.png") no-repeat
    center;
  background-size: 55%;
}

div[data-id="sip-trunk"] > div > .chapter_image {
  background: url("../images/p-series-title-images/sip-trunk.png") no-repeat
    center;
  background-size: 55%;
}

div[data-id="call-control"] > div > .chapter_image {
  background: url("../images/p-series-title-images/call-control-new.png")
    no-repeat center;
  background-size: 47%;
}
div[data-id="system"] > div > .chapter_image {
  background: url("../images/p-series-title-images/system-new.png") no-repeat
    center;
  background-size: 56%;
}
div[data-id="maintenance"] > div > .chapter_image {
  background: url("../images/p-series-title-images/maintenance-new.png")
    no-repeat center;
  background-size: 56%;
}
div[data-id="reports"] > div > .chapter_image {
  background: url("../images/p-series-title-images/reports-new.png") no-repeat
    center;
  background-size: 60%;
}
div[data-id="security"] > div > .chapter_image {
  background: url("../images/p-series-title-images/security-new.png") no-repeat
    center;
  background-size: 50%;
}
div[data-id="call-features"] > div > .chapter_image {
  background: url("../images/p-series-title-images/call-features-new.png")
    no-repeat center;
  background-size: 50%;
}
div[data-id="messaging"] > div > .chapter_image {
  background: url("../images/p-series-title-images/messaging.png")
    no-repeat center;
  background-size: 90%;
}
div[data-id="call-center"] > div > .chapter_image {
  background: url("../images/p-series-title-images/call-center-new.png")
    no-repeat center;
  background-size: 55%;
}
div[data-id="client-permissions"] > div > .chapter_image {
  background: url("../images/p-series-title-images/client-permissions.png")
    no-repeat center;
  background-size: 60%;
}
div[data-id="operator-panel"] > div > .chapter_image {
  background: url("../images/p-series-title-images/operator-panel-new.png")
    no-repeat center;
  background-size: 58%;
}
div[data-id="auto-provisioning"] > div > .chapter_image {
  background: url("../images/p-series-title-images/auto-provisioning-new.png")
    no-repeat center;
  background-size: 65%;
}
div[data-id="contacts"] > div > .chapter_image {
  background: url("../images/p-series-title-images/contacts-new.png") no-repeat
    center;
  background-size: 55%;
}
div[data-id="integration"] > div > .chapter_image {
  background: url("../images/p-series-title-images/integration-new.png")
    no-repeat center;
  background-size: 50%;
}

div[data-id="plan"] > div > .chapter_image {
  background: url("../images/p-series-title-images/plan.png") no-repeat center;
  background-size: 50%;
}

div[data-id="references"] > div > .chapter_image {
  background: url("../images/p-series-title-images/references-new.png")
    no-repeat center;
  background-size: 50%;
}

div[data-id="install-dell"] > div > .chapter_image_install {
  /* background: url("../images/p-series-title-images/dell.png") no-repeat center;*/
  background-size: 35%;
}
div[data-id="install-aws"] > div > .chapter_image_install {
  /*background: url("../images/p-series-title-images/aws.png") no-repeat center;*/
  background-size: 60%;
}
div[data-id="install-hyper-v"] > div > .chapter_image_install {
  /* background: url("../images/p-series-title-images/Microsoft-Hyper-v.png")
      no-repeat center;*/
  background-size: 60%;
}
div[data-id="install-vmware"] > div > .chapter_image_install {
  /*background: url("../images/p-series-title-images/vmware.png") no-repeat center;*/
  background-size: 40%;
}
/*contact-center-guide overview style*/
div[data-id="call-center-admin"] > div > a > .chapter_image, 
div[data-id="messaging-admin"] > div > a > .chapter_image {
  background: url("../images/p-series-title-images/administrator-1.png")
    no-repeat center;
  background-size: 80%;
}

div[data-id="call-center-supervisor"] > div a > .chapter_image {
  background: url("../images/p-series-title-images/supervisor.png")
    no-repeat center;
  background-size: 80%;
}

div[data-id="call-center-agent"]  > div > a  > .chapter_image, 
div[data-id="messaging-agent"] > div > a > .chapter_image {
  background: url("../images/p-series-title-images/pp-partner.png")
    no-repeat center;
  background-size: 80%;
}

.cc-guide-chapters a {
  color: #3d4a59 !important;
}

.cc-guide-chapters div:hover a {
  color: #006ee1 !important;
}
div[data-id="call-center-admin"]:hover,
div[data-id="call-center-supervisor"]:hover,
div[data-id="call-center-agent"]:hover,
div[data-id="messaging-admin"]:hover,
div[data-id="messaging-agent"]:hover {
   transform: scale(1.1);
   transition: transform 0.3s ease-in-out;
}

/*cc guide end*/

.about-this-guide-c .guide-chapters p {
  text-align: center;
}
.about-this-guide-c .guide-chapters a:hover {
  text-decoration: underline;
}
.about-this-guide-c .chapter_image_install {
  margin-bottom: 0;
}
/* 反馈模块 */
#wh_topic_container .wh_content_area #wh_topic_body .feedback {
  padding-top: 20px;
  width: calc(100% - 80px);
  margin-left: 40px;
  max-width: 100%;
  border-top: 1px solid #e9e9eb;
}

#wh_topic_container .wh_content_area #wh_topic_body .feedback .help-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#wh_topic_container .wh_content_area #wh_topic_body .feedback h4 {
  font-size: 32px;
}

#wh_topic_container .wh_content_area #wh_topic_body .feedback h4,
#wh_topic_container .wh_content_area #wh_topic_body .feedback .score {
  margin: 0;
}
.feedback div {
  position: relative;
  margin-bottom: 1px;
}
.feedback div span.email-name,
.feedback div span.message {
  margin-left: 0;
}
.feedback div span.message {
  display: block;
  margin-bottom: 5px;
}
.feedback input[type="radio"],
.feedback input[type="checkbox"] {
  width: 20px;
  height: 20px;
  opacity: 0;
  position: relative;
  top: 8px;
  left: 0;
  margin-top: 0;
}
.feedback::-webkit-input-placeholder {
  color: #d0d0d0;
}
.feedback::-moz-placeholder {
  color: #d0d0d0;
}
.feedback:-ms-input-placeholder {
  color: #d0d0d0;
}
:-input-placeholder {
  color: #d0d0d0;
}
.feedback label {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 8px;
  z-index: -1;
}
.help-radio label {
  border-radius: 50%;
}
.feedback input:checked + label {
  border: 1px solid #0081cc;
  background: #0081cc;
}
.feedback input:checked + label:after {
  position: absolute;
  content: "";
  width: 6px;
  height: 10px;
  top: 2px;
  left: 6px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.help-radio div {
  display: inline-block;
  vertical-align: top;
  width: 130px;
  border-radius: 20px;
  padding: 8px 0;
  margin: 10px 30px 0 0;
  cursor: pointer;
  background-color: #fff;
}
.help-radio div:last-child {
  margin-right: 0;
}
.feedback div span {
  margin-left: 15px;
  position: relative;
  top: 3px;
}
.feedback div.have-help span {
  margin-left: 32px;
  position: relative;
  padding-left: 35px;
  top: 0;
  font-weight: 500;
  font-size: 16px;
}
.help-radio div span:before {
  content: "";
  display: inline-block;
  background: url(../images/good-img.svg) center no-repeat;
  background-size: cover;
  width: 25px;
  height: 25px;
  position: absolute;
  top: -3px;
  left: 0;
}
.help-radio div:hover span {
  color: #fff;
}
.help-radio div:hover span:before,
.help-radio .select-active span:before {
  background-image: url(../images/good-img-active.png);
}
.help-radio div:last-child span:before {
  transform: rotateX(180deg);
}
.help-radio div:hover span,
.help-radio .select-active span {
  color: #006ee1;
}
.help-radio {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
.help-radio h4 {
  margin-right: auto !important; 
 
}
.help-checkbox {
  padding-top: 20px;
  min-height: 545px;
  border-top: 1px solid #e9e9eb;
  display: none;
}
.text-email {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e9e9eb;
}
.text-email input {
  margin-top: 0;
  width: 92%;
  margin-left: 10px;
  border: none;
  border: 1px solid #ccc;
  padding-left: 10px;
}
.text-area {
  margin-top: 15px;
}
.text-area textarea {
  width: 100%;
  height: 100px;
  border: none;
  border: 1px solid #ccc;
  padding-left: 10px;
}
.text-area textarea:focus,
.text-email input:focus {
  outline: none;
  border: 1px solid #0070c0;
}
.feedback {
  border-top: 1px solid #e9e9eb;
  position: relative;
  width: 100%;
  padding: 20px;
  margin-top: 20px;
}
.feedback h4 {
  font-size: 18px;
}
.submit-feedback {
  position: absolute;
  bottom: 25px;
  right: 20px;
  width: 120px;
  padding: 6px 0 7px;
  background-color: #0070c0;
  color: #fff;
  border: 1px solid #0070c0;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: none;
}
.submit-feedback:hover {
  background: #0098d9;
  border-color: #0098d9;
}
.submit-feedback:focus {
  outline: none;
}
.submit-feedback-disabled {
  background-color: #f5f5f6;
  border-color: transparent;
  color: #9b9ea0;
  cursor: no-drop;
}
.submit-success {
  position: absolute;
  right: 20px;
  color: green;
  font-weight: 600;
  display: none;
}
/* 反馈模块 */
.feedback-en {
  border-top: 1px solid #dee2e6;
  padding-top: 40px;
}
.feedback-en h4 {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
}
.button-wrap p {
  display: inline-block;
  vertical-align: top;
  /* border: 2px solid #006ee1; */
  width: 140px;
  border-radius: 20px;
  /* padding: 10px 0 6px; */
  margin: 0 30px 0 0;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  line-height: 40px;
  background: #f6f7f9;
}
.feedback-en .button-wrap p:last-child {
  margin-right: 0;
}
.feedback-en .button-wrap p:hover,
.feedback-en .button-wrap .select-active {
  /* background-color: #006ee1; */
  color: #006ee1;
}
.feedback-en .button-wrap p span {
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto;
  font-weight: 500;
  padding: 3px 0;
}
.feedback-en .button-wrap p span::before {
  content: "";
  display: inline-block;
  background: url(../images/good-img.svg) center no-repeat;
  background-size: cover;
  width: 30px;
  height: 30px;
  margin: -8px 6px 0 0;
}
.help-radio div:hover span {
  color: #006ee1;
}
.feedback-en .button-wrap p:hover span::before,
.feedback-en .button-wrap .select-active span:before {
  background-image: url(../images/good-img-active.png);
}
.feedback-en .button-wrap p:last-child span::before {
  transform: rotateX(180deg);
  margin-top: 0;
  position: relative;
  top: 3px;
}
.feedback-en .button-wrap {
  width: max-content;
  margin: 0 auto 25px;
}
.feedback-en .feedback-tip span {
  font-size: 16px;
  text-align: center;
  display: block;
  color: #303c42;
  display: none;
}
.feedback-en .feedback-tip span a {
  color: #006ee1;
}
/* list 样式 */
li {
  margin-top: 0.3em;
}
li p {
  margin-top: 0.2em !important;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
  display: none !important;
}
/*Version selector*/
.desktop-nav__product-switcher {
  display: inline-block;
  padding-left: 24px;
}
.product-switcher--desktop .product-switcher__menu {
  -webkit-transition: -webkit-box-shadow 83ms;
  transition: -webkit-box-shadow 83ms;
  transition: box-shadow 83ms;
  transition: box-shadow 83ms, -webkit-box-shadow 83ms;
  border: 0;
  padding-bottom: 12px;
  top: 36px;
  width: 9.2rem;
}
.product-switcher__wrapper .product-switcher__menu {
  padding-bottom: revert;
}
.dropdown__menu[aria-hidden="false"] {
  display: none;
}
.dropdown__menu {
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  z-index: 200;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
  display: none;
  overflow: visible;
  top: 52px;
}
#product-switcher__button {
  background: #fff;
  border: none;
}
#product-switcher__button:focus {
  outline-color: rgba(153, 153, 153, 0);
}
li-icon.product-switcher-button__caret:focus {
  outline-color: #fff;
}
#product-switcher__button:hover {
  background: #0099d742;
  border-radius: 12px;
}
.product-switcher-button__caret svg {
  position: relative;
  top: 5px;
  left: 5px;
  transition: all 0.3s;
}
.product-switcher-button__caret.active {
  transform: rotate(180deg);
}
.li-icon[type$="-icon"] {
  width: 24px;
  height: 24px;
}
.product-switcher__wrapper .product-menu__link--selected {
  color: #0073b1;
}
.product-switcher__wrapper .product-menu__link {
  font-size: 1.5rem;
  line-height: 1.42857;
  color: rgba(0, 0, 0);
  font-style: normal;
  width: 100%;
  padding-left: 1.5rem;
}
/*code*/
var.varname {
  font-style: normal;
  color: #ff4975;
}
code {
  padding: 1px 10px;
  color: #e01b1b;
  border-radius: 3px;
  background-color: rgba(224, 27, 27, 0.05);
  font-family: Open Sans;
}
pre code {
    background-color: #F4F7FA;
    padding: 1px;
    font-family: Open Sans;
}
pre {
  background-color: #F4F7FA;
} 
.codeblock {
	font-family: Open Sans;
}

.codeph {
	font-family: Open Sans;
}
pre.codeblock.language-json {
    background-color: #F4F7FA;
}
.hl-json_key {
	color: #F96A38;
}
.hl-string {
	color: #198844;
}
/*PDF Download*/
.wh_content_area nav#wh_topic_toc .wh_topic_toc .view-pdf {
  cursor: pointer;
  display: block;
  position: relative;
  top: 15px;
  padding-left: 30px;
  padding-bottom: 10px;
  margin-bottom: 25px;
  border-bottom: 1px solid rgba(16, 31, 58, 0.1);
  color: #101f3a;
  font-family: 'Open Sans', 'SourceHanSansCN';
  font-weight: 600;
}

.wh_content_area nav#wh_topic_toc .wh_topic_toc .view-pdf::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -5px;
  left: -10px;
  width: 35px;
  height: 35px;
  background: url(../images/pdf.svg) center no-repeat;
  background-size: cover;
}

/* .download-pdf {
  -webkit-tap-highlight-color: transparent;
  color: #3d4a59;
  line-height: 1.5;
  font-family: Roboto-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased !important;
  list-style: none;
  box-sizing: border-box;
  display: inline-block;
  background: url(../images/pdf-download.png) no-repeat;
  background-size: 18px;
  background-position-x: -2px;
  padding-left: 25px;
}
.download-pdf a:hover {
  color: #3167b3;
  text-decoration: underline;
} */
/*安全手册和话机手册中文PDF*/
/* .pdf-download{
  font-size:0;
  display:inline;
}

.pdf-download a{
  display:inline-block;
  padding-left:28px;
  line-height:20px;
  background:url(../images/p-series/pdf-download.png) left center no-repeat;
  background-size:20px 20px;
  text-decoration:none;
  color:#191919 !important;         
  font-size:14px;
  position:relative;
  top:-100px;
  right:12px;
  float:right;
}
.pdf-download a:hover {
  color: #006ee1 !important;
  text-decoration: underline;
} */
/*安全手册和话机手册英文PDF*/
/* .pdf-download-en{
  font-size:0;
  display:inline;
}

.pdf-download-en a{
  display:inline-block;
  padding-left:28px;
  line-height:20px;
  background:url(../images/p-series/pdf-download.png) left center no-repeat;
  background-size:20px 20px;
  text-decoration:none;
  color:#191919 !important;         
  font-size:14px;
  position:relative;
  top:-150px;
  right:12px;
  float:right;
}
.pdf-download-en a:hover {
  color: #006ee1 !important;
  text-decoration: underline;
} */
/*表格样式*/
.tablecap {
  font-size: 14px;
  font-weight: bold;
}
table.table {
  border: 1px solid #8a929a;
  margin: 0;
  width: 100%;       
  table-layout: fixed; 
  border-collapse: collapse;
}
thead.thead {
  background-color: #e0e7ee;
  color: #101f3a;
}
.table thead th {
  text-align:center;
  vertical-align: middle;
  /* border-right: 2px solid #fff; 添加白色竖线 */
  height: 40px; /* 设置表头高度为40px */
}
/* .table thead th:last-child {
  border-right: none; 最后一列不添加竖线
} */
.table td, .table th {
  word-break: break-word;
    white-space: normal;
}
.table tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
}
/* 为表格中除标题行以外的每列右侧添加边框，但最后一列除外 */
/* .table tbody td:not(:last-child) {
  border-right: 1px solid #e7e9eb;
} */
/* 为表格中除标题行以外的每行底部添加边框，但最后一行除外 */
/* .table tbody tr:not(:last-child) {
  border-bottom: 1px solid #e7e9eb;
} */
.simpletable td:not([valign]),
.table td:not([valign]) {
	vertical-align: middle;
}

#hot-standby__advanced-settings {
  background-color: #efefef;
}
/*自定义 section title 样式*/
.sectiontitle {
  border-top: 1px solid #eee;
  font-weight: 600;
  font-size: 20px;
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 16px;
  color: #101f3a;
  padding-left: 0px !important;
  padding: 1em 0 0;
}

.permalink {
  display: none;
}

/*  .wh_expand_btn {
  display: none;
}*/
.webhelp_expand_collapse_sections:focus {
  outline: none !important;
}
.sectiontitle .wh_expand_btn {
  left: 75px;
}
h2.tasklabel {
  border-bottom: 1px solid #eee;
  font-weight: 700;
  font-size: 18px;
  line-height: 36px;
  margin-bottom: 15px;
}
/*自定义example 样式*/
.example {
  border-top: 1.5px solid #425cfb;
  padding-top: 10px;
  margin-top: 20px;
}
/* 变量字体 */

.ddexpand {
	margin: 0.5em 0 0.5em 40px;
 }
/* section title 行高*/
.h2 {
  line-height: 3;
}
/* 强调字体 */
.emphasize {
  font-weight: bold;
  color: red;
}
.importanttitle {
  font-weight: bold;
  color: red;
}
/*Feedback form*/
.feedback-form {
  max-width: 780px;
  margin: 0 0 3rem;
  font-size: 12px;
  position: relative;
  margin-top: -2rem;
  border-top: 1px solid #ccc;
  padding-top: 35px;
}
.show-feedback-form {
  display: none;
  margin-top: 25px;
}
.feedback-form h2 {
  height: 58px;
  line-height: 58px;
  color: #3d4a59;
  padding: 0 20px;
  background: #f4f4f4;
  margin: 0;
  font-size: 12px;
}
.fb-like.fb_iframe_widget {
  display: none;
}
.form_cont .row_dsr p,
.form_cont .row_dsr div {
  float: left;
}
.form_cont .dsr_title {
  width: 130px;
  padding-right: 25px;
  text-align: right;
}
.form_cont .row_dsr .dsr_star {
  padding: 0 8px;
}
.form_cont .row_dsr span {
  float: left;
  display: block;
  width: 17px;
  height: 20px;
  margin-right: 3px;
  cursor: pointer;
  background: url(./Images/icon_star.png) no-repeat 0 50%;
}
.form_cont .choose_answer {
  float: left;
  border-right: 1px solid #ccc;
  margin-right: 21px;
  height: 50px;
  padding: 12px 10px 0 0;
}
.questions {
  padding-top: 2px;
}
.form_cont .choose_answer dt,
.form_cont .choose_answer dd {
  float: left;
}
.form_cont .choose_answer dt {
  font-weight: 300;
  font-size: 22px;
  color: #5f5a5a;
}
.questions > div {
  font-size: 22px;
  color: #5f5a5a;
}
.questions a {
  font-size: 16px;
}
.form_cont .choose_answer dd {
  padding-right: 13px;
  padding-top: 6px;
}
.form_cont .choose_answer dd a {
  display: block;
  padding-left: 25px;
  height: 20px;
  background: url(./Images/icon.png) no-repeat 0 -450px;
  text-decoration: none;
}
.clearfix {
  zoom: 1;
}
.clearfix dt {
  font-weight: normal;
}
.form_cont .row_dsr {
  float: left;
}
.form_cont .row {
  clear: both;
  overflow: hidden;
  padding-top: 15px;
}
.form_cont .row .tit {
  height: 39px;
  line-height: 39px;
  width: 138px;
  text-align: left;
  padding: 0 25px 0 16px;
}
.form_cont .row .tit,
.form_cont .row .enter_text {
  float: left;
}
.form_cont .row textarea {
  width: 621px;
  height: 132px;
  padding: 5px 10px;
  font-size: 14px;
  color: #666;
  line-height: 24px;
  border: 1px solid #e5e5e5;
  overflow: auto;
  resize: none;
  -webkit-transition: all 0.4s;
  outline: none;
}
.form_cont .row .text {
  width: 621px;
  height: 37px;
  font-size: 14px;
  color: #666;
  line-height: 37px;
  padding: 0 10px;
  background: none;
  border: 1px solid #e5e5e5;
  -webkit-transition: all 0.4s;
  margin-top: 0;
}
.form_cont .upload {
  padding: 20px 0 0 118px;
}
.form_cont .upload .btn_upload {
  float: left;
  position: relative;
  height: 25px;
}
.form_cont .upload .btn_upload a {
  display: block;
  height: 25px;
  padding-left: 35px;
  line-height: 25px;
  background: url(./Images/icon.png) no-repeat 0 -300px;
}
.form_cont .upload .upload_file {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  margin-top: 0;
}
.form_cont .upload .tips {
  padding-left: 5px;
  line-height: 25px;
}
.form_cont .upload_list {
  display: none;
  padding-top: 10px;
  padding-left: 0;
}
.form_cont .upload_list li {
  height: 24px;
  line-height: 24px;
  overflow: hidden;
}
.form_cont .upload_list li a,
.form_cont .upload_list li span {
  float: left;
  display: block;
}
.form_cont .upload_list li a {
  margin-left: 5px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  background: url(./Images/btn_delete.png) no-repeat 0 0;
}
.form_cont .submit {
  padding: 10px 0 0 0;
}
.form_cont .submit .btn {
  display: block;
  width: 110px;
  height: 35px;
  line-height: 35px;
  color: #3d4a59;
  text-align: center;
  background: #f3f3f3;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  outline: none;
  padding: 0;
  margin-left: 8.8em;
}
.form_cont .submit .btn:hover {
  color: #fff;
  background: #004277;
  border-color: #004277;
}
.form_cont .row_dsr span.select {
  background-position: 100% 50%;
}
.form_cont .choose_answer dd.cur a {
  background-position: 0 -500px;
}
.form_cont .row textarea:focus,
.form_cont .row .text:focus {
  border: 1px solid #999;
  outline: none;
}
.btn-disabled {
  pointer-events: none;
}
.form_cont .row .red {
  border-color: red;
}
.form_cont .upload_list li a:hover {
  background-position: 0 100%;
}

/*Download PDF button */
.download_pdf {
  background: transparent;
  background-color: transparent;
  font-size: 14px;
  color: #188bf0;
  margin: -4em 0 2em 0;
  padding: 6px 25px;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  float: right;
}
/*自定义wh_titles 风格 */
.wh_tile {
  font-weight: 300;
  position: relative;
  margin: 1.6em;
  padding: 2.8em;
  position: relative;
  background-color: #fff !important;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 20px;
  -moz-transition: box-shadow 0.3s ease;
  -o-transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 1.6px 3.6px 0 hsla(0, 0%, 0%, 0.132),
    0 0.3px 0.9px 0 hsla(0, 0%, 0%, 0.108);
  border: 1px solid hsla(0, 0%, 100%, 0);
}
.wh_tile:hover {
  box-shadow: 0px 2px 10px #5e5e5e;
}
.wh_tile_text {
  position: relative;
  height: 100%;
  overflow: hidden;
  left: 20%;
  text-align: left;
  width: 80%;
}
/*Release Type*/
.blue-tag {
  background: rgba(0, 110, 225, 0.1);
  border-radius: 12px;
  padding: 4px 12px;
  color: #006EE1;
}
.green-tag {
  background: rgba(33, 191, 115, 0.15);
  border-radius: 12px;
  padding: 4px 12px;
  color: #21BF73;
}
/* 设置 wh_title 的背景图片 *******************************/
.wh_tile_image {
  width: 50px;
  height: 50px;
  position: absolute;
}
div[data-id="administrator"] > div > .wh_tile_image {
  background: url("../images/p-series-title-images/administrator.png") no-repeat
    center;
  background-size: 50px;
}
div[data-id="web-client"] > div > .wh_tile_image {
  background: url("../images/p-series-title-images/web-client.png") no-repeat
    center;
  background-size: 50px;
}
div[data-id="installation"] > div > .wh_tile_image {
  background: url("../images/p-series-title-images/installation.png") no-repeat
    center;
  background-size: 50px;
}
div[data-id="call-center-console"] > div > .wh_tile_image {
  background: url("../images/p-series-title-images/call-center.png") no-repeat
    center;
  background-size: 50px;
}
div[data-id="operator-panel"] > div > .wh_tile_image {
  background: url("../images/p-series-title-images/operator-panel.png")
    no-repeat center;
  background-size: 50px;
}
/*middle-nav*/
.mid-nav {
  margin: 0;
  padding: 0;
}
.li-click {
  background: #1c90f6;
  color: #fff !important;
}
.mid-nav a {
  color: #666;
  text-decoration: none;
  width: 24.89%;
  float: left;
  text-align: center;
  padding: 17px 0;
  border-bottom: 2px solid #1c90f6;
  border-left: 1px solid #fff;
  cursor: pointer;
  display: block;
}
.mid-nav a:hover {
  background: #006ee1;
  color: #fff;
}
.contetn-intro {
  text-align: left;
  min-height: 500px;
}
/*
   * ==============================================
   * Skin for oXygen generated WebHelp.
   * ==============================================
   */

/*删除 child links下面的short description*/
.wh_child_links > nav li div {
  display: none;
}
.wh_main_page .container-fluid {
  max-width: 100%;
}
.container-fluid {
  padding: 0 1.2vw;
}
.wh_main_page .container-fluid {
  padding: 0;
}
/* Yeastar  Copyright*/
@media (max-width: 1152px) {
  .content-area {
    padding: 20px 0;
  }
  .footer-left {
    float: initial;
    margin-bottom: 12px;
  }
  .footer-right {
    float: initial;
  }
}
@media (max-width: 767px) {
  .tem-bec-par {
    min-height: 200px;
    padding-top: 20px;
  }
  .tem-bec-par .become-partner-temp {
    font-size: 20px;
    margin: 0 auto;
    line-height: 30px;
  }
  .tem-bec-par .bepartner-now {
    margin-top: 30px;
  }
  .right-content .feedback-content {
    margin-left: 0;
    margin: 0 4px;
  }
  .right-content {
    text-align: left;
  }
  .tem-bec-par .become-partner-temp:first-child {
    margin-top: 0;
  }
   .p-series-page .search-note-zh {
    margin: auto;
  }
} /*
   * ------------------------------------------------------------------
   *  
   * Fonts.
   *  
   */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300");
html,
body {
  min-width: 100%;
}
body {
  font-family: 'Open Sans', 'SourceHanSansCN';
  color: #3d4a59;
  font-size: 16px !important;
}
/*
       * ------------------------------------------------------------------
       *
       * Fight with bootstrap
       */

.navbar-brand {
  height: auto;
}
.navbar {
  border: none;
  border-radius: 0;
  margin: 0;
}
.wh_header {
  background: #000 none;
  color: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 14px;
  display: none;
}
a,
a:hover,
a:visited {
  color: #006ee1;
}
a:hover {
  text-decoration: none;
}
/*
   * ------------------------------------------------------------------
   *  
   * Publication titles
   *  
   */
.wh_publication_title > a {
  color: #fff;
}
/*
   * ------------------------------------------------------------------
   *  
   * Menu
   *  
   */
.wh_top_menu {
  text-transform: uppercase;
  margin: 0.4em 0;
  font-size: 0.9em;
}
.wh_top_menu a {
  color: #fff;
  line-height: 2em;
}
/* The submenus */
.wh_top_menu ul ul {
  background-color: #3d4a59;
}
.wh_top_menu ul li:hover {
  background-color: #3d4a59;
}
.wh_top_menu ul ul li a:hover {
  background: #000;
}
.wh_top_menu ul ul li {
  border-top-color: #000;
  width: 270px;
  text-transform: capitalize;
}
.wh_top_menu ul ul li.has-children:after {
} 

/*
   * ------------------------------------------------------------------
   *  
   * Link to the index.
   * 
   */
.wh_indexterms_link a span {
  display: none;
}
.wh_indexterms_link a:before {
  color: #fff;
}
/*
   * ------------------------------------------------------------------
   *  
   * Breadcrumb
   *  
   */
.wh_breadcrumb ol {
  color: #878787;
}
.wh_breadcrumb ol a {
  color: inherit;
}
.wh_breadcrumb ol .active {
  color: #5185cb;
}
/*
   * ------------------------------------------------------------------
   *  
   * Tools and navigation
   * 
   */
.wh_tools {
  padding: 0 30px;
  margin: 0;
  box-shadow: 0px 3px 7px 0px rgba(48, 60, 66, 0.07);
  z-index: 1;
  background-color: #ffffff;
}
.wh_navigation_links,
.wh_navigation_links .navnext,
.wh_navigation_links .navprev {
}
.webhelp_expand_collapse_sections,
.wh_hide_highlight,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before {
  color: #347bb7;
  text-decoration: none;
}

div .wh_related_links,
.wh_child_links,
.wh_topic_content .related-links,
.wh_child_links {
  border-top: 0px solid #ccc;
}

/*
   * ------------------------------------------------------------------
   *  
   * Tiles
   * 
   */
.wh_tiles {
  display: none;
}
/* 
  You can style some of the tiles in a special way. 
  Example:.wh_tiles *[data-id='getting_started'] {
    background-color:gray;
  }
  */

/*
   * ------------------------------------------------------------------
   *  
   * Search area
   * 
   */
.wh_search_input {
  display: block;
  margin: 0;
  position: relative;
  padding: 40px 15vw;
  padding-left: 350px;
  background-size: 35%;
  background: url(../images/search-bg.png) center no-repeat;
  background-size: cover;
}

.wh_welcome:not(:empty) {
  font-size: 2.9em;
  margin: 0 auto;
  font-family: Roboto, sans-serif;
  padding: 0 0 0.5em 0;
  text-shadow: none;
  font-weight: 300;
  line-height: 1.2em;
}
.wh_main_page .wh_search_input {
  background: none;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  float: right;
  display: none;
}
.wh_search_textfield {
  border: solid 1px #ccc;
  border-radius: 5px;
  padding: 0 0.5em;
  position: relative;
  height: 2.8em;
}
.wh_search_button {
  border: solid 1px #ccc;
  border-radius: 0 5px 5px 0;
  padding: 0 0.5em;
  color: #fff;
  background-color: #c93416;
  height: 2.8em;
}
/* Search autocomplete icons */
.search-autocomplete-proposal-type-history a,
.search-autocomplete-proposal-type-history a:hover,
.search-autocomplete-proposal-type-history a:visited,
.search-autocomplete-proposal-type-history a:active {
  text-decoration: none;
  color: inherit;
  font-size: 0.8em;
}
.ui-state-active .search-autocomplete-proposal-type-history a,
.ui-state-active .search-autocomplete-proposal-type-history a:hover,
.ui-state-active .search-autocomplete-proposal-type-history a:visited,
.ui-state-active .search-autocomplete-proposal-type-history a:active {
  color: #fff;
}
/* Active search page */
#wh-search-pagination > ul > li.active > a {
  background-color: #346ec5;
}
@media only screen and (max-width: 768px) {
  .footer_nav_item:first-child {
    display: block;
    padding: 0;
    border: none;
  }
  .footer_nav_item {
    display: block;
  }
} 

#wh_topic_container {
  position: relative;
  padding: 0;
  max-width: none;
  background: #f7f9fa;
  font-family: 'Open Sans', 'SourceHanSansCN';
  color: #303c42;
}
#wh_topic_container > .row {
  margin: 0;
}

#wh_topic_container > .row .wh_breadcrumb ol {
  color: #303c42;
}

#wh_topic_container > .row .wh_breadcrumb ol .active {
  color: #006ee1;
}

#wh_topic_container > .row .webhelp_expand_collapse_sections[data-next-state="collapsed"]:after {
  color: #303c42;
}

#wh_topic_container table.table {
  table-layout: fixed;
  margin: 16px 0;
  border: 1px solid #8a929a;
  white-space: normal !important;
  /* word-break: break-word; */
}

#wh_topic_container .table thead th {
  vertical-align: middle;
  border-bottom-width: 1px;
}

#wh_topic_container .table td,
#wh_topic_container .table th {
  padding: 1rem;
  word-break: break-word;
}

#wh_topic_container .table td ul {
  padding-left: 20px;
}

#wh_topic_container .table td a,
#wh_topic_container .table td ul li:has(a)::marker {
  /* color: #006ee1; */
  word-break: break-word;
}

/*
   * ------------------------------------------------------------------
   *  
   * Publication TOC
   * 
   */
.wh_topic_toc .wh_topic_label:after{
    content: ""
}
div .wh_publication_toc {
  position: static !important;
  padding: 0px 40px 0 10%;
  background-color: #fff;
}

.wh_publication_toc > ul > li > span > .title > a {
  font-size: 18px;
  font-weight: 600;
}

.wh_publication_toc > ul > li > ul li.active {
  padding: 10px 0;
  background: #f7f9fa;
}

.wh_publication_toc .active > .topicref a {
  font-weight: 600;
  color: #006ee1 !important;
}

.wh_publication_toc span a {
  color: #303c42 !important;
  /* color: #101f3a !important; */
}
@media only screen and (max-width: 767px) {
  .wh_publication_toc {
    border-radius: 0;
    padding: 1em 0.5em;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
  }
  .wh_related_links,
  .wh_child_links,
  .wh_topic_content .related-links {
    border: 1px solid #e0e0e0;
  }
} /* Publication TOC tooltip */
.wh_breadcrumb .topicref .wh-tooltip,
.wh_publication_toc .topicref .wh-tooltip {
  color: #fff;
  font-size: 1.4rem;
  border-radius: 7px;
  box-shadow: 0px 7px 17px 0px rgba(48, 60, 66, 0.1);
  background: rgba(0, 0, 0, 0.75);
}
/* Tooltip arrow. */

.wh_publication_toc .wh-expand-btn:before {
  font-size: 0 !important;
}
.wh_publication_toc span[data-state=expanded] > .wh-expand-btn:before {
  content: "";
  display: inline-block;
  margin-bottom:-3px;
  width: 20px;
  height: 20px;
  background: url(../images/badge-down.png) center/contain no-repeat;
}
.wh_publication_toc span[data-state=collapsed] > .wh-expand-btn:before,
.wh_publication_toc span[data-state=not-ready] > .wh-expand-btn:before {
  content: "";
  display: inline-block;
  margin-bottom:-3px;
  width: 20px;
  height: 20px;
  background: url(../images/badge-right.png) center/contain no-repeat;
}
/* Tooltip arrow. */

[data-tooltip-position="left"] .topicref .wh-tooltip::before {
  /* border-left-color: #5185cb; */
  border-left-color: rgba(0, 0, 0, 0.75);
}
[data-tooltip-position="right"] .topicref .wh-tooltip::before {
  border-right-color:rgba(0, 0, 0, 0.75);
}
[data-tooltip-position="bottom"] .topicref .wh-tooltip::before {
  border-bottom-color: rgba(0, 0, 0, 0.75);
}
[data-tooltip-position="top"] .topicref .wh-tooltip::before {
  border-top-color: rgba(0, 0, 0, 0.75);
}
/*
   *----------------------------
   * Contact Center Guide Styles
   *----------------------------
*/
:root {
  /* 有需要可以抽取成变量 */
  --primary-color: #006ee1;
  --secondary-color: #f7f9fa;
}

/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}
  Reset CSS end */


/* 全局样式 */
body .header .banner {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 433px;
  width: 100%;
  position: relative;
  background-image: url("../images/contact-center-guide/banner.png");
}

body .header .banner-cn {
  background-image: url("../images/contact-center-guide/banner-cn.png");
}

body .header .banner .content {
  max-width: 1200px;
  margin: 0px 349px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}

body .header .banner .content h1 {
  font-family: Manrope;
  font-weight: 600;
  font-size: 45px;
  height: 34px;
  line-height: 34px;
  color: rgb(16, 31, 58);
  margin-top: 131px;
}

body .header .banner .content .description {
  margin-top: 6px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  line-height: 25px;
  width: 29vw;
}

.documentations {
  margin: 0px 24px;
}

.documentations .content {
  max-width: 1200px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.documentations .content > h2, .documentations .content > p {
  text-align: center;
}

.documentations .content > h2 {
  height: 23px;
  font-family: Manrope;
  font-weight: 500;
  font-size: 40px;
  color: rgb(16, 31, 58);
  line-height: 23px;
  margin-top: 113px;
  margin-bottom: 27px;
}

.documentations .content > p {
  height: 13px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 16px;
  color: rgb(48, 60, 66);
  margin-bottom: 40px;
  padding: 0px 24px;
}

.documentations .content .card-container > p {
  height: 11px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  color: rgb(48, 60, 66);
  opacity: 0.8;
  padding: 0px 24px 30px;
}

.documentations .content .card-container .cards {
  display: flex;
  max-width: 525px;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px auto 36px;
}

.documentations .content .card-container .cards-1 {
  max-width: 800px;
}


.documentations .content .card-container .cards .card {
  width: 250px;
  height: 50px;
  background: rgb(247, 249, 250);
  border-radius: 29px;
  text-align: center;
  line-height: 49px;
  font-family: Manrope;
  font-weight: 500;
  font-size: 16px;
  color: rgb(48, 60, 66);
  position: relative;
  z-index: 9999;
}

.documentations .content .card-container .cards .card:hover {
  cursor: pointer;
}

.documentations .content .card-container .cards .card.active {
  background-color: var(--primary-color);
  color: rgb(255, 255, 255);
}

.documentations .content .card-container .cards .card.active::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 0px;
  width: 100%;
  height: 30px;
  z-index: 1;
  background: url("../images/contact-center-guide/tip.png") 0px -43px / cover no-repeat;
}

.documentations .content .card-container .content-wrapper .content {
  display: none;
}

.documentations .content .card-container .content-wrapper .content .btn {
  margin-bottom: 112px;
  display: none;
}

.documentations .content .card-container .content-wrapper .content .btn .a-btn {
  width: 303px;
  height: 38px;
  line-height: 38px;
  background: rgb(255, 255, 255);
  border-radius: 4px;
  border: 1px solid rgb(0, 110, 225);
  margin-bottom: 112px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  color: rgb(0, 110, 225);
  text-decoration: none;
  padding: 8px 22px;
}

.documentations .content .card-container .content-wrapper .content.active {
  display: block;
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .content.active .btn {
  display: block;
}

.documentations .content .card-container .content-wrapper .roles {
  border-bottom: 1px solid #f2f4f6;
  display: flex;
  max-width: 462px;
  margin: 0 auto;
}
.documentations .content .card-container .content-wrapper .roles button {
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #fff;
  width: 84px;
  flex: 1;
  font-family: Manrope;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 20px;
  bottom: -1px;
  position: relative;
}
.documentations .content .card-container .content-wrapper .roles button.active {
  color: #006ee1;
  border-bottom: 2px solid #006ee1;
}
.documentations .content .card-container .content-wrapper .roles button.active .icon {
  background-color: #006ee1;
}

.documentations .content .card-container .content-wrapper .roles button .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  margin: 0px auto 14px;
}

.documentations .content .card-container .content-wrapper .roles button[data-role="administrator"] .icon, 
.documentations .content .card-container .content-wrapper .roles button[data-role="omni-administrator"] .icon, 
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-administrator"] .icon {
  background: url("../images/contact-center-guide/administrator.svg") center center / contain no-repeat rgb(247, 249, 250);
}

.documentations .content .card-container .content-wrapper .roles button[data-role="administrator"].active .icon, 
.documentations .content .card-container .content-wrapper .roles button[data-role="omni-administrator"].active .icon,
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-administrator"].active .icon {
  background: url("../images/contact-center-guide/administrator-active.svg") center center / contain no-repeat rgb(0, 110, 225);
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .roles button[data-role="supervisor"] .icon,
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-supervisor"] .icon
 {
  background: url("../images/contact-center-guide/supervisor.svg") center center / contain no-repeat rgb(247, 249, 250);
}

.documentations .content .card-container .content-wrapper .roles button[data-role="supervisor"].active .icon,
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-supervisor"].active .icon
 {
  background: url("../images/contact-center-guide/supervisor-active.svg") center center / contain no-repeat rgb(0, 110, 225);
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .roles button[data-role="agent"] .icon, 
.documentations .content .card-container .content-wrapper .roles button[data-role="omni-agent"] .icon,
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-agent"] .icon
 {
  background: url("../images/contact-center-guide/agent.svg") center center / contain no-repeat rgb(247, 249, 250);
}

.documentations .content .card-container .content-wrapper .roles button[data-role="agent"].active .icon, 
.documentations .content .card-container .content-wrapper .roles button[data-role="omni-agent"].active .icon,
.documentations .content .card-container .content-wrapper .roles button[data-role="outbound-agent"].active .icon
 {
  background: url("../images/contact-center-guide/agent-active.svg") center center / contain no-repeat rgb(0, 110, 225);
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .role-content {
  display: none;
  background-color: rgb(255, 255, 255);
}

.documentations .content .card-container .content-wrapper .role-content.active {
  display: block;
  animation: 0.5s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .role-content .row {
  display: flex;
  gap: 34px;
  margin-bottom: 34px;
}

.documentations .content .card-container .content-wrapper .role-content .row:first-child {
  margin-top: 34px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col {
  flex: 1 1 0%;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  border: 1px solid rgb(197, 204, 212);
  padding: 25px 25px 15px;
  text-align: left;
  height: 100%;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .title {
  font-family: Manrope;
  font-weight: 600;
  font-size: 20px;
  color: rgb(16, 31, 58);
  line-height: 30px;
  margin-bottom: 16px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .description {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  color: rgb(48, 60, 66);
  line-height: 24px;
  margin-bottom: 16px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo {
  transform: scale(2);
  width: 33px;
  height: 33px;
  margin-bottom: 13px;
  margin-left: 8px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-queue-monitor {
  background: url("../images/contact-center-guide/wallboard.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-queue-manage {
  background: url("../images/contact-center-guide/queue-panel.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-linkus-web {
  background: url("../images/contact-center-guide/linkus-web.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-linkus-desktop {
  background: url("../images/contact-center-guide/linkus-pc.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-linkus-mobile {
  background: url("../images/contact-center-guide/linkus-mobile.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-message-channel {
  background: url("../images/contact-center-guide/messaging-channel.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-message-queue {
  background: url("../images/contact-center-guide/queue.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .logo-message-log {
  background: url("../images/contact-center-guide/chat-log.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col a {
  text-decoration: none;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  color: rgb(0, 110, 225);
  line-height: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col a img {
  margin-left: 7px;
  width: 9px;
  height: 9px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col a:hover {
  /*border-bottom: 1px solid rgb(0, 110, 225);*/
   box-shadow: inset 0 -1px 0 0 rgb(0, 110, 225);
}

.documentations .content .card-container .content-wrapper .role-content .row .col ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-wrap: wrap;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .msg-channel-list {
  margin: -3px 0px -8px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col ul li {
  margin: -5px 0px;
  font-family: "Open Sans";
  font-weight: 500;
  font-size: 14px;
  color: rgb(0, 110, 225);
  line-height: 20px;
  white-space: nowrap;
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  position: relative;
}

.documentations .content .card-container .content-wrapper .role-content .row .col ul li a {
  font-size: 14px;
  margin-left: 16px;
  margin-right: 30px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col ul li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(0, 110, 225);
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  margin-top: -5px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item {
  padding: 15px 20px;
  background: rgb(247, 249, 250);
  border-radius: 15px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item:hover {
  cursor: pointer;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner {
  display: flex;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon {
  width: 22px;
  height: 22px;
  margin-right: 14px;
  transform: scale(2);
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-routing {
  background: url("../images/contact-center-guide/call-routing.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-skill {
  background: url("../images/contact-center-guide/skill-based-routing.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-agent {
  background: url("../images/contact-center-guide/agent.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-agentless {
  background: url("../images/contact-center-guide/agentless.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-queue {
  background: url("../images/contact-center-guide/queue.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-agent-management {
  background: url("../images/contact-center-guide/agent-management.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-wallboard {
  background: url("../images/contact-center-guide/wallboard.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-qp {
  background: url("../images/contact-center-guide/queue-panel.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-queue-report {
  background: url("../images/contact-center-guide/queue-performance.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .icon.icon-agent-report {
  background: url("../images/contact-center-guide/agent-performance.png") center center / contain no-repeat;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .label {
  flex: 1 1 0%;
  font-family: Manrope;
  font-weight: 600;
  font-size: 17px;
  color: rgb(16, 31, 58);
  line-height: 26px;
  height: 26px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .right {
  width: 22px;
  height: 26px;
  background: url("../images/contact-center-guide/arrow-right.png") center center / contain no-repeat;
  transform: scale(0.4);
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .right:hover {
  cursor: pointer;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .toggle-content {
  display: none;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item .toggle-content .txt {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  color: rgb(48, 60, 66);
  line-height: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item.active .toggle-content {
  display: block;
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.documentations .content .card-container .content-wrapper .role-content .row .col .items .item.active .inner .right {
  background: url("../images/contact-center-guide/arrow-down.png") center center / contain no-repeat;
  transform: scale(0.45);
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

.faq {
  background: rgb(247, 249, 250);
  padding: 85px 24px 60px;
}

.faq .title {
  font-family: Manrope;
  font-weight: 500;
  font-size: 40px;
  color: rgb(16, 31, 58);
  line-height: 30px;
  text-align: center;
  margin-bottom: 25px;
}

.faq .description {
  height: 13px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 16px;
  color: rgb(48, 60, 66);
  text-align: center;
  margin-bottom: 46px;
}

.faq .items {
  max-width: 1200px;
  margin: 0px auto;
}

.faq .items .row {
  display: flex;
  gap: 34px;
  padding-bottom: 15px;
}

.faq .items .row .col {
  flex: 1 1 0%;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  padding: 15px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px 0;
}

.faq .items .row .col .inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq .items .row .col .inner .txt {
  font-family: Manrope;
  font-weight: 500;
  font-size: 16px;
  color: rgb(16, 31, 58);
  line-height: 24px;
  width: calc((100% - 30px) - 26px);
}

.faq .items .row .col .inner .btn {
  margin-left: 26px;
  display: block;
  width: 28px;
  height: 35px;
  background: url("../images/contact-center-guide/down.png") center center / contain no-repeat;
}

.faq .items .row .col .inner .btn:hover {
  cursor: pointer;
}

.faq .items .row .col .answer {
  display: none;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 14px;
  color: rgb(48, 60, 66);
  line-height: 28px;
  margin-top: 18px;
  animation: 1s ease 0s 1 normal none running fadeIn;
}

.faq .items .row .col.active .btn {
  background: url("../images/contact-center-guide/up.png") center center / contain no-repeat;
}

.faq .items .row .col.active .answer {
  display: block;
}

.additional-resources {
  background: rgb(255, 255, 255);
  padding-top: 113px;
  margin: 0px 24px;
}

.additional-resources > .title {
  font-family: Manrope;
  font-weight: 500;
  font-size: 40px;
  color: rgb(16, 31, 58);
  line-height: 30px;
  text-align: center;
  margin-bottom: 25px;
}

.additional-resources .rs-description {
  height: 13px;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 16px;
  color: rgb(48, 60, 66);
  text-align: center;
  margin-bottom: 46px;
}

.additional-resources .items {
  max-width: 1200px;
  margin: 0px auto;
}

.additional-resources .items .row {
  display: flex;
  column-gap: 34px;
  padding-bottom: 31px;
}

.additional-resources .items .row:last-child {
  padding-bottom: 113px;
}

.additional-resources .items .row .col {
  flex: 1 1 0%;
  height: 195px;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  border: 1px solid rgb(197, 204, 212);
  padding: 28px 22px;
  position: relative;
}

.additional-resources .items .row .col.cti .hover {
  display: none;
}

.additional-resources .items .row .col.cti:hover {
  animation: 0.8s ease 0s 1 normal none running fadeIn;
  padding: 13px 22px;
}
.additional-resources .items .row .col.cti-cn:hover {
 
padding: 35px 22px;
}

.additional-resources .items .row .col.cti:hover .hover {
  display: block;
}

.additional-resources .items .row .col.cti:hover .normal {
  display: none;
}

.additional-resources .items .row .col.cti:hover .first {
  margin-top: 0px !important;
}

.additional-resources .items .row .col .title {
  font-family: Manrope;
  font-weight: 600;
  font-size: 19px;
  color: rgb(16, 31, 58);
  line-height: 22px;
}

.additional-resources .items .row .col .description {
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 15px;
  color: rgb(16, 31, 58);
  line-height: 24px;
  margin-top: 14px;
  margin-bottom: 13px;
}

.additional-resources .items .row .col .btn {
  display: block;
  width: 30px;
  height: 30px;
  background: url("../images/contact-center-guide/right-gray.png") center center / contain no-repeat;
  margin-bottom: 10px;
}

.additional-resources .items .row .col .btn.out {
  position: absolute;
  bottom: 20px;
  left: 22px;
}

.additional-resources .items .row .col .btn:hover {
  cursor: pointer;
  background: url("../images/contact-center-guide/right.png") center center / contain no-repeat;
  animation: 0.5s ease 0s 1 normal none running fadeIn;
}

.additional-resources .items .row .col.special .description:first-child, .additional-resources .items .row .col.cti .description:first-child {
  margin-top: -2px;
}

.additional-resources .items .row .col.special .second, .additional-resources .items .row .col.cti .second {
  margin-top: 0px !important;
}

.additional-resources .items .row .col.special .description, .additional-resources .items .row .col.cti .description {
  margin-bottom: 9px;
  line-height: 20px;
}

@media (max-width: 600px) {
  .header .banner .content h1 {
      font-size: 30px !important;
  }
}

@media (max-width: 800px) {
  body .header .banner .content .description {
      width: 100%;
  }

  .documentations .content .card-container .cards .card {
      line-height: 25px;
  }

  .documentations .content .card-container .content-wrapper .role-content .row .col .items .item .inner .label {
      line-height: 17px;
  }

  .additional-resources > .title, .faq .title {
      line-height: 40px;
  }

  .documentations .row {
      flex-direction: column;
  }

  .faq .row {
      flex-direction: column;
  }

  .additional-resources {
      margin-bottom: 24px;
  }

  .additional-resources .row {
      flex-direction: column;
      padding-bottom: 0px !important;
  }

  .additional-resources .row .col {
      margin-top: 24px;
      position: relative;
  }

  .additional-resources .row .col .btn.out {
      position: absolute !important;
      bottom: 28px !important;
      right: 22px !important;
      left: unset !important;
  }
}
   a {
    text-decoration: none;
   }

/* Contact Center Guide Style End*/

/*
   * ------------------------------------------------------------------
   *
   * Footer
   * 
   */
/*becom partner*/
#main {
  display: none;
}
div.tem-bec-par-cn {
  display: none;
}   
.wh_footer {
  text-align: left;
  padding: 0;
  position: relative;
  bottom: 0;
  width: 100%;
  color: black;
  background: none #ffffff;
  z-index: 0;
}
.wh_footer a {
  color: #303c42;
  padding: 0;
}
.footer-container.mx-auto {
  width: 100%;
}
div#footer-widgets .footer-box {
  max-width: initial;
  width: initial;
  padding: 0;
}
.footer-html-cn .site-footer .container {
  padding: 65px 0 0;
  width: 1200px;
  max-width: 90%;
}
.footer-html-cn #footer-bottom-inner {
  padding-top: 20px;
  padding-bottom: 20px;
  padding: 20px 0;
  width: 1200px;
  max-width: 90%;
}
.footer-html-cn #copyright {
  color: #303c42;
  width: 100%;
}
.footer-html-cn .followlink .linkblock:nth-child(2):hover i {
  top: -18px;
}
.footer-html-cn .followlink .linkblock:nth-child(2) {
  line-height: 17px !important;
}

/*
   * ------------------------------------------------------------------
   *
   * Footer
   * 
   */
   @font-face {
    font-family: "iconfont";
    src: url(./fonts/iconfont.eot?t=1477445860699);
    src: url(./fonts/iconfont.eot?t=1477445860699#iefix)
        format("embedded-opentype"),
      url(./fonts/iconfont.woff?t=1477445860699) format("woff"),
      url(./fonts/iconfont.ttf?t=1477445860699) format("truetype");
  }
  @font-face {
    font-family: "FontAwesome";
    src: url(./fonts/fontawesome-webfont.eot?v=4.5.0);
    src: url(./fonts/fontawesome-webfont.eot?#iefix&v=4.5.0)
        format("embedded-opentype"),
      url(./fonts/fontawesome-webfont.woff2?v=4.5.0) format("woff2"),
      url(./fonts/fontawesome-webfont.woff?v=4.5.0) format("woff"),
      url(./fonts/fontawesome-webfont.ttf?v=4.5.0) format("truetype"),
      url(./fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular)
        format("svg");
    font-weight: normal;
    font-style: normal;
  }
  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .fa-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
  }
  .fa-2x {
    font-size: 2em;
  }
  .fa-3x {
    font-size: 3em;
  }
  .fa-4x {
    font-size: 4em;
  }
  .fa-5x {
    font-size: 5em;
  }
  .fa-fw {
    width: 1.28571429em;
    text-align: center;
  }
  .fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none;
  }
  .fa-ul > li {
    position: relative;
  }
  .fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: 0.14285714em;
    text-align: center;
  }
  .fa-li.fa-lg {
    left: -1.85714286em;
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 23px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .wh_footer {
    text-align: left;
    padding: 0;
    position: relative;
    bottom: 0;
    width: 100%;
    color: black;
    background: none #ffffff;
    z-index: 0;
  }
  .wh_footer a {
    color: #303c42;
    padding: 0;
  }
  .footer-html-en.followlink {
    margin-top: 10px;
    margin-bottom: 0;
  }
  .followlink .linkblock {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 50%;
    background: #101f3a;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all 0.35s;
    margin: 0 5px;
    cursor: pointer !important;
  }
  .followlink .linkblock i {
    display: block;
    position: relative;
    top: 0;
    transition: top 0.35s;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
  }
  .icon-twitter:before {
    content: "\e89d";
  }
  .icon-facebook:before {
    content: "\e618";
  }
  .icon-linkedin:before {
    content: "\e605";
  }
  .icon-youtube:before {
    content: "\e883";
  }
  .fa-xing:before {
    content: "\f168";
  }
  .linkblock .fa-xing:before {
    padding-top: 6px;
    display: block;
  }
  .icon-email:before {
    content: "\e636";
  }
  .fa-instagram:before {
    content: "\f16d";
  }
  .linkblock .fa-instagram:before {
    font-size: 14px;
    padding-top: 6px;
    display: block;
  }
  .linkblock .fa-instagram:nth-child(2):before {
    padding-top: 12px;
  }
  .followlink .linkblock:hover {
    background: #3b5998;
  }
  .followlink .linkblock:hover i {
    top: -26px;
    color: #fff;
  }
  .followlink .linkblock:nth-child(1):hover {
    background: #0a66c2;
  }
  .followlink .linkblock:nth-child(2):hover {
    background: #1877f2;
  }
  .followlink .linkblock:nth-child(3):hover {
    background: #1d9bf0;
  }
  .followlink .linkblock:nth-child(4):hover {
    background: red;
  }
  .followlink .linkblock:nth-child(5):hover {
    background-color: #de336a;
  }
  .followlink .linkblock:nth-child(6):hover {
    background: #006567;
  }
  .followlink .linkblock:nth-child(7):hover {
    background: #0aa2c2;
  }
  .followlink .linkblock:nth-child(6):hover i {
    top: -30px;
  }
  .followlink .linkblock:nth-child(6):hover .fa-xing:before {
    padding-top: 11px;
  }
  .footer-log img {
    display: block;
    width: 294px;
  }
/*
   * ------------------------------------------------------------------
   *  
   * Topic content
   * 
   */
.wh_topic_content,
.wh_content_area {
  color: #101f3a;
  line-height: 1.7em;
  margin-bottom: 80px;
}
.wh_main_page .wh_content_area {
  margin: 0;
  /*margin-left: -20px;*/
  /*margin-right:-20px;*/
}
.wh_topic_content .title.topictitle1 {
  font-size: 2em;
  line-height: 1.4em;
}
.topictitle3 {
  font-weight: 400;
}
.wh_related_links,
.wh_child_links,
.wh_topic_content .related-links {
  padding-top: 7px;
  margin-top: 0;
  background-color: #f7f9fa;
}
.wh_related_links,
.wh_topic_content .related-links {
  padding: 0.5em 1.5em;
}
.wh_child_links {
  padding: 1.5em;
  display: none;
}
.related-links strong {
  font-weight: 600;
  font-size: 16px;
  margin-left: -20px;
}
.related-links a,
.related-links a:visited {
  color: #006ee1;
  padding-bottom: 0.3em;
  display: inline-block;
  margin: 4px -20px -14px;
}

.filepath {
  color: #c7254e !important;
}
.sectiondiv {
  margin-top: 20px;
  margin-bottom: 20px;
}

.secdiv-title {
  font-size:16px;
  font-weight:bolder;
}

#wh_topic_container .wh_content_area {
  margin-bottom: 0;
}

#wh_topic_container .wh_content_area .row {
  flex-wrap: nowrap;
  margin: 0;
}

#wh_topic_container .wh_content_area #wh_publication_toc,
#wh_topic_container .wh_content_area #wh_topic_body,
#wh_topic_container .wh_content_area #wh_topic_toc {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
}

#wh_topic_container .wh_content_area #wh_publication_toc {
  padding: 0;
  width: 385px !important;
  flex-shrink: 0 !important;
}
#wh_topic_container .wh_content_area #wh_topic_toc {
  width: 250px !important;
  flex-shrink: 0 !important;
  position: static !important;
}
#wh_topic_container #wh_publication_toc {
  margin-bottom: 0;
  background: #fff;
}
#wh_topic_container .wh_content_area .wh_publication_toc > ul > li {
  padding: 6px 0;
}

#wh_topic_container .wh_content_area #wh_publication_toc .wh_publication_toc .topicref {
  padding-right: 16px;
}

#wh_topic_container .wh_content_area #wh_topic_body {
  padding: 0;
}

#wh_topic_container .wh_content_area #wh_topic_body .wh_topic_content.body {
  margin: 40px;
  padding: 48px 40px 61px 55px;
  border-radius: 20px;
  background: #ffffff;
}

#wh_topic_container .wh_content_area #wh_topic_body .wh_topic_content .title.topictitle1 {
  font-family: Open Sans;
  font-weight: bold;
  color: #101f3a;
}

#wh_topic_container .wh_content_area #wh_topic_body p.\-.topic\/shortdesc.shortdesc {
  font-family: Open Sans;
  color: #303c42;
}

#wh_topic_container .wh_content_area #wh_topic_body {
  flex: 1 !important;
  min-width: 0 !important;
}
/* Related information */
#wh_topic_container .wh_content_area #wh_topic_body .wh_related_links {
  margin: 40px;
  padding: 20px 30px;
  border-radius: 20px;
  background: #ffffff;
}

#wh_topic_container .wh_content_area #wh_topic_body .related-links strong {
  margin-bottom: 8px;
  display: block;
  font-weight: 700;
  font-size: 20px;
  font-family: Manrope;
}

#wh_topic_container .wh_content_area #wh_topic_body .related-links a,
#wh_topic_container .wh_content_area #wh_topic_body .related-links a:visited {
  position: relative;
  color: #006ee1;
}

#wh_topic_container .wh_content_area #wh_topic_body .related-links a::after {
  position: absolute;
  top: 9px;
  right: -16px;
  content: "";
  background: url(../images/arrow-right-blue.svg) center no-repeat;
  background-size: contain;
  rotate: -45deg;
  margin-left: 4px;
  width: 10px;
  height: 10px;
}
/*
   * ------------------------------------------------------------------
   *  
   * Search results.
   * 
   */
.searchresult {
  list-style: none;
}
.searchresult li a {
  color: #346ec5;
}
.searchresult .shortdesclink {
  margin: 0.3em 0.5em 0 0;
}
.wh_search_expression {
  font-weight: bold;
}
/* Search relative path */
.searchresult li .relativePath a {
  color: #006621;
}
/*
   * ------------------------------------------------------------------
   *  
   * Index terms.
   * 
   */
.wh_index_terms span.wh_first_letter {
  color: #346ec5;
}
.wh_index_terms #indexList {
  padding: 0;
}
/*
   * ------------------------------------------------------------------
   *  
   * Tree TOC for the main page.
   * 
   */
.wh_main_page_toc {
}
.wh_main_page_toc .expanded,
.wh_main_page_toc .wh_main_page_toc_accordion_header:hover,
.wh_main_page_toc > .wh_main_page_toc_entry:hover,
.wh_main_page_toc_accordion_entries {
  background-color: #f2f8ff;
}
/**
   *
   * Styles used for RTL pages
   *
   */
html[dir="rtl"] .wh_top_menu ul li:hover > ul {
  max-width: 270px;
}
/*下面是Yeastar导航样式*/
/*nav-menu*/
.header-menu {
  position: relative;
  width: 100%;
  z-index: 9999;
  background: #ffffff;
  top: 0;
  box-shadow: 0 0 10px #e4e4e4;
  min-height: 79px;
  padding: 18px 18.2vw;
}
.header-menu .logo {
  display: inline-block;
  vertical-align: middle;
}
.header-menu .logo a {
  display: block;
  height: 37px;
  background: url(../images/yeastar-logo.svg) no-repeat;
  width: 124px;
  position: relative;
}
.header-menu .logo a::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 29px;
  background-color: #303c42;
  position: absolute;
  bottom: 0px;
  right: -9px;
}
.document-url {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  margin: 0;
  color: #101f3a;
  font-family: Manrope !important;
  font-weight: 500;
  margin-left: 13px;
  position: relative;
  top: 2px;
}
.doc-url {
  font-size: 14px;
  font-weight: 100;
  margin-left: 10px;
}
.document-url a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}
.document-url a:hover {
  color: #006ee1;
}
.document-url .split {
  font-size: 25px;
  font-weight: 300;
  display: none;
}
.header-menu .header-nav-menu {
  display: inline-block;
  vertical-align: top;
  float: right;
}
.header-menu .header-nav-menu a {
  text-decoration: none;
}
.header-menu .header-nav-menu ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.header-menu .header-nav-menu ul.nav-menu-1 li {
  display: inline-block;
  vertical-align: middle;
  margin-top: 3px;
  position: relative;
}
li.change-lang:before {
  content: "";
  background: url(../images/p-series/select-language-icon.png) center no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  left: 0;
  display: none;
}
.header-menu .header-nav-menu ul.nav-menu-1 li.free-trial {
  margin-right: 53px;
}
.header-menu .header-nav-menu ul.nav-menu-1 > li:hover > a {
  border-bottom: 2px solid #004277;
}
/* free trial nav */
.free-trial a {
  display: block;
  width: 200px;
  background-color: #ffa300;
  border-radius: 18px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 18px;
  font-family: Manrope;
}
.header-menu .header-nav-menu ul.nav-menu-1 > .free-trial:hover > a {
  border-bottom: none;
  background: #f7b215;
}
.change-lang select {
  border: none;
  font-size: 18px;
  outline: none;
  color: #303c42;
}
/*Yeastar P-Series PBX System*/
.p-series-page {
  overflow: hidden;
}
.p-series-banner {
  background: url(../images/p-series/p-series-pbx-system-bgimg.png) center
    no-repeat;
  background-size: cover;
  min-height: 715px;
  padding-top: 86px;
}
#ug-editor-name {
  width: max-content;
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
}
#ug-editor-name h1 {
  color: #101f3a;
  font-size: 56px;
  line-height: 1.25;
  position: relative;
  z-index: 2;
  font-family: 'manrope', 'SourceHanSansCN';
  text-align: center;
  margin-bottom: 37px;
}
#ug-editor-name h1 span {
  color: #006ee1;
  font-weight: 500;
}
#apply-edite {
  width: 217px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#apply-edite .title {
  outline: none;
  line-height: 45px;
  color: #fff;
  font-size: 16px;
  vertical-align: middle;
  padding: 0 15px;
  appearance: none;
  background: url(../images/p-series/angle-down-white.svg) center no-repeat;
  background-size: 18px 12px;
  background-position-x: 91%;
  border-radius: 27px;
  background-color: #006ee1;
  border-color: #006ee1;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
}
#apply-edite .title.active {
  background-image: url(../images/p-series/angle-up-white.svg);
}
#apply-edite ul {
  background-color: #fff;
  box-shadow: 0px 2px 13px 0px rgb(16 31 58 / 5%);
  display: inline-block;
  border-radius: 12px;
  width: 100%;
  padding: 15px 0;
  position: absolute;
  z-index: 3;
  left: 0;
  margin: 2px 0 0;
  display: none;
}
#apply-edite ul li {
  list-style: none;
  padding: 2px 15px;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  color: #303c42;
  line-height: 28px;
  margin-top: 0;
  text-align: center;
}
#apply-edite ul li:hover {
  color: #006ee1;
  text-decoration: underline;
}

#apply-edite p{
  color: #101f3a;
}

/*  */

#ug-editor-name .edition-zh {
  width: 115px;
}
#ug-editor-name .edition-zh .title{
  background-position-x: 90%;
}
#ug-editor-name .search_input {
  float: initial;
  position: initial;
  margin: 0 20px 0 0;
  width: max-content;
}
#ug-editor-name input[type="search"] {
  font-size: 14px;
  color: #101f3a;
  width: 500px;
  height: 45px;
  padding: 10px 8px 10px 50px;
  background: #f7f9fa url(https://help.yeastar.com/resources/images/search.svg) no-repeat 20px;
  border-radius: 27px;
  border: none;
}
#ug-editor-name input[type="search"]:-ms-input-placeholder {
  color: #101f3a80;
}
#ug-editor-name input[type="search"]::-webkit-input-placeholder {
  color: #101f3a80;
}
#ug-editor-name input[type="search"]::-moz-placeholder {
  color: #101f3a80;
}
#ug-editor-name input[type="search"]:-moz-placeholder {
  color: #101f3a80;
}
/*.p-series-page */
.p-series-page h2 {
  font-size: 40px;
  line-height: 1.33;
  margin-bottom: 20px;
  text-align: center;
  font-family: "manrope";
}
.p-series-page p {
  font-size: 16px;
  line-height: 24px;
}
.get-start {
  width: 1200px;
  max-width: 90%;
  min-height: 332px;
  border-radius: 27px;
  margin: -91px auto 0;
  box-shadow: 9px 18px 73px 0px rgba(147,167,186,0.1);
  background: #FFFFFF;
  position: relative;
}
.get-start p {
  margin-top: 15px;
  line-height: 28px;
}
.get-start h2 {
  text-align: left;
  font-weight: 600;
}
.get-start-wrap p {
  text-align: center;
  font-size: 18px;
  color: #ffffff;
  width: 100%;
  margin: 15px auto 0;
}
.get-start-wrap img {
  width: 305px;
  height: auto;
  display: block;
  margin: 10px auto;
}
.get-start-zh img {
  width: 260px;
}
.get-start-wrap a {
  display: block;
  width: 180px;
  line-height: 50px;
  border: 1px solid #006ee1;
  color: #fff;
  font-size: 18px;
  text-align: center;
  background-color: #00b7ff;
  border-radius: 8px;
  margin: 30px auto 0;
}
.get-start-wrap a:hover {
  background-color: #34c4fc;
}
/*  */
.get-start .content-right,
.get-start .content-left {
  display: inline-block;
  vertical-align: top;
}
.get-start .slide-area {
  position: absolute;
  width: 100%;
  min-height: 332px;
  display: none;
  background-color: #fff;
  border-radius: 27px;
}
.get-start .get-start-wrap {
  background-color: #006ee1;
  padding-top: 30px;
}
.get-start .slide-area:first-child {
  display: block;
}
.get-start p span.date {
    position: relative;
    font-weight: 600;
    color: rgba(0, 110, 225, 1);
}
.get-start p span.date::after {
    content: "";
    background: url(../images/p-series/line.png) right no-repeat;
    background-size: cover;
    width: 90px;
    height: 12px;
    position: absolute;
    right: 10px;
    bottom: -12px;
}
/*  */
.documentations-wrap {
  margin-top: 50px;
}
.documentations-wrap h2 {
  text-align: center;
}
.documentations-wrap h2+p {
  text-align: center;
}
.documentations-wrap .display-flex {
  width: 1200px;
  max-width: 90%;
  margin: 50px auto 0;
  background: url(../images/p-series/doucumentations-bg1109.png) center no-repeat;
  background-size: cover;
  min-height: 347px;
  position: relative;
  border-radius: 20px;
}
.documentations-wrap .slide-area {
  justify-content: space-between;
  padding: 35px 10% 11px 8%;
  position: absolute;
  display: none;
}
.documentations-wrap .slide-area:first-child {
  display: block;
}
.documentations-wrap .slide-area img {
  width: 37.5%;
  display: inline-block;
}
.documentations-wrap .slide-area div {
  width: 51%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 9%;
}
.documentations-wrap .title {
  font-family: Manrope;
  font-weight: 500;
  color: #101F3A;
  font-size: 20px;
  margin-bottom: 23px;
}
.documentations-wrap .title+p {
  margin-bottom: 30px;
}
.documentations-wrap .prv,
.documentations-wrap .next {
  width: 35px;
  height: 35px;
  box-shadow: 0 0 10px rgba(147,167,186,0.15);
  border-radius: 50%;
  margin-bottom: 0;
  background: url(../images/p-series/next-gray-icon1109.png) center no-repeat;
  background-size: 7px;
  background-color: #fff;
  cursor: pointer;
  position: absolute;
  top: 45%;
  left: -17px;
  z-index: 2;
}
.documentations-wrap .next {
  left: initial;
  right: -17px;
  transform: rotate(180deg);
}
.documentations-wrap .prv.active,
.documentations-wrap .next.active {
  background-image: url(../images/p-series/next-white-icon1109.png);
  background-color: #006EE1;
}
.documentations-wrap .next.active {
  transform: rotate(0deg);
}
.documentations-wrap .prv.active {
  transform: rotate(-180deg);
}
/*  */
.pms-integration {
  padding: 16px 0 0 8%;
}
.pms-integration .content-left {
  width: 27%;
  margin-right: 8%;
}

.pms-integration .content-right  {
  width: 60%;
  margin-top: 40px;
}
.pms-integration .content-right a {
  font-size: 17px;
  line-height: 2.5em;
}
.pms-integration .content-right a:hover {
  text-decoration:underline;
}
.pms-integration .content-right a::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/arrow-right-blue.svg) center no-repeat;
  background-size: cover;
  position: relative;
  right: -9px;
  top: 2px;
  transform: rotate(-45deg);
}
.pms-integration .content-right h1 {
width: 100%;
font-size: 40px;
line-height: 50px;
}
.pms-integration .content-left img {
  width: 100%;
}
.pms-integration .ip-content-left img {
  margin-top: 30px;
}
.pms-integration .content-right>img {
  width: 70%;
}
.pms-integration .logo a:first-child {
  margin-right: 60px;
}
.get-start .logo {
  display: flex;
  align-items: center;
  margin-top: 40px;
  margin-top: 35px;
}
.get-start .logo a {
  position: relative;
  width: 27%;
  padding-right: 30px;
}
.get-start .logo a img {
  width: 100%;
}
.get-start .logo a::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/arrow-right-blue.svg) center no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 5px;
  transform: rotate(-45deg);
}
/*  */
.deploy {
  padding: 20px 0 0 10%;
}
.deploy .content-left {
  width: 24%;
  margin-right: 8%;
}
.deploy .content-left img {
  width: 100%;
}
.deploy .logo a {
  width: 23%;
}
.deploy .content-right {
  width: 60%;
  margin-top: 30px;
}
/*  */
.microsoft {
  padding: 10px 0 0 8%;
}
.microsoft .content-left {
  width: 30%;
  margin-right: 8%;
}
.microsoft .content-left img {
  width: 100%;
}
.microsoft .content-right {
  width: 53%;
  margin-top: 40px;
}
.microsoft .logo a {
  font-size: 18px;
  width: max-content;
}
.microsoft .logo a:hover {
  text-decoration: underline;
}
.get-start .flip {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 18px auto;
  z-index: 2;
  cursor: pointer;
}
.get-start .flip .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  background-color: #D1D8DF;
  border-radius: 50%;
  margin: 0 5px;
}
.get-start .flip .dot.active {
  background-color: #00b7ff;
}
/*  */
.browse-docu {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  min-height: 38vw;
  padding-top: 7vw;
}
.browse-docu h2,
.browse-docu h2 + p {
  text-align: center;
}
.change-guide {
  margin: 40px auto 50px;
  background-color: #F7F9FA;
  border-radius: 33px;
  width: 810px;
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 60px
}
.change-guide span {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  width: 24%;
  text-align: center;
  display: inline-block;
  line-height: 43px;
  font-family: Manrope;
}
.change-guide span.change-guide-active {
  background: #006EE1;
  color: #FFFFFF;
  border-radius: 29px;
  margin: 0 10px;
}
.change-guide img {
  width: 31px;
  position: relative;
  top: -2px;
}
.dif-area .getaway-model {
  margin-top: -0.8vw;
}
.getaway-model a {
  display: block;
}
.guide-area {
  position: relative;
  min-height: 570px;
}
.dif-guide {
  position: absolute;
  display: none;
  width: 100%;
}
.dif-guide:first-child {
  display: block;
}
.nav-tab {
  display: flex;
  margin: 0 auto 40px;
  flex-wrap: wrap;
}
.nav-tab .title {
  width: max-content;
  line-height: 38px;
  border: 1px solid #bfbfbf;
  border-radius: 21px;
  text-align: center;
  padding: 0 20px;
  margin: 5px 10px;
  cursor: pointer;
}
.nav-tab .title:hover,
.nav-tab .title.active {
  color: #fff;
  background-color: #00b7ff;
  border-color: #00b7ff;
}
.dis-flex,
.dif-area-wrap {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  position: relative;
}
.dif-area {
  width: 23.5%;
  box-shadow: 5px 11px 43px 0px rgba(147,167,186,0.1);
  margin: 0 0 2.6vw 0;
  padding: 25px 18px 25px;
  border-radius: 20px;
  position: relative;
  background-color: #fff;
  margin-right: 2%;
  cursor: pointer;
  min-height: 330px;
}
.dif-area:hover {
  border-color: #3699ff;
}
.dif-area:nth-child(4n) {
  margin-right: 0;
}
.dif-area h3 {
  color: #101F3A;
  font-weight: 500;
  line-height: 24px;
  font-size: 20px;
  font-family: Manrope;
  margin: 18px 0 0;
  min-height: 48px;
}
.dif-area p {
  margin: 15px 0 25px;
  min-height: 3.65vw;
  text-align: left;
  line-height: 27px;
  color: #000000b3;
  font-size: 15px;
  font-family: Open Sans;
}
.dif-area img {
  width: 100%;
  height: auto;
}
.guide-area .dif-area div:first-child {
  width: 82px;
}
.dif-area span {
  position: absolute;
  display: block;
  margin: 0;
  width: max-content;
  max-width: 100%;
  bottom:35px;
} 
.dif-area .oracle span {
  position: unset;
}
.dif-area .oracle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 35px;
  position: relative;
}

.dif-area .not-available {
 
  display: flex;
  align-items: center;
  background: linear-gradient(to right, #f2f4f4, #f7f9fa, #ffffff);
  border-radius: 10px;              
}
.dif-area .not-available img {
  width:20px;
  height: auto;             
}

.dif-area .not-available span {
  /* margin-left: 10px; */
  position: static;
  color: #333333;
}

#oracle-hospitality-opera {
  width: 88px;
  display: inline-block !important;
  vertical-align: middle;
  position: relative;
}
#oracle-hospitality-opera .title {
  width: 100%;
  outline: none;
  line-height: 35px;
  color: #000000b3;
  font-size: 14px;
  vertical-align: middle;
  padding: 0 12px;
  appearance: none;
  background: url(../images/angle-down.svg) center no-repeat;
  background-size: 10px 10px;
  background-position-x: 92%;
  border-radius: 18px;
  background-color: #f7f9fa;
  border-color: #f7f9fa;
  text-align: left;
  margin-bottom: 0;
  cursor: pointer;
}
#oracle-hospitality-opera ul {
  background-color: #fff;
  box-shadow: 0px 2px 13px 0px rgb(16 31 58 / 5%);
  display: inline-block;
  border-radius: 12px;
  width: 100%;
  padding: 15px 0;
  position: absolute;
  z-index: 3;
  left: 0;
  margin: 2px 0 0;
  display: none;
}
#oracle-hospitality-opera ul li {
  list-style: none;
  padding: 2px 15px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  color: #303c42;
  line-height: 28px;
  margin-top: 0;
  text-align: center;
}
#oracle-hospitality-opera ul li:hover {
  color: #006ee1;
  text-decoration: underline;
}

.dif-area .oracle .pdf-href, .dif-area .oracle .html-href, .dif-area .fidelio .pdf-href, .dif-area .fidelio .html-href{
  margin: 0 0 1px 6px !important;
}
.dif-area .fidelio{
  position: absolute;
  right: 18px;
  bottom: 29px;
}
.dif-area-wrap {
  width: 100%;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  display: none;
  background-color: #fff;
}
.dif-area-wrap:first-child {
  display: flex;
}
div .pdf-href,
div .html-href {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #006ee1;
  padding: 0 0 0 25px;
  margin: 0 20px 1px 0;
}
div .pdf-href {
  margin-right: 0;
}
div .pdf-href:hover:after,
div .html-href:hover:after {
  content: "";
  border-bottom: 1px solid #006ee1;
  display: inline-block;
  position: absolute;
  right: 3px;
  width: 50%;
  bottom: 0;
}
div .html-href:hover {
  /*color: #03b5bd;*/
}
div .html-href:hover:after {
  /*border-bottom: 1px solid #03b5bd;  */
  width: 58%;
}
.pdf-href:before {
  content: "";
  background: url(../images/p-series/user-guide-pdf-icon.png) center no-repeat;
  background-size: 20px 20px;
  display: inline-block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
}
.html-href:before {
  content: "";
  background: url(../images/p-series/user-guide-html-icon.png) center no-repeat;
  background-size: 16px 21px;
  display: inline-block;
  position: absolute;
  left: 0;
  width: 16px;
  height: 21px;
}
/*  */
.p-services {
  margin: 7vw auto 6vw;
  background-color: #F7F9FA;
  padding: 4vw 0 6vw;
}
.p-services .intro {
  text-align: center;
}
.p-services .content-wrap {
  width: 1200px;
  max-width: 90%;
  border-radius: 33px;
  background-color: #fff;
  padding: 55px 33px 46px;
  margin: 87px auto 0;
  position: relative;
}
.p-services .tag {
  width: max-content;
  margin: -80px 0 0 auto;
  position: absolute;
  right: 33px;
}
.p-services .tag p {
  display: inline-block;
  vertical-align: text-bottom;
  line-height: 52px;
  background-color: #77be00;
  border-radius: 26px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  padding: 0 25px;
  margin: 0 0 0 30px;
}

.p-services-zh .tag p {
  padding: 0 60px;
}

.p-services .tag .ep {
  background-color: #006ee1;
}
.p-services .tag .up {
  background-color: #00b7ff;
}
.p-services .itme {
  display: block;
  width: 100%;
  background-color: #fff;
  border-radius: 27px;
  position: relative;
}
.p-services .itme:nth-child(odd) {
  background-color: #FAFBFC;
}
.p-services .itme a {
  display: block;
  width: 100%;
  line-height: 53px;
  padding-left: 30px;
  position: relative;
  font-size: 20px;
  color: #101f3a;
  font-family: Manrope;
  font-weight: 500;
}
.p-services .itme a:hover {
  color: #006ee1;
}

.p-services .itme::after,
.p-services .itme::before,
.p-services .itme a::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url(../images/p-series/blak-mark-icon.svg) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 18px;
  left: calc(100% - 102px);
}
.p-services .itme::after {
  left: calc(100% - 350px);
}
.p-services .itme a::after {
  left: calc(100% - 580px);
}
.p-services .no-sp a::after,
.p-services .no-ep::after {
  display: none;
}
.p-services .optional::before {
  background-image: none !important;
}
.p-services .optional {
  display: flex;
  align-items: center;
}

.p-services .optional a{
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 10px;
}
.p-services .optional div {
  flex: 1; 
  display: flex;
  justify-content: flex-end;
}
.p-services .optional span {
  font-size: 18px;
  margin: 0px 60px 0 110px;
}
.p-services .optional-1 span {
  white-space:nowrap;
  margin: 0px 70px 0 130px;
}
.p-services .optional-3 span {
  font-size: 18px;
  margin: 0px 58px 0 115px;
}
/* handbook */
.handbook-container {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto; 
}
.handbook-container .handbook-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2%;
}
.handbook-container .handbook-flex .handbook-item {
  position: relative;
  margin-top: 60px;
  width: 32%;
  min-height: 500px;
}
.handbook-container .handbook-flex .handbook-item h3 {
  margin: 30px 0 20px;
  font-weight: 600;
  font-family: Manrope;
  font-size: 20px;
}
.handbook-container .handbook-flex .handbook-item img {
  width: 100%;
}
.handbook-container .handbook-flex .handbook-item p {
  margin: 15px 0 25px;
  min-height: 3.65vw;
  text-align: left;
  line-height: 27px;
  color: #000000b3;
  font-size: 15px;
}
.handbook-container .handbook-flex .handbook-item .handbook-link {
  position: absolute;
  bottom: 0;
}
.handbook-container .handbook-flex .handbook-item .handbook-link.two-part {
  display: flex;
  width: 100%;
}
.handbook-container .handbook-flex .handbook-item h4 {
  margin-bottom: 12px;
  font-size: 16px;
}
.handbook-container .handbook-flex .handbook-item .handbook-line {
  margin: 0 20px;
  width: 1px;
  background: #E7E8EB;
}
/*  */
.trending-topics {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0 0 1vw;
}
.trending-topics p + div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.trending-topics h2 {
  /* padding-top: 4vw; */
}
.trending-topics p {
  text-align: center;
  margin-bottom: 70px;
}
.trending-topics div div:nth-child(1) {
  width: 50%;
}
.trending-topics div div:nth-child(2) {
  width: 50%;
}
.trending-topics div div:nth-child(2) img {
  width: 100%;
  height: auto;
}
.ask-questions a {
  display: block;
  font-size: 16px;
  color: #3d4a59;
  position: relative;
  padding: 28px;
  line-height: 30px;
  min-height: 113px;
  background-color: #fff;
  border-radius: 20px;
  padding-right: 55px;
}
.ask-questions a:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../images/arrow-right-blue.svg) center no-repeat;
  background-size: cover;
  transform: rotate(-45deg);
  position: absolute;
  right: 40px;
}
.ask-questions a:hover {
  background-color: #006ee1;
  color: #fff;
}
.ask-questions a:hover:after {
  background-image: url(../images/arrow-right-white.svg);
}
.ask-questions a:hover span {
  border-color: #006ee1;
}
.ask-questions a span.num {
  display: block;
  margin-bottom: 5px;
}
.trending-topics .view-all,
.more-videos {
  display: block;
  width: max-content;
  min-width: 180px;
  margin: 3.07vw auto;
  text-align: center;
  color: #fff !important;
  line-height: 50px;
  font-size: 18px;
  border: 1px solid #006ee1;
  border-radius: 8px;
  background:#006ee1 !important;
}
.more-videos {
  margin-bottom: 4vw;
}
.trending-topics .view-all {
  background-color: #fff;
  color: #006ee1;
}
.view-all:hover {
  color: #fff;
  background: #006ee1;
  border-color: #006ee1;
}
/*  */
.more-resources {
  padding-top: 30px;
}
.more-resources h2 {
  margin: 0 0 70px;
}
.resources-cont {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.resources-cont p {
  text-align: center;
}
.resources-cont div {
  min-height: 158px;
  position: relative;
  background: #fff;
  margin: 0 0 120px 0;
  width: 33.3%;
  border-right: 1px solid #DCDCDC;
  padding: 0 5%;
  text-align: center; 
  cursor: pointer;
}
.resources-cont div:last-child {
  border: none;
}
.resources-cont a {
  color: #101f3a;
  text-align: center;
  font-size: 24px;
  font-family: Manrope;
  font-weight: 500;
  margin: 10px 0 18px;
  display: block;
}
.resources-cont a:hover {
  color: #006ee1;
}
.resources-cont img {
  width: 80px;
  display: block;
  margin: 0 auto;
}
.resources-cont .t {
  color: #303C42;
  font-size: 14px;
}
.resources-cont-cn img {
  width: 5vw;
}
/*wath-the-video*/
.down-datasheet-from {
  width: 56.25vw;
  margin: auto;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #626566;
  height: 31.6vw;
}
.down-datasheet-from .wpex-clr {
  padding-left: 0;
  padding-right: 0;
}
.form-alert {
  display: none;
}
.iframe-video {
  display: none;
}
.iframe-video:first-child {
  display: block;
}
.form-alert .close-x {
  position: absolute;
  z-index: 2;
  color: #fff;
  font-weight: 300;
  font-size: 0.93vw;
  display: inline-block;
  left: 55.5vw;
  top: -0.9vw;
  width: 1.6vw;
  height: 1.6vw;
  border: 1px solid #7d7d7d;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5vw;
  background: #7d7d7d;
  cursor: pointer;
  -ms-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.form-alert .close-x:hover {
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  background: red;
  color: #fff;
  border: 1px solid red;
}
.down-mask {
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  opacity: 0.6;
}
.down-datasheet-from iframe {
  width: 56.25vw;
  height: 31.6vw;
}
/*fatures*/
.p-series-features {
  width: 63vw;
  margin: 4vw auto 6vw;
}
.p-series-features h2 + p {
  text-align: center;
  margin: 25px auto;
}
.p-series-features .display-flex {
  /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; */
}
.p-series-features .display-flex .item {
  width: 20%;
  min-height: 80px;
  background-color: #fff;
  box-shadow: 4px 8px 55px 0px rgba(147,167,186,0.1);
  border-radius: 10px;
  margin: 20px 2%;
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.p-series-features .display-flex .item a {
  width: max-content;
  margin: 0 auto;
  font-size: 20px;
  color: #303c42;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.p-series-features .display-flex .item img {
  width: 55px;
  margin-right: 10px;
}
.p-series-features .display-flex .item:hover {
  background-color: #006ee1;
}
.p-series-features .display-flex .item:hover a {
  color: #fff;
}
.p-series-features .item .platform {
  position: absolute;
  height: 80px;
  background-color: #006ee1;
  z-index: 2;
  box-shadow: 2px 6px 23px 0px rgb(6 38 95 / 10%);
  top: 0;
  width: 100%;
  display: none;
}
.p-series-features .item .platform a {
  min-height: 35px;
  font-size: 18px;
  color: #006ee1;
  /* text-decoration: underline; */
  margin: 2px auto;
}

.p-series-features .item .platform a:hover {
  text-decoration: underline;
}
.p-series-features .item:hover .platform {
  display: block;
}
.p-series-features .display-flex .item:hover .platform a {
  /* color: #006ee1; */
}


/*fatures-in-topic (只需要添加有修改的部分就可以） */
.p-series-features-in-subscription {
  width: 70vw;
  margin: -1vw auto 6vw;
}
.p-series-features-in-subscription .display-flex .item {
  width: 15%;
  min-height: 70px;
  background-color: #fff;
  box-shadow: 2px 6px 23px 0px rgba(6, 38, 95, 0.05);
  border-radius: 5px;
  margin: 30px 2% 0 auto;
  text-align: center;
  /* display: flex; */
  /* align-items: center; */
  padding-right: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.p-series-features-in-subscription .display-flex .item a {
  width: max-content;
  margin: 0 auto;
  font-size: 14px;
  color: #303c42;
  min-height: 80px;
  display: flex;
  align-items: center;
}
.p-series-features-in-subscription .item .platform a {
  min-height: 35px;
  font-size: 14px;
  color: #006ee1;
  /* text-decoration: underline; */
  margin: 2px auto;
}

.contact-center-resources{
  width: 90vw;
}

.contact-center-resources .display-flex .item img {
  margin-right:0px;
}
.contact-center-resources .display-flex .cti-options a {
      position: relative;
      z-index: 1;
}
.contact-center-resources .display-flex .cti-options .ctioptions {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color:#006ee1;
      color: white;
      z-index: 2;
}
.contact-center-resources .display-flex .cti-options p {
      line-height: 35px;
}

.contact-center-resources .display-flex .cti-options:hover {
  background-color: white;
}

.contact-center-resources .display-flex .cti-options:hover cti-option {
      display: block;
}

/*becom partner*/
.tem-bec-par {
  min-height: 333px;
  background-image: url(https://www.yeastar.com/wp-content/uploads/2022/10/become-a-partner-img.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tem-bec-par div {
  margin-top: -10px;
}
.tem-bec-par .become-partner-temp {
  color: #fff;
  font-size: 40px;
  text-align: center;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Manrope !important;
  font-weight: 500;
}

.tem-bec-par .become-partner-temp:first-child {
  margin-top: -10px;
}
.tem-bec-par .bepartner-now {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  display: block;
  width: max-content;
  text-align: center;
  margin: 50px auto 0;
  line-height: 50px;
  overflow: hidden;
  position: relative;
  background-color: #00b7ff;
  border-radius: 8px;
  padding: 0 30px;
  min-width: 180px;
}
.tem-bec-par .bepartner-now:hover {
  text-decoration: none;
  background-color: #006ee1;
  color: #fff;
}
/*  */
.header-menu.header-menu-sticky .logo a {
  background: url("./image/yeastar-log-active.png") no-repeat;
  width: 180px;
}
.linkus-titile-ippbx a {
  font-size: 14px !important;
  padding: 8px 12px !important;
  display: block !important;
  margin: 1px 5px !important;
  font-weight: bold !important;
  color: #004277 !important;
  line-height: 20px !important;
}
.header-menu-sticky a,
.header-menu-sticky .split {
  color: white !important;
}
.header-menu-sticky.header-menu
  .header-nav-menu
  ul.nav-menu-1
  > li:hover
  .nav-menu-2 {
  background: rgba(51, 51, 51, 0.9) !important;
}
.header-menu-sticky span.intro,
.header-menu-sticky span.cinfo {
  color: white;
}
.header-menu-sticky.header-menu .header-nav-menu ul.nav-menu-global,
.header-menu-sticky.header-menu .header-nav-menu .nav-menu-search {
  background: rgba(51, 51, 51, 0.9) !important;
}
.header-menu-sticky.header-menu .header-nav-menu .nav-menu-search #csearch {
  background: rgba(51, 51, 51, 0.9) !important;
}
.space-fill {
  height: 10px;
  opacity: 0;
}
.linkus-titile-ippbx a:hover {
  color: white !important;
  background: #004277 !important;
}
/*switch menu*/
#switch-menu {
  height: 100px;
  padding-top: 20px;
  width: 85%;
  margin: 0 auto 2.5em;
}
.pbx:hover span {
  background: #edf3fb;
}
.app-center:hover span {
  background: #edf3fb;
}
.developer:hover span {
  text-decoration: underline;
  cursor: pointer;
}
#switch-menu div {
  background: #fff;
  height: 80px;
  max-width: 95%;
  margin: 0 auto;
  padding: 10px;
  background: #fafafa;
}
.span-pbx {
  display: inline-block;
  font-size: 28px !important;
  font-weight: 600 !important;
  width: 15%;
  height: 60px;
  line-height: 1.8 !important;
  text-align: center;
  margin: 0;
  border-top: 7px solid #fafafa;
  border-left: 1px solid #fafafa;
  border-right: 1px solid #fafafa;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  margin-left: -3px;
  transition: all 0.3s;
  color: #5e5e5e;
}
.span-app-center {
  display: inline-block;
  font-size: 28px !important;
  font-weight: 600 !important;
  width: 15%;
  height: 60px;
  line-height: 1.8 !important;
  text-align: center;
  margin: 0;
  border-top: 7px solid #fafafa;
  border-left: 1px solid #ccc;
  border-right: 1px solid #fafafa;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  margin-left: -3px;
  transition: all 0.3s;
  color: #5e5e5e;
}
.span-developer {
  font-size: 1.4em !important;
  font-weight: 500 !important;
  width: 12% !important;
  text-align: right;
  line-height: 3.6 !important;
  margin-left: -10px;
  background-size: 55px !important;
  background: url(../images/api.png) no-repeat;
  border-bottom: 1px solid #ccc;
  display: inline-block;
  background-position: 0% 100%;
  color: #3167b3;
  position: relative;
  top: -11px;
}
.app-center .click-active {
  border-top: 7px solid #1078b5;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #fafafa;
  color: #000;
}
.pbx .click-active {
  border-top: 7px solid #1078b5;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #fafafa;
  color: #000;
}
small.border-bottom {
  border-bottom: 1px solid #ccc;
  width: 56%;
  display: inline-block;
  position: relative;
  top: 18px;
  left: -4px;
}
#switch-menu div:after {
  display: inline-block;
  width: 100%;
  position: relative;
  top: -13px;
  height: 1px;
  background: #ccc;
}
/*Getting Started with
  P-Series PBX System*/
.p-series-bx-system {
  background: url(../images/gat-start-with-p-series-pbx-system-bg.png) center
    no-repeat;
  background-size: cover;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 20px 0;
}
.p-series-bx-system div {
  width: 1200px;
  max-width: 90%;
  margin: 0 auto;
}
.p-series-bx-system h1 {
  color: #fff;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.33;
  margin: 0;
  font-family: Manrope !important;
}
.p-series-bx-system p {
  font-size: 22px;
  color: #fff;
  line-height: 36px;
  margin: 20px 0 30px;
  width: 50%;
}
.p-series-bx-system span {
  width: 12px;
  height: 12px;
  background: #f5b418;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
}
.tutorial-one h2,
.tutorial-two h2 {
  text-align: center;
  font-size: 40px;
  margin: 0 auto 30px;
  font-family: Manrope !important;
  color: #101f3a;
  font-weight: 500;
}
.tutorial-one h2 + p {
  width: 1000px;
  max-width: 90%;
  font-size: 18px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
}
.objectives {
  width: 100%;
  margin: 4.5vw auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.objectives img {
  width: 46%;
}
.objectives div {
  width: 48%;
}
.objectives h3 {
  font-size: 30px;
  margin-bottom: 30px;
  margin-top: 10px;
}
.objectives p {
  font-size: 20px;
  background: rgba(238, 241, 246, 0.5);
  border-radius: 0px 34px 34px 0px;
  border-left: 5px solid #006ee1;
  line-height: 65px;
  margin-bottom: 25px;
}
.objectives p span {
  font-size: 20px;
  font-weight: 600;
  color: #006ee1;
  display: inline-block;
  margin: 0 20px 0 25px;
}
.tutorial-btn {
  width: 180px;
  line-height: 50px;
  background: #fff;
  display: block;
  color: #006ee1;
  font-size: 20px;
  text-align: center;
  margin: 3.6vw auto 0;
  cursor: pointer;
  border: 1px solid #006ee1;
  border-radius: 5px;
}
.tutorial-btn:hover {
  background: #006ee1;
  color: #fff;
}
.objectives-active .p-content-right,
.objectives-active .p-content-left {
  display: inline-block;
  vertical-align: top;
}
.getting-started-tutorial {
  position: relative;
}
.p-series-list > div .tutorial-one,
.p-series-list > div .tutorial-two {
  width: 1200px;
  max-width: 90%;
  margin: 7vw auto;
  background: #fff;
  left: 0;
  right: 0;
  display: none;
}
.p-series-list > div .tutorial-one {
  display: block;
  margin-bottom: 5vw;
}
.objectives-active .p-content-left {
  width: 21vw;
  border-radius: 7px;
  box-shadow: 0 0 1vw rgba(61, 74, 89, 0.1);
  margin-right: 3.5vw;
  background: #eef1f6;
}
.objectives-active .fixed-ele {
  position: fixed;
  z-index: 1;
  top: 2vw;
}
.objectives-active .absolute-ele {
  position: absolute;
  bottom: 3vw;
}
.p-content-left .p-title-text {
  font-size: 1.6vw;
  color: #fff;
  background: #0070c0;
  margin-bottom: 0;
  padding-left: 15px;
  padding: 1.5vw 1vw;
}
.p-title-text img {
  width: 3vw;
  margin-right: 1vw;
}
.p-title-text img {
  width: 3vw;
  margin-right: 1vw;
}
.little-point {
  background: #eef1f6;
  margin-bottom: 0;
}
.little-point span {
  display: block;
  font-size: 18px;
  line-height: 30px;
}
.little-point .title {
  background: #eef1f6;
  position: relative;
  padding: 1.5vw 2.5vw 1.5vw 2.3vw;
  cursor: pointer;
}
.little-point .title:before {
  content: "";
  border-right: 2px solid #0070c0;
  border-top: 2px solid #0070c0;
  width: 10px;
  height: 10px;
  display: inline-block;
  transform: rotate(45deg);
  position: absolute;
  left: 0.8vw;
  top: 2vw;
}
.point-red-end .title:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 22px;
  height: 21px;
  background: url(../images/arealy-read-gray-icon.png) center no-repeat;
  background-size: cover;
  right: 1vw;
  top: 1.6vw;
}
.little-point .blue-font {
  font-size: 1.2vw;
  color: #3d4a59;
  margin-bottom: 8px;
  font-weight: 500;
}
.little-point .detail {
  display: none;
}
.little-point .detail span {
  margin: 0 0 1vw;
  position: relative;
  padding: 0 4vw 0.5vw 4vw;
  cursor: pointer;
}
.little-point .detail span:last-child {
  padding-bottom: 2vw;
  margin-bottom: 0;
}
.little-point .detail span:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(203, 214, 226);
  border-radius: 50%;
  position: absolute;
  left: 2.1vw;
  top: 6px;
  background: #eef1f6;
}
.little-point .detail span:after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 2.5vw;
  top: 1.3vw;
  height: 100%;
  border: 1px solid rgb(203, 214, 226);
}
.little-point .detail span:last-child:after {
  display: none;
}
.little-point-active .title {
  background: #eef1f6;
}
.little-point-active .title:before {
  transform: rotate(135deg);
  top: 1.8vw;
}
.little-point-active .detail {
  display: block;
}
.detail span.read-now:before {
  content: "";
  border-color: #0070c0;
}
.detail span.read-now:after {
  border-color: rgb(203, 214, 226);
  border-style: solid;
}
.detail span.read-end:before,
.detail span.read-end:after {
  border-color: #0070c0;
  border-style: solid;
}
.detail span.read-end:before {
  background: #0070c0;
  content: " ";
  font-size: 14px;
  color: #fff;
  line-height: 18px;
  text-align: center;
}
.detail span.read-end-now:before {
  background: #eef1f6;
  color: #0070c0;
}
.objectives-active .p-content-right {
  width: 45vw;
  background: #ffffff;
  padding: 0 2.6vw 2.6vw;
  position: relative;
}
.objectives-active .relative-left {
  position: relative;
  left: 25vw;
}
.p-content-right .content-list {
  display: none;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
}
.p-content-right .content-list:nth-child(1) {
  display: block;
}
.p-content-right .content-list > div {
  position: relative;
}
.p-content-right .content-div {
  background: #fff;
  display: none;
}
.p-content-right .content-div:nth-child(1) {
  display: block;
}
.function-p img,
.function-p .info-span {
  display: inline-block;
  vertical-align: top;
}
.function-p img {
  width: 2.2vw;
  margin-right: 1vw;
}
.function-p .info-span {
  width: 33vw;
}
.p-content-right p {
  font-size: 18px;
  line-height: 30px;
  display: block !important;
}
.content-list h3 {
  text-align: left;
  margin-bottom: 2vw;
  margin-top: 0;
  font-size: 30px;
  font-weight: 400;
}
.content-1 li {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: -0.3vw;
}
.content-1 h3 + p {
  text-align: left;
  font-size: 16px;
}
.function-p {
  background: rgba(238, 241, 246, 0.5);
  padding: 1.5vw 1.2vw;
  margin-top: 2vw;
  border-radius: 10px;
}
.info-span span:nth-child(1) {
  font-size: 1.2vw;
  color: #0070c0;
  margin-bottom: 0.3vw;
  display: inline-block;
}
.info-span span:nth-child(2) {
  display: block;
}
.p-series-prev-btn,
.p-series-next-btn {
  font-size: 16px;
  font-weight: 300;
  position: absolute;
  left: 1.6vw;
  bottom: -1vw;
  cursor: pointer;
  border: 1px solid #e3e3e3;
  padding: 0 1.5vw;
  margin-bottom: -3vw;
  color: #fff;
  background: #0070c0;
}
.p-series-tutorial-bottom-nav {
  color: #5e5e5e;
  position: absolute;
  left: 6.6vw;
  bottom: -1vw;
  cursor: pointer;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  text-align: center;
  width: 48vw;
  font-weight: 300;
  margin-bottom: -3vw;
}
.p-series-next-btn {
  left: initial;
  right: 1.6vw;
}

.btn-cant-click {
  pointer-events: none;
  color: #b9bfc7;
  background: #fff;
}
.p-content-right .procedure {
  display: block;
  clear: both;
}
.p-content-right .have-num {
  position: relative;
  padding-left: 1.5vw;
  margin-top: 1.5vw;
  font-size: 16px;
}
.have-num span {
  width: 20px;
  background: #0070c0;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  color: #fff;
  line-height: 20px;
  font-size: 14px;
  position: absolute;
  left: 0;
  top: 2px;
}
.p-content-right .small-tip {
  margin-left: 1.5vw;
  font-weight: 300;
  margin-bottom: 0;
}
.p-content-right .content-3 .procedure {
  position: relative;
  top: 0.8vw;
}
/**/
.tools-and-resources {
  background: rgba(238, 241, 246, 0.5);
  margin-top: 3vw;
  padding: 5.5vw 0;
}
.tools-and-resources h2 {
  font-size: 40px;
  margin: 0 0 1.3vw 0;
  text-align: center;
  font-family: Manrope !important;
  color: #101f3a;
  font-weight: 500;
  line-height: 1.5;
}
.tools-div {
  width: 1200px;
  max-width: 90%;
  margin: 3vw auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}
.tools-div p {
  font-size: 18px;
  line-height: 30px;
}
.tools-div div img {
  width: 73px;
}
.tools-div h3 {
  font-size: 24px;
  margin: 20px 0;
  font-family: Manrope !important;
  font-weight: 500;
}
.tools-div div {
  text-align: center;
  width: 30%;
}
/*integrations customization css -- 注意有新增！！11期发布之前不能把这块上传，发布后可删除此注释*/
.integrations-chapter div {
  width: 115px;
  height: 115px;
  display: inline-block;
  margin: 25px 34px;
}

.integrations-chapter div:hover {
  border-radius: 10px;
  box-shadow: 4px 8px 55px 0px rgba(147,167,186,0.2);
  transform: scale(1.1);
  cursor: pointer;
}

.integrations-chapter-double div:hover p {
  visibility: visible;
}

.integrations-chapter-double p {
  position: absolute;
  margin: -81px 0;
  /* text-decoration: underline; */
  background-color: #006ee1c7;
  width: 115px;
  color: #fff;
  line-height: 35px;
  visibility: hidden;
}

.integrations-chapter-double a:hover {
  text-decoration: underline;
}

.integrations-chapter-double div:hover a {
  color: white;
  padding-left: 30px;
}

.integrations-chapter-double-en div:hover a {
  color: white;
  padding-left: 3px;
}
.omni-chapter span { 
  margin: 15px 0px;                          
  width: 115px;
}
.integrations-chapter-img {
  /*width: -webkit-fill-available;*/
  width: 100px;
  margin-left: 6px;
  margin-top: 5px;
}

.integrations-chapter-span {
  display: inline-block;
  margin: 15px -21px;
  width: 173px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.integrations-chapter-double-en div:hover a {
  color: white;
  padding-left: 3px;
}
.show-method {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background-color: white;
  width: 100%;
  height: 100%;
  display: none;
  padding: 0 18px;
  border-radius: 20px;
}
.show-method div{
  width: 220px !important;
}
.show-method span {
  position: relative;
  display: block;
  margin: 0;
  width: max-content;
  max-width: 100%;
  bottom: -8px;
}
.show-method .text-span {
  margin: 25px 0 15px;
}
.dif-area:hover .show-method {
  display: block;
}
.ms-dif {
  padding: 1.8vw 1vw 2vw 1vw;
}

.phone-pdf-download {
  font-size: 0;
  display: inline;
}

.phone-pdf-download img{
  width: 50px;
  height: auto;
  float: right;
  position: relative;
  top: -140px;
  right: 0;

}
.phone-pdf-download-zh img{
  width:10%;
  top: -90px;
}
/* live chat customization css */
.messaging-chapter div {
  width: 150px;
  height: 150px;
  display: inline-block;
  margin: 25px 30px;
}

.messaging-chapter div:hover {
  border-radius: 10px;
  box-shadow: 4px 8px 55px 0px rgba(147,167,186,0.2);
  transform: scale(1.1);
  cursor: pointer;
}

.messaging-chapter-double div:hover p {
  visibility: visible;
}

.messaging-chapter-double p {
  position: absolute;
  margin: -81px 0;
  /* text-decoration: underline; */
  background-color: #006ee1c7;
  width: 150px;
  color: #fff;
  line-height: 35px;
  visibility: hidden;
}

.messaging-chapter-double a:hover {
  text-decoration: underline;
}

.messaging-chapter-double div:hover a {
  color: white;
  padding-left: 30px;
}

.messaging-chapter-double-en div:hover a {
  color: white;
  padding-left: 3px;
}
.omni-chapter span { 
  margin: 15px 0px;                          
  width: 115px;
}
.messaging-chapter-img {
  /*width: -webkit-fill-available;*/
  width: 150px;
  margin-left: 6px;
  margin-top: 5px;
}

.messaging-chapter-span {
  display: inline-block;
  margin: 15px -21px;
  width: 173px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.messaging-chapter-double-en div:hover a {
  color: white;
  padding-left: 3px;
}
/* PSE多语言版本 */
.custom-buttons {
  position:absolute;
  right:70px;
  top:45px;
}
.custom-button {
    display: inline-flex;
    margin-right: 10px;
    padding: 5px 10px;
    color: #3c4043;
    background-color: #f8f9fa;
    border-radius: 5px;
}
.custom-button img {
    margin-right: 5px;
    vertical-align: middle; 
    height: auto; 
    width: auto; 
    max-height: 20px; 
}
.custom-button:hover {
    color: #007bff; 
}
a.custom-button {   
    color: #3c4043; 
}
/*Header Switch Language*/
.sw-lang {
    font-size: 18px;
}
.sw-lang .current-lang {
  color:#006ee1;
  margin-right: 5px;
}
.sw-lang .other-lang{
  margin-left:5px;
}
.sw-lang .other-lang a {
  color:black;}

.sw-lang .other-lang a:hover {
  color:#006ee1;
  text-decoration:none;
}

/* 侧边栏 */
#page-side-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  z-index: 2;
  top: 350px;
  bottom: 0;
  right: 0;
  height: fit-content;
  margin: auto;
}
#page-side-bar .content-wrap1 {
  width: 13px;
  padding: 6px 0;
  border-radius: 1px;
  cursor: pointer;
  background-color: #f7f9fa;
  display: none;
}
#page-side-bar .content-wrap1 img {
  width: 100%;
}
#page-side-bar .content-wrap2 {
  display: flex;
}
#page-side-bar .content-wrap2 .link-wrap {
  height: 165px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* padding: 17px 0 14px; */
}
#page-side-bar .content-wrap2 .link-wrap2 {
  height: 220px;
  padding: 3px 0 0;
}

#page-side-bar .content-wrap2 .img-wrap {
  display: flex;
  width: 48px;
  height: 165px;
  background-color: #f7f9fa;
  flex-direction: column;
  justify-content: space-around;
  padding: 4px 0;
  border-radius: 25px;
  box-shadow: 0px 3px 7px 0px rgba(48, 60, 66, 0.07);
  margin-bottom: 40px;
}
#page-side-bar .content-wrap2 .img-wrap.img-change {
  background-color: #006EE1;
}
#page-side-bar .content-wrap2 .img-wrap.img-change img {
  opacity: 0.3;
}
div#page-side-bar .content-wrap2 .img-wrap.img-change .img-active {
  opacity: 1;
}
#page-side-bar .content-wrap2 .img-wrap-cn {
  height: 130px;
}
#page-side-bar .content-wrap2 .link-wrap-cn {
  height: 130px;
  padding: 13px 0 7px;
}

#page-side-bar .content-wrap2 .img-wrap2 {
  height: 220px;
}

#page-side-bar .content-wrap2 img {
  width: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  margin: 5px auto;
}
#page-side-bar .content-wrap2 img.collapse-img {
  width: 40px;
}
#page-side-bar .content-wrap2 div a {
  border-radius: 6px;
  line-height: 0;
  padding: 0 15px;
  width: 0;
  margin: 0 5px 0 auto;
  font-size: 14px;
  background-color: #F7F9FA;
  color: #303c42;
  position: relative;
  z-index: -1;
  opacity: 0;
  display: block;
  height: 45px; 
  cursor: text;
}

#page-side-bar .content-wrap2 div a.collapse,
#page-side-bar .content-wrap2 div a.collapse:hover {
  text-decoration: none;
  color: #303c42;
}
#page-side-bar .content-wrap2 div a.wrap-active {
  opacity: 1;
  z-index: 0;
  width: max-content;
  line-height: 45px;
}
div #footer-bottom {
  background: #f3f3f3;
}
@media (max-width: 1800px) and (min-width: 1501px) {
  .header-menu {
    padding: 18px 13.5vw;
  }
   body .header .banner .content {
      margin: 0px 217px;
  }
  body .header .banner{
    height: 403px;
  }
}
/*integrations customization css end*/
@media (max-width: 1500px) and (min-width: 768px) {
  .header-menu {
    padding: 18px 10.8vw;
  }
  body .header .banner{
    height: 400px;
  }
  .documentations .content, .faq .items, .additional-resources .items {
      max-width: 1100px;
  }

  body .header .banner .content {
      margin: 0px 158px;
  }
  /*  */
  .tem-bec-par .bepartner-now {
    margin-top: 40px;
  }
  .tem-bec-par .become-partner-temp {
    font-size: 35px;
  }
  .tem-bec-par .bepartner-now {
    margin-top: 40px;
  }
  .text-notices-zh{
    margin: 5px 0 0 64px;
  }
  .phone-pdf-download-zh img{
    top: -115px;
}
  /*  */
  #switch-menu {
    height: 90px;
    width: 96%;
  }
  #switch-menu span {
    height: 57px;
  }
  .span-app-center {
    margin-left: -4px;
  }
  .span-developer {
    top: 0;
  }
  #switch-menu div {
    height: 70px;
  }
  small.border-bottom {
    top: 15px;
  }
  .wh_tile {
    margin: 0.9em;
    left: 2.8%;
    width: 29%;
  }
  .content-area,
  .policy-cookie,
  .footerleft,
  .zh-cn-footer .follow-wrap,
  .p-series-bx-system div {
    width: 1100px;
    max-width: 90%;
  }
  .p-series-page .search-note-zh {
    margin: 1.2vw 0 0 2.2vw;
  }
  /*Getting Started with
    *P-Series PBX System*/
  .little-point span {
    font-size: 14px;
    line-height: 27px;
  }
  .p-content-right p,
  .tools-div p {
    font-size: 16px;
    line-height: 27px;
  }
  .objectives p {
    font-size: 18px;
  }
  .objectives p span {
    margin: 0 10px 0 15px;
  }
  .little-point .detail span:after {
    left: 2.7vw;
    top: 1.7vw;
  }
  .p-content-right .have-num,
  .p-content-right .small-tip {
    padding-left: 28px;
  }
  .little-point .blue-font {
    margin-bottom: 0;
  }
  .p-content-right .procedure {
    font-size: 26px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 18px;
  }
  .p-series-list > div .tutorial-one,
  .p-series-list > div .tutorial-two {
    width: 71vw;
  }
  .objectives-active .p-content-right {
    width: 58vw;
    padding: 0 1vw 2.6vw;
  }
  .p-content-right .content-div {
    width: 100%;
  }
  .info-span span:nth-child(1) {
    font-size: 1.4vw;
  }
  .p-series-list > div .tutorial-two {
    width: 86vw;
    margin-top: 5vw;
  }
  .objectives-active .p-content-left {
    width: 23vw;
  }
  .little-point .detail span:after {
    height: 90%;
  }
  .function-p .info-span {
    width: 90%;
  }
  .objectives-active .relative-left {
    left: 27vw;
  }
  /**/
  .p-series-banner {
    min-height: 690px;
    padding-top: 60px;
  }
  .get-start {
    margin: -115px auto 0;
    min-height: 300px;
  }
  .get-start .slide-area {
    min-height: 322px;
  }
  .get-start .flip {
    bottom: -10px;
  }
  #ug-editor-name h1 {
    font-size: 48px;
  }
  #ug-editor-name input[type="search"],
  #apply-edite {
    height: 45px;
  }
  .trending-topics div div:nth-child(1) {
    width: 53%;
  }
  .trending-topics div div:nth-child(2) {
    width: 47%;
  }
  .ask-questions a {
    padding: 20px;
  }
  .pdf-href:before {
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    top: 4px;
  }
  .html-href:before {
    background-size: 15px 20px;
    width: 15px;
    height: 20px;
    /*top: 5px;*/
  }
  .resources-cont a {
    font-size: 20px;
  }
  .trending-topics .view-all,
  .more-videos {
    width: 120px;
  }
  div .pdf-href,
  div .html-href {
    font-size: 14px;
  }
  /*  */
  .get-start,
  .browse-docu,
  .handbook-container,
  .p-services .content-wrap,
  .resources-cont,
  .video-view,
  .trending-topics,
  .documentations-wrap .display-flex {
    width: 1100px;
  }
  .p-series-features .display-flex .item a {
    font-size: 18px;
  }
  .p-series-features-in-subscription .display-flex .item a {
    font-size: 14px;
  }
  .p-series-features-in-subscription .display-flex .item {
    width: 18%;
  }
  .p-series-features {
    width: 80vw;
  }
  .documentations-wrap .slide-area {
    padding-left: 6%;
}
  .documentations-wrap .slide-area div {
    width: 55%;
    margin-left: 6%;
  }
  .pms-integration .content-right h1 {
    font-size: 35px;
  }
  .dif-area .fidelio {
      position: absolute;
      right: 28px;
      bottom: 26px;
  }
}
@media (max-width: 1700px) {
  .p-series-features {
    width: 77vw;
  }
  .p-series-features-in-subscription {
    width: 90vw;
    }
  .contact-center-resources{
    width: 90vw;
  }
  .contact-center-resources .display-flex .item {
    width: 19%;
  }
}
}


@media (max-width: 1280px) and (min-width: 768px) {
  .header-menu {
    padding: 26px 5.8vw;
  }
  /**/
  #apply-edite .title {
    background: none;
    background-position-x: initial;
  }
  .change-guide span {
    /*margin-right: 7vw;*/
  }
  .ask-questions a:before {
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    top: 15px;
  }
  .ask-questions a {
    padding-left: 35px;
  }
  .trending-topics div div:nth-child(2) img {
    margin-top: 5vw;
  }
}
@media (max-width: 1152px) and (min-width: 768px) {
  .span-developer {
    width: 14% !important;
  }
  #switch-menu span {
    font-size: 23px !important;
    line-height: 54px !important;
  }
  .span-developer {
    width: 16% !important;
    background-size: 48px !important;
    margin-left: -25px;
    position: relative;
    top: -7px;
  }
  .header-menu {
    padding: 18px 3.2vw 0;
  }
  .header-menu .header-nav-menu ul.nav-menu-1 li.free-trial {
    margin-right: 15px;
  }
  #switch-menu {
    width: 100%;
  }
  .content-area,
  .policy-cookie {
    width: 1000px;
  }
  .info-span span:nth-child(1) {
    font-size: 18px;
  }
  .function-p img {
    width: 50px;
  }
  #ug-editor-name h1 {
    font-size: 3vw;
  }
  #ug-editor-name input[type="search"] {
    width: 22vw;
  }
  #apply-edite .title,
  #apply-edite li {
    font-size: 15px;
  }
  .p-series-page p {
    font-size: 14px;
    line-height: 22px;
  }
  div .pdf-href,
  div .html-href {
    font-size: 14px;
  }
  .pdf-href:before {
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
  }
  .html-href:before {
    background-size: 14px 20px;
    width: 14px;
    height: 20px;
  }
  .trending-topics .view-all,
  .more-videos {
    width: 12vw;
  }
  /*  */
  .p-services {
    overflow-x: scroll;
    padding: 0 20px;
  }
  .p-services .content-wrap {
    width: 1000px;
    max-width: 1000px;
  }
}
@media (max-width: 800px) {
 
  .content-area {
    flex-wrap: wrap;
  }
  .content-ul {
    margin-right: 10px;
    margin-top: 6px;
  }
  .content-ul span a {
    margin: 0 5px;
    font-size: 16px;
  }
  .header-menu .header-nav-menu ul.nav-menu-1 li.free-trial {
    margin-right: 5px;
  }
  #switch-menu span,
  .change-guide span {
    font-size: 16px;
  }
  .change-guide span {
    line-height: 30px;
  }
  small.border-bottom {
    top: 13px;
  }
  /*Yeastar P-Series PBX System*/

  /*footer-content*/
  .content-area a {
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  /*  */
  body .header .banner .content h1,
  body .header .banner .content .description { 
    display:none;
}
  .container-fluid {
    max-width: 95%;
  }
  .get-start div a {
    font-size: 16px;
  }
  /*cloudpbx head*/
  .header-menu {
    padding: 10px;
  }
  #searchForm {
    width: 100%;
  }
  .wh_search_input {
    padding-left: 150px;
  }
  .header-menu .header-nav-menu {
    float: none;
    display: block;
    margin-top: 12px;
  }
  .header-menu .header-nav-menu ul.nav-menu-1 li:last-child {
    padding-right: 0;
  }
  .header-menu .header-nav-menu ul.nav-menu-1 {
    margin-top: 5px;
  }
  .desktop-nav__product-switcher {
    padding-left: 0;
    display: block;
  }
  .product-switcher--desktop .product-switcher__menu {
    position: relative;
    top: 0;
  }
  .product-switcher-button__caret svg {
    left: 0;
  }
  .wh_header {
    position: initial;
  }
  .wh_tile {
    width: 100%;
  }
   
  .phone-pdf-download img{
    width: 16%;
    top: -265px;
  }
  .phone-pdf-download-zh img {
    width: 65px;
    height: auto;
    top: -161px;
}
  /*cloudpbx category*/
  .pbx .click-active {
    border: none;
    color: #fff;
    height: initial;
    background: #0070c0;
  }
  .span-pbx {
    font-size: 23px !important;
    width: 18%;
    border: none;
    line-height: initial;
  }
  .span-app-center {
    font-size: 23px !important;
    width: 42%;
    height: initial;
    border: none;
  }
  small.border-bottom {
    display: none;
  }
  .span-developer {
    width: 39% !important;
    background-size: 40px !important;
    background-position: 5% 61%;
    top: 0;
    border: none;
    text-align: right;
    height: initial;
  }
  #switch-menu {
    width: 100%;
    margin: 0 auto;
  }
  #switch-menu div {
    max-width: 100%;
  }
   #ug-editor-name .edition-zh{
    width:100%
  }
  .pbx:hover span {
    background: none;
    color: #0070c0;
  }
  /**/
  .down-datasheet-from {
    width: 90%;
    height: 31.6vw;
  }
  .form-alert .close-x {
    font-size: 4vw;
    left: 85.5vw;
    top: -3.9vw;
    width: 7vw;
    height: 7vw;
    line-height: 6vw;
  }
  /*cloud end*/
  .log-and-content {
    padding: 0;
    height: 11rem;
  }
  .pdf-down,
  .language {
    padding: 0 0 0 2.5rem;
    width: 11rem;
  }
  .yeastar-log a:nth-child(1) {
    background: url(https://www.yeastar.com/wp-content/uploads/2018/05/yeastar_white2.png)
      no-repeat center;
    height: 40px;
    width: 123px;
    margin-top: 7px;
  }
  .yeastar-log a:nth-child(2) {
    margin-top: 24px;
    padding-left: 20px;
    top: -8px;
    margin-left: 20px;
  }
  .content-ul {
    margin-right: 9px;
    margin-top: 5px;
    float: left;
  }
  .content-ul span a {
    margin: 0 4px;
    font-size: 15px;
  }
  /* footer menu */
  .menu-content {
    padding: 16px 0px;
  }
  .content-area {
    flex-wrap: wrap;
    padding: 0;
    width: 95%;
  }
  .content-area div {
    width: 50%;
    margin-bottom: 30px;
  }
  .followlink {
    margin-top: 20px;
  }
  .zh-cn-footer .content-area div:nth-child(1) {
    width: 100%;
  }
  .zh-cn-footer .content-area div {
    width: 30%;
  }
  .zh-cn-footer .follow-wrap {
    flex-wrap: wrap;
  }
  .followwp {
    margin-left: 0;
  }
  .zh-cn-footer .policy-cookie {
    display: block;
  }
  .policy-cookie div {
    display: block;
  }
  .tem-bec-par .become-partner-temp {
    font-size: 20px;
  }
  .tem-bec-par {
    min-height: 200px;
  }
  .tem-bec-par .bepartner-now {
    margin: 20px auto 0;
  }
  /*Getting Started with
    P-Series PBX System*/
  .p-series-bx-system {
    min-height: 350px;
  }
  .p-series-bx-system h1 {
    font-size: 20px;
    line-height: 30px;
  }
  .p-series-bx-system p,
  .tools-div p {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }
  .tutorial-one h2,
  .tutorial-two h2 {
    font-size: 20px;
  }
  .p-series-list > div .tutorial-one,
  .p-series-list > div .tutorial-two,
  .objectives {
    width: 95%;
  }
  .tutorial-one h2 + p,
  .content-1 h3 + p,
  .p-content-right p {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }
  .objectives img,
  .objectives div {
    width: 100%;
  }
  .objectives p {
    font-size: 16px;
    width: 100%;
    border-left: 5px solid #0082cc;
    line-height: 22px;
    padding: 12px 10px;
  }
  .objectives p span,
  .content-list h3 {
    font-size: 20px;
  }
  .objectives p span {
    margin: 0 10px 0 5px;
  }
  .tutorial-btn {
    width: 150px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
  }
  .objectives-active .p-content-left {
    width: 100%;
  }
  .objectives-active .p-content-right,
  .objectives-active .p-content-left {
    height: initial;
    width: 100%;
    margin-right: 0;
    overflow-y: initial;
  }
  .little-point .blue-font {
    font-size: 18px;
    margin-bottom: 0;
  }
  .little-point .title {
    padding: 2vw 0 2vw 5vw;
  }
  .little-point .title:before {
    top: 4vw;
  }
  .little-point-active .title:before {
    top: 4vw;
  }
  .little-point .detail span:before {
    left: 5.5vw;
  }
  .little-point .detail span {
    margin: 0 0 2vw;
    padding: 0 1vw 0 12vw;
  }
  .little-point .detail span:after {
    top: 6.3vw;
    left: 7.5vw;
  }
  .p-content-right .content-div {
    height: initial;
    overflow-y: initial;
  }
  .info-span span:nth-child(1) {
    font-size: 18px;
  }
  .function-p .info-span {
    width: 100%;
  }
  .function-p img {
    width: 50px;
  }
  .function-p {
    padding: 16px 10px;
  }
  .objectives-active .p-content-right {
    min-height: 850px;
  }
  .p-content-right .have-num {
    padding-left: 6.5vw;
  }
  .p-content-right .small-tip {
    margin-left: 6.5vw;
    padding-right: 15px;
  }
  .tools-and-resources h2 {
    font-size: 25px;
  }
  .tools-div div img {
    width: 50px;
  }
  .tools-div div {
    width: 100%;
    margin: 20px 0 0 0;
  }
  .tools-div h3 {
    margin: 20px 0 10px;
    font-size: 18px;
  }
  .p-title-text img {
    width: 30px;
  }
  .p-content-left .p-title-text {
    font-size: 18px;
  }
  .p-content-right .content-list {
    width: 100%;
  }
  .resources-cont a {
    font-size: 20px;
  }
  /* Yeastar P系列 IPPBX */
  .p-series-banner {
    background-position-x: left;
    min-height: 550px;
    padding-top: 30px;
  }
  #ug-editor-name h1 {
    font-size: 30px;
    line-height: initial;
  }
  #apply-edite {
    width: 100%;
  }
  #apply-edite .title {
    padding: 0 15px;
    background-position-x: 96%;
  }
   .text-notices {
    max-width: 107%;
    text-align: left;
    margin: 8px auto 0;
  }
   .text-notices-zh {
    margin:0;
    max-width:100%;
  }
  #ug-editor-name input[type="search"] {
    width: 100%;
    margin-bottom: 10px;
  }
  #ug-editor-name .search_input {
    width: 100%;
  }
  .images-group {
    width: 100%;
    margin-left: 0;
  }
  .images-group img,
  .dif-area {
    width: 100%;
  }
  .handbook-container .handbook-flex .handbook-item {
    width: 100%;
    min-height: 600px;
  }
 
  .change-guide {
    width: 100%;
    margin: 30px auto;
  }
  .p-series-page h2 {
    font-size: 22px;
    margin: 10px 0 20px;
    line-height: initial;
  }
  .browse-docu,
  .handbook-container {
    width: 90%;
  }
  .trending-topics p {
    margin-bottom: 30px;
  }
  .ask-questions a {
    padding: 10px 25px 0 10px;
  }
  .ask-questions a:after {
    right: 10px;
  }
  /* .dif-area div:nth-child(2) {
    width: 80%;
  } */
  div .pdf-href,
  div .html-href {
    padding-left: 22px;
  }
  .get-start {
    width: 90%;
    min-height: 400px;
  }
  .get-start .slide-area {
    padding: 20px;
    min-height: 400px;
  }
  .get-start div:nth-child(2) {
    width: 100%;
  }
  .get-start-wrap p {
    width: 100%;
  }
  .get-start .flip {
    bottom: 0;
  }
  .get-start img {
    width: 55%;
  }
  .get-start .get-start-wrap {
    padding-top: 60px;
  }
  .p-series-features .display-flex .item {
    width: 100%;
  }
  .p-series-features {
    width: 90%;
  }

  .guide-chapters-new .chapter {
    min-width: 124px;
  }

  .trending-topics {
    width: 90%;
  }
  .trending-topics div div:nth-child(1),
  .trending-topics div div:nth-child(2) img,
  .video-view div img,
  .video-view h4 {
    width: 100%;
  }
  .ask-questions a:before {
    top: 8px;
  }
  .video-view {
    width: 90%;
    display: block;
  }
  .resources-cont {
    width: 90%;
  }
  .video-view div img {
    width: 100%;
    height: auto;
  }
  .video-view div {
    margin: 3vw auto 30px;
    width: 100%;
  }
  .down-datasheet-from iframe {
    width: 100%;
    height: 208px;
  }
  /*  */
  .p-services {
    overflow-x: scroll;
    padding: 0 20px;
  }
  .p-services .content-wrap {
    width: 1000px;
    max-width: 1000px;
  }
  #ug-editor-name .p-series-info:first-child {
    width: 100%;
  }
  .change-guide span {
    width: 100%;
  }
  .change-guide span:hover:after,
  .change-guide-active:after {
    width: max-content;
  }
  .dif-area div:nth-child(1),
  .dif-area div:nth-child(2) {
    width: 100%;
    margin: 5px 0 0;
  }
  .dif-area {
    padding: 20px;
  }
  
  .dif-area .not-available {
    margin: -12px auto  !important;
  } 
  
  .trending-topics div div:nth-child(2) {
    width: 100%;
    padding: 30px 0;
  }
  .resources-cont div {
    width: 100%;
    min-height: 150px;
  }
  .tem-bec-par .become-partner-temp {
    font-size: 24px;
  }
  .content-area {
    flex-wrap: wrap;
  }
  .content-area div {
    margin: 20px 0;
  }
  .dif-guide {
    position: static;
  }
  .dif-guide img {
    width: auto;
  }
  .resources-cont-cn img {
    width: 24vw;
  }
  .documentations-wrap .slide-area div,
  .documentations-wrap .slide-area img {
    width: 100%;
    margin-left: 0;
  }
  .documentations-wrap .display-flex {
    min-height: 590px;
  }
  .resources-cont div {
    margin: 0 0 20px 0;
    border-right: none;
  }
  div#footer-widgets .footer-box,
  div#footer-widgets .footer-box:nth-child(3) {
    width: 100%;
  }
}
@media (max-width: 400px) {
  .handbook-container .handbook-flex .handbook-item {
    width: 100%;
    min-height: 470px;
  }
}
a {
    text-decoration: none;
}
  .wh_search_textfield::placeholder {
  font-family: "Open Sans" !important;
}
.wh_search_textfield::-webkit-input-placeholder { 
  font-family: "Open Sans" !important;
}