div.cs-skin-overlay {
  background: transparent;
  font-size: 1rem;
  z-index: 2000;
  color: #262626;
  font-family: "gobook", sans-serif;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: max-content;
  
}

@media screen and (max-width: 30em) {
  div.cs-skin-overlay {
    font-size: 1em;
  }
}

.cs-skin-overlay > span {
  background: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-bottom: 2px solid #262626;
  margin-bottom: 4px;
}

.cs-skin-overlay.cs-active > span {
  background: transparent;
  position: relative;
}

.cs-skin-overlay .cs-options {
  position: fixed;
  width: 94%;
  min-height:620px;
  border-radius: 0 0 20px 20px;
  top: 36px;
  overflow: hidden;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  opacity: 0;
  -webkit-transform: perspective(1000px) translate3d(0, 0, -200px);
  transform: perspective(1000px) translate3d(0, 0, -200px);
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s, visibility 0s 0.4s;
  transition: transform 0.4s, opacity 0.4s, visibility 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.cs-skin-overlay.cs-active .cs-options {
  opacity: 1;
  -webkit-transform: perspective(1000px) translate3d(0, 0, 0px);
  transform: perspective(1000px) translate3d(0, 0, 0px);
  -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
}

.cs-skin-overlay .cs-options > ul {
  position: absolute;
  width: 100%;
  
}

.cs-skin-overlay .cs-optgroup {
  padding: 0;
  margin-bottom: 8px;  
}

@media screen and (max-width: 30em) {
  .cs-skin-overlay .cs-optgroup {
    width: 100%;
    float: none;
  }
}

.cs-skin-overlay .cs-optgroup > span {
  font-family: 'gobold', sans-serif;
  font-size: 120%;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.1em 2.6em 0em 1.6em;
  color: #262626;
  background-color: #d9d9d9;
  margin-bottom: 8px;
}

.cs-skin-overlay li.cs-optgroup ul {
  padding:0 20px;
}

.cs-skin-overlay li.cs-optgroup {
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.cs-skin-overlay li.cs-optgroup:first-child {
  text-align: right;
  -webkit-transform: translate3d(1em, 0, 0);
  transform: translate3d(1em, 0, 0);
}

@media screen and (max-width: 30em) {
  .cs-skin-overlay li.cs-optgroup:first-child {
    text-align: left;
  }
}

.cs-skin-overlay li.cs-optgroup:nth-child(2) {
  -webkit-transform: translate3d(-1em, 0, 0);
  transform: translate3d(-1em, 0, 0);
}

.cs-skin-overlay.cs-active li.cs-optgroup {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.cs-skin-overlay li.cs-optgroup ul span {
  padding: 0.2rem 0.1rem;
  background-color: #f8f7f7;
  margin-bottom: 4px;
  padding-left: 30px;
  position: relative;
  border-radius: 999px;
}

.cs-skin-overlay li.cs-optgroup ul span::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  border-radius: 999px 0 0 999px;  
}

.cs-skin-overlay li.cs-optgroup ul span::after{
  content:' ';
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 6px;
  border-radius: 6px;
  border: 2px solid #262626;
}


.cs-skin-overlay li.cs-optgroup li span:hover,
.cs-skin-overlay li.cs-focus span,
.cs-skin-overlay li.cs-selected span {
  color: #262626;
  background: #26262602;
}


.cs-select.cs-active .cs-options{
  overflow: auto;
}