/* $Id$ */
.varClass {
  --textColor: var(--zdt_alphabeticList_text);
  --textHoverColor: var(--zdt_alphabeticList_hover_text);
}
.container {
  composes: varClass;
  composes: h100 from '~@zohodesk/components/es/common/common.module.css';
  list-style: none;
  pointer-events: initial;
  margin: 0 ;
  padding: 0 ;
}
.column .title {
  margin-bottom: var(--zd_size3) ;
}
[dir=ltr] .row .title {
  margin-right: var(--zd_size3) ;
}
[dir=rtl] .row .title {
  margin-left: var(--zd_size3) ;
}
.row  .letter {
  padding: 0 var(--zd_size3) ;
}
.column .letter {
  padding: var(--zd_size3) 0 ;
}
.heading {
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
  max-width: 100% ;
}
.list {
  font-size: var(--zd_font_size11) ;
  flex-basis: var(--zd_size12) ;
  color: var(--textColor);
  text-align: center;
  cursor: pointer;
}
.title {
  flex-basis: var(--zd_size15) ;
}
.letter {
  text-transform: uppercase;
  display: inline-block;
}
.numbers .list {
  max-height: var(--zd_size35) ;
}
.list :hover,
.selected {
  color: var(--textHoverColor);
}
.title {
  font-size: var(--zd_font_size11) ;
  font-weight: var(--zd-fw-semibold);
}