@charset "UTF-8"; @font-face { font-family: 'Roboto-Light'; src: url("../fonts/Roboto-Light.ttf") format("truetype"); } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Regular.ttf") format("truetype"); } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Italic.ttf") format("truetype"); font-style: italic; } @font-face { font-family: 'Roboto'; src: url("../fonts/Roboto-Bold.ttf") format("truetype"); font-weight: bold; } * { box-sizing: border-box; } html { height: 100%; } body { position: relative; height: 100%; width: 100%; margin: 0; font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 14px; } .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .hide { display: none; } #header h1 { margin: 0; line-height: 64px; padding-left: 20px; font-size: 22px; font-weight: normal; } .conversation-header button, .title-bar button { width: 24px; height: 24px; line-height: 24px; padding: 0; border: 0; } button { cursor: pointer; font-size: inherit; } button.grey { border-radius: 5px; border: solid 1px #ccc; cursor: pointer; margin: 1em auto; padding: 1em; font-family: inherit; color: #616161; background: #f3f3f3; box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); } button.grey:hover { box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); } button.grey[disabled=disabled], button.grey[disabled=disabled]:hover { opacity: 0.5; box-shadow: none; cursor: default; } a { color: #2090ea; } button.back { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } button.back:focus, button.back:hover { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } button.clock { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } button.clock:focus, button.clock:hover { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } button.hamburger { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } button.hamburger:focus, button.hamburger:hover { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } .header-buttons { height: 0; } .header-buttons.left { float: left; padding-left: 10px; } .header-buttons.right { float: right; padding-right: 10px; } .header-buttons .vertical-align { height: 64px; vertical-align: middle; display: table-cell; } .conversation-header .timer-menu { margin-right: 10px; } .conversation-header .timer-menu:before { content: attr(data-time); display: inline-block; position: absolute; bottom: -10px; height: 10px; width: 100%; text-align: center; font-size: 8px; font-weight: bold; } .menu { position: relative; float: right; } .menu .hamburger { width: 24px; height: 24px; vertical-align: middle; } .menu .menu-list { display: none; position: absolute; color: #454545; z-index: 50; text-align: initial; top: 100%; right: 0; margin: 0; padding: 0; background-color: white; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); } .menu .menu-list li { display: block; white-space: nowrap; cursor: pointer; padding: 5px 15px 5px 10px; } .menu .menu-list li:hover { background-color: #f3f3f3; } .file-input { position: relative; } .file-input .choose-file { cursor: pointer; padding-left: 10px; } .file-input .paperclip { width: 36px; height: 100%; padding: 5px 0 0; opacity: 0.5; border: none; background: transparent; } .file-input .paperclip:before { content: ''; display: inline-block; width: 24px; height: 24px; -webkit-mask: url("../images/paperclip.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #616161; transform: rotateZ(-45deg); } .file-input .paperclip:focus, .file-input .paperclip:hover { opacity: 1.0; } .file-input input[type=file] { display: none; position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; cursor: pointer; z-index: 1; } .dropoff { outline: solid 1px #2090ea; } .avatar { display: inline-block; height: 44px; width: 44px; border-radius: 50%; background-size: cover; vertical-align: middle; text-align: center; line-height: 44px; overflow-x: hidden; text-overflow: ellipsis; color: white; font-size: 18px; } .avatar.red { background-color: #EF5350; } .avatar.pink { background-color: #EC407A; } .avatar.purple { background-color: #AB47BC; } .avatar.deep_purple { background-color: #7E57C2; } .avatar.indigo { background-color: #5C6BC0; } .avatar.blue { background-color: #2196F3; } .avatar.light_blue { background-color: #03A9F4; } .avatar.cyan { background-color: #00BCD4; } .avatar.teal { background-color: #009688; } .avatar.green { background-color: #4CAF50; } .avatar.light_green { background-color: #7CB342; } .avatar.orange { background-color: #FF9800; } .avatar.deep_orange { background-color: #FF5722; } .avatar.amber { background-color: #FFB300; } .avatar.blue_grey { background-color: #607D8B; } .avatar.grey { background-color: #999999; } .avatar.default { background-color: #2090ea; } .group-info-input { background: white; } .group-info-input .group-avatar { display: inline-block; padding: 2px 0px 0px 2px; } .group-info-input .file-input .thumbnail, .group-info-input .thumbnail .avatar, .group-info-input img { height: 54px; width: 54px; border-radius: 27px; } .group-info-input .thumbnail:after { content: ''; position: absolute; height: 0; width: 0; bottom: 0; right: 0; border-bottom: 10px solid #616161; border-left: 10px solid transparent; } .group-info-input input.name { padding: 0.5em; border: solid 1px #ccc; border-width: 0 0 1px 0; width: calc(100% - 84px); } .group-member-list .summary, .new-group-update .summary { margin: 10px; } .group-member-list .members .contact, .new-group-update .members .contact { box-shadow: none; border-bottom: 1px solid #eee; } .group-member-list .members .contact .last-message, .group-member-list .members .contact .last-timestamp, .new-group-update .members .contact .last-message, .new-group-update .members .contact .last-timestamp { display: none; } .conversation-list-item { cursor: pointer; } .conversation-list-item:hover { background: #f8f8f8; } .conversation-list-item .number { display: none; } .conversation-list-item .unread-count { float: right; margin: 3px 10px 0 20px; display: inline-block; padding: 0 3px; min-width: 21px; height: 21px; line-height: 21px; font-size: 12px; font-weight: bold; text-align: center; border-radius: 5px; background-color: #2090ea; color: white; border: solid 1px rgba(255, 255, 255, 0.6); } .inactive .contact.selected { padding-left: 8px; border-left: 4px solid #2090ea; } .contact { padding: 12px; white-space: nowrap; overflow: hidden; background: rgba(255, 255, 255, 0.6); margin: 1px; } .contact.selected { background: #ecf3fc; } .contact:first-child { margin-top: 0; } .contact:last-child::after { display: none; } .banner { background-color: #a2d2f4; color: black; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); position: absolute; top: 25px; right: 30px; left: 30px; padding: 5px 25px 5px 10px; text-align: center; border-radius: 10px; cursor: pointer; } .banner .warning { width: 18px; height: 18px; display: inline-block; vertical-align: text-bottom; -webkit-mask: url("/images/warning.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .banner .dismiss { position: absolute; right: 3px; top: 3px; height: 23px; width: 23px; -webkit-mask: url("/images/x.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .contact-details { vertical-align: middle; display: inline-block; margin: 0 0 0 8px; width: calc(100% - 44px - 8px - 0.2857142857em); text-align: left; cursor: pointer; } .contact-details p { overflow-x: hidden; text-overflow: ellipsis; } .contact-details .name { display: block; margin: 0; font-size: 1em; text-overflow: ellipsis; overflow-x: hidden; text-align: left; } .contact-details .number { color: #616161; font-size: 0.9285714286em; } .contact-details.not-clickable { cursor: default; } .contact-details .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #616161; display: inline-block; width: 1.25em; height: 1.25em; vertical-align: text-bottom; } .recipients-input { position: relative; } .recipients-input .recipients-container { background-color: white; padding: 2px; border-bottom: 1px solid #f2f2f2; line-height: 24px; } .recipients-input .recipient { display: inline-block; margin: 0 2px 2px 0; padding: 0 5px; border-radius: 10px; background-color: #2090ea; color: white; } .recipients-input .recipient.error { background-color: #f00; } .recipients-input .recipient .remove { margin-left: 5px; padding: 0 2px; } .recipients-input .results { position: absolute; z-index: 10; margin: 0 0 0 20px; width: calc(100% - 30px); max-width: 300px; max-height: 165px; overflow-y: auto; box-shadow: 0px 0px 1px rgba(170, 170, 170, 0.8); } .recipients-input .results .contact { cursor: pointer; } .attachment-preview { display: inline-block; position: relative; } .attachment-preview img { max-width: 100%; } .new-conversation .recipients-input .recipients::before { content: 'To: '; } .new-group-update .recipients-input .recipients::before { content: 'Add: '; } .loading { position: relative; } .loading::before { display: block; margin: 0px auto; content: " "; height: 16px; width: 16px; border-radius: 32px; border: solid 3px; border-color: #a2d2f4 #a2d2f4 #f3f3f3 #f3f3f3 !important; animation: rotate 1s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } .x { display: inline-block; float: right; cursor: pointer; border-radius: 50%; width: 22px; height: 22px; padding: 3px; background: #616161; } .x:before { content: ''; display: block; width: 100%; height: 100%; -webkit-mask: url("../images/x.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } input[type=text]:active, input[type=text]:focus, input[type=search]:active, input[type=search]:focus, textarea:active, textarea:focus { outline: 1px solid #2090ea; } .expiredAlert { background: #F3F3A7; padding: 10px; } .expiredAlert button { float: right; border: none; border-radius: 5px; color: white; font-weight: bold; line-height: 36px; padding: 0 20px; background: #2090ea; margin-left: 20px; } .expiredAlert .message { padding: 10px 0; } .inbox { position: relative; } @keyframes loading { 50% { transform: scale(1); opacity: 1; } 100% { opacity: 0; } } .app-loading-screen { z-index: 1000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: white; display: flex; align-items: center; } .app-loading-screen .content { margin-left: auto; margin-right: auto; text-align: center; } .app-loading-screen .container { margin-left: auto; margin-right: auto; width: 78px; height: 22px; } .app-loading-screen .message { -webkit-user-select: text; max-width: 35em; } .app-loading-screen .dot { width: 14px; height: 14px; border: 3px solid #2090ea; border-radius: 50%; float: left; margin: 0 6px; transform: scale(0); animation: loading 1500ms ease infinite 0ms; } .app-loading-screen .dot:nth-child(2) { animation: loading 1500ms ease infinite 333ms; } .app-loading-screen .dot:nth-child(3) { animation: loading 1500ms ease infinite 666ms; } .inbox:focus { outline: none; } .text-security .inbox .name, .text-security .inbox .body, .text-security .inbox .last-message, .text-security .inbox .sender, .text-security .inbox .conversation-title, .text-security .inbox .number { -webkit-text-security: square; } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } .progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } .progress-bar-striped { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); } .progress-bar.active { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .bar-container { background: #a2d2f4; } .bar-container .progress-bar { height: 100%; } .modal { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); padding: 0 20px; z-index: 100; overflow-y: auto; } .modal .content { position: relative; max-width: 350px; margin: 100px auto; padding: 1em; background: white; border-radius: 5px; overflow: auto; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); } .debug-log.modal { padding: 50px; } .debug-log.modal .content { margin: 0; max-width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column; } .debug-log.modal .content textarea { flex-grow: 1; width: 100%; resize: none; min-height: 100px; } .debug-log .result { text-align: center; } .debug-log .result .input-group { display: inline-block; width: 100%; max-width: 472px; } .debug-log .result .open { float: left; display: inline-block; width: 72px; height: 36px; padding: 5px 23px; cursor: pointer; border: solid 1px #ccc; border-radius: 0 5px 5px 0; background: #f3f3f3; } .debug-log .result .open:before { content: ''; display: block; width: 24px; height: 24px; -webkit-mask: url("../images/open_link.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } .debug-log .result .open:before:focus, .debug-log .result .open:before:hover { -webkit-mask: url("../images/open_link.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .debug-log .result .link { border-radius: 5px 0 0 5px; float: left; width: calc(100% - 72px); max-width: 400px; height: 36px; padding: 0 10px; outline-offset: -4px; border: solid 1px #ccc; border-right: none; } .lightbox.modal { padding: 30px; text-align: center; background-color: rgba(0, 0, 0, 0.8); } .lightbox.modal .content { margin: 0; padding: 0 60px; max-width: 100%; height: 100%; box-shadow: none; background: transparent; } .lightbox.modal .content img { display: block; margin: auto; max-width: 100%; max-height: 100%; } .lightbox.modal .controls { position: absolute; top: 0; right: 0; width: 50px; } .lightbox.modal a { background: transparent; width: 50px; height: 50px; margin-bottom: 10px; display: inline-block; cursor: pointer; border-radius: 50%; padding: 3px; } .lightbox.modal a:before { content: ''; display: block; width: 100%; height: 100%; } .lightbox.modal a:hover { background: #616161; } .lightbox.modal .save:before { -webkit-mask: url("../images/save.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .capture-audio { text-align: center; } .capture-audio .microphone { height: 36px; width: 36px; text-align: center; opacity: 0.5; background: transparent; padding: 0; border: none; } .capture-audio .microphone:focus, .capture-audio .microphone:hover { opacity: 1.0; } .capture-audio .microphone:before { content: ''; display: inline-block; height: 24px; width: 24px; -webkit-mask: url("../images/microphone.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #616161; } .recorder { background: #f3f3f3; } .recorder button { float: right; width: 36px; height: 36px; border-radius: 36px; margin-left: 5px; opacity: 0.5; text-align: center; padding: 0; } .recorder button:focus, .recorder button:hover { opacity: 1.0; } .recorder button .icon { display: inline-block; width: 24px; height: 24px; } .recorder .finish { background: #9ae99a; border: 1px solid #47D647; } .recorder .finish .icon { -webkit-mask: url("../images/check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #47D647; } .recorder .close { background: #fbe3e3; border: 1px solid #EF8989; } .recorder .close .icon { -webkit-mask: url("../images/x.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #EF8989; } .recorder .time { color: #616161; float: right; line-height: 36px; padding: 0 10px; } @keyframes pulse { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .recorder .time::before { content: ''; display: inline-block; border-radius: 10px; width: 10px; height: 10px; background: #f00; margin-right: 10px; opacity: 0; animation: pulse 2s infinite; } span.emoji { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: baseline; *vertical-align: auto; *zoom: 1; *display: inline; width: 1em; height: 1em; background-size: 1em; background-repeat: no-repeat; text-indent: -9999px; background-position: 50%, 50%; background-size: contain; } span.emoji-sizer { line-height: 0.81em; font-size: 1em; margin: -2px 0; } span.emoji-outer { display: -moz-inline-box; display: inline-block; *display: inline; height: 1em; width: 1em; } span.emoji-inner { display: -moz-inline-box; display: inline-block; text-indent: -9999px; width: 100%; height: 100%; vertical-align: baseline; *vertical-align: auto; *zoom: 1; } img.emoji { width: 1em; height: 1em; } img.emoji.small { width: 1.25em; height: 1.25em; } img.emoji.medium { width: 1.5em; height: 1.5em; } img.emoji.large { width: 1.75em; height: 1.75em; } img.emoji.jumbo { width: 2em; height: 2em; } .conversations img.emoji.small { width: 1em; height: 1em; } .conversations img.emoji.medium { width: 1em; height: 1em; } .conversations img.emoji.large { width: 1em; height: 1em; } .conversations img.emoji.jumbo { width: 1em; height: 1em; } .settings.modal { padding: 50px; } .settings.modal .content { margin: 0 auto; width: 100%; max-width: 500px; } .settings hr { margin: 10px 0; } .settings .syncSettings button { float: right; line-height: 36px; padding: 0 20px; margin: 0 0 20px 20px; } .settings .syncSettings .synced_at { font-size: 0.9285714286em; color: #616161; } .settings .syncSettings .sync_failed { display: none; font-size: 0.9285714286em; color: red; } .conversation-stack, .new-conversation, .inbox, .gutter { height: 100%; } .expired .conversation-stack, .expired .gutter { height: calc(100% - 56px); } .scrollable { height: 100%; overflow: auto; } .gutter { color: #454545; float: left; width: 300px; display: flex; flex-direction: column; } .gutter .content { background-color: #f3f3f3; flex-grow: 1; overflow-y: auto; } .network-status-container .network-status { background: url("../images/error_red.svg") no-repeat left 10px center; background-size: 25px 25px; background-color: #fcd156; padding: 10px; padding-left: 48px; display: none; } .network-status-container .network-status .network-status-message h3 { padding: 0px; margin: 0px; margin-bottom: 2px; font-size: 14px; } .network-status-container .network-status .network-status-message span { display: inline-block; font-size: 12px; padding: 0.5em 0; } .network-status-container .network-status .action button { border-radius: 5px; border: solid 1px #ccc; cursor: pointer; font-family: inherit; color: white; background: #2090ea; } .conversation-stack { padding-left: 300px; } .conversation-stack .conversation { display: none; } .conversation-stack .conversation:first-child { display: block; } .conversation-header { height: 64px; text-align: center; color: white; background-color: #999999; transition: background-color 0.5s; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .conversation-header .avatar { margin-bottom: -30px; border: solid 2px white; z-index: 10; width: 48px; height: 48px; line-height: 44px; position: relative; } .inactive .conversation-header { background-color: #f3f3f3 !important; color: #454545; border-color: rgba(0, 0, 0, 0.05); } .inactive .conversation-header .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .tool-bar { position: relative; } .tool-bar .search-icon { content: ''; display: inline-block; float: left; width: 24px; height: 100%; -webkit-mask: url("../images/search.svg") no-repeat left center; -webkit-mask-size: 100%; background-color: #ccc; position: absolute; left: 20px; top: 0; } input.search { border: none; padding: 0 10px 0 65px; margin: 0; outline: 0; height: 36px; line-height: 36px; width: 100%; border: solid 1px #f3f3f3; outline-offset: -2px; font-size: inherit; position: relative; } input.search.active { outline: solid 1px #2090ea; background-image: url("../images/x.svg"); background-repeat: no-repeat; background-size: 16px; } input.search.active.ltr { background-position: right 10px center; } input.search.active.rtl { background-position: left 65px center; } input.search::-webkit-search-cancel-button { -webkit-appearance: none; display: block; width: 16px; height: 16px; } input.search::-webkit-search-cancel-button:hover { cursor: pointer; } .last-timestamp { font-size: smaller; float: right; margin: 0 10px; color: #616161; } .new-contact { display: none; cursor: pointer; opacity: 0.7; } .new-contact .contact-details .number { display: block; font-style: italic; padding-right: 8px; } .new-contact.valid { opacity: 1.0; } .index { color: #454545; } .index .gutter .new-group-update-form { display: none; padding: 0.5em; } .index .last-message { margin: 6px 0 0; font-size: 0.9285714286em; font-weight: 300; } .index .gutter .timestamp { position: absolute; top: 14px; right: 12px; color: #616161; } .conversations .unread .contact-details .name, .conversations .unread .contact-details .last-message, .conversations .unread .contact-details .last-timestamp { font-weight: bold; } .hint { margin: 10px; padding: 1em; border-radius: 5px; color: white; border: 2px dashed white; } .hint h3 { margin-top: 5px; } .hint.firstRun { position: absolute; top: 0; left: 302px; width: 225px; } .hint.firstRun:before, .hint.firstRun:after { content: ' '; display: block; position: absolute; top: 8px; left: -35px; width: 0; height: 0; border: solid 10px white; border-color: transparent white transparent transparent; transform: scaleX(2.5) scaleY(0.75); } .hint.firstRun:after { border-color: transparent #2eace0 transparent transparent; left: -30px; } .conversation.placeholder { text-align: center; } .conversation.placeholder .content { padding: 100px 36px; } .conversation.placeholder h3 { font-size: large; } .contact.placeholder { position: absolute; top: 50px; left: 0; background: transparent; color: white; border: 2px dashed white; overflow: visible; } .contact.placeholder p { color: white; } .contact.placeholder:before, .contact.placeholder:after { content: ' '; display: block; position: absolute; top: -35px; left: 15px; width: 0; height: 0; border: solid 10px white; border-color: transparent transparent white transparent; transform: scaleY(2.5) scaleX(0.75); } .contact.placeholder:after { border-color: transparent transparent #2eace0 transparent; top: -30px; } .conversation-title { display: block; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 46px; -webkit-user-select: text; } .conversation-name + .conversation-number:before { content: "\00b7"; font-weight: bold; padding: 0 5px 0 4px; } .conversation-title .verified:before { content: "\00b7"; font-weight: bold; padding: 0 5px 0 4px; } .conversation-title .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; display: inline-block; width: 1.25em; height: 1.25em; vertical-align: text-bottom; } .conversation { background-color: white; height: 100%; position: relative; } .conversation .conversation-loading-screen { z-index: 99; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #eee; display: flex; align-items: center; } .conversation .conversation-loading-screen .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .conversation .conversation-loading-screen .container { position: absolute; left: 50%; width: 78px; transform: translate(-50%, 0); } .conversation .conversation-loading-screen .dot { width: 14px; height: 14px; border: 3px solid #2090ea; border-radius: 50%; float: left; margin: 0 6px; transform: scale(0); animation: loading 1500ms ease infinite 0ms; } .conversation .conversation-loading-screen .dot:nth-child(2) { animation: loading 1500ms ease infinite 333ms; } .conversation .conversation-loading-screen .dot:nth-child(3) { animation: loading 1500ms ease infinite 666ms; } .conversation .panel { height: calc(100% - 64px); overflow-y: scroll; } .conversation .panel .container { padding-top: 20px; max-width: 750px; margin: 0 auto; padding: 20px; } .conversation .main.panel { display: flex; flex-direction: column; overflow: initial; } .conversation .main.panel .discussion-container { flex-grow: 1; position: relative; max-width: 100%; margin: 0; } .conversation .main.panel .discussion-container .bar-container { height: 5px; } .conversation .main.panel .discussion-container .message-list { position: absolute; top: 0; height: 100%; width: 100%; margin: 0; padding: 10px 0 0 0; overflow-y: auto; } .discussion-container { background-color: #eee; } .key-verification label { display: block; margin: 10px 0; font-size: 0.9285714286em; } .key-verification .icon { height: 1.25em; width: 1.25em; vertical-align: text-bottom; display: inline-block; } .key-verification .icon.verified { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .key-verification .icon.shield { -webkit-mask: url("/images/shield.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .key-verification .key, .key-verification .placeholder { padding: 0 1em; -webkit-user-select: text; } .key-verification .key { font-family: monospace; padding: 10px; margin: 20px auto 20px auto; width: 16em; background: #f3f3f3; border: solid 1px #d9d9d9; border-radius: 5px; } .key-verification .placeholder { font-weight: bold; } .key-verification .qr { border-radius: 200px; border: solid 1px #d9d9d9; width: 150px; height: 150px; text-align: center; padding: 25px; margin: 10px auto; } .key-verification .qr canvas { display: none; } .key-verification .qr img { display: inline-block; max-width: 100%; } .key-verification .summary { margin: 30px 0 10px; text-align: center; } .key-verification div.verify { text-align: center; } .key-verification button.verify { border-radius: 5px; font-weight: bold; padding: 10px; margin: 0; } .identity-key-send-error button { margin-top: 0px; margin-bottom: 0px; } .identity-key-send-error .explanation { margin-top: 20px; } .identity-key-send-error .safety-number { margin-top: 30px; text-align: center; } .identity-key-send-error .actions { margin-top: 30px; text-align: center; } .message-detail { background-color: #eee; } .message-detail .message-container { padding: 20px 0; } .message-detail .message-container .sender { display: none; } .message-detail .info { padding: 1em; } .message-detail .info .label { font-weight: bold; padding-right: 1em; vertical-align: top; } .message-detail .info button { border: none; border-radius: 5px; color: white; padding: 0.5em; font-weight: bold; } .message-detail .info button span { vertical-align: middle; } .message-detail .retries { padding: 1em; } .message-detail button.retry { margin: 0.5em; } .message-detail .contacts .contact-detail { padding: 0 36px; margin-bottom: 5px; } .message-detail .contacts .contact-detail .error-icon-container { float: right; } .message-detail .contacts .contact-detail button.error { background-color: red; color: white; } .message-detail .contacts .contact-detail button.error span.icon.error { display: inline-block; width: 1.25em; height: 1.25em; position: relative; vertical-align: middle; -webkit-mask: url("/images/warning.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .message-detail .contacts .contact-detail .error-message { margin: 6px 0 0; font-size: 0.9285714286em; font-weight: bold; color: red; } .message-detail h3 { font-size: 1em; padding: 5px; } .message-detail button.cancel { float: right; color: #454545; border: solid 1px #ccc; } .message-detail .delete-container { text-align: center; } .message-detail .delete-container button.delete { background-color: red; color: white; } .message-list .error-icon { cursor: pointer; } .message-list .advisory { text-align: center; } .message-list .advisory .content { display: inline-block; padding: 5px 10px; background: #fff5c4; border-radius: 5px; } li.entry .error-icon-container { position: absolute; top: 0; left: calc(100% + 5px); height: 100%; } li.entry .error-icon-container .error-icon { display: block; height: 100%; } li.entry .error-icon-container .error-message { display: none; position: absolute; background: black; color: white; border-radius: 5px; padding: 0.5em; font-weight: normal; bottom: calc(50% + 18px); left: -84px; width: 180px; z-index: 10; } li.entry .error-icon-container .error-message:before { display: block; content: ''; position: absolute; bottom: -16px; left: 50%; border: 6px solid transparent; border-top: 10px solid #000000; } li.entry .error-icon-container:hover .error-message { display: inline-block; } .error-icon { display: inline-block; width: 24px; height: 24px; position: relative; -webkit-mask: url("../images/warning.svg") no-repeat center; -webkit-mask-size: 100%; background-color: red; } .group li.entry .unregistered-user-error { display: none; } .group-update { font-size: smaller; } .private .entry .avatar, .private .sender, .outgoing .sender { display: none; } .sender { font-size: smaller; opacity: 0.8; margin-bottom: 5px; font-weight: bold; } .timestamp { margin-right: 3px; white-space: nowrap; } .message-container, .message-list { list-style: none; } .message-container li, .message-list li { max-width: 800px; margin: 0 auto 10px; padding-left: 1em; padding-right: 1.5em; } .message-container li::after, .message-list li::after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .message-container .bubble, .message-list .bubble { position: relative; left: -2px; display: inline-block; vertical-align: top; word-wrap: break-word; margin-left: 8px; max-width: 30em; text-align: -webkit-auto; -webkit-user-select: text; } @media (max-width: 825px) { .message-container .bubble, .message-list .bubble { max-width: calc(100% - 45px - 24px); } } .message-container .bubble .body, .message-list .bubble .body { white-space: pre-wrap; } .message-container .bubble .body a, .message-list .bubble .body a { word-break: break-all; } .message-container .bubble p, .message-list .bubble p { margin: 0; } .message-container .meta, .message-list .meta { font-size: smaller; margin-top: 3px; text-align: right; line-height: 18px; } .message-container .meta .hasRetry + .timestamp:before, .message-list .meta .hasRetry + .timestamp:before { content: "\00b7"; font-weight: bold; padding: 0 5px 0 4px; text-decoration: none; opacity: 0.5; } .message-container .meta .retry, .message-list .meta .retry { text-decoration: underline; cursor: pointer; } .message-container .meta .some-failed, .message-list .meta .some-failed { float: left; margin-left: 6px; margin-right: 6px; cursor: pointer; } .message-container .meta .hasRetry, .message-container .meta .timestamp, .message-container .meta .status, .message-container .meta .timer, .message-list .meta .hasRetry, .message-list .meta .timestamp, .message-list .meta .status, .message-list .meta .timer { float: left; } .message-container .meta .timestamp, .message-container .meta .status, .message-list .meta .timestamp, .message-list .meta .status { cursor: pointer; opacity: 0.5; } .message-container .meta .timestamp:hover, .message-container .meta .status:hover, .message-list .meta .timestamp:hover, .message-list .meta .status:hover { opacity: 1.0; } .message-container .status, .message-list .status { width: 18px; height: 18px; } .message-container .sent .status, .message-list .sent .status { display: inline-block; -webkit-mask: url("../images/check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .message-container .delivered .status, .message-list .delivered .status { display: inline-block; -webkit-mask: url("../images/double-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .message-container .pending .status, .message-list .pending .status { display: inline-block; background: none; } .message-container .pending .status:before, .message-list .pending .status:before { content: '...'; } .message-container .incoming .avatar, .message-container .incoming .bubble, .message-list .incoming .avatar, .message-list .incoming .bubble { float: left; } .message-container .outgoing .meta, .message-list .outgoing .meta { float: right; } .message-container .outgoing .error-icon-container, .message-list .outgoing .error-icon-container { left: auto; right: calc(100% + 5px); } .message-container .outgoing .avatar, .message-container .outgoing .bubble, .message-list .outgoing .avatar, .message-list .outgoing .bubble { float: right; } .message-container .outgoing .bubble, .message-list .outgoing .bubble { clear: left; } @keyframes shake { 0% { transform: translateX(0px); } 25% { transform: translateX(-5px); } 50% { transform: translateX(0px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0px); } } .message-container .expired .bubble, .message-list .expired .bubble { animation: shake 0.2s linear 3; } .message-container .timer, .message-list .timer { display: none; } .message-container .timer .hourglass, .message-list .timer .hourglass { vertical-align: middle; } .message-container .control .bubble .content, .message-list .control .bubble .content { font-style: italic; } .message-container .control .bubble::before, .message-container .control .bubble::after, .message-list .control .bubble::before, .message-list .control .bubble::after { display: none; } .message-container .attachments a, .message-list .attachments a { font-style: italic; display: block; padding: 1em; background-color: #ccc; } .message-container .attachments img, .message-container .attachments audio, .message-container .attachments video, .message-list .attachments img, .message-list .attachments audio, .message-list .attachments video { max-width: 100%; max-height: 300px; } .message-container .attachments video, .message-list .attachments video { background: black; min-height: 300px; min-width: 280px; } .message-container .attachments img, .message-list .attachments img { cursor: pointer; } .message-container .attachments .fileView, .message-list .attachments .fileView { display: flex; align-items: center; overflow: hidden; position: relative; padding: 5px; padding-right: 10px; cursor: pointer; } .message-container .attachments .fileView .fileName, .message-list .attachments .fileView .fileName { font-weight: bold; margin-bottom: 0.25em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .message-container .attachments .fileView .text, .message-list .attachments .fileView .text { overflow: hidden; } .message-container .attachments .fileView .icon, .message-container .attachments .fileView .text, .message-list .attachments .fileView .icon, .message-list .attachments .fileView .text { opacity: 0.75; } .message-container .attachments .fileView:hover .icon, .message-container .attachments .fileView:hover .text, .message-list .attachments .fileView:hover .icon, .message-list .attachments .fileView:hover .text { opacity: 1.0; } .message-container .attachments .fileView .icon, .message-list .attachments .fileView .icon { margin-left: -0.5em; margin-right: 0.5em; display: inline-block; vertical-align: middle; width: 48px; height: 48px; -webkit-mask: url("../images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .message-container .attachments .fileView .icon.audio, .message-list .attachments .fileView .icon.audio { -webkit-mask: url("../images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .message-container .attachments .fileView .icon.video, .message-list .attachments .fileView .icon.video { -webkit-mask: url("../images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .message-container .attachments .fileView .icon.voice, .message-list .attachments .fileView .icon.voice { -webkit-mask: url("../images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .message-container .outgoing .avatar, .message-list .outgoing .avatar { display: none; } .message-container .bubble .content.error-message, .message-list .bubble .content.error-message { cursor: pointer; font-style: italic; } .message-list .avatar, .message-container .avatar { height: 36px; width: 36px; line-height: 36px; } .bottom-bar { box-sizing: content-box; padding: 5px 5px 5px 0; background: #f3f3f3; } .bottom-bar form.active { outline: solid 1px #2090ea; } .bottom-bar form.send { background: #ffffff; } .bottom-bar input, .bottom-bar textarea { color: #454545; } .bottom-bar .attachment-previews { padding: 0 36px; } .bottom-bar .attachment-previews .attachment-preview { padding: 13px 10px 0; } .bottom-bar .attachment-previews img { border: 2px solid #ddd; border-radius: 5px; max-height: 100px; } .bottom-bar .attachment-previews .close { position: absolute; top: 5px; right: 2px; background: #999; } .bottom-bar .attachment-previews .close:hover { background: #616161; } .bottom-bar .flex { display: flex; flex-direction: row; } .bottom-bar .flex .send-message { flex-grow: 1; } .bottom-bar .choose-file { float: left; height: 36px; } .bottom-bar .send-message { display: block; max-height: 100px; padding: 10px; border: 0; outline: 0; z-index: 5; resize: none; font-size: 1em; font-family: inherit; } .bottom-bar .send-message[disabled=disabled] { background: transparent; } .bottom-bar .capture-audio { float: right; height: 36px; } .bottom-bar .android-length-warning { padding: 10px; max-width: 150px; } .toast { position: absolute; bottom: 0; margin: 0 2em 3em; padding: 0.5em 1.5em; background: rgba(0, 0, 0, 0.75); color: white; box-shadow: 0 0 5px 0 black; border-radius: 5px; font-size: 0.9285714286em; z-index: 100; } .confirmation-dialog .content { max-width: 350px; margin: 100px auto; padding: 1em; background: white; border-radius: 5px; overflow: auto; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); } .confirmation-dialog .content .buttons { margin-top: 10px; } .confirmation-dialog .content .buttons button { float: right; margin-left: 10px; background-color: #f3f3f3; border-radius: 5px; padding: 5px 8px; border: 1px solid #d9d9d9; } .confirmation-dialog .content .buttons button:hover { background-color: #d9d9d9; border-color: silver; } .advisory .icon { height: 1.25em; width: 1.25em; vertical-align: text-bottom; display: inline-block; } .advisory .icon.verified { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .advisory .icon.shield { -webkit-mask: url("/images/shield.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .advisory .icon.clock { -webkit-mask: url("/images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .keychange { text-align: center; } .keychange .content { cursor: pointer; display: inline-block; padding: 5px 10px; background: #fff5c4; border-radius: 5px; } .verified-change { text-align: center; } .verified-change .content { cursor: pointer; display: inline-block; padding: 5px 10px; background: #fff5c4; border-radius: 5px; } .message-list .last-seen-indicator-view { padding-top: 25px; padding-bottom: 35px; } .message-list .last-seen-indicator-view .bar { display: flex; flex-direction: column; align-items: center; padding: 5px; border-top: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.055); background-color: rgba(0, 0, 0, 0.05); } .message-list .last-seen-indicator-view .text { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; background-color: white; border-radius: 1.5em; padding: 10px 21px 9px 21px; } .discussion-container .scroll-down-button-view { position: absolute; right: 20px; bottom: 10px; } .discussion-container .scroll-down-button-view button { height: 44px; width: 44px; border-radius: 22px; text-align: center; background-color: white; border: none; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2); } .discussion-container .scroll-down-button-view button .icon { -webkit-mask: url("/images/down.svg") no-repeat center; -webkit-mask-size: 100%; background-color: silver; height: 100%; width: 100%; } .discussion-container .scroll-down-button-view button .icon:hover { background-color: #616161; } .discussion-container .scroll-down-button-view button.new-messages { background-color: #2090ea; } .discussion-container .scroll-down-button-view button.new-messages .icon { -webkit-mask: url("/images/down.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .discussion-container .scroll-down-button-view button.new-messages:hover { background-color: #1472bd; } .ios #header { height: 64px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); border-width: 0 1px 1px 0; background-color: #f3f3f3; color: #454545; } .ios #header h1 { display: none; } .ios .gutter { border-right: 1px solid rgba(0, 0, 0, 0.1); } .ios .gutter .content { height: calc(100% - 64px); background: rgba(0, 0, 0, 0.1); } .ios .gutter .contact { background: #f3f3f3; margin-right: 0; } .ios .gutter .contact.selected { background: #2090ea; color: white; } .ios .gutter .contact.selected .last-timestamp { color: white; } .ios .banner { top: 15px; } .ios .tool-bar { float: left; padding: 15px; } .ios input[type=text]:active, .ios input[type=text]:focus, .ios input[type=search]:active, .ios input[type=search]:focus, .ios input[type=search].active, .ios form.active { outline-offset: 0; outline: -webkit-focus-ring-color auto 5px; } .ios input.search { border-radius: 5px; width: 220px; height: 34px; padding-left: 30px; line-height: 34px; background-color: #dddddd; } .ios input.search.active.rtl { background-position: left 30px center; } .ios .conversation-header { background-color: #f3f3f3; color: #454545; border-color: rgba(0, 0, 0, 0.05); text-align: left; } .ios .conversation-header .conversation-title { line-height: 64px; } .ios .conversation-header .conversation-title .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #454545; } .ios .conversation-header .avatar { display: none; } .ios .settings h3, .ios .menu-list li { text-transform: capitalize; } .ios .bottom-bar { padding: 15px; min-height: 30px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .ios .bottom-bar form.send { border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.1); } .ios .error-message.content, .ios .control .content { padding: 10px; } .ios .attachments .bubbled { border-radius: 15px; margin-bottom: 0.25em; padding: 10px; position: relative; } .ios .attachments .bubbled:before, .ios .attachments .bubbled:after { content: ''; display: block; border-radius: 20px; position: absolute; width: 10px; } .ios .attachments .bubbled:before { right: -1px; bottom: -3px; height: 10px; border-radius: 20px; background: #2090ea; } .ios .attachments .bubbled:after { height: 11px; right: -6px; bottom: -3px; background: #eee; } .ios .bubble .content { margin-bottom: 5px; } .ios .bubble .content .body { display: inline-block; padding: 10px; position: relative; word-break: break-word; } .ios .bubble .content .body:before, .ios .bubble .content .body:after { content: ''; display: block; border-radius: 20px; position: absolute; width: 10px; } .ios .bubble .content .body:before { right: -1px; bottom: -3px; height: 10px; border-radius: 20px; background: #2090ea; } .ios .bubble .content .body:after { height: 11px; right: -6px; bottom: -3px; background: #eee; } .ios .bubble .content, .ios .bubble .attachments img { border-radius: 15px; } .ios .bubble .attachments img { background-color: white; } .ios .bubble .meta { clear: both; } .ios .incoming .bubbled { background-color: white; color: black; float: left; max-width: 100%; } .ios .incoming .bubbled:before { left: -1px; background-color: white; } .ios .incoming .bubbled:after { left: -6px; } .ios .incoming .content { background-color: white; color: black; float: left; } .ios .incoming .content .body:before { left: -1px; background-color: white; } .ios .incoming .content .body:after { left: -6px; } .ios .outgoing .content, .ios .outgoing .attachments .bubbled { background-color: #2090ea; max-width: 100%; float: right; } .ios .outgoing .content, .ios .outgoing .content .body, .ios .outgoing .content a, .ios .outgoing .attachments .bubbled, .ios .outgoing .attachments .bubbled .body, .ios .outgoing .attachments .bubbled a { color: white; } .ios .outgoing .content::selection, .ios .outgoing .content .body::selection, .ios .outgoing .content a::selection, .ios .outgoing .attachments .bubbled::selection, .ios .outgoing .attachments .bubbled .body::selection, .ios .outgoing .attachments .bubbled a::selection { background: white; color: #454545; } .ios .outgoing .attachments .fileView .icon { -webkit-mask: url("../images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .ios .outgoing .attachments .fileView .icon.audio { -webkit-mask: url("../images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .ios .outgoing .attachments .fileView .icon.video { -webkit-mask: url("../images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .ios .outgoing .attachments .fileView .icon.voice { -webkit-mask: url("../images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .ios .attachment { margin-bottom: 1px; } .ios .attachment a { border-radius: 15px; } .ios .hourglass { display: inline-block; position: relative; -webkit-mask: url("../images/hourglass_full.svg") no-repeat center; -webkit-mask-size: 100%; background-color: transparent; background-size: 100%; } .ios .hourglass, .ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after { width: 13px; height: 11px; } .ios .hourglass .sand, .ios .hourglass:before, .ios .hourglass:after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; } .ios .hourglass .sand { background: #999; } .ios .hourglass:after { -webkit-mask: url("../images/hourglass_empty.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #999; } .android #header { background-color: #2090ea; color: white; transition: background-color 0.5s; } .android #header.inactive { background-color: #f3f3f3; color: #454545; } .android .contact-details .name { font-weight: 400; } .android .conversation.placeholder .conversation-header { display: none; } .android .conversation-header.red, .android .bubble.red { background-color: #EF5350; } .android .conversation-header.pink, .android .bubble.pink { background-color: #EC407A; } .android .conversation-header.purple, .android .bubble.purple { background-color: #AB47BC; } .android .conversation-header.deep_purple, .android .bubble.deep_purple { background-color: #7E57C2; } .android .conversation-header.indigo, .android .bubble.indigo { background-color: #5C6BC0; } .android .conversation-header.blue, .android .bubble.blue { background-color: #2196F3; } .android .conversation-header.light_blue, .android .bubble.light_blue { background-color: #03A9F4; } .android .conversation-header.cyan, .android .bubble.cyan { background-color: #00BCD4; } .android .conversation-header.teal, .android .bubble.teal { background-color: #009688; } .android .conversation-header.green, .android .bubble.green { background-color: #4CAF50; } .android .conversation-header.light_green, .android .bubble.light_green { background-color: #7CB342; } .android .conversation-header.orange, .android .bubble.orange { background-color: #FF9800; } .android .conversation-header.deep_orange, .android .bubble.deep_orange { background-color: #FF5722; } .android .conversation-header.amber, .android .bubble.amber { background-color: #FFB300; } .android .conversation-header.blue_grey, .android .bubble.blue_grey { background-color: #607D8B; } .android .conversation-header.grey, .android .bubble.grey { background-color: #999999; } .android .conversation-header.default, .android .bubble.default { background-color: #2090ea; } .android .bottom-bar { min-height: 10px; } .android .bubble { padding: 9px 12px; border-radius: 5px; box-shadow: 0 3px 3px -4px black; } .android .outgoing .bubble { background-color: white; } .android .outgoing .hourglass { display: inline-block; position: relative; -webkit-mask: url("../images/hourglass_full.svg") no-repeat center; -webkit-mask-size: 100%; background-color: transparent; background-size: 100%; } .android .outgoing .hourglass, .android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after { width: 13px; height: 11px; } .android .outgoing .hourglass .sand, .android .outgoing .hourglass:before, .android .outgoing .hourglass:after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; } .android .outgoing .hourglass .sand { background: #999; } .android .outgoing .hourglass:after { -webkit-mask: url("../images/hourglass_empty.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #999; } .android .incoming .hourglass { display: inline-block; position: relative; -webkit-mask: url("../images/hourglass_full.svg") no-repeat center; -webkit-mask-size: 100%; background-color: transparent; background-size: 100%; } .android .incoming .hourglass, .android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after { width: 13px; height: 11px; } .android .incoming .hourglass .sand, .android .incoming .hourglass:before, .android .incoming .hourglass:after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; } .android .incoming .hourglass .sand { background: #fff; } .android .incoming .hourglass:after { -webkit-mask: url("../images/hourglass_empty.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #fff; } .android .incoming .bubble .sender, .android .incoming .bubble .content, .android .incoming .bubble .body, .android .incoming .bubble .meta, .android .incoming .bubble a, .android .incoming .bubble .fileView { color: white; } .android .incoming .bubble .sender::selection, .android .incoming .bubble .content::selection, .android .incoming .bubble .body::selection, .android .incoming .bubble .meta::selection, .android .incoming .bubble a::selection, .android .incoming .bubble .fileView::selection { background: white; color: #454545; } .android .incoming .bubble .attachments a, .android .incoming .bubble .content a { color: #f3f3f3; } .android .incoming .bubble .fileView .icon { -webkit-mask: url("../images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .incoming .bubble .fileView .icon.audio { -webkit-mask: url("../images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .incoming .bubble .fileView .icon.video { -webkit-mask: url("../images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .incoming .bubble .fileView .icon.voice { -webkit-mask: url("../images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android button.clock { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android button.clock:focus, .android button.clock:hover { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .inactive button.clock { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } .android .inactive button.clock:focus, .android .inactive button.clock:hover { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .android button.hamburger { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android button.hamburger:focus, .android button.hamburger:hover { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .inactive button.hamburger { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } .android .inactive button.hamburger:focus, .android .inactive button.hamburger:hover { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .android button.back { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android button.back:focus, .android button.back:hover { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android .inactive button.back { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(0, 0, 0, 0.5); } .android .inactive button.back:focus, .android .inactive button.back:hover { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .android-dark { color: #CCCCCC; } .android-dark .app-loading-screen { background-color: #333333; } .android-dark .gutter .content { background-color: #333333; } .android-dark a { color: #57a5e5; } .android-dark hr { border-color: #333333; } .android-dark .expiredAlert { color: #333333; } .android-dark .expiredAlert button { color: #333333; } .android-dark #header { background-color: #292929; color: white; transition: background-color 0.5s; } .android-dark #header.inactive { background-color: #333333; color: #CCCCCC; } .android-dark button, .android-dark .confirmation-dialog .content .buttons button { background-color: #ccc; border: 1px solid #292929; } .android-dark button:hover, .android-dark .confirmation-dialog .content .buttons button:hover { background-color: #b8b8b8; } .android-dark .message-detail, .android-dark .message-container, .android-dark .conversation, .android-dark .discussion-container { background-color: #171717; } .android-dark .modal .content { background-color: #333333; } .android-dark .lightbox .content { background-color: transparent; } .android-dark .key-verification .key { background-color: #030303; border-color: #292929; } .android-dark .key-verification .icon.verified { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .key-verification .icon.shield { -webkit-mask: url("/images/shield.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .menu-list { background-color: #292929; color: #CCCCCC; } .android-dark .menu-list li:hover { background-color: #333333; } .android-dark .content textarea { background-color: #171717; border-width: 0px; color: white; } .android-dark .content textarea::selection { background: white; color: #454545; } .android-dark .flex { background-color: #171717; } .android-dark .flex .send-message { background-color: #171717; color: #CCCCCC; } .android-dark .contact-details .name { font-weight: 400; } .android-dark .contact-details .number { color: #807f7f; } .android-dark .contact-details .number .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #807f7f; } .android-dark .group-member-list .members .contact, .android-dark .new-group-update .members .contact, .android-dark .attachment-previews img { background-color: #171717; border-color: #333333; } .android-dark .conversation.placeholder .conversation-header { display: none; } .android-dark .conversation .conversation-loading-screen { background-color: #171717; } .android-dark .avatar.red, .android-dark .conversation-header.red, .android-dark .bubble.red { background-color: #D32F2F; } .android-dark .avatar.pink, .android-dark .conversation-header.pink, .android-dark .bubble.pink { background-color: #C2185B; } .android-dark .avatar.purple, .android-dark .conversation-header.purple, .android-dark .bubble.purple { background-color: #7B1FA2; } .android-dark .avatar.deep_purple, .android-dark .conversation-header.deep_purple, .android-dark .bubble.deep_purple { background-color: #512DA8; } .android-dark .avatar.indigo, .android-dark .conversation-header.indigo, .android-dark .bubble.indigo { background-color: #303F9F; } .android-dark .avatar.blue, .android-dark .conversation-header.blue, .android-dark .bubble.blue { background-color: #1976D2; } .android-dark .avatar.light_blue, .android-dark .conversation-header.light_blue, .android-dark .bubble.light_blue { background-color: #0288D1; } .android-dark .avatar.cyan, .android-dark .conversation-header.cyan, .android-dark .bubble.cyan { background-color: #0097A7; } .android-dark .avatar.teal, .android-dark .conversation-header.teal, .android-dark .bubble.teal { background-color: #00796B; } .android-dark .avatar.green, .android-dark .conversation-header.green, .android-dark .bubble.green { background-color: #388E3C; } .android-dark .avatar.light_green, .android-dark .conversation-header.light_green, .android-dark .bubble.light_green { background-color: #689F38; } .android-dark .avatar.orange, .android-dark .conversation-header.orange, .android-dark .bubble.orange { background-color: #F57C00; } .android-dark .avatar.deep_orange, .android-dark .conversation-header.deep_orange, .android-dark .bubble.deep_orange { background-color: #E64A19; } .android-dark .avatar.amber, .android-dark .conversation-header.amber, .android-dark .bubble.amber { background-color: #FFA000; } .android-dark .avatar.blue_grey, .android-dark .conversation-header.blue_grey, .android-dark .bubble.blue_grey { background-color: #455A64; } .android-dark .avatar.grey, .android-dark .conversation-header.grey, .android-dark .bubble.grey { background-color: #666666; } .android-dark .avatar.default, .android-dark .conversation-header.default, .android-dark .bubble.default { background-color: #2090ea; } .android-dark .message-list .advisory .content { background-color: #333333; } .android-dark .message-list .advisory .shield { -webkit-mask: url("/images/shield.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .message-list .advisory .verified { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .message-list .advisory .clock { -webkit-mask: url("/images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .inactive .conversation-header { background-color: #333333 !important; color: #CCCCCC; } .android-dark .inactive .conversation-header .verified-icon { -webkit-mask: url("/images/verified-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .sent .status { display: inline-block; -webkit-mask: url("../images/check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .delivered .status { display: inline-block; -webkit-mask: url("../images/double-check.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .file-input .paperclip:before { content: ''; display: inline-block; width: 24px; height: 24px; -webkit-mask: url("../images/paperclip.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; transform: rotateZ(-45deg); } .android-dark .capture-audio .microphone:before { -webkit-mask: url("/images/microphone.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .conversations { background-color: #292929; } .android-dark .conversations .conversation-list-item { background-color: #171717; color: #CCCCCC; } .android-dark .bottom-bar { min-height: 10px; background-color: #292929; } .android-dark .bottom-bar form.send { background: #171717; } .android-dark .search { background-color: #171717; border-color: #292929; color: white; } .android-dark .search::selection { background: white; color: #454545; } .android-dark .search.active.ltr, .android-dark .search.active.rtl { background-image: url("../images/x_white.svg"); } .android-dark .bubble { padding: 9px 12px; border-radius: 5px; box-shadow: 0 3px 3px -4px black; } .android-dark .outgoing .bubble { background-color: #333333; color: white; color: #CCCCCC; } .android-dark .outgoing .bubble::selection { background: white; color: #454545; } .android-dark .outgoing .hourglass { display: inline-block; position: relative; -webkit-mask: url("../images/hourglass_full.svg") no-repeat center; -webkit-mask-size: 100%; background-color: transparent; background-size: 100%; } .android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after { width: 13px; height: 11px; } .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; } .android-dark .outgoing .hourglass .sand { background: #999; } .android-dark .outgoing .hourglass:after { -webkit-mask: url("../images/hourglass_empty.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #999; } .android-dark .incoming .hourglass { display: inline-block; position: relative; -webkit-mask: url("../images/hourglass_full.svg") no-repeat center; -webkit-mask-size: 100%; background-color: transparent; background-size: 100%; } .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after { width: 13px; height: 11px; } .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; } .android-dark .incoming .hourglass .sand { background: #fff; } .android-dark .incoming .hourglass:after { -webkit-mask: url("../images/hourglass_empty.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #fff; } .android-dark .incoming .bubble .sender, .android-dark .incoming .bubble .content, .android-dark .incoming .bubble .body, .android-dark .incoming .bubble .meta, .android-dark .incoming .bubble a, .android-dark .incoming .bubble .fileView { color: white; } .android-dark .incoming .bubble .sender::selection, .android-dark .incoming .bubble .content::selection, .android-dark .incoming .bubble .body::selection, .android-dark .incoming .bubble .meta::selection, .android-dark .incoming .bubble a::selection, .android-dark .incoming .bubble .fileView::selection { background: white; color: #454545; } .android-dark .incoming .bubble .content a { color: #f3f3f3; } .android-dark .incoming .bubble .fileView .icon { -webkit-mask: url("../images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .incoming .bubble .fileView .icon.audio { -webkit-mask: url("../images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .incoming .bubble .fileView .icon.video { -webkit-mask: url("../images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .incoming .bubble .fileView .icon.voice { -webkit-mask: url("../images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .outgoing .bubble .fileView .icon { -webkit-mask: url("../images/file.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .outgoing .bubble .fileView .icon.audio { -webkit-mask: url("../images/audio.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .outgoing .bubble .fileView .icon.video { -webkit-mask: url("../images/video.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark .outgoing .bubble .fileView .icon.voice { -webkit-mask: url("../images/voice.svg") no-repeat center; -webkit-mask-size: 100%; background-color: #CCCCCC; } .android-dark button.clock { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android-dark button.clock:focus, .android-dark button.clock:hover { -webkit-mask: url("../images/clock.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark button.hamburger { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android-dark button.hamburger:focus, .android-dark button.hamburger:hover { -webkit-mask: url("../images/menu.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark button.back { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: rgba(255, 255, 255, 0.8); } .android-dark button.back:focus, .android-dark button.back:hover { -webkit-mask: url("../images/back.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } .android-dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } .android-dark ::-webkit-scrollbar-track { background-color: transparent; } .android-dark .recorder { background: #292929; } .android-dark .message-list .last-seen-indicator-view .bar { border-top: 1px solid rgba(255, 255, 255, 0.0625); border-bottom: 1px solid rgba(0, 0, 0, 0.15); background-color: rgba(255, 255, 255, 0.1); } .android-dark .message-list .last-seen-indicator-view .text { background-color: #171717; } .android-dark .discussion-container .scroll-down-button-view button { background-color: #8d8d8d; } .android-dark .discussion-container .scroll-down-button-view button .icon { -webkit-mask: url("/images/down.svg") no-repeat center; -webkit-mask-size: 100%; background-color: black; } .android-dark .discussion-container .scroll-down-button-view button .icon:hover { background-color: white; } .android-dark .discussion-container .scroll-down-button-view button.new-messages { background-color: #2090ea; } .android-dark .discussion-container .scroll-down-button-view button.new-messages .icon { -webkit-mask: url("/images/down.svg") no-repeat center; -webkit-mask-size: 100%; background-color: white; } .android-dark .discussion-container .scroll-down-button-view button.new-messages:hover { background-color: #1472bd; } .android-dark .choose-file button:hover { background-color: #333333; } .android-dark .capture-audio button:hover { background-color: #333333; } .iti-flag { width: 16px; height: 11px; background: url("../img/flags.png"); } .iti-flag.ad { background-position: -16px 0; } .iti-flag.ae { background-position: -32px 0; } .iti-flag.af { background-position: -48px 0; } .iti-flag.ag { background-position: -64px 0; } .iti-flag.ai { background-position: -80px 0; } .iti-flag.al { background-position: -96px 0; } .iti-flag.am { background-position: -112px 0; } .iti-flag.ao { background-position: -128px 0; } .iti-flag.ar { background-position: -144px 0; } .iti-flag.as { background-position: -160px 0; } .iti-flag.at { background-position: -176px 0; } .iti-flag.au { background-position: -192px 0; } .iti-flag.aw { background-position: -208px 0; } .iti-flag.az { background-position: -224px 0; } .iti-flag.ba { background-position: -240px 0; } .iti-flag.bb { background-position: 0 -11px; } .iti-flag.bd { background-position: -16px -11px; } .iti-flag.be { background-position: -32px -11px; } .iti-flag.bf { background-position: -48px -11px; } .iti-flag.bg { background-position: -64px -11px; } .iti-flag.bh { background-position: -80px -11px; } .iti-flag.bi { background-position: -96px -11px; } .iti-flag.bj { background-position: -112px -11px; } .iti-flag.bm { background-position: -128px -11px; } .iti-flag.bn { background-position: -144px -11px; } .iti-flag.bo { background-position: -160px -11px; } .iti-flag.br { background-position: -176px -11px; } .iti-flag.bs { background-position: -192px -11px; } .iti-flag.bt { background-position: -208px -11px; } .iti-flag.bw { background-position: -224px -11px; } .iti-flag.by { background-position: -240px -11px; } .iti-flag.bz { background-position: 0 -22px; } .iti-flag.ca { background-position: -16px -22px; } .iti-flag.cd { background-position: -32px -22px; } .iti-flag.cf { background-position: -48px -22px; } .iti-flag.cg { background-position: -64px -22px; } .iti-flag.ch { background-position: -80px -22px; } .iti-flag.ci { background-position: -96px -22px; } .iti-flag.ck { background-position: -112px -22px; } .iti-flag.cl { background-position: -128px -22px; } .iti-flag.cm { background-position: -144px -22px; } .iti-flag.cn { background-position: -160px -22px; } .iti-flag.co { background-position: -176px -22px; } .iti-flag.cr { background-position: -192px -22px; } .iti-flag.cu { background-position: -208px -22px; } .iti-flag.cv { background-position: -224px -22px; } .iti-flag.cw { background-position: -240px -22px; } .iti-flag.cy { background-position: 0 -33px; } .iti-flag.cz { background-position: -16px -33px; } .iti-flag.de { background-position: -32px -33px; } .iti-flag.dj { background-position: -48px -33px; } .iti-flag.dk { background-position: -64px -33px; } .iti-flag.dm { background-position: -80px -33px; } .iti-flag.do { background-position: -96px -33px; } .iti-flag.dz { background-position: -112px -33px; } .iti-flag.ec { background-position: -128px -33px; } .iti-flag.ee { background-position: -144px -33px; } .iti-flag.eg { background-position: -160px -33px; } .iti-flag.er { background-position: -176px -33px; } .iti-flag.es { background-position: -192px -33px; } .iti-flag.et { background-position: -208px -33px; } .iti-flag.fi { background-position: -224px -33px; } .iti-flag.fj { background-position: -240px -33px; } .iti-flag.fk { background-position: 0 -44px; } .iti-flag.fm { background-position: -16px -44px; } .iti-flag.fo { background-position: -32px -44px; } .iti-flag.fr, .iti-flag.bl, .iti-flag.mf { background-position: -48px -44px; } .iti-flag.ga { background-position: -64px -44px; } .iti-flag.gb { background-position: -80px -44px; } .iti-flag.gd { background-position: -96px -44px; } .iti-flag.ge { background-position: -112px -44px; } .iti-flag.gf { background-position: -128px -44px; } .iti-flag.gh { background-position: -144px -44px; } .iti-flag.gi { background-position: -160px -44px; } .iti-flag.gl { background-position: -176px -44px; } .iti-flag.gm { background-position: -192px -44px; } .iti-flag.gn { background-position: -208px -44px; } .iti-flag.gp { background-position: -224px -44px; } .iti-flag.gq { background-position: -240px -44px; } .iti-flag.gr { background-position: 0 -55px; } .iti-flag.gt { background-position: -16px -55px; } .iti-flag.gu { background-position: -32px -55px; } .iti-flag.gw { background-position: -48px -55px; } .iti-flag.gy { background-position: -64px -55px; } .iti-flag.hk { background-position: -80px -55px; } .iti-flag.hn { background-position: -96px -55px; } .iti-flag.hr { background-position: -112px -55px; } .iti-flag.ht { background-position: -128px -55px; } .iti-flag.hu { background-position: -144px -55px; } .iti-flag.id { background-position: -160px -55px; } .iti-flag.ie { background-position: -176px -55px; } .iti-flag.il { background-position: -192px -55px; } .iti-flag.in { background-position: -208px -55px; } .iti-flag.io { background-position: -224px -55px; } .iti-flag.iq { background-position: -240px -55px; } .iti-flag.ir { background-position: 0 -66px; } .iti-flag.is { background-position: -16px -66px; } .iti-flag.it { background-position: -32px -66px; } .iti-flag.jm { background-position: -48px -66px; } .iti-flag.jo { background-position: -64px -66px; } .iti-flag.jp { background-position: -80px -66px; } .iti-flag.ke { background-position: -96px -66px; } .iti-flag.kg { background-position: -112px -66px; } .iti-flag.kh { background-position: -128px -66px; } .iti-flag.ki { background-position: -144px -66px; } .iti-flag.km { background-position: -160px -66px; } .iti-flag.kn { background-position: -176px -66px; } .iti-flag.kp { background-position: -192px -66px; } .iti-flag.kr { background-position: -208px -66px; } .iti-flag.kw { background-position: -224px -66px; } .iti-flag.ky { background-position: -240px -66px; } .iti-flag.kz { background-position: 0 -77px; } .iti-flag.la { background-position: -16px -77px; } .iti-flag.lb { background-position: -32px -77px; } .iti-flag.lc { background-position: -48px -77px; } .iti-flag.li { background-position: -64px -77px; } .iti-flag.lk { background-position: -80px -77px; } .iti-flag.lr { background-position: -96px -77px; } .iti-flag.ls { background-position: -112px -77px; } .iti-flag.lt { background-position: -128px -77px; } .iti-flag.lu { background-position: -144px -77px; } .iti-flag.lv { background-position: -160px -77px; } .iti-flag.ly { background-position: -176px -77px; } .iti-flag.ma { background-position: -192px -77px; } .iti-flag.mc { background-position: -208px -77px; } .iti-flag.md { background-position: -224px -77px; } .iti-flag.me { background-position: -112px -154px; height: 12px; } .iti-flag.mg { background-position: 0 -88px; } .iti-flag.mh { background-position: -16px -88px; } .iti-flag.mk { background-position: -32px -88px; } .iti-flag.ml { background-position: -48px -88px; } .iti-flag.mm { background-position: -64px -88px; } .iti-flag.mn { background-position: -80px -88px; } .iti-flag.mo { background-position: -96px -88px; } .iti-flag.mp { background-position: -112px -88px; } .iti-flag.mq { background-position: -128px -88px; } .iti-flag.mr { background-position: -144px -88px; } .iti-flag.ms { background-position: -160px -88px; } .iti-flag.mt { background-position: -176px -88px; } .iti-flag.mu { background-position: -192px -88px; } .iti-flag.mv { background-position: -208px -88px; } .iti-flag.mw { background-position: -224px -88px; } .iti-flag.mx { background-position: -240px -88px; } .iti-flag.my { background-position: 0 -99px; } .iti-flag.mz { background-position: -16px -99px; } .iti-flag.na { background-position: -32px -99px; } .iti-flag.nc { background-position: -48px -99px; } .iti-flag.ne { background-position: -64px -99px; } .iti-flag.nf { background-position: -80px -99px; } .iti-flag.ng { background-position: -96px -99px; } .iti-flag.ni { background-position: -112px -99px; } .iti-flag.nl, .iti-flag.bq { background-position: -128px -99px; } .iti-flag.no { background-position: -144px -99px; } .iti-flag.np { background-position: -160px -99px; } .iti-flag.nr { background-position: -176px -99px; } .iti-flag.nu { background-position: -192px -99px; } .iti-flag.nz { background-position: -208px -99px; } .iti-flag.om { background-position: -224px -99px; } .iti-flag.pa { background-position: -240px -99px; } .iti-flag.pe { background-position: 0 -110px; } .iti-flag.pf { background-position: -16px -110px; } .iti-flag.pg { background-position: -32px -110px; } .iti-flag.ph { background-position: -48px -110px; } .iti-flag.pk { background-position: -64px -110px; } .iti-flag.pl { background-position: -80px -110px; } .iti-flag.pm { background-position: -96px -110px; } .iti-flag.pr { background-position: -112px -110px; } .iti-flag.ps { background-position: -128px -110px; } .iti-flag.pt { background-position: -144px -110px; } .iti-flag.pw { background-position: -160px -110px; } .iti-flag.py { background-position: -176px -110px; } .iti-flag.qa { background-position: -192px -110px; } .iti-flag.re { background-position: -208px -110px; } .iti-flag.ro { background-position: -224px -110px; } .iti-flag.rs { background-position: -240px -110px; } .iti-flag.ru { background-position: 0 -121px; } .iti-flag.rw { background-position: -16px -121px; } .iti-flag.sa { background-position: -32px -121px; } .iti-flag.sb { background-position: -48px -121px; } .iti-flag.sc { background-position: -64px -121px; } .iti-flag.sd { background-position: -80px -121px; } .iti-flag.se { background-position: -96px -121px; } .iti-flag.sg { background-position: -112px -121px; } .iti-flag.sh { background-position: -128px -121px; } .iti-flag.si { background-position: -144px -121px; } .iti-flag.sk { background-position: -160px -121px; } .iti-flag.sl { background-position: -176px -121px; } .iti-flag.sm { background-position: -192px -121px; } .iti-flag.sn { background-position: -208px -121px; } .iti-flag.so { background-position: -224px -121px; } .iti-flag.sr { background-position: -240px -121px; } .iti-flag.ss { background-position: 0 -132px; } .iti-flag.st { background-position: -16px -132px; } .iti-flag.sv { background-position: -32px -132px; } .iti-flag.sx { background-position: -48px -132px; } .iti-flag.sy { background-position: -64px -132px; } .iti-flag.sz { background-position: -80px -132px; } .iti-flag.tc { background-position: -96px -132px; } .iti-flag.td { background-position: -112px -132px; } .iti-flag.tg { background-position: -128px -132px; } .iti-flag.th { background-position: -144px -132px; } .iti-flag.tj { background-position: -160px -132px; } .iti-flag.tk { background-position: -176px -132px; } .iti-flag.tl { background-position: -192px -132px; } .iti-flag.tm { background-position: -208px -132px; } .iti-flag.tn { background-position: -224px -132px; } .iti-flag.to { background-position: -240px -132px; } .iti-flag.tr { background-position: 0 -143px; } .iti-flag.tt { background-position: -16px -143px; } .iti-flag.tv { background-position: -32px -143px; } .iti-flag.tw { background-position: -48px -143px; } .iti-flag.tz { background-position: -64px -143px; } .iti-flag.ua { background-position: -80px -143px; } .iti-flag.ug { background-position: -96px -143px; } .iti-flag.us { background-position: -112px -143px; } .iti-flag.uy { background-position: -128px -143px; } .iti-flag.uz { background-position: -144px -143px; } .iti-flag.va { background-position: -160px -143px; } .iti-flag.vc { background-position: -176px -143px; } .iti-flag.ve { background-position: -192px -143px; } .iti-flag.vg { background-position: -208px -143px; } .iti-flag.vi { background-position: -224px -143px; } .iti-flag.vn { background-position: -240px -143px; } .iti-flag.vu { background-position: 0 -154px; } .iti-flag.wf { background-position: -16px -154px; } .iti-flag.ws { background-position: -32px -154px; } .iti-flag.ye { background-position: -48px -154px; } .iti-flag.za { background-position: -64px -154px; } .iti-flag.zm { background-position: -80px -154px; } .iti-flag.zw { background-position: -96px -154px; } .intl-tel-input { position: relative; display: inline-block; } .intl-tel-input * { box-sizing: border-box; -moz-box-sizing: border-box; } .intl-tel-input .hide { display: none; } .intl-tel-input .v-hide { visibility: hidden; } .intl-tel-input input, .intl-tel-input input[type=text], .intl-tel-input input[type=tel] { position: relative; z-index: 0; margin-top: 0 !important; margin-bottom: 0 !important; padding-left: 44px; margin-left: 0; } .intl-tel-input .flag-dropdown { position: absolute; top: 0; bottom: 0; padding: 1px; } .intl-tel-input .flag-dropdown:hover { cursor: pointer; } .intl-tel-input .flag-dropdown:hover .selected-flag { background-color: rgba(0, 0, 0, 0.05); } .intl-tel-input input[disabled] + .flag-dropdown:hover, .intl-tel-input input[readonly] + .flag-dropdown:hover { cursor: default; } .intl-tel-input input[disabled] + .flag-dropdown:hover .selected-flag, .intl-tel-input input[readonly] + .flag-dropdown:hover .selected-flag { background-color: transparent; } .intl-tel-input .selected-flag { z-index: 1; position: relative; width: 38px; height: 100%; padding: 0 0 0 8px; } .intl-tel-input .selected-flag .iti-flag { position: absolute; top: 50%; margin-top: -5px; } .intl-tel-input .selected-flag .arrow { position: relative; top: 50%; margin-top: -2px; left: 20px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; } .intl-tel-input .selected-flag .arrow.up { border-top: none; border-bottom: 4px solid #555; } .intl-tel-input .country-list { list-style: none; position: absolute; z-index: 2; padding: 0; margin: 0 0 0 -1px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); background-color: white; border: 1px solid #CCC; width: 430px; max-height: 200px; overflow-y: scroll; } .intl-tel-input .country-list .iti-flag { display: inline-block; } .intl-tel-input .country-list .divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #CCC; } .intl-tel-input .country-list .country { padding: 5px 10px; } .intl-tel-input .country-list .country .dial-code { color: #999; } .intl-tel-input .country-list .country.highlight { background-color: rgba(0, 0, 0, 0.05); } .intl-tel-input .country-list .iti-flag, .intl-tel-input .country-list .country-name { margin-right: 6px; } .iti-flag { background: url("../images/flags.png"); } #install { height: 100%; background: #2090ea; color: white; text-align: center; font-size: 16px; overflow: auto; } #install input, #install button, #install select, #install textarea { font-family: inherit; font-size: inherit; line-height: inherit; } #install .main { padding: 70px 0 50px; } #install .step { display: none; height: 100%; } #install .inner { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } #install .inner .step-body { margin-top: auto; width: 100%; max-width: 600px; } #install #signal-computer, #install #signal-phone { max-width: 50%; max-height: 250px; } #install p { max-width: 35em; margin: 1em auto; padding: 0 1em; line-height: 1.5em; font-size: 1.2em; font-weight: bold; } #install a { cursor: pointer; } #install a, #install a:visited, #install a:hover { text-decoration: none; } #install .button { display: inline-block; text-transform: uppercase; border: none; font-weight: bold; min-width: 300px; padding: 0.5em; margin: 0.5em 0; background: white; color: #2090ea; } #install .nav { width: 100%; bottom: 50px; margin-top: auto; padding: 20px; } #install .nav .button { margin-bottom: 3em; } #install .nav .dot { display: inline-block; cursor: pointer; margin: 10px; width: 20px; height: 20px; border-radius: 10px; background: white; border: solid 5px #2090ea; } #install .nav .dot.selected { background: #a2d2f4; } #install .link:hover, #install .link:focus { background: rgba(255, 255, 255, 0.3); outline: none; } #install .link, #install .link:visited, #install .link:hover { padding: 0 3px; color: white; font-weight: bold; border-bottom: dashed 2px white; text-decoration: none; } #install .container { min-width: 650px; } #install h1 { font-size: 30pt; font-weight: normal; padding-bottom: 10px; } #install h3.step { margin-top: 0; font-weight: bold; } #install .help { border-top: 2px solid #f3f3f3; padding: 1.5em 0.1em; } #install .install { display: inline-block; margin-top: 90px; } #install #qr { display: inline-block; min-height: 266px; } #install #qr img { border: 5px solid white; } #install #qr canvas { display: none; } #install #device-name { border: none; border-bottom: 1px solid white; padding: 8px; background: transparent; color: white; font-weight: bold; text-align: center; } #install #device-name::selection, #install #device-name a::selection { color: #454545; background: white; } #install #device-name::-moz-selection, #install #device-name a::-moz-selection { color: #454545; background: white; } #install #device-name:focus { outline: none; } #install #device-name:hover, #install #device-name:focus { background: rgba(255, 255, 255, 0.1); } #install #verifyCode, #install #code, #install #number { box-sizing: border-box; width: 100%; display: block; margin-bottom: 0.5em; text-align: center; } #install #request-voice, #install #request-sms { box-sizing: border-box; } #install #request-sms { width: 57%; float: right; } #install #request-voice { width: 40%; float: left; } #install .number-container { position: relative; margin-bottom: 0.5em; } #install .number-container .intl-tel-input, #install .number-container .number { width: 100%; } #install .number-container::after { visibility: hidden; content: ' '; display: inline-block; border-radius: 1.5em; width: 1.5em; height: 1.5em; line-height: 1.5em; color: #ffffff; position: absolute; top: 0; left: 100%; margin: 3px 8px; text-align: center; } #install .number-container.valid::after { visibility: visible; content: '✓'; background-color: #0f9d58; color: #ffffff; } #install .number-container.invalid::after { visibility: visible; content: '!'; background-color: #f44336; color: #ffffff; } #install #error { color: white; font-weight: bold; padding: 0.5em; text-align: center; } #install #error { background-color: #f44336; } #install #error:before { content: '\26a0'; padding-right: 0.5em; } #install .narrow { margin: auto; box-sizing: border-box; width: 275px; max-width: 100%; } #install ul.country-list { min-width: 197px !important; } #install .confirmation-dialog, #install .progress-dialog, #install .error-dialog { padding: 1em; text-align: left; } #install .number { text-align: center; } #install .confirmation-dialog button, #install .error-dialog button { float: right; margin-left: 10px; } #install .progress-dialog { text-align: center; padding: 1em; width: 100%; max-width: 600px; margin: auto; } #install .progress-dialog .status { padding: 1em; } #install .progress-dialog .bar-container { height: 1em; background-color: #f3f3f3; border: solid 1px white; } #install .progress-dialog .bar { width: 0; height: 100%; background-color: #a2d2f4; transition: width 0.25s; } #install .error-dialog { display: none; } #install .modal-container { display: none; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); top: 0; padding-top: 10em; text-align: center; } #install .modal-container .modal-main { display: inline-block; width: 80%; max-width: 500px; border: solid 2px #2090ea; background: white; margin: 10% auto; box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); } #install .modal-container .modal-main h4 { background-color: #2090ea; color: white; padding: 1em; margin: 0; text-align: left; } /*# sourceMappingURL=manifest.css.map */