#curves-settings-popup{ width: 100%; height: 100%; z-index: 53; position: absolute; top: 0; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.2); margin-top: 30px; padding-bottom: 60px; } #curves-settings-popup-container{ width: 100%; height: 100%; border: 2px solid black; margin: auto; background-color: white; } #curves-settings-popup-header{ height: 40px; display: flex; border-bottom: 2px solid black; box-sizing: border-box; } #curves-settings-popup-header span{ margin-top: auto; margin-bottom: auto; margin-left: 10px; } #curves-settings-popup-header img{ width: 15px; height: 15px; margin-left: auto; margin-right: 10px; margin-top: auto; margin-bottom: auto; cursor: pointer; } #curves-settings-popup-content{ padding: 10px; height: calc(100% - 40px); display: flex; flex-direction: column; } .buttons-wrapper{ width: 100%; height: 30px; padding-top: 5px; padding-bottom: 5px; display: flex; } .apply-button, .cancel-button{ margin-left: auto; } .scrollable-content{ height: 100%; overflow-y: auto; } #curves-settings-popup-table{ width: 100%; } #curves-settings-popup-table tr td { padding: 0; } #curves-settings-popup-table th { text-align: left; } #curves-settings-popup-table tbody tr td:not(.bin-cell){ position: relative; } #curves-settings-popup-table tbody tr td:not(.bin-cell) div{ position: absolute; display: inline-block; top: 0; right: 0; bottom: 0; left: 0; } .text-input{ padding: 0; width: 99%; } .bin-cell{ width: 15px; } td img{ width: 15px; height: 15px; }