.dropdown {
    --text: #CDD9ED;
    --border: #CDD9ED;
    --borderActive: #0f7cb6;
    --background: transparent;
    --arrow: #99A3BA;
    --arrowActive: #6C7486;
    --listText: #99A3BA;
    --listBackground: #fff;
    --listActive: #F5F9FF;
    --listTextActive: #6C7486;
    --listBorder: #E4ECFA;
    --textFilled: #6C7486;
}
.dropdown select {
    display: none;
}

.noscroll {
    overflow: hidden;
}

.dropdown > span {
    cursor: pointer;
    /*color: #333333;*/
    padding:10px 10px 10px 5px;
    border:none;
    border-bottom: 1px solid #757575;
    display: block;
    position: relative;
    background: var(--background);
    transition: all .3s ease;
}
.dropdown > span:before, .dropdown > span:after {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 2px;
    border-radius: 1px;
    top: 50%;
    right: 15px;
    background: var(--arrow);
    transition: all .3s ease;
}
.dropdown > span:before {
    margin-right: 4px;
    -webkit-transform: scale(0.96, 0.8) rotate(50deg);
    transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdown > span:after {
    -webkit-transform: scale(0.96, 0.8) rotate(-50deg);
    transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdown ul {
    height: 0px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    max-height: calc(var(--max-scroll) * 42px);
    top: 30px;
    left: 0;
    z-index: 1;
    right: 0;
    background: var(--listBackground);
    border-radius: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    -webkit-transform: scale(0.8) translate(0, 4px);
    transform: scale(0.8) translate(0, 4px);
    border: 1px solid var(--listBorder);
}
.dropdown ul li {
    opacity: 0;
    -webkit-transform: translate(6px, 0);
    transform: translate(6px, 0);
    transition: all .3s ease;
}
.dropdown ul li a {
    cursor: pointer;
    display: block;
    padding: 10px 16px;
    color: var(--listText);
    text-decoration: none;
    outline: none;
    position: relative;
    transition: all .3s ease;
}
.dropdown ul li.dropdown-group-label {
    cursor: pointer;
    display: block;
    padding: 10px;
    color: #0f7cb6;
    font-style: oblique;
    font-weight: 200;
    text-decoration: none;
    outline: none;
    position: relative;
    transition: all .3s ease;
}
.dropdown ul li a:hover {
    color: var(--listTextActive);
}
.dropdown ul li.active a {
    color: var(--listTextActive);
    background: var(--listActive);
}
.dropdown ul li.active a:before, .dropdown ul li.active a:after {
    --scale: .6;
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    position: absolute;
    right: 17px;
    top: 50%;
    opacity: 0;
    background: var(--listText);
    transition: all .2s ease;
}
.dropdown ul li.active a:before {
    -webkit-transform: rotate(45deg) scale(var(--scale));
    transform: rotate(45deg) scale(var(--scale));
}
.dropdown ul li.active a:after {
    -webkit-transform: rotate(-45deg) scale(var(--scale));
    transform: rotate(-45deg) scale(var(--scale));
}
.dropdown ul li.active a:hover:before, .dropdown ul li.active a:hover:after {
    --scale: .9;
    opacity: 1;
}
.dropdown ul li:first-child a {
    border-radius: 6px 6px 0 0;
}
.dropdown ul li:last-child a {
    border-radius: 0 0 6px 6px;
}
.dropdown.filled > span {
    /*color: var(--textFilled);*/
}
/*.dropdown.open > span {*/
    /*border-color: var(--borderActive);*/
    /*border-width: 2px;*/
/*}*/
.dropdown.open > span:before, .dropdown.open > span:after {
    background: var(--arrowActive);
}
.dropdown.open > span:before {
    -webkit-transform: scale(0.96, 0.8) rotate(-50deg);
    transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdown.open > span:after {
    -webkit-transform: scale(0.96, 0.8) rotate(50deg);
    transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdown.open ul {
    height: auto;
    max-height: 168px;
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1) translate(0, 12px);
    transform: scale(1) translate(0, 12px);
    transition: height 0.2s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}
.dropdown.open ul li {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.dropdown.open ul li {
    transition-delay: calc(40ms * var(--item-index, auto));
}

select {
    --text: #3F4656;
    --border: #2F3545;
    --background: #151924;
}
select.dropdown {
    padding: 9px 16px;
    border-radius: 6px;
    /*color: var(--text);*/
    border: 1px solid var(--border);
    background: var(--background);
    line-height: 22px;
    font-size: 16px;
    font-family: inherit;
    -webkit-appearance: none;
}

/* label */
.material-select-label {
    color:#999;
    font-size:14px;
    font-weight:300;
    position:absolute;
    pointer-events:none;
    top:10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
/* active state */
.dropdown.open ~ label, .dropdown.filled ~ label{
    top:-10px;
    font-size:12px;
    color: #0f7cb6;
}

/* BOTTOM BARS ================================= */
.material-select-bar 	{ position:relative; display:block; width:100%; }
.material-select-bar:before, .material-select-bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#0f7cb6;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.material-select-bar:before {
    left:50%;
}
.material-select-bar:after {
    right:50%;
}

/* active state */
.dropdown.open ~ .material-select-bar:before, .dropdown.open ~ .material-select-bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.material-select-highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:15px;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
.dropdown.open ~ .material-select-highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#0f7cb6; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#0f7cb6; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#0f7cb6; }
    to 	{ width:0; background:transparent; }
}