.modal-dialog > .outer-container { width: 100%; height: 100%; position: absolute; top: 0; } .modal-dialog > .outer-container:before { content: ""; display: inline-block; height: 100%; width: 0.1rem; margin-left: -0.1rem; vertical-align: middle; } .modal-dialog .container { width: 100%; vertical-align: middle; display: inline-block; } .modal-dialog .modal-dialog-message-container { width: 96rem; position: relative; margin: 0 auto 13rem auto; word-wrap: break-word; } .modal-dialog .modal-dialog-custom-group { color: #ffffff; text-align: center; font-family: Fira Sans; } .modal-dialog .modal-dialog-custom-group.hidden { display: none; } .modal-dialog-input-group { text-align: center; position: relative; margin: 0 auto; width: 70rem; } .modal-dialog-input-group input { font-size: 3.8rem; font-size: 3.8rem; color: #ffffff; text-align: center; background: none; border: none; } .modal-dialog-input-group .focus { bottom: 0px; width: 100%; height: 0.4rem; margin: 0.4rem auto 0 auto; visibility: hidden; background: #00caf2; } .modal-dialog-input-group .clear:before { vertical-align: top; line-height: 3rem; } .modal-dialog-input-group .clear { position: absolute; left: calc(100% - 4rem); border: 0; margin: 0; padding: 0; width: 3rem; height: 3rem; border-radius: 50%; opacity: 0; color: #ffffff; cursor: pointer; background: #999999; } .modal-dialog-input-group :focus ~ .focus { visibility: visible; } .modal-dialog-input-group :focus ~ .clear, .modal-dialog-input-group :focus.clear { opacity: 1; } .modal-dialog .modal-dialog-message { font-size: 3.8rem; font-style: italic; color: #ffffff; text-align: center; font-family: Fira Sans; font-weight: 100; margin-bottom: 3.4rem; } .modal-dialog .modal-dialog-message.hidden { display: none; } .modal-dialog .modal-dialog-button-group { white-space: nowrap; /* use inline-block to wrap content */ display: inline-block; } .modal-dialog.modal-dialog-opened .modal-dialog-button-group { transition: transform 0.2s ease; } .modal-dialog .modal-dialog-button-group > * { margin-right: 4.4rem; } .modal-dialog .modal-dialog-button-group > *:last-child { margin-right: 0; }