/*links*/

#keyness .sidebar-text a:hover:after {
    background-color: #9B8945;
}

#keyness .sidebar-text a {
    color: #5d73b8;
}

#keyness .sidebar-text a:hover {
    color: #9B8945;
}

/*sidebar*/
#keyness ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 22%;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
    border-radius: 15px;
  }

/*sidebar text*/
#keyness .sidebar-text {
    margin-bottom: 24px;
    /*! border-bottom: 2px solid rgba(0,0,0,0.5); */
    width: 76%;
    float:right;
    background-color: #f1f1f1;
    border-radius: 15px;
    padding: 1%;
}

/*sidebar buttons*/
#keyness ul button {
    margin-top: 3%;
    margin-left: 3%;
    border-radius: 50px;
    border: none;
}

#keyness ul .active {
    box-shadow:0px 0px 0px 3px black inset;
    color: black !important;
}

#keyness ul .active::before {
    content:" ";
    background-color: black;
    -webkit-mask-image: url("../../img/cancel.svg");
    mask-image: url("../../img/cancel.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: sub;
}

#keyness ul .not-active::before {
    content:" ";
    background-color: white;
    -webkit-mask-image: url("../../img/add_circle.svg");
    mask-image: url("../../img/add_circle.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: sub;
}

#keyness #frequency-option button{
    background-color: #509F98;
    border-color: #509F98;
}

#keyness #charlen-option button{
    background-color: #C16152;
    border-color: #C16152;
}

#keyness #tokenlen-option button{
    background-color: #EDB85C;
    border-color: #EDB85C;
}

#keyness #sentlen-option button{
    background-color: #5d73b8;
    border-color: #5d73b8;
}

#keyness #posdiv-option button{
    background-color: #9B8945;
    border-color: #9B8945;
}

#keyness #germansentiment-option button, #keyness #sentiws-option button {
    background-image: linear-gradient(to right, #457361, #96362F);
}

#keyness #app .container{
    border-radius: 15px;
    border: 3px solid #f1f1f1;
    width: 76%;
    float: right;
    padding: 1%;
    margin-top: .5%;
    overflow: auto;
    max-width: none;
}

/*icon*/

#keyness img {
    width: 20px;
    height: 20px;
    vertical-align: sub;
}

/*charts*/
#keyness g {
    position:absolute;
}

#keyness svg{
    margin-right: 1%;
}

@media screen and (max-width: 800px)  {
    #keyness ul {
        width: 25%;
        border-radius: 0px;
        
    }
    #keyness ul button {
        margin-left: 0%;
        width: 100%;
        border-radius: 15px;
    }
    #keyness #germansentiment-option button {
        word-wrap: anywhere;
    }
    #keyness .sidebar-text, #keyness #app .container {
        padding-left: 2%;
        width: 70%;
    }
}