.vp-cs-select-container { width: 100%; height: calc(100% - 25px); display: grid; grid-template-columns: calc(47% - 15px) 50px calc(47% - 15px); grid-auto-rows: 100%; } .vp-cs-select-search { width: 100%; } .vp-cs-select-search::after { content: ''; background-image: url(../../img/close_big.svg); } .vp-cs-select-box { width: 100%; height: 100%; border: 0.25px solid #E4E4E4; overflow-y: auto; overflow-x: hidden; } .vp-cs-select-box.left { /* width: 160px; */ width: 100%; height: calc(100% - 32px); } .vp-cs-select-item { width: 100%; height: 25px; padding: 0px 10px; border-bottom: 0.25px solid #E4E4E4; line-height: 25px; background-color: white; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .vp-cs-select-item:hover { cursor: pointer; background-color: #E4E4E4; } .vp-cs-select-item.selected { color: var(--font-highlight); background-color: #F5F5F5; } /* Item Sorting FIXME: change span to class */ .right .vp-cs-select-item span { padding: 0px 10px 0px 0px; } /* TODO: If sortable, apply this style */ /* .right .vp-cs-select-item span:hover { cursor: n-resize; } */ /* Select Boxes */ .vp-cs-select-btn-box { margin: auto; display: inherit; } .vp-cs-select-btn-box button { height: 24px; background: #FFFFFF; border: 0.25px solid #E4E4E4; border-radius: 3px; } .vp-cs-select-btn-box button:not(:nth-child(1)) { margin-top: 5px; } .vp-cs-select-btn-box button:hover { background: #F8F8F8; }