.selector__container {
    font-family: 'Secular One',sans-serif;
}

.select-box {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 50%;
}

.select-box .selector__options {
    background: #2f3640;
    color: #f5f6fa;
    max-height: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.4s;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    order: 1;
}

.selected {
    display: block;
    background: #2f3640;
    border-radius: 8px;
    margin-bottom: 8px;
    color: #f5f6fa;
    position: relative;
    order: 0;
}

.inner-selected {
    display: flex;
}

.inner-selected span {
    display: flex;
    align-items: center;
}

.svg-selected {
    position: absolute;
    height: 100%;
    width: 32px;
    right: 10px;
    top: -1px;
    transition: all 0.4s;
}

.svg-selected path {
   stroke: whitesmoke;
}

.select-box .selector__options.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
    margin-top: 54px;
}

.select-box .selector__options.active + .selected .svg-selected {
    transform: rotateX(180deg);
    top: -1px;
}

.select-box .selector__options::-webkit-scrollbar {
    width: 8px;
    background: #0d141f;
    border-radius: 0 8px 8px 0;
}

.select-box .selector__options::-webkit-scrollbar-thumb {
    background: #525861;
    border-radius: 0 8px 8px 0;
}

.select-box .option, .selected {
    padding: 12px 24px;
    cursor: pointer;
}

.select-box label {
    cursor: pointer;
}

.select-box .option .radio {
    display: none;
}

.search-box input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Secular One',sans-serif;
    font-size: 16px;
    position: absolute;
    border: 8px solid #2f3640;
    border-radius: 8px 8px 0 0;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s;
}

.selector-data {
    display: flex;
}

.option label[for] {
    display: flex;
    align-items: center;
}

.selector-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
}

/* Swamp Theme*/

.selected[data-theme='swamp'] {
    background: #828c51;
}

.search-box input[data-theme='swamp']{
    border: 8px solid #828c51;
}

.select-box .selector__options[data-theme='swamp'] {
    background: #828c51;
}

.option[data-theme='swamp'] {
    color: #dee2e6;
}

.option[data-theme='swamp']:focus, .option[data-theme='swamp'][selected="true"],
.option[data-theme='swamp']:hover {
    color: whitesmoke;
    border-top: 1px solid #A3BECC;
    border-bottom: 1px solid #A3BECC;
}

.svg-selected[data-theme='swamp'] path {
    stroke: #dee2e6;
}

/* Classic Theme*/

.selected[data-theme='classic'] {
    color: #66666e;
    background: #e3d5ca;
}

.search-box input[data-theme='classic']{
    border: 8px solid #e3d5ca;
}

.select-box .selector__options[data-theme='classic'] {
    background: #e3d5ca;
}

.option[data-theme='classic'] {
    color: #66666e;
}

.option[data-theme='classic']:focus, .option[data-theme='classic'][selected="true"],
.option[data-theme='classic']:hover {
    color: #1b1b1e;
    border-top: 1px solid #7e7f83;
    border-bottom: 1px solid #7e7f83;
}

.svg-selected[data-theme='classic'] path {
    stroke: #66666e;
}

/* Light Theme*/

.selected[data-theme='light'] {
    color: #222831;
    background: #F2F1EB;
    box-shadow: 0 1px 15px #ccc;
}

.search-box input[data-theme='light']{
    border: 8px solid #F2F1EB;
    box-shadow: 0 1px 15px #ccc;
    stroke: black;
}

.select-box .selector__options[data-theme='light'] {
    background: #F2F1EB;
    box-shadow: 0 1px 15px #ccc;
}

.option[data-theme='light'] {
    color: #222831;
}

.option[data-theme='light']:focus, .option[data-theme='light'][selected="true"],
.option[data-theme='light']:hover {
    color: #111111;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
}

.svg-selected[data-theme='light'] path {
    stroke: black;
}

.search-box input:focus {
    outline: none;
}

.select-box .selector__options.active ~ .search-box input {
    opacity: 1;
    pointer-events: auto;
}

.option:focus {
    color: #8AAAE5;
    border-top: 1px solid rgb(0 90 156);;
    border-bottom: 1px solid rgb(0 90 156);;
}

.jqHide {
    visibility: hidden;
    pointer-events: none;
    order: 2;
}

.option:focus, .option[selected="true"],
.option:hover {
    color: #8AAAE5;
    border-top: 1px solid rgb(0 90 156);;
    border-bottom: 1px solid rgb(0 90 156);;
}

.selector-error {
    color:red;
    font-size: 16px;
    border: 1px solid black;
    padding: 2px;
    margin-bottom: 5px;
    order: 3;
}