dark_style.css

body{
    display:grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100%;
    grid-template-areas: ". main .";
    background:#1f1f1f;
}

input{
    padding:5px;
    font-size: 1em;
    color:#a4b2b4;
    background:transparent;
    border:none;
    width:100%;
    border-bottom: 1px solid #98a7aa;
    box-sizing: border-box;
    transition: all 0.7s ease;
}
input:active,input:focus{
    outline: none;
    border-bottom: 1px solid #731580;
}

textarea{
    padding:5px;
    font-size: 1em;
    color:#a4b2b4;
    background:transparent;
    border:1px solid #98a7aa;
    width:100%;
    box-sizing: border-box;
    transition: all 0.7s ease;
}
textarea:active,textarea:focus{
    outline: none;
    border:1px solid #641d61;
}


.container{
    display:block;
    grid-area: main;
    width:100%;
    box-sizing: border-box;
    margin-top:10px;
    color:#a4b2b4;
}
.row{
    display:grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 100%;
    grid-template-areas: "label data";
    margin: 5px 0 10px 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.row:nth-child(0){
    grid-area:label;
    font-size:1em;
    color:#a4b2b4;

}
.row:nth-child(1){
    grid-area: data;
}

.row-info{
    display:grid;
    grid-template-columns: 14% 40% 1% 40% 5%;
    grid-template-rows: 100%;
    grid-template-areas: "label data . info next-row";
    margin: 5px 0 10px 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.row-info .label{
    grid-area:label;
    font-size:1em;
    color:#a4b2b4;

}
.row-info .data{
    grid-area: data;
    margin-right:5px;
}
.row-info .info{
    grid-area: info;
    box-sizing: border-box;
    margin:2px 0px 2px 0px;
}
.row-info .next-row{
    grid-area: next-row;
    justify-self: center;
    align-self: center;
    color:#a4b2b4;
    font-size: 2em;
    text-decoration: none;
}

.row-info .next-row:hover{
    text-decoration: none;
    grid-area: next-row;
    color:#771772;
    font-size: 2em;
}

.group-name{
    display: block;
    font-size:1.5em;
    margin:10px;
    text-align: center;
    color: #9a25c9;
}

.expander{
    transition:all 1s ease;
}

::-webkit-scrollbar{
  width: 5px;
  background:#161618;
}

::-webkit-scrollbar-thumb{
    background: #641d61;
}

/* SELECT STYLE CSS */
.select {
    display: inline;
    position:relative;
    margin:0;
    padding:0;
    }
.select > input{
    border:none;
    position:relative;
    border-bottom: 1px #9ca4aa solid;
    }
.select > input:focus{
    outline:none;
    }
.select > ul.closed{
    display:none;
    list-style:none;
    left:0;
    top:100%;
    position:absolute;
    width:100%;
    margin:0;
    padding:0;
    max-height: 100px;
    overflow-y: scroll;
    background: #8e989e;
    z-index:-1;
    }
.select > ul::-webkit-scrollbar{
    width:3px;
    background:transparent;
}
.select >ul::-webkit-scrollbar-thumb{
    background:#511d61;
    
}
.select > ul > li{
    padding:3px;
}
.select > ul > li:hover{
    background:#731580;
    color:#a0abb3;
}
.select > ul.opened{
    display:block;
    list-style:none;
    left:0;
    top:100%;
    position:absolute;
    width:100%;
    margin:0;
    padding:0;
    max-height: 200px;
    overflow-y: scroll;
    background: #202020;
    box-shadow: 0px 1px 1px #262626;
    z-index:100;
}
.select > a {
    display:block;
    position:absolute;
    left:100%;
    top:0;
    height:15px;
    width:15px;
    margin:2px;
    transform:translateX(-100%);
    }

.select > a:after{
    content:'';
    display:block;
    position:absolute;
    left:0;
    top:0;
    height:15px;
    width:15px;
    margin:2px;
    background:#9c9da0;
    transition:all 0.5s ease;
    }

.select > a:hover:after{
    background: #731580;
}

.select .btn-show:after{
    clip-path: polygon(0% 40%, 0% 20%,50% 60%,100% 20%,100% 40%,50% 80%);
    }
.select .btn-close:after{
    clip-path: polygon(0% 60%, 0% 80%,50% 40%,100% 80%,100% 60%,50% 20%);
    }
/* SELECT STYLE CSS */