.drafts-container { position: relative; height: 95%; background-color: hsl(0, 0%, 100%); border-radius: 4px; padding: 0px; width: 58%; overflow: hidden; max-width: 1200px; max-height: 1000px; display: flex; flex-direction: column; @media (max-width: 1130px) { max-width: 60%; } @media (max-width: 700px) { height: 95%; max-width: none; width: 90%; } .drafts-header { padding-top: 4px; padding-bottom: 8px; text-align: center; border-bottom: 1px solid hsl(0, 0%, 87%); h1 { margin: 0; font-size: 1.1em; text-transform: uppercase; } .exit { font-weight: 400; position: absolute; top: 10px; right: 10px; color: hsl(0, 0%, 67%); cursor: pointer; .exit-sign { position: relative; top: 3px; margin-left: 3px; font-size: 1.5rem; font-weight: 600; cursor: pointer; } } } .drafts-list { padding: 10px 0; overflow: auto; .no-drafts { display: block; margin-top: calc(45vh - 30px - 1.5em); text-align: center; font-size: 1.5em; color: hsl(0, 0%, 67%); pointer-events: none; } .removed-drafts { display: block; text-align: center; font-size: 1em; color: hsl(0, 0%, 67%); pointer-events: none; } } } .draft-row { padding: 5px 25px; > div { display: inline-block; vertical-align: top; } .draft-info-box { width: 100%; border: 1px solid hsl(0, 0%, 88%); margin-bottom: 10px; &.active { outline: 2px solid hsl(215, 47%, 50%); } .message_row { border: 0; } .messagebox { cursor: auto; box-shadow: none; } .message_content { line-height: 1; padding-top: 10px; padding-bottom: 10px; margin-left: 0px; } .draft_controls { display: inline-block; position: absolute; top: 9px; right: -80px; font-size: 0.9em; @media (max-width: 500px) { right: 0px; } .restore-draft { cursor: pointer; margin-right: 5px; color: hsl(170, 48%, 54%); opacity: 0.7; &:hover { opacity: 1; } } .delete-draft { cursor: pointer; margin-left: 5px; color: hsl(357, 52%, 57%); opacity: 0.7; &:hover { opacity: 1; } } } } }