.container { position: fixed; top: calc(50% - 150px); left: calc(50% - 150px); display: block; padding: 2px; font-size: 10pt; border-left: none; border-top: none; z-index: 3; background-color: var(--challenge-modal-background-color); border: var(--challenge-modal-border); } .title { font-size: var(--challenge-modal-title-font-size); text-align: center; margin-bottom: 1px; padding: 0; height: 18px; line-height: 18px; cursor: move; font-weight: var(--challenge-modal-title-font-weight); background-color: var(--challenge-modal-title-background-color); color: var(--challenge-modal-title-text-color); border: var(--challenge-modal-title-border); } .closeIcon { all: unset; float: right; cursor: pointer; margin-bottom: -4px; width: 18px; height: 18px; border: none; image-rendering: pixelated; background-image: var(--close-button-background-image); } .container input[type="text"], .container textarea { border: var(--reply-modal-field-input-border, revert); font-family: var(--post-form-field-font-family, revert); appearance: var(--post-form-field-input-appearance, revert); outline: var(--post-form-field-input-outline, revert); background-color: var(--post-form-field-input-background-color, revert); color: var(--post-form-field-input-color, revert); font-size: 10pt; outline: var(--post-form-field-input-outline, revert); width: 298px; padding: 2px; margin-bottom: 1px; } .container input[type="text"]:focus, .container textarea:focus { border: var(--reply-modal-field-input-border-focus, revert); } .content { position: relative; } .content textarea { vertical-align: top; padding-top: 18px; } .footer button { text-transform: capitalize; float: right; cursor: pointer; } .parentCid { color: var(--post-form-field-input-color); position: absolute; width: auto; background-color: var(--post-form-field-input-background-color, white); padding: 2px; left: 1px; top: 1px; } @media (max-width: 640px) { .container { position: absolute; } .title { cursor: default; } }