/*
  Common styles to all themes
*/
.pure-css-select-style {
  width: 100%;
  overflow: hidden;
}
.pure-css-select-style select {
  width: 100%;
  padding-right: 38px;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  /* Hide arrow on FF */
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: ellipsis;
}
/* Hide arrow on IE10*/
.pure-css-select-style select::-ms-expand {
  display: none;
}
.pure-css-select-style optgroup {
  color: inherit;
  font: inherit;
}
/* IE9: To hide select arrow we make the select overflow on the right side there is not another way :( */
@media screen and (min-width:0\0) {
  .pure-css-select-style select {
    width: calc( 100% + 58px );
  }
}
/* Background gradient ------------------------------------------------------ */
.theme-gradient {
  border: 1px solid #ccc;
  border-radius: 2px;
  /* IE9 fallback wi */
  background-position:right 10px center;
  background-repeat: no-repeat, repeat;
  background-image: url('/assets/img/triunghi.svg');
  background-color: #f1d765;
  border:1px solid #fff;
  margin-bottom: 1em;
}
.theme-gradient select {
  padding: 8px 38px 8px 16px;
  font: 700 14px/1.5 'Open Sans', sans-serif;
  letter-spacing: 2px;
  color: #000;
}