.header {
  height: var(--zd_size50) ;
  z-index: 2;
  border-bottom: 1px solid var(--zdt_setupdetail_header_border);
}
.back {
  width: var(--zd_size60) ;
}
.backIcon {
  height: var(--zd_size30) ;
  width: var(--zd_size30) ;
  font-size: var(--zd_font_size12) ;
  display: inline-block;
  color: var(--zdt_setupdetail_backicon);
  line-height: 2.5;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}
[dir=ltr] .backIcon {
  margin-left: var(--zd_size19) ;
}
[dir=rtl] .backIcon {
  margin-right: var(--zd_size19) ;
}

.backIcon:hover {
  background-color: var(--zdt_setupdetail_hover_backicon_bg);
}
.title {
  font-size: var(--zd_font_size16) ;
  line-height: 1;
  font-family: var(--zd_semibold);
  color: var(--zdt_setupdetail_backicon);
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
}
[dir=ltr] .title {
  padding-right: var(--zd_size12) ;
}
[dir=rtl] .title {
  padding-left: var(--zd_size12) ;
}

.rightPanel {
  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
}
.helpInfoCont {
  position: absolute;
  z-index: 10;
}
[dir=ltr] .helpInfoCont {
  right: 0 ;
  padding: var(--zd_size12) var(--zd_size15) 0 0 ;
}
[dir=rtl] .helpInfoCont {
  left: 0 ;
  padding: var(--zd_size12) 0 0 var(--zd_size15) ;
}
.helpInfo {
  line-height: 2.3636;
  height: var(--zd_size28) ;
  width: var(--zd_size28) ;
  color: var(--zdt_setupdetail_helpinfo_text);
  font-size: var(--zd_font_size11) ;
  display: inline-block;
  border: 1px solid var(--zdt_setupdetail_helpinfo);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
}
[dir=ltr] .mr15 {
  margin-right: var(--zd_size15) ;
}
[dir=rtl] .mr15 {
  margin-left: var(--zd_size15) ;
}

.content {
  z-index: 1;
}
[dir=ltr] .padding {
  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size60) ;
}
[dir=rtl] .padding {
  padding: var(--zd_size10) var(--zd_size60) var(--zd_size10) var(--zd_size25) ;
}
.popup {
  z-index: 3;
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  width: var(--zd_size330) ;
  transition: transform var(--zd_transition3);
  border: 1px solid var(--zdt_setupdetail_popup_border);
  background-color: var(--zdt_setupdetail_popup_bg);
}
[dir=ltr] .popup {
  right: 0 ;
  transform: translateX(100%);
}
[dir=rtl] .popup {
  left: 0 ;
  transform: translateX(-100%);
}
.popup.open {
  transform: translateX(0);
}
.close {
  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
}

.infoHeader {
  color: var(--zdt_setupdetail_infoheader_text);
  padding: var(--zd_size10) var(--zd_size20) var(--zd_size11) ;
  border-bottom: 1px solid var(--zdt_setupdetail_popup_border);
  background-color: var(--zdt_setupdetail_infoheader_bg);
}

.infoIcon {
  height: var(--zd_size26) ;
  width: var(--zd_size26) ;
  font-size: var(--zd_font_size12) ;
  line-height: 2;
  text-align: center;
  border: 1px solid var(--zdt_setupdetail_infoicon_border);
  border-radius: 2px;
}

.infoText {
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
  font-size: var(--zd_font_size13) ;
}

[dir=ltr] .infoText {
  margin-left: var(--zd_size8) ;
  margin-right: var(--zd_size8) ;
}

[dir=rtl] .infoText {
  margin-right: var(--zd_size8) ;
  margin-left: var(--zd_size8) ;
}

.infoClose {
  font-size: var(--zd_font_size28) ;
  color: var(--zdt_setupdetail_infoclose);
  cursor: pointer;
}

.infoFooter {
  padding: var(--zd_size10) var(--zd_size20) ;
}