.toolbar { display: flex; } .content { display: flex; flex-direction: column; height: 100%; } .icon { padding: 5px; display: flex; justify-content: flex-end; color: var(--ion-color-primary); } mat-icon { font-size: 35px; width: 35px; height: 35px; } .list { border-top: 1px solid var(--line-color); } .task { display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid var(--line-color); padding: 5px; padding-block: 10px; font-size: 18px; } .item { display: flex; flex-direction: row; align-items: center; width: 100%; } .name { color: var(--font-color); } .reward { margin-left: auto; margin-right: 15px; color: var(--positive-amount-color); font-size: 22px; } .negative { color: var(--negative-amount-color); } button { height: 45px; border-radius: 10px; color: white; background: var(--confirm-button-color); padding-inline: 15px; } .add-button { background-color: var(--ion-color-primary); margin-right: 15px; height: 30px; } .assigned { color: var(--line-color); margin-left: 3px; font-size: 15px; } .text { display: flex; align-items: center; width: 60%; margin-left: 10px; }