@import '../../../styles/colors'; $color-white-1: #DDDDE4; .activity-container { display: grid; grid-template-columns: 270px 270px; grid-template-rows: 66px 123px 190px 56px auto; grid-column-gap: 15px; grid-row-gap: 20px; margin-top: 20px; } .description-area { margin: 0; width: 100%; box-sizing: border-box; height: 110px; resize: none; border: 1px solid $color-white-1; border-radius: 4px; background-color: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(39,42,72,0.1); } ::ng-deep .mat-form-field { width: 100%; .mat-form-field-outline { background-color: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(39,42,72,0.1); } } .status-container { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background-color: white; border: 1px solid $color-white-1; border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(39,42,72,0.1); label { color: $color-text-default; font-size: 16px; font-weight: bold; letter-spacing: 0; line-height: 37px; margin-left: 10px; } .status-radio-grp { display: flex; flex-direction: column; .mat-radio-button:first-child { border-top: 1px solid $color-white-1; } .mat-radio-button:last-child { border-bottom: none; } .mat-radio-button { height: 50px; padding: 10px; border-bottom: 1px solid $color-white-1; } } } .title-container { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .description-container { grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } .flex-container { display: flex; flex-direction: column; justify-content: space-between; height: 88vh; } .button-container { display: inline-flex; justify-content: space-between; button { height: 52px; width: 257px; } } .input-container { grid-row-start: 4; grid-row-end: 5; &--from { grid-column-start: 1; grid-column-end: 2; } &--to { grid-column-start: 2; grid-column-end: 3; } }