.header { display: flex; justify-content: space-between; height: 6.5rem; background-color: var(--header); box-shadow: var(--shadow); .header-data { margin: 0 5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; input { width: 6rem; border: none; background: none; font-size: 1.75rem; font-weight: 600; text-align: center; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } } .name { text-align: center; font-size: 3em; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 100%; } .horizontal-ruler { width: 8rem; height: 1px; border-top: 1px solid var(--border-color); } } .character-body { height: calc(100vh - 6.5rem); .navigation-bar { padding-top: 1.5rem; gap: 2rem; box-shadow: var(--shadow); height: 100%; align-items: center; .nav-link { width: 90%; border-radius: 10px; transition: all 0.25s ease-in-out; font-size: 1.25rem; font-weight: 600; color: var(--text); &.active, &:hover { background-color: var(--tab-active); box-shadow: var(--shadow); } } .disabled-button { border: none; font-size: 1.25rem; font-weight: 600; color: black; cursor: not-allowed; } } .outlet { margin: 2.5rem 2.5rem 0 2.5rem; width: 100%; } .d-flex { height: 100%; } ::ng-deep .tab-pane { height: 100%; width: 100%; } }