<style include="iron-flex iron-positioning">
[slot='page-body'] {
height: 282px;
margin-top: -20px;
}
#outerDiv {
height: 236px;
}
.container {
width: 472px;
}
#details {
align-items: center;
color: var(--cros-text-color-primary);
display: flex;
margin-bottom: 40px;
}
#confirmationCodeContainer {
margin-inline-end: 16px;
}
</style>
<base-page>
<div slot="page-body">
<div aria-live="polite">
[[i18n('confirmationCodeMessage')]]
</div>
<div id="outerDiv" class="layout horizontal center">
<div class="container">
<div id="details">
<div>
[[getProfileName_(profileProperties)]]
</div>
</div>
<div id="confirmationCodeContainer" class="relative">
<cr-input id="confirmationCode"
label="[[i18n('confirmationCodeInput')]]"
value="{{confirmationCode}}"
error-message="[[i18n('confirmationCodeError')]]"
invalid="[[showError]]"
on-keydown="onKeyDown_">
</cr-input>
</div>
</div>
</div>
</div>
</base-page>