.heading-list { flex: 0 0 3rem; display: grid; padding: 10px 12px; grid-template-columns: 6fr 20fr 8fr 16fr 10fr; text-align: center; font-weight: 700; box-shadow: var(--shadow); border-bottom: 1px solid var(--border-color); } .item-list { max-width: 100%; min-height: 60px; display: block; background: transparent; } .item { margin: 15px 10px; display: grid; grid-template-columns: 6fr 0.1fr 20fr 0.1fr 8fr 0.1fr 16fr 0.1fr 10fr; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: move; background: var(--items); border-radius: 10px; font-size: 1rem; font-weight: 600; text-align: center; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 8px 1px rgba(0, 0, 0, 0.14), 0 3px 10px 2px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease-in-out; &:hover { background: var(--items-hover); } } .weapons-box { height: 100%; display: flex; flex-direction: column; } .table-content { flex: 0 0 calc(100% - 8rem); overflow-y: auto; } .bold { font-weight: bold; } .small { font-size: 0.625rem; } .large { font-size: 1.125rem; } .vertical-line { position: relative; width: 1px; height: 3.5rem; } .vertical-line::before { content: ""; position: absolute; top: 15%; bottom: 15%; left: 0; border-left: 1px solid black; } .footer { height: 100%; width: 100%; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-top); display: flex; justify-content: center; align-items: center; button { height: 3rem; width: 80%; border-radius: 10px; background: var(--accept); transition: background-color 0.2s ease-in-out; box-shadow: var(--shadow); &:hover { background-color: var(--accept-hover); } } } //// Drag and Drop .cdk-drag-preview { box-sizing: border-box; border-radius: 10px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { opacity: 0; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }