.permission-approval-container { &.page-container { display: flex; border: none; box-shadow: none; width: 100%; margin-top: 2px; height: 100%; flex-direction: column; justify-content: space-between; } @media screen and (min-width: $break-large) { width: 426px; flex: 1; &__footers { display: flex; flex-direction: column-reverse; flex: 1; padding-bottom: 20px; justify-content: space-between; } } &__header { display: flex; flex-direction: column; align-items: flex-end; border-bottom: 1px solid var(--geyser); padding: 9px; } &__title { @include H4; text-align: center; margin-top: 32px; width: 100%; } &__content { display: flex; overflow-y: auto; flex-direction: column; color: #7c808e; padding-left: 24px; padding-right: 24px; a, a:hover { color: var(--dodger-blue); } &__requested { width: 100%; text-align: left; } &__revoke-note { margin-top: 60px; } &__permission { display: flex; align-items: center; label { @include H6; margin-left: 16px; color: var(--Black-100); } } } & &__checkbox { font-size: 1.4rem; margin: 0; } &__content-container { display: flex; flex-direction: column; align-items: center; } &__permissions-header { @include H6; color: #6a737d; } &__permissions-container { width: 100%; display: flex; flex-direction: column; margin-top: 38px; } .page-container__footer { align-items: center; margin-top: 12px; @media screen and (min-width: $break-large) { border-top: none; } footer { width: 100%; justify-content: space-between; button { width: 124px; } } } @media screen and (max-width: $break-small) { &__title { position: initial; } &__content-approval-visual { margin-top: 16px; } .page-container__footer header { padding: 0; } } &__tooltip-body { display: flex; flex-direction: column; } &__bold-title-elements { font-weight: bold; } }