.single-select {
    width: 170px;
}

.main-container {
    display: flex;
}

.multi-container {
    display: flex;
    padding-left: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    border: solid thin #d8d7d9;
    border-radius: 5px;
    position: relative;
    max-width: 800px;
}

.multi-item-container {
    display: flex;
    width: 100%;
}

.multi-item {
    padding-left: 7px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 7px;
    border-radius: 5px;
    background: #ccf2ff;
}

.multi-dropdown {
    width: 100%;
    max-width: 803px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    padding-top: 2px;
    padding-bottom: 1px;
    position: absolute;
    z-index: 9;
    border: solid thin #d8d7d9;
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.multi-dropdown-item {
    cursor: pointer;
    padding-left: 5px;
    padding-top: 3px;
    padding-bottom: 2px;
}

.multi-dropdown-item:hover {
    background: #ccf2ff;
}

.remove-item {
    margin-left: 2px;
    font-size: 16pt;
}

.remove-item, .toggle-button {
    cursor: pointer;
    color: #006080;
}

.multi-placeholder {
    padding-left: 3px;
    padding-top: 2px;
    color: #c2c2c2;
}

/* This will fill the remaining space in the multi-select so that users can click on it and toggle the dropdown */
.space-filler {
    cursor: pointer;
    flex-grow: 1;
}

.toggle-button {
    margin-left: auto;
    margin-right: 2px;
    padding-top: 4px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10pt;
}