.toolbar-wrapper {
    color: #A2A2A2;
    font-style: normal;
    font-weight: 300;
}

.toolbar-outer {
    position: relative;
    z-index: 2;
    color: inherit;
    font: inherit;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    border: 1px solid black;
    border-radius: 3px;
}

.toolbar-outer.showing {
    border: 1px solid black;
    border-radius: 3px 3px 0px 0px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.toolbar-input {
    border-radius: 3px;
    padding: 6px 12px 6px 10px;
    background-color: white;
}

.toolbar-input-field {
    text-overflow: ellipsis;
    align-self: center;
    width: 30vw;
    color: inherit;
    border: none;
    font: inherit;
}

.toolbar-input-shortcut {
    color: inherit;
    font: inherit;
}

.toolbar-input-field:focus {
    outline: none;
}

.toolbar-input-field::placeholder {
    color: inherit;
    opacity: 1;
}

.toolbar-suggestion-bold {
    font-weight: 400;
}

.toolbar-suggestions-container {
    position: absolute;
    width: 100%;
    transform: translate(-1px, -3px);
    padding-top: calc(0.3em + 1px);
    padding-bottom: 0.4em;
    background-color: white;
    border: 1px solid black;
    z-index: -1;
    border-radius: 0px 0px 3px 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}

.toolbar-suggestions-line.no-result {
    cursor: inherit !important;
    color: inherit !important;
    background-color: inherit !important;
}

.toolbar-suggestions-line {
    padding: 6px 12px 6px 12px;
    cursor: pointer;
}

.toolbar-suggestions-line:active, .toolbar-suggestions-line.selected {
    color: black;
    background-color: #F6F6F6;
}

.toolbar-suggestions-line-selected {
    color: black;
    background-color: #F6F6F6;
}

@media screen and (min-width: 1600px) {
    .toolbar-input-field {
        width: 30em;
    }
    #toolbar-wrapper{
        width: 35vw;
    }

}

@media screen and (max-width: 1250px) {
    #toolbar-shortcut {
        display: none;
    }
}


@media screen and (max-width: 650px) {
    .toolbar-input-field {
        width: 50vw;
    }
}

@media screen and (max-width: 400px){
    .toolbar-input-field{
        width: 50vw;
    }
}

@media screen and (max-width: 320px) {
    .toolbar-input-field {
        width: 60vw;
    }
}