@zohodesk/components 1.0.0-temp-39 → 1.0.0-temp-43

package/lib/common/docStyle.module.css

@@ -1,762 +1,762 @@
-.cboth::after {
-  content: '.';
-  display: block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  clear: both;
-}
-
-.m10 {
-  margin: 10px;
-}
-
-.m50 {
-  margin: 50px;
-}
-
-[dir=ltr] .pl10 {
-  padding-left: 10px;
-}
-
-[dir=rtl] .pl10 {
-  padding-right: 10px;
-}
-
-.p10 {
-  padding: 10px;
-}
-
-.dinblk {
-  display: inline-block;
-}
-
-.docspan {
-  composes: m10;
-  composes: dinblk;
-}
-
-.vtop {
-  vertical-align: top;
-}
-
-.h100px {
-  height: 100px;
-}
-
-.w350 {
-  width: 350px;
-}
-
-.w410 {
-  width: 25.625rem;
-}
-
-.w250 {
-  width: 250px;
-}
-
-.w200 {
-  width: 200px;
-}
-
-.mb20 {
-  margin-bottom: 20px;
-}
-
-[dir=ltr] .mr20 {
-  margin-right: 20px;
-}
-
-[dir=rtl] .mr20 {
-  margin-left: 20px;
-}
-
-.w60 {
-  width: 60%;
-}
-
-.w40 {
-  width: 40%;
-}
-
-.w100 {
-  width: 100%;
-}
-
-.w320px {
-  width: 320px;
-}
-
-.tcenter {
-  text-align: center;
-}
-
-.blue {
-  color: var(--zd_text_prime);
-}
-
-.dark {
-  composes: p10;
-  background-color: var(--dot_bg_black);
-}
-
-.table {
-  composes: p10;
-  composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
-  border-radius: 3px;
-}
-
-[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
-  float: left;
-}
-
-[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
-  float: right;
-}
-
-.tableheading {
-  composes: blue;
-  background: var(--zd_bg_smoke1);
-}
-
-.palette {
-  composes: dinblk;
-  composes: vtop;
-  composes: p10;
-  composes: m10;
-  width: 200px;
-  composes: tcenter;
-  font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
-}
-
-.palette .palettecard {
-  height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
-}
-
-.palette span {
-  display: block;
-  font-size: 13px;
-  margin-top: 5px;
-}
-
-.fontlist {
-  composes: tcenter;
-  composes: p10;
-  composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
-}
-
-.fontlist span {
-  display: block;
-  margin-top: 5px;
-}
-
-.cover {
-  composes: p10;
-  composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
-  border-radius: 5px;
-}
-
-.posrel {
-  position: relative;
-}
-
-.w342 {
-  width: 342px;
-}
-
-.w386 {
-  width: 386px;
-}
-
-.Lhslist {
-  width: 200px;
-  margin: 15px;
-}
-
-.w260 {
-  width: 260px;
-}
-
-.m20 {
-  margin: 20px;
-}
-
-.h604px {
-  height: 604px;
-}
-
-.w310 {
-  width: 310px;
-}
-
-.lft {
-  width: 300px;
-}
-.head {
-  background-color: #e2e4e6;
-  padding: 5px;
-}
-.content, .trow {
-  padding: 5px;
-}
-.trow {
-  border-bottom: 1px dotted #e2e4e6;
-}
-.trow:hover {
-  background-color: #f6f6f6;
-}
-.colorvalue {
-  font-size: 13px;
-  color: #000;
-  background-color: #e2e4e6;
-  padding: 3px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-[dir=ltr] .colorvalue {
-  margin-right: 3px;
-}
-[dir=rtl] .colorvalue {
-  margin-left: 3px;
-}
-.rect {
-  width: 40px;
-  height: 40px;
-  display: flex;
-  border: 1px solid #e2e4e6;
-  margin-bottom: 5px;
-}
-.nestedDiv:first-child .gold {
-  border: 3px solid goldenrod;
-}
-.nestedDiv {
-  display: inline-flex;
-  flex-direction: column;
-  border: 1px dotted #ccc;
-  padding: 4px 6px;
-}
-[dir=ltr] .nestedDiv {
-  margin-right: 5px;
-}
-[dir=rtl] .nestedDiv {
-  margin-left: 5px;
-}
-.para {
-  font-size: 13px;
-  margin-bottom: 5px;
-}
-
-[data-mode='default'] {
-  color: #000;
-  background: #fff;
-}
-[data-mode='dark'] {
-  color: #E2E4E6;
-  background: #232B38;
-}
-
-.baseHue {
-  --hue: 20;
-  --black-white: 0;
-}
-
-/* custom avatar css */
-.customAvatar {
-  composes: baseHue;
-  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
-  --avatar_border_color: hsl(var(--hue), 100%, 60%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-}
-[dir=ltr] .customAvatar {
-  --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
-}
-[dir=rtl] .customAvatar {
-  --avatar_border_radius: 12px 0;
-}
-.customAvatar:hover {
-  --avatar_border_width: 2px;
-  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
-}
-.customAvatar:active {
-  --avatar_border_width: 1px;
-  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
-  --avatar_border_style: dotted;
-}
-
-/* custom avatar team css */
-.avatar {
-  composes: baseHue;
-  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
-  --avatar_border_color: hsl(var(--hue), 100%, 60%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-  --avatar_width: 60px;
-  --avatar_height: 60px;
-}
-.avatar:hover {
-  --avatar_border_width: 2px;
-  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
-}
-.avatar:active {
-  --avatar_border_width: 1px;
-  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
-  --avatar_border_style: dotted;
-}
-.avatarTeam {
-  composes: baseHue;
-  --avatarteam_border_color: hsl(var(--hue), 100%, 40%);
-  --avatarteam_border_style: dashed;
-  --avatarteam_bg_color: hsl(var(--hue), 90%, 95%);
-}
-.avatarTeam:before,
-.avatarTeam:after {
-  --avatarteam_bottom_top: 46px;
-}
-.avatarTeam:before {
-  --avatarteam_bottom_right: 22px;
-}
-.avatarTeam:after {
-  --avatarteam_bottom_left: 22px;
-}
-
-/* custom button css */
-.customButton {
-  composes: baseHue;
-  --button_bg_color: hsl(var(--hue), 100%, 70%);
-  --button_border_color: hsl(var(--hue), 100%, 40%);
-  --button_text_color: hsl(var(--hue), 100%, 30%);
-  --button_border_width: 1px;
-}
-.customButton:hover {
-  --button_bg_color: hsl(var(--hue), 100%, 60%);
-  --button_border_color: hsl(var(--hue), 100%, 20%);
-  --button_text_color: hsl(var(--hue), 100%, 20%);
-}
-.status {
-  --button_loading_bg_color: hsl(var(--hue), 100%, 70%);
-  --button_loading_border_radius: 5px;
-  --button_success_border_color: hsl(var(--hue), 100%, 90%);
-}
-.statusSize {
-  width: 30px;
-  height: 20px;
-}
-
-/* custom button group css */
-.btnGroup {
-  composes: baseHue;
-  --buttongroup_bg_color: hsl(var(--hue), 90%, 90%);
-}
-
-/* custom card, card header, card content, card footer css */
-.customCard {
-  composes: baseHue;
-  background: hsl(var(--hue), 95%, 95%);
-}
-.customCardHeader {
-  background: hsl(var(--hue), 55%, 65%);
-  border: 1px solid hsl(var(--hue), 35%, 45%);
-  padding: 10px 20px;
-  margin: 5px 5px 0 5px;
-  border-radius: 10px 10px 0 0;
-}
-.customCardContent {
-  border-width: 0 1px 0 1px;
-  border-style: solid;
-  border-color: hsl(var(--hue), 35%, 45%);
-  margin: 0 5px;
-  padding: 10px 20px;
-}
-.customCardFooter {
-  background-color: hsl(var(--hue), 55%, 65%);
-  padding: 5px 20px;
-  margin: 0 5px 5px 5px;
-  border-radius: 0 0 10px 10px;
-  border: 1px solid hsl(var(--hue), 35%, 45%);
-}
-
-/* custom checkbox css */
-.customCbox,
-.readOnlyCbox {
-  composes: baseHue;
-  --checkbox_bg_color: hsl(var(--hue), 95%, 95%);
-  --checkbox_stroke_width: 3px;
-  --checkbox_stroke_color: hsl(var(--hue), 100%, 50%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.customCbox:hover,
-.customCbox:focus {
-  --checkbox_stroke_color: hsl(var(--hue), 100%, 30%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.disabledCbox {
-  composes: baseHue;
-  --checkbox_stroke_width: 3px;
-  --checkbox_stroke_color: hsl(var(--hue), 80%, 80%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.largeCbox {
-  width: 24px;
-  height: 24px;
-}
-.largeCboxTick {
-  width: 28px;
-  height: 28px;
-}
-
-/* custom dropbox css */
-.customDropbox {
-  composes: baseHue;
-  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
-  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
-}
-[dir=ltr] .customDropbox {
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
-}
-[dir=rtl] .customDropbox {
-  --dropbox_border_radius: 0 30px;
-}
-.customDropbox:hover {
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
-  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
-}
-.customDropbox:active {
-  --dropbox_bg_color: hsl(var(--hue), 100%, 100%);
-}
-.mobDropbox {
-  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
-  --dropbox_mob_close_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.dropboxSize {
-  width: 240px;
-}
-.mobBg {
-  composes: baseHue;
-  --dropbox_mob_bg_color: hsl(var(--hue), 100%, 50%, 0.05);
-}
-
-/* custom label css */
-.customLbl,
-.readOnlyLbl {
-  composes: baseHue;
-  --label_text_color: hsl(var(--hue), 100%, 50%);
-  --label_line_height: 22px;
-  --checkbox_checked_active_color: hsl(var(--hue), 100%, 10%);
-}
-.customLbl:hover,
-.customLbl:focus {
-  --label_text_color: hsl(var(--hue), 100%, 30%);
-}
-.disabledLabel {
-  composes: baseHue;
-  --label_text_color: hsl(var(--hue), 80%, 80%);
-}
-
-/* custom tag css */
-.customTag {
-  composes: baseHue;
-  --tag_bg_color: hsl(var(--hue), 100%, 80%);
-  --tag_text_color: hsl(var(--hue), 100%, 30%);
-  --tag_border_width: 1px;
-  --tag_border_color: hsl(var(--hue), 100%, 50%);
-}
-.customTag:hover {
-  --tag_bg_color: hsl(var(--hue), 100%, 75%);
-  --tag_text_color: hsl(var(--hue), 100%, 30%);
-}
-.tagAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 95%);
-  --avatar_border_color: hsl(var(--hue), 100%, 70%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-  --avatar_border_radius: 0;
-}
-.customTag:hover .tagAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
-}
-.customTag:hover .tagAvatar:hover {
-  --avatar_bg_color: hsl(var(--hue), 100%, 10%);
-  --avatar_text_color: hsl(var(--hue), 100%, 90%);
-}
-.customTag:active {
-  --tag_bg_color: hsl(var(--black-white), 100%, 100%);
-}
-.customClose {
-  --tag_closeicon_color: hsl(var(--hue), 100%, 95%);
-  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 45%);
-}
-.customClose:hover {
-  --tag_closeicon_color: hsl(var(--hue), 100%, 100%);
-  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 15%);
-}
-.tagDisabled {
-  composes: baseHue;
-  --tag_bg_color: hsl(var(--hue), 70%, 90%);
-  --tag_border_width: 1px;
-  --tag_border_color: hsl(var(--hue), 0%, 80%);
-}
-
-/* custom textbox css */
-.customTextBox {
-  composes: baseHue;
-  --textbox_text_color: hsl(var(--hue), 100%, 50%);
-  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
-  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
-  --textbox_border_width: 1px;
-  --textbox_border_radius: 2px;
-  --textbox_border_color: hsl(var(--hue), 100%, 80%);
-  --textbox_padding: 0 10px;
-  margin: 5px 0;
-}
-.customTextBox:hover {
-  --textbox_border_color: hsl(var(--hue), 100%, 60%);
-}
-.customTextBox:focus {
-  --textbox_border_width: 2px;
-  --textbox_border_color: hsl(var(--hue), 100%, 60%);
-}
-.customTextBox:disabled,
-.customTextBox:disabled:hover {
-  --textbox_bg_color: hsl(var(--hue), 90%, 90%);
-  --textbox_border_color: hsl(var(--hue), 90%, 90%);
-  --textbox_text_color: hsl(var(--hue), 70%, 70%);
-}
-.txtBoxReadOnly {
-  --textbox_border_width: 1px;
-  --textbox_border_style: dashed;
-  --textbox_padding: 0 10px;
-}
-
-/* custom dropdown css */
-.dropdownheading {
-  composes: baseHue;
-  --dropdownheading_text_color: hsl(var(--hue), 100%, 60%);
-  --dropdownheading_underline_width: 50px;
-  --dropdownheading_underline_height: 2px;
-}
-.dropdownheading:after {
-  --dropdownheading_underline_bg_color: hsl(var(--hue), 100%, 40%);
-}
-
-/* custom radio css */
-.radio {
-  composes: baseHue;
-  --radio_width: 30px;
-  --radio_height: 30px;
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
-}
-.radioWrap {
-  --radio_label_margin: 10px 20px;
-}
-.radioWrap:hover .radio,
-.radioWrap:focus .radio {
-  --radio_stroke_color: hsl(var(--hue), 100%, 30%, 0.25);
-  --radio_fill: hsl(var(--hue), 100%, 30%, 0.45);
-  --radio_bg_color: hsl(var(--hue), 100%, 30%, 0.25);
-  --radio_inner_stroke_width: 2px;
-}
-.radioWrap:hover .customLbl,
-.radioWrap:focus .customLbl {
-  --label_text_color: hsl(var(--hue), 100%, 30%);
-}
-.radioDisabled {
-  composes: baseHue;
-  --radio_width: 30px;
-  --radio_height: 30px;
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.10);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.10);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.10);
-}
-
-/* custom listitem css */
-.listItem {
-  composes: baseHue;
-  --listitem_text_color: hsl(var(--hue), 100%, 50%);
-  --listitem_border_color: hsl(var(--hue), 100%, 50%);
-  --listitem_bg_color: hsl(var(--hue), 100%, 95%);
-  --listitem_highlight_bg_color: hsl(var(--hue), 100%, 90%);
-  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.listItem:hover {
-  --listitem_bg_color: hsl(var(--hue), 100%, 92%);
-  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.listTick {
-  --listitem_tickicon_color: hsl(var(--hue), 100%, 50%);
-}
-.listItemAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
-  --avatar_border_color: hsl(var(--hue), 100%, 85%);
-  --avatar_text_color: hsl(var(--hue), 100%, 50%);
-}
-.listItem:hover .listItemAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 50%);
-  --avatar_text_color: hsl(var(--hue), 100%, 100%);
-}
-.listAvatarTeam {
-  --avatarteam_border_color: hsl(var(--hue), 100%, 85%);
-}
-.listRadio {
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
-}
-.listRadioWrap:hover .listRadio {
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.45);
-}
-
-/* custom ribbon css */
-.ribbon {
-  composes: baseHue;
-  --ribbon_bg_color: hsl(var(--hue), 100%, 85%);
-  --ribbon_text_color: hsl(var(--hue), 100%, 50%);
-}
-.plainRibbon {
-  composes: ribbon;
-  --ribbon_bg_color: none;
-}
-.flagRibbon {
-  composes: ribbon;
-}
-[dir=ltr] .flagRibbon {
-  --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
-  --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
-}
-[dir=rtl] .flagRibbon {
-  --ribbon_padding: 10px 20px;
-  --ribbon_flag_border_width: 20px 0 20px 10px;
-}
-.tagRibbon {
-  composes: ribbon;
-  height: 56px;
-  --ribbon_tag_before_width: 40px;
-  --ribbon_tag_before_height: 40px;
-  --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
-  --ribbon_tag_before_left: -20px;
-  --ribbon_tag_before_top: 6px;
-  --ribbon_tag_before_border_radius: 0;
-  border-color: hsl(var(--hue), 100%, 50%);
-}
-[dir=ltr] .tagRibbon {
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
-}
-[dir=rtl] .tagRibbon {
-  border-width: 2px 0 2px 2px;
-  border-radius: 6px 0 0 6px;
-  margin-right: 30px;
-  padding: 18px 30px;
-  --ribbon_tag_before_border_width: 2px 2px 0 0;
-}
-.boxRibbon {
-  composes: ribbon;
-  border-radius: 5px;
-}
-
-/* custom stencil css */
-.customStencil {
-  --stencil_height: 10px;
-  --stencil_width: 100%;
-  --stencil_border_radius: 1px;
-}
-.squareStencil {
-  --stencil_height: 30px;
-  --stencil_width: 30px;
-}
-
-/* custom switch css */
-.customSwitchWrap {
-  composes: baseHue;
-}
-.customSwitch {
-  --switch_off_bg_color: hsl(var(--hue), 100%, 90%);
-  --switch_on_bg_color: hsl(var(--hue), 100%, 50%);
-  --switch_circle_bg_color: hsl(var(--hue), 100%, 97%);
-}
-.customSwitchWrap:hover .customSwitch,
-.customSwitchWrap:focus .customSwitch {
-  --switch_off_bg_color: hsl(var(--hue), 100%, 80%);
-}
-
-/* custom textboxicon css */
-.customTboxwrap {
-  composes: baseHue;
-  --textboxicon_icon_margin: 4px 10px;
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
-}
-.customTbox {
-  --textbox_text_color: hsl(var(--hue), 100%, 50%);
-  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
-  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
-  --textbox_border_width: 0;
-}
-.tBoxLine {
-  --textboxicon_line_height: 2px;
-  --textboxicon_line_color: hsl(var(--hue), 100%, 50%);
-}
-.customTboxwrap:hover .tBoxLine {
-  --textboxicon_line_color: hsl(var(--hue), 100%, 30%);
-}
-.customTboxwrap:focus-within .tBoxLine {
-  --textboxicon_line_color: hsl(var(--hue), 100%, 10%);
-}
-.customTboxwrap:hover .customTboxicon {
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 30%);
-}
-.customTboxwrap:focus-within .customTboxicon {
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 10%);
-}
-.tBoxIconRead,
-.tBoxIconDisable {
-  composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
-}
-.tBoxLineDisable,
-.tBoxIconRead:hover .tBoxLineDisable,
-.tBoxIconDisable:hover .tBoxLineDisable {
-  --textboxicon_line_height: 2px;
-  --textboxicon_line_color: hsl(var(--hue), 100%, 80%);
-}
-
-/* custom textarea css */
-.customTextarea {
-  composes: baseHue;
-  --textarea_border_width: 1px;
-  --textarea_border_color: hsl(var(--hue), 100%, 50%);
-  --textarea_text_color: hsl(var(--hue), 100%, 50%);
-  --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
-}
-.customTextarea:hover {
-  --textarea_border_color: hsl(var(--hue), 100%, 40%);
-}
-.customTextarea:focus {
-  --textarea_border_color: hsl(var(--hue), 100%, 30%);
-}
-.disabledTarea {
-  composes: baseHue;
-  --textarea_border_width: 1px;
-  --textarea_border_color: hsl(var(--hue), 100%, 80%);
-  --textarea_text_color: hsl(var(--hue), 100%, 80%);
-  --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
-}
+.cboth::after {
+  content: '.';
+  display: block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
+  clear: both;
+}
+
+.m10 {
+  margin: 10px;
+}
+
+.m50 {
+  margin: 50px;
+}
+
+[dir=ltr] .pl10 {
+  padding-left: 10px;
+}
+
+[dir=rtl] .pl10 {
+  padding-right: 10px;
+}
+
+.p10 {
+  padding: 10px;
+}
+
+.dinblk {
+  display: inline-block;
+}
+
+.docspan {
+  composes: m10;
+  composes: dinblk;
+}
+
+.vtop {
+  vertical-align: top;
+}
+
+.h100px {
+  height: 100px;
+}
+
+.w350 {
+  width: 350px;
+}
+
+.w410 {
+  width: 25.625rem;
+}
+
+.w250 {
+  width: 250px;
+}
+
+.w200 {
+  width: 200px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+
+[dir=ltr] .mr20 {
+  margin-right: 20px;
+}
+
+[dir=rtl] .mr20 {
+  margin-left: 20px;
+}
+
+.w60 {
+  width: 60%;
+}
+
+.w40 {
+  width: 40%;
+}
+
+.w100 {
+  width: 100%;
+}
+
+.w320px {
+  width: 320px;
+}
+
+.tcenter {
+  text-align: center;
+}
+
+.blue {
+  color: var(--zd_prime);
+}
+
+.dark {
+  composes: p10;
+  background-color: var(--dot_black);
+}
+
+.table {
+  composes: p10;
+  composes: cboth;
+  border: 1px solid var(--zd_smoke84);
+  border-radius: 3px;
+}
+
+[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
+  float: left;
+}
+
+[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
+  float: right;
+}
+
+.tableheading {
+  composes: blue;
+  background:var(--zd_smoke1);
+}
+
+.palette {
+  composes: dinblk;
+  composes: vtop;
+  composes: p10;
+  composes: m10;
+  width: 200px;
+  composes: tcenter;
+  font-weight: bold;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
+}
+
+.palette .palettecard {
+  height: 80px;
+  border: 1px solid var(--zd_smoke83);
+}
+
+.palette span {
+  display: block;
+  font-size: 13px;
+  margin-top: 5px;
+}
+
+.fontlist {
+  composes: tcenter;
+  composes: p10;
+  composes: m10;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
+}
+
+.fontlist span {
+  display: block;
+  margin-top: 5px;
+}
+
+.cover {
+  composes: p10;
+  composes: m10;
+  border: 1px solid var(--zd_smoke1);
+  border-radius: 5px;
+}
+
+.posrel {
+  position: relative;
+}
+
+.w342 {
+  width: 342px;
+}
+
+.w386 {
+  width: 386px;
+}
+
+.Lhslist {
+  width: 200px;
+  margin: 15px;
+}
+
+.w260 {
+  width: 260px;
+}
+
+.m20 {
+  margin: 20px;
+}
+
+.h604px {
+  height: 604px;
+}
+
+.w310 {
+  width: 310px;
+}
+
+.lft {
+  width: 300px;
+}
+.head {
+  background-color: #e2e4e6;
+  padding: 5px;
+}
+.content, .trow {
+  padding: 5px;
+}
+.trow {
+  border-bottom: 1px dotted #e2e4e6;
+}
+.trow:hover {
+  background-color: #f6f6f6;
+}
+.colorvalue {
+  font-size: 13px;
+  color: #000;
+  background-color: #e2e4e6;
+  padding: 3px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+[dir=ltr] .colorvalue {
+  margin-right: 3px;
+}
+[dir=rtl] .colorvalue {
+  margin-left: 3px;
+}
+.rect {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  border: 1px solid #e2e4e6;
+  margin-bottom: 5px;
+}
+.nestedDiv:first-child .gold {
+  border: 3px solid goldenrod;
+}
+.nestedDiv {
+  display: inline-flex;
+  flex-direction: column;
+  border: 1px dotted #ccc;
+  padding: 4px 6px;
+}
+[dir=ltr] .nestedDiv {
+  margin-right: 5px;
+}
+[dir=rtl] .nestedDiv {
+  margin-left: 5px;
+}
+.para {
+  font-size: 13px;
+  margin-bottom: 5px;
+}
+
+[data-mode='default'] {
+  color: #000;
+  background: #fff;
+}
+[data-mode='dark'] {
+  color: #E2E4E6;
+  background: #232B38;
+}
+
+.baseHue {
+  --hue: 20;
+  --black-white: 0;
+}
+
+/* custom avatar css */
+.customAvatar {
+  composes: baseHue;
+  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
+  --avatar_border_color: hsl(var(--hue), 100%, 60%);
+  --avatar_text_color: hsl(var(--hue), 100%, 40%);
+}
+[dir=ltr] .customAvatar {
+  --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
+}
+[dir=rtl] .customAvatar {
+  --avatar_border_radius: 12px 0;
+}
+.customAvatar:hover {
+  --avatar_border_width: 2px;
+  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
+}
+.customAvatar:active {
+  --avatar_border_width: 1px;
+  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
+  --avatar_border_style: dotted;
+}
+
+/* custom avatar team css */
+.avatar {
+  composes: baseHue;
+  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
+  --avatar_border_color: hsl(var(--hue), 100%, 60%);
+  --avatar_text_color: hsl(var(--hue), 100%, 40%);
+  --avatar_width: 60px;
+  --avatar_height: 60px;
+}
+.avatar:hover {
+  --avatar_border_width: 2px;
+  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
+}
+.avatar:active {
+  --avatar_border_width: 1px;
+  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
+  --avatar_border_style: dotted;
+}
+.avatarTeam {
+  composes: baseHue;
+  --avatarteam_border_color: hsl(var(--hue), 100%, 40%);
+  --avatarteam_border_style: dashed;
+  --avatarteam_bg_color: hsl(var(--hue), 90%, 95%);
+}
+.avatarTeam:before,
+.avatarTeam:after {
+  --avatarteam_bottom_top: 46px;
+}
+.avatarTeam:before {
+  --avatarteam_bottom_right: 22px;
+}
+.avatarTeam:after {
+  --avatarteam_bottom_left: 22px;
+}
+
+/* custom button css */
+.customButton {
+  composes: baseHue;
+  --button_bg_color: hsl(var(--hue), 100%, 70%);
+  --button_border_color: hsl(var(--hue), 100%, 40%);
+  --button_text_color: hsl(var(--hue), 100%, 30%);
+  --button_border_width: 1px;
+}
+.customButton:hover {
+  --button_bg_color: hsl(var(--hue), 100%, 60%);
+  --button_border_color: hsl(var(--hue), 100%, 20%);
+  --button_text_color: hsl(var(--hue), 100%, 20%);
+}
+.status {
+  --button_loading_bg_color: hsl(var(--hue), 100%, 70%);
+  --button_loading_border_radius: 5px;
+  --button_success_border_color: hsl(var(--hue), 100%, 90%);
+}
+.statusSize {
+  width: 30px;
+  height: 20px;
+}
+
+/* custom button group css */
+.btnGroup {
+  composes: baseHue;
+  --buttongroup_bg_color: hsl(var(--hue), 90%, 90%);
+}
+
+/* custom card, card header, card content, card footer css */
+.customCard {
+  composes: baseHue;
+  background: hsl(var(--hue), 95%, 95%);
+}
+.customCardHeader {
+  background: hsl(var(--hue), 55%, 65%);
+  border: 1px solid hsl(var(--hue), 35%, 45%);
+  padding: 10px 20px;
+  margin: 5px 5px 0 5px;
+  border-radius: 10px 10px 0 0;
+}
+.customCardContent {
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  border-color: hsl(var(--hue), 35%, 45%);
+  margin: 0 5px;
+  padding: 10px 20px;
+}
+.customCardFooter {
+  background-color: hsl(var(--hue), 55%, 65%);
+  padding: 5px 20px;
+  margin: 0 5px 5px 5px;
+  border-radius: 0 0 10px 10px;
+  border: 1px solid hsl(var(--hue), 35%, 45%);
+}
+
+/* custom checkbox css */
+.customCbox,
+.readOnlyCbox {
+  composes: baseHue;
+  --checkbox_bg_color: hsl(var(--hue), 95%, 95%);
+  --checkbox_stroke_width: 3px;
+  --checkbox_stroke_color: hsl(var(--hue), 100%, 50%);
+  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
+}
+.customCbox:hover,
+.customCbox:focus {
+  --checkbox_stroke_color: hsl(var(--hue), 100%, 30%);
+  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
+}
+.disabledCbox {
+  composes: baseHue;
+  --checkbox_stroke_width: 3px;
+  --checkbox_stroke_color: hsl(var(--hue), 80%, 80%);
+  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
+}
+.largeCbox {
+  width: 24px;
+  height: 24px;
+}
+.largeCboxTick {
+  width: 28px;
+  height: 28px;
+}
+
+/* custom dropbox css */
+.customDropbox {
+  composes: baseHue;
+  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
+  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
+  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
+}
+[dir=ltr] .customDropbox {
+  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
+}
+[dir=rtl] .customDropbox {
+  --dropbox_border_radius: 0 30px;
+}
+.customDropbox:hover {
+  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
+  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
+}
+.customDropbox:active {
+  --dropbox_bg_color: hsl(var(--hue), 100%, 100%);
+}
+.mobDropbox {
+  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
+  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
+  --dropbox_mob_close_bg_color: hsl(var(--hue), 100%, 80%);
+}
+.dropboxSize {
+  width: 240px;
+}
+.mobBg {
+  composes: baseHue;
+  --dropbox_mob_bg_color: hsl(var(--hue), 100%, 50%, 0.05);
+}
+
+/* custom label css */
+.customLbl,
+.readOnlyLbl {
+  composes: baseHue;
+  --label_text_color: hsl(var(--hue), 100%, 50%);
+  --label_line_height: 22px;
+  --checkbox_checked_active_color: hsl(var(--hue), 100%, 10%);
+}
+.customLbl:hover,
+.customLbl:focus {
+  --label_text_color: hsl(var(--hue), 100%, 30%);
+}
+.disabledLabel {
+  composes: baseHue;
+  --label_text_color: hsl(var(--hue), 80%, 80%);
+}
+
+/* custom tag css */
+.customTag {
+  composes: baseHue;
+  --tag_bg_color: hsl(var(--hue), 100%, 80%);
+  --tag_text_color: hsl(var(--hue), 100%, 30%);
+  --tag_border_width: 1px;
+  --tag_border_color: hsl(var(--hue), 100%, 50%);
+}
+.customTag:hover {
+  --tag_bg_color: hsl(var(--hue), 100%, 75%);
+  --tag_text_color: hsl(var(--hue), 100%, 30%);
+}
+.tagAvatar {
+  --avatar_bg_color: hsl(var(--hue), 100%, 95%);
+  --avatar_border_color: hsl(var(--hue), 100%, 70%);
+  --avatar_text_color: hsl(var(--hue), 100%, 40%);
+  --avatar_border_radius: 0;
+}
+.customTag:hover .tagAvatar {
+  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
+}
+.customTag:hover .tagAvatar:hover {
+  --avatar_bg_color: hsl(var(--hue), 100%, 10%);
+  --avatar_text_color: hsl(var(--hue), 100%, 90%);
+}
+.customTag:active {
+  --tag_bg_color: hsl(var(--black-white), 100%, 100%);
+}
+.customClose {
+  --tag_closeicon_color: hsl(var(--hue), 100%, 95%);
+  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 45%);
+}
+.customClose:hover {
+  --tag_closeicon_color: hsl(var(--hue), 100%, 100%);
+  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 15%);
+}
+.tagDisabled {
+  composes: baseHue;
+  --tag_bg_color: hsl(var(--hue), 70%, 90%);
+  --tag_border_width: 1px;
+  --tag_border_color: hsl(var(--hue), 0%, 80%);
+}
+
+/* custom textbox css */
+.customTextBox {
+  composes: baseHue;
+  --textbox_text_color: hsl(var(--hue), 100%, 50%);
+  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
+  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
+  --textbox_border_width: 1px;
+  --textbox_border_radius: 2px;
+  --textbox_border_color: hsl(var(--hue), 100%, 80%);
+  --textbox_padding: 0 10px;
+  margin: 5px 0;
+}
+.customTextBox:hover {
+  --textbox_border_color: hsl(var(--hue), 100%, 60%);
+}
+.customTextBox:focus {
+  --textbox_border_width: 2px;
+  --textbox_border_color: hsl(var(--hue), 100%, 60%);
+}
+.customTextBox:disabled,
+.customTextBox:disabled:hover {
+  --textbox_bg_color: hsl(var(--hue), 90%, 90%);
+  --textbox_border_color: hsl(var(--hue), 90%, 90%);
+  --textbox_text_color: hsl(var(--hue), 70%, 70%);
+}
+.txtBoxReadOnly {
+  --textbox_border_width: 1px;
+  --textbox_border_style: dashed;
+  --textbox_padding: 0 10px;
+}
+
+/* custom dropdown css */
+.dropdownheading {
+  composes: baseHue;
+  --dropdownheading_text_color: hsl(var(--hue), 100%, 60%);
+  --dropdownheading_underline_width: 50px;
+  --dropdownheading_underline_height: 2px;
+}
+.dropdownheading:after {
+  --dropdownheading_underline_bg_color: hsl(var(--hue), 100%, 40%);
+}
+
+/* custom radio css */
+.radio {
+  composes: baseHue;
+  --radio_width: 30px;
+  --radio_height: 30px;
+  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
+  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
+  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
+}
+.radioWrap {
+  --radio_label_margin: 10px 20px;
+}
+.radioWrap:hover .radio,
+.radioWrap:focus .radio {
+  --radio_stroke_color: hsl(var(--hue), 100%, 30%, 0.25);
+  --radio_fill: hsl(var(--hue), 100%, 30%, 0.45);
+  --radio_bg_color: hsl(var(--hue), 100%, 30%, 0.25);
+  --radio_inner_stroke_width: 2px;
+}
+.radioWrap:hover .customLbl,
+.radioWrap:focus .customLbl {
+  --label_text_color: hsl(var(--hue), 100%, 30%);
+}
+.radioDisabled {
+  composes: baseHue;
+  --radio_width: 30px;
+  --radio_height: 30px;
+  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.10);
+  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.10);
+  --radio_fill: hsl(var(--hue), 100%, 50%, 0.10);
+}
+
+/* custom listitem css */
+.listItem {
+  composes: baseHue;
+  --listitem_text_color: hsl(var(--hue), 100%, 50%);
+  --listitem_border_color: hsl(var(--hue), 100%, 50%);
+  --listitem_bg_color: hsl(var(--hue), 100%, 95%);
+  --listitem_highlight_bg_color: hsl(var(--hue), 100%, 90%);
+  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
+}
+.listItem:hover {
+  --listitem_bg_color: hsl(var(--hue), 100%, 92%);
+  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
+}
+.listTick {
+  --listitem_tickicon_color: hsl(var(--hue), 100%, 50%);
+}
+.listItemAvatar {
+  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
+  --avatar_border_color: hsl(var(--hue), 100%, 85%);
+  --avatar_text_color: hsl(var(--hue), 100%, 50%);
+}
+.listItem:hover .listItemAvatar {
+  --avatar_bg_color: hsl(var(--hue), 100%, 50%);
+  --avatar_text_color: hsl(var(--hue), 100%, 100%);
+}
+.listAvatarTeam {
+  --avatarteam_border_color: hsl(var(--hue), 100%, 85%);
+}
+.listRadio {
+  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
+  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
+  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
+}
+.listRadioWrap:hover .listRadio {
+  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.45);
+}
+
+/* custom ribbon css */
+.ribbon {
+  composes: baseHue;
+  --ribbon_bg_color: hsl(var(--hue), 100%, 85%);
+  --ribbon_text_color: hsl(var(--hue), 100%, 50%);
+}
+.plainRibbon {
+  composes: ribbon;
+  --ribbon_bg_color: none;
+}
+.flagRibbon {
+  composes: ribbon;
+}
+[dir=ltr] .flagRibbon {
+  --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
+  --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
+}
+[dir=rtl] .flagRibbon {
+  --ribbon_padding: 10px 20px;
+  --ribbon_flag_border_width: 20px 0 20px 10px;
+}
+.tagRibbon {
+  composes: ribbon;
+  height: 56px;
+  --ribbon_tag_before_width: 40px;
+  --ribbon_tag_before_height: 40px;
+  --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
+  --ribbon_tag_before_left: -20px;
+  --ribbon_tag_before_top: 6px;
+  --ribbon_tag_before_border_radius: 0;
+  border-color: hsl(var(--hue), 100%, 50%);
+}
+[dir=ltr] .tagRibbon {
+  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
+  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
+  margin-left: 30px;
+  padding: 18px 30px/*rtl: 18px 30px*/;
+  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
+}
+[dir=rtl] .tagRibbon {
+  border-width: 2px 0 2px 2px;
+  border-radius: 6px 0 0 6px;
+  margin-right: 30px;
+  padding: 18px 30px;
+  --ribbon_tag_before_border_width: 2px 2px 0 0;
+}
+.boxRibbon {
+  composes: ribbon;
+  border-radius: 5px;
+}
+
+/* custom stencil css */
+.customStencil {
+  --stencil_height: 10px;
+  --stencil_width: 100%;
+  --stencil_border_radius: 1px;
+}
+.squareStencil {
+  --stencil_height: 30px;
+  --stencil_width: 30px;
+}
+
+/* custom switch css */
+.customSwitchWrap {
+  composes: baseHue;
+}
+.customSwitch {
+  --switch_off_bg_color: hsl(var(--hue), 100%, 90%);
+  --switch_on_bg_color: hsl(var(--hue), 100%, 50%);
+  --switch_circle_bg_color: hsl(var(--hue), 100%, 97%);
+}
+.customSwitchWrap:hover .customSwitch,
+.customSwitchWrap:focus .customSwitch {
+  --switch_off_bg_color: hsl(var(--hue), 100%, 80%);
+}
+
+/* custom textboxicon css */
+.customTboxwrap {
+  composes: baseHue;
+  --textboxicon_icon_margin: 4px 10px;
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
+  background-color: hsl(var(--hue), 100%, 90%);
+  margin: 5px 0;
+}
+.customTbox {
+  --textbox_text_color: hsl(var(--hue), 100%, 50%);
+  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
+  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
+  --textbox_border_width: 0;
+}
+.tBoxLine {
+  --textboxicon_line_height: 2px;
+  --textboxicon_line_color: hsl(var(--hue), 100%, 50%);
+}
+.customTboxwrap:hover .tBoxLine {
+  --textboxicon_line_color: hsl(var(--hue), 100%, 30%);
+}
+.customTboxwrap:focus-within .tBoxLine {
+  --textboxicon_line_color: hsl(var(--hue), 100%, 10%);
+}
+.customTboxwrap:hover .customTboxicon {
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 30%);
+}
+.customTboxwrap:focus-within .customTboxicon {
+  --textboxicon_icon_color: hsl(var(--hue), 100%, 10%);
+}
+.tBoxIconRead,
+.tBoxIconDisable {
+  composes: baseHue;
+}
+.tBoxIconRead, .tBoxIconDisable {
+  background-color: hsl(var(--hue), 100%, 90%);
+  margin: 5px 0;
+}
+.tBoxLineDisable,
+.tBoxIconRead:hover .tBoxLineDisable,
+.tBoxIconDisable:hover .tBoxLineDisable {
+  --textboxicon_line_height: 2px;
+  --textboxicon_line_color: hsl(var(--hue), 100%, 80%);
+}
+
+/* custom textarea css */
+.customTextarea {
+  composes: baseHue;
+  --textarea_border_width: 1px;
+  --textarea_border_color: hsl(var(--hue), 100%, 50%);
+  --textarea_text_color: hsl(var(--hue), 100%, 50%);
+  --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
+}
+.customTextarea:hover {
+  --textarea_border_color: hsl(var(--hue), 100%, 40%);
+}
+.customTextarea:focus {
+  --textarea_border_color: hsl(var(--hue), 100%, 30%);
+}
+.disabledTarea {
+  composes: baseHue;
+  --textarea_border_width: 1px;
+  --textarea_border_color: hsl(var(--hue), 100%, 80%);
+  --textarea_text_color: hsl(var(--hue), 100%, 80%);
+  --textarea_padding: 2px 10px;
+  background-color: hsl(var(--hue), 100%, 97%);
+}