.container { position: fixed; left: 50%; transform: translate(-50%, 0%); display: flex; flex-direction: column; height: calc( 100% - 20px ); width: calc( 100% - 50px ); min-width: 550px; } iframe, .divframe { border: 0; margin: 5px 0 0; padding: 0; width: 100%; height: 100%; overflow-y: auto; } #sendframe { position: absolute; top: 200%; left: 100%; transform: translateX(calc(-100% - 17px)) translateY(-100%); z-index: 2; min-width: 450px; height: 50%; width: 40%; transition: top 0.5s ease; } .inbox-to, .inbox-from, .inbox-date { width: 100%; } .inbox-to, .inbox-date { text-align: right; } .inbox-date, .inbox-from, .inbox-to, .inbox-subject { margin: 0 10px; padding: 0 10px; } .inbox-subject { color: #999999; } hr { color: #333333; } .nomargin { margin: 0!important; } .nopadding { padding: 0!important; } label{ font-size: 16px; margin: 5px; } .topin { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: -1px !important; border-bottom: 1px solid #777 !important; } .botin { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: -1px !important; border-top: 1px solid #777 !important; } .leftin { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: -1px !important; border-right: 1px solid #777 !important; } .rightin { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px !important; border-left: 1px solid #777 !important; } input[type="text"], .inputlike { background-color: #353545; border: 3px solid transparent; color: #dddddd; font-size: 16px; border-radius: 10px; line-height: normal; padding: 5px; outline: none; margin: 5px; width: 100%; } textarea { resize: none; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: #262833; } .header { padding: 10px 0; border-bottom: #444444 solid 1px; } .sidebyside { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .rightdiv { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .coldiv { margin: 0; padding: 0 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main { margin: 0; padding: 20px 0 0 0; height: calc(100% - 50px); } li { margin: 5px; padding: 5px; } h1 { font-size: 160%; font-weight: 100; margin: 0 0 0 5px; padding: 0; display: flex; align-items: center; } h6 { margin: 0 0 0 3px; padding: 0; font-size: small; } *{ color: white; background-color: #262833; background: #262833; } ::-webkit-scrollbar { width: 5px; height: 5px; border-radius: 2px; } ::-webkit-scrollbar-track { background: #353545; border-radius: 2px; } ::-webkit-scrollbar-thumb { background: #555566; border-radius: 2px; border: 2px solid #353545; } ::-webkit-scrollbar-thumb:hover { background: #888899; } ::-webkit-scrollbar-corner { background: transparent; } a { color: #5da5ff; } a:hover { color: #40d8ff; } button:hover { color: #fff; background-color: #131419; box-shadow: rgba(0, 0, 0, 0.5) 8px 8px 15px; transform: translateY(-2px); } button:active { box-shadow: none; transform: translateY(0); } button, .buttonlike { appearance: none; background-color: rgba(0, 0, 0, 0.25); border: 3px solid transparent; border-radius: 10px; box-sizing: border-box; color: #ffffff; cursor: pointer; font-size: 16px; line-height: normal; padding: 5px 10px; outline: none; margin: 5px; width: unset; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; will-change: transform; }