/* select style */
.customselect {
  position: relative;
  background-color: var(--body-color);
  font-size: 15px;
  font-family: zoho-puvi-regular;
  color: var(--font-menu-color);
  border-radius: 4px;
  border: 1px solid var(--hr-color);
}
.customselect:hover {
  background-color: var(--menu-color);
}
.customselect select {
  display: none;
}
.select-selected:after {
  position: absolute;
  content: '';
  top: 16px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-color: var(--font-body-color) transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--font-body-color) transparent;
  top: 12px;
}
.select-items div {
  padding: 5px 0 5px 10px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}
.select-selected {
  padding: 4px 20px 0 15px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
.select-items {
  position: absolute;
  background-color: var(--body-color);
  color: var(--font-body-color);
  border: 1px solid var(--hr-color);
  border-radius: 4px;
  padding: 5px 0;
  margin-top: 2px;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
.select-hide {
  display: none;
}
.select-items div:hover,
.same-as-selected {
  background-color: var(--menu-color);
  color: var(--font-menu-color);
}

/* Select Override Service Styles */
.customselect.service-select {
  color: var(--font-lite-body-color);
  font-family: zoho-puvi-regular;
  border-radius: none;
  border: none;
}
.customselect.service-select.active {
  color: var(--font-blue-color);
  font-family: zoho-puvi-medium;
}
.customselect.service-select.active:hover {
  color: var(--font-blue-color);
  font-family: zoho-puvi-medium;
}
.customselect.service-select:hover {
  background-color: transparent;
  color: var(--hover-color);
}
.service-select .select-selected:after {
  top: 11px;
  right: 5px;
  border-radius: 1px;
  border: 4px solid transparent;
  border-color: var(--font-body-color) transparent transparent transparent;
}
.service-select .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--font-body-color) transparent;
  top: 7px;
}
.service-select.active .select-selected:after {
  border-color: var(--font-blue-color) transparent transparent transparent;
}
.service-select.active .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--font-blue-color) transparent;
}
.customselect.service-select .select-items {
  width: 130px;
}
.customselect.service-select .select-items div {
  font-family: zoho-puvi-regular;
}
.customselect.service-select .select-selected {
  padding-left: 0;
  padding-bottom: 3px;
}

/* Select Override Common Styles */
.customselect.common-select {
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: var(--font-body-color);
  font-family: zoho-puvi-regular;
  background: var(--body-color);
  height: 44px;
  border-radius: 25px;
}
.customselect.common-select.bg-menu-color {
  background-color: var(--menu-color);
}
.customselect.common-select:hover {
  background-color: var(--menu-color);
}
.common-select .select-selected:after {
  top: 20px;
  right: 10px;
  border-radius: 1px;
  border: 4px solid transparent;
  border-color: var(--font-body-color) transparent transparent transparent;
}
.common-select .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--font-body-color) transparent;
  top: 16px;
}
.common-select.active .select-selected:after {
  border-color: var(--font-blue-color) transparent transparent transparent;
}
.common-select.active .select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--font-blue-color) transparent;
}
.customselect.common-select .select-items {
  width: 130px;
}
.full-width.customselect.common-select .select-items,
.stepper-type .customselect.common-select .select-items{
  width: 100%;
}
.customselect.common-select .select-items div {
  font-family: zoho-puvi-regular;
  white-space: normal;
}
.customselect.common-select .select-selected {
  padding-left: 0;
  padding-bottom: 11px;
  padding-top: 11px;
}

/* Select Override Panel Styles */
.shortcode-light .customselect.panel-select {
  background-color: #ffffff;
  color: #393939 !important;
}
.shortcode-light .customselect.panel-select .select-items {
  background-color: #ffffff;
  color: #393939 !important;
  border: 1px solid #eaeef5;
}
.shortcode-light .customselect.panel-select .select-items div:hover,
.shortcode-light .customselect.panel-select .same-as-selected {
  background-color: #f6f7f8;
  color: #222222;
}
.shortcode-light .customselect.panel-select:hover {
  box-shadow: 0px 0px 16px #a2a2a234;
}
.shortcode-light .panel-select .select-selected:after {
  background: url(/images/LightPages.svg) no-repeat -470px -102px;
}

.shortcode-dark .customselect.panel-select {
  background-color: #2c2f2f;
  color: #dedede !important;
}
.shortcode-dark .customselect.panel-select .select-items {
  background-color: #2c2f2f;
  color: #dedede !important;
  border: 1px solid #343434;
}
.shortcode-dark .customselect.panel-select .select-items div:hover,
.shortcode-dark .customselect.panel-select .same-as-selected {
  background-color: #222222;
  color: #b6b6b6;
}
.shortcode-dark .customselect.panel-select:hover {
  box-shadow: 0px 0px 16px #171717;
}
.shortcode-dark .panel-select .select-selected:after {
  background: url(/images/DarkPages.svg) no-repeat -470px -102px;
}
.customselect.panel-select {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-family: zoho-puvi-regular;
  height: 24px;
  border: none;
  border-radius: 4px;
}
.panel-select .select-selected:after {
  background: var(--page-icon) no-repeat -470px -102px;
  width: 10px;
  height: 7px;
  top: 9px;
  right: 6px;
  border: none;
}
.panel-select .select-selected.select-arrow-active:after {
  top: 8px;
  rotate: 180deg;
}
.customselect.panel-select .select-items {
  width: 100px;
}
.customselect.panel-select .select-items div {
  font-family: zoho-puvi-regular;
  white-space: normal;
}
.customselect.panel-select .select-selected {
  font-size: 12px;
  padding-left: 0;
  padding-right: 15px;
  padding-bottom: 11px;
  padding-top: 11px;
}