.webby-select {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 0;
     margin: 0;
     display: block;
     position: relative;
     line-height: normal;
     font-size: 14px;
     font-family: inherit;
     line-height: 20px;
     max-width: 100%;
}

.webby-select *,
.webby-select *:before,
.webby-select *:after {
     -webkit-box-sizing: inherit;
     box-sizing: inherit;
}

.webby-select-button {
     position: relative;
     display: block;
     width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     border: none;
     padding: 5px 25px 5px 10px;
     margin: 0;
     text-decoration: none;
     color: #333;
     background-color: #fff;
     border: 1px solid #ccc;
     cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     font-size: inherit;
     text-align: left;
}

.webby-select-button img {
     display: inline-block;
     max-width: 13px;
     margin-right: 10px;
     max-height: 13px;
     vertical-align: middle;
}

.webby-select-button:after {
     display: block;
     content: "";
     border-color: #888 transparent transparent transparent;
     border-style: solid;
     border-width: 5px 4px 0 4px;
     height: 0;
     right: 10px;
     position: absolute;
     top: 50%;
     width: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
}

.webby-select-dropdown {
     background: #fff;
     -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     z-index: 999;
     padding: 0;
     margin: 0;
     list-style: none;
     max-height: 250px;
     overflow-y: auto;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all 0.25s ease-in-out;
     transition: all 0.25s ease-in-out;
}

.webby-select-option {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 5px 10px;
     width: 100%;
     min-height: 50px;
     cursor: pointer;
     white-space: initial;
     font-size: inherit;
}

.webby-select-option img {
     display: inline-block;
     max-width: 50px;
     max-height: 41px;
     margin-right: 10px;
}

.webby-select-option-selected, .webby-select-option:hover {
     background-color: rgba(0, 0, 0, 0.15);
}

.webby-select-option + .webby-select-option {
     border-top: 1px solid #ccc;
}

.webby-select-element {
     display: none !important;
}

.webby-select-open .webby-select-dropdown {
     opacity: 1;
     visibility: visible;
}

.webby-select-open .webby-select-button:after {
     -webkit-transform: translateY(-50%) rotate(-180deg);
     transform: translateY(-50%) rotate(-180deg);
}

@media (min-width: 768px) {
     .webby-select-dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
     }

     .webby-select-open .webby-select-dropdown {
          -webkit-transform: none;
          transform: none;
     }
}

@media (max-width: 767px) {
     .webby-select-dropdown {
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 9999;
          max-height: 80vh;
          width: 80vw;
          -webkit-transform: translateY(-50%) translateX(-50%) scale(0);
          transform: translateY(-50%) translateX(-50%) scale(0);
          -webkit-box-shadow: 0 1px 15px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 15px 5px rgba(0, 0, 0, 0.25);
     }

     .webby-select-open:before {
          content: "";
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          display: block;
          z-index: 1;
     }

     .webby-select-open .webby-select-dropdown {
          -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
          transform: translateY(-50%) translateX(-50%) scale(1);
     }
}
