*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Roboto; */
}
html,body{
    background: rgb(215, 246, 255, 0.992)
}
.box{
display: flex;
    flex: 1;
    background: aliceblue;

}
.select-box{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.option-container{
    background: white;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    order: 1;
    color: rbg(56,52,52);
    opacity: 0;

    position: absolute;
    width: 100%;
    /* height: 100%; */
    top: 90%;
    z-index: 999;
    background: aliceblue;
}
.option, .selected{
    padding: 12px 24px;
    cursor: pointer;
}

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


.up-icon{
    /* content: "\f106"; */
    position: absolute;
    right: 20px;
    color: black;
    transition: all 0.4s;
}


.select-box .option:hover{
    background: #f1fff3;
    border-radius: 5px;
    color: #8ad891;
}

.select-box input{
    width: 100%;
    padding: 16px 16px;
    position: relative;
    z-index: 100;
    border: none;
    font-size: 16px;
    border: 1px solid rgb(150, 150, 166);
}

#option1{
    margin-top: 45px;
}
.active1{
    opacity: 1;
    max-height: 240px;
    /*overflow-y: scroll;*/
    transition: all 0.4s;
    margin-top: 10px;
}

.active1  selected::after{
    transform: rotateY(180deg);
}

.active1 ~ .search-box input{
    opacity: 1;
    /* pointer-events: none; */
}

.option-container::-webkit-scrollbar{
    background: #dddddd;
    border-radius: 8px;
    width: 7px;

}

.option-container::-webkit-scrollbar-thumb {
    background: rgb(149, 149, 149);
    border-radius: 8px;

}