/* JQUERY CUSTOM SELECT PLUGIN */

body {
   --select-background: white;
   --select-text-color: #333;
   --select-text-muted: #ccc;
   --select-item-hover: #f0f0f0;
   --select-item-hover-2: #e0e0e0;
   --select-label-background: white;
   --select-border-color: transparent;
   --select-arrow-color: #aaa;
}

@media (prefers-color-scheme: dark) {
   body.dark-mode {
      --select-background: #333;
      --select-text-color: #aaa;
      --select-text-muted: rgba(255, 255, 255, 0.3);
      --select-item-hover: #555;
      --select-item-hover-2: #777;
      --select-label-background: #333;
      --select-border-color: transparent;
      --select-arrow-color: #aaa;
   }
}

.select-menu::-webkit-scrollbar {
   /* display: block; */
}

#select {
   position: relative;

   color: var(--select-text-color);
   user-select: none;
   width: 100%;
}

#select>* {
   box-sizing: border-box;
}

#select>li {
   list-style: none;
}

#select>li span.select-label {
   position: relative;
   display: block;
   font-weight: 600;
   background: var(--select-label-background);
   padding: 0.95em 2.5em 0.95em 1em;
   box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.05);
   border-radius: 6px;
   border: 2px solid #00000033;
   transition: 0.2s;
   z-index: 99;
}

#select>li.visible span.select-label,
#select>li:hover span.select-label {
   background: var(--select-item-hover);
   cursor: pointer;
}

#select>li span.select-label:after {
   content: "";
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 7px solid var(--select-arrow-color);
   position: absolute;
   right: 1.25em;
   top: 50%;
   transform: translateY(calc(-50% + 2px));
}

#select>li.hover:hover ul.select-menu,
#select>li.visible ul.select-menu {
   display: block;
}

#select>li.visible .overlay {
   content: " ";
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: -1;
}

#select>li ul.select-menu {
   display: none;
   position: absolute;
   background: var(--select-background);
   box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
   border-radius: 6px;
   border: 1px solid var(--select-border-color);
   width: 100%;
   overflow: hidden;
   overflow-y: auto;
   max-height: 230px;
   z-index: 2;
}

/* flex inline */
#select>li ul.select-menu .select-inline {
   display: flex;
   flex-wrap: nowrap;
}

#select>li ul.select-menu .select-title,
#select>li ul.select-menu.fix .select-title {
   display: block;
   font-weight: 600;
   padding: 0 0 0.5em 0;
   width: 50%;
}

#select>li ul.select-menu .select-title {
   display: none;
   width: 100%;
}

#select>li ul.select-menu .select-close {
   display: none;
   text-align: text-right;
}

/* search */
#select>li ul.select-menu .select-search {
   background: var(--select-background);
   top: 0;
   position: sticky;
   padding: 0.5em;
   z-index: 1;
}

#select>li ul.select-menu .select-search input {
   background: var(--select-item-hover);
   color: var(--select-text-color);
   border: 0;
   outline: none;
   padding: 0.75em 1em;
   width: 100%;
   border-radius: 6px;
}

/* menu */
#select>li ul.select-menu .select-list {
   position: relative;
   padding: 0.5em 0.5em;
}

#select>li ul.select-menu .select-list li {
   position: relative;
   display: block;
   padding: 0.5em 1em;
   transition: 0.2s;
   margin-bottom: 0.25rem;
   font-size: 0.9em;
}

#select>li ul.select-menu .select-list li:not(.disabled):not(.selected):hover {
   background: var(--select-item-hover);
   border-radius: 6px;
   cursor: pointer;
}

#select>li ul.select-menu .select-list li.selected {
   background: var(--select-item-hover);
   border-radius: 6px;
   background: #0057a4;
   border-radius: 6px;
   color: #fff;
}

#select>li ul.select-menu .select-list li.selected span{
   display: flex;
}
#select>li ul.select-menu .select-list span p {
   display: inline-block;
   max-width: 90%;
}

#select>li ul.select-menu .select-list li span:after {
   /* content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   border: 2px solid var(--select-text-color);
   border-radius: 99px;
   top: calc(50% + 1px);
   right: 15px;
   transform: translateY(-50%);
   opacity: 0.5; */
}

#select>li ul.select-menu:not(.responsive) .select-list li.selected span:before {
   content: "✓";
   position: absolute;
   border-radius: 99px;
   top: calc(50% + 1px);
   right: 15px;
   transform: translateY(-50%);
}

/* modes */
#select>li ul.select-menu .select-list li.selected {
   font-weight: 600;
}

#select>li ul.select-menu .select-list li.disabled {
   cursor: not-allowed;
   color: var(--select-text-muted);
}

#select>li ul.select-menu .select-list li.disabled span:after {
   opacity: 0;
}

/* position down directions */
#select>li.down.hover:hover span.select-label,
#select>li.down.visible span.select-label {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
}

#select>li.down.hover:hover ul.select-menu,
#select>li.down.visible ul.select-menu {
   border-top-color: transparent;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   margin-top: -2px;
}

/* UP */
#select>li.up.hover:hover span.select-label,
#select>li.up.visible span.select-label {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
}

#select>li.up span.select-label:after {
   transform: rotate(180deg);
}

#select>li.up.hover:hover ul.select-menu,
#select>li.up.visible ul.select-menu {
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
   bottom: calc(100% - 4.5px);
}

@media only screen and (max-width: 600px) {
   .select-overflow-hidden {
      overflow: hidden !important;
   }

   #select>li ul.select-menu.responsive {
      border-radius: 0;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      min-height: 100vh;
      overflow: hidden;
      overflow-y: auto;
      z-index: 99;
   }

   #select>li ul.select-menu.responsive .select-search .select-title {
      display: block;
   }

   #select>li ul.select-menu.responsive .select-close {
      display: block;
   }

   #select>li span.select-label:after {
      content: "";
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 7px solid var(--select-arrow-color);
      position: absolute;
      right: 1.25em;
      top: calc(50% + 2px);
      transform: translateY(calc(-50% + 2px)) rotate(180deg);
      display: none;
   }

   #select>li span.select-label:before {
      content: "";
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 7px solid var(--select-arrow-color);
      position: absolute;
      top: 25px;
      right: 1.25em;
      transform: translateY(calc(-50% + 2px));
   }
}

select {
   display: none
}

.down.visible{
   position: relative;
   z-index: 999;
}