@import"https://fonts.googleapis.com/css?family=Roboto:400,500,700";*,*::before,*::after{box-sizing:border-box}body{margin:0;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#eee;color:#2e3338;overflow-y:scroll}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{min-height:100vh;display:flex;flex-direction:column}.App>.main-wrapper{flex:1 1 100%;width:100%;max-width:1040px;margin:0 auto;padding:20px 20px 40px;display:grid;grid-gap:32px;grid-template-areas:"title" "config" "preview" "tools"}.App>.main-wrapper>.title{grid-area:title}.App>.main-wrapper>.title h1{font-weight:400;font-size:32px;margin:.3em 0 .2em}.App>.main-wrapper>.title p{margin:16px 0 0}.App>.main-wrapper>.preview{grid-area:preview}.App>.main-wrapper>.preview h2{font-weight:400;font-size:28px;margin:32px 0 16px}.App>.main-wrapper>.preview>h2:first-child{margin-top:0}.App>.main-wrapper>.preview .image-preview-wrapper{margin:-8px}.App>.main-wrapper>.preview .image-preview-padding{padding:8px}.App>.main-wrapper>.config{grid-area:config}.App>.main-wrapper>.config h2{margin-top:24px;font-weight:400;font-size:28px;margin-bottom:16px}.App>.main-wrapper>.config h2:first-child{margin-top:0}.App>.main-wrapper>.tools{grid-area:tools}.App>.main-wrapper>.tools h2{margin-top:0;font-weight:400;font-size:28px;margin-bottom:16px}.App>.main-wrapper>.tools .tool{margin-bottom:16px}.App>.main-wrapper>.tools .color-blind-modes{margin-top:8px;padding-left:8px}.App>.main-wrapper>.tools .tool-buttons{display:flex;flex-wrap:wrap}.App>.main-wrapper>.tools .tool-buttons button{margin:0 8px 8px 0}.App>.footer{flex:0 0 auto;background-color:#ddd;background-image:linear-gradient(to bottom,rgba(0,0,0,.07) 0px,transparent 40px);border-top:1px solid #ccc}.App>.footer>.footer-content{width:100%;max-width:1040px;margin:0 auto;padding:30px 20px 10px}.App>.footer p{margin:0 0 16px}.App>.footer .twemoji-info .emoji{width:16px;height:16px;vertical-align:middle}.nowrap{white-space:nowrap}.allow-break{word-break:break-all}@media (min-width: 1000px){.App>.main-wrapper{grid-template-areas:"title title" "preview config" "preview tools";grid-template-columns:2fr 1fr;grid-template-rows:min-content min-content 1fr}}.ColorBlindModes label{display:block}.ColorBlindModes .mode:not(:last-child){margin-bottom:2px}.PreviewPane{background-color:var(--bg-color);color:var(--color);border-radius:8px;margin:0 0 20px;box-shadow:0 2px 8px -1px rgba(0,0,0,.5);overflow:hidden;display:grid;--role-color:var(--color)}.PreviewPane.dark{--bg-color:#36393f;--color:#dcddde;--sidebar-bg-color:#2f3136;--sidebar-color:rgba(255,255,255,.4);--message-divider-color:rgba(6,6,7,.08)}.PreviewPane.light{--bg-color:#fff;--color:#2e3338;--sidebar-bg-color:#f3f3f3;--sidebar-color:#6a7480;--message-divider-color:rgba(6,6,7,.08)}.PreviewPane .name{font-size:107%;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.PreviewPane .avatar-image{border-radius:50%;background-color:#000}.PreviewPane .messages{padding:0 20px}.PreviewPane .message{padding:20px 0;display:grid;grid-template-columns:60px auto}.PreviewPane .message .name{grid-column:2;grid-row:1;padding-bottom:2px;color:var(--role-color)}.PreviewPane .message .body{grid-column:2;grid-row:2}.PreviewPane .message .body .emoji{width:24px;vertical-align:middle}.PreviewPane .message .avatar{grid-column:1;grid-row:span 2}.PreviewPane .message .avatar-image{width:40px;height:40px;background-color:var(--role-color)}.PreviewPane .message+.message{border-top:1px solid var(--message-divider-color)}.PreviewPane .sidebar{background-color:var(--sidebar-bg-color);padding:20px 8px 20px 16px;display:none}.PreviewPane .sidebar .title{color:var(--sidebar-color);text-transform:uppercase;font-size:90%;font-weight:500;letter-spacing:.6px;margin-bottom:8px}.PreviewPane .sidebar .member{display:grid;grid-template-columns:40px auto;padding-bottom:8px}.PreviewPane .sidebar .member .name{grid-column:2;grid-row:1;align-self:center;color:var(--role-color)}.PreviewPane .sidebar .member .avatar{grid-column:1;grid-row:1}.PreviewPane .sidebar .member .avatar-image{width:30px;height:30px;background-color:var(--role-color)}@media (min-width: 640px){.PreviewPane{grid-template-columns:auto 240px}.PreviewPane .sidebar{display:block}}.RoleConfigurator{display:flex;flex-direction:column}.RoleConfigurator .roles-list{display:flex;flex-direction:column}.RoleConfigurator .role{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}.RoleConfigurator .options{display:flex;width:100%;align-items:center}.RoleConfigurator .options>:not(:last-child){margin-right:8px}.RoleConfigurator .drag-handle-wrapper{display:flex;align-items:center;justify-content:center}.RoleConfigurator .drag-handle{margin:-8px;padding:8px}.RoleConfigurator .drag-handle .scuffed-drag-icon{width:16px;height:16px;background-image:radial-gradient(circle at center,black 0,black 1px,transparent 1px,transparent 100%);background-repeat:repeat;background-position:top left;background-size:4px 4px}.RoleConfigurator .name-input{flex:1 1 100%}.RoleConfigurator .role .color-button-wrapper{position:relative}.RoleConfigurator .role .color-button{--role-color:black;background-color:var(--role-color);border:1px solid #444;border-radius:3px;width:30px;height:20px;white-space:nowrap;overflow:hidden;text-indent:-9999px;cursor:pointer}.RoleConfigurator .color-picker{position:absolute;top:100%;left:0;margin-top:8px;z-index:10}.RoleConfigurator .color-picker.placeholder{background:#fff;border-radius:4px;box-shadow:rgba(0,0,0,.15) 0 0 0 1px,rgba(0,0,0,.15) 0 8px 16px;padding:10px;font-size:13px}.Switch{vertical-align:-4px}