/* CUSTOM SELECT */
.elx-cms-select .select{
    position: relative;
    width: 100%;
    height: 2rem;
}

.elx-cms-select .selectCustom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

@media (hover: hover) {
  .elx-cms-select .selectCustom {
    display: block;
  }
 .elx-cms-select .selectNative:focus + .elx-cms-select .selectCustom {
    display: none;
  }
}

/* Add the focus states too, They matter, always! */
.elx-cms-select .selectNative:focus,
.elx-cms-select .selectCustom.isActive .selectCustom-trigger {
  border-color:#1e90ff;
}

.elx-cms-select {
  position: relative;
}

.elx-cms-select .selectLabel {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4rem;
}

.elx-cms-select .selectWrapper {
  position: relative;
}

.elx-cms-select .selectNative,
.elx-cms-select .selectCustom-trigger {
  background-color: #fff;
  border: 1px solid #6f6f6f;
  border-radius: 0.2rem;
  text-align: left;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.elx-cms-select .selectCustom-trigger.has-selection {
  background-color: #1e90ff;
  color: white;
}

.elx-cms-select .selectNative {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 0.8rem;
  padding: 0rem 0.8rem;
}

.elx-cms-select .selectCustom-trigger {
  position: relative;
  height: 100%;
  background-color: #fff;
  cursor: pointer;
  line-height:2rem;
  padding-right: 0.5rem;
}

.elx-cms-select .selectCustom-trigger .label{
  overflow: hidden;
}

.elx-cms-select .selectCustom-trigger:hover {
  border-color: #1e90ff;
}

.elx-cms-select .selectCustom-options {
  position: absolute;
  left: 0;
  width: 100%;
  border: 1px solid #6f6f6f;
  border-radius: 0.4rem;
  background-color: #fff;
  box-shadow: 0 0 4px #e9e1f8;
  z-index: 1;
  display: none;
}

.elx-cms-select .selectCustom.isActive .selectCustom-options {
  display: block;
}

.elx-cms-select .selectCustom-option {
  position: relative;
  line-height: 2rem;
  padding-left: 2.5rem;
}

.elx-cms-select .selectCustom-option.isHover,
.elx-cms-select .selectCustom-option:hover {
  background-color: #1e90ff;
  color: white;
  cursor: default;
}

.elx-cms-select .selectCustom-option:not(:last-of-type)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #d3d3d3;
}

.elx-cms-select .selectCustom-option.isActive::before {
  content: "✓";
  position: absolute;
  left: 0.8rem;
}

.elx-cms-select .selectCustom-option.option-noselection {
 pointer-events: none;
 cursor:none
}

.elx-cms-select .arrow-down {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    height: 0.03rem;
    margin-left: 0.2rem;
    margin-bottom: 0.2rem;
    margin-top: 0.57rem;
    margin-right: 0.2rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.elx-cms-select .selectCustom-trigger.has-selection .arrow-down{
   border: solid white;
       border-width: 0 3px 3px 0;
       display: inline-block;
       padding: 3px;
       height: 0.03rem;
       margin-left: 0.2rem;
       margin-bottom: 0.2rem;
       margin-top: 0.57rem;
       margin-right: 0.2rem;
       transform: rotate(45deg);
       -webkit-transform: rotate(45deg);
}

.elx-cms-select .selectCustom-trigger:hover .arrow-down{
  border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    height: 0.03rem;
    margin-left: 0.2rem;
    margin-bottom: 0.2rem;
    margin-top: 0.57rem;
    margin-right: 0.2rem;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}