@zohodesk/dot/es/form/fields/Fields.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.container,
.checkboxFieldContainer {
  position: relative;
  word-break: break-word;
}
.fieldContainer {
  position: relative;
  min-height: var(--zd_size25) ;
}
.fieldMargin_medium {
  margin-top: var(--zd_size5) ;
}
.fieldMargin_small {
  margin-top: 0 ;
}
.radioContainer,
.checkbox {
  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
}
.checkbox {
  min-height: var(--zd_size28) ;
}
.checkboxRow {
  display: inherit;
}
.lineClamp_one,
.lineClamp_two {
  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
}
.lineClamp_one {
  -webkit-line-clamp: 1;
}
.lineClamp_two {
  -webkit-line-clamp: 2;
}
.checkboxText {
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
  line-height: normal;
}
[dir=ltr] .checkboxText {
  padding-left: var(--zd_size6) ;
}
[dir=rtl] .checkboxText {
  padding-right: var(--zd_size6) ;
}
.cbTextPointer {
  cursor: pointer;
}
.disabled, .readonly {
  cursor: not-allowed;
}
.cbTextReadonly,
.disabled .fieldLabel,
.readonly .fieldLabel {
  --label_cursor: not-allowed;
}
[dir=ltr] .radio {
  margin: var(--zd_size5) var(--zd_size32) var(--zd_size5) 0 ;
}
[dir=rtl] .radio {
  margin: var(--zd_size5) 0 var(--zd_size5) var(--zd_size32) ;
}
.radio, .radioWrap {
  max-width: 100% 
}
.radiosWrapper {
  gap: var(--zd_size10) 
}
.radioBox {
  max-width: 100% ;
  height: var(--zd_size36) ;
  transition: border var(--zd_transition3);
  padding: 0 var(--zd_size10) ;
  border: 1px solid var(--zdt_radiofield_box_border);
  border-radius: 6px
}
.hoverableRadioBox:hover, .radioBoxActive {
  border-color: var(--zdt_radiofield_box_active_border)
}
.radioBoxActive {
  background-color: var(--zdt_radiofield_box_active_bg)
}
[dir=ltr] .duration {
  margin-right: var(--zd_size15) ;
}
[dir=rtl] .duration {
  margin-left: var(--zd_size15) ;
}
.durationWidth {
  width: var(--zd_size94) ;
}
.flex {
  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
}
.periodContainer {
  composes: dflex flexrow flexwrap from '~@zohodesk/components/lib/common/common.module.css';
  width: 100% ;
  /*margin-left: var(--zd_size15);*/
}
.phoneIcon {
  color: var(--zdt_fields_phoneicon_icon);
  display: inline-block;
  margin: var(--zd_size15) var(--zd_size10) 0 var(--zd_size10) ;
  cursor: pointer;
}
.phoneIcon:hover {
  color: var(--zdt_fields_phoneicon_hover_icon);
}
.newtabIcon {
  color: var(--zdt_fields_newtabicon_icon);
  cursor: pointer;
}
.newtabIcon:hover {
    color: var(--zdt_fields_newtabicon_hover_icon);
}
.labelContainer {
  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
}
.lockIcon,
.infoIcon {
  color: var(--zdt_fields_lockicon_icon);
  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
}
[dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
  margin-left: var(--zd_size5) ;
}
[dir=rtl] .lockIcon, [dir=rtl] .infoIcon {
  margin-right: var(--zd_size5) ;
}
/* .infoIcon {
  opacity: 0;
  visibility: hidden;
}
.container:hover .infoIcon {
  opacity: 1;
  visibility: visible;
} */
/* .lockIcon {
  cursor: pointer;
} */
.lockIcon:hover {
  color: var(--zdt_fields_lockicon_hover_icon);
}
.timeFormat {
  font-size: var(--zd_font_size11) ;
  color: var(--zdt_fields_lockicon_icon);
}
[dir=ltr] .timeFormat {
  margin-left: var(--zd_size4) ;
}
[dir=rtl] .timeFormat {
  margin-right: var(--zd_size4) ;
}
.newTab {
  color: var(--zdt_fields_lockicon_icon);
  font-size: 0 ;
  display: none;
  cursor: pointer;
}
[dir=ltr] .newTab {
  margin-left: var(--zd_size6) ;
}
[dir=rtl] .newTab {
  margin-right: var(--zd_size6) ;
}
.newTab:hover {
  color: var(--zdt_fields_phoneicon_icon);
}
.container:hover .newTab {
  display: block;
}
.lockText {
  font-size: var(--zd_font_size13) ;
  font-style: italic;
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
}
.labelMandatory:after {
  content: '*';
  color: var(--zdt_fields_lockicon_hover_icon);
}
[dir=ltr] .labelMandatory:after {
  padding-left: var(--zd_size2) ;
}
[dir=rtl] .labelMandatory:after {
  padding-right: var(--zd_size2) ;
}
.ePhiTag {
  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
  color: var(--zdt_fields_phitag_text);
  font-size: var(--zd_font_size12) ;
  height: var(--zd_size18) ;
  line-height: 1.5;
  background-color: var(--zdt_fields_phitag_bg);
  border: 1px solid var(--zdt_fields_phitag_border);
  padding: 0 var(--zd_size5) ;
  border-radius: var(--zd_size3);
}
[dir=ltr] .ePhiTag {
  margin-left: var(--zd_size8) ;
}
[dir=rtl] .ePhiTag {
  margin-right: var(--zd_size8) ;
}

.hasChildren{
position: relative;
}

.rightPlaceholder{
  position: absolute;
  bottom:var(--zd_size4) 
}

[dir=ltr] .rightPlaceholder{
  right:var(--zd_size15) 
}

[dir=rtl] .rightPlaceholder{
  left:var(--zd_size15) 
}